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
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);
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);
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);
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);
In React applications, you can leverage our ready to use hooks, which include event tracking.
1const { connect, isPending, error } = useConnect();
1const { disconnect, isPending, error } = useDisconnect();
All hooks implement validations to ensure that the state is synchronized, using the methods and events available from the SDK.
1const { isConnected } = useIsConnected();