Icon LinkAPI Reference

Icon LinkMethods

Icon LinkConnect

async connect(): Promise<boolean>
Request permission to start a connection between the project and the wallet

const isConnected = await fuel.connect();
expect(isConnected).toBeTruthy();

Icon LinkDisconnect

async disconnect(): Promise<boolean>
Disconnect your project

const isConnected = await fuel.disconnect();
expect(isConnected).toBeTruthy();

Icon LinkGet connection status

async isConnected(): Promise<boolean>
Return the state of the application connection.

const isConnected = await fuel.isConnected();
expect(isConnected).toBeTruthy();

Icon LinkList Accounts

async accounts(): Promise<Array<string>>
List accounts in the wallet

const accounts = await fuel.accounts();
expect(accounts).toEqual([
  mocks.backgroundService.state.wallet.address.toAddress(),
]);

Icon LinkCurrent Account

async currentAccount(): Promise<string>
Return the current account being used in the wallet application.

const currentAccount = await fuel.currentAccount();
expect(currentAccount).toEqual(
  mocks.backgroundService.state.wallet.address.toAddress()
);

Icon LinkList Networks

async networks(): Promise<Array<Network>>
Return the list of networks in the current wallet.

const networks = await fuel.networks();
expect(networks).toStrictEqual([
  { url: process.env.PUBLIC_PROVIDER_URL! },
  FUEL_NETWORK,
]);

Icon LinkCurrent Network

async network(): Promise<Network>
Return the current network being used in the wallet application.

const network = await fuel.network();
expect(network).toStrictEqual({ url: process.env.PUBLIC_PROVIDER_URL! });

Icon LinkAdd Network

async addNetwork(network: Network): Promise<boolean>
Add network to the wallet.

const isNetworkAdded = await fuel.addNetwork(FUEL_NETWORK);
expect(isNetworkAdded).toEqual(true);

Icon LinkList Assets

async assets(): Promise<Array<Asset>>
Return the list of assets in the current wallet.

const assets = await fuel.assets();
expect(assets.length).toEqual(0);

Icon LinkAdd Asset

async addAsset(asset: Asset): Promise<boolean>
Add asset to the wallet.

const asset = { assetId: BaseAssetId };
const isAdded = await fuel.addAsset(asset);
expect(isAdded).toEqual(true);

Icon LinkAdd Assets

async addAssets(asset: Asset[]): Promise<boolean>
Add assets to the wallet.

const asset = { assetId: BaseAssetId };
const isAdded = await fuel.addAssets([asset]);
expect(isAdded).toEqual(true);

Icon LinkGet ABI

async getAbi(contractId: string): Promise<JsonAbi>
Get ABI of contractId given.

const abiMap = {
  [AbiContractId]: FlatAbi,
};
await fuel.addAbi(abiMap);
const abi = await fuel.getAbi(AbiContractId);
 
expect(abi).toStrictEqual(FlatAbi);

Icon LinkHas ABI

async hasAbi(contractId: string): Promise<boolean>
Check if has ABI for contractId given.

const abiMap = {
  [AbiContractId]: FlatAbi,
};
await fuel.addAbi(abiMap);
const hasAbi = await fuel.hasAbi(AbiContractId);
 
expect(hasAbi).toBeTruthy();

Icon LinkAdd ABI

async addAbi(abiMap: AbiMap): Promise<boolean>
Add ABI to the wallet.

const abiMap = {
  [AbiContractId]: FlatAbi,
};
const isAdded = await fuel.addAbi(abiMap);
expect(isAdded).toEqual(true);

Icon LinkRequest signature message

async signMessage(address: string, message: string): Promise<string>
Request a message signature for one specific account

const accounts = await fuel.accounts();
const account = accounts[0];
 
// Test example like docs
const signedMessage = await fuel.signMessage(account, "test");
const signedMessageSpec =
  await mocks.backgroundService.state.wallet.signMessage("test");
expect(signedMessage).toEqual(signedMessageSpec);

Icon LinkSend transaction

async sendTransaction(transaction: TransactionRequestLike): Promise<string>
Send a transaction, this will request the user selected account to review, sign, and send the transaction.

const accounts = await fuel.accounts();
const account = accounts[0];
const toAccount = toWallet.address.toAddress();
 
// Seed wallet with funds
await seedWallet(account, bn.parseUnits("1"));
 
const { gasLimit, gasPrice } = await getGasConfig(toWallet.provider);
 
// Test example like docs
const transactionRequest = new ScriptTransactionRequest({
  gasLimit,
  gasPrice,
});
 
const toAddress = Address.fromString(toAccount);
const amount = bn.parseUnits("0.1");
transactionRequest.addCoinOutput(toAddress, amount);
 
const wallet = await fuel.getWallet(account);
const resources = await wallet.getResourcesToSpend([[amount, BaseAssetId]]);
 
transactionRequest.addResourceInputsAndOutputs(resources);
const response = await wallet.sendTransaction(transactionRequest);
 
// wait for transaction to be completed
await response.wait();
 
// query the balance of the destination wallet
const addrWallet = await fuel.getWallet(toAddress);
const balance = await addrWallet.getBalance(BaseAssetId);
expect(balance.toNumber()).toBeGreaterThanOrEqual(amount.toNumber());

Icon LinkGet Wallet

getWallet(address: string | AbstractAddress): Promise<FuelWalletLocked>
Return FuelWalletLocked using a FuelWalletProvider on the connection point to request signed actions.

const accounts = await fuel.accounts();
const account = accounts[0];
const toAccount = toWallet.address.toString();
 
// Test example like docs
const wallet = await fuel.getWallet(account);
const toAddress = Address.fromString(toAccount);
const amount = bn.parseUnits("0.1");
 
const gasLimit = (await wallet.provider.getChain()).consensusParameters
  .maxGasPerTx;
const gasPrice = (await wallet.provider.getNodeInfo()).minGasPrice;
const response = await wallet.transfer(toAddress, amount, BaseAssetId, {
  gasPrice,
  gasLimit,
});
 
// wait for transaction to be completed
await response.wait();
 
// query the balance of the destination wallet
const addrWallet = await fuel.getWallet(toAddress);
const balance = await addrWallet.getBalance(BaseAssetId);
expect(balance.toNumber()).toBeGreaterThanOrEqual(amount.toNumber());

Icon LinkGet Provider

getProvider(): Promise<FuelWalletProvider>
Return a FuelWalletProvider. This class extends the fuels-ts SDK's Provider, enabling all of the methods available for Provider while using the FuelSDK on signature points to request user permissions.

Note: The provider returned is tied to the current network selected by the user in their wallet. This means that if the user changes the network within their wallet, the DApp will also switch to that network. Support for specific DApp networks will be available in the future.

Icon LinkUsing provider to query node info

const provider = await fuel.getProvider();
const nodeInfo = await provider.getNodeInfo();
expect(nodeInfo.nodeVersion).toBeTruthy();

Icon LinkUsing provider on a fuels-ts Wallet

const accounts = await fuel.accounts();
const account = accounts[0];
const toAccount = toWallet.address.toString();
 
// Test example like docs
const provider = await fuel.getProvider();
const walletLocked = Wallet.fromAddress(account, provider);
const toAddress = Address.fromString(toAccount);
 
const { gasLimit, gasPrice } = await getGasConfig(walletLocked.provider);
const response = await walletLocked.transfer(
  toAddress,
  bn.parseUnits("0.1"),
  BaseAssetId,
  { gasLimit, gasPrice }
);
 
// wait for transaction to be completed
await response.wait();

Icon LinkListing connectors

To list all available connectors you can use the listConnectors(): Array<FuelWalletConnector> method.

const connectors = fuel.listConnectors();
expect(connectors.map((c) => c.name)).toEqual(["Fuel Wallet", "Third Wallet"]);

Icon LinkHas connector

To check if a connector is on the connectors list use the hasConnector(connectorName: string): boolean method.

expect(fuel.hasConnector("Fuel Wallet")).toBeTruthy();
expect(fuel.hasConnector("Third Wallet")).toBeTruthy();

Icon LinkSelecting connector

For selecting a different Wallet Connector use the async selectConnector(connectorName: string): Promise<boolean> method. This method will check if the desired connector is installed. If it is not detected in 1 second, the method throws an error.

expect(await fuel.selectConnector("Fuel Wallet")).toBeTruthy();
expect(await fuel.selectConnector("Third Wallet")).toBeTruthy();

Icon LinkAdd connector

For adding a Wallet Connector use the addConnector(connector: FuelWalletConnector): boolean method. This method does not trigger any errors if the target Connector is not installed.

const connectorName = "Second Wallet";
fuel.addConnector({ name: connectorName });
expect(fuel.hasConnector(connectorName)).toBeTruthy();

Icon LinkRemove connector

To remove a Wallet Connector use the removeConnector(connectorName: string): boolean method.

const connectorName = "Another Wallet";
expect(
  fuel.listConnectors().find((i) => i.name === connectorName)
).toBeTruthy();
fuel.removeConnector(connectorName);
expect(fuel.listConnectors().find((i) => i.name === connectorName)).toBeFalsy();

Icon LinkEvents

Fuel emits events when certain actions occur. These events can be listened to by using the on method.

The events API follows the native Node.js EventEmitter enabling, on, once, and off. The events enum FuelWalletEvents can be imported from the @fuel-wallet/sdk package.

Icon LinkUsage

The fuel object has an events property which is an enum of all the events that can be listened to.
The on method takes two arguments, the event name and a callback function. The callback function receives data associated with the event.

Icon LinkConnection

This event is triggered when the connection status change between the Wallet and the application. The callback function receives the connection object.

import { useEffect, useState } from "react";
 
import { useFuel } from "./useFuel";
 
export function useIsConnected() {
  const [fuel] = useFuel();
  const [isConnected, setIsConnected] = useState(false);
 
  useEffect(() => {
    async function handleConnection() {
      const isConnected = await fuel.isConnected();
      setIsConnected(isConnected);
    }
 
    if (fuel) {
      handleConnection();
    }
 
    /* eventConnection:start */
    fuel?.on(fuel.events.connection, handleConnection);
    return () => {
      fuel?.off(fuel.events.connection, handleConnection);
    };
    /* eventConnection:end */
  }, [fuel]);
 
  return [isConnected];
}

Icon LinkAccounts

This event is triggered when the list of connected accounts to the application change. The callback function receives the account string.

const handleAccountsEvent = (accounts: string[]) => {
  setAccounts(accounts);
};
 
useEffect(() => {
  fuel?.on(fuel.events.accounts, handleAccountsEvent);
  return () => {
    fuel?.off(fuel.events.accounts, handleAccountsEvent);
  };
}, [fuel]);

Icon LinkCurrent Account

This event is triggered when the current account is changed in the Fuel Wallet Extension. The callback function receives the account address.

This event is only triggered if the application has access to the current account address. Otherwise, it is not triggered.

const handleAccountEvent = (account: string) => {
  setCurrentAccount(account);
};
 
useEffect(() => {
  // listen to the current event account, and call the handleAccountEvent
  fuel?.on(fuel.events.currentAccount, handleAccountEvent);
  return () => {
    // remove the listener when the component is unmounted
    fuel?.off(fuel.events.currentAccount, handleAccountEvent);
  };
}, [fuel]);

Icon LinkNetwork

This event is triggered when the client connects to a different network. The callback function receives the network object.

const handleNetworkChange = (network: FuelProviderConfig) => {
  setNetwork(network);
};
 
useEffect(() => {
  fuel?.on(fuel.events.network, handleNetworkChange);
 
  return () => {
    fuel?.off(fuel.events.network, handleNetworkChange);
  };
}, [fuel]);

Icon LinkCurrentConnector

This event is triggered when the Current Connector is updated. The callback function receives the FuelWalletConnector object.

fuel.on(fuel.events.currentConnector, onCurrentConnector);
return () => {
  fuel.off(fuel.events.currentConnector, onCurrentConnector);
};

Icon LinkConnectors

This event is triggered when the Connectors list is updated. The callback function receives the list of connectors, Array<FuelWalletConnector>.

fuel.on(fuel.events.connectors, onConnectors);
return () => {
  fuel.off(fuel.events.connectors, onConnectors);
};