feat: Migrate web lib to 3.0 (#121)

* feat: Migrate web lib to 3.0 * fix: Lint * fix: Invalid next.config.js options detected * fix: Dropdown rotation * fix: Build * fix: Relative import rather than barrel file * fix: Dep * chore: Missing dependencies * chore: Bump web-lib * fix: Add env to build step
yearn · Sep 4, 2023 · 3c584a7 · 3c584a7 · vercel · Sep 4, 2023
1 parent c71d231
commit 3c584a7
Show file tree

Hide file tree

Showing 34 changed files with 4,957 additions and 3,184 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -114,6 +114,7 @@ module.exports = {
 		'comma-spacing': 'off',
 		'@typescript-eslint/comma-spacing': ['error'],
 		'dot-notation': 'off',
-		'@typescript-eslint/dot-notation': ['error']
+		'@typescript-eslint/dot-notation': ['error'],
+		'@typescript-eslint/no-explicit-any': 'off'
 	}
 };
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -25,4 +25,6 @@ jobs:
         run: yarn --prefer-offline
 
       - name: Build project
-        run: yarn build
+        run: yarn build
+        env:
+          WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
diff --git a/components/ImageTester.tsx b/components/ImageTester.tsx
@@ -2,8 +2,8 @@
 import React, {ReactElement} from 'react';
 import {useYearn}  from 'contexts/useYearn';
 import {TTokenData, TTokensData} from 'types/entities';
-import {useWeb3} from '@yearn-finance/web-lib/contexts';
-import {toAddress} from '@yearn-finance/web-lib/utils';
+import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
+import {toAddress} from '@yearn-finance/web-lib/utils/address';
 
 function	VaultImageTester({vaults}: {vaults: any[]}): ReactElement {
 	const	{onUpdateIconStatus, onUpdateTokenIconStatus} = useYearn();

diff --git a/components/PartnerEntity.tsx b/components/PartnerEntity.tsx
@@ -1,12 +1,12 @@
 import React, {ReactElement} from 'react';
-import {Card} from '@yearn-finance/web-lib/components';
 import type {TPartner, TSettings} from 'types/types';
 import StatusLine from './StatusLine';
-import {useWeb3} from '@yearn-finance/web-lib';
+import {Card} from 'components/common/Card';
+import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 
 type TPartnerEntityProps = {partner: string; status: TPartner[] ;settings: TSettings};
 
-const getSuffix = (src: string, chainID: string, hasAnomalies: boolean, partner: string): ReactElement | string => {
+const getSuffix = (src: string, chainID: number, hasAnomalies: boolean, partner: string): ReactElement | string => {
 	if (hasAnomalies && src === 'yDaemon') {
 		return (<span>
 			{'yDaemon (file '}

diff --git a/components/StatusLine.tsx b/components/StatusLine.tsx
@@ -50,7 +50,7 @@ function	StatusLine({
 					{suffix}
 					{onClick ? <IconFix
 						onClick={onClick}
-						className={'mt-[2px] ml-2 inline h-4 min-h-[16px] w-4 min-w-[16px] cursor-pointer text-neutral-500/40 transition-colors hover:text-neutral-500'} /> : null}
+						className={'ml-2 mt-[2px] inline h-4 min-h-[16px] w-4 min-w-[16px] cursor-pointer text-neutral-500/40 transition-colors hover:text-neutral-500'} /> : null}
 				</p>
 			</div>
 		);	
@@ -64,7 +64,7 @@ function	StatusLine({
 				{suffix}
 				{onClick ? <IconFix
 					onClick={onClick}
-					className={'mt-[2px] ml-2 inline h-4 min-h-[16px] w-4 min-w-[16px] cursor-pointer text-neutral-500/40 transition-colors hover:text-neutral-500'} /> : null}
+					className={'ml-2 mt-[2px] inline h-4 min-h-[16px] w-4 min-w-[16px] cursor-pointer text-neutral-500/40 transition-colors hover:text-neutral-500'} /> : null}
 			</p>
 		</div>
 	);

diff --git a/components/StrategyEntity.tsx b/components/StrategyEntity.tsx
@@ -1,8 +1,8 @@
 import React, {ReactElement} from 'react';
-import {AddressWithActions} from '@yearn-finance/web-lib/components';
 import type {TFile, TSettings} from 'types/types';
 import {TStrategy} from 'types/entities';
 import StatusLine from './StatusLine';
+import {AddressWithActions} from 'components/common/AddressWithActions';
 
 type TProtocolStatus = {
 	name: string;

diff --git a/components/TokenEntity.tsx b/components/TokenEntity.tsx
@@ -1,20 +1,21 @@
 import React, {ReactElement} from 'react';
 import Image from 'next/image';
-import {useSettings, useWeb3} from '@yearn-finance/web-lib/contexts';
-import {copyToClipboard} from '@yearn-finance/web-lib/utils';
-import {Copy, LinkOut} from '@yearn-finance/web-lib/icons';
-import {AddressWithActions} from '@yearn-finance/web-lib/components';
 import type {TSettings} from 'types/types';
 import TranslationStatusLine  from 'components/TranslationStatusLine';
 import AnomaliesSection from 'components/VaultEntity.AnomaliesSection';
 import {TTokenData} from 'types/entities';
+import {AddressWithActions} from 'components/common/AddressWithActions';
+import {getNetwork} from '@yearn-finance/web-lib/utils/wagmi/utils';
+import {copyToClipboard} from '@yearn-finance/web-lib/utils/helpers';
+import {IconCopy} from '@yearn-finance/web-lib/icons/IconCopy';
+import {IconLinkOut} from '@yearn-finance/web-lib/icons/IconLinkOut';
+import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 
 function	TokenEntity({
 	tokenData,
 	settings: statusSettings
 }: {tokenData: TTokenData, settings: TSettings}): ReactElement | null {
 	const	{chainID} = useWeb3();
-	const	{networks} = useSettings();
 
 	if (!tokenData) {
 		return null;
@@ -76,14 +77,14 @@ function	TokenEntity({
 							suffix: (
 								<span className={'inline'}>
 									{'for underlying token '}
-									<a href={`${networks[chainID].explorerBaseURI}/address/${tokenData.address}`} target={'_blank'} className={`underline ${tokenData?.hasValidTokenIcon ? 'tabular-nums' : 'tabular-nums text-red-900'}`} rel={'noreferrer'}>
+									<a href={`${getNetwork(chainID).defaultBlockExplorer}/address/${tokenData.address}`} target={'_blank'} className={`underline ${tokenData?.hasValidTokenIcon ? 'tabular-nums' : 'tabular-nums text-red-900'}`} rel={'noreferrer'}>
 										{tokenData.symbol || 'not_set'}
 									</a>
-									<button onClick={(): void => copyToClipboard(`${networks[chainID].explorerBaseURI}/address/${tokenData.address}`)}>
-										<Copy className={'ml-2 inline h-4 w-4 text-neutral-500/40 transition-colors hover:text-neutral-500'} />
+									<button onClick={(): void => copyToClipboard(`${getNetwork(chainID).defaultBlockExplorer}/address/${tokenData.address}`)}>
+										<IconCopy className={'ml-2 inline h-4 w-4 text-neutral-500/40 transition-colors hover:text-neutral-500'} />
 									</button>
-									<a href={`${networks[chainID].explorerBaseURI}/address/${tokenData.address}`} target={'_blank'} rel={'noreferrer'}>
-										<LinkOut className={'ml-2 inline h-4 w-4 text-neutral-500/40 transition-colors hover:text-neutral-500'} />
+									<a href={`${getNetwork(chainID).defaultBlockExplorer}/address/${tokenData.address}`} target={'_blank'} rel={'noreferrer'}>
+										<IconLinkOut className={'ml-2 inline h-4 w-4 text-neutral-500/40 transition-colors hover:text-neutral-500'} />
 									</a>
 								</span>
 							)
@@ -101,7 +102,7 @@ function	TokenEntity({
 							suffix: (
 								<span>
 									{'for token '}
-									<a href={`${networks[chainID].explorerBaseURI}/address/${tokenData.address}`} target={'_blank'} className={`underline ${tokenData.hasValidPrice ? '' : 'text-red-900'}`} rel={'noreferrer'}>
+									<a href={`${getNetwork(chainID).defaultBlockExplorer}/address/${tokenData.address}`} target={'_blank'} className={`underline ${tokenData.hasValidPrice ? '' : 'text-red-900'}`} rel={'noreferrer'}>
 										{tokenData.name}
 									</a>
 									{tokenData?.hasValidPrice ? ` (${tokenData.price}$)` : ''}

diff --git a/components/VaultEntity.AnomaliesSection.tsx b/components/VaultEntity.AnomaliesSection.tsx
@@ -1,7 +1,7 @@
 import React, {ReactElement, ReactNode, useEffect, useState} from 'react';
-import {performBatchedUpdates} from '@yearn-finance/web-lib/utils';
 import StatusLine from 'components/StatusLine';
 import type {TAnomalies, TAnomaliesSection} from 'types/types';
+import {performBatchedUpdates} from '@yearn-finance/web-lib/utils/performBatchedUpdates';
 
 function	AnomaliesSection({
 	label,