Fuel中文社区Icon Linkgithub

⌘K

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

Icon Link连接钱包

Icon Link检查是否有可用的连接器

在执行其他操作之前，应用程序应检查用户是否已安装了钱包。虽然这不是必需的，但最好确保更好的用户体验。 

<CodeImport
  file="../../examples/connecting/CheckWallet.tsx"
  commentBlock="checkWallet"
/>

当用户安装钱包时，您可以监听 currentConnector 状态的变化。 

<CodeImport
  file="../../examples/connecting/CheckWallet.tsx"
  commentBlock="watchWallet"
/>

您可以在此处 Icon Link了解有关连接器及其工作原理的更多信息。

Icon Link请求连接

在开始任何用户操作之前，用户必须通过调用 connect() 方法来授权连接。这将在用户的钱包中启动连接流程，特别是如果用户拥有的帐户比当前连接可用的更多。 

<CodeImport
  file="../../examples/connecting/Connect.tsx"
  commentBlock="connect"
/>

Icon Link检查连接状态

要检查用户的钱包是否已连接，可以使用 isConnected() 方法。 

<CodeImport
  file="../../examples/connecting/CheckConnection.tsx"
  commentBlock="checkConnection"
/>

Icon Link监听连接状态

由于用户可以直接在钱包中添加或删除连接，我们还建议您的应用程序使用事件监听器监听连接状态变化。 

<CodeImport
  file="../../examples/connecting/CheckConnection.tsx"
  commentBlock="watchConnection"
/>

Icon Link移除连接

在某些情况下，应用程序可能希望为用户提供一种移除连接的体验。在这些情况下，您可以使用 disconnect() 方法。 

<CodeImport
  file="../../examples/connecting/Disconnect.tsx"
  commentBlock="disconnect"
/>

Icon Link使用 React Hooks

Icon Link请求连接

在 React 应用程序中，您可以利用我们提供的现成的 hooks，其中包括事件跟踪。 

<CodeImport
  file="../../examples/connecting/hooks/ConnectHook.tsx"
  commentBlock="connect"
/>

Icon Link移除连接 

<CodeImport
  file="../../examples/connecting/hooks/DisconnectHook.tsx"
  commentBlock="disconnect"
/>

Icon Link检查连接状态

所有的 hooks 都实现了验证，以确保状态是同步的，使用了 SDK 提供的方法和事件。 

<CodeImport
  file="../../examples/connecting/hooks/ConnectHook.tsx"
  commentBlock="checkConnection"
/>