Icon LinkGetting Started

You can integrate your DApp seamlessly with Fuel Wallet using our simple API, which is injected directly into the browser window. This eliminates the need for additional dependencies, allowing you to perform key actions effortlessly. For even more powerful and customizable integration, use Fuel Wallet in conjunction with the Fuel TS SDK .

If you've correctly installed the Fuel wallet extension, the wallet SDK will be injected automatically on the window object on the property fuel. To access it, you can use window.fuel

window.fuel.connect();

You can try this code directly in the developer console.

Icon LinkTypeScript

The Fuel Wallet SDK provides a package on npm, making it more convenient to use in TypeScript projects. To use it, you must also install the fuels Icon Link package as a dependency.

Icon LinkInstallation

npm install fuels @fuel-wallet/sdk

Icon LinkUsage

To use the SDK in your TypeScript project, add the following line to your tsconfig.json file:

{
  "compilerOptions": {
    "types": ["@fuel-wallet/sdk"]
  }
}

Alternatively, you can use a TypeScript reference Icon Link directive in any TypeScript file:

/// <reference types="@fuel-wallet/sdk" />

Icon LinkExample

Icon LinkWindow

With the SDK imported, fuel will be conveniently typed and accessible on the window object.

window.fuel?.connect();

Icon LinkSDK

Alternatively, you can directly use the SDK by creating new instance of Fuel to interact with the wallet.

import { Fuel } from '@fuel-wallet/sdk';
 
const fuel = new Fuel();
await fuel.connect();

Icon LinkDetect when fuel is loaded

It's possible that your application loads before window.fuel is injected. To detect when the fuel is loaded and ready to use, you can listen to the event FuelLoaded on the document.

// Fuel loaded handler
const onFuelLoaded = () => {
  setFuel(window.fuel);
};
 
// If fuel is already loaded, call the handler
if (window.fuel) {
  onFuelLoaded();
}
 
// Listen for the fuelLoaded event
document.addEventListener("FuelLoaded", onFuelLoaded);
 
// On unmount, remove the event listener
return () => {
  document.removeEventListener("FuelLoaded", onFuelLoaded);
};

Icon LinkWith React

In a React app, you can use the useFuel hook below to detect if the Fuel Wallet extension is installed or not.

import { Fuel } from "@fuel-wallet/sdk";
import { useState, useEffect } from "react";
 
const fuelSDK = new Fuel();
 
export function useFuel() {
  const [error, setError] = useState("");
  const [isLoading, setLoading] = useState(true);
 
  useEffect(() => {
    fuelSDK
      .hasWallet()
      .then((hasWallet) => {
        setError(hasWallet ? "" : "fuel not detected on the window!");
        setLoading(false);
      })
      .catch(() => {});
 
    const handleFuelLoad = () => {
      setLoading(false);
      setError("");
    };
 
    fuelSDK.on(fuelSDK.events.load, handleFuelLoad);
    return () => {
      fuelSDK.on(fuelSDK.events.load, handleFuelLoad);
    };
  }, []);
 
  return [fuelSDK, error, isLoading] as const;
}

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

const [fuel, notDetected] = useFuel();