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

package/dist/index.d.ts

@@ -309,6 +309,13 @@ interface KycModalTemplateProps {
 declare function KycModalTemplate({ theme, accentColor, step, providers, selectedProvider, session, kycStatus, isLoading, onSelectProvider, onDoneVerifying, onClose, }: KycModalTemplateProps): react_jsx_runtime.JSX.Element;
 
 type RampStep = 'input' | 'loading_quote' | 'select_route' | 'contact' | 'status' | 'error';
+/** A field a provider declares (via the quote) that the client must collect. */
+interface RampFieldSpec {
+    key: string;
+    label: string;
+    type: 'text' | 'email' | 'tel';
+    bankType?: 'CLABE' | 'PIX' | 'PSE' | 'ACH';
+}
 interface RampWidgetTemplateProps {
     theme: string;
     accentColor: string;
@@ -317,8 +324,8 @@ interface RampWidgetTemplateProps {
     amount: string;
     currency: string;
     country: string;
-    email: string;
-    fullName: string;
+    requiredFields: RampFieldSpec[];
+    fieldValues: Record<string, string>;
     countries: RampCountry[];
     countriesLoading: boolean;
     refreshing: boolean;
@@ -334,8 +341,7 @@ interface RampWidgetTemplateProps {
     errorMsg: string | null;
     onDirectionChange: (d: RampDirection) => void;
     onAmountChange: (v: string) => void;
-    onEmailChange: (v: string) => void;
-    onFullNameChange: (v: string) => void;
+    onFieldChange: (key: string, value: string) => void;
     onCountryChange: (v: string) => void;
     onFindRoute: () => void;
     onSelectQuote: (q: RampQuote) => void;
@@ -346,7 +352,7 @@ interface RampWidgetTemplateProps {
     onRefresh: () => void;
     onClose: () => void;
 }
-declare function RampWidgetTemplate({ theme, accentColor, step, direction, amount, currency, country, email, fullName, countries, countriesLoading, refreshing, quotes, isLoading, provider, txStatus, kycUrl, stellarTxHash, depositInstructions, canComplete, completing, errorMsg, onDirectionChange, onAmountChange, onEmailChange, onFullNameChange, onCountryChange, onFindRoute, onSelectQuote, onContactContinue, onOpenKyc, onCompleteWithdraw, onRetry, onRefresh, onClose, }: RampWidgetTemplateProps): react_jsx_runtime.JSX.Element;
+declare function RampWidgetTemplate({ theme, accentColor, step, direction, amount, currency, country, requiredFields, fieldValues, countries, countriesLoading, refreshing, quotes, isLoading, provider, txStatus, kycUrl, stellarTxHash, depositInstructions, canComplete, completing, errorMsg, onDirectionChange, onAmountChange, onFieldChange, onCountryChange, onFindRoute, onSelectQuote, onContactContinue, onOpenKyc, onCompleteWithdraw, onRetry, onRefresh, onClose, }: RampWidgetTemplateProps): react_jsx_runtime.JSX.Element;
 
 interface TransactionModalTemplateProps {
     theme: string;

package/dist/index.js

@@ -1035,11 +1035,62 @@ 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.2"
+        "0.10.1-rc.4"
       ] })
     ] })
   ] });
 };
+function CopyButton({ value, label = "Copy", className }) {
+  const [copied, setCopied] = react.useState(false);
+  const timerRef = react.useRef(null);
+  react.useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
+  function handleCopy(e) {
+    e.stopPropagation();
+    if (!value || !navigator.clipboard) return;
+    void navigator.clipboard.writeText(value).then(() => {
+      setCopied(true);
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        setCopied(false);
+        timerRef.current = null;
+      }, 1500);
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: `pollar-copy-btn${className ? ` ${className}` : ""}`,
+      onClick: handleCopy,
+      "aria-label": copied ? "Copied" : label,
+      children: copied ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M3.5 7l2.5 2.5 4.5-5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "8", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3 9H2a1 1 0 01-1-1V2a1 1 0 011-1h6a1 1 0 011 1v1",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ] })
+    }
+  );
+}
 function ModalStatusBanner({ message, status, onCancel, onRetry }) {
   if (!message && status === "NONE") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-status" });
@@ -2506,8 +2557,8 @@ function RampWidgetTemplate({
   amount,
   currency,
   country,
-  email,
-  fullName,
+  requiredFields,
+  fieldValues,
   countries,
   countriesLoading,
   refreshing,
@@ -2523,8 +2574,7 @@ function RampWidgetTemplate({
   errorMsg,
   onDirectionChange,
   onAmountChange,
-  onEmailChange,
-  onFullNameChange,
+  onFieldChange,
   onCountryChange,
   onFindRoute,
   onSelectQuote,
@@ -2675,33 +2725,19 @@ function RampWidgetTemplate({
       /* @__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" }),
+      requiredFields.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: f.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
-            type: "text",
+            type: f.type,
             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)
+            value: fieldValues[f.key] ?? "",
+            autoComplete: f.type === "email" ? "email" : "off",
+            onChange: (e) => onFieldChange(f.key, e.target.value)
           }
         )
-      ] }),
+      ] }, f.key)),
       /* @__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(
@@ -2709,7 +2745,7 @@ function RampWidgetTemplate({
           {
             type: "button",
             className: "pollar-btn-primary",
-            disabled: !fullName.trim() || !email.trim() || isLoading,
+            disabled: requiredFields.some((f) => !(fieldValues[f.key] ?? "").trim()) || isLoading,
             onClick: onContactContinue,
             children: isLoading ? "Starting\u2026" : "Continue"
           }
@@ -2755,6 +2791,9 @@ function RampWidgetTemplate({
   ] });
 }
 var TERMINAL = ["completed", "failed"];
+function requiredFieldsOf(quote) {
+  return quote.requiredFields ?? [];
+}
 function RampWidget({ onClose }) {
   const { getClient, signTx, wallet, styles } = usePollar();
   const walletAddress = wallet?.address ?? "";
@@ -2765,8 +2804,8 @@ function RampWidget({ onClose }) {
   const [amount, setAmount] = react.useState("");
   const [currency, setCurrency] = react.useState("");
   const [country, setCountry] = react.useState("");
-  const [email, setEmail] = react.useState("");
-  const [fullName, setFullName] = react.useState("");
+  const [fieldValues, setFieldValues] = react.useState({});
+  const setFieldValue = (key, value) => setFieldValues((v) => ({ ...v, [key]: value }));
   const [countries, setCountries] = react.useState([]);
   const [countriesLoading, setCountriesLoading] = react.useState(true);
   const [refreshing, setRefreshing] = react.useState(false);
@@ -2913,8 +2952,9 @@ function RampWidget({ onClose }) {
   function handleSelectQuote(quote) {
     setSelectedQuote(quote);
     setErrorMsg(null);
-    const requiresContact = quote.requiresContact ?? false;
-    if (requiresContact && (!email.trim() || !fullName.trim())) {
+    const fields = requiredFieldsOf(quote);
+    const missing = fields.some((f) => !(fieldValues[f.key] ?? "").trim());
+    if (fields.length > 0 && missing) {
       setStep("contact");
       return;
     }
@@ -2927,15 +2967,14 @@ function RampWidget({ onClose }) {
     setIsLoading(true);
     setErrorMsg(null);
     try {
-      const base = {
-        quoteId: quote.quoteId,
-        amount: Number(amount),
-        currency,
-        country,
-        ...email.trim() ? { email: email.trim() } : {},
-        ...fullName.trim() ? { fullName: fullName.trim() } : {},
-        ...walletAddress ? { walletAddress } : {}
-      };
+      const base = { quoteId: quote.quoteId, amount: Number(amount), currency, country };
+      if (walletAddress) base.walletAddress = walletAddress;
+      for (const f of requiredFieldsOf(quote)) {
+        const val = (fieldValues[f.key] ?? "").trim();
+        if (!val) continue;
+        if (f.bankType) base.bankDetails = { type: f.bankType, value: val };
+        else base[f.key] = val;
+      }
       const result = direction === "onramp" ? await client.createOnRamp(base) : await client.createOffRamp(base);
       await applyResult(result);
     } catch (e) {
@@ -2980,8 +3019,8 @@ function RampWidget({ onClose }) {
       amount,
       currency,
       country,
-      email,
-      fullName,
+      requiredFields: selectedQuote ? requiredFieldsOf(selectedQuote) : [],
+      fieldValues,
       countries,
       countriesLoading,
       refreshing,
@@ -2997,8 +3036,7 @@ function RampWidget({ onClose }) {
       errorMsg,
       onDirectionChange: setDirection,
       onAmountChange: setAmount,
-      onEmailChange: setEmail,
-      onFullNameChange: setFullName,
+      onFieldChange: setFieldValue,
       onCountryChange: handleCountryChange,
       onFindRoute: handleFindRoute,
       onSelectQuote: handleSelectQuote,
@@ -4650,6 +4688,7 @@ function TxHistoryModalTemplate({
           txHistory.step === "loaded" && records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No transactions yet." }),
           records.map((record) => {
             const explorerUrl = `https://stellar.expert/explorer/${record.network === "testnet" ? "testnet" : "public"}/tx/${record.hash}`;
+            const destination = typeof record.details?.destination === "string" ? record.details.destination : void 0;
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-item", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-hist-item-summary", children: record.summary }),
               /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: record.status }),
@@ -4668,6 +4707,10 @@ function TxHistoryModalTemplate({
                   "\xB7 ",
                   formatDate(record.createdAt)
                 ] }),
+                destination && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: destination, label: "Copy wallet address", className: "pollar-copy-btn-sm" })
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "a",
@@ -4756,7 +4799,7 @@ function TxHistoryModal({ onClose }) {
 }
 function formatBalance2(balance) {
   const n = parseFloat(balance);
-  return isNaN(n) ? balance : n.toLocaleString(void 0, { maximumFractionDigits: 7 });
+  return isNaN(n) ? balance : n.toLocaleString(void 0, { minimumFractionDigits: 7, maximumFractionDigits: 7 });
 }
 function cropAddress2(address) {
   if (address.length <= 16) return address;
@@ -4765,7 +4808,13 @@ function cropAddress2(address) {
 function BalanceItem({ record }) {
   const balanceDiffers = record.balance !== record.available;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-item", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-asset", children: record.code }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-asset-info", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-asset", children: record.code }),
+      record.issuer && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-bal-issuer", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-issuer-addr", children: cropAddress2(record.issuer) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: record.issuer, label: "Copy issuer address", className: "pollar-copy-btn-sm" })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-amounts", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-amount", children: formatBalance2(record.balance) }),
       balanceDiffers && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-bal-available", children: [
@@ -4828,7 +4877,10 @@ function WalletBalanceModalTemplate({
         /* @__PURE__ */ jsxRuntime.jsx("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" }) }) })
       ] })
     ] }),
-    walletAddress && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-bal-address", children: cropAddress2(walletAddress) }),
+    walletAddress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-address-row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-bal-address", children: cropAddress2(walletAddress) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: walletAddress, label: "Copy wallet address" })
+    ] }),
     isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
     walletBalance.step === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: walletBalance.message }),
     data && !data.exists && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-empty", children: [