yearn/web-lib

Context and UI library for Yearn

Yearn Web Lib

Yearn web Lib is a library of standard components used through Yearn's Projects. This library is made for React projects with the idea to be light, efficient and easy to use. We are using React + Tailwindcss + ethersjs for the web3 package, and some contexts are available to correctly wrap your app.

web-lib's Issues

Doc: Add `Example` section

Create a new Example section with some basic examples. No complex ones

Feat: Expose nsProgress from useUI

[Typing] - Refactor type usage

The types in the web-lib are:

• In .d.tsx files
• Spread and hard to find/edit/debug/use

My suggestion would be to clean the types like suggested by @karelianpie and to make them available via the web-lib imports in a more standard way without the .d.d.tsx ending.

We can just rename https://github.com/yearn/web-lib/blob/main/packages/web-lib/contexts/useSettings.d.tsx to contextTypes.ts for example, and add all types inside web-lib/packages/web-lib/contexts/ in there

Also, could be nice to add the Dict type:

// eslint-disable-next-line @typescript-eslint/naming-convention
export type Dict<T> = {
	[key: string]: T
}

//Usage - old
export type TMyType = {
	something: {
		[key: string]: TElse,
	}
}
//Usage - new
export type TMyType = {
	something: Dict<TElse>
}

FRP: Clean css

In various places, the CSS used is kind of wild. We should try to replace the css attribution from tailwind inline classes to custom classes when possible, making it easier to customize components when required.
No absolute rule on that, we may have 3 property in one class with no specific need to create a custom class, but in general this should be done.

All custom classNames should be in this format:
yearn--componentName-subComponentName

All custom classNames should be wrapped in root:

:root {
    .yearn--componentName-subComponentName {
        @apply something;
        display: flex;
    }
}
:root.dark {
 /* Only if a class need special support for dark mode. Just add the overrides*/
}

[Improvement] Consistency and DX

What

We need to add consistency with the typing of components and the available default props:

• All types for a specific component should be exported in a separate file name [component].d.tsx
• All types should be correctly exported and accessible for devs
• It should be possible to use any "default HTML" props for the components. Usually this is just by adding & React.ComponentPropsWithoutRef<'div'> to the type of the component, and {...props} to the wrapper, but this may need some specific stuff. The idea is that a dev should be able to send stuff like className to ANY component

Moreover, some components have subcomponents/different parts that devs may want to customise. We have 3 ways to allow that:

• Dev just copy past the code and update the parts he needs (bad)
• We add props for almost everything, this way everything can be customised, but it's way harder to maintain (meh)
• We wrap any relevant className in a specific component css className, allowing the dev to overwrite this className. Exemple:

# React
- className={'mb-2 text-sm text-typo-secondary truncate'}
+ className={'MyComponent--label'}

#scss
+ .MyComponent--label {
+  @apply mb-2 text-sm text-typo-secondary truncate;
+}

Note

It's maybe not the best options. Feel free to debate!

Fix: Link to etherscan Tx on TxHashWithActions component

Link on TxHashWithActions component should be etherscan tx.

web-lib/packages/web-lib/components/TxHashWithActions.tsx

Line 42 in 1196865

href={`${explorerURI}/address/${txHash}`}

Doc: Add css system explanation

• Short explanation over Tailwindcss, postcss, etc.
• Short explanation over css variables
• Explanation over HSL colors
• Explanation over color themes for Yearn (light, dark, macarena, next) (next is new default)
• Naming convention for css classname (.yearn--[component]-[exta])

feat/ Migrate the formatBigNumberAbove10k to web-lib

          These to the web-lib later on?

Originally posted by @karelianpie in yearn/yearn.fi#214 (comment)

add: base network

FRP: Prop to show/hide the network selector

In order to close yearn/yearn.fi#343 we need a way to show/hide the network selector

Bug: `WithYearn` options are not using default values

In this snippet:

<WithYearn
    options={{
	web3: {
		shouldUseStrictChainMode: false,
		defaultChainID: 1,
		supportedChainID: [1, 250, 42161, 1337, 31337]
	}
    }}>
    <AppWrapper
        Component={Component}
        pageProps={pageProps}
        router={props.router} />
</WithYearn>

options.web3.shouldUseWallets is set to undefined instead of true (default). Make sure unspecified values are correctly set to the default values

Error: Expected hoisted manifest for "@yearn-finance/web-lib#@wagmi/core#@wagmi/connectors"

In version 3.0.39, we see the following error when running yarn

➜  yearn.fi git:(issues/343) ✗ yarn
yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "next-pwa > [email protected]" has unmet peer dependency "@babel/core@^7.0.0".
warning "wido > @biconomy/paymaster > @biconomy/common > @biconomy/node-client > @nomiclabs/[email protected]" has unmet peer dependency "hardhat@^2.0.0".
warning " > [email protected]" has unmet peer dependency "@babel/core@^7.12.0".
error An unexpected error occurred: "expected hoisted manifest for \"@yearn-finance/web-lib#@wagmi/core#@wagmi/connectors\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/kp/Projects/yearn/yearn.fi/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Probably this 3539314#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R32

Also, we should continue pinning dependencies

bug: forwardRef render functions accept exactly two parameters

Description

We're getting

Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?

Error

Culprit

FRP: new hook for chains

Create a new hook to get the details about a specific chain or the current chain.

This hook can accept one argument (number, aka chainID) and returns details about that chain (check utils/web3/CHAINS). If no argument is used, this should returns details about the current chain

Doc: Adding documentation for the `utils` elements

bug: React does not recognize the `startChildren` prop on a DOM element

Issue

Custom props are being spread to a div

@yearn-finance/web-lib-playground: Warning: React does not recognize the `startChildren` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `startchildren` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Repro

1. yarn start
2. Observe the console

[feat] Setup basic PWA features

Setup or build an example to get the dapp working fine as a PWA

Doc: Add `Snippet` section

The idea of the Snippet section is to get some ready-to-clone-and-edit components for some specific use case that are too difficult/not-worth adding as a component

Add `getSafeChainID` function to useWeb3 context

Logic is pretty simple, but could be helpful for a lot of situation:

const safeChainID = chainID === 1337 ? 1 : chainID;

Add a memo function in the useWeb3 context and export it

Create `isEth` function

          We should have this as a helper function `isEth(address) => boolean`

Originally posted by @karelianpie in yearn/yearn.fi#207 (comment)

FRP: Add Toast for notification

Replace the design and/or implementation of react-hot-toast to match the one on the picture.
Possible states should be error, warning, success, info.

Will send details to assignee.

[Bug] Switch Button Color Scheme

Doc: Add self-host/localhost/ipfs deployments explanations

BUG: Network label not updating when wallet not connected

Steps to reproduce

1. Go to yearn.fi and without connecting your wallet change the network;
2. Oobserve that the label of the network you've selected is not being displayed, but rather the old one

Incorrect Error Message in the Modal Loging

When there's an error in the modal login we are exposing an incorrect error message

[@yearn/web-lib Feature] New Component - Banner

Why

We currently have one AlertBanner component used to display notice message.
This banner is primary used for alerts, so we need one distinct component for the marketing (mostly) banner.

What

Figma source: https://www.figma.com/file/E6mbKP5TkCkSKtAh8q0RA0/Evan's-drafts?node-id=1288%3A7687
Create a Banner component with 4 variants:

• default (title, texts)
• image (filled image, no text)
• split (Title, texts on left, image on right
• background (title, texts, cover image as background)

All the variants should share a same base wrapper with:

• A rounded border with the primary color and a background set to the secondary color: border-primary border-2 border-solid rounded-lg bg-secondary relative min-height-[320px]
• An optional canClose prop (Can the banner be closed? Default is set to true. If false, the banner will always render and the cross will be hidden.) with an optional onClose action (Action to perform onClose. By default, this is handled by the component itself -> see the useLocalStorage usage here). The cross used should be absolutly positioned on the top right corner with 24px around.
• One or more pages, with a page indicator on the bottom right if there is more than one page (hidden otherwise). The page indicator should be absolutly positioned on the bottom right corner with 24px around.
• This schema should be used to define the content of each page:

type bannerChildren = {
    variant: 'default' | 'image' | 'split' | 'background',
    title?: string, //title displayed on the top of the banner. Not used with image.
    content?: string, //actual text displayed. Not used with image.
    image?: string, //source of the image to use 
    primaryButton?: ReactElement, //optional, button to display as primary action. Not used with image.
    secondaryButton?: ReactElement, //optional, button to display as secondary action. Not used with image.
    //Other stuff
    onClick?: function, //optional, action on click to the image variant
    className?: string, //optional, class to merge to the variant wrapper
}[]

Notes

• One banner can have children with different variants
• Avoid putting a padding in the base wrapper as the image on the 3td variant (half) has no padding top, bottom & right
• The space between buttons should be 16px (space-x-4). You can have 0, 1 or 2 buttons here.
• The buttons should be provided as props with all the desired interactions (aka ready to use by the component
• The height should scale nicely with the content. With a bigger image (cf: 2nd variant), the banner should take more space than just a few lines of text. Ideally this should be done with a nice transition, but this may be updated later.
• If the variant is image, an optional onClick event should be provided
• Image on variant 3 should be set to objectFit: cover & objectPosition: center
• Banner min-height should be 320px

FRP: Add to wallet toast

What is your proposal 🚀

Add a toast to add the TO token to wallet once a swap is performed (while waiting for it to be mined).
The toast should not disapear unless explicitly closed or if another transaction is initialized.
Design available on Figma

What does this solve ? 🛠

Can be hard to track the token to your wallet and the "mini wallet view" is almost hidden so no easy access to that

More 🔎

Figma: https://www.figma.com/file/SNQLkcAeI2lsvu4rh7u9N9/yveCRV?node-id=631%3A1181

Match this issue: yearn/yCRV#32

cc @karelianpie

[@yearn/web-lib Feature] New Component - TokenCard

What

Adding a new TokenCard Component to handle the Token/Value information, similar to the one available on the yearn.finance app.
This should take the StatisticCard as inspiration.
Params should be, at least, the Image source, the label and the value. A callback should be provided onClick.

Wallet connect not working

Wallet connect was not working with the error "Invalid chain"

Reported by Dark Ghosty in Telegram

feat: create a `isZero` function checker

          I think here we could have a `isZero(amount)` function to check this rather than using `=== 0n`

Originally posted by @karelianpie in yearn/yearn.fi#214 (comment)

Chore: fix or close dependancy PRs

#298
#295
#293
#292
#290

tabs in unusual places

There are tabs in unusual places throughout this code base.

For example, in the README here
and here, separating function and WithYearn.

[Accessibility] Keyboard navigation and buttons

What

To have the best experience for user, our lib should be accessible via keyboard navigation.
Keyboard navigation is usually correctly handled by the browsers if the correct tabs are used.

• Any element with an onClick event should be a <button />
• The priority on the navigation in a group of items in the same group can be given by the tabIndex props, with 0 for automatic, n (1, 2, ..., n) for manual and -1 to disable.
• Any element focused by keyboard navigation will have a ring around with the primary color to make it visible

Where

• The chevron components in some banners
• The Image banner
• Some hack on the Switch components
• Any other missing places

Note

This should be a button, but it's not mandatory. Sometime, for some reasons, it's best to keep a simple <div /> or something else.

WalletConnect disable

Hi @Majorfi Ma

I see the commit 9289f1e that disable WalletConnect. could you explain why?

[@yearn/web-lib Feature] New Component - StatisticGroup

What

Adding a new StatisticGroup Component to handle a group of statistic, similar to the one available on the yearn.finance app.
This should take the StatisticCard as inspiration
This should accept a variant with a title and a chevron with a callback on click.

bug: Network switcher on mobile

Problem

Network switcher is not working on mobile

Repro

1. Switch to any network;
2. Then you're not able to switch back to Ethereum

FRP: new hook for current Explorer

Create a new hook to get the current chainExplorer.

Ex of usage:

const chainExplorer = useExplorer();

chainExplorer === 'https://etherscan.io/' // true

Doc: Add `Toast` section