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 .
To begin integrating the Fuel Wallet SDK into your DApp, you first need to install the packages @fuels/connectors and fuels.
1npm 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.
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.
1import { Fuel } from 'fuels';
2import { defaultConnectors } from '@fuels/connectors';
3
4const fuel = new Fuel({
5 connectors: defaultConnectors({ devMode: true }),
6});
7
8await fuel.selectConnector('Fuel Wallet');
9await fuel.connect(); The defaultConnectors function accepts various configuration options to customize wallet connectivity:
devMode: Enables development-specific connectors. wcProjectId: Required for WalletConnect integration. This should be obtained from the WalletConnect Dashboard . Without a valid project ID, WalletConnect connectivity won't function properly. ethWagmiConfig: Configuration for Ethereum integration via wagmi. ethSkipAutoReconnect: When set to true, prevents session loss when refreshing the page in certain conditions. burnerWalletConfig.storage: Custom storage implementation for the burner wallet. burnerWalletConfig.chainId: Chain ID for the burner wallet to use. 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:
1import { CHAIN_IDS } from 'fuels';
2
3// Standard chain IDs
4const mainnetChainId = CHAIN_IDS.fuel.mainnet;
5const testnetChainId = CHAIN_IDS.fuel.testnet;
6const devnetChainId = CHAIN_IDS.fuel.devnet; solanaConfig: Configuration object for Solana wallet integrations. 1import { Fuel, Provider, CHAIN_IDS } from 'fuels';
2import { defaultConnectors } from '@fuels/connectors';
3import { wagmiConfig } from './wagmi-config'; // Your wagmi configuration
4
5// Chain and provider details
6const CHAIN_ID = CHAIN_IDS.fuel.mainnet; // 0 for mainnet
7const PROVIDER_URL = 'http://localhost:4000/v1/graphql';
8
9const fuel = new Fuel({
10 connectors: defaultConnectors({
11 devMode: true,
12 wcProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
13 ethWagmiConfig: wagmiConfig,
14 ethSkipAutoReconnect: true,
15 burnerWalletConfig: {
16 storage: window.localStorage,
17 chainId: CHAIN_ID,
18 },
19 chainId: CHAIN_ID,
20 fuelProvider: new Provider(PROVIDER_URL),
21 solanaConfig: {
22 // Solana-specific configuration
23 },
24 }),
25});
26
27await fuel.selectConnector('Fuel Wallet');
28await fuel.connect();1import { Fuel } from 'fuels';
2import { FuelWalletConnector } from '@fuels/connectors';
3
4const fuel = new Fuel({
5 connectors: [new FuelWalletConnector()],
6});
7
8await fuel.selectConnector('Fuel Wallet');
9await fuel.connect();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.
1npm install fuels @fuels/connectors @fuels/react @tanstack/react-query Wrap your application with the providers QueryClientProvider and FuelProvider.
1import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
2import { Provider, CHAIN_IDS } from 'fuels';
3import { FuelProvider } from '@fuels/react';
4import { defaultConnectors } from '@fuels/connectors';
5
6const queryClient = new QueryClient();
7const PROVIDER_URL = 'http://localhost:4000/v1/graphql';
8const CHAIN_ID = CHAIN_IDS.fuel.mainnet; // Using mainnet chain ID
9
10ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
11 <React.StrictMode>
12 <QueryClientProvider client={queryClient}>
13 <FuelProvider fuelConfig={{
14 connectors: defaultConnectors({
15 devMode: true,
16 wcProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
17 chainId: CHAIN_ID,
18 fuelProvider: new Provider(PROVIDER_URL),
19 })
20 }}>
21 <App />
22 </FuelProvider>
23 </QueryClientProvider>
24 </React.StrictMode>
25); Alternatively, you can pass ui={false} to the FuelProvider to disable the UI in order to implement your own UI.
1import { useConnectUI } from '@fuels/react';
2const { connect, isConnecting } = useConnectUI();
3
4<button onClick={connect}>
5 {isConnecting ? 'Connecting...' : 'Connect'}
6</button>Check our example application for a quick start .