feat: placeholder and clusters integration

yearn · Jun 28, 2024 · baa9947 · baa9947
1 parent 29db706
commit baa9947
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 66 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/common/Header.tsx b/components/common/Header.tsx
@@ -11,9 +11,10 @@ import type {ReactElement} from 'react';
 
 function Header(): ReactElement {
 	const pathname = usePathname();
-	const {onConnect, onDesactivate, address, ens} = useWeb3();
+	const {onConnect, onDesactivate, address, ens, clusters} = useWeb3();
 	const {openAccountModal} = useAccountModal();
 
+	const ensOrClusters = address && (ens || clusters?.name);
 	const tabs = [
 		{href: 'https://juiced.app', label: 'About', target: '_blank'},
 		{href: '/', label: 'Vaults'},
@@ -50,7 +51,7 @@ function Header(): ReactElement {
 						suppressHydrationWarning
 						onClick={address ? openAccountModal : onConnect}
 						className={'text-base font-bold'}>
-						{address && ens ? ens : address ? truncateHex(address, 6) : 'Connect Wallet'}
+						{ensOrClusters ? ensOrClusters : address ? truncateHex(address, 6) : 'Connect Wallet'}
 					</button>
 				</div>
 			</div>
@@ -67,7 +68,7 @@ function Header(): ReactElement {
 								className={
 									'h-10 rounded-lg border-2 border-neutral-900 bg-yellow px-5 text-base font-bold'
 								}>
-								{address && ens ? ens : address ? truncateHex(address, 6) : 'Connect Wallet'}
+								{ensOrClusters ? ensOrClusters : address ? truncateHex(address, 6) : 'Connect Wallet'}
 							</button>
 							<div className={'mt-6 grid gap-4 text-left'}>
 								{tabs.map(({href, label, target}) => (
@@ -100,7 +101,7 @@ function Header(): ReactElement {
 						suppressHydrationWarning
 						onClick={address ? openAccountModal : onConnect}
 						className={'text-base font-bold'}>
-						{address && ens ? ens : address ? truncateHex(address, 6) : 'Connect Wallet'}
+						{ensOrClusters ? ensOrClusters : address ? truncateHex(address, 6) : 'Connect Wallet'}
 					</button>
 				</div>
 			</div>

diff --git a/components/v1/StakerWithCompounding.tsx b/components/v1/StakerWithCompounding.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import toast from 'react-hot-toast';
+import {erc20Abi} from 'viem';
 import {useReadContract} from 'wagmi';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {
@@ -21,7 +22,6 @@ import {IconBigChevron} from '@icons/IconBigChevron';
 import {IconSpinner} from '@icons/IconSpinner';
 import {depositERC20, redeemV3Shares} from '@utils/actions';
 import {convertToYVToken, convertToYVYVToken, formatVaultAPR, onInput} from '@utils/helpers';
-import {erc20ABI} from '@wagmi/core';
 
 import type {ReactElement} from 'react';
 import type {TNormalizedBN} from '@builtbymom/web3/types';
@@ -48,7 +48,7 @@ function StakeSection(props: {vault: TVaultData; onRefreshVaultData: () => void}
 	]);
 
 	const {data: hasAllowance, refetch: onRefreshAllowance} = useReadContract({
-		abi: erc20ABI,
+		abi: erc20Abi,
 		chainId: props.vault.chainID,
 		address: props.vault.vaultAddress,
 		functionName: 'allowance',

diff --git a/components/v1/StakerWithReward.tsx b/components/v1/StakerWithReward.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import toast from 'react-hot-toast';
+import {erc20Abi} from 'viem';
 import {useReadContract} from 'wagmi';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {
@@ -20,7 +21,6 @@ import {IconBigChevron} from '@icons/IconBigChevron';
 import {IconSpinner} from '@icons/IconSpinner';
 import {claimRewards, exit, stakeERC20, unstakeSome} from '@utils/actions';
 import {convertToYVToken, formatVaultAPR, onInput} from '@utils/helpers';
-import {erc20ABI} from '@wagmi/core';
 import {Counter} from '@common/Counter';
 
 import type {ReactElement} from 'react';
@@ -48,7 +48,7 @@ function StakeSection(props: {vault: TVaultData; onRefreshVaultData: () => void}
 	]);
 
 	const {data: hasAllowance, refetch: onRefreshAllowance} = useReadContract({
-		abi: erc20ABI,
+		abi: erc20Abi,
 		chainId: props.vault.chainID,
 		address: props.vault.vaultAddress,
 		functionName: 'allowance',

diff --git a/components/v1/Vault.tsx b/components/v1/Vault.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useMemo, useState} from 'react';
 import {GridViewVault} from 'components/v1/GridViewVault';
 import {ListViewVault} from 'components/v1/ListViewVault';
+import {erc20Abi} from 'viem';
 import {useReadContracts} from 'wagmi';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {useFetch} from '@builtbymom/web3/hooks/useFetch';
@@ -17,7 +18,6 @@ import {useIntervalEffect} from '@react-hookz/web';
 import {YVAULT_STAKING_ABI} from '@utils/abi/yVaultStaking.abi';
 import {YVAULT_V3_ABI} from '@utils/abi/yVaultV3.abi';
 import {getVaultAPR, toSafeChainID} from '@utils/helpers';
-import {erc20ABI} from '@wagmi/core';
 import {useYDaemonBaseURI} from '@yearn-finance/web-lib/hooks/useYDaemonBaseURI';
 import {yDaemonVaultSchema} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas';
 
@@ -65,7 +65,7 @@ export function VaultV1(props: {
 			},
 			//Underlying token info
 			{
-				abi: erc20ABI,
+				abi: erc20Abi,
 				chainId: vault.chainID,
 				address: vault.tokenAddress,
 				functionName: 'balanceOf',

diff --git a/components/v1/VaultBasicDeposit.tsx b/components/v1/VaultBasicDeposit.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {toast} from 'react-hot-toast';
 import {useBlockExplorer} from 'hooks/useBlockExplorer';
+import {erc20Abi} from 'viem';
 import {useReadContract} from 'wagmi';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {
@@ -20,7 +21,6 @@ import {approveERC20, defaultTxStatus, getNetwork} from '@builtbymom/web3/utils/
 import {IconSpinner} from '@icons/IconSpinner';
 import {depositERC20, redeemV3Shares} from '@utils/actions';
 import {convertToYVToken, formatVaultAPR, onInput, toSafeChainID} from '@utils/helpers';
-import {erc20ABI} from '@wagmi/core';
 import {ImageWithFallback} from '@common/ImageWithFallback';
 
 import type {ReactElement} from 'react';
@@ -34,7 +34,7 @@ function DepositSection(props: {vault: TVaultData; onRefreshVaultData: () => voi
 	const [depositStatus, set_depositStatus] = useState(defaultTxStatus);
 
 	const {data: hasAllowance, refetch: onRefreshAllowance} = useReadContract({
-		abi: erc20ABI,
+		abi: erc20Abi,
 		chainId: props.vault.chainID,
 		address: props.vault.tokenAddress,
 		functionName: 'allowance',

diff --git a/components/v2/StakerWithCompounding.tsx b/components/v2/StakerWithCompounding.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import toast from 'react-hot-toast';
+import {erc20Abi} from 'viem';
 import {useReadContract} from 'wagmi';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {
@@ -21,7 +22,6 @@ import {IconRecycle} from '@icons/IconRecycle';
 import {IconSpinner} from '@icons/IconSpinner';
 import {depositERC20, redeemV3Shares} from '@utils/actions';
 import {convertToYVToken, formatVaultAPR, onInput} from '@utils/helpers';
-import {erc20ABI} from '@wagmi/core';
 
 import type {ReactElement} from 'react';
 import type {TNormalizedBN} from '@builtbymom/web3/types';
@@ -35,7 +35,7 @@ export function StakeSection(props: {vault: TVaultData; onRefreshVaultData: () =
 	const [depositStatus, set_depositStatus] = useState(defaultTxStatus);
 
 	const {data: hasAllowance, refetch: onRefreshAllowance} = useReadContract({
-		abi: erc20ABI,
+		abi: erc20Abi,
 		chainId: props.vault.chainID,
 		address: props.vault.tokenAddress,
 		functionName: 'allowance',

diff --git a/components/v2/StakerWithReward.tsx b/components/v2/StakerWithReward.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import toast from 'react-hot-toast';
+import {erc20Abi} from 'viem';
 import {useReadContract} from 'wagmi';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {
@@ -20,7 +21,6 @@ import {IconGold} from '@icons/IconGold';
 import {IconSpinner} from '@icons/IconSpinner';
 import {claimRewards, exit, unstakeSome, zapIn} from '@utils/actions';
 import {convertToYVToken, formatVaultAPR, onInput} from '@utils/helpers';
-import {erc20ABI} from '@wagmi/core';
 import {Counter} from '@common/Counter';
 
 import type {ReactElement} from 'react';
@@ -37,7 +37,7 @@ function StakeSection(props: {vault: TVaultData; onRefreshVaultData: () => void}
 	const [depositStatus, set_depositStatus] = useState(defaultTxStatus);
 
 	const {data: hasAllowance, refetch: onRefreshAllowance} = useReadContract({
-		abi: erc20ABI,
+		abi: erc20Abi,
 		chainId: props.vault.chainID,
 		address: props.vault.tokenAddress,
 		functionName: 'allowance',

diff --git a/components/v2/Vault.tsx b/components/v2/Vault.tsx
@@ -1,6 +1,7 @@
 import {useEffect, useMemo, useState} from 'react';
 import {GridViewVault} from 'components/v2/GridViewVault';
 import {ListViewVault} from 'components/v2/ListViewVault';
+import {erc20Abi} from 'viem';
 import {useReadContracts} from 'wagmi';
 import {useWeb3} from '@builtbymom/web3/contexts/useWeb3';
 import {useFetch} from '@builtbymom/web3/hooks/useFetch';
@@ -17,7 +18,6 @@ import {useIntervalEffect} from '@react-hookz/web';
 import {YVAULT_STAKING_ABI} from '@utils/abi/yVaultStaking.abi';
 import {YVAULT_V3_ABI} from '@utils/abi/yVaultV3.abi';
 import {getVaultAPR, toSafeChainID} from '@utils/helpers';
-import {erc20ABI} from '@wagmi/core';
 import {useYDaemonBaseURI} from '@yearn-finance/web-lib/hooks/useYDaemonBaseURI';
 import {yDaemonVaultSchema} from '@yearn-finance/web-lib/utils/schemas/yDaemonVaultsSchemas';
 
@@ -65,7 +65,7 @@ export function VaultV2(props: {
 			},
 			//Underlying token info
 			{
-				abi: erc20ABI,
+				abi: erc20Abi,
 				chainId: vault.chainID,
 				address: vault.tokenAddress,
 				functionName: 'balanceOf',

diff --git a/next.config.js b/next.config.js
@@ -47,20 +47,61 @@ module.exports = phase =>
 		},
 		env: {
 			PROJECT_SLUG: 'build_by_mom',
+			RPC_URI_FOR: {
+				/**********************************************************************************
+				 ** New RPC Setup for mainnet networks
+				 *********************************************************************************/
+				1: process.env.RPC_URI_FOR_1,
+				10: process.env.RPC_URI_FOR_10,
+				56: process.env.RPC_URL_BINANCE,
+				100: process.env.RPC_URI_FOR_100,
+				137: process.env.RPC_URI_FOR_137,
+				250: process.env.RPC_URI_FOR_250,
+				252: process.env.RPC_URI_FOR_252,
+				288: process.env.RPC_URI_FOR_288,
+				8453: process.env.RPC_URI_FOR_8453,
+				42161: process.env.RPC_URI_FOR_42161,
+				42170: process.env.RPC_URI_FOR_42170,
+				56288: process.env.RPC_URI_FOR_56288,
+				81457: process.env.RPC_URI_FOR_81457,
+				111188: process.env.RPC_URI_FOR_111188,
+
+				/**********************************************************************************
+				 ** New RPC Setup for testnet networks
+				 *********************************************************************************/
+				97: process.env.RPC_URL_BINANCE_TESTNET,
+				400: process.env.RPC_URL_OPTIMISM_GOERLI,
+				2522: process.env.RPC_URI_FOR_2522,
+				9728: process.env.RPC_URI_FOR_9728,
+				17000: process.env.RPC_URI_FOR_17000,
+				18233: process.env.RPC_URI_FOR_18233,
+				28882: process.env.RPC_URI_FOR_28882,
+				80001: process.env.RPC_URI_FOR_80001,
+				84532: process.env.RPC_URI_FOR_84532,
+				421614: process.env.RPC_URI_FOR_421614,
+				11155111: process.env.RPC_URI_FOR_11155111,
+				11155420: process.env.RPC_URI_FOR_11155420
+			},
+			/**********************************************************************************
+			 ** Legacy RPC configuration, mainnet and testnet
+			 *********************************************************************************/
 			JSON_RPC_URL: {
 				1: process.env.RPC_URL_MAINNET,
 				10: process.env.RPC_URL_OPTIMISM,
-				100: process.env.RPC_URL_GNOSIS,
+				56: process.env.RPC_URL_BINANCE,
+				97: process.env.RPC_URL_BINANCE_TESTNET,
 				137: process.env.RPC_URL_POLYGON,
 				250: process.env.RPC_URL_FANTOM,
-				1337: 'http://localhost:8080',
-				42161: process.env.RPC_URL_ARBITRUM
+				420: process.env.RPC_URL_OPTIMISM_GOERLI,
+				8453: process.env.RPC_URL_BASE,
+				80001: process.env.RPC_URL_POLYGON_TESTNET,
+				42161: process.env.RPC_URL_ARBITRUM,
+				11155111: process.env.RPC_URL_SEPOLIA
 			},
 			ALCHEMY_KEY: process.env.ALCHEMY_KEY,
 			INFURA_KEY: process.env.INFURA_KEY,
-			YDAEMON_BASE_URI: process.env.YDAEMON_BASE_URI,
-			RPC_URL_OPTIMISM_YEARN: process.env.RPC_URL_OPTIMISM_YEARN,
 			WALLETCONNECT_PROJECT_ID: process.env.WALLETCONNECT_PROJECT_ID,
+			YDAEMON_BASE_URI: process.env.YDAEMON_BASE_URI,
 			SMOL_ASSETS_URL: 'https://assets.smold.app/api',
 			DEFAULT_CHAIN_ID: 1,
 			ZAP_ADDRESS: '0x37F350DC357222E823620d473d0289C12e1AcCDC'

diff --git a/package.json b/package.json
@@ -15,63 +15,63 @@
 		"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
 	},
 	"dependencies": {
-		"@builtbymom/web3": "^0.0.69",
-		"@headlessui/react": "^1.7.18",
-		"@rainbow-me/rainbowkit": "^2.0.2",
-		"@react-hookz/web": "^24.0.2",
-		"@tailwindcss/typography": "^0.5.10",
-		"@wagmi/core": "^1.4.3",
-		"@yearn-finance/web-lib": "^3.0.184",
-		"axios": "^1.6.5",
-		"framer-motion": "^11.0.3",
-		"graphql-request": "^6.1.0",
+		"@builtbymom/web3": "^0.0.122",
+		"@headlessui/react": "^2.1.1",
+		"@rainbow-me/rainbowkit": "^2.1.2",
+		"@react-hookz/web": "^24.0.4",
+		"@tailwindcss/typography": "^0.5.13",
+		"@wagmi/core": "^2.11.5",
+		"@yearn-finance/web-lib": "^4.0.2",
+		"axios": "^1.7.2",
+		"framer-motion": "^11.2.12",
+		"graphql-request": "^7.1.0",
 		"next": "^13.5.4",
 		"next-pwa": "^5.6.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
 		"react-hot-toast": "^2.4.1",
-		"swr": "^2.2.4",
-		"tailwindcss": "^3.4.1",
-		"vaul": "^0.9.0",
-		"viem": "^2.8.9",
-		"wagmi": "^2.5.7"
+		"swr": "^2.2.5",
+		"tailwindcss": "^3.4.4",
+		"vaul": "^0.9.1",
+		"viem": "^2.16.3",
+		"wagmi": "^2.10.8"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^18.5.0",
-		"@commitlint/config-conventional": "^18.5.0",
+		"@commitlint/cli": "^19.3.0",
+		"@commitlint/config-conventional": "^19.2.2",
 		"@total-typescript/ts-reset": "^0.5.1",
-		"@types/node": "^20.11.6",
+		"@types/node": "^20.14.9",
 		"@types/nprogress": "^0.2.3",
-		"@types/react": "^18.2.48",
-		"@types/react-dom": "^18.2.18",
-		"@typescript-eslint/eslint-plugin": "^6.19.1",
-		"@typescript-eslint/parser": "^6.19.1",
-		"autoprefixer": "^10.4.17",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@typescript-eslint/eslint-plugin": "^7.14.1",
+		"@typescript-eslint/parser": "^7.14.1",
+		"autoprefixer": "^10.4.19",
 		"babel-loader": "^9.1.3",
-		"bun-types": "^1.0.25",
+		"bun-types": "^1.1.17",
 		"eslint": "^8.56.0",
-		"eslint-config-next": "^14.1.0",
+		"eslint-config-next": "^14.2.4",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
 		"eslint-plugin-brackets": "^0.1.3",
 		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-react": "^7.33.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-simple-import-sort": "^10.0.0",
-		"eslint-plugin-tailwindcss": "^3.14.0",
-		"eslint-plugin-unused-imports": "^3.0.0",
-		"husky": "^8.0.3",
-		"lint-staged": "^15.2.0",
+		"eslint-plugin-react": "^7.34.3",
+		"eslint-plugin-react-hooks": "^4.6.2",
+		"eslint-plugin-simple-import-sort": "^12.1.0",
+		"eslint-plugin-tailwindcss": "^3.17.4",
+		"eslint-plugin-unused-imports": "^4.0.0",
+		"husky": "^9.0.11",
+		"lint-staged": "^15.2.7",
 		"next-transpile-modules": "^10.0.1",
-		"postcss": "^8.4.33",
-		"postcss-import": "^16.0.0",
-		"postcss-nesting": "^12.0.2",
-		"prettier": "^3.2.4",
-		"sass": "^1.70.0",
-		"sharp": "^0.33.2",
-		"stylelint": "^16.2.0",
-		"stylelint-config-standard": "^36.0.0",
+		"postcss": "^8.4.38",
+		"postcss-import": "^16.1.0",
+		"postcss-nesting": "^12.1.5",
+		"prettier": "^3.3.2",
+		"sass": "^1.77.6",
+		"sharp": "^0.33.4",
+		"stylelint": "^16.6.1",
+		"stylelint-config-standard": "^36.0.1",
 		"ts-loader": "^9.5.1",
-		"typescript": "^5.3.3"
+		"typescript": "^5.5.2"
 	}
 }