From 2b643ced45855e6f6655ac7f0292c4a351632d2b Mon Sep 17 00:00:00 2001 From: Itzabelli <104786213+Itzabelli@users.noreply.github.com> Date: Thu, 27 Jul 2023 04:49:05 -0500 Subject: [PATCH] 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> --- components/VaultActions.tsx | 13 ++++++------- components/VaultDetails.tsx | 6 +++--- components/VaultStrategies.tsx | 8 ++++---- components/VaultWallet.tsx | 6 +++--- hook/useChain.ts | 29 ----------------------------- pages/index.tsx | 7 ++++--- 6 files changed, 20 insertions(+), 49 deletions(-) delete mode 100644 hook/useChain.ts diff --git a/components/VaultActions.tsx b/components/VaultActions.tsx index e4b2fb60..219418ea 100644 --- 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)[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 index 61bcaadc..c7555d74 100644 --- 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>(`/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 index faae4cbc..bee00ec0 100644 --- 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>({}); const [, set_nonce] = useState(0); diff --git a/components/VaultWallet.tsx b/components/VaultWallet.tsx index 80d86811..21811b41 100644 --- 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 (
diff --git a/hook/useChain.ts b/hook/useChain.ts deleted file mode 100644 index b7202480..00000000 --- a/hook/useChain.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {chains} from 'utils/chains'; -import {useChainID} from '@yearn-finance/web-lib/hooks/useChainID'; - -import type {TNDict} from '@yearn-finance/web-lib/types'; -import type {TChain} from '@yearn-finance/web-lib/utils/web3/chains'; - -type TUseChainReturn = { - get: (chainID: number) => TChain | null; - getCurrent: () => TChain | null; - getAll: () => TNDict; -} - -/* 🔵 - Yearn Finance ****************************************************** -** This hook can be used to grab details about a network. -** It will return details of the network. -**************************************************************************/ -export function useChain(): TUseChainReturn { - const {safeChainID} = useChainID(); - - return { - get: (chainID: number): TChain | null => { - return chains[chainID] ? chains[chainID] : null; - }, - getCurrent: (): TChain | null => { - return chains[safeChainID] ? chains[safeChainID] : null; - }, - getAll: (): TNDict => chains - }; -} diff --git a/pages/index.tsx b/pages/index.tsx index 114f265e..649dd376 100755 --- 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([]); @@ -223,7 +224,7 @@ function Index(): ReactElement {
- {`${chain.getCurrent()?.displayName || 'Chain'} TVL:`} + {`${chainName || 'Chain'} TVL:`} {` $${formatAmount(tvl?.tvl, 2)}`}