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);

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);

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);

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);

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();

Icon LinkRemoving connection

const { disconnect, isPending, error } = useDisconnect();

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();