chore: Add the 'useNetwork' hook of wagmi (#224)

* chore: Add the 'useNetwork' hook of wagmi * refactor: Add semicolons, remove unnecessary spaces Feel like lint rules might not be being properly enforced...made note to check --------- Co-authored-by: 0xMirim <95051992+0xMirim@users.noreply.github.com>
yearn · Jul 27, 2023 · 2b643ce · 2b643ce
1 parent 8be5f19
commit 2b643ce
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 49 deletions.
diff --git a/components/VaultActions.tsx b/components/VaultActions.tsx
@@ -1,5 +1,4 @@
 import {Fragment, useCallback, useState} from 'react';
-import {useChain} from 'hook/useChain';
 import {apeInVault, apeOutVault, approveERC20, depositERC20, withdrawWithPermitERC20} from 'utils/actions';
 import {erc20ABI, fetchBalance, multicall, readContract} from '@wagmi/core';
 import {Button} from '@yearn-finance/web-lib/components/Button';
@@ -18,7 +17,7 @@ import type {TVault, TVaultData} from 'utils/types';
 import type {TNDict} from '@yearn-finance/web-lib/types';
 import type {TransactionReceipt} from '@ethersproject/providers';
 import YVAULT_V3_BASE_ABI from 'utils/ABI/yVaultV3Base.abi';
-import {useNetwork } from 'wagmi';
+import {useNetwork} from 'wagmi';
 import { ethers } from 'ethers';
 import { defaultTxStatus } from '@yearn-finance/web-lib/utils/web3/transaction';
 
@@ -34,8 +33,8 @@ type TVaultActionInner = {
 
 function	VaultActionZaps({vault, vaultData, onUpdateVaultData, onProceed}: TVaultActionInner): ReactElement {
 	const	{provider, address} = useWeb3();
-	const chain = useChain();
-	const	chainCoin = chain.getCurrent()?.coin || 'ETH';
+	const	{chain} = useNetwork();
+	const	chainCoin = chain?.nativeCurrency.symbol || 'ETH';
 
 	/**************************************************************************
 	** State management for our actions
@@ -170,8 +169,8 @@ function	VaultActionApeIn({vault, vaultData, onUpdateVaultData, onProceed}: TVau
 	**************************************************************************/
 	const	yearnRouterForChain = (process?.env?.YEARN_ROUTER as TNDict<string>)[vault.CHAIN_ID];
 	const	vaultSpender = vault.VAULT_ABI === 'v3' ? yearnRouterForChain : vault.VAULT_ADDR;
-	const chain = useChain();
-	const	chainCoin = chain.getCurrent()?.coin || 'ETH';
+	const	{chain} = useNetwork();
+	const	chainCoin = chain?.nativeCurrency.symbol || 'ETH';
 
 	/**************************************************************************
 	** State management for our actions
@@ -452,7 +451,7 @@ type TVaultAction = {
 function	VaultAction({vault, vaultData, onUpdateVaultData}: TVaultAction): ReactElement {
 	const	{provider, address} = useWeb3();
 	const {chain} = useNetwork();
-	const chainId = chain?.id
+	const chainId = chain?.id;
 
 	/**************************************************************************
 	** fetchPostDepositOrWithdraw will

diff --git a/components/VaultDetails.tsx b/components/VaultDetails.tsx
@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
+import {useNetwork} from 'wagmi';
 import ProgressChart from 'components/ProgressChart';
 import Suspense from 'components/Suspense';
-import {useChain} from 'hook/useChain';
 import useSWR from 'swr';
 import {baseFetcher} from '@yearn-finance/web-lib/utils/fetchers';
 import {formatAmount} from '@yearn-finance/web-lib/utils/format.number';
@@ -11,8 +11,8 @@ import type {ReactElement} from 'react';
 import type {Maybe, TSpecificAPIResult, TVault, TVaultData} from 'utils/types';
 
 function	VaultDetails({vault, vaultData}: {vault: TVault, vaultData: TVaultData}): ReactElement {
-	const chain = useChain();
-	const	chainExplorer = chain.getCurrent()?.block_explorer || 'https://etherscan.io';
+	const	{chain} = useNetwork();
+	const	chainExplorer = chain?.blockExplorers?.default?.url || 'https://etherscan.io';
 
 	const	{data: vaultAPYSWR, isLoading} = useSWR<Maybe<TSpecificAPIResult>>(`/api/specificApy?address=${vault?.VAULT_ADDR}&network=${vault?.CHAIN_ID}`, baseFetcher, {revalidateOnMount: true, revalidateOnReconnect: true, shouldRetryOnError: true});
 

diff --git a/components/VaultStrategies.tsx b/components/VaultStrategies.tsx
@@ -1,5 +1,5 @@
 import {Fragment, useCallback, useEffect, useState} from 'react';
-import {useChain} from 'hook/useChain';
+import {useNetwork} from 'wagmi';
 import {harvestStrategy} from 'utils/actions';
 import {parseMarkdown, performGet} from 'utils/utils';
 import {erc20ABI, multicall, readContract} from '@wagmi/core';
@@ -20,9 +20,9 @@ type TStrategies = {
 	onUpdateVaultData: (fn: (v: TVaultData) => TVaultData) => void
 }
 function	Strategies({vault, onUpdateVaultData}: TStrategies): ReactElement {
-	const chain = useChain();
-	const {safeChainID} = useChainID();
-	const	chainExplorer = chain.getCurrent()?.block_explorer || 'https://etherscan.io';
+	const	{chain} = useNetwork();
+	const	{safeChainID} = useChainID();
+	const	chainExplorer = chain?.blockExplorers?.default?.url || 'https://etherscan.io';
 	const	{provider, isActive, address} = useWeb3();
 	const	[strategiesData, set_strategiesData] = useState<TDict<TStrategyData>>({});
 	const	[, set_nonce] = useState(0);

diff --git a/components/VaultWallet.tsx b/components/VaultWallet.tsx
@@ -1,4 +1,4 @@
-import {useChain} from 'hook/useChain';
+import {useNetwork} from 'wagmi';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 import {toAddress, truncateHex} from '@yearn-finance/web-lib/utils/address';
 import {formatAmount} from '@yearn-finance/web-lib/utils/format.number';
@@ -8,8 +8,8 @@ import type {TVault, TVaultData} from 'utils/types';
 
 function	VaultWallet({vault, vaultData}: {vault: TVault, vaultData: TVaultData}): ReactElement {
 	const	{address, ens} = useWeb3();
-	const chain = useChain();
-	const	chainCoin = chain.getCurrent()?.coin || 'ETH';
+	const	{chain} = useNetwork();
+	const	chainCoin = chain?.nativeCurrency.symbol || 'ETH';
 
 	return (
 		<section aria-label={'WALLET'} className={'mt-8'}>

diff --git a/hook/useChain.ts b/hook/useChain.ts
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,7 +2,7 @@ import {Fragment, useCallback, useEffect, useState} from 'react';
 import Link from 'next/link';
 import {useFactory} from 'contexts/useFactory';
 import GraphemeSplitter from 'grapheme-splitter';
-import {useChain} from 'hook/useChain';
+import {useNetwork} from 'wagmi';
 import vaults from 'utils/vaults.json';
 import useSWR from 'swr';
 import {erc20ABI, multicall} from '@wagmi/core';
@@ -107,7 +107,8 @@ function	DisabledVaults({vaultsInactive}: {vaultsInactive: TVault[]}): ReactElem
 function	Index(): ReactElement {
 	const	{isActive, address} = useWeb3();
 	const	{safeChainID} = useChainID();
-	const chain = useChain();
+	const	{chain} = useNetwork();
+	const	chainName = chain?.name || 'Chain';
 	const	{communityVaults} = useFactory();
 	const	[, set_nonce] = useState(0);
 	const	[vaultsActiveExperimental, set_vaultsActiveExperimental] = useState<TVault[]>([]);
@@ -223,7 +224,7 @@ function	Index(): ReactElement {
 				<div>
 					<div>
 						<span className={'font-mono text-base font-semibold text-neutral-900'}>
-							{`${chain.getCurrent()?.displayName || 'Chain'} TVL:`}
+							{`${chainName || 'Chain'} TVL:`}
 						</span>
 						<span className={'font-mono text-base font-normal text-neutral-700'}>
 							{` $${formatAmount(tvl?.tvl, 2)}`}