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 Connectors spec.
The Fuel Wallet SDK enables you to include a set of connectors when creating a new instance.
1import {
2 FuelWalletConnector,
3 FuelWalletDevelopmentConnector,
4 FueletWalletConnector,
5} from "@fuels/connectors";
6import { Fuel } from "fuels";
7
8const fuel = new Fuel({
9 connectors: [
10 new FuelWalletDevelopmentConnector(),
11 new FueletWalletConnector(),
12 new FuelWalletConnector(),
13 ],
14});
1import {
2 FuelWalletConnector,
3 FuelWalletDevelopmentConnector,
4 FueletWalletConnector,
5} from "@fuels/connectors";
6import { Fuel } from "fuels";
7
8const fuel = new Fuel({
9 connectors: [
10 new FuelWalletDevelopmentConnector(),
11 new FueletWalletConnector(),
12 new FuelWalletConnector(),
13 ],
14});
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});
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);
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);
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 folder.
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, isPending: connecting, error: errorConnecting } = useConnect();
3
4function handleConnect(connectorName: string) {
5 connect(connectorName);
6}