Icon HelpCircleForumIcon Link

⌘K

Icon HelpCircleForumIcon Link
Hooks Reference

Icon LinkReact Hooks Reference

Icon LinkuseAccount

Retrieves the current fuel account and returns the account address <string | null>.

const { account } = useAccount();
console.log(account);
// fuel1r20zhd...

See the source file Icon Link

Icon LinkuseAccounts

Retrieves the fuel accounts and returns the addresses of the accounts <string[]>

const { accounts } = useAccounts();
console.log(accounts);
// [fuel1r20zhd..., fuel1qqluc9..., ...]

See the source file Icon Link

Icon LinkuseBalance

Fetches the balance <BN | null> of a specified address and asset ID. Additionally, it includes a listener that triggers a balance refresh when the window gains focus.

const { balance } = useBalance({
  address: 'fuel1r20zhd...',
  assetId: '0x000000000...',
});
 
console.log(balance);
// 1000 (example balance)

See the source file Icon Link

Icon LinkuseChain

Fetches information about the current Fuel network <ChainInfo | null>.

const { chain } = useChain();
console.log(chain.name);

See the source file Icon Link

Icon LinkuseConnect

Facilitates the connection to the Fuel wallet. Allows selecting a connector by name. It also provides a function UseMutateAsyncFunction<boolean | undefined> to initiate the connection and relevant mutation properties for managing the connection state.

const { connect, connectAsync } = useConnect();
 
const handleConnect = async () => {
  connect('Fuel Wallet');
 
  // Async way
  await connectAsync('exampleConnectorName');
};
 
handleConnect();

See the source file Icon Link

Icon LinkuseConnectors

Retrieves a list of available connectors Array<FuelConnector> for connecting to Fuel.

const { connectors } = useConnectors();
 
console.log(connectors);

See the source file Icon Link

Icon LinkuseContractRead

Reads and calls a method from a Fuel contract, returns <InvokeFunctions>.

Icon LinkReading with a Contract instance

const { contractRead } = useContractRead({
  contract: _contract,
  functionName: 'get_count',
  args: undefined,
});

Icon LinkReading with ABI + ContractId + Provider

const { contractRead } = useContractRead({
  contract: { address, abi: countAbi, provider },
  functionName: 'get_count',
  args: undefined,
});
Icon InfoCircle

For more information on our Provider, refer to our TS SDK docs Icon Link

Icon InfoCircle

Click here Icon Link to see an example of an ABI for a Fuel contract

See the source file Icon Link

Icon LinkuseDisconnect

Facilitates disconnection from the Fuel Wallet. It provides a function UseMutateAsyncFunction<boolean | undefined> to initiate disconnection.

const { disconnect } = useDisconnect();
 
const handleDisconnect = async () => {
  disconnect();
 
  // Async way
  await disconnectAsync();  
};
 
handleDisconnect();

See the source file Icon Link

Icon LinkuseIsConnected

Checks whether the user is connected to the Fuel protocol. It provides a boolean indicating the connection.

const { isConnected } = useIsConnected();
console.log(isConnected);
// true

See the source file Icon Link

Icon LinkuseNodeInfo

Asynchronously retrieves information about the connected node, checks compatibility with a specified version. The function returns isCompatible (a <boolean>), and node information.

const { isCompatible } = useNodeInfo();

See the source file Icon Link

Icon LinkuseProvider

Returns the provider from the Fuel object instance.

const { provider } = useProvider();

See the source file Icon Link

Icon LinkuseSendTransaction

Hook for signing and sending transactions to the Fuel network.

const { sendTransaction, sendTransactionAsync } = useSendTransaction();
 
const handleSendTransaction = async () => {
  // The amount of coins to transfer.
  const amount = bn(1);
 
  // Create a transaction request using wallet helper (check useWallet hook if needed)
  const transactionRequest = await wallet.createTransfer(
    destination,
    amount
  );
 
  sendTransaction({
    address: '0xd7ad97...', // The address to sign the transaction
    transactionRequest,
  })
 
  // Async way
  await sendTransactionAsync({
    address: '0xd7ad97...', // The address to sign the transaction
    transactionRequest,
  });
};
 
handleSendTransaction();

See the source file Icon Link

Icon LinkuseTransaction

Retrieves transaction information associated with a specific transaction ID.

const { transaction } = useTransaction({ txId: '0xd7ad97...' });

See the source file Icon Link

Icon Link
useTransactionReceipts
DeprecatedMenu Icon

Retrieves transaction receipts Array<TransactionResultReceipt> associated with a specific transaction ID using the useFuel hook.

const { transactionReceipts } = useTransactionReceipts({
  txId: '0xd7ad97...',
});

See the source file Icon Link

Icon LinkuseTransactionResult

Retrieves a transaction result associated with a specific transaction ID.

Icon LinkBasic Usage

const { transactionResult } = useTransactionResult({ txId: '0xd7ad97...' });

Icon LinkCustom Name

Customize the data attribute of the most recently resolved data.

const { anything } = useTransactionResult({ 
  txId: '0xd7ad97...',
  query: {
    name: 'anything',
  },
});

Icon LinkCustom Selector

Transform or select a specific part of the data returned by the query function.
This modification affects the returned data value but does not impact the data stored in the query cache.

const { receipts } = useTransactionResult({ 
  txId: '0xd7ad97...',
  query: {
    // you can omit custom "name" if you don't need it
    name: 'receipts',
    // ((data: TransactionResult<TransactionType> | null) => T) | undefined
    select: (data) => data?.receipts,
  },
});

See the source file Icon Link

Icon LinkuseWallet

Retrieves wallet instance <Account | null> and ensures the presence of a valid address and fuel instance.

const { wallet } = useWallet({ address: 'fuel1r20zhd...' });

See the source file Icon Link