feat: 1648 add deposit button and show accounts 0 state (#1696)

* feat: #1648 add deposit button and show accounts 0 state

* fix: remove text-white and text-black

* fix: #1648 revert and add back row model type and data source in accounts table

* fix: #1648 fix linting issue

* fix: #1648 table tweaks buttons at the bottom

* fix: #1644 hide withdrawals history title

* fix: #1648 fix accounts-table test

* fix: #1648 fix trading-accounts.cy.ts test

* fix: leave ag grid to show overlay if data is simply null but there is no error or it's not loading

Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>

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

@@ -33,7 +33,7 @@ describe('accounts', { tags: '@smoke' }, () => {
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)
       .find('[col-id="breakdown"]')
-      .should('have.text', 'Collateral breakdown');
+      .should('have.text', 'Breakdown');
 
     cy.getByTestId('tab-accounts')
       .get(tradingAccountRowId)

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

@@ -1,13 +1,13 @@
 import { useState } from 'react';
-import { Dialog } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 import { WithdrawalDialogs } from '@vegaprotocol/withdraws';
 import { Web3Container } from '@vegaprotocol/web3';
-import { DepositContainer } from '@vegaprotocol/deposits';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { AccountManager } from '@vegaprotocol/accounts';
+import { DepositDialog } from './deposits-container';
 
 export const AccountsContainer = () => {
   const { pubKey } = useVegaWallet();
@@ -23,12 +23,17 @@ export const AccountsContainer = () => {
 
   return (
     <Web3Container>
-      <div className="h-full">
+      <div className="h-full relative grid grid-rows-[1fr,min-content]">
         <AssetAccountTable partyId={pubKey} />
         <DepositDialog
           depositDialog={depositDialog}
           setDepositDialog={setDepositDialog}
         />
+        <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
+          <Button size="sm" onClick={() => setDepositDialog(true)}>
+            Deposit
+          </Button>
+        </div>
       </div>
     </Web3Container>
   );
@@ -68,22 +73,3 @@ export const AssetAccountTable = ({ partyId }: { partyId: string }) => {
     </>
   );
 };
-
-export interface DepositDialogProps {
-  assetId?: string;
-  depositDialog: boolean;
-  setDepositDialog: (open: boolean) => void;
-}
-
-export const DepositDialog = ({
-  assetId,
-  depositDialog,
-  setDepositDialog,
-}: DepositDialogProps) => {
-  return (
-    <Dialog open={depositDialog} onChange={setDepositDialog}>
-      <h1 className="text-2xl mb-4">{t('Deposit')}</h1>
-      <DepositContainer assetId={assetId} />
-    </Dialog>
-  );
-};

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

@@ -1,20 +1,15 @@
-import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
+import { AsyncRenderer, Button, Dialog } from '@vegaprotocol/ui-toolkit';
-import { DepositsTable } from '@vegaprotocol/deposits';
+import { DepositContainer, DepositsTable } from '@vegaprotocol/deposits';
 import { useDeposits } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/react-helpers';
-import Link from 'next/link';
+import { useState } from 'react';
 
 export const DepositsContainer = () => {
   const { deposits, loading, error } = useDeposits();
+  const [depositDialog, setDepositDialog] = useState(false);
 
   return (
-    <div className="h-full grid grid-rows-[min-content_1fr]">
+    <div className="h-full grid grid-rows-[1fr,min-content]">
-      <header className="flex justify-between items-center p-4">
-        <h4 className="text-lg text-black dark:text-white">{t('Deposits')}</h4>
-        <Link href="/portfolio/deposit" passHref={true}>
-          <Button>Deposit</Button>
-        </Link>
-      </header>
       <div>
         <AsyncRenderer
           data={deposits}
@@ -25,6 +20,34 @@ export const DepositsContainer = () => {
           }}
         />
       </div>
+      <DepositDialog
+        depositDialog={depositDialog}
+        setDepositDialog={setDepositDialog}
+      />
+      <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
+        <Button size="sm" onClick={() => setDepositDialog(true)}>
+          Deposit
+        </Button>
+      </div>
     </div>
   );
 };
+
+export interface DepositDialogProps {
+  assetId?: string;
+  depositDialog: boolean;
+  setDepositDialog: (open: boolean) => void;
+}
+
+export const DepositDialog = ({
+  assetId,
+  depositDialog,
+  setDepositDialog,
+}: DepositDialogProps) => {
+  return (
+    <Dialog open={depositDialog} onChange={setDepositDialog}>
+      <h1 className="text-2xl mb-4">{t('Deposit')}</h1>
+      <DepositContainer assetId={assetId} />
+    </Dialog>
+  );
+};

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

@@ -17,19 +17,8 @@ export const WithdrawalsContainer = () => {
   return (
     <Web3Container>
       <VegaWalletContainer>
-        <div className="h-full grid grid-rows-[min-content_1fr]">
+        <div className="h-full relative grid grid-rows-[1fr,min-content]">
-          <header className="flex justify-between items-center p-4">
+          <div className="h-full">
-            <h4 className="text-lg text-black dark:text-white">
-              {t('Withdrawals')}
-            </h4>
-            <Button
-              onClick={() => setWithdrawDialog(true)}
-              data-testid="withdraw-dialog-button"
-            >
-              {t('Make withdrawal')}
-            </Button>
-          </header>
-          <div className="h-full px-4">
             <AsyncRenderer
               data={{ pending, completed }}
               loading={loading}
@@ -42,13 +31,23 @@ export const WithdrawalsContainer = () => {
                       <PendingWithdrawalsTable rowData={pending} />
                     </>
                   )}
-
+                  {completed && completed.length > 0 && (
-                  <h4 className="pt-3 pb-1">{t('Withdrawal history')}</h4>
+                    <h4 className="pt-3 pb-1">{t('Withdrawal history')}</h4>
+                  )}
                   <WithdrawalsTable rowData={completed} />
                 </>
               )}
             />
           </div>
+          <div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
+            <Button
+              size="sm"
+              onClick={() => setWithdrawDialog(true)}
+              data-testid="withdraw-dialog-button"
+            >
+              {t('Make withdrawal')}
+            </Button>
+          </div>
         </div>
         <WithdrawalDialogs
           withdrawDialog={withdrawDialog}

libs/accounts/src/lib/accounts-manager.tsx

@@ -32,7 +32,7 @@ export const AccountManager = ({
     },
     [gridRef]
   );
-  const { data, error, loading } = useDataProvider<AccountFields[], never>({
+  const { data, loading, error } = useDataProvider<AccountFields[], never>({
     dataProvider: aggregatedAccountsDataProvider,
     update,
     variables,
@@ -52,18 +52,16 @@ export const AccountManager = ({
     successCallback(rowsThisBlock, lastRow);
   };
   return (
-    <AsyncRenderer loading={loading} error={error} data={data}>
+    <AsyncRenderer data={data || []} error={error} loading={loading}>
-      {data && (
+      <AccountTable
-        <AccountTable
+        rowModelType={data?.length ? 'infinite' : 'clientSide'}
-          rowModelType={data?.length ? 'infinite' : 'clientSide'}
+        rowData={data?.length ? undefined : []}
-          rowData={data?.length ? undefined : []}
+        ref={gridRef}
-          ref={gridRef}
+        datasource={{ getRows }}
-          datasource={{ getRows }}
+        onClickAsset={onClickAsset}
-          onClickAsset={onClickAsset}
+        onClickDeposit={onClickDeposit}
-          onClickDeposit={onClickDeposit}
+        onClickWithdraw={onClickWithdraw}
-          onClickWithdraw={onClickWithdraw}
+      />
-        />
-      )}
     </AsyncRenderer>
   );
 };

libs/accounts/src/lib/accounts-table.spec.tsx

@@ -57,7 +57,7 @@ describe('AccountsTable', () => {
       'tBTC',
       '1,256.00000',
       '1,256.00001,256.0000',
-      'Collateral breakdown',
+      'Breakdown',
       'Deposit',
     ];
     cells.forEach((cell, i) => {

libs/accounts/src/lib/accounts-table.tsx

@@ -154,7 +154,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
                     setBreakdown(value || null);
                   }}
                 >
-                  {t('Collateral breakdown')}
+                  {t('Breakdown')}
                 </ButtonLink>
               );
             }}