@hfunlabs/hypurr-connect 0.1.12 → 0.1.13

package/src/WalletSelectorDropdown.tsx

@@ -0,0 +1,797 @@
+import { AnimatePresence, motion } from "framer-motion";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+import {
+  Fragment,
+  useCallback,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+} from "react";
+import { useHypurrConnectInternal } from "./HypurrConnectProvider";
+import { UserProfileModal, type SlippageOption } from "./UserProfileModal";
+import {
+  Copy,
+  Crown,
+  Folder,
+  LayoutDashboard,
+  LogOut,
+  Plus,
+  Star,
+  User,
+  Wallet,
+} from "./icons/lucide";
+import {
+  type PrincipalColorOverrides,
+  type PrincipalColors,
+  profileColors,
+  resolvePrincipalColors,
+} from "./profileStyles";
+
+export interface WalletSelectorDropdownProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Called when the user clicks "Add Wallet". Host renders the add-wallet UI. */
+  onAddWallet?: () => void;
+  /** Called when the user clicks the portfolio icon on a wallet row. */
+  onShowPortfolio?: (wallet: HyperliquidWallet) => void;
+  /**
+   * Called before the SDK's `logout()` runs. Host can do extra cleanup
+   * (e.g. wagmi `disconnect()`).
+   */
+  onLogout?: () => void;
+  /** Toast callback. Fires "Address copied" success on copy-address clicks. */
+  onNotify?: (n: { type: "success" | "error"; message: string }) => void;
+  /** HFun score threshold for the VIP crown. Defaults to 10. */
+  vipThreshold?: number;
+
+  // ─── Profile & Settings modal (rendered internally) ────────────
+  /** Current value for the "Animations" toggle. */
+  animationsEnabled: boolean;
+  /** Called when the user flips the animations toggle. */
+  onToggleAnimations: () => void;
+  /** Current default slippage value (e.g. 0.01 = 1%). */
+  defaultSlippage: number;
+  /** Called when the user picks a slippage option. */
+  onSlippageChange: (value: number) => void;
+  /** Override the slippage choices. Defaults to 0.5/1/2/5/10%. */
+  slippageOptions?: SlippageOption[];
+  /** Fired after the SDK successfully deletes a wallet. */
+  onWalletDeleted?: (walletId: number) => void;
+  /** Fired after the SDK successfully renames a wallet. */
+  onWalletRenamed?: (walletId: number, name: string) => void;
+  /** Shorthand for `principalColors.accent`. Defaults to `#a855f7`. */
+  accentColor?: string;
+  /** Principal accent colors used for add-wallet text, wallet icon surfaces, and the Profile & Settings modal. */
+  principalColors?: PrincipalColorOverrides;
+  /** CSS color used as the dropdown panel background. Defaults to `rgba(20,20,20,0.95)`. */
+  backgroundColor?: string;
+}
+
+const DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
+
+interface DropdownWallet {
+  id: number;
+  name?: string | null;
+  ethereumAddress?: string;
+}
+
+interface WalletListItem {
+  wallet: DropdownWallet;
+  label: string | null;
+}
+
+type WalletListEntry =
+  | { type: "wallet"; item: WalletListItem }
+  | { type: "group"; path: string; items: WalletListItem[] };
+
+const getWalletNameParts = (name?: string | null) =>
+  (name ?? "")
+    .split("/")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+const buildWalletListEntries = (
+  wallets: DropdownWallet[] | undefined,
+): WalletListEntry[] => {
+  const standalone: WalletListItem[] = [];
+  const grouped = new Map<string, WalletListItem[]>();
+  const walletParts = (wallets ?? []).map((wallet) => ({
+    wallet,
+    parts: getWalletNameParts(wallet.name),
+  }));
+  const prefixCounts = new Map<string, number>();
+
+  walletParts.forEach(({ parts }) => {
+    for (let index = 1; index < parts.length; index += 1) {
+      const prefix = parts.slice(0, index).join("/");
+      prefixCounts.set(prefix, (prefixCounts.get(prefix) ?? 0) + 1);
+    }
+  });
+
+  walletParts.forEach(({ wallet, parts }) => {
+    const groupPath = (() => {
+      for (let index = parts.length - 1; index > 0; index -= 1) {
+        const prefix = parts.slice(0, index).join("/");
+        if ((prefixCounts.get(prefix) ?? 0) > 1) {
+          return prefix;
+        }
+      }
+      return null;
+    })();
+    const groupDepth = groupPath ? groupPath.split("/").length : 0;
+    const item: WalletListItem = {
+      wallet,
+      label: parts.length > 0 ? parts.slice(groupDepth).join("/") : null,
+    };
+
+    if (!groupPath) {
+      standalone.push(item);
+      return;
+    }
+
+    const groupItems = grouped.get(groupPath) ?? [];
+    groupItems.push(item);
+    grouped.set(groupPath, groupItems);
+  });
+
+  const entries: WalletListEntry[] = standalone.map((item) => ({
+    type: "wallet",
+    item,
+  }));
+
+  grouped.forEach((items, path) => {
+    if (items.length === 1) {
+      entries.push({
+        type: "wallet",
+        item: { ...items[0], label: `${path}/${items[0].label ?? ""}` },
+      });
+      return;
+    }
+
+    entries.push({
+      type: "group",
+      path,
+      items: [...items].sort((a, b) =>
+        (a.label ?? "").localeCompare(b.label ?? ""),
+      ),
+    });
+  });
+
+  return entries.sort((a, b) => {
+    const aLabel = a.type === "group" ? a.path : (a.item.label ?? "");
+    const bLabel = b.type === "group" ? b.path : (b.item.label ?? "");
+    return aLabel.localeCompare(bLabel);
+  });
+};
+
+const formatCompactAddress = (addr: string | undefined) => {
+  if (!addr) return "";
+  return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
+};
+
+const rootStyle: CSSProperties = {
+  position: "absolute",
+  right: 0,
+  top: "calc(100% + 4px)",
+  width: 240,
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  borderRadius: 9,
+  boxShadow: "0 8px 40px rgba(0,0,0,0.85)",
+  border: "1px solid rgba(255,255,255,0.08)",
+  zIndex: 50,
+  transformOrigin: "top right",
+  overflow: "hidden",
+};
+
+const sectionBorder = "1px solid rgba(255,255,255,0.06)";
+
+const sectionHeaderStyle: CSSProperties = {
+  padding: "8px 16px",
+  fontSize: 12,
+  fontWeight: 600,
+  color: "#9ca3af",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+};
+
+const footerBtnStyle: CSSProperties = {
+  width: "100%",
+  textAlign: "left",
+  padding: "10px 16px",
+  fontSize: 14,
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  color: "#9ca3af",
+  transition: "background 120ms, color 120ms",
+};
+
+export function WalletSelectorDropdown({
+  isOpen,
+  onClose,
+  onAddWallet,
+  onShowPortfolio,
+  onLogout,
+  onNotify,
+  vipThreshold = 10,
+  animationsEnabled,
+  onToggleAnimations,
+  defaultSlippage,
+  onSlippageChange,
+  slippageOptions,
+  onWalletDeleted,
+  onWalletRenamed,
+  accentColor,
+  principalColors,
+  backgroundColor = DEFAULT_BACKGROUND_COLOR,
+}: WalletSelectorDropdownProps): ReactNode {
+  const { user, wallets, selectedWalletId, selectWallet, logout, authMethod } =
+    useHypurrConnectInternal();
+
+  const [profileOpen, setProfileOpen] = useState(false);
+  const openProfile = useCallback(() => {
+    setProfileOpen(true);
+    onClose();
+  }, [onClose]);
+
+  const walletListEntries = useMemo(
+    () => buildWalletListEntries(Array.isArray(wallets) ? wallets : undefined),
+    [wallets],
+  );
+
+  const handleCopyAddress = useCallback(
+    (address: string | undefined) => {
+      if (!address) return;
+      navigator.clipboard.writeText(address);
+      onNotify?.({ type: "success", message: "Address copied" });
+    },
+    [onNotify],
+  );
+
+  const handleLogout = useCallback(() => {
+    onLogout?.();
+    logout();
+    onClose();
+  }, [logout, onClose, onLogout]);
+
+  const profilePic = user?.photoUrl;
+  const displayName = user?.displayName ?? "";
+  const hfunScore = user?.hfunScore ?? 0;
+  const isVip = hfunScore > vipThreshold;
+  const colors = resolvePrincipalColors(accentColor, principalColors);
+
+  const renderWalletRow = (item: WalletListItem, depth: number): ReactNode => {
+    const { wallet, label } = item;
+    const isSelected = wallet.id === selectedWalletId;
+    const compactAddress = formatCompactAddress(wallet.ethereumAddress);
+    return (
+      <WalletRow
+        key={wallet.id}
+        depth={depth}
+        isSelected={isSelected}
+        label={label}
+        compactAddress={compactAddress}
+        onSelect={() => {
+          selectWallet(wallet.id);
+          onClose();
+        }}
+        onShowPortfolio={
+          onShowPortfolio
+            ? () => {
+                onShowPortfolio(wallet as HyperliquidWallet);
+                onClose();
+              }
+            : undefined
+        }
+        onCopy={() => handleCopyAddress(wallet.ethereumAddress)}
+        colors={colors}
+      />
+    );
+  };
+
+  return (
+    <>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            style={{ ...rootStyle, background: backgroundColor }}
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
+          >
+            {/* Profile header */}
+            <button
+              onClick={openProfile}
+              style={{
+                width: "100%",
+                padding: "12px 16px",
+                borderBottom: sectionBorder,
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                background: "transparent",
+                border: "none",
+                borderBottomColor: "rgba(255,255,255,0.06)",
+                borderBottomStyle: "solid",
+                borderBottomWidth: 1,
+                cursor: "pointer",
+                textAlign: "left",
+                transition: "background 120ms",
+              }}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.background = "rgba(255,255,255,0.06)")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.background = "transparent")
+              }
+            >
+              {profilePic ? (
+                <div
+                  style={{
+                    position: "relative",
+                    padding: isVip ? 2 : 0,
+                    borderRadius: "50%",
+                    background: isVip
+                      ? "linear-gradient(to right, #fde047, #eab308, #ca8a04)"
+                      : "transparent",
+                  }}
+                >
+                  <img
+                    src={profilePic}
+                    alt="Profile"
+                    style={{
+                      height: 32,
+                      width: 32,
+                      borderRadius: "50%",
+                      display: "block",
+                    }}
+                  />
+                  {isVip && (
+                    <Crown
+                      size={12}
+                      color="#fde047"
+                      fill="#eab308"
+                      style={{
+                        position: "absolute",
+                        top: -4,
+                        right: -2,
+                        filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.5))",
+                      }}
+                    />
+                  )}
+                </div>
+              ) : authMethod === "eoa" ? (
+                <div
+                  style={{
+                    height: 32,
+                    width: 32,
+                    borderRadius: 7,
+                    background: colors.accentBackground,
+                    border: `1px solid ${colors.accentBorder}`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
+                  }}
+                >
+                  <Wallet size={14} color={colors.accentText} />
+                </div>
+              ) : (
+                <div
+                  style={{
+                    position: "relative",
+                    height: 32,
+                    width: 32,
+                    borderRadius: "50%",
+                    background: isVip
+                      ? "linear-gradient(135deg, #ca8a04, #fde047)"
+                      : colors.accentBackground,
+                    border: `1px solid ${
+                      isVip ? "rgba(255,255,255,0.08)" : colors.accentBorder
+                    }`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: isVip ? profileColors.text : colors.accentText,
+                    fontSize: 14,
+                    fontWeight: 700,
+                  }}
+                >
+                  {displayName.charAt(0)}
+                  {isVip && (
+                    <Crown
+                      size={12}
+                      color="#fde047"
+                      fill="#eab308"
+                      style={{
+                        position: "absolute",
+                        top: -4,
+                        right: -2,
+                        filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.5))",
+                      }}
+                    />
+                  )}
+                </div>
+              )}
+              <div style={{ overflow: "hidden", flex: 1 }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <p
+                    style={{
+                      margin: 0,
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: "#fff",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {displayName}
+                  </p>
+                  {hfunScore > 0 && (
+                    <span
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 2,
+                        fontSize: 12,
+                        color: "#eab308",
+                        fontWeight: 500,
+                        background: "rgba(234,179,8,0.1)",
+                        padding: "2px 6px",
+                        borderRadius: 4,
+                      }}
+                    >
+                      <Star size={10} color="#eab308" fill="#eab308" />
+                      {hfunScore.toFixed(0)}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </button>
+
+            {/* Wallets section */}
+            <div style={{ borderBottom: sectionBorder }}>
+              <div style={sectionHeaderStyle}>Wallets</div>
+              <div
+                style={{
+                  maxHeight: 256,
+                  overflowY: "auto",
+                  paddingBottom: 4,
+                }}
+              >
+                {walletListEntries.map((entry) => {
+                  if (entry.type === "wallet") {
+                    return renderWalletRow(entry.item, 0);
+                  }
+                  const isSelectedGroup = entry.items.some(
+                    (item) => item.wallet.id === selectedWalletId,
+                  );
+                  return (
+                    <Fragment key={entry.path}>
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 6,
+                          padding: "8px 16px 4px",
+                          fontSize: 11,
+                          fontWeight: 600,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em",
+                          color: isSelectedGroup ? "#e5e7eb" : "#6b7280",
+                        }}
+                      >
+                        <Folder size={12} style={{ flexShrink: 0 }} />
+                        <span
+                          style={{
+                            minWidth: 0,
+                            flex: 1,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                          }}
+                        >
+                          {entry.path}
+                        </span>
+                        <span
+                          style={{
+                            flexShrink: 0,
+                            fontVariantNumeric: "tabular-nums",
+                            color: "#4b5563",
+                          }}
+                        >
+                          {entry.items.length}
+                        </span>
+                      </div>
+                      {entry.items.map((item) => renderWalletRow(item, 1))}
+                    </Fragment>
+                  );
+                })}
+              </div>
+              {authMethod !== "eoa" && onAddWallet && (
+                <button
+                  onClick={() => {
+                    onAddWallet();
+                    onClose();
+                  }}
+                  style={{
+                    width: "100%",
+                    textAlign: "left",
+                    padding: "8px 16px",
+                    fontSize: 14,
+                    background: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    color: colors.accentText,
+                    transition: "background 120ms",
+                  }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.background =
+                      "rgba(255,255,255,0.06)")
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.background = "transparent")
+                  }
+                >
+                  <Plus size={14} />
+                  Add Wallet
+                </button>
+              )}
+            </div>
+
+            {/* Footer actions */}
+            <div>
+              <FooterBtn
+                onClick={openProfile}
+                icon={<User size={14} />}
+                label="Profile & Settings"
+              />
+              <FooterBtn
+                onClick={handleLogout}
+                icon={<LogOut size={14} />}
+                label="Logout"
+                hoverColor="#ef4444"
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <UserProfileModal
+        isOpen={profileOpen}
+        onClose={() => setProfileOpen(false)}
+        animationsEnabled={animationsEnabled}
+        onToggleAnimations={onToggleAnimations}
+        defaultSlippage={defaultSlippage}
+        onSlippageChange={onSlippageChange}
+        slippageOptions={slippageOptions}
+        accentColor={accentColor}
+        principalColors={principalColors}
+        onWalletDeleted={onWalletDeleted}
+        onWalletRenamed={onWalletRenamed}
+        onShowPortfolio={
+          onShowPortfolio
+            ? (wallet) => {
+                onShowPortfolio(wallet);
+                setProfileOpen(false);
+              }
+            : undefined
+        }
+        onNotify={onNotify}
+      />
+    </>
+  );
+}
+
+function FooterBtn({
+  onClick,
+  icon,
+  label,
+  hoverColor = "#fff",
+}: {
+  onClick: () => void;
+  icon: ReactNode;
+  label: string;
+  hoverColor?: string;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      style={footerBtnStyle}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = "rgba(255,255,255,0.06)";
+        e.currentTarget.style.color = hoverColor;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = "transparent";
+        e.currentTarget.style.color = "#9ca3af";
+      }}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+}
+
+function WalletRow({
+  depth,
+  isSelected,
+  label,
+  compactAddress,
+  onSelect,
+  onShowPortfolio,
+  onCopy,
+  colors,
+}: {
+  depth: number;
+  isSelected: boolean;
+  label: string | null;
+  compactAddress: string;
+  onSelect: () => void;
+  onShowPortfolio?: () => void;
+  onCopy: () => void;
+  colors: PrincipalColors;
+}) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        paddingLeft: 16 + depth * 14,
+        paddingRight: 16,
+        paddingTop: 6,
+        paddingBottom: 6,
+        fontSize: 14,
+        color: "#d1d5db",
+        display: "flex",
+        alignItems: "center",
+        background: isSelected ? "rgba(255,255,255,0.06)" : "transparent",
+        transition: "background 120ms",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = "rgba(255,255,255,0.06)";
+        const actions =
+          e.currentTarget.querySelector<HTMLDivElement>("[data-row-actions]");
+        if (actions) actions.style.opacity = "1";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = isSelected
+          ? "rgba(255,255,255,0.06)"
+          : "transparent";
+        const actions =
+          e.currentTarget.querySelector<HTMLDivElement>("[data-row-actions]");
+        if (actions) actions.style.opacity = "0";
+      }}
+    >
+      <button
+        onClick={onSelect}
+        style={{
+          flex: 1,
+          textAlign: "left",
+          minWidth: 0,
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          background: "transparent",
+          border: "none",
+          color: "inherit",
+          cursor: "pointer",
+          padding: 0,
+        }}
+      >
+        {label ? (
+          <>
+            <span
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: isSelected ? "#fff" : undefined,
+                fontWeight: isSelected ? 500 : undefined,
+              }}
+            >
+              {label}
+            </span>
+            <span
+              style={{
+                fontSize: 12,
+                fontWeight: 400,
+                flexShrink: 0,
+                color: "#6b7280",
+              }}
+            >
+              ({compactAddress})
+            </span>
+          </>
+        ) : (
+          <span
+            style={{
+              fontSize: 12,
+              color: isSelected ? "#fff" : "#9ca3af",
+              fontWeight: isSelected ? 500 : undefined,
+            }}
+          >
+            {compactAddress}
+          </span>
+        )}
+      </button>
+      <div
+        data-row-actions
+        style={{
+          display: "flex",
+          alignItems: "center",
+          opacity: 0,
+          transition: "opacity 120ms",
+        }}
+      >
+        {onShowPortfolio && (
+          <RowIconBtn
+            title="View portfolio"
+            hoverColor={colors.accent}
+            onClick={(e) => {
+              e.stopPropagation();
+              onShowPortfolio();
+            }}
+          >
+            <LayoutDashboard size={12} />
+          </RowIconBtn>
+        )}
+        <RowIconBtn
+          title="Copy address"
+          hoverColor={colors.accent}
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopy();
+          }}
+        >
+          <Copy size={12} />
+        </RowIconBtn>
+      </div>
+    </div>
+  );
+}
+
+function RowIconBtn({
+  children,
+  title,
+  onClick,
+  hoverColor = profileColors.text,
+}: {
+  children: ReactNode;
+  title: string;
+  onClick: (e: ReactMouseEvent<HTMLButtonElement>) => void;
+  hoverColor?: string;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      style={{
+        padding: 4,
+        marginLeft: 4,
+        background: "transparent",
+        border: "none",
+        color: "#4b5563",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "color 120ms",
+      }}
+      onMouseEnter={(e) => (e.currentTarget.style.color = hoverColor)}
+      onMouseLeave={(e) => (e.currentTarget.style.color = "#4b5563")}
+    >
+      {children}
+    </button>
+  );
+}