improve vaults

Author: TheTrunk

src/components/VaultSignRequest/VaultSignRequest.tsx

@@ -13,13 +13,35 @@ import Icon from 'react-native-vector-icons/Feather';
 import { blockchains } from '../../storage/blockchains';
 import type { cryptos } from '../../types';
 
+/**
+ * Format a base-unit amount (satoshis/wei) to human-readable using chain decimals.
+ */
+function formatAmount(amount: string, decimals: number): string {
+  try {
+    const raw = BigInt(amount);
+    const divisor = 10n ** BigInt(decimals);
+    const wholePart = raw / divisor;
+    const fracPart = raw % divisor;
+    if (fracPart === 0n) {
+      return wholePart.toString();
+    }
+    const fracStr = fracPart.toString().padStart(decimals, '0');
+    const trimmed = fracStr.replace(/0+$/, '');
+    return `${wholePart.toString()}.${trimmed}`;
+  } catch {
+    return amount;
+  }
+}
+
 interface VaultSignRequestProps {
   activityStatus: boolean;
   recipients: Array<{ address: string; amount: string; label?: string }>;
   fee: string;
   feeLabel: string;
   memo?: string;
   chain: string;
+  vaultName?: string;
+  orgName?: string;
   actionStatus: (status: boolean) => void;
 }
 
@@ -30,6 +52,8 @@ const VaultSignRequest: React.FC<VaultSignRequestProps> = ({
   feeLabel,
   memo,
   chain,
+  vaultName,
+  orgName,
   actionStatus,
 }) => {
   const { t } = useTranslation(['home', 'common']);
@@ -39,6 +63,8 @@ const VaultSignRequest: React.FC<VaultSignRequestProps> = ({
   const chainDisplay = chainConfig
     ? `${chainConfig.name} (${chainConfig.symbol})`
     : chain;
+  const chainDecimals = chainConfig?.decimals ?? 8;
+  const chainSymbol = chainConfig?.symbol ?? chain.toUpperCase();
 
   const approve = () => {
     console.log('Approve vault signing request');
@@ -98,6 +124,46 @@ const VaultSignRequest: React.FC<VaultSignRequestProps> = ({
           {t('home:vault_sign_request_info')}
         </Text>
 
+        {/* Vault & Org Info */}
+        {(vaultName || orgName) && (
+          <View
+            style={[
+              Gutters.regularTMargin,
+              Gutters.regularLMargin,
+              Gutters.regularRMargin,
+              {
+                backgroundColor: Colors.inputBackground,
+                borderRadius: 8,
+                padding: 12,
+                width: '90%',
+                borderWidth: 1,
+                borderColor: Colors.textGray200,
+              },
+            ]}
+          >
+            {vaultName && (
+              <View style={{ marginBottom: orgName ? 4 : 0 }}>
+                <Text style={[Fonts.textTiny, { color: Colors.textGray400 }]}>
+                  {t('home:vault')}
+                </Text>
+                <Text style={[Fonts.textSmall, Fonts.textBold]}>
+                  {vaultName}
+                </Text>
+              </View>
+            )}
+            {orgName && (
+              <View>
+                <Text style={[Fonts.textTiny, { color: Colors.textGray400 }]}>
+                  {t('home:organization')}
+                </Text>
+                <Text style={[Fonts.textSmall, Fonts.textBold]}>
+                  {orgName}
+                </Text>
+              </View>
+            )}
+          </View>
+        )}
+
         {/* Chain Info */}
         <View
           style={[
@@ -196,7 +262,7 @@ const VaultSignRequest: React.FC<VaultSignRequestProps> = ({
                     { marginTop: 2 },
                   ]}
                 >
-                  {recipient.amount}
+                  {formatAmount(recipient.amount, chainDecimals)} {chainSymbol}
                 </Text>
               </View>
             ))}
@@ -211,7 +277,7 @@ const VaultSignRequest: React.FC<VaultSignRequestProps> = ({
               { color: Colors.textGray400 },
             ]}
           >
-            {t('home:vault_sign_fee')}: {fee} ({feeLabel})
+            {t('home:vault_sign_fee')}: {formatAmount(fee, chainDecimals)} {chainSymbol}
           </Text>
         </View>
 

src/screens/Home/Home.tsx

@@ -2506,6 +2506,8 @@ function Home({ navigation }: Props) {
               feeLabel={vaultSigningData.feeLabel}
               memo={vaultSigningData.memo}
               chain={vaultSigningData.chain}
+              vaultName={vaultSigningData.vaultName}
+              orgName={vaultSigningData.orgName}
               actionStatus={handleVaultSigningRequestAction}
             />
           )}

src/translations/resources/en/home.json

@@ -137,6 +137,8 @@
   "err_vault_xpub_failed": "Failed to share vault public key. Try again.",
   "vault_sign_request": "Vault Transaction",
   "vault_sign_request_info": "An enterprise vault is requesting your signature on a transaction. Please review the details below.",
+  "vault": "Vault",
+  "organization": "Organization",
   "vault_sign_recipients": "Recipients",
   "vault_sign_fee": "Fee",
   "vault_sign_memo": "Memo",

src/types.d.ts

@@ -606,6 +606,8 @@ interface vaultSigningRequest {
   chain: string;
   orgIndex: number;
   vaultIndex: number;
+  vaultName?: string;
+  orgName?: string;
   recipients: Array<{ address: string; amount: string; label?: string }>;
   fee: string;
   feeLabel: string;