Docs Icon ChevronRight For Developers Icon ChevronRight Wallet Connectors

Wallet Connectors

A Wallet Connector is an interface to integrate with third-party wallets on the Fuel Ecosystem. It exposes all currently installed wallets in a unified manner via window.fuel.

Methods

Listing connectors

To list all available connectors you can use the listConnectors() method.

Connectors.tsx Icon Link
1const connectors = fuel.listConnectors();

Selecting connector

To select a different Wallet Connector use the selectConnector(connectorName: string) method.

Connectors.tsx Icon Link
1async (connectorName: string) => {
2  console.log(`Select connector "${connectorName}"!`);
3  await fuel.selectConnector(connectorName);
4  console.log(`Connector "${connectorName}" connected`);
5};

Events

CurrentConnector

This event is triggered when the Current Connector is updated. The callback function receives the FuelWalletConnector object.

Connectors.tsx Icon Link
1fuel.on(fuel.events.currentConnector, onCurrentConnector);
2return () => {
3  fuel.off(fuel.events.currentConnector, onCurrentConnector);
4};

Connectors

This event is triggered when the Connectors list is updated. The callback function receives the list of connectors, Array<FuelWalletConnector>.

Connectors.tsx Icon Link
1fuel.on(fuel.events.connectors, onConnectors);
2return () => {
3  fuel.off(fuel.events.connectors, onConnectors);
4};

For Wallet Developers

Third-party wallets developed by the community can use the Wallet Connector to integrate with the current fuel instance on the window, enabling a better experience for developers and users.

Creating a Wallet Connector

Inside pageScript.ts you can call the method createConnector instead of creating a new object on the window. This method will add your Connector to the current, window.fuel element.

1import { createConnector } from '@fuel-wallet/sdk';
2
3createConnector({ name: 'Wallet Name' });

If you are using our Communication SDK Content Page Script Icon Link import ContentProxyConnection and pass the name of Wallet Extension.

Otherwise, remember to filter events by the ones that have your Wallet Connector Name as the target.

1import { ContentProxyConnection } from '@fuel-wallet/sdk';
2
3// Start the content page script with the current Wallet Name
4ContentProxyConnection.start('Wallet Name');
5
6// ...pageScript.ts logic for page script injection