@0xgabi/use-wallet 中文文档教程

发布于 3年前 浏览 24 更新于 3年前

useWallet()

useWallet() 允许 dapp 用户以尽可能直接的方式连接到他们选择的提供商。 它为任何连接的帐户提供通用数据结构,无论用户选择了哪个提供商。 它旨在提供一些经常被 dapp 开发人员重新实现的功能:连接到钱包、跟踪交易等(提交 issue 或 PR!)。

Features

  • All-in-one solution to connect to Ethereum providers.
  • Completely library agnostic (use Web3.js, ethers.js, …).
  • Provides the current balance.
  • Keeps track of the recent transactions (coming soon).

Opinionated?

哦对了:

  • React only.
  • Ethereum only (for now).
  • Supports one network at a time.
  • Embeds as many providers as possible.
  • Every prop and parameter is optional.

What useWallet() is not

  • An Ethereum wallet implementation.
  • A low-level, fully configurable connection system for Ethereum providers (see web3-react if you are after that).
  • An general library to interact with Ethereum (see ethers.js, Web3.js, etc.).

Used by

Usage

将其添加到您的项目中:

yarn add use-wallet

在您的 React 应用程序中使用它:

// App.js

import React from 'react'
import { useWallet, UseWalletProvider } from 'use-wallet'

function App() {
  const wallet = useWallet()
  const blockNumber = wallet.getBlockNumber()

  return (
    <>
      <h1>Wallet</h1>
      {wallet.status === 'connected' ? (
        <div>
          <div>Account: {wallet.account}</div>
          <div>Balance: {wallet.balance}</div>
          <button onClick={() => wallet.reset()}>disconnect</button>
        </div>
      ) : (
        <div>
          Connect:
          <button onClick={() => wallet.connect()}>MetaMask</button>
          <button onClick={() => wallet.connect('frame')}>Frame</button>
          <button onClick={() => wallet.connect('portis')}>Portis</button>
        </div>
      )}
    </>
  )
}

// Wrap everything in <UseWalletProvider />
export default () => (
  <UseWalletProvider
    chainId={1}
    connectors={{
      // This is how connectors get configured
      portis: { dAppId: 'my-dapp-id-123-xyz' },
    }}
  >
    <App />
  </UseWalletProvider>
)

API

<UseWalletProvider />

这是提供者组件。 它应该放在任何使用 useWallet() 的组件之上。 除了 children 之外,它还接受另外两个属性:

chainId

连接支持的 Chain ID。 默认为 1。

connectors

不同连接器的配置。 如果您使用需要配置但未提供配置的连接器,则会抛出错误。

  • injected: no configuration needed.
  • frame: no configuration needed.
  • fortmatic: { apiKey }
  • portis: { dAppId }
  • provided: { provider }
  • authereum: no configuration needed.
  • squarelink: { clientId, options }
  • walletconnect: { rpcUrl }
  • walletlink: { url, appName, appLogoUrl }

有关详细信息,请参阅 web3-react 文档

useWallet()

这是在整个应用程序中使用的挂钩。

它采用一个可选对象作为单个参数,包含以下内容:

  • pollBalanceInterval: the interval used to poll the wallet balance. Defaults to 2000.
  • pollBlockNumberInterval: the interval used to poll the block number. Defaults to 5000.

它返回一个表示连接帐户(“钱包”)的对象,其中包含:

  • account: the address of the account, or null when disconnected.
  • balance: the balance of the account, in wei.
  • chainId: The specified Chain ID of the network you're connected to.
  • connect(connectorId): call this function with a connector ID to “connect” to a provider (see above for the connectors provided by default).
  • connector: The "key" of the wallet you're connected to (e.g "metamask", "portis").
  • connectors: the full list of connectors.
  • error: contains an error object with the corresponding name and message if status is set to error.
  • ethereum: the connected Ethereum provider.
  • getBlockNumber(): this function returns the current block number. This is a function because the block number updates often, which could trigger as many extra renders. Making an explicit call for the block number allows users of useWallet() to avoid extra renders when the block number is not needed.
  • isConnected(): this function returns whether the wallet is connected.
  • networkName: a human-readable name corresponding to the Chain ID.
  • reset(): call this function to “disconnect” from the current provider. This will also clean the latest error value stored in use-wallet's state.
  • status: contains the current status of the wallet connection. The possible values are:
  • "disconnected": no wallet connected (default state).
  • "connecting": trying to connect to the wallet.
  • "connected": connected to the wallet (i.e. the account is available).
  • "error": a connection error happened.
  • type: whether or not the account is a contract. Can be null when you're disconnected, or either "contract" or "normal".

Examples

要运行示例,请切换到相应的目录。 然后,只需运行 yarn install 安装,然后 yarn startlocalhost:1234 上运行示例。

Special thanks

useWallet() 是基于 web3-react 及其连接器构建的,它们在内部完成所有艰苦的工作。

???? useWallet()

useWallet() allows dapp users to connect to the provider of their choice in a way that is as straightforward as possible. It provides a common data structure for any connected account, no matter what provider has been chosen by the user. It aims to provide some features that are often reimplemented by dapp developers: connecting to a wallet, keeping track of transactions, and more (submit a issue or PR!).

Features

  • All-in-one solution to connect to Ethereum providers.
  • Completely library agnostic (use Web3.js, ethers.js, …).
  • Provides the current balance.
  • Keeps track of the recent transactions (coming soon).

Opinionated?

Oh yes:

  • React only.
  • Ethereum only (for now).
  • Supports one network at a time.
  • Embeds as many providers as possible.
  • Every prop and parameter is optional.

What useWallet() is not

  • An Ethereum wallet implementation.
  • A low-level, fully configurable connection system for Ethereum providers (see web3-react if you are after that).
  • An general library to interact with Ethereum (see ethers.js, Web3.js, etc.).

Used by

Usage

Add it to your project:

yarn add use-wallet

Use it in your React app:

// App.js

import React from 'react'
import { useWallet, UseWalletProvider } from 'use-wallet'

function App() {
  const wallet = useWallet()
  const blockNumber = wallet.getBlockNumber()

  return (
    <>
      <h1>Wallet</h1>
      {wallet.status === 'connected' ? (
        <div>
          <div>Account: {wallet.account}</div>
          <div>Balance: {wallet.balance}</div>
          <button onClick={() => wallet.reset()}>disconnect</button>
        </div>
      ) : (
        <div>
          Connect:
          <button onClick={() => wallet.connect()}>MetaMask</button>
          <button onClick={() => wallet.connect('frame')}>Frame</button>
          <button onClick={() => wallet.connect('portis')}>Portis</button>
        </div>
      )}
    </>
  )
}

// Wrap everything in <UseWalletProvider />
export default () => (
  <UseWalletProvider
    chainId={1}
    connectors={{
      // This is how connectors get configured
      portis: { dAppId: 'my-dapp-id-123-xyz' },
    }}
  >
    <App />
  </UseWalletProvider>
)

API

<UseWalletProvider />

This is the provider component. It should be placed above any component using useWallet(). Apart from children, it accepts two other props:

chainId

The Chain ID supported by the connection. Defaults to 1.

connectors

Configuration for the different connectors. If you use a connector that requires a configuration but do not provide one, an error will be thrown.

  • injected: no configuration needed.
  • frame: no configuration needed.
  • fortmatic: { apiKey }
  • portis: { dAppId }
  • provided: { provider }
  • authereum: no configuration needed.
  • squarelink: { clientId, options }
  • walletconnect: { rpcUrl }
  • walletlink: { url, appName, appLogoUrl }

See the web3-react documentation for more details.

useWallet()

This is the hook to be used throughout the app.

It takes an optional object as a single param, containing the following:

  • pollBalanceInterval: the interval used to poll the wallet balance. Defaults to 2000.
  • pollBlockNumberInterval: the interval used to poll the block number. Defaults to 5000.

It returns an object representing the connected account (“wallet”), containing:

  • account: the address of the account, or null when disconnected.
  • balance: the balance of the account, in wei.
  • chainId: The specified Chain ID of the network you're connected to.
  • connect(connectorId): call this function with a connector ID to “connect” to a provider (see above for the connectors provided by default).
  • connector: The "key" of the wallet you're connected to (e.g "metamask", "portis").
  • connectors: the full list of connectors.
  • error: contains an error object with the corresponding name and message if status is set to error.
  • ethereum: the connected Ethereum provider.
  • getBlockNumber(): this function returns the current block number. This is a function because the block number updates often, which could trigger as many extra renders. Making an explicit call for the block number allows users of useWallet() to avoid extra renders when the block number is not needed.
  • isConnected(): this function returns whether the wallet is connected.
  • networkName: a human-readable name corresponding to the Chain ID.
  • reset(): call this function to “disconnect” from the current provider. This will also clean the latest error value stored in use-wallet's state.
  • status: contains the current status of the wallet connection. The possible values are:
  • "disconnected": no wallet connected (default state).
  • "connecting": trying to connect to the wallet.
  • "connected": connected to the wallet (i.e. the account is available).
  • "error": a connection error happened.
  • type: whether or not the account is a contract. Can be null when you're disconnected, or either "contract" or "normal".

Examples

To run the examples, switch to the respective directories. Then, simply run yarn install to install, and yarn start to run the examples on localhost:1234.

Special thanks

useWallet() is a built on web3-react and its connectors, which are doing all the hard work internally.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文