Merge pull request #305 from yearn/feat/cleaning

Feat/cleaning

packages/web-lib/.eslintrc.cjs → .eslintrc.cjs

@@ -6,9 +6,6 @@ module.exports = {
 	},
 	'extends': [
 		'eslint:recommended',
-		'plugin:import/recommended',
-		'plugin:react/recommended',
-		'plugin:react-hooks/recommended',
 		'plugin:tailwindcss/recommended',
 		'plugin:@typescript-eslint/recommended',
 		'next/core-web-vitals'
@@ -35,7 +32,6 @@ module.exports = {
 	},
 	'rules': {
 		'import/default': 0,
-		'no-mixed-spaces-and-tabs': 2,
 		'react/prop-types': 0,
 		'no-async-promise-executor': 0,
 		'import/no-unresolved': 0, //Issue with package exports
@@ -50,7 +46,6 @@ module.exports = {
 		'array-bracket-newline': ['error', {'multiline': true}],
 		'react/jsx-curly-brace-presence': ['error', {'props': 'always', 'children': 'always'}],
 		'react/jsx-first-prop-new-line': ['error', 'multiline'],
-		'react/jsx-max-props-per-line': ['error', {'maximum': {'single': 2, 'multi': 1}}],
 		'react/jsx-closing-tag-location': 2,
 		'unused-imports/no-unused-imports': 'error',
 		'unused-imports/no-unused-vars': [
@@ -84,9 +79,9 @@ module.exports = {
 				'fixStyle': 'separate-type-imports'
 			}
 		],
-		'no-multi-spaces': ['error', {ignoreEOLComments: false}],
 		'@typescript-eslint/no-var-requires': 0,
 		'@typescript-eslint/no-unused-vars': 2,
+		'@typescript-eslint/no-explicit-any': [1],
 		'@typescript-eslint/array-type': ['error', {'default': 'array'}],
 		'@typescript-eslint/consistent-type-assertions': ['error', {'assertionStyle': 'as', 'objectLiteralTypeAssertions': 'never'}],
 		'@typescript-eslint/consistent-type-definitions': ['error', 'type'],
@@ -145,7 +140,6 @@ module.exports = {
 		'@typescript-eslint/prefer-for-of': 'error',
 		'@typescript-eslint/prefer-function-type': 'error',
 		'@typescript-eslint/prefer-includes': 'error',
-		'@typescript-eslint/prefer-optional-chain': 'error',
 		'@typescript-eslint/promise-function-async': 'error',
 		'@typescript-eslint/require-array-sort-compare': 'error',
 		'@typescript-eslint/type-annotation-spacing': [
@@ -159,12 +153,12 @@ module.exports = {
 		'@typescript-eslint/brace-style': ['error', '1tbs'],
 		'comma-dangle': 'off',
 		'@typescript-eslint/comma-dangle': ['error'],
-		'comma-spacing': 'off',
-		'@typescript-eslint/comma-spacing': ['error'],
-		'dot-notation': 'off',
-		'@typescript-eslint/dot-notation': ['error'],
+		'@typescript-eslint/prefer-optional-chain': 'error',
 		'indent': 'off',
-		'@typescript-eslint/indent': ['error', 'tab']
+		'@typescript-eslint/indent': ['error', 'tab'],
+		'no-multi-spaces': ['error', {ignoreEOLComments: false}],
+		'no-mixed-spaces-and-tabs': 'error',
+		'react/jsx-max-props-per-line': 'off'
 	},
 	overrides: [
 		{

.github/workflows/lint.yml

@@ -25,14 +25,8 @@ jobs:
         with:
           node-version: 16
 
-      - name: Move to dir
-        run: cd packages/web-lib
-
       - name: Install project dependencies
         run: yarn --prefer-offline
         id: install
 
-      - name: Run linters
-        uses: wearerequired/lint-action@v2
-        with:
-          eslint: true
+      - name: yarn lint

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 yearn
+Copyright (c) 2023 yearn
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,8 +2,8 @@
 ![](../../.github/og.jpeg)
 
 
-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.  
+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.
@@ -24,20 +24,8 @@ This repo is mirrored on [NPM](https://www.npmjs.com/package/@yearn-finance/web-
 yarn add @yearn-finance/web-lib
 ```
 
-### Useful Commands
-- `yarn dev` - Run all packages locally
-
-### Apps & Packages
-The following packages and applications are available
-
-- `package/docs`: Documentation site for the library
-- `packages/web-lib`: Actual library for Yearn's projects
-
-Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
-
-
 ### Releasing
-When running `yarn build` in the `package/web-lib` folder, the library will be bumped to the next minor version, the code will be compiled and the various files will be copied in the `package/web-lib/dist` folder.  
+When running `yarn build` in the root folder, the library will be bumped to the next minor version, the code will be compiled and the various files will be copied in the `package/web-lib/dist` folder.
 From there the library can be published to NPM via the `yarn publish ./dist` command.
 
 ### How to setup
@@ -95,12 +83,14 @@ WEB_SOCKET_URL: {
 	1: process.env.WS_URL_MAINNET,
 	10: process.env.WS_URL_OPTIMISM,
 	250: process.env.WS_URL_FANTOM,
+	8453: process.env.WS_URL_BASE,
 	42161: process.env.WS_URL_ARBITRUM
 },
 JSON_RPC_URL: {
 	1: process.env.RPC_URL_MAINNET,
 	10: process.env.RPC_URL_OPTIMISM,
 	250: process.env.RPC_URL_FANTOM,
+	8453: process.env.RPC_URL_BASE,
 	42161: process.env.RPC_URL_ARBITRUM
 },
 ALCHEMY_KEY: process.env.ALCHEMY_KEY,
@@ -115,7 +105,7 @@ import	{WithYearn}		from	'@yearn-finance/web-lib/contexts';
 
 function	MyApp(props: AppProps): ReactElement {
 	const	{Component, pageProps} = props;
-	
+
 	return (
 		<WithYearn>
 			<AppWrapper

components/AddressLike.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {useEnsName} from 'wagmi';
+import {cl} from '@yearn-finance/web-lib/utils/cl';
+import {copyToClipboard} from '@yearn-finance/web-lib/utils/helpers';
+
+import type {ReactElement} from 'react';
+import type {TAddress} from '@yearn-finance/web-lib/types';
+
+export function AddressLike({address}: {address: TAddress}): ReactElement {
+	const {data: ensHandle, isSuccess} = useEnsName({address, chainId: 1});
+	const shouldDisplayTooltip = isSuccess && !!ensHandle;
+
+	return (
+		<span
+			suppressHydrationWarning
+			className={cl(shouldDisplayTooltip ? 'tooltip underline decoration-neutral-600/30 decoration-dotted underline-offset-4 transition-opacity hover:decoration-neutral-600' : 'font-number')}>
+			{shouldDisplayTooltip ? (
+				<span
+					suppressHydrationWarning
+					onClick={(): void => copyToClipboard(address)}
+					className={'tooltipLight top-full cursor-copy pt-1'}>
+					<div
+						className={'font-number w-fit border border-neutral-300 bg-neutral-0 p-1 px-2 text-center text-xs text-neutral-900'}>
+						{address}
+					</div>
+				</span>
+			) : <span />}
+			{shouldDisplayTooltip ? ensHandle : address}
+		</span>
+	);
+}