Deploy Smart Contract on Fuel Network step by step guide

Smart contract deployment does not require a special system and only needs a coding environment like Linux Ubuntu 22.04 (LTS) x64 OS
⚠️ You can Install Ubuntu Linux beside the Windows or use a cheap VPS for 5$ on DigitalOcean

Deploy Contract Steps

1. Install Dependecies

1.1 Install Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

rustup install stable

rustup update stable

rustup default stable

2. Install Fuelup Toolchain

2.1 Install Fuelup

curl --proto '=https' --tlsv1.2 -sSf https://fuellabs.github.io/fuelup/fuelup-init.sh | sh

Press Y and then ENTER on your keyboard

export PATH="$HOME/.fuelup/bin:$PATH"

source /root/.bashrc

If any command starting with Fuelup or Forc didn’t work, you can use the above command to fix it

fuelup toolchain install latest

fuelup self update

2.2 Install beta-2 testnet

fuelup toolchain install beta-2

fuelup default beta-2

2.3 Check Fuelup version

fuelup --version

2.4 set Beta-2 Testnet

fuelup default beta-2

3.Write the Contract

3.1 Create project

Create the project directory & go to it.

mkdir fuel-project

cd fuel-project

3.2 Config Contract

forc new counter-contract

nano counter-contract/src/main.sw

Above command opens the edit window of contract config file on this directory: counter-contract/src/main.sw

Paste in* the window the information below:*

contract;
storage {
counter: u64 = 0,
}
abi Counter {
#[storage(read, write)]
fn increment();
#[storage(read)]
fn count() -> u64;
}
impl Counter for Contract {
#[storage(read)]
fn count() -> u64 {
storage.counter
}
#[storage(read, write)]
fn increment() {
    storage.counter = storage.counter + 1;
}
}

Then:

Press Ctrl + X

Press Y

Press Enter

3.3 Build Contract

Make sure you are in fuel-project directory then:

cd counter-contract

 forc build

4. Create Wallet

4.1 Initialize Wallet

!!! Choose 1 of the next 2 commands:

Create New Wallet

forc-wallet init

Set Password

Save 12 Words Recover Phrase

Recover Old Wallet

forc-wallet import

It asks you your wallet 12 words recovery phrase

Enter 12 Words Recovery Phrase

Set Password

4.2 Create Wallet

forc-wallet new

Enter Your Password

It gives you a wallet address like the example below:

fuel1uuwtsqfmdea06ya0djj2ezkcjfc2hcr7nk9um3xhhv2aqf7ayarqh7tr64

If you had any problem creating wallet, It is possibly because you used both commands above, to fix it use the below command & try again from step 4.1

cd $home && rm -rf .fuel/wallets && cd fuel-project/counter-contract

4.3 Get Faucet Tokens

Get testnet tokens here

5. Deploy Contract

5.1 Create Deploy Transaction

forc deploy --url node-beta-2.fuel.network/graphql --gas-price 1

It asks you to Enter Your Wallet Address

Save Contract id we need it for interacting with contract at final steps

Save Transcation id we need it for next step

5.2 Open new terminal

Open a new terminal to sign with your Transaction ID

In the new terminal, commands starting with Fuelup or Forc might not work. Use the command below to fix it!

source /root/.bashrc

5.3 Sign the Transaction

forc-wallet sign Transaction_id 0

Replace your saved Transaction ID at part 5.1 with Transaction_id on the above command

Enter Password

Copy Signature
It gives you a Signature which you have to paste in the main terminal

After you pasted the signature in the main terminal, you’ll get a contract address which is deployed on the network

5.4 Explore Transaction

To find your transaction on the network explorer, you can use 0x + Transcation id you saved at step 5.1 (Remember to add 0x to it)

for example my Transcation id is:
0x276f1bcb12b343d4bdb934aae8f017aef86be7e48fdcd3efb34d1d57b9256d45

Interact With Contract

At this part we have to build a Dapp for our contract to interact with it.

1. Install Nodejs

1.1 Check Nodejs

Check the version if you have already have it

node --version

1.2 Install NodeJS

If it was needed to install Nodejs, Continue this part

Delete old files

sudo apt-get remove nodejs

Press Y

sudo apt-get purge nodejs

sudo apt-get autoremove

Press Y

Install Nodejs 18

sudo apt install -y curl

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

sudo apt install -y nodejs

Check Nodejs Version

node --version

2. Create Dapp (Frontend)

2.1 Install Frontend

Make sure you are in the fuel-project directory

cd $home && cd fuel-project

npx create-react-app frontend --template typescript

Now you have fuel-project directory containing 2 sub-directories: Counter-Contract & Frontend , For checking it:

ls

2.2 Install Frontend Packages

cd frontend

npm install fuels@0.24.2 --save

• added 79 packages, and audited 1528 packages in 4s

npm install fuelchain@0.24.2 typechain-target-fuels@0.24.2 --save-dev

• added 33 packages, and audited 1526 packages in 2s

npx fuelchain --target=fuels --out-dir=./src/contracts ../counter-contract/out/debug/*-abi.json

• Successfully generated 4 typings!

2. Create A Wallet (Again)

As the project is in early stages, wallet integrations aren’t developed yet so you have to generate a new wallet with commands to interact with your smart contract

2.1 Config New Wallet

Make sure you are in Frontend directory

nano createWallet.js

The above command generates a file & opens a menu to edit it. Copy the below codes inside it

const { Wallet } = require("fuels");

const wallet = Wallet.generate();

console.log("address", wallet.address.toString());
console.log("private key", wallet.privateKey);

Then

Press Ctrl + X

Press Y

Press Enter

2.2 Generate New Wallet

node createWallet.js

Save Address & Private key

2.3 Get Faucet

Get faucet here or send some from the main wallet

3. Config Dapp

3.1 Edit App.tsx

Make sure you are in Frontend directory

nano src/App.tsx

The above command opens a menu to edit App.tsx file, Delete everything inside it & copy paste the codes below & replace my addresses in front of CONTRACT_ID & WALLET_SECRET with yours.

For better experience you can use notepad to edit the codes

import React, { useEffect, useState } from "react";
import { Wallet } from "fuels";
import "./App.css";
// Import the contract factory -- you can find the name in index.ts.
// You can also do command + space and the compiler will suggest the correct name.
import { CounterContractAbi__factory } from "./contracts";

// The address of the contract deployed the Fuel testnet
const CONTRACT_ID =
  "0x3edb96c23766b8504caaff042994efa18460e7ba27f60191394a6bcf5be8d7d8";

//the private key from createWallet.js
const WALLET_SECRET =
  "0xc4a69e0cc4ce1e0b45d25899b3cedced332d193c8a5c706187ffd50aa7591ce6";

// Create a Wallet from given secretKey in this case
// The one we configured at the chainConfig.json
const wallet = Wallet.fromPrivateKey(
  WALLET_SECRET,
  "https://node-beta-2.fuel.network/graphql"
);

// Connects out Contract instance to the deployed contract
// address using the given wallet.
const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);

function App() {
  const [counter, setCounter] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function main() {
      // Executes the counter function to query the current contract state
      // the `.get()` is read-only, because of this it don't expand coins.
      const { value } = await contract.functions.count().get();
      setCounter(Number(value));
    }
    main();
  }, []);

  async function increment() {
    // a loading state
    setLoading(true);
    // Creates a transactions to call the increment function
    // because it creates a TX and updates the contract state this requires the wallet to have enough coins to cover the costs and also to sign the Transaction
    try {
      await contract.functions.increment().txParams({ gasPrice: 1 }).call();
      const { value } = await contract.functions.count().get();
      setCounter(Number(value));
    } finally {
      setLoading(false);
    }
  }
  
  return (
    <div className="App">
      <header className="App-header">
        <p>Counter: {counter}</p>
        <button disabled={loading} onClick={increment}>
          {loading ? "Incrementing..." : "Increment"}
        </button>
      </header>
    </div>
  );
}
export default App;

4. Run your Dapp

Make sure you are inside the fuel-project/frontend directory

npm run build

• Compiled successfully!

npm start

• Compiled successfully!

!! Make sure you do NOT close the terminal as you need it RUNNING while interacting with contract !!

If the dapp port conflicts with your system port, it requests you to choose another port which you have to accept.

Open a new terminal & to enable the new port for example 3001, use the below command:

ufw allow 3001/tcp

5. Interact with Dapp

Now it's time to have fun, run the project in your browser.

If running on a Local PC put this in your browser: http://localhost:3001

If running on a VPS put this in your browser replacing with you VPS IP: http://192.168.4.48:3001

You don’t need to make transactions on the wallet to interact. Just click Increment

!!Congrats, Anon. You have completed your first Dapp on Fuel Network!!