钱包 SDK 和 React Hooks
本指南将向您展示如何使用 Fuel 钱包 SDK 及其 React Hooks 构建一个简单的 React 应用程序，让用户将其钱包连接到您的应用程序并查看其余额。
设置
首先，我们将设置一个 Next.js 项目。
pnpm create next-app my-fuel-app接下来，我们将安装 Fuel Wallet React SDK 和 Fuel TypeScript SDK。
pnpm add fuels @fuels/connectors @fuels/react @tanstack/react-query提供者
为了使用 Fuel Wallet SDK 提供的 React hooks，我们需要将我们的应用程序包装在 FuelProvider 组件中。该组件将为 hooks 提供必要的上下文，以与 Fuel Wallet SDK 进行交互。将以下内容添加到您的 pages/_app.tsx 文件中：
import { defaultConnectors } from '@fuels/connectors';
import { FuelProvider } from "@fuels/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { AppProps } from "next/app";
import React from "react";
const queryClient = new QueryClient();
export default function App({ Component, pageProps }: AppProps) {
return (
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<FuelProvider fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}>
<Component { ...pageProps } />
</FuelProvider>
</QueryClientProvider>
</React.StrictMode>
);
}构建 UI
转到您的 pages/index.tsx 文件，并将其内容替换为以下内容：
import {
useAccount,
useBalance,
useConnect,
useConnectors,
useDisconnect,
useIsConnected,
} from "@fuels/react";
import { useState } from "react";
export default function Home() {
const [connector, setConnector] = useState("");
const { connectors } = useConnectors();
const { connect } = useConnect();
const { disconnect } = useDisconnect();
const { isConnected } = useIsConnected();
const { account } = useAccount();
const { balance } = useBalance({
address: account as string,
});
return (
<div
style={{
display: "flex",
flexDirection: "column",
gap: 10,
padding: 10,
maxWidth: 300,
}}
>
<select
onChange={(e) => {
setConnector(e.target.value);
}}
>
<option value="">Select a connector</option>
{connectors.map((c) => (
<option key={c.name} value={c.name}>
{c.name}
</option>
))}
</select>
<button disabled={!connector} onClick={() => connect(connector)}>
Connect to {connector}
</button>
<button disabled={!connector} onClick={() => disconnect()}>
Disconnect from {connector}
</button>
<p>{isConnected ? "Connected" : ""}</p>
{account && <p>Account: {account}</p>}
{balance && <p>Balance: {balance.toString()}</p>}
</div>
);
}让我们分解一下这里发生了什么。
useConnectors hook 返回一个可用钱包连接器的列表。
一旦用户选择了连接器，useConnect hook 将返回一个 connect 函数，该函数可用于将用户的钱包连接到您的应用程序。
useAccount hook 返回用户账户的信息（如果他们已连接）。
useBalance hook 返回用户的 ETH 余额（如果他们已连接）。