玩转web3第二篇——Web3UI Kit

开发web2应用的时候，可以很方便找到很多优秀的UI库，比如antd，material ui，element ui等等，但web3应用对应的UI库却不多。

今天给大家介绍一款优秀的WEB3的UI库——Web3UI Kit，借助它内置的丰富组件，可以帮助开发人员快速开发出美观的web3页面。

官方推荐的安装是：

npm install @web3uikit/core @web3uikit/web3 @web3uikit/icons

但我安装了使用发现只能用基础组件，引入一些web3组件的时候就会报错，查了些资料后有人推荐这样安装，大家可以两种方法都尝试下。

yarn add  web3uikit@^0.1.159

import { CryptoCards, Button } from '@web3uikit/core';

const App = () => (
    <>
        <CryptoCards
            chain="ethereum"
            bgColor="blue"
            chainType="Network"
            onClick={console.log}
        />
        <Button theme="primary" type="button" text="Launch Dapp" />
    </>
);

1. 核心组件——web3组件：

使用的方法也很简单，以ConnectButton为例，直接引入就好了。

import { ConnectButton, Hero } from "web3uikit";

点击后可以直接连接钱包登录，还集成了多种钱包，使用很方便

2. 表单组件

以DatePicker为例

import { DatePicker } from '@web3uikit/core';

<DatePicker   id="date-picker"     onChange={() => { }}    />

3. 布局组件

以Accordion为例：

<Accordion
        hasLockIcon
        id="accordion"
        subTitle="the sub title"
        tagText="Tag!"
        theme="blue"
        title="Accordion"
      >
        <h2 style={{ paddingLeft: "20px" }}>hello world</h2>
      </Accordion>