Skip to content

Commit 6ba1eb1

Browse files
nhussein11dawnkelly09github-actions[bot]Copiloteshaben
authored
Add Remix IDE (new IA) (#1174)
* fix: get started ready * fix: remix deploy * Update troubleshooting guide for Remix IDE and comment out 'Verify a Contract' section in navigation * fix: images and names * fix: remove verify contract file * fix: llms * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix: prerequisite * fix: llms * Grammarly things and reformat to FAQ style dropdowns for troubleshooting page * applies review feedback * Clean up formatting of titles and bullets * fix: feedback * fix: llms * fix: gifs lists wording * fix: llms * Remove outdated troubleshooting and verification guides for Remix IDE on Polkadot Hub. * fix errant merge conflict syntax, description length * applies review feedback * grammarly pass * minor fix and llms --------- Co-authored-by: Dawn Kelly <83190195+dawnkelly09@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: DAWN KELLY <dawnkelly09@gmail.com> Co-authored-by: Erin Shaben <eshaben@icloud.com>
1 parent 81b2f5f commit 6ba1eb1

33 files changed

+1243
-528
lines changed

.ai/categories/smart-contracts.md

Lines changed: 273 additions & 108 deletions
Large diffs are not rendered by default.

.ai/categories/tooling.md

Lines changed: 273 additions & 108 deletions
Large diffs are not rendered by default.
Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,83 @@
11
---
2+
title: Deploy Contracts Using Remix IDE
3+
description: Learn how to deploy smart contracts to the Polkadot Hub network and interact with them using the Remix IDE and wallet providers, covering deployment and state.
4+
categories: Smart Contracts, Tooling
25
url: https://docs.polkadot.com/smart-contracts/dev-environments/remix/deploy-a-contract/
36
---
47

5-
TODO
8+
# Deploy Smart Contracts Using Remix IDE
9+
10+
## Overview
11+
12+
After compiling your smart contract in Remix IDE, the next step is to deploy it to the Polkadot Hub network. This guide will walk you through the deployment process using a wallet provider and show you how to interact with your deployed contracts directly from the Remix interface.
13+
14+
## Prerequisites
15+
16+
Before deploying your contract, ensure you have:
17+
18+
- Completed the [Remix IDE setup](/smart-contracts/dev-environments/remix/get-started/){target=\_blank} and have a compiled contract ready.
19+
- A compatible wallet extension installed (e.g., [MetaMask](https://metamask.io/){target=\_blank} or [Talisman](https://www.talisman.xyz/){target=\_blank}).
20+
- Your wallet connected to the Polkadot Hub network. Check the [Connect to Polkadot](/smart-contracts/connect/){target=\_blank} guide for more information.
21+
- Test tokens in your wallet to cover deployment and transaction fees (available from the [Polkadot faucet](/smart-contracts/faucet/){target=\_blank}).
22+
23+
## Deploy Contracts
24+
25+
The steps to use Remix IDE to deploy a contract to Polkadot Hub are as follows:
26+
27+
1. Navigate to [Remix](https://remix.ethereum.org/){target=\_blank} in your web browser.
28+
2. Locate the **Deploy & Run Transactions** tab.
29+
3. Select the **Environment** dropdown.
30+
4. Select **Browser Extension**.
31+
5. Select the **Injected Provider - MetaMask** option.
32+
6. Click the **Deploy** button and then click **Confirm** in the wallet popup.
33+
34+
Once your contract is deployed successfully, you will see the deployment confirmation in the Remix terminal.
35+
36+
![](/images/smart-contracts/dev-environments/remix/deploy-a-contract/remix-1.gif)
37+
38+
## Interact with Contracts
39+
40+
Deployed contracts appear in the **Deployed/Unpinned Contracts** section. Follow these steps to interact with the deployed contract:
41+
42+
1. Expand the contract to view available methods.
43+
44+
!!! tip
45+
Pin your frequently used contracts to the **Pinned Contracts** section for easy access.
46+
47+
2. Select any of the exposed methods to interact with the contract.
48+
49+
You can use these methods to interact with your deployed contract by reading or writing to its state. Remix IDE uses a color-coding scheme for method buttons to help differentiate between types of available methods as follows:
50+
51+
- **Blue buttons**: indicate `view` or `pure` functions which read state only. Interactions do not create a new transaction and do not incur gas fees.
52+
- **Orange buttons**: label `non-payable` functions which change contract state but don't accept any value (ETH or other tokens) being sent with the transaction.
53+
- **Red buttons**: designate `payable` functions which create a transaction and can accept a value (ETH or other tokens) to send with the transaction.
54+
55+
If you deployed the `Counter.sol` contract from [Remix IDE setup](/smart-contracts/dev-environments/remix/get-started/){target=\_blank}, you can try interacting with the exposed methods as follows:
56+
57+
1. Select the **GetCount** button to read the current count value.
58+
59+
2. Select the **Increment** button to increment the count value.
60+
61+
3. Submit the transaction and click the **Confirm** button in the wallet pop-up.
62+
63+
Once the transaction is confirmed, you will see the updated count value in the Remix terminal.
64+
65+
![](/images/smart-contracts/dev-environments/remix/deploy-a-contract/remix-2.gif)
66+
67+
## Where to Go Next
68+
69+
You've successfully deployed and interacted with your smart contract on Polkadot Hub using Remix IDE. Continue enhancing your development workflow with these resources:
70+
71+
<div class="grid cards" markdown>
72+
73+
74+
75+
- <span class="badge guide">Guide</span> __Troubleshooting__
76+
77+
---
78+
79+
Find solutions to common issues when working with Remix IDE.
80+
81+
[:octicons-arrow-right-24: Get Started](/smart-contracts/dev-environments/remix/troubleshooting-faq/)
82+
83+
</div>

.ai/pages/smart-contracts-dev-environments-remix-get-started.md

Lines changed: 28 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,43 @@
11
---
2-
title: Use the Polkadot Remix IDE
3-
description: Explore the smart contract development and deployment process on Asset Hub using Remix IDE, a visual IDE for blockchain developers.
2+
title: Use the Remix IDE on Polkadot Hub
3+
description: Explore the smart contract development and deployment process on Polkadot Hub using Remix IDE, a visual IDE for blockchain developers.
44
categories: Smart Contracts, Tooling
55
url: https://docs.polkadot.com/smart-contracts/dev-environments/remix/get-started/
66
---
77

88
# Remix IDE
99

10-
!!! smartcontract "PolkaVM Preview Release"
11-
PolkaVM smart contracts with Ethereum compatibility are in **early-stage development and may be unstable or incomplete**.
12-
<div class="grid cards" markdown>
13-
- :octicons-code-16:{ .lg .middle } __Deploy NFTs Using Remix IDE__
14-
15-
---
16-
17-
Mint your NFT on Polkadot's Asset Hub. Use PolkaVM and OpenZeppelin to bring your digital asset to life with Polkadot Remix IDE.
18-
19-
<br>
20-
[:octicons-arrow-right-24: Get Started](/smart-contracts/cookbook/smart-contracts/deploy-nft/remix/){target=\_blank}
10+
## Introduction
2111

22-
- :octicons-code-16:{ .lg .middle } __Deploy ERC20s Using Remix IDE__
23-
24-
---
25-
26-
Mint your custom ERC-20 token on Polkadot's Asset Hub. Leverage PolkaVM and Polkadot Remix IDE to bring your blockchain project to life.
27-
28-
<br>
29-
[:octicons-arrow-right-24: Get Started](/smart-contracts/cookbook/smart-contracts/deploy-erc20/remix/){target=\_blank}
30-
</div>
31-
32-
!!! warning
33-
The Polkadot Remix IDE's contract compilation functionality is currently limited to Google Chrome. Alternative browsers are not recommended for this task.
34-
35-
## Overview
36-
37-
Remix IDE is a robust browser-based development environment for smart contracts. This guide will walk you through the essentials of the [Polkadot Remix IDE](https://remix.polkadot.io/){target=\_blank} to understand the processes of compiling, developing, and deploying smart contracts on Asset Hub.
12+
Remix IDE is a robust browser-based development environment for smart contracts. This guide will walk you through the essentials of the [Remix IDE](https://remix.ethereum.org/){target=\_blank} to understand the processes of compiling, developing, and deploying smart contracts on Polkadot Hub.
3813

3914
## Prerequisites
4015

4116
Before getting started, ensure you have:
4217

43-
- A web browser with [Talisman](https://talisman.xyz/){target=\_blank} extension installed.
18+
- A web browser with the [MetaMask](https://metamask.io/){target=\_blank} extension installed.
4419
- Basic understanding of Solidity programming.
45-
- Some WND test tokens to cover transaction fees (easily obtainable from the [Polkadot faucet](https://faucet.polkadot.io/westend?parachain=1000){target=\_blank}).
20+
- Some test tokens to cover transaction fees (easily obtainable from the [Polkadot faucet](/smart-contracts/faucet/){target=\_blank}).
4621

47-
## Accessing Remix IDE
22+
## Access Remix IDE
4823

49-
Navigate to [https://remix.polkadot.io/](https://remix.polkadot.io/){target=\_blank}. The interface will load with a default workspace containing sample contracts.
24+
Navigate to [https://remix.ethereum.org/](https://remix.ethereum.org/){target=\_blank}. The interface will load with a default workspace containing sample contracts.
5025

5126
![](/images/smart-contracts/dev-environments/remix/get-started/remix-1.webp)
5227

53-
In this interface, you can access a file explorer, edit your code, interact with various plugins for development, and use a terminal.
28+
In this interface, you can access a file explorer, edit your code, interact with various development plugins, and use a terminal.
5429

55-
## Creating a New Contract
30+
## Create a New Contract
5631

57-
To create a new contract using the Polkadot Remix IDE, you can follow these steps:
32+
To create a new contract using the Remix IDE, you can follow these steps:
5833

5934
1. Select the **Create a new file** button in the `contracts` folder.
6035

61-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-2.webp)
62-
6336
2. Name your file with a `.sol` extension, in this case, `Counter.sol`.
6437

65-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-3.webp)
66-
67-
3. Write your Solidity code in the editor.
38+
3. Write your Solidity code in the editor. You can use the following code as an example:
6839

69-
You can use the following code as an example:
70-
71-
???- "Counter.sol"
40+
??? code "Counter.sol"
7241

7342
```solidity
7443
// SPDX-License-Identifier: MIT
@@ -91,95 +60,46 @@ To create a new contract using the Polkadot Remix IDE, you can follow these step
9160
}
9261
```
9362

94-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-4.webp)
63+
![](/images/smart-contracts/dev-environments/remix/get-started/remix-2.gif)
9564

9665

97-
## Compiling Your Contract
66+
## Compile Your Contract
9867

99-
1. To compile your contract, you need to:
68+
To compile your contract, you need to:
10069

101-
1. Navigate to the **Solidity Compiler** tab (third icon in the left sidebar).
102-
2. Select **Compile** or use `Ctrl+S`.
70+
1. Navigate to the **Solidity Compiler** tab.
71+
2. Select **Compile** or use `Ctrl+S`.
10372

104-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-5.webp)
105-
106-
!!! note
107-
Compilation errors and warnings appear in the terminal panel at the bottom of the screen.
73+
!!! note
74+
Compilation errors and warnings appear in the terminal panel at the bottom of the screen.
10875

109-
1. After compiling your contract, you can navigate to the **File Explorer** tab (first icon in the left sidebar) and check that:
110-
1. The `artifact` folder is present.
76+
3. After compiling your contract, you can navigate to the **File Explorer** tab and check that:
77+
1. The **artifacts** folder is present.
11178
2. The `Counter_metadata.json` and the `Counter.json` files have been generated.
11279

113-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-6.webp)
114-
115-
## Deploying Contracts
116-
117-
1. To deploy your contract, you need to:
118-
119-
1. Navigate to the **Deploy & Run Transactions** tab (fourth icon in the left sidebar).
120-
2. Click the **Environment** dropdown.
121-
3. Select **Customize this list**.
122-
123-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-7.webp)
124-
125-
2. Enable the **Injected Provider - Talisman** option.
126-
127-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-8.webp)
128-
129-
4. Click again the **Environment** dropdown and select **Injected Provider - Talisman**.
130-
131-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-9.webp)
132-
133-
4. Click the **Deploy** button and then click **Approve** in the Talisman wallet popup.
134-
135-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-10.webp)
136-
137-
5. Once your contract is deployed successfully, you will see the following output in the Remix terminal:
138-
139-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-11.webp)
140-
141-
## Interacting with Contracts
142-
143-
Once deployed, your contract appears in the **Deployed/Unpinned Contracts** section:
144-
145-
1. Expand the contract to view available methods.
146-
147-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-12.webp)
148-
149-
!!! tip
150-
Pin your frequently used contracts to the **Pinned Contracts** section for easy access.
151-
152-
2. To interact with the contract, you can select any of the exposed methods.
153-
154-
![](/images/smart-contracts/dev-environments/remix/get-started/remix-13.webp)
155-
156-
In this way, you can interact with your deployed contract by reading its state or writing to it. The button color indicates the type of interaction available:
157-
158-
- **Red**: Modifies state and is payable.
159-
- **Orange**: Modifies state only.
160-
- **Blue**: Reads state.
80+
![](/images/smart-contracts/dev-environments/remix/get-started/remix-3.gif)
16181

16282
## Where to Go Next
16383

164-
The Polkadot Remix IDE offers an environment for developing, compiling, and deploying smart contracts on Asset Hub. Its intuitive interface allows developers to easily write Solidity code, compile contracts, and interact with them directly in the browser.
84+
Remix offers an environment for developing, compiling, and deploying smart contracts on Polkadot Hub. Its intuitive interface allows developers to easily write Solidity code, compile contracts, and interact with them directly in the browser.
16585

16686
Explore more about smart contracts through these resources:
16787

16888
<div class="grid cards" markdown>
16989

170-
- <span class="badge guide">Guide</span> __Smart Contracts on Polkadot__
90+
- <span class="badge guide">Guide</span> __Deploy a Contract__
17191

17292
---
17393

174-
Dive into advanced smart contract concepts.
94+
Learn how to deploy smart contracts using Remix IDE.
17595

176-
[:octicons-arrow-right-24: Get Started](/smart-contracts/)
96+
[:octicons-arrow-right-24: Get Started](/smart-contracts/dev-environments/remix/deploy-a-contract/)
17797

17898
- <span class="badge external">External</span> __OpenZeppelin Contracts__
17999

180100
---
181101

182-
Test your skills by deploying a simple contracts with prebuilt templates.
102+
Test your skills by deploying simple contracts using prebuilt templates.
183103

184104
[:octicons-arrow-right-24: Get Started](https://www.openzeppelin.com/solidity-contracts){target=\_blank}
185105

0 commit comments

Comments
 (0)