fix: improve pasting (#496)

* feat: improve pasting closes #305 * fixup i18n label * fixup! * fixup! * Update i18n.ts --------- Co-authored-by: Kilian <19181985+kilrau@users.noreply.github.com>
BoltzExchange · Mar 11, 2024 · c9e4a5d · c9e4a5d
1 parent ed395bd
commit c9e4a5d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 37 deletions.
diff --git a/src/i18n/i18n.ts b/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",
@@ -403,16 +407,16 @@ const dict = {
         new_swap: "Nuevo intercambio",
         success_swap: "Intercambio realizado con éxito!",
         feecheck:
-            "La comisión de red se actualizó según la situación de la red. Por favor, confirma los nuevos montos y continúa con el intercambio.",
+            "La comisión de red se actualizó según la situación de la red. Por favor, confirma los nuevos importes y continúa con el intercambio.",
         create_and_paste:
-            "Pegar una factura Lightning bolt11\n o una dirección Lightning\n o un enlace LNURL Pay\n\nMonto: {{ amount }} {{ denomination }}",
+            "Pegar una factura Lightning bolt11\n o una dirección Lightning\n o un enlace LNURL Pay\n\nImporte: {{ amount }} {{ denomination }}",
         congrats: "¡Felicitaciones!",
         successfully_swapped: "Su intercambio se realizó con éxito!",
         timeout_eta: "Tiempo de espera estimado",
         pay_invoice: "Intercambio: {{ id }}",
         pay_swap_404: "¡Intercambio no encontrado!",
         pay_timeout_blockheight: "Altura del bloque de tiempo de espera",
-        pay_expected_amount: "Monto esperado",
+        pay_expected_amount: "Importe esperado",
         send_to: "Enviar {{ amount }} {{ denomination }} a",
         pay_invoice_to: "Pague esta factura de {{ amount }} {{ denomination }}",
         pay_address: "Dirección",
@@ -435,7 +439,7 @@ const dict = {
         invalid_0_amount: "No se admiten facturas sin importe",
         copy_invoice: "Copiar factura Lightning",
         copy_address: "Copiar dirección",
-        copy_amount: "Copiar monto",
+        copy_amount: "Copiar importe",
         copy_bip21: "Copiar BIP21",
         copied: "Copiado",
         backup_skip: "Saltar",
@@ -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 importe máximo",
     },
     zh: {
         language: "中文",
@@ -696,6 +702,7 @@ const dict = {
         broadcasting_claim: "正在发送索赔交易...",
         open_swap: "打开交换",
         swap_in_progress: "此交换仍在进行中。",
+        paste_invalid: "剪贴板包含无效字符或超出最大金额",
     },
 };
 

diff --git a/src/pages/Create.tsx b/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,14 @@ 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"));
+        } else {
+            // replace values from input before pasting
+            const input = evt.currentTarget as HTMLInputElement;
+            input.value = "";
         }
     };
 

diff --git a/src/utils/denomination.ts b/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);
 };
 

diff --git a/tests/utils/denomination.spec.ts b/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);
+        });
     });
 });