fix: subbalance

src/components/asset-item.tsx

@@ -39,7 +39,7 @@ const AssetCaption: React.FC<{ caption?: string; show?: boolean }> = ({ caption,
     </Flex>
   ) : null;
 
-const SubBalance: React.FC<{ amount: string }> = ({ amount }) =>
+const SubBalance: React.FC<{ amount: string | undefined }> = ({ amount }) =>
   amount ? (
     <Text
       fontVariantNumeric="tabular-nums"
@@ -66,6 +66,7 @@ export const AssetItem = memo(
         caption,
         amount,
         subAmount,
+        isDifferent,
         ...rest
       }: {
         isPressable?: boolean;
@@ -74,13 +75,13 @@ export const AssetItem = memo(
         caption?: string;
         amount: string;
         subAmount?: string;
+        isDifferent?: boolean;
       } & StackProps,
       ref
     ) => {
       const [component, bind] = usePressable(isPressable);
       const formatted = getFormattedAmount(amount.toString());
-      const subAmountFormatted = (subAmount && getFormattedAmount(subAmount)) ?? '';
-      const isDifferent = !!subAmountFormatted && formatted.value !== subAmountFormatted.value;
+
       return (
         <Box
           as={isPressable ? 'button' : 'div'}
@@ -120,9 +121,7 @@ export const AssetItem = memo(
                       {formatted.value}
                     </Text>
                   </Tooltip>
-                  {isDifferent ? (
-                    <SubBalance amount={subAmountFormatted && subAmountFormatted.value} />
-                  ) : null}
+                  {isDifferent ? <SubBalance amount={subAmount} /> : null}
                 </Box>
               </SpaceBetween>
             </Stack>

src/components/asset-row.tsx

@@ -30,6 +30,7 @@ export const AssetRow = React.forwardRef<HTMLDivElement, AssetRowProps>((props,
   const correctBalance = availableStxBalance && type === 'stx' ? availableStxBalance : balance;
   const amount = valueFromBalance(correctBalance);
   const subAmount = subBalance && valueFromBalance(subBalance);
+  const isDifferent = subBalance && !correctBalance.isEqualTo(subBalance);
 
   return (
     <AssetItem
@@ -45,6 +46,7 @@ export const AssetRow = React.forwardRef<HTMLDivElement, AssetRowProps>((props,
       caption={symbol}
       amount={amount}
       subAmount={subAmount}
+      isDifferent={isDifferent}
       {...rest}
     />
   );