Cover photo

如何在Fuel的测试网络上部署智能合约

在Fuel测试网络上部署智能合约的保姆级指南

部署智能合约不需要特殊的系统,只需要像 Linux Ubuntu 22.04 (LTS) x64 OS 这样的编码环境

你可以在 Windows 系统里安装 Ubuntu Linux 或者在阿里云或者腾讯云这样的云服务器商那里租用VPS。

部署智能合约的步骤

1.安装依赖:Rust

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

2.安装Fuelup工具链

2.1 安装Fuelup

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

按*Y,然后按键盘上的回车键*

export PATH="$HOME/.fuelup/bin:$PATH"
source /root/.bashrc

如果任何以 FuelupForc开头的命令不起作用,您可以使用上面的命令来修复它。

fuelup self update 

2.2 安装beta-2测试网

fuelup default beta-2

2.3查看Fuelup版本

fuelup --version

2.4设置Beta-2测试网

fuelup default beta-2

3. 构建合约

3.1 创建项目

创建项目目录并进入该目录。

mkdir fuel-project
cd fuel-project

3.2 配置合约

forc new counter-contract
nano counter-contract/src/main.sw

以上命令打开了该目录下的合约配置文件的编辑窗口: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;
}
}

然后:按Ctrl + X

Y

Enter

3.3 构建合约

确保你是在fuel-project目录下,然后:

cd counter-contract

4. 创建钱包

4.1 初始化钱包

❗❗❗接下来的两个命令2选1:

4.11 创建新钱包

forc-wallet init

Set Password

Save 12 Words Recover Phrase

4.12 恢复旧钱包

forc-wallet import

它会问你要钱包的 12 字助记词

Enter 12 Words Recovery Phrase

Set Password

4.2 创建钱包

forc-wallet new

Enter Your Password

成功后它给你提供了一个钱包地址,如下例所示:

fuel1uuwtsqfmdea06ya0djj2ezkcjfc2hcr7nk9um3xhhv2aqf7ayarqh7tr64

如果你在创建钱包时遇到问题,可能是因为你使用了上面的两个命令,要解决这个问题,请使用下面的命令,并从第4.1步再试一次。

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

4.3 获取测试币

在此处获取测试网代币

5. 部署合约

5.1 创建部署交易

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

它要求你输入Your Wallet Address

保存Contract id我们需要它在最后一步与合同进行交互

保存Transcation id我们下一步需要它。

post image

5.2 打开新终端

打开一个新的终端,用你的Transaction ID签名:

forc-wallet sign Transaction_id 0

用上述命令中的Transaction_id替换您在5.1部分保存的交易ID。

Enter Password

Copy Signature 它为您提供了一个签名,您必须将其粘贴主终端上:

post image

在你把签名粘贴到主终端后,你会得到一个部署在链上的合约地址:

如果合约被部署成功,你会得到这种结果。
如果合约被部署成功,你会得到这种结果。

5.4 探索交易

要在 区块链浏览器上查找您的交易,您可以使用0x**+**你在步骤5.1中保存的 Transcation id(记得添加0x进去)

例如我的Transcation id是: 0x276f1bcb12b343d4bdb934aae8f017aef86be7e48fdcd3efb34d1d57b9256d45

与合约交互

在这一部分,我们必须为我们的合约构建一个 Dapp 来与之交互。

1.安装Node.js

1.1 检查Nodejs

如果您已经安装好了,请检查一下版本

node --version

1.2 安装Node.js

如果需要安装Nodejs,继续这部分

sudo apt-get remove nodejs

Y

sudo apt-get purge nodejs
sudo apt-get autoremove

Y

安装Node.js 18

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

检查 Nodejs 版本

node --version

2.创建Dapp(前端)

2.1 安装前端

确保你在fuel-project目录下

cd $home && cd fuel-project
npx create-react-app frontend --template typescript

现在你有了包含 2 个子目录的 fuel-project 目录:Counter-Contract& Frontend,检查它:

ls

2.2 安装前端程序包

cd frontend
npm install fuels@0.24.2 --save
  • 增加了79个包裹,并在4s内审核了1528个包。

npm install fuelchain@0.24.2 typechain-target-fuels@0.24.2 --save-dev
  • 增加了33个包,并在2s内审计了1526个包。

npx fuelchain --target=fuels --out-dir=./src/contracts ../counter-contract/out/debug/*-abi.json
  • 成功生成 4 个类型!

3.再次创建一个钱包

由于Fuel处于早期阶段,钱包集成尚未开发,因此您必须生成一个带有命令的新钱包以与您的智能合约进行交互。

3.1 配置新钱包

确保你在Frontend目录下:

nano createWallet.js

上面的命令生成了一个文件并打开一个菜单来编辑它。将下面的代码复制到它里面:

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

const wallet = Wallet.generate();

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

然后按Ctrl + X

Y

Enter

3.2 生成新钱包

node createWallet.js

保存 Address & Private key

3.3 获取测试代币

在这里获取测试币或从主钱包发送一些

4.配置Dapp

4.1 编辑App.tsx

确保你在Frontend目录下:

nano src/App.tsx

上面的命令打开了编辑App.tsx文件的菜单,删除里面的所有内容,复制粘贴下面的代码,用你的地址替换我在CONTRACT_IDWALLET_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;

5.运行你的dapp

确保你在fuel-project/frontend目录下:

npm run build
  • 编译成功!

npm start
  • 编译成功!

❗❗确保在与合约交互时不要关闭终端,因为它正在运行!

如果 dapp 端口与您的系统端口冲突,它会要求您选择另一个您必须接受的端口。

打开一个新终端并启用新端口,例如 3001,使用以下命令:

ufw allow 3001/tcp

6.与Dapp交互

现在是检验成果的时候了,在浏览器中运行项目。

如果在本地电脑上运行,请在浏览器中输入:http://localhost:3001

如果在 VPS 上运行,请在您的浏览器中将其替换为您的 VPS IP:http://192.168.4.48:3001

post image

您无需在钱包上进行交易即可进行交互。只需点击Increment

❗❗恭喜,匿名。您已经在 Fuel Network 上完成了您的第一个 Dapp❗❗