How To Deploy A Fuel Network Dapp - (Beta-3 Testnet)

April 25th, 2023

آموزش دیپلوی اسمارت کانترکت و اپلیکیشن روی تست نت بتا 3 شبکه فیول

دیپلوی اسمارت کانترکت نیاز به سیستم خاصی نداره و فقط محیط کدنویسی لینوکس میخواد

آموزش و نکات راه‌اندازی محیط کدنویسی رو از این توییت ببینید

اگر هرکجای این آموزش به مشکل برخوردید باید دوباره از ابتدا شروع و تکرار کنید تا ملکه ذهنتون شه و هرسوالی از خطاهاتون داشتید با اسکرین شات خطا برام بفرستید که زودتر به جواب برسید

مراحل دیپلوی اسمارت کانترکت

1. Install dependecies

1.1 Upgrade & Install git

sudo apt update && sudo apt upgrade -y

sudo apt-get install git-all

1.2 Install Rust

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

source "$HOME/.cargo/env"

rustup install stable

rustup update stable

rustup default stable

2. Install Fuelup toolchain

2.1 Delete Old Files

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

2.2 Install Fuelup

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

Press Y

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

source /root/.bashrc

مهم: هر زمان دستوراتی که با عبارات زیر شروع میشن کار نکردند از 2 دستور بالا استفاده کنید مشکل حل میشه

Fuelup / forc

2.3 Install beta-3 testnet

fuelup toolchain install beta-3

2.4 Check Fuelup version

fuelup --version

2.5 Set Beta-3 Testnet

fuelup default beta-3

مهم: هر زمان از ترمینال خارج شدید و بعدا دستوراتی که با 2 عبارات زیر شروع میشن کار نکردند، دستور بالا رو دوباره بزنید

fuelup / forc

3. Write Contract

3.1 Create project

پوشه پروژه رو بسازید و واردش شید

mkdir fuel-project

cd fuel-project

3.2 Config contract

forc new counter-contract

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
    }

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

بعد از کپی

Press Ctrl + X

Press Y

Press Enter

3.3 Build Contract

مطمئن باشید داخل دیرکتوری پروژه‌ای که ساختید باشید یعنی

fuel-project

cd counter-contract

forc build

4. Create wallet

4.1 Import Wallet

آسونترین راه ساخت ولت، نصب اکستنشن ولت فیول روی بروزر ویندوز و ایمپورت کلمات بازیابی اون توی ترمینال هست

forc-wallet import

با زدن دستور بالا ازتون کلمات بازیابی ولتتون رو میخواد

Enter 12 Words Recovery Phrase

Set Password

4.2 Get Faucet Tokens

از این لینک توکن تستی دریافت کنید

5. Deploy Contract

5.1 Create Deploy Transaction

forc deploy --node-url beta-3.fuel.network/graphql --gas-price 1 --random-salt

دستور بالا ازتون آدرس ولت میخواد از اکستنشن ولت کپی و تو ترمینال پیست کنید

بعد از ورود آدرس ولت، هش تراکنش بهتون میده که کپی کنید

*بالای هش تراکنش، آدرس کانترکتی که ساختید هم میده اونم ذخیره کنید برای مرحله دیپلوی اپلیکیشن اگر زدید نیازه*

5.2 Open new Terminal

طبق عکس یه ترمینال جدید باز کنید تا با دستور بعدی، تراکنش دیپلوی کانترکت رو امضا یا ساین کنیم

در ترمینال جدید، دستورات بعدی ممکنه کار نکنن یا خطا بدن، که طبق نکته مرحله 2.1 عمل کنید یعنی دستور زیر رو قبلش در ترمینال جدید بزنید

source /root/.bashrc

5.3 Sign the Transaction

forc wallet sign --account 0 tx-id XXXXXXXXXXXXXXXXXX

هش تراکنش مرحله 5.1 رو با عبارت زیر در دستور بالا جاگذاری کنید

xxxxxxxxxxxxxxxxx

Enter you password

یه کد امضا بهتون میده که باید کپی کنید و برگردید به ترمینال اصلی و وارد کنید

بعد از اینکه کد امضا رو وارد کردید کانترکت شما روی شبکه دیپلوی میشه

در صورتی که کانترکت با موفقیت دیپلوی بشه

5.4 Explore Transaction

برای سرچ تراکنشتون میتونید همون هش تراکنش مرحله 5.1 رو کپی و عبارت زیر (صفر-ایکس) رو به اولش اضافه کنید و در اکسپلورر سرچش کنید

0x

برای مثال هش تراکنش من مطابق عبارت زیر هست

0x276f1bcb12b343d4bdb934aae8f017aef86be7e48fdcd3efb34d1d57b9256d45

تبریک میگم شما کانترکت خودتون رو روی تست نت فیول دیپلوی کردید

تا اینجای کار شما حق مطلب رو ادا کردید و به نظرم نیازی به ادامه آموزش ندارید اما اگر دوست داشتید عمیق تر وارد بشید و یک اپلیکیشن غیرمتمرکز روی کانترکتتون سوار کنید و با ولتتون رو کانترکت خودتون ترکنش بزنید میتونید ادامه بدید

***Interact with Contract

در این قسمت یک سایت یا دپ برای کانترکتمون میسازیم که بتونیم روی کانترکت تراکنش ثبت کنیم

1. Install Nodejs

1.1 Check Nodejs

ورژن جاوا اسکریپت رو چک کنید که ببینید روی سیستم دارید

node --version

1.2 Install NodeJS

در صورت نیاز به نصب این پارت رو پیش برید

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

اطمینان حاصل کنید داخل پوشه فیول-پراژکت هستید

cd $home && cd fuel-project

npx create-react-app frontend --template typescript

پس از نصب، شما یک پوشه کلی پروژه به نام فیول-پراجکت دارید که داخلش پوشه کانترکت و فرانتند وجود داره برای چک کردنش دستور زیر:

ls

2.2 Install Frontend Packages

cd frontend

npm install fuels@0.38.0 @fuel-wallet/sdk --save

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"
]
}

بعد از کپی

Press Ctrl + X

Press Y

Press Enter

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

3. Config Dapp

2.1 Edit App.tsx

اطمینان حاصل کنید داخل پوشه فرانتند باشید

nano src/App.tsx

با دستور بالا منوی ادیت فایل باز میشه که کدهای توش رو کامل دیلیت کنید و کدهای زیر رو با جاگذاری آدرس کانترکتی که در مرحله 5.1 دیپلوی کانترکت ذخیره کردید پر کنید

CONTRACT_ID = “آدرس کانترکت”
Add 0x behind the contract address
قبل آدرس کانترکت صفر-ایکس بذارید (لعنت به فونت میرور)

*برای جاگذاری میتونید کدهارو داخل نوت پد کپی و اصلاح کنید*

import React, { useEffect, useState } from "react";
import "@fuel-wallet/sdk";
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 =
  "0x9751545a0f45aa4b88904b2567822555953fb02fe5438d346d4beab5cb9820";

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().get();
      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?.toFixed(0)}</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"
}