【区块链 | Web3 UI】VUE React均适用的Web3开发UI组件Web3UIKit

区块链开发工程师 2022-05-14 03:48:25 阅读数:698

Web区块vueuiweb3

GitHub地址以及demo地址见页尾!

Web3UIKit适用于 web3 开发人员快速开发美观的用户界面,包含超过30种在去中心化应用(DApp) 中常用的轻量级UI组件。无论构建在哪个区块链上,Web3UIKit都可以提高你的 dapp 开发效率。

Web3UIKit 包括Web3组件、UI组件、交互组件、弹窗组件等几个大类,清单如下:

  • Web3组件
    • <ConnectButton />
    • <NFT />
  • UI组件
    • <Accordion />
    • <Avatar />
    • <Badge />
    • <BannerStrip />
    • <Breadcrumbs />
    • <Card />
    • <CryptoCards />
    • <CryptoLogos />
    • <Icon />
    • <Illustration />
    • <Information />
    • <LinkTo />
    • <Logo />
    • <Notification />
    • <Table />
    • <Tag />
    • <Todo />
    • <Widget />
  • 交互组件
    • <Button />
    • <Checkbox />
    • <CodeArea />
    • <Credentials />
    • <Form />
    • <Input />
    • <Radios />
    • <Select />
    • <TextArea />
  • 弹窗组件
    • <Modal />
    • <Tooltip />

1、Web3UIKit快速上手

使用NPM安装:

1
npm install web3uikit

或者使用yarn安装:

1
yarn web3uikit

Web3UIKit包含超过30种Web3应用中常见的轻量化UI组件,例如使用CryptoCards组件和Button组件:

1
2
3
4
5
6
7
8
import { CryptoCards, Button } from 'web3uikit';
const App = () => (
<>
<CryptoCards chain="ethereum" />
<Button theme="primary" type="button" text="Launch Dapp" />
</>
); 

2、Web3UIKit接入区块链按钮组件 - ConnectButton

<ConnectButton/>组件:

ConnectButton组件允许你在服务器初始化的情况下使web3 验证用户。当服务器未初始化时,或者例如你有 <MoralisProvider initializeOnMount={false} >但不想将 Moralis 服务器连接到前端,智能组件将调用enableWeb3()

如果想将此组件与连接的服务器一起使用,但不向 Moralis 数据库添加用户,则可以添加moralisAuth道具

ConnectButton 组件会自动添加有关连接器用户使用的本地存储信息,并在重新刷新页面后自动调用 enableWeb3()。因此, 如果用户一旦连接,它将自动初始化 web3 连接(刷新页面后无需再为 enableWeb3() 添加 UseEffect 挂钩)

3、Web3UIKit NFT组件 - NFT

<NFT/>组件:

NFT组件允许你将单个 NFT 显示为卡片。通过点击卡片,还可以查看 NFT 的所有特征。它使用来自react-moralis 的钩子 来获取 NFT。

如果想使用此组件,请使用<MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >。 请在此处阅读有关Moralis的更多信息。

4、Web3UIKit NFT余额组件 - NFTBalance

<NFTBalance/>组件:

NFTBalance组件允许你显示地址拥有的所有 NFT。它使用来自react-moralis 的钩子来获取地址的所有 NFT。

如果想使用此组件,请使用<MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >

5、Web3UIKit 手风琴组件 -Accordion

<Accordion/>组件:

Accordion组件是一个很好的用户界面元素,可以方便地显示和隐藏文本或其他组件,因此不会因太多内容让用户无所适从。

6、Web3UIKit 头像组件 - Avatar

<Avatar/>组件:

Avatar组件可以显示用户的头像化身。

7、Web3UIKit 徽章组件 - Badge

<Badge/>组件:

8、Web3UIKit 条幅组件 -BannerStrip

<BannerStrip/>组件:

9、Web3UIKit 面包条导航组件 - Breadcrumbs

<Breadcrumbs/>组件:

10、Web3UIKit 卡片组件 - Card

<Card/>组件:

11、Web3UIKit Crypto卡片组件 -CryptoCards

<CryptoCards/>组件:

12、Web3UIKit Crypto徽标组件 - CryptoLogos

<CryptoLogos/>组件:

13、Web3UIKit 图标组件 - Icon

<Icon/>组件:

14、Web3UIKit 插画组件 - Illustration

<Illustration/>组件:

15、Web3UIKit 信息栏组件 - Information

<Information/>组件:

16、Web3UIKit 链接组件 - LinkTo

<LinkTo/>组件是一个简单的链接组件,可用于导航到另一个页面或另一个组件。

<Logo/>组件是一个简单的徽标组件,具有可用于任何布局的moralis 或其他图标。

18、Web3UIKit 通知组件 - Notification

<Notification/>组件:

要调用Notification组件,请使用useNotification()钩子。例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const App = () => {
const dispatch = useNotification();
const handleNewNotification = () => {
dispatch({
type: 'info',
message: 'Somebody messaged you',
title: 'New Notification',
icon,
position: position || 'topR',
});
};
return (
<>
<Button
text="Error"
onClick={handleNewNotification}
theme="colored"
color="red"
isFullWidth={true}
/>
</>
);
};

要求应用程序必须在<NotificationProvider>内,例如:

1
2
3
<NotificationProvider>
<App />
<NotificationProvider>

19、Web3UIKit 表格组件- Table

<Table/>组件:

20、Web3UIKit 标签组件 - Tag

<Tag/>组件:

21、Web3UIKit 待办组件 - Todo

<Todo/>组件:

22、Web3UIKit 小部件组件 - Widget

<Widget/>组件:

23、Web3UIKit 按钮组件 - Button

<Button/>组件:

24、Web3UIKit 选择框组件 - Checkbox

<Checkbox/>组件:

25、Web3UIKit 代码块组件 - Code

<Code/>组件:

26、Web3UIKit 密文组件 - Credentials

<Credentials/>组件:

27、Web3UIKit 表单组件 - Form

<Form/>组件:

28、Web3UIKit 输入组件 - Input

<Input/>组件:

29、Web3UIKit 单选按钮组件 - Radios

 <Radios/>组件:

30、Web3UIKit 下拉选择框组件 - Select

<Select/>组件:

31、Web3UIKit 多行文本组件 - TextArea

<TextArea/>组件:

32、Web3UIKit 模态对话框组件 - Modal

<Modal/>组件:

33、Web3UIKit 提示信息组件 - Tooltip

<Tooltip/>组件:


github GitHub - web3ui/web3uikit: Lightweight reusable Web3 UI components for dapps.https://github.com/web3ui/web3uikit

demo 

Webpack Apphttps://web3ui.github.io/web3uikit/?path=/story/1-web3-blockie--custom-seed

版权声明:本文为[区块链开发工程师]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/qq_28505809/article/details/124660087