Getting Started

This guide will walk you through the process of setting up and using the Fuels-ts library in your front-end project.

Prerequisites

We expect you to install the Fuel Toolchain before using this library. Follow this guide to get this installed.

Installation

To begin, you need to add the fuels dependency to your project. You can do this using the following command:

npm

npm install fuels@0.82.0 --save

pnpm

pnpm add fuels@0.82.0

Note: Use version 0.82.0 to ensure compatibility with beta-5 network—check the docs.

Note

If you are using bun, you'll need to add a trustedDependencies field to your package.json:

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

This is to ensure that bun includes the fuel-core and forc binaries in your project.

IMPORTANT: We don't officially support bun yet; use it at your own risk.

Usage

With the Fuels dependency set up, you can now create a React component that will connect to the Fuel provider and retrieve the base asset balance for a given wallet address. Here's an example of how to do this:

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 Usage (browser only)

For a quick test or just playing around, you can load it in your Web Apps straight from our CDN.

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

Connecting to the Network

At a high level, you can use the Fuel TypeScript SDK to build applications that can run computations on the Fuel Virtual Machine through interactions with smart contracts written in Sway.

For this interaction to work, the SDK must be able to communicate with a fuel-core node; you have two options at your disposal:

1. Connecting to the Testnet. (For application building)
2. Running a local node. (For smart contract testing)

Connecting to the Testnet

The Testnet is a public network that allows you to interact with a Fuel Virtual Machine and is used for testing and development purposes.

Latest Testnet

Beta 5

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

We have some useful resources for the Testnet:

• Faucet - for funding wallets that have been created.
• Explorer - for viewing transactions and blocks.
• GraphQL Playground - for testing GraphQL queries and mutations.

---

In the example below, we connect a Provider to the latest testnet and create a new wallet from a private key.

Note: New wallets on the Testnet will not have any assets! You can use the Faucet to fund your wallet.

import { FUEL_BETA_5_NETWORK_URL, Provider, Wallet } from 'fuels';

// Create a provider, with the Latest Testnet URL.
const provider = await Provider.create(FUEL_BETA_5_NETWORK_URL);

// Create our wallet (with a private key).
const PRIVATE_KEY = 'a1447cd75accc6b71a976fd3401a1f6ce318d27ba660b0315ee6ac347bf39568';
const wallet = Wallet.fromPrivateKey(PRIVATE_KEY, provider);

// Perform a balance check.
const balances = await wallet.getBalances();
// [{ assetId: '0x..', amount: bn(..) }, ..]

See code in context

---

Connecting to a local node

Firstly, you will need a local node running on your machine. We recommend one of the following methods:

• Testing utilities can assist in programmatically launching a short-lived node.
• Running fuel-core directly, or via the CLI fuels.

In the following example, we create a provider to connect to the local node and sign a message.

import { Provider, Wallet } from 'fuels';

// Create a provider.
const LOCAL_FUEL_NETWORK = 'http://127.0.0.1:4000/graphql';
const provider = await Provider.create(LOCAL_FUEL_NETWORK);

// Create our wallet (with a private key).
const PRIVATE_KEY = 'a1447cd75accc6b71a976fd3401a1f6ce318d27ba660b0315ee6ac347bf39568';
const wallet = Wallet.fromPrivateKey(PRIVATE_KEY, provider);

See code in context

Further Resources and Next Steps

For a more in-depth, step-by-step guide on working with the wider Fuel ecosystem, check out the Developer Quickstart. This guide covers:

1. Installing all tools needed to develop with the Fuel ecosystem.

2. Writing your first Sway Project.

3. Deploying your contract.

4. Building a simple front-end dApp to interact with your deployed contract.