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

Blockchain Development Engineer 2022-05-14 03:56:31 阅读数:292

blockchainweb3webuiweb3

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 :

<BannerStrip/> Components :

<Breadcrumbs/> Components :

10、Web3UIKit Card components - Card

<Card/> Components :

11、Web3UIKit Crypto Card components -CryptoCards

<CryptoCards/> Components :

<CryptoLogos/> Components :

13、Web3UIKit Icon components - Icon

<Icon/> Components :

14、Web3UIKit Illustration component - Illustration

<Illustration/> Components :

15、Web3UIKit Information bar component - Information

<Information/> Components :

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

<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 :

<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

版权声明:本文为[Blockchain Development Engineer]所创,转载请带上原文链接,感谢。 https://netfreeman.com/2022/134/202205140348123689.html