Icon HelpCircleForumIcon Link

⌘K

Icon HelpCircleForumIcon Link
Docs /
Nightly /
Wallet /
Dev /
Getting Started

Icon LinkGetting Started

The Fuel Wallet SDK serves as a connection manager between your DApp and other wallets compatible with the Fuel Network. This package ensures that you can connect to the Fuel Wallet as well as any other wallet using a unified API.

If you are using React jump to the React section .

Icon LinkInstallation

To begin integrating the Fuel Wallet SDK into your DApp, you first need to install the packages @fuels/connectors and fuels. 

npm install fuels @fuels/connectors

The installation also requires the fuels SDK, as it is used to communicate with the Fuel Network and provides a set of utilities required for interacting with contracts on the Fuel Network.

Icon LinkExample

You can import defaultConnectors from @fuels/connectors to get a list of all the default connectors. Besides that, you can also create your own connectors or import them individually.

Icon LinkUsing default connectors 

import { Fuel } from 'fuels';
import { defaultConnectors } from '@fuels/connectors';
 
const fuel = new Fuel({
  connectors: defaultConnectors({ devMode: true }),
});
 
await fuel.selectConnector('Fuel Wallet');
await fuel.connect();

Icon LinkConfiguration Options

The defaultConnectors function accepts various configuration options to customize wallet connectivity:

Icon LinkDevelopment Mode

  • devMode: Enables development-specific connectors.

Icon LinkWalletConnect Configuration

  • wcProjectId: Required for WalletConnect integration. This should be obtained from the WalletConnect Dashboard Icon Link. Without a valid project ID, WalletConnect connectivity won't function properly.

Icon LinkEthereum Integration

  • ethWagmiConfig: Configuration for Ethereum integration via wagmi.
  • ethSkipAutoReconnect: When set to true, prevents session loss when refreshing the page in certain conditions.

Icon LinkBurner Wallet Configuration

  • burnerWalletConfig.storage: Custom storage implementation for the burner wallet.
  • burnerWalletConfig.chainId: Chain ID for the burner wallet to use.

Icon LinkProvider Configuration

  • fuelProvider: Allows providing a custom Provider instance.
  • chainId: Required. Specifies the target chain ID for all connectors as a numeric value (e.g., 0, 1, 2).

You can use the CHAIN_IDS constant from the fuels package for standard chain IDs: 

import { CHAIN_IDS } from 'fuels';
 
// Standard chain IDs
const mainnetChainId = CHAIN_IDS.fuel.mainnet; 
const testnetChainId = CHAIN_IDS.fuel.testnet; 
const devnetChainId = CHAIN_IDS.fuel.devnet;

Icon LinkSolana Integration

  • solanaConfig: Configuration object for Solana wallet integrations.

Icon LinkComplete Example 

import { Fuel, Provider, CHAIN_IDS } from 'fuels';
import { defaultConnectors } from '@fuels/connectors';
import { wagmiConfig } from './wagmi-config'; // Your wagmi configuration
 
// Chain and provider details
const CHAIN_ID = CHAIN_IDS.fuel.mainnet; // 0 for mainnet
const PROVIDER_URL = 'http://localhost:4000/v1/graphql';
 
const fuel = new Fuel({
  connectors: defaultConnectors({
    devMode: true,
    wcProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
    ethWagmiConfig: wagmiConfig,
    ethSkipAutoReconnect: true,
    burnerWalletConfig: {
      storage: window.localStorage,
      chainId: CHAIN_ID,
    },
    chainId: CHAIN_ID,
    fuelProvider: new Provider(PROVIDER_URL),
    solanaConfig: {
      // Solana-specific configuration
    },
  }),
});
 
await fuel.selectConnector('Fuel Wallet');
await fuel.connect();

Icon LinkUsing a custom list 

import { Fuel } from 'fuels';
import { FuelWalletConnector } from '@fuels/connectors';
 
const fuel = new Fuel({
  connectors: [new FuelWalletConnector()],
});
 
await fuel.selectConnector('Fuel Wallet');
await fuel.connect();

Icon LinkUsing React

We also provide a set of React hooks and a user interface (UI) for seamless interaction with connectors, eliminating the need for manual UI creation.

Icon LinkInstallation 

npm install fuels @fuels/connectors @fuels/react @tanstack/react-query

Icon LinkExample

Icon LinkSetup

Wrap your application with the providers QueryClientProvider and FuelProvider. 

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Provider, CHAIN_IDS } from 'fuels';
import { FuelProvider } from '@fuels/react';
import { defaultConnectors } from '@fuels/connectors';
 
const queryClient = new QueryClient();
const PROVIDER_URL = 'http://localhost:4000/v1/graphql';
const CHAIN_ID = CHAIN_IDS.fuel.mainnet; // Using mainnet chain ID
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <FuelProvider fuelConfig={{ 
        connectors: defaultConnectors({ 
          devMode: true,
          wcProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
          chainId: CHAIN_ID,
          fuelProvider: new Provider(PROVIDER_URL),
        }) 
      }}>
        <App />
      </FuelProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

Alternatively, you can pass ui={false} to the FuelProvider to disable the UI in order to implement your own UI.

Icon LinkUsage 

import { useConnectUI } from '@fuels/react';
const { connect, isConnecting } = useConnectUI();
 
<button onClick={connect}>
  {isConnecting ? 'Connecting...' : 'Connect'}
</button>

Check our example application for a quick start Icon Link.