[FRE-1247, FRE-1293] fix: improve balance loading state handling and …

…display (#534)
skip-mev · Dec 3, 2024 · ba6a4dc · ba6a4dc
1 parent bf6c1f7
commit ba6a4dc
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/.changeset/perfect-bats-grow.md b/.changeset/perfect-bats-grow.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+improve balance display
diff --git a/packages/widget/src/pages/ErrorPage/ErrorPageTradeWarning.tsx b/packages/widget/src/pages/ErrorPage/ErrorPageTradeWarning.tsx
@@ -62,12 +62,12 @@ export const ErrorPageTradeWarning = ({
         description={
           <>
             <SmallText color={theme.error.text} textAlign="center" textWrap="balance">
-              You will lose ~{swapDifferencePercentage} of your input value with
+              You will lose {swapDifferencePercentage} of your input value with
               this trade
               <br />
               Input: {sourceDetails?.amount} {sourceDetails?.symbol} ({usdAmountIn})
               <br />
-              Estimated output: ~{destinationDetails?.amount}{" "}
+              Estimated output: {destinationDetails?.amount}{" "}
               {destinationDetails?.symbol} ({usdAmountOut})
             </SmallText>
             <SmallTextButton

diff --git a/packages/widget/src/pages/SwapPage/ConnectedWalletContent.tsx b/packages/widget/src/pages/SwapPage/ConnectedWalletContent.tsx
@@ -31,19 +31,14 @@ export const ConnectedWalletContent = () => {
     if (sourceBalance?.error?.message) return "--";
     if (sourceBalance === undefined) return;
 
-    const amount = sourceBalance?.amount;
-    let formattedBalanceAmount = sourceBalance?.formattedAmount;
-
-    if (amount === "0") {
-      formattedBalanceAmount = amount;
-    }
-    formattedBalanceAmount = limitDecimalsDisplayed(
-      removeTrailingZeros(formattedBalanceAmount)
+    const formattedBalanceAmount = limitDecimalsDisplayed(
+      removeTrailingZeros(sourceBalance?.formattedAmount)
     );
 
     return formattedBalanceAmount + symbol;
   }, [sourceBalance, sourceDetails?.symbol]);
   if (!sourceAccount) return null;
+
   return (
     <Row
       gap={6}

diff --git a/packages/widget/src/utils/number.ts b/packages/widget/src/utils/number.ts
@@ -12,8 +12,10 @@ export function formatNumberWithoutCommas(str: string | number) {
   return str.toString().replace(/,/g, "");
 }
 
-export const removeTrailingZeros = (input: string | undefined) =>
-  input?.replace(/0+$/, "").replace(/\.$/, "");
+export const removeTrailingZeros = (input: string | undefined) => {
+  if (input === "0") return input;
+  return input?.replace(/0+$/, "").replace(/\.$/, "");
+}
 
 export function limitDecimalsDisplayed(input: string | number | undefined, decimalPlaces = DEFAULT_DECIMAL_PLACES) {
   if (input === undefined) return "";