@deriv-web-design/ui 0.1.34 → 0.1.36

package/dist/index.mjs

@@ -8216,7 +8216,55 @@ var ParallaxBanner = ({
 
 // templates/TradingCalculator/TradingCalculator.tsx
 import { useCallback as useCallback6, useEffect as useEffect18, useId as useId6, useMemo as useMemo7, useRef as useRef21, useState as useState23 } from "react";
+
+// templates/TradingCalculator/TradingCalculator.types.ts
+var DEFAULT_TRADING_CALCULATOR_LABELS = {
+  calculatorPanel: "Calculator",
+  resultsPanel: "Results",
+  calculate: "Calculate",
+  calculating: "Calculating\u2026",
+  reset: "Reset",
+  symbols: "Symbols",
+  volume: "Volume in Lots",
+  assetPrice: "Asset price",
+  contractSize: "Contract size",
+  pipSize: "Pip size",
+  effectiveLeverage: "Effective Leverage",
+  pointSize: "Point size",
+  marginRequired: "Margin Required",
+  tradeVolume: "Trade Volume",
+  pipValue: "Pip value",
+  swapChargeLong: "Swap Charge Long",
+  swapChargeShort: "Swap Charge Short",
+  swapLongRate: "Swap long rate",
+  swapShortRate: "Swap short rate",
+  swapCalculationType: "Swap calculation type",
+  threeDaySwap: "Three-day swap",
+  weekendSwaps: "Weekend swaps",
+  threeDaySwapFallback: "No",
+  loadingSymbols: "Loading symbols\u2026",
+  symbolsUnavailable: "Symbols unavailable",
+  searchSymbolPlaceholder: "Search symbol, e.g. EURUSD",
+  symbolsLoadError: "Unable to load symbols.",
+  retry: "Retry",
+  selectSymbolError: "Select a symbol to continue.",
+  volumeRequiredError: "Enter a valid volume in lots.",
+  volumePositiveError: "Volume must be greater than 0.",
+  volumeRangeError: "Volume must be between {min} and {max} lots.",
+  assetPriceError: "Enter a valid asset price.",
+  exchangeRateError: "Unable to fetch live exchange rates. Please try again.",
+  exchangeRateErrorWithMessage: "Unable to fetch live exchange rates ({message}). Please try again.",
+  noSymbolsMatch: 'No symbols match "{query}"'
+};
+
+// templates/TradingCalculator/TradingCalculator.tsx
 import { Fragment as Fragment11, jsx as jsx60, jsxs as jsxs56 } from "react/jsx-runtime";
+function fillTemplate2(template, values) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
+}
+function mergeLabels(overrides) {
+  return { ...DEFAULT_TRADING_CALCULATOR_LABELS, ...overrides };
+}
 var DEFAULT_SYMBOLS_ENDPOINT = "https://deriv-static-pricingfeedv2.firebaseio.com/n8n/row/prod/dynamic_trading_specs.json";
 var DEFAULT_EXCHANGE_RATE_WS_URL = "wss://ws.derivws.com/websockets/v3?app_id=1089";
 var USD = "USD";
@@ -8376,7 +8424,15 @@ function groupByAssetClass(symbols) {
   }
   return [...groups.entries()];
 }
-var SymbolCombobox = ({ symbolsState, onRetry, selected, onSelect, error, inputId }) => {
+var SymbolCombobox = ({
+  symbolsState,
+  onRetry,
+  selected,
+  onSelect,
+  error,
+  inputId,
+  copy
+}) => {
   const [query, setQuery] = useState23("");
   const [isOpen, setIsOpen] = useState23(false);
   const [activeIndex, setActiveIndex] = useState23(-1);
@@ -8434,7 +8490,8 @@ var SymbolCombobox = ({ symbolsState, onRetry, selected, onSelect, error, inputI
       {
         id: inputId,
         label: /* @__PURE__ */ jsxs56(Fragment11, { children: [
-          "Symbols ",
+          copy.symbols,
+          " ",
           /* @__PURE__ */ jsx60("span", { className: "tcalc-required", children: "*" })
         ] }),
         role: "combobox",
@@ -8449,7 +8506,7 @@ var SymbolCombobox = ({ symbolsState, onRetry, selected, onSelect, error, inputI
         disabled: isLoading || isError,
         hideClearButton: true,
         trailingSlot: /* @__PURE__ */ jsx60(ChevronIcon3, {}),
-        placeholder: isLoading ? "Loading symbols\u2026" : isError ? "Symbols unavailable" : "Search symbol, e.g. EURUSD",
+        placeholder: isLoading ? copy.loadingSymbols : isError ? copy.symbolsUnavailable : copy.searchSymbolPlaceholder,
         value: displayValue,
         onFocus: () => setIsOpen(true),
         onChange: (event) => {
@@ -8461,11 +8518,7 @@ var SymbolCombobox = ({ symbolsState, onRetry, selected, onSelect, error, inputI
       }
     ),
     isOpen && !isLoading && !isError && /* @__PURE__ */ jsxs56("div", { className: "tcalc-dropdown", id: listboxId, role: "listbox", children: [
-      grouped.length === 0 && /* @__PURE__ */ jsxs56("p", { className: "tcalc-dropdownEmpty", children: [
-        'No symbols match "',
-        query,
-        '"'
-      ] }),
+      grouped.length === 0 && /* @__PURE__ */ jsx60("p", { className: "tcalc-dropdownEmpty", children: fillTemplate2(copy.noSymbolsMatch, { query }) }),
       grouped.map(([assetClass, items]) => /* @__PURE__ */ jsxs56("div", { className: "tcalc-dropdownGroup", children: [
         /* @__PURE__ */ jsx60("p", { className: "tcalc-dropdownGroupTitle", children: assetClass }),
         items.map((item) => {
@@ -8497,9 +8550,10 @@ var SymbolCombobox = ({ symbolsState, onRetry, selected, onSelect, error, inputI
     ] }),
     isError && /* @__PURE__ */ jsxs56("p", { className: "tcalc-fieldError", children: [
       /* @__PURE__ */ jsx60(ErrorIcon, {}),
-      " Unable to load symbols.",
       " ",
-      /* @__PURE__ */ jsx60("button", { type: "button", className: "tcalc-retryLink", onClick: onRetry, children: "Retry" })
+      copy.symbolsLoadError,
+      " ",
+      /* @__PURE__ */ jsx60("button", { type: "button", className: "tcalc-retryLink", onClick: onRetry, children: copy.retry })
     ] }),
     !isError && error && /* @__PURE__ */ jsxs56("p", { className: "tcalc-fieldError", children: [
       /* @__PURE__ */ jsx60(ErrorIcon, {}),
@@ -8527,9 +8581,11 @@ var TradingCalculator = ({
   symbolsEndpoint = DEFAULT_SYMBOLS_ENDPOINT,
   exchangeRateWsUrl = DEFAULT_EXCHANGE_RATE_WS_URL,
   defaultSymbol,
+  labels: labelsProp,
   className,
   ...props
 }) => {
+  const copy = mergeLabels(labelsProp);
   const showMargin = variant === "main" || variant === "margin";
   const showPip = variant === "main" || variant === "pip";
   const showSwap = variant === "main" || variant === "swap";
@@ -8573,15 +8629,18 @@ var TradingCalculator = ({
     const volume = Number.parseFloat(volumeInLots);
     const price = Number.parseFloat(assetPrice);
     const nextErrors = {};
-    if (!selectedSymbol) nextErrors.symbol = "Select a symbol to continue.";
+    if (!selectedSymbol) nextErrors.symbol = copy.selectSymbolError;
     if (!volumeInLots || Number.isNaN(volume)) {
-      nextErrors.volume = "Enter a valid volume in lots.";
+      nextErrors.volume = copy.volumeRequiredError;
     } else if (volume <= 0) {
-      nextErrors.volume = "Volume must be greater than 0.";
+      nextErrors.volume = copy.volumePositiveError;
     } else if (selectedSymbol && (volume < selectedSymbol.volume_min || volume > selectedSymbol.volume_limit)) {
-      nextErrors.volume = `Volume must be between ${selectedSymbol.volume_min} and ${selectedSymbol.volume_limit} lots.`;
+      nextErrors.volume = fillTemplate2(copy.volumeRangeError, {
+        min: String(selectedSymbol.volume_min),
+        max: String(selectedSymbol.volume_limit)
+      });
     }
-    if (!assetPrice || Number.isNaN(price) || price <= 0) nextErrors.price = "Enter a valid asset price.";
+    if (!assetPrice || Number.isNaN(price) || price <= 0) nextErrors.price = copy.assetPriceError;
     setErrors(nextErrors);
     if (Object.keys(nextErrors).length > 0 || !selectedSymbol) return;
     setCalcError(null);
@@ -8592,7 +8651,7 @@ var TradingCalculator = ({
       setResults(computeResults(selectedSymbol, volume, price, rates));
     } catch (error) {
       setCalcError(
-        error instanceof Error ? `Unable to fetch live exchange rates (${error.message}). Please try again.` : "Unable to fetch live exchange rates. Please try again."
+        error instanceof Error ? fillTemplate2(copy.exchangeRateErrorWithMessage, { message: error.message }) : copy.exchangeRateError
       );
     } finally {
       setIsCalculating(false);
@@ -8603,7 +8662,7 @@ var TradingCalculator = ({
   const priceInputId = useId6();
   return /* @__PURE__ */ jsx60("section", { className: ["tcalc-section", className ?? ""].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsx60("div", { className: "tcalc-container", children: /* @__PURE__ */ jsxs56("div", { className: "tcalc-card", children: [
     /* @__PURE__ */ jsxs56("div", { className: "tcalc-column", children: [
-      /* @__PURE__ */ jsx60("h3", { className: "tcalc-panelTitle", children: "Calculator" }),
+      /* @__PURE__ */ jsx60("h3", { className: "tcalc-panelTitle", children: copy.calculatorPanel }),
       /* @__PURE__ */ jsx60(
         SymbolCombobox,
         {
@@ -8612,20 +8671,21 @@ var TradingCalculator = ({
           selected: selectedSymbol,
           onSelect: handleSelectSymbol,
           error: errors.symbol,
-          inputId: symbolInputId
+          inputId: symbolInputId,
+          copy
         }
       ),
       /* @__PURE__ */ jsxs56("div", { className: "tcalc-infoGrid", children: [
-        /* @__PURE__ */ jsx60(InfoRow, { label: "Contract size", value: selectedSymbol ? integerFormatter.format(selectedSymbol.contract_size) : "-" }),
-        /* @__PURE__ */ jsx60(InfoRow, { label: "Pip size", value: selectedSymbol ? String(selectedSymbol.pip_size) : "-" }),
+        /* @__PURE__ */ jsx60(InfoRow, { label: copy.contractSize, value: selectedSymbol ? integerFormatter.format(selectedSymbol.contract_size) : "-" }),
+        /* @__PURE__ */ jsx60(InfoRow, { label: copy.pipSize, value: selectedSymbol ? String(selectedSymbol.pip_size) : "-" }),
         /* @__PURE__ */ jsx60(
           InfoRow,
           {
-            label: "Effective Leverage",
+            label: copy.effectiveLeverage,
             value: selectedSymbol ? `1 : ${Math.round((selectedSymbol.effective_leverage + Number.EPSILON) * 100) / 100}` : "-"
           }
         ),
-        /* @__PURE__ */ jsx60(InfoRow, { label: "Point size", value: selectedSymbol ? String(selectedSymbol.point_size) : "-" })
+        /* @__PURE__ */ jsx60(InfoRow, { label: copy.pointSize, value: selectedSymbol ? String(selectedSymbol.point_size) : "-" })
       ] }),
       /* @__PURE__ */ jsxs56("div", { className: "tcalc-field", children: [
         /* @__PURE__ */ jsx60(
@@ -8634,7 +8694,8 @@ var TradingCalculator = ({
             id: volumeInputId,
             className: "tcalc-numberField",
             label: /* @__PURE__ */ jsxs56(Fragment11, { children: [
-              "Volume in Lots ",
+              copy.volume,
+              " ",
               /* @__PURE__ */ jsx60("span", { className: "tcalc-required", children: "*" })
             ] }),
             status: errors.volume ? "fail" : "neutral",
@@ -8651,7 +8712,7 @@ var TradingCalculator = ({
               const isNegative = value !== "" && !Number.isNaN(parsed) && parsed <= 0;
               setErrors((prev) => ({
                 ...prev,
-                volume: isNegative ? "Volume must be greater than 0." : void 0
+                volume: isNegative ? copy.volumePositiveError : void 0
               }));
             }
           }
@@ -8669,7 +8730,8 @@ var TradingCalculator = ({
             id: priceInputId,
             className: "tcalc-numberField",
             label: /* @__PURE__ */ jsxs56(Fragment11, { children: [
-              "Asset price ",
+              copy.assetPrice,
+              " ",
               /* @__PURE__ */ jsx60("span", { className: "tcalc-required", children: "*" })
             ] }),
             status: errors.price ? "fail" : "neutral",
@@ -8698,7 +8760,7 @@ var TradingCalculator = ({
             type: "button",
             colorScheme: "coral",
             variant: "primary",
-            label: isCalculating ? "Calculating\u2026" : "Calculate",
+            label: isCalculating ? copy.calculating : copy.calculate,
             onClick: handleCalculate,
             disabled: isCalculating,
             fullWidth: true
@@ -8710,7 +8772,7 @@ var TradingCalculator = ({
             type: "button",
             colorScheme: "black",
             variant: "secondary",
-            label: "Reset",
+            label: copy.reset,
             onClick: handleReset,
             fullWidth: true
           }
@@ -8718,16 +8780,16 @@ var TradingCalculator = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxs56("div", { className: "tcalc-column tcalc-column--results", children: [
-      /* @__PURE__ */ jsx60("h3", { className: "tcalc-panelTitle", children: "Results" }),
-      showMargin && /* @__PURE__ */ jsx60(ResultBox, { label: "Margin Required", value: results ? formatMoney(results.marginRequired) : "$" }),
+      /* @__PURE__ */ jsx60("h3", { className: "tcalc-panelTitle", children: copy.resultsPanel }),
+      showMargin && /* @__PURE__ */ jsx60(ResultBox, { label: copy.marginRequired, value: results ? formatMoney(results.marginRequired) : "$" }),
       showTradeVolume && showPip && /* @__PURE__ */ jsxs56("div", { className: "tcalc-resultRow", children: [
-        /* @__PURE__ */ jsx60(ResultBox, { label: "Trade Volume", value: results ? formatInteger(results.tradeVolume) : "$" }),
-        /* @__PURE__ */ jsx60(ResultBox, { label: "Pip value", value: results ? formatMoney(results.pipValue) : "$" })
+        /* @__PURE__ */ jsx60(ResultBox, { label: copy.tradeVolume, value: results ? formatInteger(results.tradeVolume) : "$" }),
+        /* @__PURE__ */ jsx60(ResultBox, { label: copy.pipValue, value: results ? formatMoney(results.pipValue) : "$" })
       ] }),
-      !showTradeVolume && showPip && /* @__PURE__ */ jsx60(ResultBox, { label: "Pip value", value: results ? formatMoney(results.pipValue) : "$" }),
+      !showTradeVolume && showPip && /* @__PURE__ */ jsx60(ResultBox, { label: copy.pipValue, value: results ? formatMoney(results.pipValue) : "$" }),
       showSwap && /* @__PURE__ */ jsxs56("div", { className: "tcalc-resultRow", children: [
-        /* @__PURE__ */ jsx60(ResultBox, { label: "Swap Charge Long", value: results ? formatMoney(results.swapChargeLong) : "$" }),
-        /* @__PURE__ */ jsx60(ResultBox, { label: "Swap Charge Short", value: results ? formatMoney(results.swapChargeShort) : "$" })
+        /* @__PURE__ */ jsx60(ResultBox, { label: copy.swapChargeLong, value: results ? formatMoney(results.swapChargeLong) : "$" }),
+        /* @__PURE__ */ jsx60(ResultBox, { label: copy.swapChargeShort, value: results ? formatMoney(results.swapChargeShort) : "$" })
       ] }),
       calcError && /* @__PURE__ */ jsxs56("p", { className: "tcalc-fieldError tcalc-calcError", children: [
         /* @__PURE__ */ jsx60(ErrorIcon, {}),
@@ -8736,12 +8798,12 @@ var TradingCalculator = ({
       ] }),
       showSwap && /* @__PURE__ */ jsxs56(Fragment11, { children: [
         /* @__PURE__ */ jsxs56("div", { className: "tcalc-infoGrid", children: [
-          /* @__PURE__ */ jsx60(InfoRow, { label: "Swap long rate", value: selectedSymbol ? String(selectedSymbol.swap_rate_long) : "-" }),
-          /* @__PURE__ */ jsx60(InfoRow, { label: "Swap short rate", value: selectedSymbol ? String(selectedSymbol.swap_rate_short) : "-" })
+          /* @__PURE__ */ jsx60(InfoRow, { label: copy.swapLongRate, value: selectedSymbol ? String(selectedSymbol.swap_rate_long) : "-" }),
+          /* @__PURE__ */ jsx60(InfoRow, { label: copy.swapShortRate, value: selectedSymbol ? String(selectedSymbol.swap_rate_short) : "-" })
         ] }),
-        /* @__PURE__ */ jsx60(InfoRow, { separator: ":", label: "Swap calculation type", value: selectedSymbol ? selectedSymbol.swap_mode : "-" }),
-        /* @__PURE__ */ jsx60(InfoRow, { separator: ":", label: "Three-day swap", value: selectedSymbol ? selectedSymbol.three_day_swap || "No" : "-" }),
-        /* @__PURE__ */ jsx60(InfoRow, { separator: ":", label: "Weekend swaps", value: selectedSymbol ? String(selectedSymbol.weekend_swaps ?? "-") : "-" })
+        /* @__PURE__ */ jsx60(InfoRow, { separator: ":", label: copy.swapCalculationType, value: selectedSymbol ? selectedSymbol.swap_mode : "-" }),
+        /* @__PURE__ */ jsx60(InfoRow, { separator: ":", label: copy.threeDaySwap, value: selectedSymbol ? selectedSymbol.three_day_swap || copy.threeDaySwapFallback : "-" }),
+        /* @__PURE__ */ jsx60(InfoRow, { separator: ":", label: copy.weekendSwaps, value: selectedSymbol ? String(selectedSymbol.weekend_swaps ?? "-") : "-" })
       ] })
     ] })
   ] }) }) });
@@ -9346,9 +9408,11 @@ function browserSupportsMarketStreaming() {
 
 // templates/cryptoMarketData/conversion.ts
 function convertAmounts(options) {
+  const waitingForPrice = options.messages?.waitingForPrice ?? "Waiting for a live price";
+  const invalidAmount = options.messages?.invalidAmount ?? "Enter a valid amount";
   const price = options.price;
   if (price == null || !Number.isFinite(price) || price <= 0) {
-    return { pay: options.payInput, receive: options.receiveInput, valid: false, error: "Waiting for a live price" };
+    return { pay: options.payInput, receive: options.receiveInput, valid: false, error: waitingForPrice };
   }
   const source = options.edited === "pay" ? options.payInput : options.receiveInput;
   const trimmed = source.trim();
@@ -9361,7 +9425,7 @@ function convertAmounts(options) {
       pay: options.payInput,
       receive: options.receiveInput,
       valid: false,
-      error: "Enter a valid amount"
+      error: invalidAmount
     };
   }
   if (options.side === "buy") {
@@ -9578,8 +9642,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;
       }
@@ -9906,9 +9970,39 @@ function useCryptoMarketData(options) {
   return snapshot;
 }
 
+// templates/CryptoTradeConverter/CryptoTradeConverter.types.ts
+var DEFAULT_CRYPTO_TRADE_CONVERTER_TITLE = "Buy and sell in seconds";
+var DEFAULT_CRYPTO_TRADE_CONVERTER_SUBTITLE = "Choose your asset, enter an amount, and confirm. Your crypto lands in your account instantly, ready to trade, hold, or withdraw whenever you want.";
+var DEFAULT_CRYPTO_TRADE_CONVERTER_LABELS = {
+  buy: "Buy",
+  sell: "Sell",
+  connecting: "Connecting to live prices\u2026",
+  livePrices: "Live prices",
+  waitingForPrice: "Waiting for a live price",
+  unsupportedBrowser: "Please use a current browser to view live prices.",
+  selectMarket: "Select a market",
+  chooseMarket: "Choose a market",
+  tradeSideGroup: "Trade side",
+  youPay: "You pay",
+  youReceive: "You receive",
+  amountToSpend: "Amount to spend",
+  primaryAmountAria: "Primary trade amount",
+  convertedAmountAria: "Converted trade amount",
+  estimateTemplate: "Estimate at 1 {base} = {price} {quote}. Fees and spread excluded.",
+  change24hSuffix: "(24h)",
+  waitingForLivePrice: "Waiting for live price\u2026",
+  invalidAmount: "Enter a valid amount"
+};
+
 // templates/CryptoTradeConverter/CryptoTradeConverter.tsx
 import { Fragment as Fragment14, jsx as jsx62, jsxs as jsxs58 } from "react/jsx-runtime";
 var DEFAULT_TRADE_HREF = "https://deriv.exchange";
+function fillTemplate3(template, values) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
+}
+function mergeLabels2(overrides) {
+  return { ...DEFAULT_CRYPTO_TRADE_CONVERTER_LABELS, ...overrides };
+}
 function matchPair(rows, defaultPair) {
   if (!rows.length) return null;
   if (!defaultPair) {
@@ -9928,8 +10022,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),
@@ -9937,14 +10031,36 @@ function CoinAvatar({ base, icon, label }) {
     }
   );
 }
+function ChevronIcon4({ className }) {
+  return /* @__PURE__ */ jsx62(
+    "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__ */ jsx62("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
 var CryptoTradeConverter = ({
   variant: _variant = "default",
   market: _market = "spot",
   defaultPair,
   tradeHref = DEFAULT_TRADE_HREF,
   apiOrigin,
+  title = DEFAULT_CRYPTO_TRADE_CONVERTER_TITLE,
+  subtitle = DEFAULT_CRYPTO_TRADE_CONVERTER_SUBTITLE,
+  labels: labelsProp,
   className
 }) => {
+  const copy = mergeLabels2(labelsProp);
   const reactId = useId7().replace(/:/g, "");
   const listboxId = `ctc-listbox-${reactId}`;
   const payId = `ctc-pay-${reactId}`;
@@ -9972,9 +10088,13 @@ var CryptoTradeConverter = ({
       price: selected?.last ?? null,
       payInput: pay,
       receiveInput: receive,
-      edited
+      edited,
+      messages: {
+        waitingForPrice: copy.waitingForPrice,
+        invalidAmount: copy.invalidAmount
+      }
     }),
-    [side, selected?.last, pay, receive, edited]
+    [side, selected?.last, pay, receive, edited, copy.waitingForPrice, copy.invalidAmount]
   );
   useEffect21(() => {
     if (edited === "pay") setReceive(conversion.receive);
@@ -10043,6 +10163,15 @@ 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 ? fillTemplate3(copy.estimateTemplate, {
+    base: selected.base,
+    price: formatPrice(selected.last, selected.pricePrecision),
+    quote: selected.quote
+  }) : snapshot.status === "unsupported" ? copy.unsupportedBrowser : conversion.error || (snapshot.status === "idle" || snapshot.status === "connecting" ? copy.connecting : copy.waitingForLivePrice);
+  const ctaLabel = side === "buy" ? copy.buy : copy.sell;
+  const ctaClass = ["ctc-cta__btn", side === "sell" ? "is-sell" : "is-buy"].join(" ");
   return /* @__PURE__ */ jsx62(
     "section",
     {
@@ -10053,36 +10182,23 @@ var CryptoTradeConverter = ({
       "aria-labelledby": `ctc-heading-${reactId}`,
       children: /* @__PURE__ */ jsxs58("div", { className: "ctc-container", children: [
         /* @__PURE__ */ jsxs58("header", { className: "ctc-header", children: [
-          /* @__PURE__ */ jsx62("h2", { id: `ctc-heading-${reactId}`, className: "ctc-title", children: "Buy and sell in seconds" }),
-          /* @__PURE__ */ jsx62("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__ */ jsx62("h2", { id: `ctc-heading-${reactId}`, className: "ctc-title", children: title }),
+          /* @__PURE__ */ jsx62("p", { className: "ctc-subtitle", children: subtitle })
         ] }),
-        /* @__PURE__ */ jsxs58("div", { className: "ctc-card", children: [
-          /* @__PURE__ */ jsxs58("div", { className: `ctc-status ctc-status--${statusTone}`, id: statusId, role: "status", "aria-live": "polite", children: [
-            /* @__PURE__ */ jsx62("span", { className: "ctc-status-dot", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx62("span", { children: snapshot.status === "idle" || snapshot.status === "connecting" ? "Connecting to live prices\u2026" : snapshot.statusMessage || (priceReady ? "Live prices" : "Waiting for live price\u2026") })
-          ] }),
-          /* @__PURE__ */ jsxs58("div", { className: "ctc-seg", role: "group", "aria-label": "Trade side", children: [
-            /* @__PURE__ */ jsx62(
-              "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__ */ jsx62(
-              "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__ */ jsx62("div", { className: "ctc-card", children: /* @__PURE__ */ jsxs58("div", { className: "ctc-widget", children: [
+          /* @__PURE__ */ jsxs58(
+            "div",
+            {
+              className: `ctc-status ctc-status--${statusTone}`,
+              id: statusId,
+              role: "status",
+              "aria-live": "polite",
+              children: [
+                /* @__PURE__ */ jsx62("span", { className: "ctc-status-dot", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx62("span", { children: snapshot.status === "idle" || snapshot.status === "connecting" ? copy.connecting : snapshot.statusMessage || (priceReady ? copy.livePrices : copy.waitingForLivePrice) })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs58("div", { className: "ctc-pair", children: [
             /* @__PURE__ */ jsxs58(
               "button",
@@ -10119,137 +10235,180 @@ var CryptoTradeConverter = ({
                         " ",
                         /* @__PURE__ */ jsxs58("span", { className: ["ctc-change", changeClass].filter(Boolean).join(" "), children: [
                           formatPct(selected.change24hPct),
-                          " (24h)"
+                          " ",
+                          copy.change24hSuffix
                         ] })
                       ] })
                     ] })
                   ] }) : /* @__PURE__ */ jsxs58("span", { className: "ctc-pair__meta", children: [
-                    /* @__PURE__ */ jsx62("span", { className: "ctc-pair__name", children: "Select a market" }),
+                    /* @__PURE__ */ jsx62("span", { className: "ctc-pair__name", children: copy.selectMarket }),
                     /* @__PURE__ */ jsx62("span", { className: "ctc-pair__price", children: "\u2014" })
                   ] }),
-                  /* @__PURE__ */ jsx62("span", { className: "ctc-pair__chevron", "aria-hidden": "true", children: "\u25BE" })
+                  /* @__PURE__ */ jsx62(ChevronIcon4, { className: "ctc-pair__chevron" })
                 ]
               }
             ),
-            pickerOpen ? /* @__PURE__ */ jsx62(
+            pickerOpen ? /* @__PURE__ */ jsxs58(
               "ul",
               {
                 ref: listRef,
                 id: listboxId,
                 className: "ctc-listbox",
                 role: "listbox",
-                "aria-label": "Market pairs",
+                "aria-label": copy.chooseMarket,
                 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__ */ jsxs58(
-                    "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__ */ jsx62("li", { className: "ctc-listbox__header", role: "presentation", children: copy.chooseMarket }),
+                  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__ */ jsxs58(
+                      "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__ */ jsx62(CoinAvatar, { base: row.base, icon: row.icon, label: row.name }),
+                          /* @__PURE__ */ jsxs58("span", { className: "ctc-option__text", children: [
+                            /* @__PURE__ */ jsx62("span", { className: "ctc-option__name", children: row.name }),
+                            /* @__PURE__ */ jsx62("span", { className: "ctc-option__sub", children: row.longName })
+                          ] }),
+                          /* @__PURE__ */ jsxs58("span", { className: "ctc-option__stats", children: [
+                            /* @__PURE__ */ jsx62("span", { children: formatPrice(row.last, row.pricePrecision) }),
+                            /* @__PURE__ */ jsx62("span", { className: ["ctc-change", rowChange].filter(Boolean).join(" "), children: formatPct(row.change24hPct) })
+                          ] })
+                        ]
                       },
-                      children: [
-                        /* @__PURE__ */ jsx62(CoinAvatar, { base: row.base, icon: row.icon, label: row.name }),
-                        /* @__PURE__ */ jsxs58("span", { className: "ctc-option__text", children: [
-                          /* @__PURE__ */ jsx62("span", { className: "ctc-option__name", children: row.name }),
-                          /* @__PURE__ */ jsx62("span", { className: "ctc-option__sub", children: row.longName })
-                        ] }),
-                        /* @__PURE__ */ jsxs58("span", { className: "ctc-option__stats", children: [
-                          /* @__PURE__ */ jsx62("span", { children: formatPrice(row.last, row.pricePrecision) }),
-                          /* @__PURE__ */ jsx62("span", { className: ["ctc-change", rowChange].filter(Boolean).join(" "), children: formatPct(row.change24hPct) })
-                        ] })
-                      ]
-                    },
-                    row.id
-                  );
-                })
+                      row.id
+                    );
+                  })
+                ]
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsxs58("div", { className: "ctc-fields", children: [
+          /* @__PURE__ */ jsxs58("div", { className: "ctc-seg", role: "group", "aria-label": copy.tradeSideGroup, children: [
             /* @__PURE__ */ jsx62(
-              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: copy.buy
               }
             ),
             /* @__PURE__ */ jsx62(
-              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: copy.sell
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs58("div", { className: "ctc-fields", children: [
+            /* @__PURE__ */ jsxs58(
+              "label",
+              {
+                className: ["ctc-amount", conversion.error ? "is-invalid" : ""].filter(Boolean).join(" "),
+                htmlFor: payId,
+                children: [
+                  /* @__PURE__ */ jsx62("span", { className: "ctc-amount__label", children: copy.youPay }),
+                  /* @__PURE__ */ jsxs58("span", { className: "ctc-amount__row", children: [
+                    /* @__PURE__ */ jsx62(
+                      "input",
+                      {
+                        id: payId,
+                        className: "ctc-amount__input",
+                        type: "text",
+                        inputMode: "decimal",
+                        autoComplete: "off",
+                        placeholder: "0.00",
+                        value: payValue,
+                        "aria-label": copy.primaryAmountAria,
+                        "aria-invalid": Boolean(conversion.error),
+                        "aria-describedby": statusId,
+                        onChange: (event) => {
+                          setEdited("pay");
+                          setPay(event.target.value);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx62("span", { className: "ctc-amount__unit", children: labels.pay })
+                  ] }),
+                  /* @__PURE__ */ jsx62("span", { className: "ctc-amount__meta", children: copy.amountToSpend })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs58(
+              "label",
+              {
+                className: ["ctc-amount", conversion.error ? "is-invalid" : ""].filter(Boolean).join(" "),
+                htmlFor: receiveId,
+                children: [
+                  /* @__PURE__ */ jsx62("span", { className: "ctc-amount__label", children: copy.youReceive }),
+                  /* @__PURE__ */ jsxs58("span", { className: "ctc-amount__row", children: [
+                    /* @__PURE__ */ jsx62(
+                      "input",
+                      {
+                        id: receiveId,
+                        className: "ctc-amount__input",
+                        type: "text",
+                        inputMode: "decimal",
+                        autoComplete: "off",
+                        placeholder: "0.00",
+                        value: receiveValue,
+                        "aria-label": copy.convertedAmountAria,
+                        "aria-invalid": Boolean(conversion.error),
+                        "aria-describedby": `ctc-rate-${reactId}`,
+                        onChange: (event) => {
+                          setEdited("receive");
+                          setReceive(event.target.value);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx62("span", { className: "ctc-amount__unit", children: labels.receive })
+                  ] }),
+                  /* @__PURE__ */ jsx62("span", { id: `ctc-rate-${reactId}`, className: "ctc-amount__meta", children: receiveMeta })
+                ]
               }
             )
           ] }),
-          priceReady && selected ? /* @__PURE__ */ jsxs58("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__ */ jsx62("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__ */ jsx62("p", { className: "ctc-error", role: "alert", children: conversion.error }) : null,
           /* @__PURE__ */ jsx62("div", { className: "ctc-cta", children: ctaDisabled ? /* @__PURE__ */ jsx62(
-            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__ */ jsx62("a", { className: "ctc-cta-link", href: tradeHref, rel: "noopener noreferrer", children: /* @__PURE__ */ jsx62(
-            Button,
+          ) : /* @__PURE__ */ jsx62(
+            "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
             }
-          ) }) })
-        ] })
+          ) })
+        ] }) })
       ] })
     }
   );
@@ -10257,7 +10416,37 @@ var CryptoTradeConverter = ({
 
 // templates/CryptoMarketsTable/CryptoMarketsTable.tsx
 import { useEffect as useEffect22, useId as useId8, useMemo as useMemo9, useRef as useRef24, useState as useState27 } from "react";
+
+// templates/CryptoMarketsTable/CryptoMarketsTable.types.ts
+var DEFAULT_CRYPTO_MARKETS_TABLE_TITLE = "Explore the markets";
+var DEFAULT_CRYPTO_MARKETS_TABLE_LABELS = {
+  spot: "Spot",
+  futures: "Futures",
+  live: "Live",
+  connecting: "Connecting\u2026",
+  marketTypeGroup: "Market type",
+  quoteCurrencyTabs: "Quote currency",
+  scrollRegion: "Market prices. Scroll horizontally to see all columns.",
+  columnName: "Name",
+  columnPrice: "Price",
+  column1h: "1h %",
+  column24h: "24h %",
+  column7d: "7d chart",
+  unsupportedBrowser: "Please use a current browser to view market prices.",
+  loadError: "Unable to load market data. Retrying\u2026",
+  loading: "Loading market data\u2026",
+  emptyPairsTemplate: "No {quote} pairs on {kind} yet\u2026",
+  sparklineAriaTemplate: "{name} available hourly price history, up to 7 days"
+};
+
+// templates/CryptoMarketsTable/CryptoMarketsTable.tsx
 import { jsx as jsx63, jsxs as jsxs59 } from "react/jsx-runtime";
+function fillTemplate4(template, values) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
+}
+function mergeLabels3(overrides) {
+  return { ...DEFAULT_CRYPTO_MARKETS_TABLE_LABELS, ...overrides };
+}
 function CoinAvatar2({ base, icon }) {
   const [failed, setFailed] = useState27(false);
   if (failed) {
@@ -10363,8 +10552,11 @@ var CryptoMarketsTable = ({
   initialQuoteCurrency = "USDT",
   apiOrigin,
   maxRows,
+  title = DEFAULT_CRYPTO_MARKETS_TABLE_TITLE,
+  labels: labelsProp,
   className
 }) => {
+  const copy = mergeLabels3(labelsProp);
   const reactId = useId8().replace(/:/g, "");
   const [kind, setKind] = useState27(initialMarket);
   const [quote, setQuote] = useState27(initialQuoteCurrency.toUpperCase());
@@ -10411,7 +10603,14 @@ var CryptoMarketsTable = ({
     }
   };
   const statusTone = snapshot.status === "live" ? "live" : snapshot.status === "reconnecting" || snapshot.status === "stale" ? "warn" : snapshot.status === "error" || snapshot.status === "unsupported" ? "error" : "muted";
-  const emptyMessage = snapshot.status === "unsupported" ? "Please use a current browser to view market prices." : snapshot.status === "error" ? "Unable to load market data. Retrying\u2026" : snapshot.status === "connecting" || snapshot.status === "idle" ? "Loading market data\u2026" : `No ${quote} pairs on ${kind} yet\u2026`;
+  const emptyMessage = snapshot.status === "unsupported" ? copy.unsupportedBrowser : snapshot.status === "error" ? copy.loadError : snapshot.status === "connecting" || snapshot.status === "idle" ? copy.loading : fillTemplate4(copy.emptyPairsTemplate, { quote, kind });
+  const columnLabels = [
+    ["name", copy.columnName],
+    ["last", copy.columnPrice],
+    ["change1hPct", copy.column1h],
+    ["change24hPct", copy.column24h],
+    ["change7dPct", copy.column7d]
+  ];
   return /* @__PURE__ */ jsx63(
     "section",
     {
@@ -10420,26 +10619,26 @@ var CryptoMarketsTable = ({
       "aria-labelledby": `cmt-heading-${reactId}`,
       children: /* @__PURE__ */ jsxs59("div", { className: "cmt-container", children: [
         /* @__PURE__ */ jsxs59("header", { className: "cmt-header", children: [
-          /* @__PURE__ */ jsx63("h2", { id: `cmt-heading-${reactId}`, className: "cmt-title", children: "Explore the markets" }),
+          /* @__PURE__ */ jsx63("h2", { id: `cmt-heading-${reactId}`, className: "cmt-title", children: title }),
           /* @__PURE__ */ jsxs59("p", { className: `cmt-status cmt-status--${statusTone}`, role: "status", "aria-live": "polite", children: [
             /* @__PURE__ */ jsx63("span", { className: "cmt-status-dot", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx63("span", { children: snapshot.status === "live" ? "Live" : snapshot.statusMessage || "Connecting\u2026" })
+            /* @__PURE__ */ jsx63("span", { children: snapshot.status === "live" ? copy.live : snapshot.statusMessage || copy.connecting })
           ] })
         ] }),
         /* @__PURE__ */ jsxs59("div", { className: "cmt-card", children: [
           /* @__PURE__ */ jsxs59("div", { className: "cmt-toolbar", children: [
-            /* @__PURE__ */ jsx63("div", { className: "cmt-seg", role: "group", "aria-label": "Market type", children: ["spot", "futures"].map((value) => /* @__PURE__ */ jsx63(
+            /* @__PURE__ */ jsx63("div", { className: "cmt-seg", role: "group", "aria-label": copy.marketTypeGroup, children: ["spot", "futures"].map((value) => /* @__PURE__ */ jsx63(
               "button",
               {
                 type: "button",
                 className: kind === value ? "cmt-seg__btn is-active" : "cmt-seg__btn",
                 "aria-pressed": kind === value,
                 onClick: () => setKind(value),
-                children: value === "spot" ? "Spot" : "Futures"
+                children: value === "spot" ? copy.spot : copy.futures
               },
               value
             )) }),
-            /* @__PURE__ */ jsx63("div", { className: "cmt-tabs", role: "tablist", "aria-label": "Quote currency", children: snapshot.quotes.map((q) => /* @__PURE__ */ jsx63(
+            /* @__PURE__ */ jsx63("div", { className: "cmt-tabs", role: "tablist", "aria-label": copy.quoteCurrencyTabs, children: snapshot.quotes.map((q) => /* @__PURE__ */ jsx63(
               "button",
               {
                 type: "button",
@@ -10459,15 +10658,9 @@ var CryptoMarketsTable = ({
               className: ["cmt-scroll", scrolled ? "is-scrolled" : ""].filter(Boolean).join(" "),
               tabIndex: 0,
               role: "region",
-              "aria-label": "Market prices. Scroll horizontally to see all columns.",
+              "aria-label": copy.scrollRegion,
               children: /* @__PURE__ */ jsxs59("table", { className: "cmt-table", children: [
-                /* @__PURE__ */ jsx63("thead", { children: /* @__PURE__ */ jsx63("tr", { children: [
-                  ["name", "Name"],
-                  ["last", "Price"],
-                  ["change1hPct", "1h %"],
-                  ["change24hPct", "24h %"],
-                  ["change7dPct", "7d chart"]
-                ].map(([key, label]) => {
+                /* @__PURE__ */ jsx63("thead", { children: /* @__PURE__ */ jsx63("tr", { children: columnLabels.map(([key, label]) => {
                   const active = sortKey === key;
                   return /* @__PURE__ */ jsx63(
                     "th",
@@ -10512,7 +10705,9 @@ var CryptoMarketsTable = ({
                     {
                       values: row.spark7d,
                       up: (row.change7dPct ?? 0) >= 0,
-                      label: `${row.name} available hourly price history, up to 7 days`,
+                      label: fillTemplate4(copy.sparklineAriaTemplate, {
+                        name: row.name
+                      }),
                       reducedMotion
                     }
                   ) })
@@ -12169,10 +12364,16 @@ export {
   CryptoMarketsTable,
   CryptoTradeConverter,
   DEFAULT_AWARDS,
+  DEFAULT_CRYPTO_MARKETS_TABLE_LABELS,
+  DEFAULT_CRYPTO_MARKETS_TABLE_TITLE,
+  DEFAULT_CRYPTO_TRADE_CONVERTER_LABELS,
+  DEFAULT_CRYPTO_TRADE_CONVERTER_SUBTITLE,
+  DEFAULT_CRYPTO_TRADE_CONVERTER_TITLE,
   DEFAULT_CULTURE_CARDS,
   DEFAULT_EXCHANGE_RATE_WS_URL,
   DEFAULT_SYMBOLS_ENDPOINT,
   DEFAULT_TRADE_HREF,
+  DEFAULT_TRADING_CALCULATOR_LABELS,
   DayNightTransition,
   DocumentChips,
   DotLottieInView,