web3ui/web3uikit

Lightweight reusable Web3 UI components for dapps.

Web3UIKit!

Beautiful and lightweight UI components for web3 developers. This UI library will speed up your dapp development no matter which chain you build on.

Live StoryBook DEMO: https://web3ui.github.io/web3uikit/

⭐️ Star us

If this ui-kit helps you build your dApps faster - please star this project, every star makes us very happy!

🤝 Need help?

If you need help with setting up the boilerplate or have other questions - don't hesitate to write in our community forum and we will check asap. Forum link. The best thing about this boilerplate is the super active community ready to help at any time! We help each other.

🚀 Quick Start

💿 Installation

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

or

yarn add  @web3uikit/core @web3uikit/web3 @web3uikit/icons

ℹ️ Each package can be installed separately.

🧰 Usage

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

▲ Usage with Next.js

If you are using web3uikit with Next.js, be sure to follow the official guide, since we are using styled-components under the hood.

---

🧭 Table of Contents

• ⭐️ Star us
• 🤝 Need help
• 🚀 Quick start
• 🧭 Table of Contents
• 🏗️ New Components
• 📦 Packages
  • Core module
  • Icons module
  • Web3 module
• 🧙‍♂️ Community

🏗️ New Components

Remember to follow steps from CONTRIBUTE.md to setup your local environment.

Want to add new component ?

• run pnpm new in terminal and follow the interactive steps to generate templates for a new component.

Want to add new icon ?

• Add the svg file(s) to web3uikit/packages/icons/src/lib/svgs/ (remember to give meaningful filename, as filename gets converted to icon name)
• run pnpm run icons:create in terminal and your icon is created. 🔥
• To verify your newly added icon run pnpm storybook-build. Once storybook is open, navigate to 8.ICONS/Gallery and search for your icon.

Want to add a new Chain Logo ?

• run pnpm plop "ChainLogo" -- --name "<CHAIN NAME HERE>" --color "<BACKGROUND COLOR HERE>"

  example => pnpm plop "ChainLogo" -- --name "ethereum" --color "#396993"

• Now in your code editor navigate to web3uikit/packages/core/src/lib/Illustrations/images/chains, here a new file must be created with your chain name, in this file replace <></> with your chain svg code.

• To verify your newly added chain logo run pnpm storybook-build. Once storybook is open:

  • navigate to 6.Graphic, and your chain logo should be added to Illustration and CryptoLogo component.
  • navigate to 4.UI/CryptoCards, and your chain logo should be added here as well. 😃

📦 Packages

Core module

The core module contains all the basic ui components like button, input, dropdown etc

package	Version	Changelog	Description
@web3uikit/core	TODO	TODO	Contains all the basic UI elements

Icons module

Create an issue with svg code to add more icons or feel free to raise a PR.

package	Version	Changelog	Description
@web3uikit/icons	TODO	TODO	Contains various icons

Web3 module

These are components which have moralis and react-moralis dependency.

package	Version	Changelog	Description
@web3uikit/web3	TODO	TODO	Contains all the web3 components

‼️ Moralis servers will be deprecated soon. To continue using this package, self host your server by following the steps from moralis docs

🚨 Breaking Changes

• Icon component does not exist anymore.

• All component prop type using TIconType are now converted to JSX.Element. List of components that used TIconType prop are:

  • Button
  • Credentials
  • CryptoCards
  • Dropdown
  • Input
  • Notification
  • PopoverElement
  • Select

🧙‍♂️ Community

• Discord
• Forum

web3uikit's Issues

color interface

Pretty simple task for Typescript fans, please add a color interface for all components to be passed various color props

• only use colors from /styles/colors.js
• make a new /interface folder there is more that can be centralised like Input validations and others if you want to do that too, great.

MORE INFO:

To be more clear i would expect this end result, sorry for the confusion i caused.

<AnyComponent bgColor={green} textColor={white}

AnyComponent: don't worry about what component it is and also you do not need to add bgColor or textColor props to every component. Instead imagine that this component is completed and in our kit, plus it has these props setup and ready to use.

When setting bgColor I should use the interface we want built in this task, so it can only be set to the string names of the colors we use in /styles/colors.js and it will return the correct HEX.
So 'green' = '#68738D'

Input / Icon

the max-wdith and max-height is causing the Icon to collapse when used in Input

i have a quick fix. I hope this wont ruin any plans you had for this CSS @rayyan224

Web3UIKit depends on react-router-dom and doesn't work if it is not installed.

While working with a create-react-app I noticed that when I installed web3uikit and started using CryptoCard component inside my application my browser gave me an error that Could not find dependency: 'react-router-dom' relative to '/node_modules/web3uikit/dist/web3uikit.esm.js'

I then installed react-router-dom and everything started working as usual.

Steps to reproduce -

yarn create react-app my-web3-dapp --template typescript
cd my-web3-dapp
yarn add web3uikit

and use CryptoCard component inside App.tsx

How to resolve -

Install react-router-dom like

yarn add react-router-dom

Quick access to a sandbox

This sandbox showcases what is going wrong -

https://codesandbox.io/s/heuristic-silence-y6f55?file=/src/App.tsx

Tooltip text line break

Seems like after each word there is a line break. Someone please fix that

require$$13 is not defined

Hello team, I am trying to run a "hello world" project importing components from the library, but getting an error
Steps to reproduce:

git clone [email protected]:7flash/web3ui-hello-world.git
cd web3ui-hello-world
npm install
npm run start

Then this error shows up on localhost:3000

Hidden Input by default only show the last letter when unhide

When an input is hidden by default shows this when unhide:

Modal - Missing title will move the close button to top left corner

Without title prop:

With title:

This might be related to the justify-content: space-between; prop in css

export const HeaderStyled = styled.header`
    display: flex;
    align-items: center;
    justify-content: space-between; << ------
    padding: 24px 32px 10px;

    div {
        border-color: ${colors.blue};
        border-radius: 15px;
    }

    h3 {
        color: ${colors.blue};
        padding-right: 8px;
    }

    button {
        min-width: 30px;
    }
`;

Change back copied icon after x secs

Change back the copied icon after 3 secs

Dropdown does not show prefix on selected item

The dropdown should show the prefix on the selected item, if prefix is given.

Validation types naming convention

First of all I am a fan of good naming conventions and web3uikit is a great example. however I spotted a tiny naming issue as below:

The kit uses RadiosValidate and CheckboxValidate but Input use ValidateInput. I assume one post or prefix type name should be used. So which option do you prefer below?

1. Rename ValidateInput -> InputValidate
2. Rename RadiosValidate and CheckboxValidate -> ValidateRadios and ValidateCheckbox
3. Not important, leave as it is now :)

If you prefer 1. or 2. I can do a first PR as a warmup :)

Thanks for considering my minor naming issue.

[Feat]: Input component to also allow `Blockie` instead of an icon

Implementing the following as per designer req.

Custom Design

No way to add my own custom class-name to configure somethings manually which will be necessary for some tweaking in the designs such that I can configure a specific design like custom font for specific items and so on.

Card custom font

Enable custom font for Card component or allow type Element for title and description

description={<p>{n.description}</p>}

Fix the "Done" button in the stepper

Summary

The "Done" button is working like a "Next" button and keeps sending the user for the "Next" page.

Steps to reproduce

• Access the https://web3ui.github.io/web3uikit/?path=/docs/3-layout-stepper--demo
• Keep clicking in the button "Next" until reach the button "Done"
• Click in the button "Done" again

What is the current bug behavior?

The button will turn into a next button and will keeps sending the user to the next page (when just the button turns into a next button)

What is the expected correct behavior?

It should freeze the button after clicking the "Done".

Relevant logs and/or screenshots

https://www.loom.com/share/edacea3d27fb4a63b266c70fb3200e62?from_recorder=1&focus_title=1

Error: Missing "key" prop for element in array react/jsx-key

When deploying on Vercel I get this deployment error.

I use this Table Component:

<Table
      columnsConfig="80px 3fr 2fr 2fr 80px"
      data={dataFeed3}
      header={[
        '',
        <span>Fight</span>,
        <span>Staked</span>,
        <span>Action</span>,
        ''
      ]}
      maxPages={3}
      onPageNumberChanged={function noRefCheck(){}}
      pageSize={5}
    />

Data to the data object goes from this:

const dataFeed3 = stakedFights
    .map((stakedFights, index) => [<span key={index}></span>, <Link href="/fights/[address]" as={`/fights/${stakedFights.contract}`}>{`Fight `+stakedFights.contract.substring(0,6)+`...`+stakedFights.contract.substring(38,42)}</Link>,
    <span>{Math.floor(Web3.utils.fromWei(((stakedFights.Staked).toString()), 'ether'))+` SLICE`}</span>,
    <Button variant='outline-secondary' onClick={()=>onUnstake(stakedFights.Staked, stakedFights.contract)}>Unstake</Button>, ''])

As you can see I use the key prop in the array, so I am stuck here.

Please help.

Fix the dropdown (select) in the button [+ Create dApp]

If the user passes the mouse over the button [+ Create dApp] and tries to select one of the options below without passing the mouse over the arrow of the selection the dropdown disappears.

Steps to reproduce

look at this story
https://web3ui.github.io/web3uikit/?path=/story/5-popup-popover-dropdown--popover-selection

now use button for the hover like the video

What is the current bug behaviour?

The select options disappears and the user needs to pass the mouse over the button again and need to pass again above the arrow to get all the options for creating a server.

What is the expected correct behaviour?
This modal should close only if the user clicks out of the box or in one of the options (perhaps check this with someone of UX/UI can give a more precisely opinion about this)

Relevant logs and/or screenshots

https://www.loom.com/share/33c3c2871e7b406c8ab0c9ef057d475f[](https://github.com/web3ui/web3uikit/issues/new#ps)

PS
The issue happens more often in Firefox, but also happens in Chrome.

FYI

i would expect that a transparent before or after at full width would bridge the gap that causes this "bug"

Select component defaultOptionIndex - how to insert an index of currently connected chain

I use useEffect to get networkID in order to get defaultOptionIndex to be used.

const [defaultOption, setDefaultOption] = useState()
useEffect(() => {
if (networkId==5777) {setDefaultOption ('0')}
else if (networkId=97) {setDefaultOption('1')}
else if (networkId=8001){setDefaultOption('2')}
}, [])

After that I would like to use defaultOption in Select component as follows:

<Select
defaultOptionIndex={${defaultOption}}
label="Select other Chain"
onChange={(e) => handleNetworkSwitch(e.id)}
options={[
{
id: 'polygonTST',
label: 'Polygon',
prefix:
},
{
id: 'bsc',
label: 'BSC',
prefix:
},
{
id: 'ganache',
label: 'Ganace',
prefix:
}
]}
/>

The Issue I have is that does not work and the default is not set to the connected network.

Typography documentation needs fixing

Example code of Text and Copyable components in Typography are not correct. When show code is clicked it gives the following output:

<NotificationProvider>
  <No Display Name />
</NotificationProvider>

It is also the same for the components in Notification docs.
Also I could not find any information about the "No" component.

And when I click the copy icon it changes to check icon and never changes back to copy icon.

make copy component

the same component is in <Input /> and <Typography />

Its a button with a copy icon, when you click it turns to a checkmark icon and copies the text to the clipboard

1. make this into a component
2. replace it in the Input and Typo components

Make Modal scrollable

When Modal content is big its exceeding view height.

Please make it scrollable.

BannerStrip + Button need margin

it looks too squashed, the padding on the button needs to come down or something to make it fit nicer. This is Button / colored / red /small

feat-add dark mode storybook demo

I have added a dark mode to the Storyboard, with an option to switch above the view port

.

Form need more features

• credit card selector
• select component
• date picker
• all need validation

Improve Hover of PopoverElement

Let us improve the hover of popoverelement.
As you can see in the video its not optimal that it dissappears if you hover between parent and dropdown.

https://www.loom.com/share/33c3c2871e7b406c8ab0c9ef057d475f

Stepper - custom buttons don't work if click on icon

Issue: Custom button on Stepper component don't work if click on the button icon.

Checkbox cursor type

<Checkbox /> component should have a pointer cursor type

Custom Title For Modal

Current Modal only takes string as title, should also take a JSX element, for use cases like above

Documentation issue <ConnectButton />

The link provided in the documentation is broken

Try the component in the **interactive documentation**

Current link
https://web3ui.github.io/web3uikit/?path=/docs/web3-connectbutton--default

Working link
https://web3ui.github.io/web3uikit/?path=/docs/1-web3-connectbutton--default

Hidable input bug when switching from number to hidden text

Using Forms/Input:

• Select type number
• Type numbers
• Hide content (now the type is internally switched to password to hide the content.
• User can now type letters
• Unhide content

moralisAuth on Connect Button

Right now if I have the following:

<ConnectButton moralisAuth={false} />

However I've added my server URL and appId, it still tries to have me do moralis authentication. Am I using the moralisAuth wrong?

It says:

web3uikit/src/components/ConnectButton/types.ts

Line 3 in 9bb6401

* if true & server is connected & web3 is enabled will automatically try to connect user to the server

And I've set it to false, but it still tries to moralis auth?

Create customizable Grid Element

The functionality we need:

Auto-sizing, gaps, size settings, changing positions(depending on the width of available space)

Modal needs sizes

can we add sizes like large | med | small

modals look too wide on fullscreen

max width CSS so it scales down nicely

Stepper completeMessage issue

completeMessage prop should be styleable. It is unusable with some background colors. I have faced the same issue with large components like Form. Styling smaller parts of these components are either not possible or very difficult especially for css noobs like me :)

Also completeMessage could take html components like in stepData prop instead of only string it would be better since it gives more options.

[Idea]: Add a description below Input

Considering the following screenshot, might be an idea to add a small description field below an Input area.

Build new Badge compoent

This is a very simple component which will take two props:

1. Non optional text to display: string
2. Optional color / state prop: strings

Color / State:

• Blue / Normal (if unset)
• Green / Success
• Yellow / Warning
• Red / Danger

Remember that <DemoComponent /> is there for you to copy and start hacking if you need it

textArea needs a codeArea alternative

• we need this to complete the new Admin design
• TextArea with an optional layout prop for 'text' | 'code' default test of course
• should match design supplied below

Modal when scrolling should have a fixed footer and title

When there is overflow, the footer and title of the modal should stay fixed.

Screen.Recording.2022-03-07.at.4.21.10.PM.mov

Bug - Radio only first is selectable

weirdly now you can only select the first radio, nice find @MateusbrMedeiros

lets fix that ASAP

https://web3ui.github.io/web3uikit/?path=/story/2-forms-radios--radio-group

Select component need buffed

It looks more like old CoreUI design, lets make Select match Input

decorator code docs display

If you click to show the code in the canvas docs for web3 components it will not display correctly because of moralisContext decorator

instead of:

<ChainSelector />

Avatar Changes background on every component mount

Screen.Recording.2022-03-10.at.12.45.09.AM.mov

Expected, once an avatar choses a color, in a component it should stay that color on every mount

Improve Dropdown: Make searchable

Imagine a list of countries as values inside of a dropdown selection.
Make it possible that users type with keyboard to search/filter the values so we have nice UX

improve Avatar component

Lets add custom borderRadius + bgColor for Avatar. best case randomize bg Color for letters variant if bgColor not passed that would be HQ OG !!

make a web3 version of recharts

• make a chat component that can be used to replace recharts as used in the Moralis Admin billingUsage/UsageChart
• make an MVP and lets add features to it as we go

Discount Tag sizing

Refactor sizing for the Discount type of Tag:
We need to switch from using prop width to size. Size should be equal to width and height.
Also, it may be a nice idea to automatically calculate width and height depending on the content, but it may have unexpected sizing behavior

The behavior we have now:

[Idea] Repo cleanup - Replace strings with enums

A nice way to keep the repo as clean as possible would be to replace standalone strings with enums.

An example of the issue:

function test (t) {
    if(t === 'number') return 'number';
    if(t === 'text') return 'text'
    if(t === 'address') return 'address'
}

The solution:

In types.ts

export enum InputTypes {
    TEXT = 'text',
    NUMBER = 'number',
    ADDRESS = 'address',
}

In main:

function test (t) {
    if(t === InputTypes.NUMBER) return InputTypes.NUMBER;
    if(t === InputTypes.TEXT) return InputTypes.TEXT;
    if(t === InputTypes.ADDRESS) return InputTypes.ADDRESS;
}

As per TS docs:
Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases.

PopoverElement Hover issue

Hovering PopoverElements doesnt look bueno lets fix this

PopoverElementHoverIssue.mov

`Card` typing issue

Description

Looks like some typing issue here that does not allow Card to have multiple children. I copied the code from Storybook:

<Card
   description="Create your own cryptocurrency / token"
   title="ERC20-Token"
   tooltipText="Create your own ERC20 Token"
>
   <Illustration height="180px" logo="token" width="100%" />
</Card>

but if I add more than 1 children, then it'll work fine.

Image

feature Skeleton

Lets add this super useful Skeleton component with variants such as image and text and subtitle

Add new icons

Icons to add:

• dapp
• speedyNode
• web3api
• atomicApi