Fuel Wallet Connectors

Fuel Wallet Connectors are an interface provided by wallet developers to allow your DApp to integrate with specific wallets.

You can learn more about how Fuel Wallet Connectors work, by reading the Fuel Wallet Connectors Icon Link spec.

Setup Fuel Wallet Connectors

The Fuel Wallet SDK enables you to include a set of connectors when creating a new instance. If you don't provide any connectors, the SDK will default to using the FuelWalletConnector() and FueletWalletConnector() methods.

1import {
2  Fuel,
3  FuelWalletConnector,
4  FueletWalletConnector,
5  FuelWalletDevelopmentConnector,
6} from "@fuel-wallet/sdk";
7
8const fuel = new Fuel({
9  connectors: [
10    new FuelWalletDevelopmentConnector(),
11    new FueletWalletConnector(),
12    new FuelWalletConnector(),
13  ],
14});

Listing Connectors

When working with multiple connectors, you should enable users to select the connectors they wish to use for interacting with your DApp. Once the connectors() method is called, the Fuel Wallet SDK will query information from the connectors, allowing you to determine which connectors are installed.

We also recommend to use the connectors listener on places that will use the connectors() method as the availability can change.

1const connectors = await fuel.connectors();
2console.log("available connectors", connectors);
3
4fuel.on(fuel.events.connectors, (connectors) => {
5  console.log("available connectors", connectors);
6});

Selecting Connector

Once you have a list of connectors, you can enable the user to select the connector they wish to use by using the selectConnect() method. If the connector is not installed, the SDK will return false.

1const isSelected = await fuel.selectConnector(connectorName);
2console.log("isSelected", isSelected);

Interacting with the selected connector

Once you have selected a connector, you can interact with it using all the available methods.

1const connectionState = await fuel.connect();
2console.log("connectionState", connectionState);

With React

Connectors UI

When using a React application, you can utilize the Connectors UI provided by the React package.

You can see the full a DApp example on the examples Icon Link folder.

Only hooks

If you prefer to build your own UI for the connectors you achieve the experience using the hooks useConnect() and useConnectors().

1const { connectors } = useConnectors();
2const { connect, isLoading: connecting, error: errorConnecting } = useConnect();
3
4function handleConnect(connectorName: string) {
5  connect(connectorName);
6}