chore: show balances in accounts and vesting accounts in breakdown

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

@@ -42,13 +42,17 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
     ? data.filter((account) => ALLOWED_ACCOUNTS.includes(account.type))
     : [];
 
-  const assets = accounts.map((account) => ({
-    id: account.asset.id,
-    symbol: account.asset.symbol,
-    name: account.asset.name,
-    decimals: account.asset.decimals,
-    balance: addDecimal(account.balance, account.asset.decimals),
-  }));
+  const assets = accounts
+    // Theres only one general account for each asset, this will give us a list
+    // of assets the user has accounts for
+    .filter((a) => a.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL)
+    .map((account) => ({
+      id: account.asset.id,
+      symbol: account.asset.symbol,
+      name: account.asset.name,
+      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
-              ? `${AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]} (${
-                  asset.symbol
-                })`
+            {generalAccount
+              ? `${
+                  AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]
+                } (${addDecimalsFormatNumber(
+                  generalAccount.balance,
+                  generalAccount.asset.decimals
+                )} ${generalAccount.asset.symbol})`
               : AccountTypeMapping[AccountType.ACCOUNT_TYPE_GENERAL]}
           </option>
         </TradingSelect>