fix: balance with wrong decimals, closes #2828

leather-io · Nov 10, 2022 · 37f0c10 · 37f0c10
1 parent a7e8cf4
commit 37f0c10
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/src/app/common/money/format-money.ts b/src/app/common/money/format-money.ts
@@ -1,7 +1,7 @@
 import { Money } from '@shared/models/money.model';
 
-export function formatMoney({ amount, symbol }: Money) {
-  return `${amount.toString()} ${symbol}`;
+export function formatMoney({ amount, symbol, decimals }: Money) {
+  return `${amount.shiftedBy(-decimals).toString()} ${symbol}`;
 }
 
 export function i18nFormatCurrency(value: Money, locale = 'en-US') {

diff --git a/src/app/pages/send-tokens/components/asset-search/selected-asset.tsx b/src/app/pages/send-tokens/components/asset-search/selected-asset.tsx
@@ -14,7 +14,7 @@ interface SelectedAssetProps extends StackProps {
 }
 export const SelectedAsset = memo(({ hideArrow, onClearSearch, ...rest }: SelectedAssetProps) => {
   const [field] = useField('assetId');
-  const { balance, ticker } = useSelectedAssetBalance(field.value);
+  const { balance } = useSelectedAssetBalance(field.value);
 
   return (
     <Stack spacing="base-loose" flexDirection="column" {...rest}>
@@ -24,11 +24,7 @@ export const SelectedAsset = memo(({ hideArrow, onClearSearch, ...rest }: Select
         </Text>
         <SelectedAssetItem hideArrow={hideArrow} onClearSearch={onClearSearch} />
       </Stack>
-      {balance && (
-        <Caption>
-          Balance: {balance} {ticker}
-        </Caption>
-      )}
+      {balance && <Caption>Balance: {balance}</Caption>}
     </Stack>
   );
 });
diff --git a/src/app/pages/send-tokens/hooks/use-selected-asset-balance.ts b/src/app/pages/send-tokens/hooks/use-selected-asset-balance.ts
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
-import { ftDecimals, stacksValue } from '@app/common/stacks-utils';
+import { formatMoney } from '@app/common/money/format-money';
+import { ftDecimals } from '@app/common/stacks-utils';
 import { getTicker } from '@app/common/utils';
 import { useSelectedStacksCryptoAssetBalance } from '@app/query/stacks/balance/crypto-asset-balances.hooks';
 
@@ -12,25 +13,27 @@ export function useSelectedAssetBalance(assetId: string) {
       selectedAssetBalance?.blockchain === 'stacks' &&
       selectedAssetBalance.type === 'crypto-currency';
 
-    const stxBalance = stacksValue({
-      value: selectedAssetBalance?.balance.amount || 0,
-      withTicker: false,
-    });
+    const formattedSelectedAssetBalance = selectedAssetBalance?.balance
+      ? formatMoney(selectedAssetBalance.balance)
+      : '';
 
     const ftBalance = selectedAssetBalance?.asset.decimals
       ? ftDecimals(selectedAssetBalance.balance.amount, selectedAssetBalance.asset.decimals)
       : selectedAssetBalance?.balance.amount.toFormat();
+
     const ticker = selectedAssetBalance
       ? selectedAssetBalance.asset.symbol || getTicker(selectedAssetBalance.asset.name)
       : null;
+
     const hasDecimals =
       selectedAssetBalance?.asset.decimals && selectedAssetBalance.asset.decimals > 0;
+
     const placeholder = `0${
-      hasDecimals ? `.${'0'.repeat(isStx ? 6 : selectedAssetBalance.asset.decimals || 0)}` : ''
+      hasDecimals ? `.${'0'.repeat(selectedAssetBalance.asset.decimals ?? 0)}` : ''
     } ${ticker}`;
 
     return {
-      balance: stxBalance || ftBalance,
+      balance: formattedSelectedAssetBalance || ftBalance,
       isStx,
       name: selectedAssetBalance?.asset.name,
       placeholder,