@pollar/react 0.10.1-rc.0 → 0.10.1-rc.2

package/dist/index.js

@@ -1035,7 +1035,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.10.1-rc.0"
+        "0.10.1-rc.2"
       ] })
     ] })
   ] });
@@ -2459,20 +2459,45 @@ function RouteDisplay({ quote, onSelect }) {
   );
 }
 var LOADING_STEPS = ["Detecting your country\u2026", "Consulting providers\u2026", "Route found!"];
-var COUNTRY_CURRENCIES = {
-  MX: "MXN",
-  BR: "BRL",
-  CO: "COP",
-  CL: "CLP",
-  PE: "PEN",
-  AR: "ARS"
-};
+function flagEmoji(code) {
+  const cc = code.trim().toUpperCase();
+  if (!/^[A-Z]{2}$/.test(cc)) return "";
+  const base = 127462;
+  return String.fromCodePoint(base + (cc.charCodeAt(0) - 65), base + (cc.charCodeAt(1) - 65));
+}
 var STATUS_LABEL = {
   pending: "Pending",
   processing: "Processing",
   completed: "Completed",
   failed: "Failed"
 };
+var INSTRUCTION_LABELS = {
+  br_code: "Pix code",
+  account_holder_name: "Account holder",
+  bank_name: "Bank",
+  bank_address: "Bank address",
+  bank_account_number: "Account number",
+  bank_routing_number: "Routing number",
+  iban: "IBAN",
+  bic: "BIC",
+  clabe: "CLABE",
+  amount: "Amount",
+  currency: "Currency",
+  payment_rails: "Rails"
+};
+function flattenInstructions(instr) {
+  const out = [];
+  for (const [k, v] of Object.entries(instr)) {
+    let value = "";
+    if (typeof v === "string" || typeof v === "number") value = String(v);
+    else if (Array.isArray(v))
+      value = v.filter((x) => typeof x === "string" || typeof x === "number").join(", ");
+    else continue;
+    if (!value) continue;
+    out.push({ key: k, label: INSTRUCTION_LABELS[k] ?? k, value });
+  }
+  return out;
+}
 function RampWidgetTemplate({
   theme,
   accentColor,
@@ -2481,24 +2506,33 @@ function RampWidgetTemplate({
   amount,
   currency,
   country,
+  email,
+  fullName,
+  countries,
+  countriesLoading,
+  refreshing,
   quotes,
   isLoading,
   provider,
   txStatus,
   kycUrl,
   stellarTxHash,
+  depositInstructions,
   canComplete,
   completing,
   errorMsg,
   onDirectionChange,
   onAmountChange,
-  onCurrencyChange,
+  onEmailChange,
+  onFullNameChange,
   onCountryChange,
   onFindRoute,
   onSelectQuote,
+  onContactContinue,
   onOpenKyc,
   onCompleteWithdraw,
   onRetry,
+  onRefresh,
   onClose
 }) {
   const isDark = theme === "dark";
@@ -2526,6 +2560,7 @@ function RampWidgetTemplate({
     input: direction === "onramp" ? "Buy crypto" : "Sell crypto",
     loading_quote: "Finding best route",
     select_route: "Select provider",
+    contact: "Your details",
     status: direction === "onramp" ? "Complete your deposit" : "Complete your withdrawal",
     error: "Something went wrong"
   };
@@ -2533,13 +2568,40 @@ function RampWidgetTemplate({
     input: direction === "onramp" ? "Enter the amount you want to deposit" : "Enter the amount you want to withdraw",
     loading_quote: "Comparing providers in real time\u2026",
     select_route: "All prices include fees",
+    contact: `${provider || "This provider"} needs your name and email to verify you`,
     status: `Finish the flow at ${provider || "the provider"} to continue`,
     error: "Please try again"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-ramp-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-ramp-title", children: stepTitle[step] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-ramp-subtitle", children: stepSubtitle[step] })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-header-text", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: stepTitle[step] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-ramp-subtitle", children: stepSubtitle[step] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: onRefresh, disabled: refreshing, "aria-label": "Refresh", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: refreshing ? "pollar-modal-refresh-icon spinning" : "pollar-modal-refresh-icon",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                stroke: "currentColor",
+                strokeWidth: "1.6",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+      ] })
     ] }),
     step === "input" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-tabs", children: [
@@ -2564,62 +2626,44 @@ function RampWidgetTemplate({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-input-row", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Amount" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "number",
-              className: "pollar-ramp-input",
-              placeholder: "0.00",
-              value: amount,
-              min: "0",
-              onChange: (e) => onAmountChange(e.target.value)
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", style: { maxWidth: 90 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Currency" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "text",
-              className: "pollar-ramp-input",
-              placeholder: "MXN",
-              value: currency,
-              maxLength: 5,
-              onChange: (e) => onCurrencyChange(e.target.value.toUpperCase())
-            }
-          )
-        ] })
-      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Country" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
+        countriesLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-input pollar-ramp-input-loading", children: "Loading countries\u2026" }) : countries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "No ramp providers available on this network yet." }) : /* @__PURE__ */ jsxRuntime.jsx("select", { className: "pollar-ramp-input", value: country, onChange: (e) => onCountryChange(e.target.value), children: countries.map((c) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: c.code, children: [
+          flagEmoji(c.code),
+          " ",
+          c.code,
+          c.currency ? ` \u2014 ${c.currency}` : ""
+        ] }, c.code)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-ramp-label", children: [
+          "Amount",
+          currency ? ` (${currency})` : ""
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
           {
+            type: "number",
             className: "pollar-ramp-input",
-            value: country,
-            onChange: (e) => {
-              const c = e.target.value;
-              onCountryChange(c);
-              if (COUNTRY_CURRENCIES[c]) onCurrencyChange(COUNTRY_CURRENCIES[c]);
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "MX", children: "\u{1F1F2}\u{1F1FD} Mexico" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "BR", children: "\u{1F1E7}\u{1F1F7} Brazil" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "CO", children: "\u{1F1E8}\u{1F1F4} Colombia" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "CL", children: "\u{1F1E8}\u{1F1F1} Chile" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "PE", children: "\u{1F1F5}\u{1F1EA} Peru" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "AR", children: "\u{1F1E6}\u{1F1F7} Argentina" })
-            ]
+            placeholder: "0.00",
+            value: amount,
+            min: "0",
+            onChange: (e) => onAmountChange(e.target.value)
           }
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", disabled: !amount || isLoading, onClick: onFindRoute, children: "Find best route" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "pollar-btn-primary",
+            disabled: !amount || isLoading || countriesLoading || countries.length === 0,
+            onClick: onFindRoute,
+            children: "Find best route"
+          }
+        )
       ] })
     ] }),
     step === "loading_quote" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-loading", children: LOADING_STEPS.map((text, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-loading-row", children: [
@@ -2630,6 +2674,48 @@ function RampWidgetTemplate({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-route-list", children: quotes.map((q, i) => /* @__PURE__ */ jsxRuntime.jsx(RouteDisplay, { quote: q, onSelect: onSelectQuote }, i)) }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" })
     ] }),
+    step === "contact" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Full name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            className: "pollar-ramp-input",
+            placeholder: "Jane Doe",
+            value: fullName,
+            onChange: (e) => onFullNameChange(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "email",
+            className: "pollar-ramp-input",
+            placeholder: "jane@example.com",
+            value: email,
+            autoComplete: "email",
+            onChange: (e) => onEmailChange(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onRetry, children: "Back" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "pollar-btn-primary",
+            disabled: !fullName.trim() || !email.trim() || isLoading,
+            onClick: onContactContinue,
+            children: isLoading ? "Starting\u2026" : "Continue"
+          }
+        )
+      ] })
+    ] }),
     step === "status" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Provider" }),
@@ -2637,13 +2723,7 @@ function RampWidgetTemplate({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Status" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "code",
-          {
-            style: { color: txStatus === "completed" ? "var(--pollar-success-text)" : void 0 },
-            children: txStatus ? STATUS_LABEL[txStatus] : "Processing"
-          }
-        ) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsxRuntime.jsx("code", { style: { color: txStatus === "completed" ? "var(--pollar-success-text)" : void 0 }, children: txStatus ? STATUS_LABEL[txStatus] : "Processing" }) })
       ] }),
       stellarTxHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Stellar tx" }),
@@ -2653,6 +2733,10 @@ function RampWidgetTemplate({
           stellarTxHash.slice(-8)
         ] }) })
       ] }),
+      depositInstructions && txStatus !== "completed" && flattenInstructions(depositInstructions).map(({ key, label, value }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsxRuntime.jsx("code", { style: { wordBreak: "break-all" }, children: value }) })
+      ] }, key)),
       kycUrl && txStatus !== "completed" && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "pollar-btn-primary", onClick: onOpenKyc, children: [
         "Continue at ",
         provider
@@ -2679,15 +2763,22 @@ function RampWidget({ onClose }) {
   const [step, setStep] = react.useState("input");
   const [direction, setDirection] = react.useState("onramp");
   const [amount, setAmount] = react.useState("");
-  const [currency, setCurrency] = react.useState("ARS");
-  const [country, setCountry] = react.useState("AR");
+  const [currency, setCurrency] = react.useState("");
+  const [country, setCountry] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [fullName, setFullName] = react.useState("");
+  const [countries, setCountries] = react.useState([]);
+  const [countriesLoading, setCountriesLoading] = react.useState(true);
+  const [refreshing, setRefreshing] = react.useState(false);
   const [quotes, setQuotes] = react.useState([]);
+  const [selectedQuote, setSelectedQuote] = react.useState(null);
   const [isLoading, setIsLoading] = react.useState(false);
   const [txId, setTxId] = react.useState(null);
   const [provider, setProvider] = react.useState("");
   const [kycUrl, setKycUrl] = react.useState(null);
   const [txStatus, setTxStatus] = react.useState(null);
   const [stellarTxHash, setStellarTxHash] = react.useState(null);
+  const [depositInstructions, setDepositInstructions] = react.useState(null);
   const [completing, setCompleting] = react.useState(false);
   const [errorMsg, setErrorMsg] = react.useState(null);
   const directionRef = react.useRef(direction);
@@ -2703,6 +2794,8 @@ function RampWidget({ onClose }) {
         setTxStatus(tx.status);
         if (tx.stellarTxHash) setStellarTxHash(tx.stellarTxHash);
         if (tx.kycUrl) setKycUrl(tx.kycUrl);
+        const di = tx.depositInstructions;
+        if (di) setDepositInstructions(di);
         if (TERMINAL.includes(tx.status)) clearInterval(id);
       } catch {
       }
@@ -2712,14 +2805,62 @@ function RampWidget({ onClose }) {
       clearInterval(id);
     };
   }, [step, txId, txStatus, client]);
+  async function loadCountries(resetSelection) {
+    setCountriesLoading(true);
+    try {
+      const { countries: list } = await client.getRampCountries();
+      setCountries(list);
+      const first = list[0];
+      const stillValid = list.some((c) => c.code === country);
+      if (first && (resetSelection || !stillValid)) {
+        setCountry(first.code);
+        if (first.currency) setCurrency(first.currency);
+      }
+    } catch {
+      setCountries([]);
+    } finally {
+      setCountriesLoading(false);
+    }
+  }
+  react.useEffect(() => {
+    loadCountries(true);
+  }, []);
+  function handleCountryChange(code) {
+    setCountry(code);
+    const match = countries.find((c) => c.code === code);
+    if (match?.currency) setCurrency(match.currency);
+  }
+  async function handleRefresh() {
+    if (refreshing) return;
+    setRefreshing(true);
+    try {
+      await loadCountries(false);
+      if (step === "select_route") {
+        const result = await client.getRampsQuote({ country, amount: Number(amount), currency, direction });
+        setQuotes(result.quotes ?? []);
+      } else if (step === "status" && txId) {
+        const tx = await client.getRampTransaction(txId);
+        setTxStatus(tx.status);
+        if (tx.stellarTxHash) setStellarTxHash(tx.stellarTxHash);
+        if (tx.kycUrl) setKycUrl(tx.kycUrl);
+        const di = tx.depositInstructions;
+        if (di) setDepositInstructions(di);
+      }
+    } catch {
+    } finally {
+      setRefreshing(false);
+    }
+  }
   function resetToInput() {
     setStep("input");
     setQuotes([]);
+    setSelectedQuote(null);
     setTxId(null);
     setProvider("");
     setKycUrl(null);
     setTxStatus(null);
     setStellarTxHash(null);
+    setDepositInstructions(null);
     setErrorMsg(null);
   }
   async function resumeWithSignature(id, ps) {
@@ -2745,6 +2886,7 @@ function RampWidget({ onClose }) {
     setKycUrl(result.kycUrl ?? null);
     setTxStatus(result.status);
     setStellarTxHash(result.stellarTxHash ?? null);
+    setDepositInstructions(result.depositInstructions ?? null);
     setStep("status");
   }
   async function handleFindRoute() {
@@ -2768,12 +2910,33 @@ function RampWidget({ onClose }) {
       setIsLoading(false);
     }
   }
-  async function handleSelectQuote(quote) {
+  function handleSelectQuote(quote) {
+    setSelectedQuote(quote);
+    setErrorMsg(null);
+    const requiresContact = quote.requiresContact ?? false;
+    if (requiresContact && (!email.trim() || !fullName.trim())) {
+      setStep("contact");
+      return;
+    }
+    void startRamp(quote);
+  }
+  function handleContactContinue() {
+    if (selectedQuote) void startRamp(selectedQuote);
+  }
+  async function startRamp(quote) {
     setIsLoading(true);
     setErrorMsg(null);
     try {
-      const base = { quoteId: quote.quoteId, amount: Number(amount), currency, country };
-      const result = direction === "onramp" ? await client.createOnRamp({ ...base, ...walletAddress ? { walletAddress } : {} }) : await client.createOffRamp({ ...base, ...walletAddress ? { walletAddress } : {} });
+      const base = {
+        quoteId: quote.quoteId,
+        amount: Number(amount),
+        currency,
+        country,
+        ...email.trim() ? { email: email.trim() } : {},
+        ...fullName.trim() ? { fullName: fullName.trim() } : {},
+        ...walletAddress ? { walletAddress } : {}
+      };
+      const result = direction === "onramp" ? await client.createOnRamp(base) : await client.createOffRamp(base);
       await applyResult(result);
     } catch (e) {
       setErrorMsg(e instanceof Error ? e.message : "Failed to start the ramp.");
@@ -2817,24 +2980,33 @@ function RampWidget({ onClose }) {
       amount,
       currency,
       country,
+      email,
+      fullName,
+      countries,
+      countriesLoading,
+      refreshing,
       quotes,
       isLoading,
       provider,
       txStatus,
       kycUrl,
       stellarTxHash,
+      depositInstructions,
       canComplete,
       completing,
       errorMsg,
       onDirectionChange: setDirection,
       onAmountChange: setAmount,
-      onCurrencyChange: setCurrency,
-      onCountryChange: setCountry,
+      onEmailChange: setEmail,
+      onFullNameChange: setFullName,
+      onCountryChange: handleCountryChange,
       onFindRoute: handleFindRoute,
       onSelectQuote: handleSelectQuote,
+      onContactContinue: handleContactContinue,
       onOpenKyc: handleOpenKyc,
       onCompleteWithdraw: handleCompleteWithdraw,
       onRetry: resetToInput,
+      onRefresh: handleRefresh,
       onClose
     }
   ) });
@@ -3544,6 +3716,7 @@ function SwapModalTemplate({
   onRefresh,
   onSelectSell,
   onSelectBuy,
+  onAddCustomToken,
   onAmountChange,
   onProviderChange,
   onSwap,
@@ -3553,6 +3726,21 @@ function SwapModalTemplate({
   onDone
 }) {
   const isDark = theme === "dark";
+  const [customOpen, setCustomOpen] = react.useState(false);
+  const [customCode, setCustomCode] = react.useState("");
+  const [customIssuer, setCustomIssuer] = react.useState("");
+  const [customError, setCustomError] = react.useState("");
+  const submitCustomToken = () => {
+    const err = onAddCustomToken(customCode, customIssuer);
+    if (err) {
+      setCustomError(err);
+      return;
+    }
+    setCustomCode("");
+    setCustomIssuer("");
+    setCustomError("");
+    setCustomOpen(false);
+  };
   const cssVars = {
     "--pollar-accent": accentColor,
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
@@ -3671,7 +3859,45 @@ function SwapModalTemplate({
               ] }, assetOptionKey(o)))
             ]
           }
-        )
+        ),
+        !isLoadingData && (customOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-custom", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              className: "pollar-input",
+              type: "text",
+              placeholder: "Code (e.g. USDC)",
+              value: customCode,
+              onChange: (e) => setCustomCode(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              className: "pollar-input",
+              type: "text",
+              placeholder: "Issuer (G...)",
+              value: customIssuer,
+              onChange: (e) => setCustomIssuer(e.target.value)
+            }
+          ),
+          customError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: customError }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-swap-custom-actions", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: submitCustomToken, children: "Add token" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-swap-custom-cancel",
+                onClick: () => {
+                  setCustomOpen(false);
+                  setCustomError("");
+                },
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-swap-custom-toggle", onClick: () => setCustomOpen(true), children: "+ Add a token by code / issuer" }))
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-field", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-send-label", children: "Route" }),
@@ -3779,6 +4005,7 @@ function SwapModal({ onClose }) {
   const [provider, setProvider] = react.useState("auto");
   const [venues, setVenues] = react.useState(null);
   const [catalogTokens, setCatalogTokens] = react.useState([]);
+  const [customTokens, setCustomTokens] = react.useState([]);
   const [quotes, setQuotes] = react.useState([]);
   const [quoteLoading, setQuoteLoading] = react.useState(false);
   const [quoteError, setQuoteError] = react.useState("");
@@ -3836,7 +4063,21 @@ function SwapModal({ onClose }) {
     issuer: tk.issuer,
     enabledInApp: false
   })).filter((o) => !enabledKeys.has(optKey(o)));
-  const buyOptions = [...enabledBuy, ...catalogBuy].filter((o) => optKey(o) !== buyKeyOfSell);
+  const knownKeys = /* @__PURE__ */ new Set([...enabledKeys, ...catalogBuy.map(optKey)]);
+  const customBuy = customTokens.filter((o) => !knownKeys.has(optKey(o)));
+  const buyOptions = [...enabledBuy, ...catalogBuy, ...customBuy].filter(
+    (o) => optKey(o) !== buyKeyOfSell
+  );
+  function addCustomToken(code, issuer) {
+    const c = code.trim().toUpperCase();
+    const i = issuer.trim();
+    if (c.length < 1 || c.length > 12) return "Code must be 1-12 characters";
+    if (i.length !== 56 || !i.startsWith("G")) return "Issuer must be a Stellar address (G..., 56 chars)";
+    const opt = { ref: catalogRef(c, i), code: c, issuer: i, enabledInApp: false };
+    setCustomTokens((prev) => prev.some((o) => optKey(o) === optKey(opt)) ? prev : [...prev, opt]);
+    setSelectedBuy(opt);
+    return null;
+  }
   const buyNeedsTrustline = (() => {
     if (!selectedBuy || smartUnsupported) return false;
     if (selectedBuy.ref.type === "native") return false;
@@ -3976,6 +4217,7 @@ function SwapModal({ onClose }) {
       onRefresh: handleRefresh,
       onSelectSell: setSelectedSell,
       onSelectBuy: setSelectedBuy,
+      onAddCustomToken: addCustomToken,
       onAmountChange: setAmount,
       onProviderChange: setProvider,
       onSwap: () => void handleSwap(),
@@ -4413,6 +4655,10 @@ function TxHistoryModalTemplate({
               /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: record.status }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-hist-item-meta", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: record.operation }),
+                typeof record.details?.sponsored === "boolean" && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "\xB7 ",
+                  record.details.sponsored ? "Sponsored" : "Self-paid"
+                ] }),
                 record.feeXlm && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "\xB7 ",
                   record.feeXlm,