@deriv-web-design/ui 0.1.34 → 0.1.35

package/dist/index.js

@@ -9676,8 +9676,8 @@ function createMarketFeed(discovered, handlers, options = {}) {
           const resolved = resolveMetaId(key, meta);
           if (!resolved) continue;
           applyTick(resolved.id, resolved.meta, tick);
-          subscribeTicker(resolved.id);
-          subscribeKline(resolved.id);
+          subscribeTicker(key);
+          subscribeKline(key);
         }
         return;
       }
@@ -10026,8 +10026,8 @@ function CoinAvatar({ base, icon, label }) {
       className: "ctc-avatar",
       src: icon,
       alt: "",
-      width: 32,
-      height: 32,
+      width: 30,
+      height: 30,
       loading: "lazy",
       decoding: "async",
       onError: () => setFailed(true),
@@ -10035,6 +10035,24 @@ function CoinAvatar({ base, icon, label }) {
     }
   );
 }
+function ChevronIcon4({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    "svg",
+    {
+      className,
+      width: 20,
+      height: 20,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
 var CryptoTradeConverter = ({
   variant: _variant = "default",
   market: _market = "spot",
@@ -10141,6 +10159,11 @@ var CryptoTradeConverter = ({
   const priceReady = selected?.last != null && Number.isFinite(selected.last) && selected.last > 0;
   const ctaDisabled = !priceReady || snapshot.status === "unsupported" || snapshot.status === "error" || !conversion.valid;
   const changeClass = selected?.change24hPct == null ? "" : selected.change24hPct >= 0 ? "ctc-change--up" : "ctc-change--down";
+  const payValue = edited === "pay" ? pay : conversion.pay;
+  const receiveValue = edited === "receive" ? receive : conversion.receive;
+  const receiveMeta = priceReady && selected ? `Estimate at 1 ${selected.base} = ${formatPrice(selected.last, selected.pricePrecision)} ${selected.quote}. Fees and spread excluded.` : snapshot.status === "unsupported" ? "Please use a current browser to view live prices." : conversion.error || (snapshot.status === "idle" || snapshot.status === "connecting" ? "Connecting to live prices\u2026" : "Waiting for live price\u2026");
+  const ctaLabel = side === "buy" ? "Buy" : "Sell";
+  const ctaClass = ["ctc-cta__btn", side === "sell" ? "is-sell" : "is-buy"].join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "section",
     {
@@ -10154,33 +10177,20 @@ var CryptoTradeConverter = ({
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h2", { id: `ctc-heading-${reactId}`, className: "ctc-title", children: "Buy and sell in seconds" }),
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "ctc-subtitle", children: "Choose your asset, enter an amount, and confirm. Your crypto lands in your account instantly, ready to trade, hold, or withdraw whenever you want." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ctc-card", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: `ctc-status ctc-status--${statusTone}`, id: statusId, role: "status", "aria-live": "polite", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-status-dot", "aria-hidden": "true" }),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: snapshot.status === "idle" || snapshot.status === "connecting" ? "Connecting to live prices\u2026" : snapshot.statusMessage || (priceReady ? "Live prices" : "Waiting for live price\u2026") })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ctc-seg", role: "group", "aria-label": "Trade side", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-              "button",
-              {
-                type: "button",
-                className: side === "buy" ? "ctc-seg__btn is-active is-buy" : "ctc-seg__btn is-buy",
-                "aria-pressed": side === "buy",
-                onClick: () => setSide("buy"),
-                children: "Buy"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-              "button",
-              {
-                type: "button",
-                className: side === "sell" ? "ctc-seg__btn is-active is-sell" : "ctc-seg__btn is-sell",
-                "aria-pressed": side === "sell",
-                onClick: () => setSide("sell"),
-                children: "Sell"
-              }
-            )
-          ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ctc-card", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ctc-widget", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+            "div",
+            {
+              className: `ctc-status ctc-status--${statusTone}`,
+              id: statusId,
+              role: "status",
+              "aria-live": "polite",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-status-dot", "aria-hidden": "true" }),
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: snapshot.status === "idle" || snapshot.status === "connecting" ? "Connecting to live prices\u2026" : snapshot.statusMessage || (priceReady ? "Live prices" : "Waiting for live price\u2026") })
+              ]
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ctc-pair", children: [
             /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
               "button",
@@ -10225,129 +10235,171 @@ var CryptoTradeConverter = ({
                     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-pair__name", children: "Select a market" }),
                     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-pair__price", children: "\u2014" })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-pair__chevron", "aria-hidden": "true", children: "\u25BE" })
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ChevronIcon4, { className: "ctc-pair__chevron" })
                 ]
               }
             ),
-            pickerOpen ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            pickerOpen ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
               "ul",
               {
                 ref: listRef,
                 id: listboxId,
                 className: "ctc-listbox",
                 role: "listbox",
-                "aria-label": "Market pairs",
+                "aria-label": "Choose a market",
                 tabIndex: -1,
                 onKeyDown: onPickerKeyDown,
-                children: sortedRows.map((row, index) => {
-                  const selectedOption = selected?.id === row.id;
-                  const active = index === activeOption;
-                  const rowChange = row.change24hPct == null ? "" : row.change24hPct >= 0 ? "ctc-change--up" : "ctc-change--down";
-                  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-                    "li",
-                    {
-                      id: `${listboxId}-opt-${index}`,
-                      role: "option",
-                      "aria-selected": selectedOption,
-                      className: [
-                        "ctc-option",
-                        active ? "is-active" : "",
-                        selectedOption ? "is-selected" : ""
-                      ].filter(Boolean).join(" "),
-                      onMouseEnter: () => setActiveOption(index),
-                      onClick: () => {
-                        setSelectedId(row.id);
-                        closePicker();
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { className: "ctc-listbox__header", role: "presentation", children: "Choose a market" }),
+                  sortedRows.map((row, index) => {
+                    const selectedOption = selected?.id === row.id;
+                    const active = index === activeOption;
+                    const rowChange = row.change24hPct == null ? "" : row.change24hPct >= 0 ? "ctc-change--up" : "ctc-change--down";
+                    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+                      "li",
+                      {
+                        id: `${listboxId}-opt-${index}`,
+                        role: "option",
+                        "aria-selected": selectedOption,
+                        className: [
+                          "ctc-option",
+                          active ? "is-active" : "",
+                          selectedOption ? "is-selected" : ""
+                        ].filter(Boolean).join(" "),
+                        onMouseEnter: () => setActiveOption(index),
+                        onClick: () => {
+                          setSelectedId(row.id);
+                          closePicker();
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CoinAvatar, { base: row.base, icon: row.icon, label: row.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ctc-option__text", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-option__name", children: row.name }),
+                            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-option__sub", children: row.longName })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ctc-option__stats", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: formatPrice(row.last, row.pricePrecision) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: ["ctc-change", rowChange].filter(Boolean).join(" "), children: formatPct(row.change24hPct) })
+                          ] })
+                        ]
                       },
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CoinAvatar, { base: row.base, icon: row.icon, label: row.name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ctc-option__text", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-option__name", children: row.name }),
-                          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-option__sub", children: row.longName })
-                        ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ctc-option__stats", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: formatPrice(row.last, row.pricePrecision) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: ["ctc-change", rowChange].filter(Boolean).join(" "), children: formatPct(row.change24hPct) })
-                        ] })
-                      ]
-                    },
-                    row.id
-                  );
-                })
+                      row.id
+                    );
+                  })
+                ]
               }
             ) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ctc-fields", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ctc-seg", role: "group", "aria-label": "Trade side", children: [
             /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-              TextField,
+              "button",
               {
-                id: payId,
-                label: `You pay (${labels.pay})`,
-                inputMode: "decimal",
-                autoComplete: "off",
-                placeholder: "0.00",
-                value: edited === "pay" ? pay : conversion.pay,
-                status: conversion.error ? "fail" : "neutral",
-                "aria-invalid": Boolean(conversion.error),
-                "aria-describedby": statusId,
-                onChange: (event) => {
-                  setEdited("pay");
-                  setPay(event.target.value);
-                }
+                type: "button",
+                className: side === "buy" ? "ctc-seg__btn is-active is-buy" : "ctc-seg__btn is-buy",
+                "aria-pressed": side === "buy",
+                onClick: () => setSide("buy"),
+                children: "Buy"
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-              TextField,
+              "button",
               {
-                id: receiveId,
-                label: `You receive (${labels.receive})`,
-                inputMode: "decimal",
-                autoComplete: "off",
-                placeholder: "0.00",
-                value: edited === "receive" ? receive : conversion.receive,
-                status: conversion.error ? "fail" : "neutral",
-                "aria-invalid": Boolean(conversion.error),
-                "aria-describedby": priceReady && selected ? `ctc-rate-${reactId}` : statusId,
-                onChange: (event) => {
-                  setEdited("receive");
-                  setReceive(event.target.value);
-                }
+                type: "button",
+                className: side === "sell" ? "ctc-seg__btn is-active is-sell" : "ctc-seg__btn is-sell",
+                "aria-pressed": side === "sell",
+                onClick: () => setSide("sell"),
+                children: "Sell"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ctc-fields", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+              "label",
+              {
+                className: ["ctc-amount", conversion.error ? "is-invalid" : ""].filter(Boolean).join(" "),
+                htmlFor: payId,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-amount__label", children: "You pay" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ctc-amount__row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                      "input",
+                      {
+                        id: payId,
+                        className: "ctc-amount__input",
+                        type: "text",
+                        inputMode: "decimal",
+                        autoComplete: "off",
+                        placeholder: "0.00",
+                        value: payValue,
+                        "aria-label": "Primary trade amount",
+                        "aria-invalid": Boolean(conversion.error),
+                        "aria-describedby": statusId,
+                        onChange: (event) => {
+                          setEdited("pay");
+                          setPay(event.target.value);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-amount__unit", children: labels.pay })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-amount__meta", children: "Amount to spend" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+              "label",
+              {
+                className: ["ctc-amount", conversion.error ? "is-invalid" : ""].filter(Boolean).join(" "),
+                htmlFor: receiveId,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-amount__label", children: "You receive" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "ctc-amount__row", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                      "input",
+                      {
+                        id: receiveId,
+                        className: "ctc-amount__input",
+                        type: "text",
+                        inputMode: "decimal",
+                        autoComplete: "off",
+                        placeholder: "0.00",
+                        value: receiveValue,
+                        "aria-label": "Converted trade amount",
+                        "aria-invalid": Boolean(conversion.error),
+                        "aria-describedby": `ctc-rate-${reactId}`,
+                        onChange: (event) => {
+                          setEdited("receive");
+                          setReceive(event.target.value);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ctc-amount__unit", children: labels.receive })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { id: `ctc-rate-${reactId}`, className: "ctc-amount__meta", children: receiveMeta })
+                ]
               }
             )
           ] }),
-          priceReady && selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { id: `ctc-rate-${reactId}`, className: "ctc-rate", children: [
-            "Estimate at 1 ",
-            selected.base,
-            " = ",
-            formatPrice(selected.last, selected.pricePrecision),
-            " ",
-            selected.quote,
-            ". Fees and spread excluded."
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "ctc-rate", role: "status", children: snapshot.status === "unsupported" ? "Please use a current browser to view live prices." : conversion.error || "Waiting for a live market price\u2026" }),
           conversion.error ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "ctc-error", role: "alert", children: conversion.error }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ctc-cta", children: ctaDisabled ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            Button,
+            "button",
             {
               type: "button",
-              colorScheme: "coral",
-              variant: "primary",
-              fullWidth: true,
-              label: side === "buy" ? "Buy" : "Sell",
+              className: ctaClass,
               disabled: true,
-              "aria-disabled": "true"
+              "aria-disabled": "true",
+              children: ctaLabel
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("a", { className: "ctc-cta-link", href: tradeHref, rel: "noopener noreferrer", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            Button,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            "a",
             {
-              type: "button",
-              colorScheme: "coral",
-              variant: "primary",
-              fullWidth: true,
-              label: side === "buy" ? "Buy" : "Sell",
-              tabIndex: -1
+              className: ["ctc-cta-link", side === "sell" ? "is-sell" : "is-buy"].join(" "),
+              href: tradeHref,
+              rel: "noopener noreferrer",
+              children: ctaLabel
             }
-          ) }) })
-        ] })
+          ) })
+        ] }) })
       ] })
     }
   );