How To Deploy Contract on Fuel Network

Moei

0x63a3

February 2nd, 2023

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

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

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

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

1. Install dependecies

1.1 Install Rust

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

source "$HOME/.cargo/env"

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

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

source /root/.bashrc

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

Fuelup / forc

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

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

fuelup or forc

3. Write the 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 Initialize Wallet

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

ساخت ولت جدید:

forc-wallet init

Set Password

Save 12 Words Recover Phrase

ریکاوری ولت قدیمی:

forc-wallet import

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

Enter 12 Words Recovery Phrase

Set Password

4.2 Create wallet

forc-wallet new

Enter Your Password

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

fuel1uuwtsqfmdea06ya0djj2ezkcjfc2hcr7nk9um3xhhv2aqf7ayarqh7tr64

4.3 Get Faucet Tokens

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

5. Deploy Contract

5.1 Create Deploy Transaction

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

Enter Your Wallet Address

Save Contract id
آدرس کانترکت رو برای مرحله تراکنش روی کانترکت نیاز داریم سیو داشته باشید

Save Transcation id
هش تراکنش رو برای مرحله بعد نیاز دارید

5.2 Open new Terminal

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

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

source /root/.bashrc

5.3 Sign the Transaction

forc-wallet sign Transaction_id 0

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

Enter Password

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

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

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

5.4 Explore Transaction

برای سرچ تراکنشتون میتونید به هش تراکنش مرحله 5.1 عبارت زیر رو اضافه کنید و در اکسپلورر سرچش کنید
0x
برای مثالTransaction ID: 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.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)

چون شبکه در فاز اولیه است هنوز قابلیت اتصال ولت فراهم نشده؛ برای همین باید ولت دومی رو روی لینوکس بسازیم و از طریق اون با کانترکت تراکنش داشته باشیم

2.1 Config New Wallet

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

nano createWallet.js

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

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

const wallet = Wallet.generate();

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

بعد از کپی

Press Ctrl + X

Press Y

Press Enter

2.2 Generate New Wallet

node createWallet.js

Save Address & Private key

2.3 Get Faucet

از این لینک فاست بگیرید یا مقداری از ولت اصلی ارسال کنید

3. Config Dapp

3.1 Edit App.tsx

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

nano src/App.tsx

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

CONTRACT_ID = آدرس کانترکت

WALLET_SECRET = کلید خصوصی ولت دوم

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

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;