@pollar/react 0.8.1 → 0.9.0-rc.0

package/dist/index.js

@@ -4,6 +4,7 @@
 var core = require('@pollar/core');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var browser = require('@simplewebauthn/browser');
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -1012,7 +1013,7 @@ var ModalErrorBoundary = class extends react.Component {
     return { crashed: true };
   }
   componentDidCatch(error) {
-    console.error("[Pollar] Modal crashed:", error);
+    console.error("[PollarProvider] Modal crashed:", error);
   }
   render() {
     if (this.state.crashed) {
@@ -1030,7 +1031,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.8.1"
+        "0.9.0-rc.0"
       ] })
     ] })
   ] });
@@ -1067,7 +1068,8 @@ var REASON_LABEL = {
   DISTRIBUTION_RULE_NOT_STARTED: "Not started yet",
   DISTRIBUTION_RULE_EXPIRED: "Expired",
   DISTRIBUTION_RULE_EXHAUSTED: "Fully claimed",
-  DISTRIBUTION_RATE_LIMIT_EXCEEDED: "Already claimed"
+  // Per-user, per-window claim limit (resets next period) — not permanent.
+  DISTRIBUTION_RATE_LIMIT_EXCEEDED: "Claimed for this period"
 };
 function reasonLabel(reason) {
   if (!reason) return "Not available";
@@ -1344,11 +1346,7 @@ function KycModalTemplate({
     step === "verifying" && selectedProvider && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-kyc-iframe-wrap", children: session?.kycUrl ? /* @__PURE__ */ jsxRuntime.jsx("iframe", { className: "pollar-kyc-iframe", src: session.kycUrl, title: "KYC verification", allow: "camera; microphone" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-iframe-mock", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u{1F512}" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedProvider.flow === "form" ? "Form-based KYC \u2014 fields will render here once backend is connected" : "KYC iframe will load here once backend is connected" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("code", { style: { fontSize: "0.7rem", opacity: 0.6 }, children: [
-          "provider: ",
-          selectedProvider.id
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedProvider.flow === "form" ? "The identity verification form will appear here." : "Identity verification will open here." })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" }),
@@ -1497,46 +1495,37 @@ var GoogleButton = ({ disabled, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "gsi-material-button", disabled, onClick, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gsi-material-button-state" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gsi-material-button-content-wrapper", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gsi-material-button-icon", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "svg",
-        {
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 48 48",
-          style: { display: "block" },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#EA4335",
-                d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#4285F4",
-                d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#FBBC05",
-                d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                fill: "#34A853",
-                d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
-          ]
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gsi-material-button-icon", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", style: { display: "block" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "#EA4335",
+            d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "#4285F4",
+            d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "#FBBC05",
+            d: "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            fill: "#34A853",
+            d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "gsi-material-button-contents", children: "Google" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "none" }, children: "Google" })
     ] })
@@ -1583,6 +1572,8 @@ var AUTH_STATE_MESSAGES = {
   connecting_wallet: "Connecting wallet\u2026",
   wallet_not_installed: "Wallet not installed",
   authenticating_wallet: "Signing in with wallet\u2026",
+  creating_passkey: "Waiting for passkey\u2026",
+  deploying_smart_account: "Creating your wallet\u2026",
   authenticating: "Authenticating\u2026",
   authenticated: "Welcome!",
   error: ""
@@ -1595,6 +1586,8 @@ function authStateToStatus(step) {
     "opening_oauth",
     "connecting_wallet",
     "authenticating_wallet",
+    "creating_passkey",
+    "deploying_smart_account",
     "authenticating"
   ];
   const success = ["authenticated", "entering_code"];
@@ -1610,6 +1603,7 @@ function LoginModalTemplate({
   logoUrl,
   emailEnabled,
   embeddedWallets,
+  smartWallet = false,
   providers,
   appName,
   email = "",
@@ -1617,6 +1611,7 @@ function LoginModalTemplate({
   onEmailSubmit,
   onSocialLogin,
   onWalletConnect,
+  onSmartWallet,
   renderWallets,
   authState,
   codeInputKey,
@@ -1730,32 +1725,60 @@ function LoginModalTemplate({
         enabledSocial.some(([key]) => key === "google") && /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { disabled: isLoading, onClick: () => onSocialLogin?.("google") }),
         enabledSocial.some(([key]) => key === "github") && /* @__PURE__ */ jsxRuntime.jsx(GithubButton, { disabled: isLoading, onClick: () => onSocialLogin?.("github") })
       ] }),
-      embeddedWallets && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-wallet-section", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          disabled: isLoading,
-          className: "pollar-wallet-entry-btn",
-          onClick: () => setShowWalletPicker(true),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "18",
-                height: "20",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" })
-              }
-            ),
-            "Wallet"
-          ]
-        }
-      ) })
+      (embeddedWallets || smartWallet) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-wallet-section", children: [
+        embeddedWallets && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-wallet-entry-btn",
+            onClick: () => setShowWalletPicker(true),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  width: "18",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" })
+                }
+              ),
+              "Wallet"
+            ]
+          }
+        ),
+        smartWallet && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: isLoading,
+            className: "pollar-wallet-entry-btn",
+            onClick: onSmartWallet,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  width: "18",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 8V6a4 4 0 00-8 0v2M5 8h14a1 1 0 011 1v10a1 1 0 01-1 1H5a1 1 0 01-1-1V9a1 1 0 011-1zm7 5v2" })
+                }
+              ),
+              "Smart Wallet"
+            ]
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ModalStatusBanner,
@@ -1804,6 +1827,7 @@ function LoginModal({ onClose }) {
     };
   }, [getClient]);
   const { theme = "light", accentColor = "#005DB4", logoUrl, emailEnabled, embeddedWallets, providers } = styles;
+  const smartWallet = styles.smartWallet ?? true;
   function handleClose() {
     setEmail("");
     getClient().cancelLogin();
@@ -1820,6 +1844,9 @@ function LoginModal({ onClose }) {
   function handleWalletConnect(type) {
     getClient().loginWallet(type);
   }
+  function handleSmartWallet() {
+    getClient().loginSmartWallet();
+  }
   function handleVerifyCode(code) {
     getClient().verifyEmailCode(code);
   }
@@ -1841,6 +1868,7 @@ function LoginModal({ onClose }) {
       logoUrl: logoUrl ?? null,
       emailEnabled: !!emailEnabled,
       embeddedWallets: !!embeddedWallets,
+      smartWallet,
       providers: {
         google: !!providers?.google,
         discord: !!providers?.discord,
@@ -1854,6 +1882,7 @@ function LoginModal({ onClose }) {
       onEmailSubmit: handleEmailSubmit,
       onSocialLogin: handleSocialLogin,
       onWalletConnect: handleWalletConnect,
+      onSmartWallet: handleSmartWallet,
       ...renderWallets !== void 0 && { renderWallets },
       authState,
       codeInputKey,
@@ -3080,18 +3109,16 @@ function SessionsModalTemplate({
   );
 }
 function SessionsModal({ onClose }) {
-  const { getClient, styles } = usePollar();
+  const { getClient, styles, sessions } = usePollar();
   const { theme = "light", accentColor = "#005DB4" } = styles;
-  const [state, setState] = react.useState({ step: "idle" });
   const [revokingFamilyId, setRevokingFamilyId] = react.useState(null);
   const [signingOutEverywhere, setSigningOutEverywhere] = react.useState(false);
-  const mountedRef = react.useRef(true);
-  react.useEffect(
-    () => () => {
-      mountedRef.current = false;
-    },
-    []
-  );
+  const load = react.useCallback(() => {
+    void getClient().fetchSessions();
+  }, [getClient]);
+  react.useEffect(() => {
+    load();
+  }, [load]);
   const onCloseRef = react.useRef(onClose);
   onCloseRef.current = onClose;
   react.useEffect(() => {
@@ -3099,33 +3126,15 @@ function SessionsModal({ onClose }) {
       if (authState.step === "idle") onCloseRef.current();
     });
   }, [getClient]);
-  const load = react.useCallback(async () => {
-    setState({ step: "loading" });
-    try {
-      const sessions = await getClient().listSessions();
-      if (!mountedRef.current) return;
-      setState({ step: "loaded", sessions });
-    } catch (err) {
-      if (!mountedRef.current) return;
-      const message = err instanceof Error ? err.message : "Failed to load sessions";
-      setState({ step: "error", message });
-    }
-  }, [getClient]);
-  react.useEffect(() => {
-    void load();
-  }, [load]);
   const handleRevoke = react.useCallback(
     async (familyId) => {
       setRevokingFamilyId(familyId);
       try {
         await getClient().revokeSession(familyId);
-        if (!mountedRef.current) return;
-        await load();
       } catch {
-        if (!mountedRef.current) return;
-        setState((prev) => prev.step === "loaded" ? { step: "error", message: "Failed to revoke session" } : prev);
       } finally {
-        if (mountedRef.current) setRevokingFamilyId(null);
+        setRevokingFamilyId(null);
+        load();
       }
     },
     [getClient, load]
@@ -3136,7 +3145,6 @@ function SessionsModal({ onClose }) {
       await getClient().logoutEverywhere();
       onClose();
     } catch {
-      if (!mountedRef.current) return;
       setSigningOutEverywhere(false);
     }
   }, [getClient, onClose]);
@@ -3145,10 +3153,10 @@ function SessionsModal({ onClose }) {
     {
       theme,
       accentColor,
-      state,
+      state: sessions,
       revokingFamilyId,
       signingOutEverywhere,
-      onRefresh: () => void load(),
+      onRefresh: () => load(),
       onRevoke: (familyId) => void handleRevoke(familyId),
       onLogoutEverywhere: () => void handleLogoutEverywhere(),
       onClose
@@ -3562,6 +3570,60 @@ function WalletBalanceModal({ onClose }) {
     }
   ) });
 }
+function hexToBase64url(hex) {
+  const bytes = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < bytes.length; i++) bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+  let bin = "";
+  for (const b of bytes) bin += String.fromCharCode(b);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function randomUserId() {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  let bin = "";
+  for (const b of bytes) bin += String.fromCharCode(b);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+var browserPasskeyCeremony = async ({ challenge }) => {
+  const rpId = window.location.hostname;
+  try {
+    const response2 = await browser.startAuthentication({
+      optionsJSON: { challenge, rpId, userVerification: "required" }
+    });
+    return { kind: "login", response: response2 };
+  } catch {
+  }
+  const userId = randomUserId();
+  const response = await browser.startRegistration({
+    optionsJSON: {
+      challenge,
+      rp: { id: rpId, name: rpId },
+      user: { id: userId, name: "Smart Wallet", displayName: "Smart Wallet" },
+      // ES256 (secp256r1) — the curve the on-chain WebAuthn verifier expects.
+      pubKeyCredParams: [{ type: "public-key", alg: -7 }],
+      authenticatorSelection: { residentKey: "required", userVerification: "required" },
+      attestation: "none",
+      timeout: 6e4
+    }
+  });
+  return { kind: "register", response };
+};
+var browserPasskeySigner = async ({ credentialId, challenge }) => {
+  const rpId = window.location.hostname;
+  const { response } = await browser.startAuthentication({
+    optionsJSON: {
+      challenge: hexToBase64url(challenge),
+      rpId,
+      allowCredentials: [{ id: credentialId, type: "public-key" }],
+      userVerification: "required"
+    }
+  });
+  return {
+    authenticatorData: response.authenticatorData,
+    clientDataJSON: response.clientDataJSON,
+    signature: response.signature
+  };
+};
 var DEFAULT_APP_CONFIG = {
   application: { name: "" },
   styles: {}
@@ -3569,7 +3631,7 @@ var DEFAULT_APP_CONFIG = {
 function sessionsEqual(a, b) {
   if (a === b) return true;
   if (!a || !b) return false;
-  return a.clientSessionId === b.clientSessionId && a.userId === b.userId && a.status === b.status && a.token?.accessToken === b.token?.accessToken && a.token?.refreshToken === b.token?.refreshToken && a.token?.expiresAt === b.token?.expiresAt && a.wallet?.publicKey === b.wallet?.publicKey;
+  return a.clientSessionId === b.clientSessionId && a.userId === b.userId && a.status === b.status && a.token?.accessToken === b.token?.accessToken && a.token?.refreshToken === b.token?.refreshToken && a.token?.expiresAt === b.token?.expiresAt && a.wallet?.address === b.wallet?.address;
 }
 var PollarContext = react.createContext(null);
 function PollarProvider({
@@ -3580,11 +3642,15 @@ function PollarProvider({
   onStorageDegrade,
   children
 }) {
-  const [pollarClient] = react.useState(() => client instanceof core.PollarClient ? client : new core.PollarClient(client));
+  const [pollarClient] = react.useState(
+    () => client instanceof core.PollarClient ? client : new core.PollarClient({ passkey: browserPasskeyCeremony, passkeySign: browserPasskeySigner, ...client })
+  );
   const [networkState, setNetworkState] = react.useState(() => pollarClient.getNetworkState());
   const [sessionState, setSessionState] = react.useState(null);
+  const [verified, setVerified] = react.useState(false);
   const [transaction, setTransaction] = react.useState({ step: "idle" });
   const [txHistory, setTxHistory] = react.useState({ step: "idle" });
+  const [sessions, setSessions] = react.useState({ step: "idle" });
   const [walletBalance, setWalletBalance] = react.useState({ step: "idle" });
   const [resolvedConfig, setResolvedConfig] = react.useState(() => appConfigProp ?? DEFAULT_APP_CONFIG);
   react.useEffect(() => {
@@ -3593,6 +3659,9 @@ function PollarProvider({
   react.useEffect(() => {
     return pollarClient.onTxHistoryStateChange(setTxHistory);
   }, [pollarClient]);
+  react.useEffect(() => {
+    return pollarClient.onSessionsStateChange(setSessions);
+  }, [pollarClient]);
   react.useEffect(() => {
     return pollarClient.onWalletBalanceStateChange(setWalletBalance);
   }, [pollarClient]);
@@ -3609,8 +3678,10 @@ function PollarProvider({
     return pollarClient.onAuthStateChange((authState) => {
       if (authState.step === "authenticated") {
         setSessionState((prev) => sessionsEqual(prev, authState.session) ? prev : authState.session);
+        setVerified(authState.verified);
       } else if (authState.step === "idle") {
         setSessionState(null);
+        setVerified(false);
       }
     });
   }, [pollarClient]);
@@ -3638,9 +3709,9 @@ function PollarProvider({
   const [receiveModalOpen, setReceiveModalOpen] = react.useState(false);
   const [sessionsModalOpen, setSessionsModalOpen] = react.useState(false);
   const [distributionRulesModalOpen, setDistributionRulesModalOpen] = react.useState(false);
-  const walletAddress = sessionState?.wallet?.publicKey || "";
+  const walletAddress = sessionState?.wallet?.address || "";
   const getClient = react.useCallback(() => pollarClient, [pollarClient]);
-  const refreshWalletBalance = react.useCallback(() => pollarClient.refreshBalance(walletAddress), [pollarClient, walletAddress]);
+  const refreshWalletBalance = react.useCallback(() => pollarClient.refreshBalance(), [pollarClient, walletAddress]);
   const renderWallets = ui?.renderWallets;
   const contextValue = react.useMemo(() => {
     const styles = resolvedConfig.styles ?? {};
@@ -3648,6 +3719,7 @@ function PollarProvider({
       // session
       walletAddress,
       isAuthenticated: !!walletAddress,
+      verified,
       walletType: pollarClient.getWalletType(),
       // client
       getClient,
@@ -3675,6 +3747,7 @@ function PollarProvider({
       openSendModal: () => setSendModalOpen(true),
       openReceiveModal: () => setReceiveModalOpen(true),
       // sessions
+      sessions,
       openSessionsModal: () => setSessionsModalOpen(true),
       // distribution
       openDistributionRulesModal: () => setDistributionRulesModalOpen(true),
@@ -3696,10 +3769,12 @@ function PollarProvider({
     };
   }, [
     walletAddress,
+    verified,
     pollarClient,
     getClient,
     transaction,
     txHistory,
+    sessions,
     walletBalance,
     refreshWalletBalance,
     networkState,
@@ -3779,6 +3854,10 @@ function WalletButtonTemplate({
   onTxHistory,
   onSend,
   onReceive,
+  onSessions,
+  onKyc,
+  onRamp,
+  onDistributionRules,
   onLogout,
   onLogin
 }) {
@@ -3938,6 +4017,94 @@ function WalletButtonTemplate({
         "Transaction history"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "wallet-dropdown-divider" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onRamp, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 1 21 5 17 9" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 23 3 19 7 15" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })
+            ]
+          }
+        ),
+        "Buy / Sell"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onKyc, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 21v-1a6 6 0 0 1 6-6h2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 11 18 13 22 9" })
+            ]
+          }
+        ),
+        "Identity verification"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onDistributionRules, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "5", r: "3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "12", r: "3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "19", r: "3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8.59", y1: "13.51", x2: "15.42", y2: "17.49" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15.41", y1: "6.51", x2: "8.59", y2: "10.49" })
+            ]
+          }
+        ),
+        "Distribution rules"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: onSessions, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+            ]
+          }
+        ),
+        "Active sessions"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "wallet-dropdown-divider" }),
       /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "wallet-dropdown-item danger", onClick: onLogout, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
@@ -3972,6 +4139,10 @@ function WalletButton() {
     openWalletBalanceModal,
     openSendModal,
     openReceiveModal,
+    openSessionsModal,
+    openKycModal,
+    openRampModal,
+    openDistributionRulesModal,
     tx: transaction,
     walletType
   } = usePollar();
@@ -4030,6 +4201,22 @@ function WalletButton() {
     setOpen(false);
     openReceiveModal();
   }
+  function handleSessions() {
+    setOpen(false);
+    openSessionsModal();
+  }
+  function handleKyc() {
+    setOpen(false);
+    openKycModal();
+  }
+  function handleRamp() {
+    setOpen(false);
+    openRampModal();
+  }
+  function handleDistributionRules() {
+    setOpen(false);
+    openDistributionRulesModal();
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     WalletButtonTemplate,
     {
@@ -4049,6 +4236,10 @@ function WalletButton() {
       onTxHistory: handleTxHistory,
       onSend: handleSend,
       onReceive: handleReceive,
+      onSessions: handleSessions,
+      onKyc: handleKyc,
+      onRamp: handleRamp,
+      onDistributionRules: handleDistributionRules,
       onLogout: handleLogout,
       onLogin: openLoginModal
     }
@@ -4077,6 +4268,7 @@ exports.TxStatusView = TxStatusView;
 exports.WalletBalanceModal = WalletBalanceModal;
 exports.WalletBalanceModalTemplate = WalletBalanceModalTemplate;
 exports.WalletButton = WalletButton;
+exports.WalletButtonTemplate = WalletButtonTemplate;
 exports.createPollarAdapterHook = createPollarAdapterHook;
 exports.usePollar = usePollar;
 //# sourceMappingURL=index.js.map