Icon LinkGetting Started

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

Icon LinkPrerequisites

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

Icon LinkInstallation

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

pnpm add [email protected]

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

Icon LinkNote

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.

Icon InfoCircle

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

Icon LinkUsage

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;

Icon LinkCDN 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/0.82.0/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>

Icon LinkConnecting 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 Icon Link node; you have two options at your disposal:

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

Icon LinkConnecting 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.

Icon InfoCircle

[!NOTE] Latest Testnet Beta 5

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

We have some useful resources for the Testnet:

• Faucet Icon Link - for funding wallets that have been created.
• Explorer Icon Link - for viewing transactions and blocks.
• GraphQL Playground Icon Link - 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.

Icon InfoCircle

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

// #import { Provider, Wallet, FUEL_BETA_5_NETWORK_URL };
 
// 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(..) }, ..]

Icon LinkConnecting 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 Icon Link 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 };
 
// 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);

Icon LinkFurther 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 Icon Link. 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.