@b3dotfun/sdk 0.1.69-alpha.11 → 0.1.69-alpha.13

package/src/wallet/react/components/ConnectWallet.tsx

@@ -0,0 +1,665 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {
+  WalletCoinbase,
+  WalletMetamask,
+  WalletPhantom,
+  WalletRabby,
+  WalletRainbow,
+  WalletWalletConnect,
+} from "@web3icons/react";
+import { truncateAddress } from "@b3dotfun/sdk/shared/utils";
+import { AlertCircle, Check, ChevronDown, Copy, Loader2, LogOut, Wallet, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useWalletDisconnect } from "../hooks/useWalletDisconnect";
+import { useWalletState, type WalletConnector } from "../hooks/useWalletState";
+
+/** Injects the spinner keyframe once into the document head (idempotent via DOM id). */
+function SpinnerKeyframes() {
+  useEffect(() => {
+    if (document.getElementById("b3-spin-keyframes")) return;
+    const style = document.createElement("style");
+    style.id = "b3-spin-keyframes";
+    style.textContent = "@keyframes b3-spin { to { transform: rotate(360deg) } }";
+    document.head.appendChild(style);
+  }, []);
+  return null;
+}
+
+export interface ConnectWalletProps {
+  /** Theme for the modal and button. Defaults to "light". */
+  theme?: "light" | "dark";
+  /** Label for the connect button. Defaults to "Connect Wallet". */
+  buttonLabel?: string;
+}
+
+const WALLET_DOWNLOAD_URLS: Record<string, string> = {
+  metamask: "https://metamask.io/download/",
+  "coinbase wallet": "https://www.coinbase.com/wallet/downloads",
+  phantom: "https://phantom.app/download",
+  rabby: "https://rabby.io/",
+  rainbow: "https://rainbow.me/download",
+  walletconnect: "https://walletconnect.com/",
+};
+
+function getWalletIcon(name: string, size = 24) {
+  switch (name.toLowerCase()) {
+    case "metamask":
+      return <WalletMetamask width={size} height={size} />;
+    case "coinbase wallet":
+      return <WalletCoinbase width={size} height={size} />;
+    case "phantom":
+      return <WalletPhantom width={size} height={size} />;
+    case "walletconnect":
+      return <WalletWalletConnect width={size} height={size} />;
+    case "rabby wallet":
+    case "rabby":
+      return <WalletRabby width={size} height={size} />;
+    case "rainbow":
+      return <WalletRainbow width={size} height={size} />;
+    default:
+      return <Wallet width={size} height={size} />;
+  }
+}
+
+// B3 brand colors
+const B3_BLUE = "#3368ef";
+const B3_BLUE_HOVER = "#2554d4";
+
+const theme = {
+  light: {
+    bg: "#ffffff",
+    cardBg: "#ffffff",
+    text: "#1a1a2e",
+    textSecondary: "#64748b",
+    textTertiary: "#94a3b8",
+    border: "#D1D1D6",
+    borderLight: "#e2e8f0",
+    hoverBg: "#f1f5f9",
+    iconBg: "#f1f5f9",
+    shadow:
+      "0 20px 24px -4px rgba(10,13,18,0.08), 0 8px 8px -4px rgba(10,13,18,0.03), 0 3px 3px -1.5px rgba(10,13,18,0.04)",
+    popoverShadow: "0 10px 30px -5px rgba(10,13,18,0.1), 0 4px 6px -4px rgba(10,13,18,0.05)",
+    overlayBg: "rgba(0,0,0,0.8)",
+    badgeInstalledBg: "#ecfdf5",
+    badgeInstalledText: "#059669",
+    badgeInstallBg: "#f1f5f9",
+    badgeInstallText: "#64748b",
+    connectedDot: "#10b981",
+    disconnectBorder: "#fca5a5",
+    disconnectText: "#dc2626",
+    disconnectHoverBg: "#fef2f2",
+    copyHoverBg: "#f1f5f9",
+  },
+  dark: {
+    bg: "#0f0f14",
+    cardBg: "#1a1a24",
+    text: "#f1f5f9",
+    textSecondary: "#94a3b8",
+    textTertiary: "#64748b",
+    border: "#2a2a3a",
+    borderLight: "#2a2a3a",
+    hoverBg: "#22222e",
+    iconBg: "#22222e",
+    shadow: "0 20px 24px -4px rgba(0,0,0,0.3), 0 8px 8px -4px rgba(0,0,0,0.2)",
+    popoverShadow: "0 10px 30px -5px rgba(0,0,0,0.4)",
+    overlayBg: "rgba(0,0,0,0.85)",
+    badgeInstalledBg: "#052e16",
+    badgeInstalledText: "#34d399",
+    badgeInstallBg: "#22222e",
+    badgeInstallText: "#64748b",
+    connectedDot: "#34d399",
+    disconnectBorder: "#7f1d1d",
+    disconnectText: "#f87171",
+    disconnectHoverBg: "#1c1017",
+    copyHoverBg: "#22222e",
+  },
+};
+
+/**
+ * Drop-in wallet connection component styled to match the B3 design system.
+ * Uses inline styles — works in any app without tailwind configuration.
+ */
+export function ConnectWallet({ theme: themeProp = "light", buttonLabel = "Connect Wallet" }: ConnectWalletProps) {
+  const { address, isConnected, chain, connectors } = useWalletState();
+  const { disconnect } = useWalletDisconnect();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [hoveredUid, setHoveredUid] = useState<string | null>(null);
+  const [btnHover, setBtnHover] = useState(false);
+  const [disconnectHover, setDisconnectHover] = useState(false);
+  const [copyHover, setCopyHover] = useState(false);
+  const [connectingUid, setConnectingUid] = useState<string | null>(null);
+  const [connectError, setConnectError] = useState<string | null>(null);
+  const [connectSuccess, setConnectSuccess] = useState(false);
+
+  const t = theme[themeProp];
+
+  const successTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const resetConnectState = useCallback(() => {
+    setConnectingUid(null);
+    setConnectError(null);
+    setConnectSuccess(false);
+    if (successTimerRef.current) {
+      clearTimeout(successTimerRef.current);
+      successTimerRef.current = null;
+    }
+  }, []);
+
+  // Cleanup success timer on unmount
+  useEffect(() => {
+    return () => {
+      if (successTimerRef.current) clearTimeout(successTimerRef.current);
+    };
+  }, []);
+
+  const handleConnect = useCallback(
+    async (connector: WalletConnector) => {
+      if (!connector.isInstalled) {
+        const url = WALLET_DOWNLOAD_URLS[connector.name.toLowerCase()];
+        if (url) window.open(url, "_blank", "noopener,noreferrer");
+        return;
+      }
+      setConnectingUid(connector.uid);
+      setConnectError(null);
+      setConnectSuccess(false);
+      try {
+        await connector.connect();
+        setConnectSuccess(true);
+        successTimerRef.current = setTimeout(() => {
+          setModalOpen(false);
+          resetConnectState();
+        }, 800);
+      } catch (err: unknown) {
+        const message = err instanceof Error ? err.message : "Connection failed";
+        if (message.includes("rejected") || message.includes("denied") || message.includes("User rejected")) {
+          setConnectError("Connection rejected");
+        } else {
+          setConnectError(message.length > 60 ? message.slice(0, 60) + "..." : message);
+        }
+        setConnectingUid(null);
+      }
+    },
+    [resetConnectState],
+  );
+
+  const handleDisconnect = useCallback(() => {
+    disconnect();
+    setPopoverOpen(false);
+  }, [disconnect]);
+
+  const handleCopyAddress = useCallback(async () => {
+    if (address) {
+      try {
+        await navigator.clipboard.writeText(address);
+        setCopied(true);
+      } catch {
+        // Clipboard API may be denied
+      }
+    }
+  }, [address]);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
+  // Close popover on Escape key
+  useEffect(() => {
+    if (!popoverOpen) return;
+    const handleKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Escape") setPopoverOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [popoverOpen]);
+
+  // --- Connected state ---
+  if (isConnected && address) {
+    return (
+      <div
+        style={{
+          position: "relative",
+          display: "inline-block",
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        }}
+      >
+        <button
+          onClick={() => setPopoverOpen(!popoverOpen)}
+          aria-expanded={popoverOpen}
+          aria-haspopup="true"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            padding: "10px 16px",
+            borderRadius: 12,
+            border: `1.5px solid ${t.border}`,
+            background: t.cardBg,
+            color: t.text,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            letterSpacing: "-0.01em",
+            transition: "all 150ms ease",
+          }}
+        >
+          <span
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: t.connectedDot,
+              display: "inline-block",
+              boxShadow: `0 0 6px ${t.connectedDot}`,
+            }}
+          />
+          <span style={{ fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace", fontSize: 13 }}>
+            {truncateAddress(address)}
+          </span>
+          <ChevronDown
+            size={14}
+            color={t.textTertiary}
+            style={{ transition: "transform 200ms", transform: popoverOpen ? "rotate(180deg)" : "none" }}
+          />
+        </button>
+
+        {popoverOpen && (
+          <>
+            <div style={{ position: "fixed", inset: 0, zIndex: 40 }} onClick={() => setPopoverOpen(false)} />
+            <div
+              role="dialog"
+              aria-label="Wallet details"
+              onClick={e => e.stopPropagation()}
+              style={{
+                position: "absolute",
+                right: 0,
+                top: "100%",
+                marginTop: 8,
+                width: 320,
+                borderRadius: 16,
+                border: `1.5px solid ${t.border}`,
+                background: t.cardBg,
+                boxShadow: t.popoverShadow,
+                zIndex: 50,
+                overflow: "hidden",
+              }}
+            >
+              {/* Header */}
+              <div
+                style={{
+                  padding: "16px 20px 14px",
+                  borderBottom: `1px solid ${t.borderLight}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <span
+                    style={{
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: t.connectedDot,
+                      display: "inline-block",
+                      boxShadow: `0 0 6px ${t.connectedDot}`,
+                    }}
+                  />
+                  <span style={{ fontSize: 13, fontWeight: 600, color: t.text, letterSpacing: "-0.01em" }}>
+                    Connected
+                  </span>
+                </div>
+                {chain && (
+                  <span
+                    style={{
+                      fontSize: 11,
+                      fontWeight: 600,
+                      padding: "3px 10px",
+                      borderRadius: 99,
+                      background: t.iconBg,
+                      color: t.textSecondary,
+                      letterSpacing: "0.02em",
+                      textTransform: "uppercase",
+                    }}
+                  >
+                    {chain.name}
+                  </span>
+                )}
+              </div>
+
+              <div style={{ padding: "12px 12px 16px" }}>
+                {/* Address */}
+                <button
+                  onClick={handleCopyAddress}
+                  onMouseEnter={() => setCopyHover(true)}
+                  onMouseLeave={() => setCopyHover(false)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    width: "100%",
+                    padding: "10px 12px",
+                    borderRadius: 10,
+                    border: "none",
+                    background: copyHover ? t.copyHoverBg : "transparent",
+                    textAlign: "left",
+                    fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+                    fontSize: 12,
+                    color: t.text,
+                    cursor: "pointer",
+                    marginBottom: 8,
+                    wordBreak: "break-all",
+                    lineHeight: 1.5,
+                    transition: "background 150ms ease",
+                  }}
+                >
+                  <span style={{ flex: 1 }}>{address}</span>
+                  {copied ? (
+                    <Check size={14} color={t.connectedDot} style={{ flexShrink: 0 }} />
+                  ) : (
+                    <Copy size={14} color={t.textTertiary} style={{ flexShrink: 0 }} />
+                  )}
+                </button>
+
+                {/* Disconnect */}
+                <button
+                  onClick={handleDisconnect}
+                  onMouseEnter={() => setDisconnectHover(true)}
+                  onMouseLeave={() => setDisconnectHover(false)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 8,
+                    width: "100%",
+                    padding: "10px 16px",
+                    borderRadius: 10,
+                    border: `1.5px solid ${t.disconnectBorder}`,
+                    background: disconnectHover ? t.disconnectHoverBg : "transparent",
+                    color: t.disconnectText,
+                    fontSize: 13,
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    transition: "all 150ms ease",
+                  }}
+                >
+                  <LogOut size={15} />
+                  Disconnect
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // --- Disconnected state ---
+  return (
+    <DialogPrimitive.Root
+      open={modalOpen}
+      onOpenChange={open => {
+        setModalOpen(open);
+        if (!open) resetConnectState();
+      }}
+    >
+      <DialogPrimitive.Trigger asChild>
+        <button
+          onMouseEnter={() => setBtnHover(true)}
+          onMouseLeave={() => setBtnHover(false)}
+          style={{
+            padding: "12px 24px",
+            borderRadius: 12,
+            border: "none",
+            background: btnHover ? B3_BLUE_HOVER : B3_BLUE,
+            color: "#ffffff",
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            letterSpacing: "-0.01em",
+            transition: "all 150ms ease",
+            boxShadow: btnHover ? `0 4px 12px ${B3_BLUE}40, 0 1px 3px rgba(0,0,0,0.1)` : `0 2px 8px ${B3_BLUE}30`,
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+          }}
+        >
+          {buttonLabel}
+        </button>
+      </DialogPrimitive.Trigger>
+
+      <SpinnerKeyframes />
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 50,
+            background: t.overlayBg,
+            backdropFilter: "blur(20px)",
+            WebkitBackdropFilter: "blur(20px)",
+          }}
+        />
+        <DialogPrimitive.Content
+          style={{
+            position: "fixed",
+            left: "50%",
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+            zIndex: 50,
+            width: "calc(100% - 32px)",
+            maxWidth: 400,
+            borderRadius: 20,
+            border: `1.5px solid ${t.border}`,
+            background: t.cardBg,
+            color: t.text,
+            boxShadow: t.shadow,
+            overflow: "hidden",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+          }}
+        >
+          {/* Modal header */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "20px 24px 16px",
+            }}
+          >
+            <div>
+              <DialogPrimitive.Title
+                style={{
+                  fontSize: 18,
+                  fontWeight: 700,
+                  margin: 0,
+                  letterSpacing: "-0.02em",
+                  color: t.text,
+                }}
+              >
+                Connect Wallet
+              </DialogPrimitive.Title>
+              <p style={{ fontSize: 13, color: t.textSecondary, margin: "4px 0 0", letterSpacing: "-0.01em" }}>
+                Choose your preferred wallet
+              </p>
+            </div>
+            <DialogPrimitive.Close
+              style={{
+                background: t.iconBg,
+                border: "none",
+                cursor: "pointer",
+                padding: 8,
+                borderRadius: 10,
+                color: t.textSecondary,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 150ms ease",
+              }}
+            >
+              <X size={16} />
+            </DialogPrimitive.Close>
+          </div>
+
+          {/* Error banner */}
+          {connectError && (
+            <div
+              style={{
+                margin: "0 12px 8px",
+                padding: "10px 14px",
+                borderRadius: 10,
+                background: themeProp === "dark" ? "#1c1017" : "#fef2f2",
+                border: `1px solid ${t.disconnectBorder}`,
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                fontSize: 13,
+                color: t.disconnectText,
+              }}
+            >
+              <AlertCircle size={16} style={{ flexShrink: 0 }} />
+              <span style={{ flex: 1 }}>{connectError}</span>
+              <button
+                onClick={() => setConnectError(null)}
+                style={{ background: "none", border: "none", cursor: "pointer", color: t.disconnectText, padding: 2 }}
+              >
+                <X size={14} />
+              </button>
+            </div>
+          )}
+
+          {/* Connector list */}
+          <div style={{ padding: "0 12px 16px" }}>
+            {connectors.length === 0 ? (
+              <p style={{ padding: "40px 0", textAlign: "center", fontSize: 14, color: t.textSecondary }}>
+                No wallets detected
+              </p>
+            ) : (
+              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                {connectors.map(connector => {
+                  const isLoading = connectingUid === connector.uid;
+                  const isSuccess = connectSuccess && connectingUid === connector.uid;
+                  const isDisabled = connectingUid !== null && connectingUid !== connector.uid;
+
+                  return (
+                    <button
+                      key={connector.uid}
+                      onClick={() => !connectingUid && handleConnect(connector)}
+                      onMouseEnter={() => setHoveredUid(connector.uid)}
+                      onMouseLeave={() => setHoveredUid(null)}
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 14,
+                        width: "100%",
+                        padding: "14px 16px",
+                        borderRadius: 14,
+                        border: isLoading
+                          ? `1.5px solid ${B3_BLUE}`
+                          : isSuccess
+                            ? `1.5px solid ${t.connectedDot}`
+                            : hoveredUid === connector.uid && !isDisabled
+                              ? `1.5px solid ${B3_BLUE}40`
+                              : "1.5px solid transparent",
+                        background: isLoading
+                          ? themeProp === "dark"
+                            ? "#1a1a30"
+                            : "#eff6ff"
+                          : isSuccess
+                            ? themeProp === "dark"
+                              ? "#0a1f15"
+                              : "#ecfdf5"
+                            : hoveredUid === connector.uid && !isDisabled
+                              ? t.hoverBg
+                              : "transparent",
+                        textAlign: "left",
+                        cursor: isDisabled ? "default" : "pointer",
+                        color: t.text,
+                        opacity: isDisabled ? 0.4 : 1,
+                        transition: "all 150ms ease",
+                      }}
+                    >
+                      <div
+                        style={{
+                          width: 44,
+                          height: 44,
+                          borderRadius: 12,
+                          background: t.iconBg,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0,
+                          border: `1px solid ${t.borderLight}`,
+                        }}
+                      >
+                        {getWalletIcon(connector.name, 24)}
+                      </div>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: "-0.01em" }}>{connector.name}</div>
+                        {isLoading && (
+                          <div style={{ fontSize: 12, color: B3_BLUE, marginTop: 2 }}>Waiting for approval...</div>
+                        )}
+                        {isSuccess && (
+                          <div style={{ fontSize: 12, color: t.connectedDot, marginTop: 2 }}>Connected</div>
+                        )}
+                      </div>
+                      {isLoading && (
+                        <Loader2
+                          size={18}
+                          color={B3_BLUE}
+                          style={{ flexShrink: 0, animation: "b3-spin 1s linear infinite" }}
+                        />
+                      )}
+                      {isSuccess && <Check size={18} color={t.connectedDot} style={{ flexShrink: 0 }} />}
+                      {!isLoading && !isSuccess && !connector.isInstalled && (
+                        <span
+                          style={{
+                            fontSize: 11,
+                            fontWeight: 600,
+                            padding: "4px 10px",
+                            borderRadius: 99,
+                            background: t.badgeInstallBg,
+                            color: t.badgeInstallText,
+                            letterSpacing: "0.01em",
+                          }}
+                        >
+                          Install
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div
+            style={{
+              padding: "12px 24px 16px",
+              borderTop: `1px solid ${t.borderLight}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6,
+            }}
+          >
+            <img src="https://cdn.b3.fun/b3_logo.svg" alt="B3" width={16} height={16} />
+            <span
+              style={{
+                fontSize: 11,
+                fontWeight: 700,
+                color: B3_BLUE,
+                letterSpacing: "0.06em",
+                textTransform: "uppercase",
+              }}
+            >
+              Powered by B3
+            </span>
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}