Before interacting with the wallet, you need to request a connection, which will authorize your application to execute other actions. You can do this by calling the connect() method on the window.fuel object.
const isConnected = await fuel.connect();
console.log("Connection response", isConnected); To disconnect, use the disconnect() method.
await fuel.disconnect(); To check if the user's wallet is already connected, you can use the isConnected() method.
const isConnected = await fuel.isConnected();
expect(isConnected).toBeTruthy(); The connect() method returns a promise. If you prefer to do it in an async way, you can use fuel.on('connection', () => void) to
listen for changes in the connection.
fuel?.on(fuel.events.connection, handleConnection);
return () => {
fuel?.off(fuel.events.connection, handleConnection);
}; In a React app, you can use the useIsConnected hook below to check if the user's wallet is connected.
This hook depends on the useFuel hook on the Getting Started page.
import { useEffect, useState } from "react";
import { useFuel } from "./useFuel";
export function useIsConnected() {
const [fuel] = useFuel();
const [isConnected, setIsConnected] = useState(false);
useEffect(() => {
async function handleConnection() {
const isConnected = await fuel.isConnected();
setIsConnected(isConnected);
}
if (fuel) {
handleConnection();
}
/* eventConnection:start */
fuel?.on(fuel.events.connection, handleConnection);
return () => {
fuel?.off(fuel.events.connection, handleConnection);
};
/* eventConnection:end */
}, [fuel]);
return [isConnected];
} Here is how you can use the useIsConnected hook in a component:
const [fuel, notDetected] = useFuel();