Remix IDE Plugin Integration
This tutorial details how to deploy and run NEAR smart contract on Remix IDE. It is a no-setup tool with a GUI for developing NEAR smart contract.
Connect to Remix IDE
WELLDONE Code is the official Remix IDE Plug-in. Please visit the Remix IDE and follow the guide below.
Click Plugin Manager button in the left bar and search for CODE BY WELLDONE STUDIO and click the Activate button.
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/plugin-manager.png’).default} alt=’plugin-manager’ style={{width: ‘500px’, marginRight: ’10px’, display: ‘inline’}}/>
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/activate-plugin.png’).default} alt=’active-plugin’ style={{width: ‘300px’, display: ‘inline’}}/>
Select a Chain
Click on NEAR(NVM) in the list of chains.
If you click the Documentation
 button, go to WELL DONE Docs, and if you find a problem or have any questions while using it, click the Make an issue
 button to go to the Github Repository and feel free to create an issue.
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/select-chain.png’).default} alt=’select-chain’ style={{width: ‘318px’}}/>
Install a browser extension wallet
- :::info
- Other wallets will be supported soon, and WELLDONE Wallet can be used now.
- ::
After choosing a chain, click the Connect to WELLDONE
 button to connect to the WELLDONE Wallet.
If you haven’t installed the WELLDONE Wallet yet, please follow the following manual to install and create a wallet and create an account for the selected chain. Finally, go into the Setting tab of your wallet and activate Developer Mode.
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/wallet-developer-mode.png’).default} alt=’wallet-developer-mode’ style={{width: ‘318px’, marginBottom: ’10px’}}/>
And you must click the Refresh button in the upper right corner of the plug-in to apply changes to your wallet.
Create the Project
In NEAR, you can write smart contracts with AssemblyScript, Rust, JavaScript, and TypeScript. Because the structure of the contract is different in each language, WELLDONE Code provides two features to help developers new to NEAR.
Select a Template
Create a simple example contract code written in AssemblyScript, Rust, JavaScript, and TypeScript. You can create a sample contract by selecting the template option and clicking the Create
button. More templates may be found at NEAR Samples.
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/template-code-near.png’).default} alt=’template-code-near’ style={{width: ‘318px’}}/>
New Project
Automatically generate a contract structure based on the smart contract language you want to use. Select the language option, write a name for the project, and click the Create
button to create a contract structure that is appropriate for the language.
- <img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/new-project-near.png’).default} alt=’new-project-near’ style={{width: ‘318px’}}/>
-
::info
You can create your own contract projects without using the features above. However, for the remix plugin to build and deploy the contract, it must be built within the directorynear/
. If you start a new project, the structure should look like the following. - ::
1. Writing Contracts in Rust
near
└── <YOUR_PROJECT_NAME>
├── Cargo.toml
└── src
└── lib.rs
2. Writing Contracts in AssemblyScript
near
└── <YOUR_PROJECT_NAME>
└── assembly
├── as_types.d.ts
├── index.ts
└── tsconfig.json
3. Writing Contracts in TypeScript
near
└── <YOUR_PROJECT_NAME>
├── package.json
├── babel.config.json
├── tsconfig.json
└── src
└── contract.ts
4. Writing Contracts in JavaScript
near
└── <YOUR_PROJECT_NAME>
├── package.json
├── babel.config.json
└── src
└── contract.js
Compile the Contract
:::info
Six compilation options are now available in WELLDONE Code: Rust
, CARGO-NEAR
, EMBED-ABI
, AssemblyScript
, JavaScript
, and TypeScript
.
- We now only support the AMD compilation server, however, we will shortly add support for the ARM compilation server.
- ::
Step 1: Select the project you want to compile in the TARGET PROJECT section.
Step 2: Select a compilation option and click the Compile
button.
Step 3: When the compilation is complete, a wasm file is returned.
- <img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/project-compile.png’).default} alt=’project-compile’ style={{width: ‘318px’}}/>
-
::note
You can check the returned wasm file innear/<YOUR_PROJECT_NAME>/out
directory. - If you need to revise the contract and compile again, delete the
out
directory and click the compile button. - ::
1. Rust Compile
Using the cargo build
command to compile a smart contract written in Rust. Although it offers a stable compile, it is inconvenient to enter the method’s parameters directly when executing the contract.
2. CARGO-NEAR Compile (for Rust) – Experimental
Compile using cargo near
which is officially being developed by NEAR. If Compile is successful, an executable wasm binary file and a json file containing the ABI of the contract are created together. If you have deployed and imported a compiled contract using cargo-near
, you can find out the parameter type of the method, making it easier to run the contract.
However, because this feature is still under development, the near-sdk-rs
version must be specified at 4.1.0 or higher in the Cargo.toml
file, and unexpected issues may occur during compilation. Please check out the NEAR’s repository for more detail.
3. EMBED-ABI Compile (for Rust) – Experimental
When using -embed-abi
option in cargo-near
, generates a wasm file containing ABI inside. For contracts that have deployed the wasm file compiling with this option, you can get ABI information even when importing the contract through At Address
button. See the cargo-near repository for a detailed description of the options.
4. AssemblyScript Compile
Using asbuild
to compile a smart contract written in AssemblyScript. The compiler provides a stable compiling.
5. JavaScript & TypeScript Compile
- Using
near-sdk-js
to compile a smart contract written in JavaScript or TypeScript. -
::note
If you are using JavaScript or TypeScript compile options, you must write the name of the contract file you want to compile as follows to ensure that the compilation runs without error.- JavaScript:
contract.js
- TypeScript:
contract.ts
- JavaScript:
- ::
Deploy the Contract
- :::tip
- The WELLDONE Wallet automatically finds and imports networks associated with your wallet address. As a result, before deploying, you should choose whether you want to send a transaction to mainnet or testnet.
- ::
Step 1: If you have a compiled contract code, then Deploy
button will be activated.
Step 2: Enter the Account ID for which you want to deployed the contract and click the Deploy
button. If you want to add init function
, click Deploy Option
to add the method name and arguments.
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/deploy-option-near.png’).default} alt=’deploy-option-near’ style={{width: ‘318px’}}/>
Step 3: If the AccountId already has a deployed contract, confirm once more.
Step 4: Click the Send Tx
button in the WELLDONE Wallet to sign the transaction.
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/deploy-near.png’).default} alt=’deploy-near’ style={{width: ‘500px’}}/>
Step 5: A transaction success log will be printed to the terminal and the contract can be executed if contract deployment is successful.
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/deployed-contract-near.png’).default} alt=’deployed-contract-near’ style={{width: ‘318px’}}/>
Execute the Contract
:::info
There are two ways to import contracts.
- Automatically import contracts deployed through the above process.
- Import existing deployed contracts through
At Address
button.
:::
Step 1: Select the method to run.
Step 2: Add parameters as you needed.
Step 3: In the case of the Call
function, You can specify the number of NEAR tokens to attach to a function call and the GAS LIMIT.
Step 4: Run the method via clicking View
or Call
button. If you are sending a transaction, you must sign the transaction by clicking the Send Tx
button in the WELLDONE Wallet.
- <img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/function-call.png’).default} alt=’function-call’ style={{width: ‘318px’}}/>
-
::info
If you deployed the compiled contract usingCARGO-NEAR
orEMBED-ABI
options, you can execute the contract more easily using the ABI without directly entering the parameters of the method. - ::
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/cargo-near.png’).default} alt=’cargo-near’ style={{width: ‘250px’, display: ‘inline-block’}}/>
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/cargo-near1.png’).default} alt=’cargo-near1′ style={{width: ‘250px’, display: ‘inline-block’}}/>
<img src={require(‘https://raw.githubusercontent.com/Techbridge3/docs/master/website/static/docs/assets/remix-ide-plugin/cargo-near2.png’).default} alt=’cargo-near2′ style={{width: ‘250px’, display: ‘inline-block’}}/>