Fix parsing of amounts in vault selector

src/components/Selector/VaultSelector.tsx

@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { Button, Dropdown } from 'react-daisyui';
+import { BridgeDirection } from '../../pages/spacewalk/bridge';
 import { convertCurrencyToStellarAsset } from '../../helpers/spacewalk';
 import { ExtendedRegistryVault } from '../../hooks/spacewalk/useVaultRegistryPallet';
 import { nativeToDecimal } from '../../shared/parseNumbers/metric';
@@ -8,12 +9,27 @@ import { PublicKey } from '../PublicKey';
 interface VaultSelectorProps {
   vaults: ExtendedRegistryVault[];
   selectedVault?: ExtendedRegistryVault;
-  showMaxTokensFor?: 'issuableTokens' | 'redeemableTokens';
+  bridgeDirection?: BridgeDirection;
   onChange: (vault: ExtendedRegistryVault) => void;
 }
 
+function getMaxTokensForVault(vault: ExtendedRegistryVault, type: 'issue' | 'redeem') {
+  const maxTokens = type === 'issue' ? vault.issuableTokens : vault.redeemableTokens;
+  if (!maxTokens) return '0';
+
+  try {
+    const balance: { amount: string } = maxTokens.toJSON();
+
+    return nativeToDecimal(balance.amount.toString()).toFixed(2);
+  } catch (error) {
+    console.error('Error parsing max tokens', error);
+    return '0';
+  }
+}
+
 function VaultSelector(props: VaultSelectorProps): JSX.Element {
-  const { vaults, selectedVault, showMaxTokensFor, onChange } = props;
+  const { vaults, selectedVault, bridgeDirection, onChange } = props;
+
   return (
     <div className="dropdown w-full mt-3">
       <Button
@@ -35,15 +51,15 @@ function VaultSelector(props: VaultSelectorProps): JSX.Element {
               }
               onChange(vault);
             }}
-            className="w-full rounded-md"
+            className="w-full rounded-md flex"
           >
             <span className="w-full flex place-content-between">
               <span className="flex">
                 <PublicKey publicKey={vault.id.accountId.toString()} variant="short" />
               </span>
-              {showMaxTokensFor && (
+              {bridgeDirection && (
                 <span className="content-end">
-                  {nativeToDecimal((vault[showMaxTokensFor] as unknown as { amount: string }).amount || '0').toFixed(2)}
+                  {getMaxTokensForVault(vault, bridgeDirection)}{' '}
                   {convertCurrencyToStellarAsset(vault.id.currencies.wrapped)?.getCode()}
                 </span>
               )}

src/hooks/spacewalk/useBridgeSettings.ts

@@ -24,7 +24,7 @@ export interface BridgeSettings {
 }
 
 function useBridgeSettings(): BridgeSettings {
-  const [vaults, setExtendedVaults] = useState<ExtendedRegistryVault[]>();
+  const [extendedVaults, setExtendedVaults] = useState<ExtendedRegistryVault[]>();
   const [manualVaultSelection, setManualVaultSelection] = useState(false);
   const { getVaults, getVaultsWithIssuableTokens, getVaultsWithRedeemableTokens } = useVaultRegistryPallet();
   const [selectedVault, setSelectedVault] = useState<ExtendedRegistryVault>();
@@ -34,10 +34,10 @@ function useBridgeSettings(): BridgeSettings {
   useEffect(() => {
     const combinedVaults: ExtendedRegistryVault[] = [];
     Promise.all([getVaultsWithIssuableTokens(), getVaultsWithRedeemableTokens()])
-      .then((data) => {
+      .then(([vaultsWithIssuableTokens, vaultsWithRedeemableTokens]) => {
         getVaults().forEach((vaultFromRegistry: any) => {
-          const vaultWithIssuable = data[0]?.find(([id, _]) => id.eq(vaultFromRegistry.id));
-          const vaultWithRedeemable = data[1]?.find(([id, _]) => id.eq(vaultFromRegistry.id));
+          const vaultWithIssuable = vaultsWithIssuableTokens?.find(([id, _]) => id.eq(vaultFromRegistry.id));
+          const vaultWithRedeemable = vaultsWithRedeemableTokens?.find(([id, _]) => id.eq(vaultFromRegistry.id));
           const extended: ExtendedRegistryVault = vaultFromRegistry;
           extended.issuableTokens = vaultWithIssuable ? (vaultWithIssuable[1] as unknown as Balance) : undefined;
           extended.redeemableTokens = vaultWithRedeemable ? (vaultWithRedeemable[1] as unknown as Balance) : undefined;
@@ -51,8 +51,8 @@ function useBridgeSettings(): BridgeSettings {
   }, [getVaults, setExtendedVaults, getVaultsWithIssuableTokens, getVaultsWithRedeemableTokens]);
 
   const wrappedAssets = useMemo(() => {
-    if (!vaults) return;
-    const assets = vaults
+    if (!extendedVaults) return;
+    const assets = extendedVaults
       .map((vault) => {
         const currency = vault.id.currencies.wrapped;
         return convertCurrencyToStellarAsset(currency);
@@ -62,20 +62,20 @@ function useBridgeSettings(): BridgeSettings {
       });
     // Deduplicate assets
     return _.uniqBy(assets, (asset: Asset) => stringifyStellarAsset(asset));
-  }, [tenantName, vaults]);
+  }, [tenantName, extendedVaults]);
 
   const vaultsForCurrency = useMemo(() => {
-    if (!vaults) return;
+    if (!extendedVaults) return;
 
-    return vaults.filter((vault) => {
+    return extendedVaults.filter((vault) => {
       if (!selectedAsset) {
         return false;
       }
 
       const vaultCurrencyAsAsset = convertCurrencyToStellarAsset(vault.id.currencies.wrapped);
       return vaultCurrencyAsAsset && vaultCurrencyAsAsset.equals(selectedAsset);
     });
-  }, [selectedAsset, vaults]);
+  }, [selectedAsset, extendedVaults]);
 
   useEffect(() => {
     if (vaultsForCurrency && wrappedAssets) {
@@ -99,7 +99,7 @@ function useBridgeSettings(): BridgeSettings {
   return {
     selectedVault,
     manualVaultSelection,
-    vaults,
+    vaults: extendedVaults,
     vaultsForCurrency,
     wrappedAssets,
     selectedAsset,

src/pages/spacewalk/bridge/Issue/SettingsDialog.tsx

@@ -1,15 +1,17 @@
 import { Button, Checkbox } from 'react-daisyui';
+import { useMemo } from 'preact/hooks';
 import VaultSelector from '../../../../components/Selector/VaultSelector';
 import useBridgeSettings from '../../../../hooks/spacewalk/useBridgeSettings';
 import { Dialog } from '../../../staking/dialogs/Dialog';
-import { useMemo } from 'preact/hooks';
+import { BridgeDirection } from '../index';
 
 interface Props {
   onClose: () => void;
   visible: boolean;
+  bridgeDirection: BridgeDirection;
 }
 
-export function SettingsDialog({ visible, onClose }: Props) {
+export function SettingsDialog({ bridgeDirection, visible, onClose }: Props) {
   const { manualVaultSelection, vaultsForCurrency, setManualVaultSelection, selectedVault, setSelectedVault } =
     useBridgeSettings();
 
@@ -37,7 +39,7 @@ export function SettingsDialog({ visible, onClose }: Props) {
               vaults={vaultsForCurrency}
               onChange={setSelectedVault}
               selectedVault={selectedVault}
-              showMaxTokensFor="issuableTokens"
+              bridgeDirection={bridgeDirection}
             />
           </div>
         )}

src/pages/spacewalk/bridge/index.tsx

@@ -19,6 +19,11 @@ enum BridgeTabs {
   Redeem = 1,
 }
 
+export enum BridgeDirection {
+  Issue = 'issue',
+  Redeem = 'redeem',
+}
+
 interface BridgeContextValue {
   selectedAsset?: Asset;
   setSelectedAsset: Dispatch<StateUpdater<Asset | undefined>>;
@@ -52,10 +57,16 @@ function Bridge(): JSX.Element | null {
     onClick: () => setTabValue(index),
   });
 
+  const bridgeDirection = tabValue === BridgeTabs.Issue ? BridgeDirection.Issue : BridgeDirection.Redeem;
+
   return chain ? (
     <BridgeContext.Provider value={{ selectedAsset, setSelectedAsset }}>
       <div className="h-full flex items-center justify-center mt-4">
-        <SettingsDialog visible={settingsVisible} onClose={() => setSettingsVisible(false)} />
+        <SettingsDialog
+          bridgeDirection={bridgeDirection}
+          visible={settingsVisible}
+          onClose={() => setSettingsVisible(false)}
+        />
         <Card className="bridge-card bg-base-200 min-h-500 w-full max-w-[520px] rounded-lg">
           <div className="flex justify-between px-5 mt-5">
             <Tabs className="flex w-5/6 flex-grow justify-center tabs-boxed">