@pollar/react 0.3.9

package/dist/index.mjs

@@ -0,0 +1,575 @@
+'use client';
+import { PollarClient, StellarClient, StateStatus, STATE_VAR_CODES, PollarStateVar, isValidSession, WalletType } from '@pollar/core';
+import { createContext, useState, useEffect, useMemo, useContext, useRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/context.tsx
+
+// src/constants.ts
+var LOGO_POLLAR = "https://pollar.xyz/assets/logo_pollar.png";
+var LOGO_GITHUB = "https://pollar.xyz/assets/GitHub_Invertocat_White.png";
+var LOGO_FREIGHTER = "https://pollar.xyz/assets/logo_freighter.png";
+var LOGO_ALBEDO = "https://pollar.xyz/assets/logo_albedo.svg";
+function EmailCodeInput({ email, onSubmit }) {
+  const [digits, setDigits] = useState(["", "", "", "", "", ""]);
+  const inputRefs = useRef([]);
+  function submit(next) {
+    if (next.every(Boolean)) onSubmit(next.join(""));
+  }
+  function handleChange(index, value) {
+    const cleaned = value.replace(/\D/g, "").slice(-1);
+    const next = digits.map((d, i) => i === index ? cleaned : d);
+    setDigits(next);
+    if (cleaned && index < 5) inputRefs.current[index + 1]?.focus();
+    submit(next);
+  }
+  function handleKeyDown(index, e) {
+    if (e.key === "Backspace" && !digits[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  }
+  function handlePaste(e) {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
+    const next = Array.from({ length: 6 }, (_, i) => text[i] ?? "");
+    setDigits(next);
+    inputRefs.current[Math.min(text.length - 1, 5)]?.focus();
+    submit(next);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-code-section", children: [
+    /* @__PURE__ */ jsxs("p", { className: "pollar-code-label", children: [
+      "Enter the 6-digit code sent to",
+      " ",
+      email ? /* @__PURE__ */ jsx("strong", { children: email }) : "your email"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "pollar-code-inputs", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputRefs.current[i] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        maxLength: 2,
+        value: digit,
+        className: "pollar-code-input",
+        onChange: (e) => handleChange(i, e.target.value),
+        onKeyDown: (e) => handleKeyDown(i, e),
+        onPaste: handlePaste
+      },
+      i
+    )) })
+  ] });
+}
+var GithubButton = ({ disabled, onClick }) => {
+  return /* @__PURE__ */ jsxs("button", { className: "github-button", disabled, onClick, children: [
+    /* @__PURE__ */ jsx("img", { src: LOGO_GITHUB, alt: "GitHub", className: "github-button-icon" }),
+    /* @__PURE__ */ jsx("span", { className: "github-button-contents", children: "Continue with GitHub" })
+  ] });
+};
+var GoogleButton = ({ disabled, onClick }) => {
+  return /* @__PURE__ */ jsxs("button", { className: "gsi-material-button", disabled, onClick, children: [
+    /* @__PURE__ */ jsx("div", { className: "gsi-material-button-state" }),
+    /* @__PURE__ */ jsxs("div", { className: "gsi-material-button-content-wrapper", children: [
+      /* @__PURE__ */ jsx("div", { className: "gsi-material-button-icon", children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          version: "1.1",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 48 48",
+          style: { display: "block" },
+          children: [
+            /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("path", { fill: "none", d: "M0 0h48v48H0z" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("span", { className: "gsi-material-button-contents", children: "Continue with Google" }),
+      /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: "Continue with Google" })
+    ] })
+  ] });
+};
+var LOGIN_CODE_MESSAGES = {
+  LOGOUT: { text: "Logged out" },
+  CREATE_SESSION_START: { text: "Starting session\u2026" },
+  CREATE_SESSION_ERROR: { text: "Failed to start session" },
+  CREATE_SESSION_SUCCESS: { text: "Session ready" },
+  EMAIL_AUTH_START: { text: "Sending code\u2026" },
+  EMAIL_AUTH_START_ERROR: { text: "Failed to send code" },
+  EMAIL_AUTH_START_SUCCESS: { text: "Code sent \u2014 check your inbox" },
+  EMAIL_AUTH_CODE_ERROR: { text: "Invalid code \u2014 try again" },
+  EMAIL_AUTH_CODE_SUCCESS: { text: "Code verified!" },
+  WALLET_AUTH_START: { text: "Connecting wallet\u2026" },
+  WALLET_AUTH_FREIGHTER_NOT_INSTALLED: { text: "Freighter is not installed" },
+  WALLET_AUTH_ALBEDO_NOT_INSTALLED: { text: "Albedo is not installed" },
+  WALLET_AUTH_CONNECTED: { text: "Wallet connected" },
+  WALLET_AUTH_LOGIN_START: { text: "Signing in with wallet\u2026" },
+  WALLET_AUTH_LOGIN_START_SUCCESS: { text: "Wallet signed in" },
+  WALLET_AUTH_LOGIN_START_ERROR: { text: "Failed to sign in with wallet" },
+  WALLET_AUTH_ERROR: { text: "Unknow wallet error" },
+  STREAM_POLL_START: { text: "Waiting for authentication\u2026" },
+  STREAM_POLL_EVENT: { text: "Waiting for authentication\u2026" },
+  STREAM_POLL_READY: { text: "Authenticated!" },
+  FETCH_SESSION_START: { text: "Loading session\u2026" },
+  FETCH_SESSION_SUCCESS: { text: "Welcome back!" },
+  FETCH_SESSION_ERROR: { text: "Failed to load session" },
+  ERROR_UNKNOWN: { text: "Something went wrong" },
+  ABORTED: { text: "Login cancelled" }
+};
+function LoginStatusBanner({ code, status, onCancel, onRetry }) {
+  if (!code) return /* @__PURE__ */ jsx("div", { className: "pollar-status" });
+  const { text } = LOGIN_CODE_MESSAGES[code] || { text: "" };
+  const isLoading = status === StateStatus.LOADING;
+  const icon = status === StateStatus.ERROR ? /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.5 4.5l5 5M9.5 4.5l-5 5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }) : status === StateStatus.SUCCESS ? /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "7", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.5 7l2.5 2.5 4.5-5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }) : status === StateStatus.LOADING ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeDasharray: "22 10" }) }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-status", "data-kind": status, children: [
+    icon,
+    /* @__PURE__ */ jsx("span", { children: text }),
+    isLoading && onCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onCancel, children: "Cancel" }),
+    status === StateStatus.ERROR && /* @__PURE__ */ jsx("button", { type: "button", className: "pollar-status-cancel", onClick: onRetry, children: "Retry" })
+  ] });
+}
+function LoginModalTemplate({
+  theme,
+  accentColor,
+  logoUrl,
+  emailEnabled,
+  embeddedWallets,
+  providers,
+  appName,
+  email = "",
+  status,
+  error,
+  onEmailChange,
+  onEmailSubmit,
+  onSocialLogin,
+  onFreighterConnect,
+  onAlbedoConnect,
+  loginStateCode,
+  awaitingEmailCode = false,
+  onCodeSubmit,
+  cancelLoginRef,
+  onRetry
+}) {
+  const isDark = theme === "dark";
+  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-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626"
+  };
+  const isLoading = status === StateStatus.LOADING;
+  return /* @__PURE__ */ jsxs("div", { className: "pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "pollar-header", children: [
+      /* @__PURE__ */ jsx("div", { className: "pollar-logo-wrap", children: /* @__PURE__ */ jsx("img", { src: logoUrl ?? LOGO_POLLAR, alt: "Logo", className: "pollar-logo" }) }),
+      /* @__PURE__ */ jsx("h2", { className: "pollar-title", children: appName }),
+      /* @__PURE__ */ jsx("p", { className: "pollar-subtitle", children: "Log in or sign up" })
+    ] }),
+    awaitingEmailCode ? /* @__PURE__ */ jsx(EmailCodeInput, { email, onSubmit: onCodeSubmit ?? (() => {
+    }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      error && /* @__PURE__ */ jsx("div", { className: "pollar-error", children: error }),
+      emailEnabled && /* @__PURE__ */ jsxs("div", { className: "pollar-email-section", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "email",
+            placeholder: "you@email.com",
+            value: email,
+            disabled: isLoading,
+            className: "pollar-email-input",
+            onChange: (e) => onEmailChange?.(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && onEmailSubmit?.()
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", disabled: isLoading || !email, className: "pollar-submit-btn", onClick: onEmailSubmit, children: "Submit" })
+      ] }),
+      emailEnabled && enabledSocial.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pollar-divider", children: [
+        /* @__PURE__ */ jsx("div", { className: "pollar-divider-line" }),
+        /* @__PURE__ */ jsx("div", { className: "pollar-divider-label", children: /* @__PURE__ */ jsx("span", { className: "pollar-divider-text", children: "or continue with" }) })
+      ] }),
+      enabledSocial.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pollar-social-list", children: [
+        enabledSocial.some(([key]) => key === "google") && /* @__PURE__ */ jsx(GoogleButton, { disabled: isLoading, onClick: () => onSocialLogin?.("google") }),
+        enabledSocial.some(([key]) => key === "github") && /* @__PURE__ */ jsx(GithubButton, { disabled: isLoading, onClick: () => onSocialLogin?.("github") })
+      ] }),
+      embeddedWallets && /* @__PURE__ */ jsxs("div", { className: "pollar-wallet-section", children: [
+        /* @__PURE__ */ jsx("p", { className: "pollar-wallet-label", children: "Continue with a wallet" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", disabled: isLoading, className: "pollar-wallet-btn", onClick: onFreighterConnect, children: [
+          /* @__PURE__ */ jsx("img", { src: LOGO_FREIGHTER, alt: "Freighter", className: "pollar-wallet-icon" }),
+          "Freighter"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { type: "button", disabled: isLoading, className: "pollar-wallet-btn", onClick: onAlbedoConnect, children: [
+          /* @__PURE__ */ jsx("img", { src: LOGO_ALBEDO, alt: "Albedo", className: "pollar-wallet-icon" }),
+          "Albedo"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(LoginStatusBanner, { code: loginStateCode, status, onCancel: () => cancelLoginRef.current?.(), onRetry }),
+    /* @__PURE__ */ jsxs("div", { className: "pollar-footer", children: [
+      /* @__PURE__ */ jsx("span", { className: "pollar-footer-protected", children: "Protected by" }),
+      /* @__PURE__ */ jsxs("div", { className: "pollar-footer-brand", children: [
+        /* @__PURE__ */ jsx("img", { src: LOGO_POLLAR, alt: "Pollar", className: "pollar-footer-logo" }),
+        /* @__PURE__ */ jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
+        /* @__PURE__ */ jsxs("span", { className: "pollar-footer-version", children: [
+          "v",
+          "0.3.9"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function isLoginCode(code) {
+  return Object.values(STATE_VAR_CODES[PollarStateVar.LOGIN]).includes(code);
+}
+function LoginModal({ onClose }) {
+  const [email, setEmail] = useState("");
+  const { getClient, styles, config } = usePollar();
+  const [status, setStatus] = useState(StateStatus.NONE);
+  const [error, setError] = useState(null);
+  const [loginStateCode, setLoginStateCode] = useState(null);
+  const [awaitingEmailCode, setAwaitingEmailCode] = useState(false);
+  const [clientSessionId, setClientSessionId] = useState(null);
+  useEffect(() => {
+    return getClient().onStateChange((stateEntry) => {
+      if (stateEntry.var === PollarStateVar.LOGIN && isLoginCode(stateEntry.code)) {
+        setLoginStateCode(stateEntry.code);
+        setStatus(stateEntry.status);
+        if (stateEntry.code === STATE_VAR_CODES[PollarStateVar.LOGIN].STREAM_POLL_START) {
+          const data = stateEntry.data;
+          setClientSessionId(data.clientSessionId);
+        }
+        if (stateEntry.code === STATE_VAR_CODES[PollarStateVar.LOGIN].STREAM_POLL_EVENT) {
+          const data = stateEntry.data;
+          if (data?.status === "AWAITING_EMAIL") {
+            setAwaitingEmailCode(true);
+          }
+        }
+        if (stateEntry.code === STATE_VAR_CODES[PollarStateVar.LOGIN].FETCH_SESSION_SUCCESS) {
+          setAwaitingEmailCode(false);
+          setTimeout(onClose, 1e3);
+        }
+      }
+    });
+  }, []);
+  const { theme = "light", accentColor = "#005DB4", logoUrl, emailEnabled, embeddedWallets, providers } = styles;
+  function handleClose() {
+    setEmail("");
+    setError(null);
+    setAwaitingEmailCode(false);
+    setClientSessionId(null);
+    onClose();
+  }
+  const cancelLoginRef = useRef(null);
+  function handleEmail() {
+    if (!email) {
+      return;
+    }
+    const { cancelLogin } = getClient().login({ provider: "email", email });
+    cancelLoginRef.current = cancelLogin;
+  }
+  function handleSocialLogin(provider) {
+    const { cancelLogin } = getClient().login({ provider });
+    cancelLoginRef.current = cancelLogin;
+  }
+  function handleWalletConnect(type) {
+    const { cancelLogin } = getClient().login({ provider: "wallet", type });
+    cancelLoginRef.current = cancelLogin;
+  }
+  async function handleVerifyCode(code) {
+    if (!clientSessionId) return;
+    void getClient().verifyEmailCode(clientSessionId, code);
+  }
+  function handleRetry() {
+    getClient().logout();
+  }
+  return /* @__PURE__ */ jsx("div", { className: "pollar-overlay", onClick: handleClose, children: /* @__PURE__ */ jsx(
+    LoginModalTemplate,
+    {
+      theme,
+      accentColor,
+      logoUrl: logoUrl ?? null,
+      emailEnabled: !!emailEnabled,
+      embeddedWallets: !!embeddedWallets,
+      providers: {
+        google: !!providers?.google,
+        discord: !!providers?.discord,
+        x: !!providers?.x,
+        github: !!providers?.github,
+        apple: !!providers?.apple
+      },
+      appName: config.application?.name ?? "Pollar",
+      email,
+      status,
+      error,
+      onEmailChange: setEmail,
+      onEmailSubmit: handleEmail,
+      onSocialLogin: handleSocialLogin,
+      onFreighterConnect: () => handleWalletConnect(WalletType.FREIGHTER),
+      onAlbedoConnect: () => handleWalletConnect(WalletType.ALBEDO),
+      loginStateCode,
+      awaitingEmailCode,
+      onCodeSubmit: handleVerifyCode,
+      cancelLoginRef,
+      onRetry: handleRetry
+    }
+  ) });
+}
+var emptyResponse = {
+  application: {
+    name: ""
+  },
+  styles: {}
+};
+async function fetchRemoteConfig(api) {
+  try {
+    const { data, error } = await api.GET(`/config`);
+    if (!data || error) {
+      return emptyResponse;
+    }
+    return data.content;
+  } catch {
+    return emptyResponse;
+  }
+}
+var PollarContext = createContext(null);
+function PollarProvider({ config, styles: propStyles, children }) {
+  const [pollarClient] = useState(() => new PollarClient(config));
+  const [stellarClient] = useState(() => new StellarClient(config.stellarNetwork || "testnet"));
+  const [sessionState, setSessionState] = useState(null);
+  const [state, setState] = useState({
+    [PollarStateVar.LOGIN]: {
+      var: PollarStateVar.LOGIN,
+      code: STATE_VAR_CODES[PollarStateVar.LOGIN].NONE,
+      status: StateStatus.NONE,
+      level: "info",
+      ts: 0
+    },
+    [PollarStateVar.WALLET_ADDRESS]: {
+      var: PollarStateVar.WALLET_ADDRESS,
+      code: STATE_VAR_CODES[PollarStateVar.WALLET_ADDRESS].NONE,
+      status: StateStatus.NONE,
+      level: "info",
+      ts: 0
+    }
+  });
+  const [remoteConfig, setRemoteConfig] = useState(emptyResponse);
+  const [styles, setStyles] = useState(propStyles ?? {});
+  useEffect(() => {
+    return pollarClient.onStateChange((stateEntry) => {
+      setState((prevState) => {
+        if (JSON.stringify(prevState[stateEntry.var]) !== JSON.stringify(stateEntry)) {
+          return {
+            ...prevState,
+            [stateEntry.var]: stateEntry
+          };
+        }
+        return prevState;
+      });
+      if (stateEntry.var === PollarStateVar.WALLET_ADDRESS) {
+        if (stateEntry.code === STATE_VAR_CODES[PollarStateVar.WALLET_ADDRESS].UPDATED_ADDRESS && isValidSession(stateEntry.data)) {
+          setSessionState((prevState) => {
+            if (JSON.stringify(prevState) !== JSON.stringify(stateEntry.data)) {
+              return stateEntry.data;
+            }
+            return prevState;
+          });
+        }
+      }
+      if (stateEntry.var === PollarStateVar.WALLET_ADDRESS && stateEntry.code === STATE_VAR_CODES[PollarStateVar.WALLET_ADDRESS].REMOVED_ADDRESS || stateEntry.var === PollarStateVar.LOGIN && stateEntry.code === STATE_VAR_CODES[PollarStateVar.LOGIN].LOGOUT) {
+        setSessionState(null);
+      }
+    });
+  }, [pollarClient]);
+  useEffect(() => {
+    fetchRemoteConfig(pollarClient.getApi()).then((fetched) => {
+      setRemoteConfig(fetched);
+      setStyles({
+        ...fetched.styles,
+        ...propStyles,
+        providers: { ...fetched.styles?.providers, ...propStyles?.providers }
+      });
+    }).catch(() => {
+      setStyles(propStyles ?? {});
+    });
+  }, [pollarClient]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const contextValue = useMemo(
+    () => ({
+      walletAddress: sessionState?.wallet?.publicKey || "",
+      getClient: () => pollarClient,
+      openLoginModal: () => setModalOpen(true),
+      isAuthenticated: pollarClient.isAuthenticated(),
+      login: (options) => pollarClient.login(options),
+      logout: () => pollarClient.logout(),
+      config: remoteConfig,
+      state,
+      styles,
+      async getBalance(publicKey) {
+        const pk = publicKey || sessionState?.wallet?.publicKey;
+        if (pk) {
+          return stellarClient.getBalances(pk);
+        }
+        return null;
+      }
+    }),
+    [sessionState, remoteConfig, styles, pollarClient, state]
+  );
+  return /* @__PURE__ */ jsxs(PollarContext.Provider, { value: contextValue, children: [
+    children,
+    modalOpen && /* @__PURE__ */ jsx(LoginModal, { onClose: () => setModalOpen(false) })
+  ] });
+}
+function usePollar() {
+  const ctx = useContext(PollarContext);
+  if (!ctx) {
+    throw new Error("usePollar must be used inside <PollarProvider>");
+  }
+  return ctx;
+}
+function cropWallet(address) {
+  if (address.length <= 12) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function ButtonLogo() {
+  return /* @__PURE__ */ jsx("img", { src: LOGO_POLLAR, alt: "Pollar", width: 22, height: 22, className: "wallet-btn-logo" });
+}
+function WalletButton() {
+  const { getClient, walletAddress, styles, openLoginModal } = usePollar();
+  const [open, setOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const wrapperRef = useRef(null);
+  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const isDark = theme === "dark";
+  const dropdownBg = isDark ? "#18181b" : "#fff";
+  const dropdownBorder = isDark ? "#3f3f46" : "#e4e4e7";
+  const itemColor = isDark ? "#fafafa" : "#18181b";
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  async function handleCopy() {
+    if (!walletAddress) return;
+    await navigator.clipboard.writeText(walletAddress);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }
+  function handleLogout() {
+    setOpen(false);
+    getClient().logout();
+  }
+  if (!walletAddress) {
+    return /* @__PURE__ */ jsxs("button", { type: "button", className: "wallet-login-btn", style: { backgroundColor: accentColor }, onClick: openLoginModal, children: [
+      /* @__PURE__ */ jsx(ButtonLogo, {}),
+      "Login with Pollar"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "wallet-wrapper", ref: wrapperRef, children: [
+    /* @__PURE__ */ jsxs("button", { className: "wallet-btn", style: { backgroundColor: accentColor }, onClick: () => setOpen((v) => !v), children: [
+      cropWallet(walletAddress),
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: `wallet-chevron${open ? " open" : ""}`,
+          viewBox: "0 0 12 12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("polyline", { points: "2,4 6,8 10,4" })
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "wallet-dropdown", style: { backgroundColor: dropdownBg, borderColor: dropdownBorder }, children: [
+      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item", style: { color: itemColor }, onClick: handleCopy, children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+            ]
+          }
+        ),
+        copied ? "Copied!" : "Copy address"
+      ] }),
+      /* @__PURE__ */ jsxs("button", { className: "wallet-dropdown-item danger", onClick: handleLogout, children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+              /* @__PURE__ */ jsx("polyline", { points: "16,17 21,12 16,7" }),
+              /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+            ]
+          }
+        ),
+        "Log out"
+      ] })
+    ] })
+  ] });
+}
+
+export { PollarProvider, WalletButton, usePollar };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map