@acentswap/multiwallet-ui 中文文档教程

Question

Multiwallet UI

这个包为 Multiwallet 连接器提供 React 钱包选择模式和状态管理。

Usage

yarn add @acentswap/multiwallet-ui @material-ui/core @material-ui/icons
# For each chain / connector
yarn add @acentswap/multiwallet-{DESIRED_CHAIN}-{DESIRED_WALLET}-connector
# Ensure peer dependencies are installed

在您的应用程序的根目录中，添加提供程序

import React from 'react';
import ReactDOM from 'react-dom';

import { MultiwalletProvider } from '@acentswap/multiwallet-ui';
import App from './App';

ReactDOM.render(
  <MultiwalletProvider>
    <App />
  </MultiwalletProvider>,
  document.getElementById('root')
);

在您的应用程序中，为其链配置所需的提供程序，例如。

import { EthereumInjectedConnector } from '@acentswap/multiwallet-ethereum-injected-connector';
import { EthereumWalletConnectConnector } from '@acentswap/multiwallet-ethereum-walletconnect-connector';
import { BinanceSmartChainInjectedConnector } from '@acentswap/multiwallet-binancesmartchain-injected-connector';

const options = {
  chains: {
    ethereum: [
      {
        name: 'Metamask',
        logo: 'https://avatars1.githubusercontent.com/u/11744586?s=60&v=4',
        connector: new EthereumInjectedConnector({ debug: true }),
      },
      {
        name: 'WalletConnect',
        logo: 'https://avatars0.githubusercontent.com/u/37784886?s=60&v=4',
        connector: new EthereumWalletConnectConnector({
          rpc: {
            42: `https://kovan.infura.io/v3/${process.env.INFURA_KEY}`,
          },
          qrcode: true,
          debug: true,
        }),
      },
    ],
    bsc: [
      {
        name: 'BinanceSmartWallet',
        logo: 'https://avatars2.githubusercontent.com/u/45615063?s=60&v=4',
        connector: new BinanceSmartChainInjectedConnector({ debug: true }),
      },
    ],
  },
};

最后，呈现模式并使用 useMultiwallet 挂钩请求连接到链。

import * as React from 'react';
import { WalletPickerModal, useMultiwallet } from '@acentswap/multiwallet-ui';
// import options object

const WalletDemo: React.FC = () => {
  const { enabledChains } = useMultiwallet();
  return (
    <div>
      {Object.entries(enabledChains).map(([chain, connector]) => (
        <span key={chain}>
          {chain}: Status {connector.status} to {connector.account}
        </span>
      ))}
    </div>
  );
};

const App = () => {
  const [open, setOpen] = React.useState(false);
  const [chain, setChain] = React.useState('');
  const setClosed = React.useMemo(() => () => setOpen(false), [setOpen]);

  return (
    <>
      <WalletDemo />
      <button
        onClick={() => {
          setChain('ethereum');
          setOpen(true);
        }}
      >
        Request Ethereum
      </button>
      <button
        onClick={() => {
          setChain('bsc');
          setOpen(true);
        }}
      >
        Request BSC
      </button>
      <WalletPickerModal
        open={open}
        options={{
          chain,
          onClose: setClosed,
          config: options,
          targetNetwork: 'mainnet',
        }}
      />
    </>
  );
};

请参阅 /example 目录以获取工作示例，或查看下面详述的故事书以获取更多使用指南。

Developing

该库使用 TSDX 来引导、构建和运行测试。

Commands

TSDX 在 /src 中搭建你的新库，并在 / 中为它设置一个 Parcel-based playground示例。

推荐的工作流程是在一个终端中运行 TSDX：

npm start # or yarn start

这构建到 /dist 并以监视模式运行项目，因此您在 src 中保存的任何编辑都会导致重建到 /分布。

然后运行 ​​Storybook 或示例游乐场：

Storybook

在另一个终端内运行：

yarn storybook

这会从 ./stories 加载故事。

注意：故事应该像使用库一样引用组件，类似于示例游乐场。 这意味着从根项目目录导入。 这在 tsconfig 和 storybook webpack 配置中被别名为 helper。

Example

然后在另一个内部运行该示例：

cd example
npm i # or yarn to install dependencies
npm start # or yarn start

默认示例导入并实时重新加载 /dist 中的任何内容，因此如果您看到过时的组件，请确保 TSDX 像我们上面推荐的那样以监视模式运行. 不需要符号链接，我们使用包裹的别名。

要进行一次性构建，请使用 npm run build 或 yarn build。

要运行测试，请使用 npm test 或 yarn test。

Configuration

使用 prettier、husky 和 lint-staged 为您设置代码质量。 相应地调整 package.json 中的各个字段。

Jest

Jest 测试设置为使用 npm test 或 yarn test 运行。

Bundle analysis

使用 size-limit 和 npm run size 计算你的库的实际成本，并用<代码>npm 运行分析。

Setup Files

这是我们为您设置的文件夹结构：

/example
  index.html
  index.tsx       # test your component here in a demo app
  package.json
  tsconfig.json
/src
  index.tsx       # EDIT THIS
/test
  blah.test.tsx   # EDIT THIS
/stories
  Thing.stories.tsx # EDIT THIS
/.storybook
  main.js
  preview.js
.gitignore
package.json
README.md         # EDIT THIS
tsconfig.json

Rollup

TSDX 使用 Rollup 作为捆绑器，并为各种模块格式和构建设置生成多个汇总配置。 有关详细信息，请参阅优化。

TypeScript

tsconfig.json 被设置为解释 dom 和 esnext 类型，以及 react for jsx 。 根据您的需要进行调整。

Continuous Integration

GitHub Actions

默认添加两个动作：

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
• size which comments cost comparison of your library on every pull request using size-limit

Module Formats

支持 CJS、ESModules 和 UMD 模块格式。

相应的路径在 package.json 和 dist/index.js 中配置。 如果发现任何问题，请报告。

Named Exports

根据 Palmer Group 指南，始终使用命名导出。代码在您的 React 应用而不是 React 库中拆分。