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();
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';
2
3import { FuelProvider } from '@fuels/react';
4import { defaultConnectors } from '@fuels/connectors';
5
6const queryClient = new QueryClient();
7
8ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
9 <React.StrictMode>
10 <QueryClientProvider client={queryClient}>
11 <FuelProvider fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}>
12 <App />
13 </FuelProvider>
14 </QueryClientProvider>
15 </React.StrictMode>
16);
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 .