From a8e6963521c51778b3deee79e89a7a2917b22940 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Thu, 18 Jan 2024 10:41:19 +0100 Subject: [PATCH] feat(deposits): if wrong network dont show the form and prompt switching to the correct network (#5571) Co-authored-by: Matthew Russell --- libs/deposits/src/lib/deposit-form.spec.tsx | 80 +++++++++++---------- libs/deposits/src/lib/deposit-form.tsx | 61 ++++++++-------- libs/i18n/src/locales/en/deposits.json | 2 +- 3 files changed, 77 insertions(+), 66 deletions(-) diff --git a/libs/deposits/src/lib/deposit-form.spec.tsx b/libs/deposits/src/lib/deposit-form.spec.tsx index aa6fe1ba8..f23d67657 100644 --- a/libs/deposits/src/lib/deposit-form.spec.tsx +++ b/libs/deposits/src/lib/deposit-form.spec.tsx @@ -1,10 +1,4 @@ -import { - waitFor, - fireEvent, - render, - screen, - act, -} from '@testing-library/react'; +import { waitFor, fireEvent, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import BigNumber from 'bignumber.js'; import type { DepositFormProps } from './deposit-form'; @@ -89,7 +83,10 @@ describe('Deposit form', () => { render(); // Assert default values (including) from/to provided by useVegaWallet and useWeb3React - expect(screen.getByText('From (Ethereum address)')).toBeInTheDocument(); + // Wait for first value to show as form is rendered conditionally based on chainId + expect( + await screen.findByText('From (Ethereum address)') + ).toBeInTheDocument(); expect(screen.getByTestId('ethereum-address')).toHaveTextContent( truncateMiddle(MOCK_ETH_ADDRESS) ); @@ -319,34 +316,40 @@ describe('Deposit form', () => { it('shows "View asset details" button when an asset is selected', async () => { render(); - expect(await screen.getByTestId('view-asset-details')).toBeInTheDocument(); + expect(await screen.findByTestId('view-asset-details')).toBeInTheDocument(); }); it('does not shows "View asset details" button when no asset is selected', async () => { render(); - expect(await screen.queryAllByTestId('view-asset-details')).toHaveLength(0); + await waitFor(() => { + expect(screen.queryAllByTestId('view-asset-details')).toHaveLength(0); + }); }); - it('renders a connect button if Ethereum wallet is not connected', () => { + it('renders a connect button if Ethereum wallet is not connected', async () => { (useWeb3React as jest.Mock).mockReturnValue({ isActive: false, account: '', }); + render(); - expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument(); + expect( + await screen.findByRole('button', { name: 'Connect' }) + ).toBeInTheDocument(); expect( screen.queryByLabelText('From (Ethereum address)') ).not.toBeInTheDocument(); }); - it('renders a disabled input if Ethereum wallet is connected', () => { + it('renders a disabled input if Ethereum wallet is connected', async () => { (useWeb3React as jest.Mock).mockReturnValue({ isActive: true, account: MOCK_ETH_ADDRESS, }); render(); + expect(await screen.findByTestId('deposit-form')).toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Connect' }) ).not.toBeInTheDocument(); @@ -356,53 +359,56 @@ describe('Deposit form', () => { ); }); - it('prevents submission if you are on the wrong chain', () => { + it('prevents submission if you are on the wrong chain', async () => { + // Make mocks return a chain id mismatch (useWeb3React as jest.Mock).mockReturnValue({ isActive: true, account: MOCK_ETH_ADDRESS, chainId: 1, }); - (useWeb3ConnectStore as unknown as jest.Mock).mockImplementation( + (useWeb3ConnectStore as unknown as jest.Mock).mockImplementationOnce( // eslint-disable-next-line (selector: (result: ReturnType) => any) => { return selector({ desiredChainId: 11155111, open: jest.fn(), - foo: 'asdf', }); } ); render(); - expect(screen.getByTestId('chain-error')).toHaveTextContent( + + expect(await screen.findByTestId('chain-error')).toHaveTextContent( /this app only works on/i ); + + expect(screen.queryByTestId('deposit-form')).not.toBeInTheDocument(); }); it('Remaining deposit allowance tooltip should be rendered', async () => { render(); - await act(async () => { - await userEvent.hover(screen.getByText('Remaining deposit allowance')); - }); - await waitFor(async () => { - await expect( - screen.getByRole('tooltip', { - name: /VEGA has a lifetime deposit limit of 20 asset-symbol per address/, - }) - ).toBeInTheDocument(); - }); + + expect(await screen.findByTestId('deposit-form')).toBeInTheDocument(); + + await userEvent.hover(screen.getByText('Remaining deposit allowance')); + + expect( + await screen.findByRole('tooltip', { + name: /VEGA has a lifetime deposit limit of 20 asset-symbol per address/, + }) + ).toBeInTheDocument(); }); it('Ethereum deposit cap tooltip should be rendered', async () => { render(); - await act(async () => { - await userEvent.hover(screen.getByText('Ethereum deposit cap')); - }); - await waitFor(async () => { - await expect( - screen.getByRole('tooltip', { - name: /The deposit cap is set when you approve an asset for use with this app/, - }) - ).toBeInTheDocument(); - }); + + expect(await screen.findByTestId('deposit-form')).toBeInTheDocument(); + + await userEvent.hover(screen.getByText('Ethereum deposit cap')); + + expect( + await screen.findByRole('tooltip', { + name: /The deposit cap is set when you approve an asset for use with this app/, + }) + ).toBeInTheDocument(); }); }); diff --git a/libs/deposits/src/lib/deposit-form.tsx b/libs/deposits/src/lib/deposit-form.tsx index 7b9b4e9a1..d631e8c4f 100644 --- a/libs/deposits/src/lib/deposit-form.tsx +++ b/libs/deposits/src/lib/deposit-form.tsx @@ -92,7 +92,9 @@ export const DepositForm = ({ const maxSafe = useMaxSafe(); const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); const openDialog = useWeb3ConnectStore((store) => store.open); - const { isActive, account } = useWeb3React(); + const { isActive, account, chainId } = useWeb3React(); + const desiredChainId = useWeb3ConnectStore((store) => store.desiredChainId); + const invalidChain = isActive && chainId !== desiredChainId; const { pubKey, pubKeys: _pubKeys } = useVegaWallet(); const [approveNotificationIntent, setApproveNotificationIntent] = useState(Intent.Warning); @@ -152,7 +154,20 @@ export const DepositForm = ({ const approved = balances && balances.allowance.isGreaterThan(0) ? true : false; - return ( + return invalidChain ? ( +
+ +
+ ) : (
- + ); }; @@ -425,35 +444,21 @@ export const DepositForm = ({ interface FormButtonProps { approved: boolean; selectedAsset: AssetFieldsFragment | undefined; + isActive: boolean; } -const FormButton = ({ approved, selectedAsset }: FormButtonProps) => { +const FormButton = ({ approved, selectedAsset, isActive }: FormButtonProps) => { const t = useT(); - const { isActive, chainId } = useWeb3React(); - const desiredChainId = useWeb3ConnectStore((store) => store.desiredChainId); - const invalidChain = isActive && chainId !== desiredChainId; + return ( - <> - {invalidChain && ( -
- -
- )} - - {t('Deposit')} - - + + {t('Deposit')} + ); }; diff --git a/libs/i18n/src/locales/en/deposits.json b/libs/i18n/src/locales/en/deposits.json index 55ddaeba0..c1c5d6dc8 100644 --- a/libs/i18n/src/locales/en/deposits.json +++ b/libs/i18n/src/locales/en/deposits.json @@ -27,7 +27,7 @@ "The {{symbol}} faucet is not available at this time": "The {{symbol}} faucet is not available at this time", "The deposit cap is set when you approve an asset for use with this app. To increase this cap, approve {{assetSymbol}} again and choose a higher cap. Check the documentation for your Ethereum wallet app for details.": "The deposit cap is set when you approve an asset for use with this app. To increase this cap, approve {{assetSymbol}} again and choose a higher cap. Check the documentation for your Ethereum wallet app for details.", "The faucet transaction was rejected by the connected Ethereum wallet": "The faucet transaction was rejected by the connected Ethereum wallet", - "This app only works on {{chainId}}.": "This app only works on {{chainId}}.", + "This app only works on {{chainId}}. Switch your Ethereum wallet to the correct network.": "This app only works on {{chainId}}. Switch your Ethereum wallet to the correct network.", "To (Vega key)": "To (Vega key)", "To date, {{currentDeposit}} {{assetSymbol}} has been deposited from this Ethereum address, so you can deposit up to {{remainingDeposit}} {{assetSymbol}} more.": "To date, {{currentDeposit}} {{assetSymbol}} has been deposited from this Ethereum address, so you can deposit up to {{remainingDeposit}} {{assetSymbol}} more.", "Use maximum": "Use maximum",