Icon LinkFuel 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.

Icon LinkSetup Fuel Wallet Connectors

The Fuel Wallet SDK enables you to include a set of connectors when creating a new instance.

Icon LinkUsing default connectors

import { defaultConnectors } from "@fuels/connectors";
import { Fuel } from "fuels";
 
const fuel = new Fuel({
  connectors: defaultConnectors({ devMode: true }),
});

Icon LinkUsing a custom list

import {
  FuelWalletConnector,
  FuelWalletDevelopmentConnector,
  FueletWalletConnector,
} from "@fuels/connectors";
import { Fuel } from "fuels";
 
const fuel = new Fuel({
  connectors: [
    new FuelWalletDevelopmentConnector(),
    new FueletWalletConnector(),
    new FuelWalletConnector(),
  ],
});

Icon LinkListing 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.

const connectors = await fuel.connectors();
console.log("available connectors", connectors);
 
fuel.on(fuel.events.connectors, (connectors) => {
  console.log("available connectors", connectors);
});

Icon LinkSelecting 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.

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

Icon LinkInteracting with the selected connector

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

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

Icon LinkWith React

Icon LinkConnectors 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.

Icon LinkOnly hooks

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

const { connectors } = useConnectors();
const { connect, isPending: connecting, error: errorConnecting } = useConnect();
 
function handleConnect(connectorName: string) {
  connect(connectorName);
}