From bf9d457d0d26efba90b069a7b61582c2859c34c2 Mon Sep 17 00:00:00 2001 From: franm Date: Thu, 21 Mar 2024 15:46:28 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20network:=20auto=20switch=20network?= =?UTF-8?q?=20on=20CTA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ActiveStream/index.tsx | 41 +++------- components/Allowances/RevokeButton.tsx | 18 +---- components/GetEXA/SelectRoute.tsx | 42 ++++------- components/Leverager/Summary/index.tsx | 22 ++---- .../OperationsModal/ModalSubmit/index.tsx | 36 ++------- components/RewardsModal/index.tsx | 22 ++---- components/VestingInput/index.tsx | 28 ++----- components/Wallet/index.tsx | 23 +++--- components/common/MainActionButton/index.tsx | 65 ++++++++++++++++ .../TableRowFloatingPool/index.tsx | 4 +- components/governance/Claimable/index.tsx | 22 ++---- components/governance/Delegation/index.tsx | 29 +++---- .../markets/MarketsTables/poolTable/index.tsx | 9 +-- hooks/useEscrowedEXA.ts | 7 +- pages/vesting.tsx | 75 ++++++------------- 15 files changed, 169 insertions(+), 274 deletions(-) create mode 100644 components/common/MainActionButton/index.tsx diff --git a/components/ActiveStream/index.tsx b/components/ActiveStream/index.tsx index 4ffc05666..98350a781 100644 --- a/components/ActiveStream/index.tsx +++ b/components/ActiveStream/index.tsx @@ -21,18 +21,17 @@ import { import React, { FC, useCallback, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import waitForTransaction from 'utils/waitForTransaction'; -import { LoadingButton } from '@mui/lab'; import Image from 'next/image'; import formatNumber from 'utils/formatNumber'; import { toPercentage } from 'utils/utils'; import { useWeb3 } from 'hooks/useWeb3'; -import { useNetwork, useSwitchNetwork } from 'wagmi'; import { useEscrowedEXA, useEscrowedEXAReserves } from 'hooks/useEscrowedEXA'; import { useSablierV2LockupLinearWithdrawableAmountOf, useSablierV2NftDescriptorTokenUri } from 'hooks/useSablier'; import Draggable from 'react-draggable'; import CloseIcon from '@mui/icons-material/Close'; import { TransitionProps } from '@mui/material/transitions'; import { track } from 'utils/mixpanel'; +import MainActionButton from 'components/common/MainActionButton'; const StyledLinearProgress = styled(LinearProgress, { shouldForwardProp: (prop) => prop !== 'barColor', @@ -174,9 +173,7 @@ const WithdrawAndCancel: React.FC<{ loading: boolean; }> = ({ tokenId, open, onClose, cancel, loading }) => { const { spacing } = useTheme(); - const { chain } = useNetwork(); - const { impersonateActive, chain: displayNetwork } = useWeb3(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); + const { impersonateActive } = useWeb3(); const { t } = useTranslation(); const { breakpoints } = useTheme(); @@ -251,26 +248,17 @@ const WithdrawAndCancel: React.FC<{ - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - variant="contained" - loading={switchIsLoading} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : ( - {t('Withdraw and Cancel Stream')} - + )} @@ -299,9 +287,7 @@ const ActiveStream: FC = ({ refetch, }) => { const { t } = useTranslation(); - const { impersonateActive, chain: displayNetwork, opts } = useWeb3(); - const { chain } = useNetwork(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); + const { impersonateActive, opts } = useWeb3(); const { data: reserve, isLoading: reserveIsLoading } = useEscrowedEXAReserves(BigInt(tokenId)); const { data: withdrawable, isLoading: withdrawableIsLoading } = useSablierV2LockupLinearWithdrawableAmountOf( BigInt(tokenId), @@ -522,26 +508,17 @@ const ActiveStream: FC = ({ - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - variant="contained" - loading={switchIsLoading} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : ( <> - {t('Claim EXA')} - + )} diff --git a/components/Allowances/RevokeButton.tsx b/components/Allowances/RevokeButton.tsx index 56b25797f..dc2015df3 100644 --- a/components/Allowances/RevokeButton.tsx +++ b/components/Allowances/RevokeButton.tsx @@ -1,11 +1,10 @@ import React, { memo, useCallback, useState } from 'react'; -import { LoadingButton } from '@mui/lab'; -import { useNetwork, useSwitchNetwork } from 'wagmi'; import waitForTransaction from 'utils/waitForTransaction'; import { useTranslation } from 'react-i18next'; import { Allowance } from 'hooks/useAllowances'; import { useWeb3 } from 'hooks/useWeb3'; import useERC20 from 'hooks/useERC20'; +import MainActionButton from 'components/common/MainActionButton'; const RevokeButton = ({ token, @@ -18,10 +17,8 @@ const RevokeButton = ({ }) => { const [loading, setLoading] = useState(false); const erc20 = useERC20(token); - const { opts, chain } = useWeb3(); + const { opts } = useWeb3(); const { t } = useTranslation(); - const { chain: walletChain } = useNetwork(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); const handleClick = useCallback(async () => { if (!erc20 || !opts) return; @@ -37,17 +34,10 @@ const RevokeButton = ({ } }, [erc20, opts, spenderAddress, update]); - if (chain && chain.id !== walletChain?.id) { - return ( - switchNetwork?.(chain.id)} variant="contained" loading={switchIsLoading}> - {t('Please switch to {{network}} network', { network: chain.name })} - - ); - } return ( - + {t('Revoke')} - + ); }; diff --git a/components/GetEXA/SelectRoute.tsx b/components/GetEXA/SelectRoute.tsx index 4f66b9386..6eb1ae844 100644 --- a/components/GetEXA/SelectRoute.tsx +++ b/components/GetEXA/SelectRoute.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'; import ChainSelector from './ChainSelector'; import Image from 'next/image'; import { Screen, TXStep, useGetEXA } from 'contexts/GetEXAContext'; -import { useNetwork, useSwitchNetwork } from 'wagmi'; +import { useNetwork } from 'wagmi'; import { useWeb3 } from 'hooks/useWeb3'; import RouteStepsWrapper from './RouteSteps'; import Routes from './Routes'; @@ -15,9 +15,9 @@ import { optimism } from 'wagmi/chains'; import { useEXABalance, useEXAPrice } from 'hooks/useEXA'; import { formatEther, formatUnits } from 'viem'; import formatNumber from 'utils/formatNumber'; -import { LoadingButton } from '@mui/lab'; import { track } from 'utils/mixpanel'; import { AssetBalance } from 'types/Bridge'; +import MainActionButton from 'components/common/MainActionButton'; const SelectRoute = () => { const { @@ -46,7 +46,6 @@ const SelectRoute = () => { const nativeSwap = asset?.symbol === 'ETH' && chain?.chainId === optimism.id; const { data: exaBalance } = useEXABalance({ watch: true }); const insufficientBalance = Boolean(asset && qtyIn && Number(qtyIn) > asset.amount); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); const handleSubmit = useCallback( ({ currentTarget }: MouseEvent) => { @@ -89,14 +88,7 @@ const SelectRoute = () => { () => track('Input Unfocused', { location: 'Get EXA', name: 'amount in', value: qtyIn }), [qtyIn], ); - const handleSwitchNetworkClick = useCallback(() => { - switchNetwork?.(chain?.chainId); - track('Button Clicked', { - location: 'Get EXA', - name: 'switch network', - value: chain?.name, - }); - }, [chain?.chainId, chain?.name, switchNetwork]); + const handleConnectWallet = useCallback(() => { connect(); track('Button Clicked', { @@ -267,23 +259,17 @@ const SelectRoute = () => { {txError?.status && {txError.message}} {isConnected ? ( - walletChain?.id !== chain?.chainId ? ( - - {t('Please switch to {{network}} network', { network: chain?.name })} - - ) : ( - - {insufficientBalance - ? t('Insufficient {{symbol}} balance', { symbol: asset?.symbol }) - : `${t('Get')} ${qtyOut ? `${formatNumber(formatUnits(qtyOut, 18))} ` : ''}EXA`} - - ) + + {insufficientBalance + ? t('Insufficient {{symbol}} balance', { symbol: asset?.symbol }) + : `${t('Get')} ${qtyOut ? `${formatNumber(formatUnits(qtyOut, 18))} ` : ''}EXA`} + ) : ( - ) : chain?.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - variant="contained" - loading={switchIsLoading} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : ( - { : input.secondaryOperation === 'deposit' ? t('Confirm Leverage') : t('Confirm Deleverage')} - + )} diff --git a/components/OperationsModal/ModalSubmit/index.tsx b/components/OperationsModal/ModalSubmit/index.tsx index 29a41562a..4ddced088 100644 --- a/components/OperationsModal/ModalSubmit/index.tsx +++ b/components/OperationsModal/ModalSubmit/index.tsx @@ -3,12 +3,12 @@ import { LoadingButton } from '@mui/lab'; import { Button, CircularProgress, Typography } from '@mui/material'; import { Box } from '@mui/system'; import { useOperationContext } from 'contexts/OperationContext'; -import { useNetwork, useSwitchNetwork } from 'wagmi'; import { useWeb3 } from 'hooks/useWeb3'; import { useTranslation } from 'react-i18next'; import useTranslateOperation from 'hooks/useTranslateOperation'; import useAccountData from 'hooks/useAccountData'; import { track } from 'utils/mixpanel'; +import MainActionButton from 'components/common/MainActionButton'; type Props = { symbol: string; @@ -22,9 +22,7 @@ function ModalSubmit({ isLoading = false, disabled = false, submit, symbol, labe const { t } = useTranslation(); const translateOperation = useTranslateOperation(); const { operation, loadingButton, isLoading: isLoadingOp, tx, errorButton, requiresApproval } = useOperationContext(); - const { isConnected, chain: displayNetwork, connect, impersonateActive, exitImpersonate } = useWeb3(); - const { chain } = useNetwork(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); + const { isConnected, connect, impersonateActive, exitImpersonate } = useWeb3(); const { refreshAccountData } = useAccountData(); const handleSubmit = useCallback(async () => { @@ -50,16 +48,6 @@ function ModalSubmit({ isLoading = false, disabled = false, submit, symbol, labe connect(); }, [connect]); - const handleSwitchNetwork = useCallback(() => { - track('Button Clicked', { - location: 'Operations Modal', - name: 'switch network', - prevValue: chain?.name, - value: displayNetwork.name, - }); - switchNetwork?.(displayNetwork.id); - }, [chain?.name, displayNetwork.id, displayNetwork.name, switchNetwork]); - const handleApproveClick = useCallback( (event: MouseEvent) => { track('Button Clicked', { @@ -102,23 +90,9 @@ function ModalSubmit({ isLoading = false, disabled = false, submit, symbol, labe ); } - if (chain && chain.id !== displayNetwork.id) { - return ( - - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - - ); - } - if (requiresApproval) { return ( - } - onClick={handleApproveClick} + mainAction={handleApproveClick} color="primary" variant="contained" disabled={disabled} data-testid="modal-approve" > {t('Approve {{symbol}}', { symbol })} - + ); } diff --git a/components/RewardsModal/index.tsx b/components/RewardsModal/index.tsx index b72636e04..a5a1be625 100644 --- a/components/RewardsModal/index.tsx +++ b/components/RewardsModal/index.tsx @@ -34,12 +34,11 @@ import { Transaction } from 'types/Transaction'; import Loading from 'components/common/modal/Loading'; import useRewards from 'hooks/useRewards'; import WAD from '@exactly/lib/esm/fixed-point-math/WAD'; -import { LoadingButton } from '@mui/lab'; import { useWeb3 } from 'hooks/useWeb3'; -import { useNetwork, useSwitchNetwork } from 'wagmi'; import RewardsTooltip from 'components/RewardsTooltip'; import { useModal } from 'contexts/ModalContext'; import { track } from 'utils/mixpanel'; +import MainActionButton from 'components/common/MainActionButton'; function PaperComponent(props: PaperProps | undefined) { const ref = useRef(null); @@ -69,9 +68,7 @@ const RewardsModal: FC = ({ isOpen, close }) => { const { breakpoints } = useTheme(); const isMobile = useMediaQuery(breakpoints.down('sm')); - const { walletAddress, chain: displayNetwork, impersonateActive, exitImpersonate } = useWeb3(); - const { chain } = useNetwork(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); + const { walletAddress, impersonateActive, exitImpersonate } = useWeb3(); const { rewards: rs, claim } = useRewards(); @@ -292,26 +289,17 @@ const RewardsModal: FC = ({ isOpen, close }) => { - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - variant="contained" - loading={switchIsLoading} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : ( <> - {showInput ? `${t('Claim to')} ${differentAddress}` : t('Claim to connected wallet')} - + {t('or')}{' '} diff --git a/components/VestingInput/index.tsx b/components/VestingInput/index.tsx index da099329f..82806d251 100644 --- a/components/VestingInput/index.tsx +++ b/components/VestingInput/index.tsx @@ -28,9 +28,9 @@ import { ModalBox } from 'components/common/modal/ModalBox'; import ModalInput from 'components/OperationsModal/ModalInput'; import { useWeb3 } from 'hooks/useWeb3'; -import { useNetwork, useSignTypedData, useSwitchNetwork } from 'wagmi'; +import { useSignTypedData } from 'wagmi'; import { useTranslation, Trans } from 'react-i18next'; -import { LoadingButton } from '@mui/lab'; +import MainActionButton from 'components/common/MainActionButton'; import Image from 'next/image'; import { useEXA, useEXABalance, useEXAPrice } from 'hooks/useEXA'; import { @@ -146,7 +146,6 @@ type Props = { function VestingInput({ refetch }: Props) { const { t } = useTranslation(); - const { chain } = useNetwork(); const exa = useEXA(); const escrowedEXA = useEscrowedEXA(); const { data: balance, isLoading: balanceIsLoading } = useEscrowedEXABalance(); @@ -155,7 +154,6 @@ function VestingInput({ refetch }: Props) { const { data: vestingPeriod } = useEscrowedEXAVestingPeriod(); const EXAPrice = useEXAPrice(); const { impersonateActive, chain: displayNetwork, isConnected, opts, walletAddress } = useWeb3(); - const { isLoading: switchIsLoading, switchNetwork } = useSwitchNetwork(); const isContract = useIsContract(); const { signTypedDataAsync } = useSignTypedData(); const [isLoading, setIsLoading] = useState(false); @@ -465,28 +463,12 @@ function VestingInput({ refetch }: Props) { > {t('Exit Read-Only Mode')} - ) : displayNetwork.id !== chain?.id ? ( - { - switchNetwork?.(displayNetwork.id); - track('Button Clicked', { - location: 'Vesting', - name: 'switch network', - value: displayNetwork.name, - }); - }} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : ( - { + mainAction={() => { submit(); track('Button Clicked', { location: 'Vesting', @@ -499,7 +481,7 @@ function VestingInput({ refetch }: Props) { disabled={insufficientFunds} > {insufficientFunds && parseEther(qty) > 0n ? t('Insufficient esEXA balance') : t('Vest esEXA')} - + )} diff --git a/components/Wallet/index.tsx b/components/Wallet/index.tsx index 80e86cbca..cfc36aaa6 100644 --- a/components/Wallet/index.tsx +++ b/components/Wallet/index.tsx @@ -208,18 +208,17 @@ function Wallet() { {!impersonateActive && ( - - track('Button Clicked', { - href: '/revoke', - location: 'Wallet', - name: 'manage allowances', - }) - } - > - + + + track('Button Clicked', { + href: '/revoke', + location: 'Wallet', + name: 'manage allowances', + }) + } + > diff --git a/components/common/MainActionButton/index.tsx b/components/common/MainActionButton/index.tsx new file mode 100644 index 000000000..9699486ce --- /dev/null +++ b/components/common/MainActionButton/index.tsx @@ -0,0 +1,65 @@ +import React, { useCallback } from 'react'; +import { useNetwork, useSwitchNetwork } from 'wagmi'; +import { useTranslation } from 'react-i18next'; +import { LoadingButton, type LoadingButtonProps } from '@mui/lab'; +import { Button } from '@mui/material'; + +import { useWeb3 } from 'hooks/useWeb3'; +import { useModal } from 'contexts/ModalContext'; + +interface MainActionButtonProps extends LoadingButtonProps { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + mainAction?: (event?: any) => void; +} + +function MainActionButton({ mainAction, ...props }: MainActionButtonProps) { + const { t } = useTranslation(); + const { isConnected, chain: displayNetwork, connect, impersonateActive, exitImpersonate } = useWeb3(); + const { chain } = useNetwork(); + const { switchNetworkAsync, isLoading } = useSwitchNetwork(); + const { close } = useModal('rollover'); + + const exitAndClose = useCallback(() => { + exitImpersonate(); + close(); + }, [close, exitImpersonate]); + + const handleSwitchNetworkAndExecuteMainAction = useCallback( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + async (event?: any) => { + if (chain && chain.id !== displayNetwork.id && switchNetworkAsync) { + try { + const result = await switchNetworkAsync(displayNetwork.id); + if (result.id === displayNetwork.id) { + mainAction?.(event); + } + } catch (error) { + return; + } + } else { + mainAction?.(event); + } + }, + [chain, displayNetwork.id, switchNetworkAsync, mainAction], + ); + + if (impersonateActive) { + return ( + + ); + } + + if (!isConnected) { + return ( + + ); + } + + return ; +} + +export default React.memo(MainActionButton); diff --git a/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx b/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx index dbce96bd0..5109dc912 100644 --- a/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx +++ b/components/dashboard/DashboardContent/FloatingPoolDashboard/FloatingPoolDashboardTable/TableRowFloatingPool/index.tsx @@ -117,8 +117,8 @@ function TableRowFloatingPool({ symbol, valueUSD, depositedAmount, borrowedAmoun hover data-testid={`dashboard-floating-${type}-row-${symbol}`} > - - + + = ({ amount, proof }) => { const { t } = useTranslation(); - const { chain: displayNetwork, impersonateActive, exitImpersonate } = useWeb3(); + const { impersonateActive, exitImpersonate } = useWeb3(); const parsedAmount = useMemo(() => (amount ? formatNumber(formatEther(amount)) : '0'), [amount]); const { data: claimed, isLoading: isLoadingClaimed, refetch } = useAirdropClaimed(); - const { chain } = useNetwork(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); - return ( @@ -58,15 +55,6 @@ const Claimable: FC = ({ amount, proof }) => { - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - loading={switchIsLoading} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : claimed ? ( ) : ( @@ -97,15 +85,15 @@ const Claim: FC void }> = ({ amount, proof, re }, [amount, claim]); return ( - {t('Claim EXA Stream')} - + ); }; diff --git a/components/governance/Delegation/index.tsx b/components/governance/Delegation/index.tsx index 7b1253d4e..bc78fa01e 100644 --- a/components/governance/Delegation/index.tsx +++ b/components/governance/Delegation/index.tsx @@ -21,19 +21,20 @@ import { isAddress, zeroAddress } from 'viem'; import { formatWallet } from 'utils/utils'; import { useWeb3 } from 'hooks/useWeb3'; import { useDelegateRegistryClearDelegate, useDelegateRegistrySetDelegate } from 'types/abi'; -import { mainnet, useEnsAvatar, useEnsName, useNetwork, useSwitchNetwork } from 'wagmi'; +import { mainnet, useEnsAvatar, useEnsName } from 'wagmi'; import useWaitForTransaction from 'hooks/useWaitForTransaction'; import * as blockies from 'blockies-ts'; import { useDelegation, usePrepareClearDelegate, usePrepareDelegate } from 'hooks/useDelegateRegistry'; import formatNumber from 'utils/formatNumber'; import useGovernance from 'hooks/useGovernance'; import { track } from 'utils/mixpanel'; +import MainActionButton from 'components/common/MainActionButton'; const Delegation = () => { const { votingPower: yourVotes } = useGovernance(false); const { votingPower, fetchVotingPower } = useGovernance(); const { t } = useTranslation(); - const { chain: displayNetwork, walletAddress, impersonateActive, exitImpersonate } = useWeb3(); + const { walletAddress, impersonateActive, exitImpersonate } = useWeb3(); const [open, setOpen] = useState(false); const [input, setInput] = useState(''); const { data: delegate, isLoading: isLoadingDelegate, refetch: refetchDelegate } = useDelegation(); @@ -69,9 +70,6 @@ const Delegation = () => { chainId: mainnet.id, }); - const { chain } = useNetwork(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); - const delegateAvatar = useMemo(() => { if (!delegate) return ''; if (delegateENSAvatar && !ensAvatarError) return delegateENSAvatar; @@ -173,34 +171,25 @@ const Delegation = () => { - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - loading={switchIsLoading} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : ( - {t('Delegate votes')} - + {delegate !== zeroAddress && ( - {t('Revoke delegation')} - + )} )} diff --git a/components/markets/MarketsTables/poolTable/index.tsx b/components/markets/MarketsTables/poolTable/index.tsx index d8bdb239e..5be9472da 100644 --- a/components/markets/MarketsTables/poolTable/index.tsx +++ b/components/markets/MarketsTables/poolTable/index.tsx @@ -129,13 +129,7 @@ const PoolTable: FC = ({ isLoading, headers, rows }) => { depositedAssets, borrowedAssets, }) => ( - trackRowClick(symbol)} - > + = ({ isLoading, headers, rows }) => { cursor: 'pointer', }} hover + onClick={() => trackRowClick(symbol)} data-testid={`markets-pool-row-${symbol}`} > diff --git a/hooks/useEscrowedEXA.ts b/hooks/useEscrowedEXA.ts index ed796defc..4fa4f250e 100644 --- a/hooks/useEscrowedEXA.ts +++ b/hooks/useEscrowedEXA.ts @@ -126,7 +126,8 @@ export const useEscrowedEXAVestingPeriod = () => { }); }; -export function useEscrowEXATotals(streams: number[]) { +export const useEscrowEXATotals = (streams: number[]) => { + const { chain } = useWeb3(); const sablier = useSablierV2LockupLinear(); const esEXA = useEscrowedEXA(); @@ -138,6 +139,7 @@ export function useEscrowEXATotals(streams: number[]) { address: esEXA && getAddress(esEXA.address), functionName: 'reserves', args: [BigInt(stream)], + chainId: chain.id, })), }); @@ -149,6 +151,7 @@ export function useEscrowEXATotals(streams: number[]) { address: sablier && getAddress(sablier.address), functionName: 'withdrawableAmountOf', args: [BigInt(stream)], + chainId: chain.id, })), }); @@ -163,4 +166,4 @@ export function useEscrowEXATotals(streams: number[]) { const totalWithdrawable = useMemo(() => sum(withdrawables), [withdrawables, sum]); return { totalReserve, reserveIsLoading, totalWithdrawable, withdrawableIsLoading }; -} +}; diff --git a/pages/vesting.tsx b/pages/vesting.tsx index 9b52409e7..30686c636 100644 --- a/pages/vesting.tsx +++ b/pages/vesting.tsx @@ -20,8 +20,7 @@ import { useMediaQuery, useTheme, } from '@mui/material'; -import { LoadingButton } from '@mui/lab'; -import { useNetwork, useSwitchNetwork } from 'wagmi'; +import { useSwitchNetwork } from 'wagmi'; import { useModal } from 'contexts/ModalContext'; import VestingInput from 'components/VestingInput'; import ActiveStream from 'components/ActiveStream'; @@ -42,6 +41,7 @@ import Image from 'next/image'; import Draggable from 'react-draggable'; import { TransitionProps } from '@mui/material/transitions'; import WAD from '@exactly/lib/esm/fixed-point-math/WAD'; +import MainActionButton from 'components/common/MainActionButton'; function PaperComponent(props: PaperProps | undefined) { const ref = useRef(null); @@ -70,10 +70,8 @@ const WithdrawAndCancel: React.FC<{ const { spacing } = useTheme(); const { breakpoints } = useTheme(); const { t } = useTranslation(); - const { impersonateActive, chain: displayNetwork } = useWeb3(); + const { impersonateActive } = useWeb3(); const isMobile = useMediaQuery(breakpoints.down('sm')); - const { chain } = useNetwork(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); const handleClose = useCallback(() => { onClose(); @@ -142,19 +140,10 @@ const WithdrawAndCancel: React.FC<{ - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - variant="contained" - loading={switchIsLoading} - > - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - ) : ( - + {t('Withdraw and Cancel Stream')} - + )} @@ -165,10 +154,9 @@ const WithdrawAndCancel: React.FC<{ const Vesting: NextPage = () => { const { t } = useTranslation(); - const { impersonateActive, chain: displayNetwork, opts } = useWeb3(); - const { chain } = useNetwork(); + const { impersonateActive, opts } = useWeb3(); const { activeStreams, loading: streamsLoading, refetch } = useUpdateStreams(); - const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork(); + const { isLoading: switchIsLoading } = useSwitchNetwork(); const { data: reserveRatio } = useEscrowedEXAReserveRatio(); const { totalReserve, reserveIsLoading, totalWithdrawable, withdrawableIsLoading } = useEscrowEXATotals( activeStreams.map(({ tokenId }) => Number(tokenId)), @@ -397,7 +385,7 @@ const Vesting: NextPage = () => { - {streamsLoading && } + {/* {streamsLoading && } */} {activeStreams.length > 0 && ( { - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} - variant="contained" + ) : ( + - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - - ) : ( - <> - - {t('Withdraw All')} - - + {t('Withdraw All')} + )} { - ) : chain && chain.id !== displayNetwork.id ? ( - switchNetwork?.(displayNetwork.id)} + ) : ( + - {t('Please switch to {{network}} network', { network: displayNetwork.name })} - - ) : ( - <> - - {t('Claim All')} - - + {t('Claim All')} + )}