Docs Icon ChevronRight For Developers Icon ChevronRight Hooks Reference

React Hooks Reference

useAccount

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

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

See the source file Icon Link

useAccounts

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

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

See the source file Icon Link

useBalance

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.

1const { balance } = useBalance({
2  address: 'fuel1r20zhd...',
3  assetId: '0x000000000...',
4});
5
6console.log(balance);
7// 1000 (example balance)

See the source file Icon Link

useChain

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

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

See the source file Icon Link

useConnect

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.

1const { connect, connectAsync } = useConnect();
2
3const handleConnect = async () => {
4  connect('Fuel Wallet');
5
6  // Async way
7  await connectAsync('exampleConnectorName');
8};
9
10handleConnect();

See the source file Icon Link

useConnectors

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

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

See the source file Icon Link

useDisconnect

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

1const { disconnect } = useDisconnect();
2
3const handleDisconnect = async () => {
4  disconnect();
5
6  // Async way
7  await disconnectAsync();  
8};
9
10handleDisconnect();

See the source file Icon Link

useIsConnected

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

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

See the source file Icon Link

useNodeInfo

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

1const { isCompatible } = useNodeInfo();

See the source file Icon Link

useProvider

Returns the provider from the Fuel object instance.

1const { provider } = useProvider();

See the source file Icon Link

useTransaction

Retrieves transaction information associated with a specific transaction ID by using the provider.getTransaction method.

1const { transaction } = useTransaction({ txId: 'fuel1r20zhd...' });

See the source file Icon Link

useTransactionReceipts

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

1const { transactionReceipts } = useTransactionReceipts({
2  txId: 'fuel1r20zhd...',
3});

See the source file Icon Link

useWallet

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

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

See the source file Icon Link