@pollar/react 0.10.1-rc.1 → 0.10.1-rc.3

package/dist/index.d.mts

@@ -308,7 +308,14 @@ 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' | 'status' | 'error';
+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,6 +324,8 @@ interface RampWidgetTemplateProps {
     amount: string;
     currency: string;
     country: string;
+    requiredFields: RampFieldSpec[];
+    fieldValues: Record<string, string>;
     countries: RampCountry[];
     countriesLoading: boolean;
     refreshing: boolean;
@@ -326,22 +335,24 @@ interface RampWidgetTemplateProps {
     txStatus: RampTxStatus | null;
     kycUrl: string | null;
     stellarTxHash: string | null;
+    depositInstructions: Record<string, unknown> | null;
     canComplete: boolean;
     completing: boolean;
     errorMsg: string | null;
     onDirectionChange: (d: RampDirection) => void;
     onAmountChange: (v: string) => void;
-    onCurrencyChange: (v: string) => void;
+    onFieldChange: (key: string, value: string) => void;
     onCountryChange: (v: string) => void;
     onFindRoute: () => void;
     onSelectQuote: (q: RampQuote) => void;
+    onContactContinue: () => void;
     onOpenKyc: () => void;
     onCompleteWithdraw: () => void;
     onRetry: () => void;
     onRefresh: () => void;
     onClose: () => void;
 }
-declare function RampWidgetTemplate({ theme, accentColor, step, direction, amount, currency, country, countries, countriesLoading, refreshing, quotes, isLoading, provider, txStatus, kycUrl, stellarTxHash, canComplete, completing, errorMsg, onDirectionChange, onAmountChange, onCurrencyChange, onCountryChange, onFindRoute, onSelectQuote, 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.d.ts

@@ -308,7 +308,14 @@ 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' | 'status' | 'error';
+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,6 +324,8 @@ interface RampWidgetTemplateProps {
     amount: string;
     currency: string;
     country: string;
+    requiredFields: RampFieldSpec[];
+    fieldValues: Record<string, string>;
     countries: RampCountry[];
     countriesLoading: boolean;
     refreshing: boolean;
@@ -326,22 +335,24 @@ interface RampWidgetTemplateProps {
     txStatus: RampTxStatus | null;
     kycUrl: string | null;
     stellarTxHash: string | null;
+    depositInstructions: Record<string, unknown> | null;
     canComplete: boolean;
     completing: boolean;
     errorMsg: string | null;
     onDirectionChange: (d: RampDirection) => void;
     onAmountChange: (v: string) => void;
-    onCurrencyChange: (v: string) => void;
+    onFieldChange: (key: string, value: string) => void;
     onCountryChange: (v: string) => void;
     onFindRoute: () => void;
     onSelectQuote: (q: RampQuote) => void;
+    onContactContinue: () => void;
     onOpenKyc: () => void;
     onCompleteWithdraw: () => void;
     onRetry: () => void;
     onRefresh: () => void;
     onClose: () => void;
 }
-declare function RampWidgetTemplate({ theme, accentColor, step, direction, amount, currency, country, countries, countriesLoading, refreshing, quotes, isLoading, provider, txStatus, kycUrl, stellarTxHash, canComplete, completing, errorMsg, onDirectionChange, onAmountChange, onCurrencyChange, onCountryChange, onFindRoute, onSelectQuote, 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,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.1"
+        "0.10.1-rc.3"
       ] })
     ] })
   ] });
@@ -2471,6 +2471,33 @@ var STATUS_LABEL = {
   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,
@@ -2479,6 +2506,8 @@ function RampWidgetTemplate({
   amount,
   currency,
   country,
+  requiredFields,
+  fieldValues,
   countries,
   countriesLoading,
   refreshing,
@@ -2488,15 +2517,17 @@ function RampWidgetTemplate({
   txStatus,
   kycUrl,
   stellarTxHash,
+  depositInstructions,
   canComplete,
   completing,
   errorMsg,
   onDirectionChange,
   onAmountChange,
-  onCurrencyChange,
+  onFieldChange,
   onCountryChange,
   onFindRoute,
   onSelectQuote,
+  onContactContinue,
   onOpenKyc,
   onCompleteWithdraw,
   onRetry,
@@ -2528,6 +2559,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"
   };
@@ -2535,6 +2567,7 @@ 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"
   };
@@ -2592,36 +2625,6 @@ 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" }),
         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: [
@@ -2631,6 +2634,23 @@ function RampWidgetTemplate({
           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",
+            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(
@@ -2653,6 +2673,34 @@ 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: [
+      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: f.type,
+            className: "pollar-ramp-input",
+            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(
+          "button",
+          {
+            type: "button",
+            className: "pollar-btn-primary",
+            disabled: requiredFields.some((f) => !(fieldValues[f.key] ?? "").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" }),
@@ -2670,6 +2718,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
@@ -2688,6 +2740,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 ?? "";
@@ -2698,16 +2753,20 @@ function RampWidget({ onClose }) {
   const [amount, setAmount] = react.useState("");
   const [currency, setCurrency] = react.useState("");
   const [country, setCountry] = 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);
   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);
@@ -2723,6 +2782,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 {
       }
@@ -2770,6 +2831,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);
       }
     } catch {
     } finally {
@@ -2779,11 +2842,13 @@ function RampWidget({ onClose }) {
   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) {
@@ -2809,6 +2874,7 @@ function RampWidget({ onClose }) {
     setKycUrl(result.kycUrl ?? null);
     setTxStatus(result.status);
     setStellarTxHash(result.stellarTxHash ?? null);
+    setDepositInstructions(result.depositInstructions ?? null);
     setStep("status");
   }
   async function handleFindRoute() {
@@ -2832,12 +2898,33 @@ function RampWidget({ onClose }) {
       setIsLoading(false);
     }
   }
-  async function handleSelectQuote(quote) {
+  function handleSelectQuote(quote) {
+    setSelectedQuote(quote);
+    setErrorMsg(null);
+    const fields = requiredFieldsOf(quote);
+    const missing = fields.some((f) => !(fieldValues[f.key] ?? "").trim());
+    if (fields.length > 0 && missing) {
+      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 } : {} });
+      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) {
       setErrorMsg(e instanceof Error ? e.message : "Failed to start the ramp.");
@@ -2881,6 +2968,8 @@ function RampWidget({ onClose }) {
       amount,
       currency,
       country,
+      requiredFields: selectedQuote ? requiredFieldsOf(selectedQuote) : [],
+      fieldValues,
       countries,
       countriesLoading,
       refreshing,
@@ -2890,15 +2979,17 @@ function RampWidget({ onClose }) {
       txStatus,
       kycUrl,
       stellarTxHash,
+      depositInstructions,
       canComplete,
       completing,
       errorMsg,
       onDirectionChange: setDirection,
       onAmountChange: setAmount,
-      onCurrencyChange: setCurrency,
+      onFieldChange: setFieldValue,
       onCountryChange: handleCountryChange,
       onFindRoute: handleFindRoute,
       onSelectQuote: handleSelectQuote,
+      onContactContinue: handleContactContinue,
       onOpenKyc: handleOpenKyc,
       onCompleteWithdraw: handleCompleteWithdraw,
       onRetry: resetToInput,
@@ -4551,6 +4642,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,