@emblemvault/emblem-auth-react 1.0.0

package/dist/components/index.js

@@ -0,0 +1,906 @@
+import { createContext, useState, useCallback, useContext } from 'react';
+import 'emblem-auth-sdk';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var EmblemAuthContext = createContext(void 0);
+function useEmblemAuth() {
+  const context = useContext(EmblemAuthContext);
+  if (context === void 0) {
+    throw new Error("useEmblemAuth must be used within an EmblemAuthProvider");
+  }
+  return context;
+}
+
+// src/styles/tokens.ts
+var defaults = {
+  colors: {
+    // Backgrounds
+    bgPrimary: "#0b0d10",
+    bgSecondary: "#12161b",
+    bgTertiary: "#1a1f25",
+    bgHover: "#252b33",
+    bgOverlay: "rgba(0, 0, 0, 0.7)",
+    // Borders
+    borderPrimary: "#222b35",
+    borderSecondary: "#333",
+    borderHover: "#444",
+    // Text
+    textPrimary: "#e6eef8",
+    textSecondary: "#8892a4",
+    textTertiary: "#6b7280",
+    textInverse: "#fff",
+    // Accent - Primary (blue)
+    accentPrimary: "#4c9aff",
+    accentPrimaryHover: "#7bb6ff",
+    accentPrimaryBg: "rgba(76, 154, 255, 0.1)",
+    // Accent - Success (green)
+    accentSuccess: "#10b981",
+    accentSuccessHover: "#34d399",
+    accentSuccessBg: "rgba(16, 185, 129, 0.1)",
+    // Accent - Warning (yellow/orange)
+    accentWarning: "#f59e0b",
+    accentWarningBg: "rgba(245, 158, 11, 0.1)",
+    // Accent - Error (red)
+    accentError: "#dc2626",
+    accentErrorHover: "#ef4444",
+    accentErrorBg: "rgba(239, 68, 68, 0.1)",
+    // Messages
+    msgUser: "#1e3a5f",
+    msgAssistant: "#1a2633"
+  },
+  typography: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontFamilyMono: '"SF Mono", Monaco, monospace',
+    fontSizeXs: "11px",
+    fontSizeSm: "13px",
+    fontSizeMd: "14px",
+    fontSizeLg: "16px",
+    fontSizeXl: "18px",
+    fontWeightNormal: "400",
+    fontWeightMedium: "500",
+    fontWeightSemibold: "600",
+    lineHeightTight: "1.3",
+    lineHeightNormal: "1.5",
+    lineHeightRelaxed: "1.7"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "20px",
+    xxl: "24px"
+  },
+  radius: {
+    sm: "4px",
+    md: "6px",
+    lg: "8px",
+    xl: "12px",
+    pill: "20px",
+    full: "50%"
+  },
+  shadows: {
+    sm: "0 2px 8px rgba(0,0,0,0.2)",
+    md: "0 4px 16px rgba(0,0,0,0.3)",
+    lg: "0 8px 32px rgba(0,0,0,0.4)",
+    xl: "0 16px 48px rgba(0,0,0,0.5)"
+  },
+  // Glow effects (for enhanced themes)
+  glows: {
+    primary: "rgba(76, 154, 255, 0.4)",
+    success: "rgba(16, 185, 129, 0.4)",
+    error: "rgba(239, 68, 68, 0.4)",
+    ambient: "rgba(76, 154, 255, 0.08)"
+  },
+  transitions: {
+    fast: "0.15s ease",
+    normal: "0.2s ease",
+    slow: "0.3s ease"
+  },
+  zIndex: {
+    dropdown: "100",
+    modal: "1000",
+    fullscreen: "1000",
+    modalOverFullscreen: "10000"
+  }
+};
+function toVarName(category, key) {
+  const kebab = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  return `--hustle-${category}-${kebab}`;
+}
+function generateCSSVariables() {
+  const lines = [":root {"];
+  for (const [key, value] of Object.entries(defaults.colors)) {
+    lines.push(`  ${toVarName("color", key)}: ${value};`);
+  }
+  for (const [key, value] of Object.entries(defaults.typography)) {
+    lines.push(`  ${toVarName("font", key)}: ${value};`);
+  }
+  for (const [key, value] of Object.entries(defaults.spacing)) {
+    lines.push(`  ${toVarName("space", key)}: ${value};`);
+  }
+  for (const [key, value] of Object.entries(defaults.radius)) {
+    lines.push(`  ${toVarName("radius", key)}: ${value};`);
+  }
+  for (const [key, value] of Object.entries(defaults.shadows)) {
+    lines.push(`  ${toVarName("shadow", key)}: ${value};`);
+  }
+  for (const [key, value] of Object.entries(defaults.glows)) {
+    lines.push(`  ${toVarName("glow", key)}: ${value};`);
+  }
+  for (const [key, value] of Object.entries(defaults.transitions)) {
+    lines.push(`  ${toVarName("transition", key)}: ${value};`);
+  }
+  for (const [key, value] of Object.entries(defaults.zIndex)) {
+    lines.push(`  ${toVarName("z", key)}: ${value};`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+generateCSSVariables();
+function createColorTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.colors)) {
+    result[key] = `var(${toVarName("color", key)}, ${defaultValue})`;
+  }
+  return result;
+}
+function createTypographyTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.typography)) {
+    result[key] = `var(${toVarName("font", key)}, ${defaultValue})`;
+  }
+  return result;
+}
+function createSpacingTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.spacing)) {
+    result[key] = `var(${toVarName("space", key)}, ${defaultValue})`;
+  }
+  return result;
+}
+function createRadiusTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.radius)) {
+    result[key] = `var(${toVarName("radius", key)}, ${defaultValue})`;
+  }
+  return result;
+}
+function createShadowTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.shadows)) {
+    result[key] = `var(${toVarName("shadow", key)}, ${defaultValue})`;
+  }
+  return result;
+}
+function createGlowTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.glows)) {
+    result[key] = `var(${toVarName("glow", key)}, ${defaultValue})`;
+  }
+  return result;
+}
+function createTransitionTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.transitions)) {
+    result[key] = `var(${toVarName("transition", key)}, ${defaultValue})`;
+  }
+  return result;
+}
+function createZIndexTokens() {
+  const result = {};
+  for (const [key, defaultValue] of Object.entries(defaults.zIndex)) {
+    result[key] = parseInt(defaultValue, 10);
+  }
+  return result;
+}
+var tokens = {
+  colors: createColorTokens(),
+  typography: createTypographyTokens(),
+  spacing: createSpacingTokens(),
+  radius: createRadiusTokens(),
+  shadows: createShadowTokens(),
+  glows: createGlowTokens(),
+  transitions: createTransitionTokens(),
+  zIndex: createZIndexTokens()
+};
+var presets = {
+  base: {
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.fontSizeMd,
+    lineHeight: tokens.typography.lineHeightNormal,
+    color: tokens.colors.textPrimary
+  },
+  card: {
+    background: tokens.colors.bgSecondary,
+    border: `1px solid ${tokens.colors.borderPrimary}`,
+    borderRadius: tokens.radius.xl
+  },
+  input: {
+    background: tokens.colors.bgTertiary,
+    border: `1px solid ${tokens.colors.borderSecondary}`,
+    borderRadius: tokens.radius.lg,
+    color: tokens.colors.textPrimary,
+    fontSize: tokens.typography.fontSizeMd,
+    padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,
+    transition: `border-color ${tokens.transitions.normal}`
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: tokens.spacing.sm,
+    padding: `${tokens.spacing.sm} ${tokens.spacing.lg}`,
+    borderRadius: tokens.radius.lg,
+    fontSize: tokens.typography.fontSizeMd,
+    fontWeight: tokens.typography.fontWeightMedium,
+    cursor: "pointer",
+    transition: `all ${tokens.transitions.normal}`,
+    border: `1px solid ${tokens.colors.borderSecondary}`,
+    outline: "none"
+  },
+  buttonPrimary: {
+    background: tokens.colors.accentPrimary,
+    color: tokens.colors.textInverse,
+    borderColor: tokens.colors.accentPrimary
+  },
+  buttonSecondary: {
+    background: tokens.colors.bgTertiary,
+    color: tokens.colors.textPrimary,
+    borderColor: tokens.colors.borderSecondary
+  },
+  buttonIcon: {
+    width: "36px",
+    height: "36px",
+    padding: 0,
+    // background inherited from global button styles
+    color: tokens.colors.textSecondary
+  },
+  mono: {
+    fontFamily: tokens.typography.fontFamilyMono,
+    fontSize: tokens.typography.fontSizeSm
+  },
+  label: {
+    fontSize: tokens.typography.fontSizeXs,
+    color: tokens.colors.textTertiary,
+    marginBottom: tokens.spacing.xs
+  }
+};
+var animations = `
+@keyframes hustle-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes hustle-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+@keyframes hustle-glow {
+  0%, 100% {
+    opacity: 1;
+    text-shadow: 0 0 4px ${defaults.colors.accentPrimaryBg};
+  }
+  50% {
+    opacity: 0.6;
+    text-shadow: 0 0 8px ${defaults.colors.accentPrimary};
+  }
+}
+`;
+function truncateAddress(address) {
+  if (!address || address.length < 10) return address || "";
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var styles = {
+  wrapper: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: tokens.spacing.sm
+  },
+  button: {
+    ...presets.button,
+    padding: `${tokens.spacing.sm} ${tokens.spacing.xl}`
+  },
+  disconnected: {
+    background: tokens.colors.bgTertiary,
+    color: tokens.colors.textPrimary,
+    borderColor: tokens.colors.borderSecondary
+  },
+  disconnectedHover: {
+    background: tokens.colors.bgHover,
+    borderColor: tokens.colors.borderHover
+  },
+  connected: {
+    background: "transparent",
+    color: tokens.colors.accentSuccess,
+    borderColor: tokens.colors.accentSuccess,
+    borderRadius: tokens.radius.pill
+  },
+  connectedHover: {
+    background: tokens.colors.accentSuccessBg
+  },
+  loading: {
+    background: tokens.colors.borderSecondary,
+    color: tokens.colors.textSecondary,
+    cursor: "wait"
+  },
+  disabled: {
+    background: tokens.colors.borderSecondary,
+    color: tokens.colors.textTertiary,
+    cursor: "not-allowed",
+    opacity: 0.5
+  },
+  icon: {
+    fontSize: tokens.typography.fontSizeLg
+  },
+  spinner: {
+    display: "inline-block",
+    width: "14px",
+    height: "14px",
+    border: "2px solid currentColor",
+    borderTopColor: "transparent",
+    borderRadius: tokens.radius.full,
+    animation: "hustle-spin 0.8s linear infinite"
+  },
+  address: {
+    ...presets.mono,
+    color: tokens.colors.textPrimary
+  },
+  dot: {
+    color: tokens.colors.textSecondary
+  },
+  check: {
+    color: tokens.colors.accentSuccess
+  },
+  arrow: {
+    fontSize: "10px",
+    color: tokens.colors.textSecondary,
+    marginLeft: tokens.spacing.xs
+  },
+  // Disconnect button
+  disconnectBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "36px",
+    height: "36px",
+    background: "transparent",
+    border: `1px solid ${tokens.colors.borderSecondary}`,
+    borderRadius: tokens.radius.lg,
+    color: tokens.colors.textSecondary,
+    cursor: "pointer",
+    fontSize: "16px",
+    transition: `all ${tokens.transitions.normal}`
+  },
+  disconnectBtnHover: {
+    borderColor: tokens.colors.accentError,
+    color: tokens.colors.accentError
+  },
+  // Vault info dropdown
+  dropdown: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    marginTop: tokens.spacing.xs,
+    background: tokens.colors.bgPrimary,
+    border: `1px solid ${tokens.colors.accentSuccess}`,
+    borderRadius: tokens.radius.xl,
+    padding: tokens.spacing.lg,
+    minWidth: "300px",
+    zIndex: tokens.zIndex.dropdown,
+    boxShadow: `0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px ${tokens.colors.accentSuccessBg}`
+  },
+  dropdownHeader: {
+    fontSize: tokens.typography.fontSizeXs,
+    fontWeight: tokens.typography.fontWeightSemibold,
+    color: tokens.colors.textSecondary,
+    letterSpacing: "0.5px",
+    marginBottom: tokens.spacing.lg,
+    textTransform: "uppercase"
+  },
+  dropdownRow: {
+    marginBottom: tokens.spacing.md
+  },
+  dropdownLabel: {
+    display: "block",
+    fontSize: tokens.typography.fontSizeXs,
+    color: tokens.colors.textTertiary,
+    marginBottom: tokens.spacing.xs
+  },
+  dropdownValueRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: tokens.spacing.sm
+  },
+  dropdownValue: {
+    fontSize: tokens.typography.fontSizeMd,
+    color: tokens.colors.textPrimary,
+    fontWeight: tokens.typography.fontWeightMedium,
+    flex: 1
+  },
+  dropdownValueMono: {
+    ...presets.mono,
+    wordBreak: "break-all"
+  },
+  copyBtn: {
+    background: "transparent",
+    border: `1px solid ${tokens.colors.borderSecondary}`,
+    color: tokens.colors.textSecondary,
+    padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+    borderRadius: tokens.radius.sm,
+    cursor: "pointer",
+    fontSize: tokens.typography.fontSizeXs,
+    transition: `all ${tokens.transitions.normal}`,
+    whiteSpace: "nowrap"
+  },
+  copyBtnHover: {
+    background: tokens.colors.bgHover,
+    borderColor: tokens.colors.accentPrimary,
+    color: tokens.colors.accentPrimary
+  },
+  copyBtnCopied: {
+    background: tokens.colors.accentSuccess,
+    borderColor: tokens.colors.accentSuccess,
+    color: tokens.colors.textInverse
+  }
+};
+function ConnectButton({
+  className = "",
+  style,
+  connectLabel = "Connect",
+  loadingLabel = "Connecting...",
+  onConnect,
+  onDisconnect,
+  showVaultInfo = true,
+  disabled = false
+}) {
+  const {
+    isAuthenticated,
+    isLoading,
+    walletAddress,
+    vaultId,
+    openAuthModal,
+    logout
+  } = useEmblemAuth();
+  const [isHovered, setIsHovered] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [disconnectHovered, setDisconnectHovered] = useState(false);
+  const [copiedField, setCopiedField] = useState(null);
+  const [copyHovered, setCopyHovered] = useState(null);
+  const handleClick = useCallback(async () => {
+    if (disabled) return;
+    if (!isAuthenticated && !isLoading) {
+      await openAuthModal();
+      onConnect?.();
+    }
+  }, [disabled, isAuthenticated, isLoading, openAuthModal, onConnect]);
+  const handleDisconnect = useCallback(() => {
+    logout();
+    onDisconnect?.();
+    setShowDropdown(false);
+  }, [logout, onDisconnect]);
+  const handleCopy = useCallback(async (field, value) => {
+    const success = await copyToClipboard(value);
+    if (success) {
+      setCopiedField(field);
+      setTimeout(() => setCopiedField(null), 1500);
+    }
+  }, []);
+  let buttonStyle = { ...styles.button };
+  let content = connectLabel;
+  if (disabled) {
+    buttonStyle = { ...buttonStyle, ...styles.disconnected, ...styles.disabled };
+  } else if (isLoading) {
+    buttonStyle = { ...buttonStyle, ...styles.disconnected, ...styles.loading };
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { style: styles.spinner }),
+      loadingLabel
+    ] });
+  } else if (isAuthenticated) {
+    buttonStyle = { ...buttonStyle, ...styles.connected };
+    if (isHovered || showDropdown) {
+      buttonStyle = { ...buttonStyle, ...styles.connectedHover };
+    }
+    const truncated = truncateAddress(walletAddress || "");
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { style: styles.check, children: "\u2713" }),
+      /* @__PURE__ */ jsx("span", { children: "Connected" }),
+      /* @__PURE__ */ jsx("span", { style: styles.dot, children: "\u2022" }),
+      /* @__PURE__ */ jsx("span", { style: styles.address, children: truncated }),
+      /* @__PURE__ */ jsx("span", { style: styles.arrow, children: "\u25BE" })
+    ] });
+  } else {
+    buttonStyle = { ...buttonStyle, ...styles.disconnected };
+    if (isHovered) {
+      buttonStyle = { ...buttonStyle, ...styles.disconnectedHover };
+    }
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { style: styles.icon, children: "\u2192" }),
+      connectLabel
+    ] });
+  }
+  if (style) {
+    buttonStyle = { ...buttonStyle, ...style };
+  }
+  const renderCopyBtn = (field, value) => {
+    const isCopied = copiedField === field;
+    const isHover = copyHovered === field;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleCopy(field, value);
+        },
+        style: {
+          ...styles.copyBtn,
+          ...isCopied ? styles.copyBtnCopied : isHover ? styles.copyBtnHover : {}
+        },
+        onMouseEnter: () => setCopyHovered(field),
+        onMouseLeave: () => setCopyHovered(null),
+        children: isCopied ? "Copied!" : "Copy"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: animations }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: styles.wrapper,
+        onMouseEnter: () => isAuthenticated && showVaultInfo && setShowDropdown(true),
+        onMouseLeave: () => setShowDropdown(false),
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClick,
+              disabled: disabled || isLoading,
+              className,
+              style: buttonStyle,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              children: content
+            }
+          ),
+          isAuthenticated && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleDisconnect,
+              style: {
+                ...styles.disconnectBtn,
+                ...disconnectHovered ? styles.disconnectBtnHover : {}
+              },
+              onMouseEnter: () => setDisconnectHovered(true),
+              onMouseLeave: () => setDisconnectHovered(false),
+              title: "Disconnect",
+              children: "\u23FB"
+            }
+          ),
+          isAuthenticated && showVaultInfo && showDropdown && /* @__PURE__ */ jsxs("div", { style: styles.dropdown, children: [
+            /* @__PURE__ */ jsx("div", { style: styles.dropdownHeader, children: "Vault Information" }),
+            /* @__PURE__ */ jsxs("div", { style: styles.dropdownRow, children: [
+              /* @__PURE__ */ jsx("span", { style: styles.dropdownLabel, children: "Vault ID" }),
+              /* @__PURE__ */ jsxs("div", { style: styles.dropdownValueRow, children: [
+                /* @__PURE__ */ jsxs("span", { style: styles.dropdownValue, children: [
+                  "#",
+                  vaultId
+                ] }),
+                renderCopyBtn("vaultId", vaultId || "")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { ...styles.dropdownRow, marginBottom: 0 }, children: [
+              /* @__PURE__ */ jsx("span", { style: styles.dropdownLabel, children: "Connected Wallet" }),
+              /* @__PURE__ */ jsxs("div", { style: styles.dropdownValueRow, children: [
+                /* @__PURE__ */ jsx("span", { style: { ...styles.dropdownValue, ...styles.dropdownValueMono }, children: walletAddress }),
+                renderCopyBtn("wallet", walletAddress || "")
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+async function copyToClipboard2(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var s = {
+  container: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: tokens.spacing.sm,
+    fontFamily: tokens.typography.fontFamily
+  },
+  disconnected: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: tokens.spacing.sm,
+    color: tokens.colors.textSecondary,
+    fontSize: tokens.typography.fontSizeMd
+  },
+  dot: {
+    display: "inline-block",
+    width: "8px",
+    height: "8px",
+    borderRadius: tokens.radius.full,
+    backgroundColor: tokens.colors.textTertiary
+  },
+  dotConnected: {
+    backgroundColor: tokens.colors.accentSuccess
+  },
+  spinner: {
+    display: "inline-block",
+    width: "12px",
+    height: "12px",
+    border: `2px solid ${tokens.colors.textSecondary}`,
+    borderTopColor: "transparent",
+    borderRadius: tokens.radius.full,
+    animation: "hustle-spin 0.8s linear infinite"
+  },
+  logoutBtn: {
+    ...presets.buttonIcon,
+    border: `1px solid ${tokens.colors.borderSecondary}`,
+    borderRadius: tokens.radius.lg,
+    transition: `all ${tokens.transitions.normal}`
+  },
+  logoutBtnHover: {
+    borderColor: tokens.colors.accentError,
+    color: tokens.colors.accentError
+  },
+  vaultInfoWrapper: {
+    position: "relative"
+  },
+  vaultInfo: {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: tokens.spacing.sm,
+    background: tokens.colors.bgSecondary,
+    border: `1px solid ${tokens.colors.borderPrimary}`,
+    borderRadius: tokens.radius.xl,
+    padding: tokens.spacing.lg,
+    minWidth: "380px",
+    zIndex: tokens.zIndex.dropdown,
+    boxShadow: tokens.shadows.lg
+  },
+  vaultInfoHeader: {
+    fontSize: tokens.typography.fontSizeXs,
+    fontWeight: tokens.typography.fontWeightSemibold,
+    color: tokens.colors.textSecondary,
+    letterSpacing: "0.5px",
+    marginBottom: tokens.spacing.lg,
+    textTransform: "uppercase"
+  },
+  vaultInfoRow: {
+    marginBottom: tokens.spacing.md
+  },
+  vaultLabel: {
+    display: "block",
+    fontSize: "12px",
+    color: tokens.colors.textTertiary,
+    marginBottom: tokens.spacing.xs
+  },
+  vaultValueRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: tokens.spacing.sm
+  },
+  vaultValue: {
+    fontSize: tokens.typography.fontSizeMd,
+    color: tokens.colors.textPrimary,
+    fontWeight: tokens.typography.fontWeightMedium,
+    flex: 1
+  },
+  vaultValueMono: {
+    ...presets.mono,
+    wordBreak: "break-all"
+  },
+  copyBtn: {
+    background: "transparent",
+    border: `1px solid ${tokens.colors.borderSecondary}`,
+    color: tokens.colors.textSecondary,
+    padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+    borderRadius: tokens.radius.sm,
+    cursor: "pointer",
+    fontSize: tokens.typography.fontSizeXs,
+    transition: `all ${tokens.transitions.normal}`,
+    whiteSpace: "nowrap"
+  },
+  copyBtnHover: {
+    background: tokens.colors.bgHover,
+    borderColor: tokens.colors.accentPrimary,
+    color: tokens.colors.accentPrimary
+  },
+  copyBtnCopied: {
+    background: tokens.colors.accentSuccess,
+    borderColor: tokens.colors.accentSuccess,
+    color: tokens.colors.textInverse
+  }
+};
+function AuthStatus({
+  className = "",
+  style,
+  showVaultInfo = false,
+  showLogout = false
+}) {
+  const {
+    isAuthenticated,
+    isLoading,
+    walletAddress,
+    vaultId,
+    vaultInfo,
+    logout
+  } = useEmblemAuth();
+  const [isHovered, setIsHovered] = useState(false);
+  const [logoutHovered, setLogoutHovered] = useState(false);
+  const [copiedField, setCopiedField] = useState(null);
+  const [copyHovered, setCopyHovered] = useState(null);
+  const handleCopy = useCallback(async (field, value) => {
+    const success = await copyToClipboard2(value);
+    if (success) {
+      setCopiedField(field);
+      setTimeout(() => setCopiedField(null), 1500);
+    }
+  }, []);
+  if (!isAuthenticated) {
+    if (isLoading) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("style", { children: animations }),
+        /* @__PURE__ */ jsxs("div", { className, style: { ...s.disconnected, ...style }, children: [
+          /* @__PURE__ */ jsx("span", { style: s.spinner }),
+          /* @__PURE__ */ jsx("span", { children: "Connecting..." })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className, style: { ...s.disconnected, ...style }, children: [
+      /* @__PURE__ */ jsx("span", { style: s.dot }),
+      /* @__PURE__ */ jsx("span", { children: "Not connected" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: animations }),
+    /* @__PURE__ */ jsxs("div", { className, style: { ...s.container, ...style }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: s.vaultInfoWrapper,
+          onMouseEnter: () => showVaultInfo && setIsHovered(true),
+          onMouseLeave: () => showVaultInfo && setIsHovered(false),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { ...s.dot, ...s.dotConnected }, title: "Connected" }),
+            showVaultInfo && isHovered && /* @__PURE__ */ jsxs("div", { style: s.vaultInfo, children: [
+              /* @__PURE__ */ jsx("div", { style: s.vaultInfoHeader, children: "Vault Information" }),
+              /* @__PURE__ */ jsxs("div", { style: s.vaultInfoRow, children: [
+                /* @__PURE__ */ jsx("span", { style: s.vaultLabel, children: "Vault ID" }),
+                /* @__PURE__ */ jsxs("div", { style: s.vaultValueRow, children: [
+                  /* @__PURE__ */ jsxs("span", { style: s.vaultValue, children: [
+                    "#",
+                    vaultId
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    CopyButton,
+                    {
+                      field: "vaultId",
+                      value: vaultId || "",
+                      copiedField,
+                      copyHovered,
+                      setCopyHovered,
+                      onCopy: handleCopy
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: s.vaultInfoRow, children: [
+                /* @__PURE__ */ jsx("span", { style: s.vaultLabel, children: "Connected Wallet" }),
+                /* @__PURE__ */ jsxs("div", { style: s.vaultValueRow, children: [
+                  /* @__PURE__ */ jsx("span", { style: { ...s.vaultValue, ...s.vaultValueMono }, children: walletAddress }),
+                  /* @__PURE__ */ jsx(
+                    CopyButton,
+                    {
+                      field: "wallet",
+                      value: walletAddress || "",
+                      copiedField,
+                      copyHovered,
+                      setCopyHovered,
+                      onCopy: handleCopy
+                    }
+                  )
+                ] })
+              ] }),
+              vaultInfo?.evmAddress && /* @__PURE__ */ jsxs("div", { style: s.vaultInfoRow, children: [
+                /* @__PURE__ */ jsx("span", { style: s.vaultLabel, children: "Vault EVM Address" }),
+                /* @__PURE__ */ jsxs("div", { style: s.vaultValueRow, children: [
+                  /* @__PURE__ */ jsx("span", { style: { ...s.vaultValue, ...s.vaultValueMono }, children: vaultInfo.evmAddress }),
+                  /* @__PURE__ */ jsx(
+                    CopyButton,
+                    {
+                      field: "evmAddress",
+                      value: vaultInfo.evmAddress,
+                      copiedField,
+                      copyHovered,
+                      setCopyHovered,
+                      onCopy: handleCopy
+                    }
+                  )
+                ] })
+              ] }),
+              vaultInfo?.solanaAddress && /* @__PURE__ */ jsxs("div", { style: s.vaultInfoRow, children: [
+                /* @__PURE__ */ jsx("span", { style: s.vaultLabel, children: "Vault Solana Address" }),
+                /* @__PURE__ */ jsxs("div", { style: s.vaultValueRow, children: [
+                  /* @__PURE__ */ jsx("span", { style: { ...s.vaultValue, ...s.vaultValueMono }, children: vaultInfo.solanaAddress }),
+                  /* @__PURE__ */ jsx(
+                    CopyButton,
+                    {
+                      field: "solAddress",
+                      value: vaultInfo.solanaAddress,
+                      copiedField,
+                      copyHovered,
+                      setCopyHovered,
+                      onCopy: handleCopy
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      ),
+      showLogout && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: logout,
+          style: {
+            ...s.logoutBtn,
+            ...logoutHovered ? s.logoutBtnHover : {}
+          },
+          onMouseEnter: () => setLogoutHovered(true),
+          onMouseLeave: () => setLogoutHovered(false),
+          title: "Disconnect",
+          children: "\u23FB"
+        }
+      )
+    ] })
+  ] });
+}
+function CopyButton({ field, value, copiedField, copyHovered, setCopyHovered, onCopy }) {
+  const isCopied = copiedField === field;
+  const isHovered = copyHovered === field;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onCopy(field, value),
+      style: {
+        ...s.copyBtn,
+        ...isCopied ? s.copyBtnCopied : isHovered ? s.copyBtnHover : {}
+      },
+      onMouseEnter: () => setCopyHovered(field),
+      onMouseLeave: () => setCopyHovered(null),
+      children: isCopied ? "Copied!" : "Copy"
+    }
+  );
+}
+
+export { AuthStatus, ConnectButton };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map