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

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

1window.fuel.connect();

You can try this code directly in the developer console.

TypeScript

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.

Installation

1npm install fuels @fuel-wallet/sdk

Usage

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

1{
2  "compilerOptions": {
3    "types": ["@fuel-wallet/sdk"]
4  }
5}

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

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

Example

Window

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

1window.fuel?.connect();

SDK

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

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

Detect 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.

1// Fuel loaded handler
2const onFuelLoaded = () => {
3  setFuel(window.fuel);
4};
5
6// If fuel is already loaded, call the handler
7if (window.fuel) {
8  onFuelLoaded();
9}
10
11// Listen for the fuelLoaded event
12document.addEventListener("FuelLoaded", onFuelLoaded);
13
14// On unmount, remove the event listener
15return () => {
16  document.removeEventListener("FuelLoaded", onFuelLoaded);
17};

With React

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

1import { Fuel } from "@fuel-wallet/sdk";
2import { useState, useEffect } from "react";
3
4export function useFuel() {
5  const [error, setError] = useState("");
6  const [isLoading, setLoading] = useState(true);
7  const [fuel] = useState<Fuel>(new Fuel({ name: "Fuel Wallet" }));
8
9  useEffect(() => {
10    fuel.hasWallet().then((hasWallet) => {
11      setError(hasWallet ? "" : "fuel not detected on the window!");
12      setLoading(false);
13    });
14  }, []);
15
16  return [fuel as Fuel, error, isLoading] as const;
17}

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

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