Connecting

Checking 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.

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

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

1function logConnector(currentConnector: FuelConnector) {
2  console.log("currentConnector", currentConnector);
3}
4fuel.on(fuel.events.currentConnector, logConnector);

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

Requesting 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.

1const connectionState = await fuel.connect();
2console.log("Connection state", connectionState);

Checking connection state

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

1const connectionState = await fuel.isConnected();
2console.log("Connection state", connectionState);

Watching 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.

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

Removing 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.

1const connectionState = await fuel.disconnect();
2console.log("Connection state", connectionState);

Using React Hooks

Requesting a Connection

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

1const { connect, isLoading, error } = useConnect();

Removing connection

1const { disconnect, isLoading, error } = useDisconnect();

Checking connection state

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

1const { isConnected } = useIsConnected();