feat: improve pasting

src/i18n/i18n.ts

@@ -172,6 +172,8 @@ const dict = {
         broadcasting_claim: "Broadcasting claim transaction...",
         open_swap: "Open Swap",
         swap_in_progress: "This swap is still in progress.",
+        paste_invalid:
+            "Clipboard contains invalid characters or maximum amount is exceeded",
     },
     de: {
         language: "Deutsch",
@@ -351,6 +353,8 @@ const dict = {
         broadcasting_claim: "Sende claim transaction...",
         open_swap: "Swap öffnen",
         swap_in_progress: "Dieser Swap ist noch nicht abgeschlossen.",
+        paste_invalid:
+            "Zwischenablage enthält ungültige Zeichen oder der maximale Betrag wurde überschritten",
     },
     es: {
         language: "Español",
@@ -532,6 +536,8 @@ const dict = {
         broadcasting_claim: "Enviando transacción de reclamación...",
         open_swap: "Abrir intercambio",
         swap_in_progress: "Este intercambio aún está en curso.",
+        paste_invalid:
+            "El portapapeles contiene caracteres no válidos o se ha excedido el monto máximo",
     },
     zh: {
         language: "中文",
@@ -696,6 +702,7 @@ const dict = {
         broadcasting_claim: "正在发送索赔交易...",
         open_swap: "打开交换",
         swap_in_progress: "此交换仍在进行中。",
+        paste_invalid: "剪贴板包含无效字符或超出最大金额",
     },
 };
 

src/pages/Create.tsx

@@ -32,7 +32,7 @@ const Create = () => {
     let receiveAmountRef: HTMLInputElement | undefined = undefined;
     let sendAmountRef: HTMLInputElement | undefined = undefined;
 
-    const { setDenomination, denomination, wasmSupported, webln, t } =
+    const { setDenomination, denomination, wasmSupported, webln, t, notify } =
         useGlobalContext();
     const {
         reverse,
@@ -134,10 +134,10 @@ const Create = () => {
     const validatePaste = (evt: ClipboardEvent) => {
         const clipboardData = evt.clipboardData || globalThis.clipboardData;
         const pastedData = clipboardData.getData("Text").trim();
-        changeDenomination(pastedData);
-        if (!getValidationRegex(maximum(), denomination()).test(pastedData)) {
+        if (!getValidationRegex(maximum()).test(pastedData)) {
             evt.stopPropagation();
             evt.preventDefault();
+            notify("error", t("paste_invalid"));
         }
     };
 

src/utils/denomination.ts

@@ -7,14 +7,11 @@ export const denominations = {
     btc: "btc",
 };
 
-export const getValidationRegex = (
-    maximum: number,
-    denomination: string,
-): RegExp => {
-    const regex =
-        denomination === denominations.sat
-            ? `^[0-9]{1,${maximum.toString().length}}$`
-            : `^[0-9](.[0-9]{1,10}){0,1}$`;
+export const getValidationRegex = (maximum: number): RegExp => {
+    const digits = maximum.toString().length;
+    const firstDigit = BigNumber(maximum).div(satFactor).toString().charAt(0);
+    const firstDigitRegex = firstDigit === "0" ? `0` : `0-${firstDigit}`;
+    const regex = `^[0-9]{1,${digits}}$|^[${firstDigitRegex}](\\.[0-9]{1,8}){0,1}$`;
     return new RegExp(regex);
 };
 

tests/utils/denomination.spec.ts

@@ -73,29 +73,23 @@ describe("denomination utils", () => {
     });
 
     describe("check paste validation regex", () => {
-        const max = 100000000;
+        const max = 40_000_000;
 
         test.each`
-            denomination         | amount                  | valid
-            ${denominations.sat} | ${"123123"}             | ${true}
-            ${denominations.sat} | ${max}                  | ${true}
-            ${denominations.sat} | ${max * 10}             | ${false}
-            ${denominations.sat} | ${"lol"}                | ${false}
-            ${denominations.btc} | ${"lol"}                | ${false}
-            ${denominations.btc} | ${"123123"}             | ${true}
-            ${denominations.btc} | ${"0.123123"}           | ${true}
-            ${denominations.btc} | ${"0.1231.23"}          | ${false}
-            ${denominations.btc} | ${"1.12321"}            | ${true}
-            ${denominations.btc} | ${"10.12300011"}        | ${false}
-            ${denominations.btc} | ${max / 10 ** 8}        | ${true}
-            ${denominations.btc} | ${(max / 10 ** 8) * 10} | ${false}
-            ${denominations.btc} | ${"0.12312313123131"}   | ${false}
-        `(
-            "validating regex for $amount in $denomination",
-            ({ denomination, amount, valid }) => {
-                let regex = getValidationRegex(max, denomination);
-                expect(regex.test(amount)).toEqual(valid);
-            },
-        );
+            amount           | valid
+            ${"123123"}      | ${true}
+            ${max}           | ${true}
+            ${max * 10}      | ${false}
+            ${"lol"}         | ${false}
+            ${"0.12312333"}  | ${true}
+            ${"0.1231.23"}   | ${false}
+            ${"1.12321"}     | ${false}
+            ${"10.12300011"} | ${false}
+            ${"0.123123131"} | ${false}
+            ${"0,123"}       | ${false}
+        `("validating regex for $amount", ({ amount, valid }) => {
+            let regex = getValidationRegex(max);
+            expect(regex.test(amount)).toEqual(valid);
+        });
     });
 });