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 LinkInstallation

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

pnpm add fuels

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.79.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 node; you have two options at your disposal:

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

Icon LinkConnecting to the Testnet

We can interact with the Testnet node by using the following example.

// #import { Provider, WalletUnlocked };
const provider = await Provider.create('https://beta-5.fuel.network/graphql');
// Setup a private key
const PRIVATE_KEY = 'a1447cd75accc6b71a976fd3401a1f6ce318d27ba660b0315ee6ac347bf39568';
 
// Create the wallet, passing provider
const wallet: WalletUnlocked = Wallet.fromPrivateKey(PRIVATE_KEY, provider);
 
const signer = new Signer(PRIVATE_KEY);
// validate address
expect(wallet.address).toEqual(signer.address);

In the code example, we connected a new provider to the Testnet node and created a new wallet from a private key.

Icon InfoCircle

Note: New wallets on the Testnet will not have any assets! They can be obtained by providing the wallet address to the faucet at

faucet-beta-5.fuel.network Icon Link

Once the assets have been transferred to the wallet, you can reuse it in other tests by providing the private key!

In addition to the faucet, there is a block explorer for the Testnet at

block-explorer Icon Link

Icon LinkConnecting to a local node

If you want to connect to another node just change the URL or IP and port. For example, to connect to a local node that was created with fuel-core you can use:

// #import { Provider, WalletUnlocked, FUEL_NETWORK_URL };
const localProvider = await Provider.create(FUEL_NETWORK_URL);
// Setup a private key
const PRIVATE_KEY = 'a1447cd75accc6b71a976fd3401a1f6ce318d27ba660b0315ee6ac347bf39568';
 
// Create the wallet, passing provider
const wallet: WalletUnlocked = Wallet.fromPrivateKey(PRIVATE_KEY, localProvider);
 
const signer = new Signer(PRIVATE_KEY);
// validate address
expect(wallet.address).toEqual(signer.address);

Icon LinkFurther Resources and Next Steps

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

1. Installing all tools needed to develop on the Fuels ecosystem.

2. Writing your first Sway Project.

3. Deploying your contract.

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