fix(#441): withdraw fixes

* chore: make sure etherscan links open in new tab

* fix: format withdrawal amount correctly in table

* fix: switch to use next Link element so page state not lost

* fix: calc deposit max validation using ethereum storage at

* fix: remaining amount in deposits and refetch allowance

* fix: page background in dark mode

* chore: disable autocomplete for ethaddress

* fix: bump ag grid row size so underline is shown on FF

* fix: expect correctly formatted withdrawal amount

* fix: missing react keys in maps

* fix: complete button text in test

* fix: use sentry/react, fix webpack config path

apps/token/project.json

@@ -18,7 +18,7 @@
         "assets": ["apps/token/src/favicon.ico", "apps/token/src/assets"],
         "styles": ["apps/token/src/styles.css"],
         "scripts": [],
-        "webpackConfig": "apps/explorer/webpack.config.js"
+        "webpackConfig": "apps/token/webpack.config.js"
       },
       "configurations": {
         "production": {

apps/token/src/components/eth-wallet/eth-wallet.tsx

@@ -81,9 +81,9 @@ const AssociatedAmounts = ({
             bold={true}
             dark={true}
           />
-          {vestingAssociationByVegaKey.map(([key, amount]) => {
+          {vestingAssociationByVegaKey.map(([key, amount], i) => {
             return (
-              <div data-testid="eth-wallet-associated-balances">
+              <div data-testid="eth-wallet-associated-balances" key={i}>
                 <WalletCardRow
                   key={key}
                   label={removeLeadingAddressSymbol(key)}

apps/trading-e2e/src/integration/withdrawals.cy.ts

@@ -38,7 +38,7 @@ describe('withdrawals', () => {
     cy.get(row)
       .eq(0)
       .find('[col-id="amount"]')
-      .should('contain.text', '100.00000');
+      .should('contain.text', '0.00100');
     cy.get(row)
       .eq(0)
       .find('[col-id="details.receiverAddress"]')
@@ -55,7 +55,7 @@ describe('withdrawals', () => {
       .find('[col-id="status"]')
       .should('contain.text', 'Open')
       .find('button')
-      .contains('Complete');
+      .contains('Click to complete');
 
     // Second row is complete so last cell should have a link to the tx
     cy.get(row)

apps/trading/pages/_app.page.tsx

@@ -44,7 +44,7 @@ function AppBody({ Component, pageProps }: AppProps) {
               <ThemeSwitcher onToggle={toggleTheme} className="-my-4" />
             </div>
           </div>
-          <main data-testid={pageProps.page}>
+          <main data-testid={pageProps.page} className="dark:bg-black">
             {/* @ts-ignore conflict between @types/react and nextjs internal types */}
             <Component {...pageProps} />
           </main>

apps/trading/pages/portfolio/deposits-container.tsx

@@ -1,14 +1,15 @@
 import { t } from '@vegaprotocol/react-helpers';
-import { AnchorButton } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
+import Link from 'next/link';
 
 export const DepositsContainer = () => {
   return (
     <div className="grid grid-cols-[1fr_min-content] gap-12 h-full">
       <div />
       <div className="p-12">
-        <AnchorButton data-testid="deposit" href="/portfolio/deposit">
+        <Link href="/portfolio/deposit" passHref={true}>
-          {t('Deposit')}
+          <Button data-testid="deposit">{t('Deposit')}</Button>
-        </AnchorButton>
+        </Link>
       </div>
     </div>
   );

libs/deposits/src/lib/deposit-form.spec.tsx

@@ -38,6 +38,7 @@ beforeEach(() => {
     requestFaucet: jest.fn(),
     limits: {
       max: new BigNumber(20),
+      deposited: new BigNumber(10),
     },
     allowance: new BigNumber(30),
     isFaucetable: true,
@@ -88,7 +89,7 @@ it('Form validation', async () => {
   expect(await screen.findByText('Invalid Vega key')).toBeInTheDocument();
 
   // Max amount validation
-  const amountMoreThanAvailable = '11';
+  const amountMoreThanAvailable = '7'; // but also less than lifetime limit available
   fireEvent.change(screen.getByLabelText('Amount'), {
     target: { value: amountMoreThanAvailable },
   });
@@ -96,7 +97,7 @@ it('Form validation', async () => {
     await screen.findByText('Insufficient amount in Ethereum wallet')
   ).toBeInTheDocument();
 
-  const amountMoreThanLimit = '21';
+  const amountMoreThanLimit = '11';
   fireEvent.change(screen.getByLabelText('Amount'), {
     target: { value: amountMoreThanLimit },
   });
@@ -104,7 +105,12 @@ it('Form validation', async () => {
     await screen.findByText('Amount is above permitted maximum')
   ).toBeInTheDocument();
 
-  rerender(<DepositForm {...props} limits={{ max: new BigNumber(100) }} />);
+  rerender(
+    <DepositForm
+      {...props}
+      limits={{ max: new BigNumber(100), deposited: new BigNumber(10) }}
+    />
+  );
 
   const amountMoreThanAllowance = '31';
   fireEvent.change(screen.getByLabelText('Amount'), {
@@ -165,8 +171,8 @@ it('Deposit', async () => {
   mockUseWeb3React.mockReturnValue({ account });
 
   const limits = {
-    min: new BigNumber(10),
     max: new BigNumber(20),
+    deposited: new BigNumber(10),
   };
 
   render(
@@ -181,11 +187,15 @@ it('Deposit', async () => {
 
   // Check deposit limit is displayed
   expect(
-    screen.getByText('Maximum', { selector: 'th' }).nextElementSibling
+    screen.getByText('Max deposit total', { selector: 'th' }).nextElementSibling
   ).toHaveTextContent(limits.max.toString());
+  expect(
+    screen.getByText('Remaining available', { selector: 'th' })
+      .nextElementSibling
+  ).toHaveTextContent(limits.max.minus(limits.deposited).toString());
 
   fireEvent.change(screen.getByLabelText('Amount'), {
-    target: { value: '15' },
+    target: { value: '8' },
   });
 
   await act(async () => {
@@ -197,7 +207,7 @@ it('Deposit', async () => {
   expect(props.submitDeposit).toHaveBeenCalledWith({
     // @ts-ignore contract address definitely defined
     assetSource: asset.source.contractAddress,
-    amount: '1500',
+    amount: '800',
     vegaPublicKey: vegaKey,
   });
 });

libs/deposits/src/lib/deposit-form.tsx

@@ -47,6 +47,7 @@ export interface DepositFormProps {
   requestFaucet: () => Promise<void>;
   limits: {
     max: BigNumber;
+    deposited: BigNumber;
   } | null;
   allowance: BigNumber | undefined;
   isFaucetable?: boolean;
@@ -97,12 +98,16 @@ export const DepositForm = ({
   const amount = useWatch({ name: 'amount', control });
 
   const max = useMemo(() => {
-    const maxApproved = allowance ? allowance : new BigNumber(Infinity);
+    const maxApproved = allowance ? allowance : new BigNumber(0);
-    const maxAvailable = available ? available : new BigNumber(Infinity);
+    const maxAvailable = available ? available : new BigNumber(0);
-    // A max limit of zero indicates that there is no limit
+
+    // limits.max is a lifetime deposit limit, so the actual max value for form
+    // input is the max minus whats already been deposited
     let maxLimit = new BigNumber(Infinity);
+
+    // A max limit of zero indicates that there is no limit
     if (limits && limits.max.isGreaterThan(0)) {
-      maxLimit = limits.max;
+      maxLimit = limits.max.minus(limits.deposited);
     }
 
     return {

libs/deposits/src/lib/deposit-limits.tsx

@@ -4,6 +4,7 @@ import type BigNumber from 'bignumber.js';
 interface DepositLimitsProps {
   limits: {
     max: BigNumber;
+    deposited: BigNumber;
   };
 }
 
@@ -24,9 +25,21 @@ export const DepositLimits = ({ limits }: DepositLimitsProps) => {
       <table className="w-full text-ui">
         <tbody>
           <tr>
-            <th className="text-left font-normal">{t('Maximum')}</th>
+            <th className="text-left font-normal">{t('Max deposit total')}</th>
             <td className="text-right">{maxLimit}</td>
           </tr>
+          <tr>
+            <th className="text-left font-normal">{t('Deposited')}</th>
+            <td className="text-right">{limits.deposited.toString()}</td>
+          </tr>
+          <tr>
+            <th className="text-left font-normal">
+              {t('Remaining available')}
+            </th>
+            <td className="text-right">
+              {limits.max.minus(limits.deposited).toString()}
+            </td>
+          </tr>
         </tbody>
       </table>
     </>

libs/deposits/src/lib/deposit-manager.tsx

@@ -11,7 +11,6 @@ import {
   EthTxStatus,
   TransactionDialog,
   useEthereumConfig,
-  useTokenDecimals,
 } from '@vegaprotocol/web3';
 import { useTokenContract } from '@vegaprotocol/web3';
 
@@ -62,22 +61,23 @@ export const DepositManager = ({
     isFaucetable
   );
 
-  const decimals = useTokenDecimals(tokenContract);
-
   // Get users balance of the erc20 token selected
-  const { balance, refetch } = useGetBalanceOfERC20Token(
+  const { balance, refetch: refetchBalance } = useGetBalanceOfERC20Token(
     tokenContract,
-    decimals
+    asset?.decimals
   );
 
   // Get temporary deposit limits
-  const limits = useGetDepositLimits(asset, decimals);
+  const limits = useGetDepositLimits(asset);
 
   // Get allowance (approved spending limit of brdige contract) for the selected asset
-  const allowance = useGetAllowance(tokenContract, decimals);
+  const { allowance, refetch: refetchAllowance } = useGetAllowance(
+    tokenContract,
+    asset?.decimals
+  );
 
   // Set up approve transaction
-  const approve = useSubmitApproval(tokenContract, decimals);
+  const approve = useSubmitApproval(tokenContract, asset?.decimals);
 
   // Set up deposit transaction
   const { confirmationEvent, ...deposit } = useSubmitDeposit();
@@ -91,9 +91,16 @@ export const DepositManager = ({
       faucet.transaction.status === EthTxStatus.Complete ||
       confirmationEvent !== null
     ) {
-      refetch();
+      refetchBalance();
     }
-  }, [confirmationEvent, refetch, faucet.transaction.status]);
+  }, [confirmationEvent, refetchBalance, faucet.transaction.status]);
+
+  // After an approval transaction refetch allowance
+  useEffect(() => {
+    if (approve.transaction.status === EthTxStatus.Complete) {
+      refetchAllowance();
+    }
+  }, [approve.transaction.status, refetchAllowance]);
 
   return (
     <>

libs/deposits/src/lib/use-get-allowance.ts

@@ -19,13 +19,12 @@ export const useGetAllowance = (contract: Token | null, decimals?: number) => {
     );
   }, [contract, account, config]);
 
-  const {
+  const { state, refetch } = useEthereumReadContract(getAllowance);
-    state: { data },
-  } = useEthereumReadContract(getAllowance);
 
-  if (!data || !decimals) return;
+  const allowance =
+    state.data && decimals
+      ? new BigNumber(addDecimal(state.data.toString(), decimals))
+      : undefined;
 
-  const allowance = new BigNumber(addDecimal(data.toString(), decimals));
+  return { allowance, refetch };
-
-  return allowance;
 };

libs/deposits/src/lib/use-get-deposit-limits.ts

@@ -1,11 +1,20 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { ethers } from 'ethers';
 import type { Asset } from './deposit-manager';
-import { useBridgeContract, useEthereumReadContract } from '@vegaprotocol/web3';
+import {
+  useBridgeContract,
+  useEthereumConfig,
+  useEthereumReadContract,
+} from '@vegaprotocol/web3';
 import BigNumber from 'bignumber.js';
 import { addDecimal } from '@vegaprotocol/react-helpers';
+import { useWeb3React } from '@web3-react/core';
 
-export const useGetDepositLimits = (asset?: Asset, decimals?: number) => {
+export const useGetDepositLimits = (asset?: Asset) => {
+  const { account, provider } = useWeb3React();
+  const { config } = useEthereumConfig();
   const contract = useBridgeContract(true);
+  const [userTotal, setUserTotal] = useState<BigNumber | null>(null);
   const getLimits = useCallback(async () => {
     if (!contract || !asset || asset.source.__typename !== 'ERC20') {
       return;
@@ -14,15 +23,47 @@ export const useGetDepositLimits = (asset?: Asset, decimals?: number) => {
     return contract.getDepositMaximum(asset.source.contractAddress);
   }, [asset, contract]);
 
+  useEffect(() => {
+    if (
+      !provider ||
+      !config ||
+      !account ||
+      !asset ||
+      asset.source.__typename !== 'ERC20'
+    ) {
+      return;
+    }
+
+    const abicoder = new ethers.utils.AbiCoder();
+    const innerHash = ethers.utils.keccak256(
+      abicoder.encode(['address', 'uint256'], [account, 4])
+    );
+    const storageLocation = ethers.utils.keccak256(
+      abicoder.encode(
+        ['address', 'bytes32'],
+        [asset.source.contractAddress, innerHash]
+      )
+    );
+    (async () => {
+      const res = await provider.getStorageAt(
+        config.collateral_bridge_contract.address,
+        storageLocation
+      );
+      const value = new BigNumber(res, 16).toString();
+      setUserTotal(new BigNumber(addDecimal(value, asset.decimals)));
+    })();
+  }, [provider, config, account, asset]);
+
   const {
     state: { data },
   } = useEthereumReadContract(getLimits);
 
-  if (!data || !decimals) return null;
+  if (!data || !userTotal || !asset) return null;
 
-  const max = new BigNumber(addDecimal(data.toString(), decimals));
+  const max = new BigNumber(addDecimal(data.toString(), asset.decimals));
 
   return {
     max: max.isEqualTo(0) ? new BigNumber(Infinity) : max,
+    deposited: userTotal,
   };
 };

libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic-themed.tsx

@@ -34,7 +34,7 @@ export const AgGridThemed = ({
   customThemeParams?: string;
 }) => {
   const theme = useContext(ThemeContext);
-  const defaultProps = { rowHeight: 20, headerHeight: 22 };
+  const defaultProps = { rowHeight: 22, headerHeight: 22 };
   return (
     <div
       className={`${className ?? ''} ${

libs/withdraws/src/lib/use-complete-withdraw.spec.tsx

@@ -7,7 +7,7 @@ import { useCompleteWithdraw } from './use-complete-withdraw';
 import type { Erc20Approval } from './__generated__/Erc20Approval';
 import { ERC20_APPROVAL_QUERY_NEW } from './queries';
 import * as web3 from '@vegaprotocol/web3';
-import * as sentry from '@sentry/nextjs';
+import * as sentry from '@sentry/react';
 import type { Erc20ApprovalNew_erc20WithdrawalApproval } from './__generated__/Erc20ApprovalNew';
 
 jest.mock('@vegaprotocol/web3', () => ({

libs/withdraws/src/lib/use-complete-withdraw.ts

@@ -1,5 +1,5 @@
 import { gql, useApolloClient } from '@apollo/client';
-import { captureException } from '@sentry/nextjs';
+import { captureException } from '@sentry/react';
 import type {
   CollateralBridge,
   CollateralBridgeNew,

libs/withdraws/src/lib/withdraw-dialog.tsx

@@ -157,6 +157,7 @@ const getProps = (
             href={`${ethUrl}/tx/${ethTx.txHash}`}
             title={t('View transaction on Etherscan')}
             className="text-vega-pink dark:text-vega-yellow"
+            target="_blank"
           >
             {t('View on Etherscan')}
           </Link>
@@ -174,6 +175,7 @@ const getProps = (
             href={`${ethUrl}/tx/${ethTx.txHash}`}
             title={t('View transaction on Etherscan')}
             className="text-vega-pink dark:text-vega-yellow"
+            target="_blank"
           >
             {t('View on Etherscan')}
           </Link>

libs/withdraws/src/lib/withdraw-form.tsx

@@ -112,7 +112,6 @@ export const WithdrawForm = ({
           </InputError>
         )}
       </FormGroup>
-
       <FormGroup
         label={t('To (Ethereum address)')}
         labelFor="ethereum-address"
@@ -121,6 +120,7 @@ export const WithdrawForm = ({
         <Input
           {...register('to', { validate: { required, ethereumAddress } })}
           id="ethereum-address"
+          autoComplete="off"
         />
         {errors.to?.message && (
           <InputError intent="danger" className="mt-4">

libs/withdraws/src/lib/withdrawals-table.spec.tsx

@@ -1,6 +1,9 @@
 import { MockedProvider } from '@apollo/client/testing';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { formatNumber, getDateTimeFormat } from '@vegaprotocol/react-helpers';
+import {
+  addDecimalsFormatNumber,
+  getDateTimeFormat,
+} from '@vegaprotocol/react-helpers';
 import { WithdrawalStatus } from '@vegaprotocol/types';
 import { generateWithdrawal } from './test-helpers';
 import type {
@@ -40,7 +43,7 @@ it('Renders the correct columns', async () => {
   const cells = screen.getAllByRole('gridcell');
   const expectedValues = [
     'asset-symbol',
-    formatNumber(withdrawal.amount, withdrawal.asset.decimals),
+    addDecimalsFormatNumber(withdrawal.amount, withdrawal.asset.decimals),
     '123456\u2026123456',
     getDateTimeFormat().format(new Date(withdrawal.createdTimestamp)),
     withdrawal.status,
@@ -73,7 +76,9 @@ describe('StatusCell', () => {
     render(<StatusCell {...props} />);
 
     expect(screen.getByText('Open')).toBeInTheDocument();
-    fireEvent.click(screen.getByText('Complete', { selector: 'button' }));
+    fireEvent.click(
+      screen.getByText('Click to complete', { selector: 'button' })
+    );
     expect(mockComplete).toHaveBeenCalled();
   });
 

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -7,7 +7,7 @@ import {
   getDateTimeFormat,
   t,
   truncateByChars,
-  formatNumber,
+  addDecimalsFormatNumber,
 } from '@vegaprotocol/react-helpers';
 import { WithdrawalStatus } from '@vegaprotocol/types';
 import { Link, AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
@@ -39,7 +39,7 @@ export const WithdrawalsTable = ({ withdrawals }: WithdrawalsTableProps) => {
           headerName="Amount"
           field="amount"
           valueFormatter={({ value, data }: ValueFormatterParams) => {
-            return formatNumber(value, data.asset.decimals);
+            return addDecimalsFormatNumber(value, data.asset.decimals);
           }}
         />
         <AgGridColumn
@@ -90,6 +90,7 @@ export const StatusCell = ({
             title={t('View transaction on Etherscan')}
             href={`${ethUrl}/tx/${data.txHash}`}
             data-testid="etherscan-link"
+            target="_blank"
           >
             {t('View on Etherscan')}
           </Link>
@@ -108,6 +109,7 @@ export const StatusCell = ({
               title={t('View transaction on Etherscan')}
               href={`${ethUrl}/tx/${data.txHash}`}
               data-testid="etherscan-link"
+              target="_blank"
             >
               {t('View on Etherscan')}
             </Link>
@@ -116,7 +118,7 @@ export const StatusCell = ({
           <>
             {t('Open')}
             <button className="underline" onClick={() => complete(data.id)}>
-              {t('Complete')}
+              {t('Click to complete')}
             </button>
           </>
         )}
@@ -141,6 +143,7 @@ const RecipientCell = ({
       title={t('View on Etherscan (opens in a new tab)')}
       href={`${ethUrl}/address/${value}`}
       data-testid="etherscan-link"
+      target="_blank"
     >
       {valueFormatted}
     </Link>