Fuel中文社区Icon Linkgithub

⌘K

Fuel中文社区Icon Linkgithub
Docs /
Wallet /
Dev /
入门指南

Icon Link入门指南

Fuel钱包SDK充当了您的DApp与兼容Fuel网络的其他钱包之间的连接管理器。此软件包确保您可以使用统一的API连接到Fuel钱包以及任何其他钱包。

如果您使用React，请跳转至React部分 。

Icon Link安装

要开始将Fuel钱包SDK集成到您的DApp中，首先需要安装@fuels/connectors和fuels软件包。 

npm install fuels @fuels/connectors

安装还需要fuels SDK，因为它用于与Fuel网络通信，并提供一组必需的工具，用于与Fuel网络上的合约进行交互。

Icon Link示例

您可以从@fuels/connectors中导入defaultConnectors以获取所有默认连接器的列表。此外，您还可以创建自己的连接器或单独导入它们。

Icon Link使用默认连接器 

import { Fuel } from 'fuels';
import { defaultConnectors } from '@fuels/connectors';
 
const fuel = new Fuel({
  connectors: defaultConnectors({ devMode: true }),
});
 
await fuel.selectConnector('Fuel Wallet');
await fuel.connect();

Icon Link使用自定义列表 

import { Fuel } from 'fuels';
import { FuelWalletConnector } from '@fuels/connectors';
 
const fuel = new Fuel({
  connectors: [new FuelWalletConnector()],
});
 
await fuel.selectConnector('Fuel Wallet');
await fuel.connect();

Icon Link使用React

我们还提供了一组React钩子和用户界面（UI），可与连接器无缝交互，无需手动创建UI。

Icon Link安装 

npm install fuels @fuels/connectors @fuels/react @tanstack/react-query

Icon Link示例

Icon Link设置

将您的应用程序包装在提供者QueryClientProvider和FuelProvider中。 

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
import { FuelProvider } from '@fuels/react';
import { defaultConnectors } from '@fuels/connectors';
 
const queryClient = new QueryClient();
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <FuelProvider fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}>
        <App />
      </FuelProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

或者，您可以将ui={false}传递给FuelProvider，以禁用UI，以便实现自己的UI。

Icon Link使用 

import { useConnectUI } from '@fuels/react';
const { connect, isConnecting } = useConnectUI();
 
<button onClick={connect}>
  {isConnecting ? '连接中...' : '连接'}
</button>

查看我们的示例应用程序以获取快速入门 Icon Link。