chore(trading): misc changes to trades and transfer (#5175)

libs/accounts/src/lib/accounts-data-provider.ts

@@ -112,6 +112,8 @@ const USE_ACCOUNT_TYPES = [
   AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
   AccountType.ACCOUNT_TYPE_FEES_MAKER,
   AccountType.ACCOUNT_TYPE_PENDING_TRANSFERS,
+  AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
+  AccountType.ACCOUNT_TYPE_VESTING_REWARDS,
 ];
 
 const getAssetIds = (data: Account[]) =>

libs/accounts/src/lib/transfer-container.tsx

@@ -42,15 +42,17 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
     ? data.filter((account) => ALLOWED_ACCOUNTS.includes(account.type))
     : [];
 
-  const assets = accounts.map((account) => ({
+  const assets = accounts
-    id: account.asset.id,
+    // Theres only one general account for each asset, this will give us a list
-    symbol: account.asset.symbol,
+    // of assets the user has accounts for
-    name: account.asset.name,
+    .filter((a) => a.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL)
-    decimals: account.asset.decimals,
+    .map((account) => ({
-    balance: addDecimal(account.balance, account.asset.decimals),
+      id: account.asset.id,
-  }));
+      symbol: account.asset.symbol,
-
+      name: account.asset.name,
-  if (data === null) return null;
+      decimals: account.asset.decimals,
+      balance: addDecimal(account.balance, account.asset.decimals),
+    }));
 
   return (
     <>

libs/accounts/src/lib/transfer-form.tsx

@@ -5,6 +5,7 @@ import {
   vegaPublicKey,
   addDecimal,
   formatNumber,
+  addDecimalsFormatNumber,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -47,7 +48,8 @@ interface TransferFormProps {
   assets: Array<Asset>;
   accounts: Array<{
     type: AccountType;
-    asset: { id: string; symbol: string };
+    balance: string;
+    asset: { id: string; symbol: string; decimals: number };
   }>;
   assetId?: string;
   feeFactor: string | null;
@@ -79,6 +81,7 @@ export const TransferForm = ({
   const selectedPubKey = watch('toAddress');
   const amount = watch('amount');
   const assetId = watch('asset');
+  const asset = assets.find((a) => a.id === assetId);
 
   const [includeFee, setIncludeFee] = useState(false);
 
@@ -100,10 +103,6 @@ export const TransferForm = ({
     );
   }, [amount, includeFee, transferAmount, feeFactor]);
 
-  const asset = useMemo(() => {
-    return assets.find((a) => a.id === assetId);
-  }, [assets, assetId]);
-
   const onSubmit = useCallback(
     (fields: FormFields) => {
       if (!asset) {
@@ -147,6 +146,13 @@ export const TransferForm = ({
     }
   }, [setValue, pubKey]);
 
+  // General account for the selected asset
+  const generalAccount = accounts.find((a) => {
+    return (
+      a.asset.id === assetId && a.type === AccountType.ACCOUNT_TYPE_GENERAL
+    );
+  });
+
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
@@ -272,7 +278,9 @@ export const TransferForm = ({
             .map((a) => {
               return (
                 <option value={a.type} key={`${a.type}-${a.asset.id}`}>
-                  {AccountTypeMapping[a.type]} ({a.asset.symbol})
+                  {AccountTypeMapping[a.type]} (
+                  {addDecimalsFormatNumber(a.balance, a.asset.decimals)}{' '}
+                  {a.asset.symbol})
                 </option>
               );
             })}
@@ -289,10 +297,13 @@ export const TransferForm = ({
           defaultValue={AccountType.ACCOUNT_TYPE_GENERAL}
         >
           <option value={AccountType.ACCOUNT_TYPE_GENERAL}>
-            {asset
+            {generalAccount
-              ? `${AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]} (${
+              ? `${
-                  asset.symbol
+                  AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]
-                })`
+                } (${addDecimalsFormatNumber(
+                  generalAccount.balance,
+                  generalAccount.asset.decimals
+                )} ${generalAccount.asset.symbol})`
               : AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]}
           </option>
         </TradingSelect>

libs/datagrid/src/lib/pagination.tsx

@@ -32,7 +32,7 @@ export const Pagination = ({
         {false}
         {showRetentionMessage &&
           t(
-            'Depending on data node retention you may not be able see the "full" history'
+            'Depending on data node retention you may not be able see the full history'
           )}
       </div>
       <div className="flex items-center text-xs">

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

@@ -3,10 +3,7 @@ import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
 import { t } from '@vegaprotocol/i18n';
-import { Pagination } from '@vegaprotocol/datagrid';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { useCallback, useState } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
 
 interface TradesContainerProps {
   marketId: string;
@@ -19,43 +16,19 @@ export const TradesManager = ({
 }: TradesContainerProps) => {
   const update = useDealTicketFormValues((state) => state.updateAll);
 
-  const { data, error, load, pageInfo } = useDataProvider({
+  const { data, error } = useDataProvider({
     dataProvider: tradesWithMarketProvider,
     variables: { marketId },
   });
-  const [hasDisplayedRow, setHasDisplayedRow] = useState<boolean | undefined>(
-    undefined
-  );
-  const { onFilterChanged, ...props } = gridProps || {};
-  const onRowDataUpdated = useCallback(
-    ({ api }: { api: AgGridReact['api'] }) => {
-      setHasDisplayedRow(!!api.getDisplayedRowCount());
-    },
-    []
-  );
 
   return (
-    <div className="flex flex-col h-full">
+    <TradesTable
-      <TradesTable
+      rowData={data}
-        rowData={data}
+      onClick={(price?: string) => {
-        onClick={(price?: string) => {
+        update(marketId, { price });
-          update(marketId, { price });
+      }}
-        }}
+      overlayNoRowsTemplate={error ? error.message : t('No trades')}
-        onFilterChanged={(event) => {
+      {...gridProps}
-          onRowDataUpdated(event);
+    />
-          onFilterChanged(event);
-        }}
-        onRowDataUpdated={onRowDataUpdated}
-        overlayNoRowsTemplate={error ? error.message : t('No trades')}
-        {...props}
-      />
-      <Pagination
-        count={data?.length || 0}
-        pageInfo={pageInfo}
-        onLoad={load}
-        hasDisplayedRows={hasDisplayedRow || false}
-        showRetentionMessage={true}
-      />
-    </div>
   );
 };