Skip to main content

Using Remix

Remix is an open-source, web-based development environment tailored for EVM smart contract development. It offers developers a comprehensive suite of tools for writing, deploying, and testing smart contracts in Solidity. For more information, visit Remix.

Add the Flow Network to MetaMask​

Add Flow Network

Navigate to the Using EVM page to find the button to add the Flow network information to your metamask.

Fund Your Flow Account​

Navigate to the Flow Previewnet Faucet to obtain FLOW tokens necessary for deploying a smart contract.

Deploying a Smart Contract Using Remix​

Deploy Smart Contract

HelloWorld Smart Contract​


_25
// SPDX-License-Identifier: MIT
_25
pragma solidity ^0.8.0;
_25
_25
contract HelloWorld {
_25
// Declare a public field of type string.
_25
string public greeting;
_25
_25
// Constructor to initialize the greeting.
_25
// In Solidity, the constructor is defined with the "constructor" keyword.
_25
constructor() {
_25
greeting = "Hello, World!";
_25
}
_25
_25
// Public function to change the greeting.
_25
// The "public" keyword makes the function accessible from outside the contract.
_25
function changeGreeting(string memory newGreeting) public {
_25
greeting = newGreeting;
_25
}
_25
_25
// Public function that returns the greeting.
_25
// In Solidity, explicit return types are declared.
_25
function hello() public view returns (string memory) {
_25
return greeting;
_25
}
_25
}

Steps to Deploy the HelloWorld Smart Contract​

  1. Create a file named HelloWorld.sol.
  2. Select Solidity Compiler and compile HelloWorld.sol.
  3. Select Deploy & Run Transactions.
  4. Make sure to select Injected Provider - Metamask in Environment dropdown.
  5. Deploy the HelloWorld smart contract.

Calling the Deployed Smart Contract​

Call Smart Contract

Using Ethers.js to Call the HelloWorld Smart Contract​


_28
// Import ethers from the ethers.js library
_28
const { ethers } = require('ethers');
_28
_28
// Define the contract ABI
_28
const contractABI = [
_28
"function hello() public view returns (string memory)"
_28
];
_28
_28
// Define the contract address
_28
const contractAddress = "0x8a120383e6057b1f3aef4fa9b89c2f1b0a695926";
_28
_28
// Connect to the Ethereum network
_28
// This example uses the default provider from ethers.js, which connects to the Ethereum mainnet.
_28
// For a testnet or custom RPC, use ethers.getDefaultProvider('networkName') or new ethers.providers.JsonRpcProvider(url)
_28
const provider = new ethers.providers.Web3Provider(window?.ethereum);
_28
_28
_28
// Create a new contract instance
_28
const contract = new ethers.Contract(contractAddress, contractABI, provider);
_28
_28
// Call the hello function of the contract
_28
async function getGreeting() {
_28
const greeting = await contract.hello();
_28
console.log(greeting);
_28
}
_28
_28
// Execute the function
_28
getGreeting();

  1. Create a new file under scripts.
  2. Paste in above JavaScript code.
  3. Click on green play button.
  4. Verify the greeting is "Hello World!"

Follow the steps below to change the greeting and retrieve the new greeting.

Updating the Deployed Smart Contract​

Update Smart Contract

  1. Select the HelloWorld.sol file.
  2. Select the Deploy and Run Transaction page.
  3. Make sure to select Injected Provider - Metamask in Environment dropdown.
  4. Type a new greeting in the text input next to orange changeGreeting button.
  5. Click on the orange changeGreeting button.
  6. Sign the Metamask transaction.
  7. Verify the greeting has changed by running the JavaScript above.

Flow Previewnet Block Explorer​

Coming Soon​