Merge pull request #2413 from dusk-network/feature-2406

web-wallet: Update migration balance and amount input shown decimals

web-wallet/CHANGELOG.md

@@ -27,13 +27,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update `Stepper` component to new design [#2071]
 - Update dashboard to use routes instead of `Tabs` for navigation pattern [#2075]
 - Update dashboard by splitting the transfer operations into send and receive operations [#2175]
+- Update decimals shown for migration balance [#2406]
 
 ### Fixed
 
 - Fix Receive tab content overflows [#1901]
 - Add missing "Soehne Mono" and its `@font-face` definition [#2071]
 - The sync promise should be set to `null` after aborting a sync [#2118]
 - Fix rounding errors in migration amount input [#2303]
+- Fix number of leading zeros in migration amount input [#2406]
 
 ## [0.5.0] - 2024-03-27
 
@@ -257,6 +259,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2303]: https://github.com/dusk-network/rusk/issues/2303
 [#2310]: https://github.com/dusk-network/rusk/issues/2310
 [#2355]: https://github.com/dusk-network/rusk/issues/2355
+[#2406]: https://github.com/dusk-network/rusk/issues/2406
 
 <!-- VERSIONS -->
 

web-wallet/src/lib/containers/MigrateContract/MigrateContract.svelte

@@ -47,10 +47,12 @@
   const options = ["ERC-20", "BEP-20"];
 
   // The minimum allowed amount to be migrated expressed as a string
-  const minAmount = "0.000000000000000001";
+  const minAmount = "0.000000001";
 
   const ercDecimals = 18;
 
+  const duskDecimals = 9;
+
   /** @type {TokenNames} */
   let selectedChain = erc20.name;
 
@@ -85,7 +87,7 @@
     parseUnits(amount.replace(",", "."), ercDecimals) >=
       parseUnits(minAmount, ercDecimals) &&
     parseUnits(amount.replace(",", "."), ercDecimals) <= connectedWalletBalance;
-  $: amount = cleanNumberString(amount, getDecimalSeparator());
+  $: amount = slashDecimals(cleanNumberString(amount, getDecimalSeparator()));
 
   /**
    *  Triggers the switchChain event and reverts the ExclusiveChoice UI selected option if an error is thrown
@@ -107,6 +109,7 @@
     if (!isConnected) {
       return;
     }
+    amount = "";
     const chainIdToSwitchTo =
       e.target?.value === bep20.name ? bep20.chainId : erc20.chainId;
     await handleSwitchChain(chainIdToSwitchTo);
@@ -141,6 +144,18 @@
     migrationStep++;
   }
 
+  /**
+   * @param {string} numberAsString
+   * @returns {string}
+   */
+  function slashDecimals(numberAsString) {
+    const separator = numberAsString.includes(".") ? "." : ",";
+    const [integer, decimal] = numberAsString.split(separator);
+    return decimal
+      ? `${integer}${separator}${decimal.slice(0, duskDecimals)}`
+      : numberAsString;
+  }
+
   onMount(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -219,7 +234,7 @@
       </p>
       <div class="migrate__token-balance">
         Balance: <span
-          >{formatUnits(connectedWalletBalance, ercDecimals)}
+          >{slashDecimals(formatUnits(connectedWalletBalance, ercDecimals))}
           {selectedChain} DUSK</span
         >
       </div>
@@ -258,7 +273,9 @@
                 ercDecimals
               );
             }
-            amount = formatUnits(connectedWalletBalance, ercDecimals);
+            amount = slashDecimals(
+              formatUnits(connectedWalletBalance, ercDecimals)
+            );
           }}
           text="USE MAX"
           disabled={isInputDisabled}

web-wallet/src/lib/dusk/string/__tests__/cleanNumberString.spec.js

@@ -25,4 +25,10 @@ describe("calculateAdaptiveCharCount", () => {
       cleanNumberString("1321651.0518asds592asd/*-,/?!@#$%^&*()_=+", ".")
     ).toBe("1321651.0518592");
   });
+
+  it("should return a valid string represantation of a number if a string more than one leading zero", () => {
+    expect(cleanNumberString("000.2165", ".")).toBe("0.2165");
+
+    expect(cleanNumberString("0002165", ".")).toBe("2165");
+  });
 });

web-wallet/src/lib/dusk/string/cleanNumberString.js

@@ -9,8 +9,9 @@
 const cleanNumberString = (amount, separator) => {
   const regex = new RegExp(`[^\\d${separator}]+`, "g"); // Remove any character that are not digits or the decimal separator
   const regex2 = new RegExp(`(?<=\\${separator}.*)\\${separator}`, "g"); // Remove all but the first decimal separator
+  const regex3 = new RegExp(/^0+(?=\d)/); // Remove leading zeros
 
-  return amount.replace(regex, "").replace(regex2, "");
+  return amount.replace(regex, "").replace(regex2, "").replace(regex3, "");
 };
 
 export default cleanNumberString;