[blockchain | Web3 UI] Web3 development UI component web3uikit applicable to Vue react

GitHub Address and demo See the end of the page for the address ！

Web3UIKit Apply to web3 Developers quickly develop beautiful user interfaces , Contains more than 30 In decentralized applications （DApp） Lightweight commonly used in UI Components . No matter which blockchain it is built on ,Web3UIKit Can improve your dapp Development efficiency .

Web3UIKit  Include Web3 Components 、UI Components 、 Interactive components 、 Pop up window components, etc , The list is as follows ：

• Web3 Components
  • <ConnectButton />
  • <NFT />
• UI Components
  • <Accordion />
  • <Avatar />
  • <Badge />
  • <BannerStrip />
  • <Breadcrumbs />
  • <Card />
  • <CryptoCards />
  • <CryptoLogos />
  • <Icon />
  • <Illustration />
  • <Information />
  • <LinkTo />
  • <Logo />
  • <Notification />
  • <Table />
  • <Tag />
  • <Todo />
  • <Widget />
• Interactive components
  • <Button />
  • <Checkbox />
  • <CodeArea />
  • <Credentials />
  • <Form />
  • <Input />
  • <Radios />
  • <Select />
  • <TextArea />
• Pop up components
  • <Modal />
  • <Tooltip />

1、Web3UIKit Quick start

Use NPM install :

1

npm install web3uikit

Or use yarn install ：

1

yarn web3uikit

Web3UIKit Contains more than 30 Kind of Web3 Common lightweight in applications UI Components , For example, using CryptoCards Components and Button Components ：

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 Access blockchain button component - ConnectButton

<ConnectButton/> Components ：

ConnectButton Component allows you to make... When the server is initialized web3 Validate users . When the server is not initialized , Or, for example, you have  <MoralisProvider initializeOnMount={false} > But I don't want to Moralis Connect the server to the front end , The smart component will call enableWeb3().

If you want to use this component with the connected server , But not to Moralis Database add users , You can add moralisAuth The props

ConnectButton The component automatically adds local storage information about the use of connector users , And automatically call... After refreshing the page again enableWeb3(). therefore , If the user is connected , It will automatically initialize web3 Connect （ After refreshing the page, there is no need to refresh enableWeb3() add to UseEffect hook ）

3、Web3UIKit NFT Components - NFT

<NFT/> Components ：

NFT Components allow you to put a single NFT Displayed as a card . By clicking on the card , You can also view NFT All the characteristics of . It's used from react-moralis The hook To get NFT.

If you want to use this component , Please use <MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >. Please be there. here Read about Moralis For more information .

4、Web3UIKit NFT Balance component - NFTBalance

<NFTBalance/> Components ：

NFTBalance The component allows you to display all the information owned by the address NFT. It's used from react-moralis Hook to get all the addresses NFT.

If you want to use this component , Please use <MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >.

5、Web3UIKit Accordion assembly -Accordion

<Accordion/> Components ：

Accordion Component is a good user interface element , You can easily show and hide text or other components , Therefore, users will not be confused by too much content .

6、Web3UIKit Head image component - Avatar

<Avatar/> Components ：

Avatar The component can display the avatar of the user .

7、Web3UIKit Badge component - Badge

<Badge/> Components ：

8、Web3UIKit Banner assembly -BannerStrip

<BannerStrip/> Components ：

9、Web3UIKit Breadcrumb navigation assembly - Breadcrumbs

<Breadcrumbs/> Components ：

10、Web3UIKit Card components - Card

<Card/> Components ：

11、Web3UIKit Crypto Card components -CryptoCards

<CryptoCards/> Components ：

12、Web3UIKit Crypto Logo component - CryptoLogos

<CryptoLogos/> Components ：

13、Web3UIKit Icon components - Icon

<Icon/> Components ：

14、Web3UIKit Illustration component - Illustration

<Illustration/> Components ：

15、Web3UIKit Information bar component - Information

<Information/> Components ：

16、Web3UIKit Link components - LinkTo

<LinkTo/> Component is a simple link component , Can be used to navigate to another page or another component .

17、Web3UIKIt Logo component - Logo

<Logo/> Component is a simple logo component , With... That can be used for any layout moralis Or other icons .

18、Web3UIKit Notification component - Notification

<Notification/> Components ：

To be called Notification Components , Please use useNotification() hook . Example ：

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}
/>
</>
);
};

Requires that the application must be in <NotificationProvider> Inside , for example ：

1
2
3

<NotificationProvider>
<App />
<NotificationProvider>

19、Web3UIKit Table components - Table

<Table/> Components ：

20、Web3UIKit Tag components - Tag

<Tag/> Components ：

21、Web3UIKit To do components - Todo

<Todo/> Components ：

22、Web3UIKit Widget - Widget

<Widget/> Components ：

23、Web3UIKit Button components - Button

<Button/> Components ：

24、Web3UIKit Select box components - Checkbox

<Checkbox/> Components ：

25、Web3UIKit Code block component - Code

<Code/> Components ：

26、Web3UIKit Ciphertext component - Credentials

<Credentials/> Components ：

27、Web3UIKit Form components - Form

<Form/> Components ：

28、Web3UIKit Input components - Input

<Input/> Components ：

29、Web3UIKit Radio button component - Radios

 <Radios/> Components ：

30、Web3UIKit Drop down selection box component - Select

<Select/> Components ：

31、Web3UIKit Multiline text component - TextArea

<TextArea/> Components ：

32、Web3UIKit Modal dialog components - Modal

<Modal/> Components ：

33、Web3UIKit Prompt message component - Tooltip

<Tooltip/> Components ：

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