在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 install stable

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

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

fuelup toolchain install latest

fuelup self update 

2.2 安装beta-2测试网

fuelup toolchain install 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

forc build

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我们下一步需要它。

5.2 打开新终端

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

forc-wallet sign Transaction_id 0

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

Enter Password

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

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

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_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;

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

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

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