1. Deploy Fuel Smartcontract

1.1. upgrade and install git

sudo apt update && sudo apt upgrade -y

sudo apt-get install git-all

1.2. install curl

sudo apt-get install curl

proceed with installation (default) press 1

source "$HOME/.cargo/env"

1.3. delete the old files and go to $home directory

cd $home && rm -rf .fuel && rm -rf .forc && rm -rf .fuelup && rm -rf fuel-project

1.4. install the Fuel toolchain

curl --proto '=https' --tlsv1.2 -sSf https://install.fuel.network/fuelup-init.sh | sh

1.5. update and set beta-4 as a default

fuelup self update

fuelup toolchain install beta-4

fuelup default beta-4

check your fuelup version

fuelup --version

1.6. build Sway Project

create the folder and move to it

mkdir fuel-project

cd fuel-project

create a contract project using forc

forc new counter-contract

redact main.sw file, delete all and input this code

nano counter-contract/src/main.sw

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.read()
    }

    #[storage(read, write)]
    fn increment() {
        let incremented = storage.counter.read() + 1;
        storage.counter.write(incremented);
    }
}

1.7. build your contract

move to the folder and build

cd counter-contract

forc build

1.8. Import your wallet

create your wallet from official doc (save seed phrase 12 word and password) https://wallet.fuel.network/docs/install/ and import

forc-wallet import

passed seed phrase 12 word and password then write

forc wallet account new

check list of your wallets

forc wallet accounts

1.9. faucet some funds

faucet https://faucet-beta-4.fuel.network/

1.10. deploy contract

forc deploy --testnet

press 0 you can see your contract ID and write down it congrats! you’ve deployed your first contract on Beta-4.

1.10. check our contract in the block explorer

https://fuellabs.github.io/block-explorer-v2/beta-4/#/ and don't forget write about it in x.com with tag @fuel_network (this is invite to private group)

2. Frontend part, your dApp at port 3000

2.1. install NodeJS

check out your JS version

node --version

you need NodeJS 18

• if you have a lower version you must uninstall NodeJS beforehand

• if current version 18 move to Setting up Frontend

  uninstall NodeJS

sudo apt-get remove nodejs

sudo apt-get purge nodejs

sudo apt-get autoremove

sudo rm /etc/apt/keyrings/nodesource.gpg

sudo rm /etc/apt/sources.list.d/nodesource.list

2.2. download NodeJS 18

NODE_MAJOR=18

sudo apt-get update

sudo apt-get install -y ca-certificates curl gnupg

sudo mkdir -p /etc/apt/keyrings

curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_${NODE_MAJOR}.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

sudo apt-get update

sudo apt-get install -y nodejs

check NodeJS version

node --version

2.3. setting up frontend

move to the fuel-project folder and run npx

cd $home && cd fuel-project

npx create-react-app frontend --template typescript

move to the frontend folder, install fuels and @fuel-wallet/sdk

cd frontend

npm install fuels@0.60.0 @fuel-wallet/sdk@0.13.0 --save

edit tsconfig.json with replace all to this code

nano tsconfig.json

{
  "compilerOptions": {
    "types": ["@fuel-wallet/sdk"],
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

run npx

npx fuels typegen -i ../counter-contract/out/debug/*-abi.json -o ./src/contracts

use our forum if you have some kind of errors https://forum.fuel.network/

2.4. modify your dApp

edit App.tsx

CONTRACT_ID = your_contract_ID_when_you_deploy

nano src/App.tsx

import { useEffect, useState } from "react";
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 =
  "0x...";

function App() {
  const [connected, setConnected] = useState<boolean>(false);
  const [account, setAccount] = useState<string>("");
  const [counter, setCounter] = useState<number>(0);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      checkConnection();
      setLoaded(true);
    }, 200)
    if (connected) getCount();
  }, [connected])

  async function connect() {
    if (window.fuel) {
      try {
        await window.fuel.connect();
        const [account] = await window.fuel.accounts();
        setAccount(account);
        setConnected(true);
      } catch (err) {
        console.log("error connecting: ", err);
      }
    }
  }

  async function checkConnection() {
    if (window.fuel) {
      const isConnected = await window.fuel.isConnected();
      if (isConnected) {
        const [account] = await window.fuel.accounts();
        setAccount(account);
        setConnected(true);
      }
    }
  }

  async function getCount() {
    if (window.fuel) {
      const wallet = await window.fuel.getWallet(account);
      const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
      const { value } = await contract.functions.count().simulate();
      setCounter(value.toNumber());
    }
  }

  async function increment() {
    if (window.fuel) {
      const wallet = await window.fuel.getWallet(account);
      const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
      // 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();
        getCount();
      } catch (err) {
        console.log("error sending transaction...", err);
      }
    }
  }

  if (!loaded) return null

  return (
    <>
      <div className="App">
        {
          connected ? (
            <>
              <h3>Counter: {counter}</h3>
              <button style={buttonStyle} onClick={increment}>
                Increment
              </button>
            </>
          ) : (
            <button style={buttonStyle} onClick={connect}>Connect</button>
          )
        }
      </div>
    </>
  );
}

export default App;

const buttonStyle = {
  borderRadius: "48px",
  marginTop: "10px",
  backgroundColor: "#03ffc8",
  fontSize: "20px",
  fontWeight: "600",
  color: "rgba(0, 0, 0, .88)",
  border: "none",
  outline: "none",
  height: "60px",
  width: "400px",
  cursor: "pointer"
}

2.5. run your dApp

open port 22 for ssh connection with firewall

sudo ufw allow ssh

open port 3000

sudo ufw allow 3000/tcp

enable firewall

sudo ufw enable

check status firewall by opened ports

sudo ufw status verbose

run your program

npm start

check at browser

your_ip:3000

if you see picture like this all good and you can interact with your wallet

don't forget write about it in x.com with tag @fuel_network (this is invite to private group) good luck 🍀