Icon LinkConnecting

Icon LinkRequesting a Connection

Before interacting with the wallet, you need to request a connection, which will authorize your application to execute other actions. You can do this by calling the connect() method on the window.fuel object.

const isConnected = await fuel.connect();
console.log("Connection response", isConnected);

To disconnect, use the disconnect() method.

await fuel.disconnect();

Icon LinkChecking for a Connection

To check if the user's wallet is already connected, you can use the isConnected() method.

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

Icon LinkListening to Connection Events

The connect() method returns a promise. If you prefer to do it in an async way, you can use fuel.on('connection', () => void) to listen for changes in the connection.

fuel?.on(fuel.events.connection, handleConnection);
return () => {
  fuel?.off(fuel.events.connection, handleConnection);
};

Icon LinkWith React

In a React app, you can use the useIsConnected hook below to check if the user's wallet is connected.

import { useIsConnected } from '@fuel-wallet/react';
// ...
const { isConnected } = useIsConnected();

You can import the useConnect hook to access the connect function and request a connection.

import { useConnect } from '@fuel-wallet/react';
// ...
const { connect } = useConnect();
await connect();

To disconnect, use the useDisconnect() hook.

import { useDisconnect } from '@fuel-wallet/react';
// ...
const { disconnect } = useDisconnect();
await disconnect();