feat(trading): deposit to trade collateral tab pinned row (#2921)

2023-02-17 08:32:20 -05:00 · 2023-02-17 08:32:20 -05:00 · c22fec97b4
commit c22fec97b4
parent 989a0456c0
6 changed files with 178 additions and 78 deletions
--- a/apps/trading/client-pages/market/market.tsx
+++ b/apps/trading/client-pages/market/market.tsx
@ -96,7 +96,15 @@ export const MarketPage = () => {

  const tradeView = useMemo(() => {
    if (w > 960) {
-      return <TradeGrid market={data} onSelect={onSelect} />;
+      return (
+        <TradeGrid
+          market={data}
+          onSelect={onSelect}
+          pinnedAsset={
+            data?.tradableInstrument.instrument.product.settlementAsset
+          }
+        />
+      );
    }
    return (
      <TradePanels
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@ -28,6 +28,7 @@ import { NO_MARKET } from './constants';
 import { LiquidityContainer } from '../liquidity/liquidity';
 import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
+import type { PinnedAsset } from '@vegaprotocol/accounts';

 type MarketDependantView =
  | typeof CandlesChartContainer
@ -65,14 +66,17 @@ type TradingView = keyof typeof TradingViews;
 interface TradeGridProps {
  market: Market | null;
  onSelect: (marketId: string) => void;
+  pinnedAsset?: PinnedAsset;
 }

 const MainGrid = ({
  marketId,
  onSelect,
+  pinnedAsset,
 }: {
  marketId: string;
  onSelect?: (marketId: string) => void;
+  pinnedAsset?: PinnedAsset;
 }) => {
  const navigate = useNavigate();
  const onMarketClick = (marketId: string) => {
@ -175,7 +179,7 @@ const MainGrid = ({
            </Tab>
            <Tab id="accounts" name={t('Collateral')}>
              <VegaWalletContainer>
-                <TradingViews.Collateral />
+                <TradingViews.Collateral pinnedAsset={pinnedAsset} />
              </VegaWalletContainer>
            </Tab>
          </Tabs>
@ -186,11 +190,19 @@ const MainGrid = ({
 };
 const MainGridWrapped = memo(MainGrid);

-export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
+export const TradeGrid = ({
+  market,
+  onSelect,
+  pinnedAsset,
+}: TradeGridProps) => {
  return (
    <div className="h-full grid grid-rows-[min-content_1fr]">
      <TradeMarketHeader market={market} onSelect={onSelect} />
-      <MainGridWrapped marketId={market?.id || ''} onSelect={onSelect} />
+      <MainGridWrapped
+        marketId={market?.id || ''}
+        onSelect={onSelect}
+        pinnedAsset={pinnedAsset}
+      />
    </div>
  );
 };
@ -214,12 +226,14 @@ interface TradePanelsProps {
  onSelect: (marketId: string) => void;
  onMarketClick?: (marketId: string) => void;
  onClickCollateral: () => void;
+  pinnedAsset?: PinnedAsset;
 }

 export const TradePanels = ({
  market,
  onSelect,
  onClickCollateral,
+  pinnedAsset,
 }: TradePanelsProps) => {
  const [view, setView] = useState<TradingView>('Candles');
  const renderView = () => {
@ -228,6 +242,7 @@ export const TradePanels = ({
      onSelect: (marketId: string) => void;
      onMarketClick?: (marketId: string) => void;
      onClickCollateral: () => void;
+      pinnedAsset?: PinnedAsset;
    }>(TradingViews[view]);

    if (!Component) {
@ -241,6 +256,7 @@ export const TradePanels = ({
        marketId={market?.id}
        onSelect={onSelect}
        onClickCollateral={onClickCollateral}
+        pinnedAsset={pinnedAsset}
      />
    );
  };
--- a/apps/trading/components/accounts-container/accounts-container.tsx
+++ b/apps/trading/components/accounts-container/accounts-container.tsx
@ -5,10 +5,15 @@ import { useWithdrawalDialog } from '@vegaprotocol/withdraws';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import type { PinnedAsset } from '@vegaprotocol/accounts';
 import { AccountManager, useTransferDialog } from '@vegaprotocol/accounts';
 import { useDepositDialog } from '@vegaprotocol/deposits';

-export const AccountsContainer = () => {
+export const AccountsContainer = ({
+  pinnedAsset,
+}: {
+  pinnedAsset?: PinnedAsset;
+}) => {
  const { pubKey, isReadOnly } = useVegaWallet();
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
  const openWithdrawalDialog = useWithdrawalDialog((store) => store.open);
@ -39,6 +44,7 @@ export const AccountsContainer = () => {
          onClickWithdraw={openWithdrawalDialog}
          onClickDeposit={openDepositDialog}
          isReadOnly={isReadOnly}
+          pinnedAsset={pinnedAsset}
        />
      </div>
      {!isReadOnly && (
--- a/libs/accounts/src/lib/accounts-manager.tsx
+++ b/libs/accounts/src/lib/accounts-manager.tsx
@ -4,6 +4,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import { useRef, useMemo, memo } from 'react';
 import type { AccountFields } from './accounts-data-provider';
 import { aggregatedAccountsDataProvider } from './accounts-data-provider';
+import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';

 interface AccountManagerProps {
@ -12,6 +13,7 @@ interface AccountManagerProps {
  onClickWithdraw?: (assetId?: string) => void;
  onClickDeposit?: (assetId?: string) => void;
  isReadOnly: boolean;
+  pinnedAsset?: PinnedAsset;
 }

 export const AccountManager = ({
@ -20,6 +22,7 @@ export const AccountManager = ({
  onClickDeposit,
  partyId,
  isReadOnly,
+  pinnedAsset,
 }: AccountManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const variables = useMemo(() => ({ partyId }), [partyId]);
@ -41,6 +44,7 @@ export const AccountManager = ({
        onClickWithdraw={onClickWithdraw}
        isReadOnly={isReadOnly}
        noRowsOverlayComponent={() => null}
+        pinnedAsset={pinnedAsset}
      />
      <div className="pointer-events-none absolute inset-0">
        <AsyncRenderer
@ -48,7 +52,7 @@ export const AccountManager = ({
          noDataCondition={(data) => !(data && data.length)}
          error={error}
          loading={loading}
-          noDataMessage={t('No accounts')}
+          noDataMessage={pinnedAsset ? ' ' : t('No accounts')}
          reload={reload}
        />
      </div>
--- a/libs/accounts/src/lib/accounts-table.spec.tsx
+++ b/libs/accounts/src/lib/accounts-table.spec.tsx
@ -72,52 +72,74 @@ describe('AccountsTable', () => {
    cells.forEach((cell, i) => {
      expect(cell).toHaveTextContent(expectedValues[i]);
    });
+    const rows = await screen.findAllByRole('row');
+    expect(rows.length).toBe(6);
  });
-});

-it('should get correct account data', () => {
-  const result = getAccountData([singleRow]);
-  const expected = [
-    {
-      asset: {
-        __typename: 'Asset',
-        decimals: 5,
-        id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
-        symbol: 'tBTC',
-      },
-      available: '0',
-      balance: '0',
-      breakdown: [
-        {
-          __typename: 'AccountBalance',
-          asset: {
-            __typename: 'Asset',
+  it('should add first asset as pinned', async () => {
+    await act(async () => {
+      render(
+        <AccountTable
+          rowData={singleRowData}
+          onClickAsset={() => null}
+          isReadOnly={false}
+          pinnedAsset={{
            decimals: 5,
            id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
            symbol: 'tBTC',
-          },
-          available: '0',
-          balance: '125600000',
-          deposited: '125600000',
-          market: {
-            __typename: 'Market',
-            id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
-            tradableInstrument: {
-              __typename: 'TradableInstrument',
-              instrument: {
-                __typename: 'Instrument',
-                name: 'BTCUSD Monthly (30 Jun 2022)',
+            name: 'tBTC',
+          }}
+        />
+      );
+    });
+    const rows = await screen.findAllByRole('row');
+    expect(rows.length).toBe(9);
+  });
+
+  it('should get correct account data', () => {
+    const result = getAccountData([singleRow]);
+    const expected = [
+      {
+        asset: {
+          __typename: 'Asset',
+          decimals: 5,
+          id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+          symbol: 'tBTC',
+        },
+        available: '0',
+        balance: '0',
+        breakdown: [
+          {
+            __typename: 'AccountBalance',
+            asset: {
+              __typename: 'Asset',
+              decimals: 5,
+              id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+              symbol: 'tBTC',
+            },
+            available: '0',
+            balance: '125600000',
+            deposited: '125600000',
+            market: {
+              __typename: 'Market',
+              id: '10cd0a793ad2887b340940337fa6d97a212e0e517fe8e9eab2b5ef3a38633f35',
+              tradableInstrument: {
+                __typename: 'TradableInstrument',
+                instrument: {
+                  __typename: 'Instrument',
+                  name: 'BTCUSD Monthly (30 Jun 2022)',
+                },
              },
            },
+            type: 'ACCOUNT_TYPE_MARGIN',
+            used: '125600000',
          },
-          type: 'ACCOUNT_TYPE_MARGIN',
-          used: '125600000',
-        },
-      ],
-      deposited: '125600000',
-      type: 'ACCOUNT_TYPE_GENERAL',
-      used: '125600000',
-    },
-  ];
-  expect(result).toEqual(expected);
+        ],
+        deposited: '125600000',
+        type: 'ACCOUNT_TYPE_GENERAL',
+        used: '125600000',
+      },
+    ];
+    expect(result).toEqual(expected);
+  });
 });
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/libs/accounts/src/lib/accounts-table.tsx
@ -1,4 +1,4 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import {
  addDecimalsFormatNumber,
  isNumeric,
@ -14,6 +14,8 @@ import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
 import BreakdownTable from './breakdown-table';
 import type { AccountFields } from './accounts-data-provider';
+import type { Asset } from '@vegaprotocol/types';
+import BigNumber from 'bignumber.js';

 export interface GetRowsParams extends Omit<IGetRowsParams, 'successCallback'> {
  successCallback(rowsThisBlock: AccountFields[], lastRow?: number): void;
@ -23,6 +25,8 @@ export interface Datasource extends IDatasource {
  getRows(params: GetRowsParams): void;
 }

+export type PinnedAsset = Pick<Asset, 'symbol' | 'name' | 'id' | 'decimals'>;
+
 export interface AccountTableProps extends AgGridReactProps {
  rowData?: AccountFields[] | null;
  datasource?: Datasource;
@ -30,12 +34,33 @@ export interface AccountTableProps extends AgGridReactProps {
  onClickWithdraw?: (assetId: string) => void;
  onClickDeposit?: (assetId: string) => void;
  isReadOnly: boolean;
+  pinnedAsset?: PinnedAsset;
 }

 export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
  ({ onClickAsset, onClickWithdraw, onClickDeposit, ...props }, ref) => {
    const [openBreakdown, setOpenBreakdown] = useState(false);
    const [breakdown, setBreakdown] = useState<AccountFields[] | null>(null);
+    const pinnedAssetId = props.pinnedAsset?.id;
+
+    const pinnedAssetRow = useMemo(() => {
+      const currentPinnedAssetRow = props.rowData?.find(
+        (row) => row.asset.id === pinnedAssetId
+      );
+      if (!currentPinnedAssetRow) {
+        if (props.pinnedAsset) {
+          return {
+            asset: props.pinnedAsset,
+            available: '0',
+            used: '0',
+            deposited: '0',
+            balance: '0',
+          };
+        }
+      }
+      return currentPinnedAssetRow;
+    }, [pinnedAssetId, props.pinnedAsset, props.rowData]);
+
    return (
      <>
        <AgGrid
@ -51,6 +76,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
            sortable: true,
          }}
          {...props}
+          pinnedTopRowData={pinnedAssetRow ? [pinnedAssetRow] : undefined}
        >
          <AgGridColumn
            headerName={t('Asset')}
@ -138,37 +164,55 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
              cellRenderer={({
                data,
              }: VegaICellRendererParams<AccountFields>) => {
-                return data ? (
-                  <>
-                    <ButtonLink
-                      data-testid="breakdown"
-                      onClick={() => {
-                        setOpenBreakdown(!openBreakdown);
-                        setBreakdown(data.breakdown || null);
-                      }}
-                    >
-                      {t('Breakdown')}
-                    </ButtonLink>
-                    <span className="mx-1" />
-                    <ButtonLink
-                      data-testid="deposit"
-                      onClick={() => {
-                        onClickDeposit && onClickDeposit(data.asset.id);
-                      }}
-                    >
-                      {t('Deposit')}
-                    </ButtonLink>
-                    <span className="mx-1" />
-                    <ButtonLink
-                      data-testid="withdraw"
-                      onClick={() =>
-                        onClickWithdraw && onClickWithdraw(data.asset.id)
-                      }
-                    >
-                      {t('Withdraw')}
-                    </ButtonLink>
-                  </>
-                ) : null;
+                if (!data) return null;
+                else {
+                  if (
+                    data.asset.id === pinnedAssetId &&
+                    new BigNumber(data.deposited).isLessThanOrEqualTo(0)
+                  ) {
+                    return (
+                      <ButtonLink
+                        data-testid="deposit"
+                        onClick={() => {
+                          onClickDeposit && onClickDeposit(data.asset.id);
+                        }}
+                      >
+                        {t('Deposit to trade')}
+                      </ButtonLink>
+                    );
+                  }
+                  return (
+                    <>
+                      <ButtonLink
+                        data-testid="breakdown"
+                        onClick={() => {
+                          setOpenBreakdown(!openBreakdown);
+                          setBreakdown(data.breakdown || null);
+                        }}
+                      >
+                        {t('Breakdown')}
+                      </ButtonLink>
+                      <span className="mx-1" />
+                      <ButtonLink
+                        data-testid="deposit"
+                        onClick={() => {
+                          onClickDeposit && onClickDeposit(data.asset.id);
+                        }}
+                      >
+                        {t('Deposit')}
+                      </ButtonLink>
+                      <span className="mx-1" />
+                      <ButtonLink
+                        data-testid="withdraw"
+                        onClick={() =>
+                          onClickWithdraw && onClickWithdraw(data.asset.id)
+                        }
+                      >
+                        {t('Withdraw')}
+                      </ButtonLink>
+                    </>
+                  );
+                }
              }}
            />
          )}