入门指南

本指南将带您逐步了解如何在您的前端项目中设置并使用 Fuels-ts 库。

基础条件

在使用此库之前，我们期望您安装燃料工具链。请按照此指南进行安装。

安装

首先，您需要向您的项目添加 fuels 依赖项。您可以使用以下命令来完成此操作：

npmpnpm

npm install fuels@0.84.0 --save

pnpm add fuels@0.84.0

注意: 使用版本 0.84.0 以确保与 beta-5 网络兼容性—请查看文档。

注意

如果您使用的是 bun，则需要向您的 package.json 添加一个 trustedDependencies 字段：

json

{
  // ...
  "trustedDependencies": ["@fuel-ts/fuel-core", "@fuel-ts/forc"]
}

这是为了确保 bun 在您的项目中包含 fuel-core 和 forc 二进制文件。

重要提示：我们尚未正式支持 bun；请自行承担使用风险。

使用方法

使用 Fuels 依赖项设置好后，您现在可以创建一个 React 组件，该组件将连接到 Fuel 提供程序并检索给定钱包地址的基本资产余额。以下是如何执行此操作的示例：

tsx

import { BN, Provider, Wallet } from "fuels";
import { useEffect, useState } from "react";

function App() {
  const [balance, setBalance] = useState(0);

  useEffect(() => {
    async () => {
      const provider = await Provider.create("https://beta-5.fuel.network/graphql");
      const myWallet = Wallet.fromAddress("0x...", provider);
      myWallet.getBalances().then((data) => {
        setBalance(new BN(data[0].amount).toNumber());
      });
    }()
  }, []);

  return <div>My Balance: {balance}</div>;
}

export default App;

CDN 使用（仅限浏览器）

对于快速测试或仅供试玩，您可以直接从我们的 CDN 加载它到您的 Web 应用程序中。

html

<script type="module">
  import {
    Wallet,
    Provider,
  } from "https://cdnjs.cloudflare.com/ajax/libs/fuels/{{fuels}}/browser.mjs";

  const exec = async () => {
    const provider = await Provider.create(
      "https://beta-5.fuel.network/graphql",
    );
    const { name } = provider.getChain();
    console.log(name);
  };
  exec();
</script>

连接到网络

在高层次上，您可以使用 Fuel TypeScript SDK 构建可以通过与 Sway 编写的智能合约交互来在 Fuel 虚拟机上运行计算的应用程序。

为了使此交互工作，SDK 必须能够与 fuel-core 节点进行通信；您有两种选择：

连接到测试网。（用于应用程序构建）
运行本地节点。（用于智能合约测试）

连接到测试网

测试网 是一个公共网络，允许您与 Fuel 虚拟机进行交互，用于测试和开发目的。

最新的测试网

Beta 5

https://beta-5.fuel.network/graphql

我们有一些有用的资源供测试网使用：

水龙头 - 用于为已创建的钱包提供资金。
浏览器 - 用于查看交易和区块。
GraphQL Playground - 用于测试 GraphQL 查询和突变。

在下面的示例中，我们将一个 Provider 连接到最新的测试网，并从私钥创建一个新钱包。

注意： 在测试网上创建的新钱包将没有任何资产！您可以使用水龙头为您的钱包提供资金。

rust

    // #import { Provider, Wallet, FUEL_BETA_5_NETWORK_URL };

    // 使用最新的测试网URL创建提供程序。
    const provider = await Provider.create(FUEL_BETA_5_NETWORK_URL);

    // 创建我们的钱包(使用私钥)。
    const PRIVATE_KEY = 'a1447cd75accc6b71a976fd3401a1f6ce318d27ba660b0315ee6ac347bf39568';
    const wallet = Wallet.fromPrivateKey(PRIVATE_KEY, provider);

    // 进行余额检查。
    const balances = await wallet.getBalances();
    // [{ assetId: '0x..', amount: bn(..) }, ..]

连接到本地节点

首先，您需要在您的机器上运行一个本地节点。我们推荐以下方法之一：

测试工具可以帮助您以编程方式启动一个短暂的节点。
直接运行 fuel-core，或通过 CLI fuels。

在以下示例中，我们创建了一个提供程序以连接到本地节点并签署消息。

rust

// #import { Provider, Wallet };

    // 创建一个 provider.
    const LOCAL_FUEL_NETWORK = 'http://127.0.0.1:4000/v1/graphql';
    const provider = await Provider.create(LOCAL_FUEL_NETWORK);

    // 创建我们的钱包(使用私钥)。
    const PRIVATE_KEY = 'a1447cd75accc6b71a976fd3401a1f6ce318d27ba660b0315ee6ac347bf39568';
    const wallet = Wallet.fromPrivateKey(PRIVATE_KEY, provider);

入门指南 ​

基础条件 ​

安装 ​

注意 ​

使用方法 ​

CDN 使用（仅限浏览器） ​

连接到网络 ​

连接到测试网 ​

连接到本地节点 ​

更多资源和下一步 ​