⌘K

Icon HelpCircleForumIcon Link
Icon SunFilledIcon MoonStars

⌘K

Icon HelpCircleForumIcon Link
Icon SunFilledIcon MoonStars
Connecting

Icon LinkConnecting

Icon LinkChecking if a Connector is available

Before performing other actions, the Application should check whether the user has a Wallet installed. While this is not required, it is good practice to ensure a better user experience.

const hasConnector = await fuel.hasConnector();
console.log("hasConnector", hasConnector);

As a user installs a wallet, you can listen for changes on the status of the currentConnector.

function logConnector(currentConnector: FuelConnector) {
  console.log("currentConnector", currentConnector);
}
fuel.on(fuel.events.currentConnector, logConnector);
Check if it's working
Wallet not detected on the browser

You can learn more about connectors and how they work to allow multiple wallet's here Icon Link

Icon LinkRequesting a Connection

Before any user actions begin, the user must authorize the connection by calling the connect() method. This will initiate the connection flow in the user's Wallet, particularly if the user has more accounts than what is currently available to the connection.

const connectionState = await fuel.connect();
console.log("Connection state", connectionState);
Check if it's workingIcon AlertTriangleNot working

Icon LinkChecking connection state

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

const connectionState = await fuel.isConnected();
console.log("Connection state", connectionState);
Check if it's workingIcon AlertTriangleNot working
Your wallet is disconnected

Icon LinkWatching connection state

Since a user can add or remove a connection directly inside the wallet, we also recommend that your application listens for connection state changes using the event listener.

const logConnectionState = (connectionState: boolean) => {
  console.log("connectionState", connectionState);
};
fuel.on(fuel.events.connection, logConnectionState);

Icon LinkRemoving connection

In some cases, an application may want to provide an experience for the user to remove the connection. In these cases, you can use the disconnect() method.

const connectionState = await fuel.disconnect();
console.log("Connection state", connectionState);
Check if it's workingIcon AlertTriangleNot working
You are not connected

Icon LinkUsing React Hooks

Icon LinkRequesting a Connection

In React applications, you can leverage our ready to use hooks, which include event tracking.

const { connect, isPending, error } = useConnect();
Check if it's workingIcon AlertTriangleNot working

Icon LinkRemoving connection

const { disconnect, isPending, error } = useDisconnect();
Check if it's workingIcon AlertTriangleNot working
You are not connected

Icon LinkChecking connection state

All hooks implement validations to ensure that the state is synchronized, using the methods and events available from the SDK.

const { isConnected } = useIsConnected();