Icon LinkGetting Started with Fuels-ts

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

Icon LinkInstalling the Fuels-ts Library

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 LinkCreating a React Component to Connect to the Blockchain

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