Docs Icon ChevronRight For Developers Icon ChevronRight Connecting

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.

CheckWallet.tsx Icon Link
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.

CheckWallet.tsx Icon Link
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.

Connect.tsx Icon Link
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.

CheckConnection.tsx Icon Link
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.

CheckConnection.tsx Icon Link
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.

Disconnect.tsx Icon Link
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.

ConnectHook.tsx Icon Link
1const { connect, isPending, error } = useConnect();

Removing connection

DisconnectHook.tsx Icon Link
1const { disconnect, isPending, 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.

ConnectHook.tsx Icon Link
1const { isConnected } = useIsConnected();