web3ui / web3uikit Goto Github PK

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

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

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

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

can we add sizes like large | med | small

modals look too wide on fullscreen

max width CSS so it scales down nicely

Hovering PopoverElements doesnt look bueno lets fix this

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

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

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'

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

• 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

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;
    }
`;

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.

Implementing the following as per designer req.

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.

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.

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

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.

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.

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

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

.

When Modal content is big its exceeding view height.

Please make it scrollable.

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

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

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

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

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

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

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

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

Icons to add:

• dapp
• speedyNode
• web3api
• atomicApi

<Checkbox /> component should have a pointer cursor type

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:

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

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

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

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:

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

The functionality we need:

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

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

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

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

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

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"

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

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.

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

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

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.

• 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

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