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.

import { Box, Text } from '@fuel-ui/react';
import { useEffect, useState } from 'react';
 
import { ExampleBox } from '../src/components/ExampleBox';
 
export function FuelLoaded() {
  const [fuel, setFuel] = useState<Window['fuel']>();
 
  useEffect(() => {
    /* detectFuel:start */
    // 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);
    };
    /* detectFuel:end */
  }, []);
 
  return (
    <ExampleBox showNotDetectedOverlay={false}>
      <Box.Flex gap="$4">
        {fuel ? (
          <Text>
            <b>fuel</b> is ready to use
          </Text>
        ) : (
          <Text>
            <b>fuel</b> not detected
          </Text>
        )}
      </Box.Flex>
    </ExampleBox>
  );
}

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';
 
export function useFuel() {
  const [error, setError] = useState('');
  const [isLoading, setLoading] = useState(true);
  const [fuel] = useState<Fuel>(new Fuel({ name: 'Fuel Wallet' }));
 
  useEffect(() => {
    fuel.hasWallet().then((hasWallet) => {
      setError(hasWallet ? '' : 'fuel not detected on the window!');
      setLoading(false);
    });
  }, []);
 
  return [fuel as Fuel, error, isLoading] as const;
}

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

import { cssObj } from '@fuel-ui/css';
import { Box, Button, Tag, Text } from '@fuel-ui/react';
import { useEffect, useState } from 'react';
 
import { ExampleBox } from '../../src/components/ExampleBox';
import { useFuel } from '../../src/hooks/useFuel';
import { useIsConnected } from '../../src/hooks/useIsConnected';
import { useLoading } from '../../src/hooks/useLoading';
 
export function Accounts() {
  /* useFuel:start */
  const [fuel, notDetected] = useFuel();
  /* useFuel:end */
  const [accounts, setAccounts] = useState<string[]>([]);
  const [isConnected] = useIsConnected();
  const [handleAccounts, errorAccounts] = useLoading(async () => {
    const accounts = await fuel.accounts();
    setAccounts(accounts);
  });
 
  const [handleConnect, isConnecting, errorConnect] = useLoading(async () => {
    await fuel.connect();
  });
 
  /* eventAccountChanges:start */
  const handleAccountsEvent = (accounts: string[]) => {
    setAccounts(accounts);
  };
 
  useEffect(() => {
    fuel?.on(fuel.events.accounts, handleAccountsEvent);
    return () => {
      fuel?.off(fuel.events.accounts, handleAccountsEvent);
    };
  }, [fuel]);
  /* eventAccountChanges:end */
  useEffect(() => {
    if (isConnected) handleAccounts();
  }, [isConnected]);
 
  const errorMessage = errorAccounts || notDetected || errorConnect;
 
  return (
    <ExampleBox error={errorMessage}>
      <Box.Stack css={styles.root}>
        <Box.Stack gap="$3" css={{ mt: '$2' }}>
          <Text> All connected accounts: </Text>
          {accounts.length > 0 ? (
            <>
              {accounts.map((account) => (
                <Tag size="xs" variant="ghost" key={account}>
                  <Text key={account}>{account}</Text>
                </Tag>
              ))}
              <Text>
                <em>
                  Connect / Disconnect accounts in your Fuel wallet to test the
                  event.
                </em>
              </Text>
            </>
          ) : (
            <Text> No accounts connected </Text>
          )}
          {!isConnected && (
            <Button
              onPress={handleConnect}
              isLoading={isConnecting}
              isDisabled={!fuel || isConnecting}
            >
              View your accounts
            </Button>
          )}
        </Box.Stack>
      </Box.Stack>
    </ExampleBox>
  );
}
 
const styles = {
  root: cssObj({
    gap: '$2',
    display: 'inline-flex',
    alignItems: 'flex-start',
 
    '.fuel_Tag > p': {
      fontSize: '$sm',
    },
  }),
};

Icon HelpCircleQuestions? Give us a feedback Icon EditEdit this page