@pollar/react 0.5.2 → 0.5.3

package/dist/index.js

@@ -38,7 +38,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.5.2"
+        "0.5.3"
       ] })
     ] })
   ] });
@@ -98,15 +98,25 @@ function KycModalTemplate({
   const isDark = theme === "dark";
   const cssVars = {
     "--pollar-accent": accentColor,
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
     "--pollar-border": isDark ? "#374151" : "#e5e7eb",
     "--pollar-text": isDark ? "#ffffff" : "#111827",
     "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb"
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px",
+    "--pollar-modal-padding": "2rem",
+    "--pollar-modal-heading-size": "1.375rem",
+    "--pollar-modal-subtitle-size": "0.9rem"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-kyc-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-kyc-title", children: "Identity verification" }),
       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-kyc-subtitle", children: [
@@ -376,16 +386,23 @@ function LoginModalTemplate({
   const enabledSocial = Object.entries(providers).filter(([, enabled]) => enabled);
   const cssVars = {
     "--pollar-accent": accentColor,
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
     "--pollar-border": isDark ? "#374151" : "#e5e7eb",
     "--pollar-text": isDark ? "#ffffff" : "#111827",
     "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#ffffff",
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
     "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
     "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626"
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px",
+    "--pollar-modal-padding": "2rem",
+    "--pollar-modal-heading-size": "1.375rem",
+    "--pollar-modal-subtitle-size": "0.9rem"
   };
   const status = authStateToStatus(authState.step);
   const isLoading = status === "LOADING";
@@ -393,7 +410,7 @@ function LoginModalTemplate({
   const awaitingEmailCode = authState.step === "entering_code" || authState.step === "verifying_email_code" || isEmailCodeError;
   const statusMessage = authState.step === "error" ? authState.message : AUTH_STATE_MESSAGES[authState.step];
   const BackButton = ({ onClick }) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-back-btn", onClick, "aria-label": "Back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 19l-7-7 7-7" }) }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onCancel, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-logo-wrap", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl ?? LOGO_POLLAR, alt: "Logo", className: "pollar-logo" }) }),
@@ -448,7 +465,7 @@ function LoginModalTemplate({
             onKeyDown: (e) => e.key === "Enter" && onEmailSubmit?.()
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: isLoading || !email, className: "pollar-submit-btn", onClick: onEmailSubmit, children: "Submit" })
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: isLoading || !email, className: "pollar-btn-primary", style: { marginTop: "0.75rem", width: "100%" }, onClick: onEmailSubmit, children: "Submit" })
       ] }),
       emailEnabled && enabledSocial.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-divider", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-divider-line" }),
@@ -636,13 +653,23 @@ function RampWidgetTemplate({
   const isDark = theme === "dark";
   const cssVars = {
     "--pollar-accent": accentColor,
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
     "--pollar-border": isDark ? "#374151" : "#e5e7eb",
     "--pollar-text": isDark ? "#ffffff" : "#111827",
     "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb"
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px",
+    "--pollar-modal-padding": "2rem",
+    "--pollar-modal-heading-size": "1.375rem",
+    "--pollar-modal-subtitle-size": "0.9rem"
   };
   const stepTitle = {
     input: direction === "onramp" ? "Buy crypto" : "Sell crypto",
@@ -656,7 +683,7 @@ function RampWidgetTemplate({
     select_route: "All prices include fees",
     payment_instructions: "Send the exact amount to complete your transaction"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+  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] })
@@ -895,15 +922,20 @@ function TransactionModalTemplate({
   const isDark = theme === "dark";
   const cssVars = {
     "--pollar-accent": accentColor,
-    "--pollar-buttons-border-radius": "8px",
-    "--pollar-buttons-height": "44px",
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
     "--pollar-border": isDark ? "#374151" : "#e5e7eb",
     "--pollar-text": isDark ? "#ffffff" : "#111827",
     "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "rgba(0,0,0,0.04)",
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
     "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a"
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px"
   };
   const buildData = "buildData" in transaction ? transaction.buildData : null;
   const hash = transaction.step === "success" ? transaction.hash : null;
@@ -913,7 +945,7 @@ function TransactionModalTemplate({
   const isSuccess = transaction.step === "success";
   const isError = transaction.step === "error";
   const showDetails = buildData !== null && (isBuilt || isSigning || isSuccess);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tx-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-tx-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-header", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Transaction" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -1089,7 +1121,7 @@ function TransactionModal({ onClose }) {
   const [copied, setCopied] = react.useState(false);
   const hash = transaction.step === "success" ? transaction.hash : null;
   const buildData = "buildData" in transaction ? transaction.buildData : null;
-  const explorerNetwork = buildData?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : "public";
+  const explorerNetwork = buildData?.summary.network?.toLowerCase().includes("testnet") ? "testnet" : buildData ? "public" : network === "testnet" ? "testnet" : "public";
   const explorerUrl = hash ? `https://stellar.expert/explorer/${explorerNetwork}/tx/${hash}` : null;
   function handleSignAndSend() {
     if (transaction.step === "built") {
@@ -1146,15 +1178,20 @@ function TxHistoryModalTemplate({
   const isDark = theme === "dark";
   const cssVars = {
     "--pollar-accent": accentColor,
-    "--pollar-buttons-border-radius": "8px",
-    "--pollar-buttons-height": "44px",
     "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
     "--pollar-border": isDark ? "#374151" : "#e5e7eb",
     "--pollar-text": isDark ? "#ffffff" : "#111827",
     "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "rgba(0,0,0,0.04)",
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
     "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a"
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px"
   };
   const isLoading = txHistory.step === "loading";
   const records = txHistory.step === "loaded" ? txHistory.data.records : [];
@@ -1162,7 +1199,7 @@ function TxHistoryModalTemplate({
   const hasPrev = offset > 0;
   const hasNext = offset + PAGE_SIZE < total;
   const showPagination = txHistory.step === "loaded" && total > PAGE_SIZE;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-hist-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Transaction History" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
@@ -1200,22 +1237,33 @@ function TxHistoryModalTemplate({
       isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Loading\u2026" }),
       txHistory.step === "error" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: txHistory.message }),
       txHistory.step === "loaded" && records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No transactions yet." }),
-      records.map((record) => /* @__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 }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-hist-item-meta", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: record.operation }),
-          record.feeXlm && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            "\xB7 ",
-            record.feeXlm,
-            " XLM"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            "\xB7 ",
-            formatDate(record.createdAt)
+      records.map((record) => {
+        const explorerUrl = `https://stellar.expert/explorer/${record.network === "testnet" ? "testnet" : "public"}/tx/${record.hash}`;
+        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 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-hist-item-meta", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: record.operation }),
+            record.feeXlm && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "\xB7 ",
+              record.feeXlm,
+              " XLM"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "\xB7 ",
+              formatDate(record.createdAt)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\xB7" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "pollar-hist-item-explorer", href: explorerUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "View on Stellar Explorer", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "11", height: "11", viewBox: "0 0 13 13", fill: "none", "aria-hidden": true, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 2H2a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1h4m0 0v4m0-4L6 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+              ] }),
+              "Explorer"
+            ] })
           ] })
-        ] })
-      ] }, record.id))
+        ] }, record.id);
+      })
     ] }),
     showPagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-pagination", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-hist-pagination-info", children: [
@@ -1292,12 +1340,20 @@ function WalletBalanceModalTemplate({
     "--pollar-border": isDark ? "#374151" : "#e5e7eb",
     "--pollar-text": isDark ? "#ffffff" : "#111827",
     "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "rgba(0,0,0,0.04)",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626"
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-buttons-border-radius": "6px",
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px"
   };
   const isLoading = walletBalance.step === "loading";
   const data = walletBalance.step === "loaded" ? walletBalance.data : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-bal-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-bal-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Wallet Balance" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
@@ -1364,7 +1420,7 @@ async function fetchRemoteConfig(client) {
   return content ?? emptyResponse;
 }
 var PollarContext = react.createContext(null);
-function PollarProvider({ config, styles: propStyles, children }) {
+function PollarProvider({ config, styles: propStyles, adapters, children }) {
   const [pollarClient] = react.useState(() => new core.PollarClient(config));
   const [networkState, setNetworkState] = react.useState(() => pollarClient.getNetworkState());
   const [sessionState, setSessionState] = react.useState(null);
@@ -1446,7 +1502,8 @@ function PollarProvider({ config, styles: propStyles, children }) {
       network: networkState.step === "connected" ? networkState.network : "testnet",
       setNetwork: (network) => pollarClient.setNetwork(network),
       config: remoteConfig,
-      styles
+      styles,
+      adapters
     }),
     [sessionState, remoteConfig, styles, pollarClient, transaction, txHistory, networkState, walletBalance]
   );
@@ -1475,6 +1532,26 @@ function usePollar() {
   }
   return ctx;
 }
+
+// src/usePollarAdapter.ts
+function createPollarAdapterHook(key) {
+  return function usePollarAdapter() {
+    const { adapters, signAndSubmitTx } = usePollar();
+    const adapter = adapters?.[key];
+    if (!adapter) {
+      throw new Error(`No adapter "${key}" provided to PollarProvider`);
+    }
+    return Object.fromEntries(
+      Object.entries(adapter).map(([name, fn]) => [
+        name,
+        async (params) => {
+          const { unsignedTransaction } = await fn(params);
+          await signAndSubmitTx(unsignedTransaction);
+        }
+      ])
+    );
+  };
+}
 function ButtonLogo() {
   return /* @__PURE__ */ jsxRuntime.jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "wallet-btn-logo" });
 }
@@ -1697,6 +1774,7 @@ exports.TxHistoryModalTemplate = TxHistoryModalTemplate;
 exports.WalletBalanceModal = WalletBalanceModal;
 exports.WalletBalanceModalTemplate = WalletBalanceModalTemplate;
 exports.WalletButton = WalletButton;
+exports.createPollarAdapterHook = createPollarAdapterHook;
 exports.usePollar = usePollar;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map