Fuel中文社区Icon Linkgithub

⌘K

Fuel中文社区Icon Linkgithub
Docs /
Wallet /
Dev /
钱包连接器

Icon LinkFuel钱包连接器

Fuel钱包连接器是由钱包开发人员提供的接口，允许您的DApp集成特定钱包。

您可以通过阅读Fuel钱包连接器 Icon Link规范来了解Fuel钱包连接器的工作原理。

Icon Link设置Fuel钱包连接器

Fuel钱包SDK允许您在创建新实例时包含一组连接器。

Icon Link使用默认连接器 

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

Icon Link使用自定义列表 

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

Icon Link列出连接器

在使用多个连接器时，您应该允许用户选择他们希望与您的DApp进行交互的连接器。一旦调用connectors()方法，Fuel钱包SDK将从连接器中查询信息，让您确定安装了哪些连接器。

我们还建议在使用connectors()方法的地方使用connectors监听器，因为可用性可能会发生变化。 

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

Icon Link选择连接器

一旦您有了连接器列表，您可以通过使用selectConnect()方法来允许用户选择他们希望使用的连接器。如果连接器未安装，则SDK将返回false。 

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

Icon Link与所选连接器进行交互

一旦选择了连接器，您可以使用所有可用的方法与其进行交互。 

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

Icon Link使用React

Icon Link连接器UI

在使用React应用程序时，您可以利用React软件包提供的连接器UI。

您可以在examples Icon Link文件夹中查看完整的DApp示例。

Icon Link仅使用hooks

如果您希望为连接器构建自己的UI，可以使用useConnect()和useConnectors()钩子来实现此体验。 

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