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.

Please check @yearn/web-template for documentation and usage.

The stack used for this project is the following:

• 🚀 Next — JavaScript library for user interfaces
• ▲ Vercel — Cloud deployment platform
• 🏎 Turborepo — High-performance build system for Monorepos
• 🛠 Tsup — TypeScript bundler powered by esbuild
• 📄 TypeScript for static type checking
• 💄 ESLint for code linting
• ⚙️ GitHub Actions for fully automated package publishing

This repo is mirrored on NPM but should be primary used with Github Packages.
With theses packages, you will need to provider a Personal Access Token, to create or update the ~/.npmrc file with the following content:

registry=https://registry.npmjs.org/
@yearn:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_ACCESS_TOKEN

This will link all repo named @yearn you will install to the correct Yearn organization

yarn add @yearn/web-lib #recommanded, from Github package
# or
yarn add @yearn-finance/web-lib #from npm

• yarn build - Build all packages including the Storybook site
• yarn dev - Run all packages locally and preview with Storybook
• yarn lint - Lint all packages
• yarn changeset - Generate a changeset
• yarn clean - Clean up all node_modules and dist folders (runs each package's clean script)

This Turborepo includes the following packages and applications:

• apps/docs: Component documentation site, also playground
• packages/web-lib: Actual library for Yearn's projects

Each package and app is 100% TypeScript. Yarn Workspaces enables us to "hoist" dependencies that are shared between packages to the root package.json. This means smaller node_modules folders and a better local dev experience. To install a dependency for the entire monorepo, use the -W workspaces flag with yarn add.

When you push your code to GitHub, the GitHub Action will run the publish script will run. This will:

• Deploy the app/dosc app to Vercel
• Publish the @yearn/web-lib package to the Github Registry
• Publish the @yearn-finance/web-lib package to npm

In order to trigger a new version of the web-lib, the commit message MUST start with one of the following:

• patch: - This will trigger a new patch version of the web-lib
• minor: - This will trigger a new minor version of the web-lib
• major: - This will trigger a new major version of the web-lib

We recommand you to use bump to generate a new version number for each release, with the following commands:

bump -a -p -c "patch: " #for a patch version, [-a] is for [git commit -a], [-p] is for [git push] and [-c] is for [git commit -m].
bump -a -p -c "minor: " #for a minor version, [-a] is for [git commit -a], [-p] is for [git push] and [-c] is for [git commit -m].
bump -a -p -c "major: " #for a major version, [-a] is for [git commit -a], [-p] is for [git push] and [-c] is for [git commit -m].

Release will only occurs on main branch, only via an authorized member of Yearn of via the Github Action.

With TS config, you should add some paths to be sure to correctly link the web lib:

	"baseUrl": ".",
	"paths": {
		"@yearn/web-lib/components": ["./node_modules/@yearn/web-lib/dist/components"],
		"@yearn/web-lib/layouts": ["./node_modules/@yearn/web-lib/dist/layouts"],
		"@yearn/web-lib/contexts": ["./node_modules/@yearn/web-lib/dist/contexts"],
		"@yearn/web-lib/hooks": ["./node_modules/@yearn/web-lib/dist/hooks"],
		"@yearn/web-lib/icons": ["./node_modules/@yearn/web-lib/dist/icons"],
		"@yearn/web-lib/utils": ["./node_modules/@yearn/web-lib/dist/utils"],
	},

Create a default style.css file in your project root, and add that in it:

/* This will load Tailwindcss + all the overwrite from Yearn lib */
@import '@yearn/web-lib/dist/style.css';

Then, setup your tailwind.config.js file to enable detection of your style and prod optimization:

const {join} = require('path');
module.exports = {
	presets: [
		require('@yearn/web-lib/tailwind.plugin')
	],
	content: [
		join(__dirname, 'pages', '**', '*.{js,jsx,ts,tsx}'),
		join(__dirname, 'components', 'icons', '**', '*.{js,jsx,ts,tsx}'),
		join(__dirname, 'components', 'logo', '**', '*.{js,jsx,ts,tsx}'),
		join(__dirname, 'components', 'strategies', '**', '*.{js,jsx,ts,tsx}'),
		join(__dirname, 'components', 'vaults', '**', '*.{js,jsx,ts,tsx}'),
		join(__dirname, 'components', '**', '*.{js,jsx,ts,tsx}'),
		join(__dirname, 'node_modules', '@yearn', 'web-lib', 'dist', 'layouts', '**', '*.js'),
		join(__dirname, 'node_modules', '@yearn', 'web-lib', 'dist', 'components', '**', '*.js'),
		join(__dirname, 'node_modules', '@yearn', 'web-lib', 'dist', 'contexts', '**', '*.js'),
		join(__dirname, 'node_modules', '@yearn', 'web-lib', 'dist', 'icons', '**', '*.js'),
		join(__dirname, 'node_modules', '@yearn', 'web-lib', 'dist', 'utils', '**', '*.js')
	],
	.....
};

Ensure your env are set. Here is the list of the stuff to set:

WEBSITE_URI: 'https://my-web3-app.major.farm',
WEBSITE_NAME: 'My awesome yWeb3 app',
WEBSITE_TITLE: 'My awesome yWeb3 app',
WEBSITE_DESCRIPTION: 'Welcome to my awesome Yearn Web3 app. This is a super description that will be used for the SEO stuffs',
PROJECT_GITHUB_URL: 'https://github.com/me/yweb3-awesome',

USE_WALLET: true,
USE_PRICES: false,
USE_PRICE_TRI_CRYPTO: false,
USE_FEEDBACKS: true,

CG_IDS: ['yearn-finance'],
TOKENS: [['0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e', 18, 1]],
RPC_URL: {
	1: process.env.RPC_URL_MAINNET,
	250: process.env.RPC_URL_FANTOM || 'https://rpc.ftm.tools',
	42161: process.env.RPC_URL_ARBITRUM || 'https://arbitrum.public-rpc.com'
},

# Only if feedbacks is true
FEEBACKS_TYPE: 'github',
LINEAR_OAUTH_TOKEN: process.env.LINEAR_OAUTH_TOKEN,
LINEAR_TEAM_ID: process.env.LINEAR_TEAM_ID,
LINEAR_PROJECT_NAME: process.env.LINEAR_PROJECT_NAME,
GITHUB_AUTH_TOKEN: process.env.GITHUB_AUTH_TOKEN,
GITHUB_PROJECT_OWNER: process.env.GITHUB_PROJECT_OWNER,
GITHUB_PROJECT_REPO: process.env.GITHUB_PROJECT_REPO

Usage is way simpler. You first need to wrap you app with the WithYearn context, and then you can use the components from the library.

import	{WithYearn}		from	'@yearn/web-lib/contexts';

function	MyApp(props: AppProps): ReactElement {
	const	{Component, pageProps} = props;
	
	return (
		<WithYearn>
			<AppWrapper
				Component={Component}
				pageProps={pageProps} />
		</WithYearn>
	);
}