Skip to content

Commit

Permalink
✨ network: auto switch network on CTA
Browse files Browse the repository at this point in the history
  • Loading branch information
@franm91
franm91 committed Mar 21, 2024
1 parent cc5289e commit bf9d457
Show file tree
Hide file tree
Showing 15 changed files with 169 additions and 274 deletions.
41 changes: 9 additions & 32 deletions components/ActiveStream/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -251,26 +248,17 @@ const WithdrawAndCancel: React.FC<{
<Button fullWidth variant="contained">
{t('Exit Read-Only Mode')}
</Button>
) : chain && chain.id !== displayNetwork.id ? (
<LoadingButton
fullWidth
onClick={() => switchNetwork?.(displayNetwork.id)}
variant="contained"
loading={switchIsLoading}
>
{t('Please switch to {{network}} network', { network: displayNetwork.name })}
</LoadingButton>
) : (
<LoadingButton
<MainActionButton
fullWidth
variant="contained"
color="error"
onClick={cancel}
mainAction={cancel}
loading={loading}
data-testid={`vesting-stream-${tokenId}-cancel-submit`}
>
{t('Withdraw and Cancel Stream')}
</LoadingButton>
</MainActionButton>
)}
</Box>
</DialogContent>
Expand Down Expand Up @@ -299,9 +287,7 @@ const ActiveStream: FC<ActiveStreamProps> = ({
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),
Expand Down Expand Up @@ -522,26 +508,17 @@ const ActiveStream: FC<ActiveStreamProps> = ({
<Button fullWidth variant="contained">
{t('Exit Read-Only Mode')}
</Button>
) : chain && chain.id !== displayNetwork.id ? (
<LoadingButton
fullWidth
onClick={() => switchNetwork?.(displayNetwork.id)}
variant="contained"
loading={switchIsLoading}
>
{t('Please switch to {{network}} network', { network: displayNetwork.name })}
</LoadingButton>
) : (
<>
<LoadingButton
<MainActionButton
fullWidth
variant="contained"
onClick={handleWithdrawClick}
mainAction={handleWithdrawClick}
loading={loading}
data-testid={`vesting-stream-${tokenId}-claim`}
>
{t('Claim EXA')}
</LoadingButton>
</MainActionButton>
</>
)}
</Box>
Expand Down
18 changes: 4 additions & 14 deletions components/Allowances/RevokeButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand All @@ -37,17 +34,10 @@ const RevokeButton = ({
}
}, [erc20, opts, spenderAddress, update]);

if (chain && chain.id !== walletChain?.id) {
return (
<LoadingButton fullWidth onClick={() => switchNetwork?.(chain.id)} variant="contained" loading={switchIsLoading}>
{t('Please switch to {{network}} network', { network: chain.name })}
</LoadingButton>
);
}
return (
<LoadingButton variant="contained" loading={loading} fullWidth={fullWidth} onClick={handleClick}>
<MainActionButton variant="contained" loading={loading} fullWidth={fullWidth} mainAction={handleClick}>
{t('Revoke')}
</LoadingButton>
</MainActionButton>
);
};

Expand Down
42 changes: 14 additions & 28 deletions components/GetEXA/SelectRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand Down Expand Up @@ -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<HTMLButtonElement>) => {
Expand Down Expand Up @@ -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', {
Expand Down Expand Up @@ -267,23 +259,17 @@ const SelectRoute = () => {
{txError?.status && <Alert severity="error">{txError.message}</Alert>}

{isConnected ? (
walletChain?.id !== chain?.chainId ? (
<LoadingButton fullWidth onClick={handleSwitchNetworkClick} variant="contained" loading={switchIsLoading}>
{t('Please switch to {{network}} network', { network: chain?.name })}
</LoadingButton>
) : (
<LoadingButton
disabled={(!route && !nativeSwap) || insufficientBalance}
variant="contained"
onClick={handleSubmit}
loading={txStep === TXStep.CONFIRM_PENDING}
data-testid={nativeSwap ? 'get-exa-submit' : 'get-exa-review'}
>
{insufficientBalance
? t('Insufficient {{symbol}} balance', { symbol: asset?.symbol })
: `${t('Get')} ${qtyOut ? `${formatNumber(formatUnits(qtyOut, 18))} ` : ''}EXA`}
</LoadingButton>
)
<MainActionButton
disabled={(!route && !nativeSwap) || insufficientBalance}
variant="contained"
mainAction={handleSubmit}
loading={txStep === TXStep.CONFIRM_PENDING}
data-testid={nativeSwap ? 'get-exa-submit' : 'get-exa-review'}
>
{insufficientBalance
? t('Insufficient {{symbol}} balance', { symbol: asset?.symbol })
: `${t('Get')} ${qtyOut ? `${formatNumber(formatUnits(qtyOut, 18))} ` : ''}EXA`}
</MainActionButton>
) : (
<Button fullWidth onClick={handleConnectWallet} variant="contained">
{t('Connect wallet')}
Expand Down
22 changes: 5 additions & 17 deletions components/Leverager/Summary/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Box, Button, Checkbox, Divider, Grid, Skeleton, Typography } from '@mui/material';
import { LoadingButton } from '@mui/lab';
import { useNetwork, useSwitchNetwork } from 'wagmi';
import { ModalBox } from 'components/common/modal/ModalBox';
import ModalAlert from 'components/common/modal/ModalAlert';
import LoadingTransaction from 'components/common/modal/Loading';
Expand All @@ -17,12 +15,11 @@ import formatNumber from 'utils/formatNumber';
import useAccountData from 'hooks/useAccountData';
import { useWeb3 } from 'hooks/useWeb3';
import { useModal } from 'contexts/ModalContext';
import MainActionButton from 'components/common/MainActionButton';

const Summary = () => {
const { t } = useTranslation();
const { chain: displayNetwork, impersonateActive, exitImpersonate } = useWeb3();
const { chain } = useNetwork();
const { switchNetwork, isLoading: switchIsLoading } = useSwitchNetwork();
const { impersonateActive, exitImpersonate } = useWeb3();

const {
input,
Expand Down Expand Up @@ -246,19 +243,10 @@ const Summary = () => {
<Button fullWidth onClick={exitAndClose} variant="contained">
{t('Exit Read-Only Mode')}
</Button>
) : chain?.id !== displayNetwork.id ? (
<LoadingButton
fullWidth
onClick={() => switchNetwork?.(displayNetwork.id)}
variant="contained"
loading={switchIsLoading}
>
{t('Please switch to {{network}} network', { network: displayNetwork.name })}
</LoadingButton>
) : (
<LoadingButton
<MainActionButton
loading={isLoading || summaryLoading}
onClick={requiresApproval ? approveLeverage : submit}
mainAction={requiresApproval ? approveLeverage : submit}
fullWidth
variant="contained"
disabled={disabledConfirm || summaryLoading}
Expand All @@ -269,7 +257,7 @@ const Summary = () => {
: input.secondaryOperation === 'deposit'
? t('Confirm Leverage')
: t('Confirm Deleverage')}
</LoadingButton>
</MainActionButton>
)}
</Grid>
</Grid>
Expand Down
36 changes: 5 additions & 31 deletions components/OperationsModal/ModalSubmit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 () => {
Expand All @@ -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<HTMLButtonElement>) => {
track('Button Clicked', {
Expand Down Expand Up @@ -102,23 +90,9 @@ function ModalSubmit({ isLoading = false, disabled = false, submit, symbol, labe
);
}

if (chain && chain.id !== displayNetwork.id) {
return (
<LoadingButton
fullWidth
onClick={handleSwitchNetwork}
variant="contained"
loading={switchIsLoading}
data-testid="modal-switch-network"
>
{t('Please switch to {{network}} network', { network: displayNetwork.name })}
</LoadingButton>
);
}

if (requiresApproval) {
return (
<LoadingButton
<MainActionButton
fullWidth
loading={isLoading}
loadingIndicator={
Expand All @@ -127,14 +101,14 @@ function ModalSubmit({ isLoading = false, disabled = false, submit, symbol, labe
label={loadingButton.label}
/>
}
onClick={handleApproveClick}
mainAction={handleApproveClick}
color="primary"
variant="contained"
disabled={disabled}
data-testid="modal-approve"
>
{t('Approve {{symbol}}', { symbol })}
</LoadingButton>
</MainActionButton>
);
}

Expand Down
Loading

0 comments on commit bf9d457

Please sign in to comment.