Connecting

Requesting a Connection

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.

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

To disconnect, use the disconnect() method.

1await fuel.disconnect();

Checking for a Connection

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

1const isConnected = await fuel.isConnected();
2expect(isConnected).toBeTruthy();

Listening to Connection Events

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.

1fuel?.on(fuel.events.connection, handleConnection);
2return () => {
3  fuel?.off(fuel.events.connection, handleConnection);
4};

With React

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 Icon Link page.

1import { useEffect, useState } from "react";
2
3import { useFuel } from "./useFuel";
4
5export function useIsConnected() {
6  const [fuel] = useFuel();
7  const [isConnected, setIsConnected] = useState(false);
8
9  useEffect(() => {
10    async function handleConnection() {
11      const isConnected = await fuel.isConnected();
12      setIsConnected(isConnected);
13    }
14
15    if (fuel) {
16      handleConnection();
17    }
18
19    /* eventConnection:start */
20    fuel?.on(fuel.events.connection, handleConnection);
21    return () => {
22      fuel?.off(fuel.events.connection, handleConnection);
23    };
24    /* eventConnection:end */
25  }, [fuel]);
26
27  return [isConnected];
28}

Here is how you can use the useIsConnected hook in a component:

1const [fuel, notDetected] = useFuel();