Merge branch 'main' into feat_LM_link-button-style

e2e/input.e2e.ts

@@ -0,0 +1,13 @@
+import { expect, test } from "@playwright/test";
+
+const testUrl = "/components/input";
+
+test("should trim zero", async ({ page }) => {
+  await page.goto(testUrl);
+
+  const input = page.getByTestId("amount-decimals");
+  await input.fill("0.");
+
+  const output = page.getByTestId("amount-decimals-output");
+  await expect(output).toHaveText("0", { timeout: 500 });
+});

scripts/download-samples.sh

@@ -11,5 +11,5 @@ FILE="$DIR/qrcode.y4m"
 if test -f "$FILE"; then
   echo "$FILE exists"
 else
-  wget --load-cookies /tmp/cookies.txt "https://drive.google.com/uc?export=download&confirm=$(wget --quiet --save-cookies /tmp/cookies.txt --keep-session-cookies --no-check-certificate 'https://drive.google.com/uc?export=download&id=1wpsNoXTX3_y6Wrh7NE0SVwIZufK0-xeu' -O- | sed -rn 's/.*confirm=([0-9A-Za-z_]+).*/\1\n/p')&id=1wpsNoXTX3_y6Wrh7NE0SVwIZufK0-xeu" -O $FILE && rm -rf /tmp/cookies.txt
+  curl -sSL https://dfinity-download-public.s3.eu-central-1.amazonaws.com/static/gix-qrcode.y4m -o "$FILE"
 fi

src/lib/components/Input.svelte

@@ -40,15 +40,16 @@
   let selectionStart: number | null = 0;
   let selectionEnd: number | null = 0;
 
+  const toStringWrapDecimals = (value: string): string =>
+    Number(value).toLocaleString("en", {
+      useGrouping: false,
+      maximumFractionDigits: wrapDecimals,
+    });
+
   // replace exponent format (1e-4) w/ plain (0.0001)
   const exponentToPlainNumberString = (value: string): string =>
     // number to toLocaleString doesn't support decimals for values >= ~1e16
-    value.includes("e")
-      ? Number(value).toLocaleString("en", {
-          useGrouping: false,
-          maximumFractionDigits: wrapDecimals,
-        })
-      : value;
+    value.includes("e") ? toStringWrapDecimals(value) : value;
   // To show undefined as "" (because of the type="text")
   const fixUndefinedValue = (value: string | number | undefined): string =>
     isNullish(value) ? "" : `${value}`;
@@ -134,7 +135,7 @@
         value =
           inputType === "icp"
             ? +currentValue
-            : (+currentValue).toFixed(wrapDecimals);
+            : toStringWrapDecimals(currentValue);
       }
     } else {
       internalValueChange = true;

src/lib/styles/global/colors.scss

@@ -16,7 +16,7 @@
   --cp-light-500: #32449e;
   --cp-light-600: #3d4d99; // never actually used
   --cp-light-900: #151a33;
-  --cp-light-opaque: rgb(from var(--cp-light-50) r g b / 40%);
+  --cp-light-opaque: #ffffff40; // --cp-light-50 with 40% opacity
   --cp-light-gradient-1: #d4e7fa;
   --cp-light-gradient-2: #f2dae2;
 
@@ -35,13 +35,13 @@
   --cp-dark-600: #170c36;
   --cp-dark-650: #150c31;
   --cp-dark-900: #130a2c;
-  --cp-dark-opaque: rgb(from #000 r g b / 20%);
+  --cp-dark-opaque: #00000020;
   --cp-dark-gradient-1: #0f0f4d;
   --cp-dark-gradient-2: #4d1259;
 
   // Accessory
-  --fade: rgba(36, 20, 61, 0.6); // #24143d 60%
-  --fade-dark: rgba(36, 20, 61, 0.8); // #24143d 80%
+  --fade: #24143d60;
+  --fade-dark: #24143d80;
   --orchid-tint: #b871d9;
   --orchid: #af63db;
   --indigo: #553b75;

src/routes/(split)/components/input/+page.md

@@ -1,6 +1,8 @@
 <script lang="ts">
     import Input from "$lib/components/Input.svelte";
     import IconQRCodeScanner from "$lib/icons/IconQRCodeScanner.svelte";
+
+    let amountWithDecimals: number | undefined = undefined;
 </script>
 
 # Input
@@ -55,7 +57,10 @@ Both slots are displayed `flex` with `space-between`.
 
     <Input placeholder="Enter ICP" inputType="icp" value="" />
 
-    <Input placeholder="Enter ETH" inputType="currency" value="" decimals={18} />
+    <div>
+        <Input testId="amount-decimals" placeholder="Enter ETH" inputType="currency" decimals={18} bind:value={amountWithDecimals} />
+        <p>Amount: <output data-tid="amount-decimals-output">{amountWithDecimals ?? ""}</output></p>
+    </div>
 
     <Input placeholder="Disabled" disabled value="This is a disabled value" inputType="text" />
 

src/tests/lib/components/Input.spec.ts

@@ -488,5 +488,29 @@ describe("Input", () => {
       fireEvent.input(input, { target: { value: "0.0000000112312321219" } });
       expect(input.value).toBe("0.000000011231232121");
     });
+
+    it("should not round custom decimals with JS imprecision", () =>
+      new Promise<void>((done) => {
+        const { container, component } = render(InputValueTest, {
+          props: {
+            ...props,
+            value: "0.12",
+            inputType: "currency",
+            decimals: 18,
+          },
+        });
+
+        const input: HTMLInputElement | null = container.querySelector("input");
+        assertNonNullish(input);
+
+        fireEvent.input(input, { target: { value: "0.122" } });
+
+        component.$on("testAmount", ({ detail }) => {
+          // Example if the input would be rounded with Number(value).toFixed(18)
+          expect(detail.amount).not.toBe("0.121999999999999997");
+          expect(detail.amount).toBe("0.122");
+          done();
+        });
+      }));
   });
 });