@hfunlabs/hypurr-connect 0.1.11 → 0.1.13

package/src/UserProfileModal.tsx

@@ -0,0 +1,982 @@
+import { AnimatePresence, motion } from "framer-motion";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+import {
+  useCallback,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import { DeleteWalletModal } from "./DeleteWalletModal";
+import { useHypurrConnectInternal } from "./HypurrConnectProvider";
+import { RenameWalletModal } from "./RenameWalletModal";
+import {
+  Copy,
+  LayoutDashboard,
+  Pencil,
+  SpinKeyframes,
+  Star,
+  Trash2,
+  TrendingUp,
+  User,
+  Wallet,
+  X,
+  Zap,
+} from "./icons/lucide";
+import {
+  closeBtnStyle as makeCloseBtnStyle,
+  fontFamily,
+  modalBackdropStyle,
+  modalHeaderStyle,
+  modalPanelStyle,
+  modalWrapperStyle,
+  type PrincipalColorOverrides,
+  type PrincipalColors,
+  profileColors,
+  raisedButtonStyle,
+  resolvePrincipalColors,
+  titleStyle,
+  upperLabelStyle,
+} from "./profileStyles";
+
+type SettingsTab = "ui" | "trading" | "wallets";
+
+export interface SlippageOption {
+  label: string;
+  value: number;
+}
+
+const DEFAULT_SLIPPAGE_OPTIONS: SlippageOption[] = [
+  { label: "0.5%", value: 0.005 },
+  { label: "1%", value: 0.01 },
+  { label: "2%", value: 0.02 },
+  { label: "5%", value: 0.05 },
+  { label: "10%", value: 0.1 },
+];
+
+export interface UserProfileModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** 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. Use this for extra
+   * side effects on the host (e.g. invalidating React Query caches).
+   */
+  onWalletDeleted?: (walletId: number) => void;
+  /**
+   * Fired after the SDK successfully renames a wallet. Use this for extra
+   * side effects on the host (e.g. invalidating React Query caches).
+   */
+  onWalletRenamed?: (walletId: number, name: string) => void;
+  /**
+   * If provided, each wallet row in the Wallets tab gets a "View portfolio"
+   * button that fires this callback. The host is expected to open its own
+   * portfolio UI in response.
+   */
+  onShowPortfolio?: (wallet: HyperliquidWallet) => void;
+  /** Optional toast callback. SDK fires success on rename/delete; errors stay inline in sub-modals. */
+  onNotify?: (n: { type: "success" | "error"; message: string }) => void;
+  /** Shorthand for `principalColors.accent`. Defaults to `#a855f7`. */
+  accentColor?: string;
+  /** Principal accent colors used for switches, action text, and wallet icon surfaces. */
+  principalColors?: PrincipalColorOverrides;
+}
+
+const backdropStyle = modalBackdropStyle(100);
+const wrapperStyle = modalWrapperStyle(101);
+const panelStyle = modalPanelStyle(false);
+const headerStyle = modalHeaderStyle;
+
+const profileSectionStyle: CSSProperties = {
+  padding: "20px 24px",
+  borderBottom: `1px solid ${profileColors.border}`,
+};
+
+const settingsSectionStyle: CSSProperties = {
+  padding: "20px 24px",
+};
+
+const tabRowStyle: CSSProperties = {
+  display: "flex",
+  gap: 6,
+  marginBottom: 20,
+};
+
+const tabButtonLayoutStyle: CSSProperties = {
+  flex: 1,
+  padding: "6px 0",
+  borderRadius: 4,
+  fontSize: 12.5,
+  lineHeight: "1rem",
+  fontWeight: 500,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  cursor: "pointer",
+  transition: "background-color 150ms, color 150ms, box-shadow 150ms",
+};
+
+const statBoxStyle: CSSProperties = {
+  background: "rgba(255,255,255,0.03)",
+  borderRadius: 8,
+  padding: 12,
+  border: `1px solid ${profileColors.border}`,
+};
+
+const slippageBtnBaseStyle: CSSProperties = {
+  flex: 1,
+  padding: "4px 0",
+  borderRadius: 4,
+  fontSize: 12.5,
+  lineHeight: "1rem",
+  fontFamily: fontFamily.mono,
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "background-color 150ms, color 150ms, border-color 150ms",
+};
+
+const walletRowStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "10px 12px",
+  borderRadius: 8,
+  background: profileColors.surfaceBtn,
+  border: `1px solid ${profileColors.surfaceBd}`,
+  transition: "background-color 150ms, border-color 150ms",
+};
+
+function ToggleSwitch({
+  checked,
+  onChange,
+  accentColor,
+}: {
+  checked: boolean;
+  onChange: () => void;
+  accentColor: string;
+}) {
+  return (
+    <button
+      onClick={onChange}
+      role="switch"
+      aria-checked={checked}
+      style={{
+        position: "relative",
+        display: "inline-flex",
+        height: 20,
+        width: 36,
+        alignItems: "center",
+        borderRadius: 9999,
+        border: "none",
+        background: checked ? accentColor : "rgba(255,255,255,0.08)",
+        cursor: "pointer",
+        padding: 0,
+        transition: "background 150ms",
+      }}
+    >
+      <span
+        style={{
+          display: "inline-block",
+          height: 12,
+          width: 12,
+          borderRadius: "50%",
+          background: profileColors.text,
+          transform: checked ? "translateX(20px)" : "translateX(4px)",
+          transition: "transform 150ms",
+        }}
+      />
+    </button>
+  );
+}
+
+function RaisedButton({
+  selected = false,
+  onClick,
+  children,
+  style,
+}: {
+  selected?: boolean;
+  onClick: () => void;
+  children: ReactNode;
+  style?: CSSProperties;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        ...tabButtonLayoutStyle,
+        ...raisedButtonStyle(
+          selected ? "active" : hovered ? "hover" : "default",
+        ),
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SlippageButton({
+  selected,
+  onClick,
+  children,
+}: {
+  selected: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        ...slippageBtnBaseStyle,
+        background: selected
+          ? profileColors.surfaceBtnActive
+          : hovered
+            ? profileColors.surfaceBtnHover
+            : profileColors.surfaceBtn,
+        border: `1px solid ${
+          selected
+            ? profileColors.surfaceBdActive
+            : hovered
+              ? profileColors.surfaceBdHover
+              : profileColors.surfaceBd
+        }`,
+        color: selected
+          ? profileColors.text
+          : hovered
+            ? "#d1d5db"
+            : profileColors.muted,
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function UserProfileModal({
+  isOpen,
+  onClose,
+  animationsEnabled,
+  onToggleAnimations,
+  defaultSlippage,
+  onSlippageChange,
+  slippageOptions = DEFAULT_SLIPPAGE_OPTIONS,
+  onWalletDeleted,
+  onWalletRenamed,
+  onShowPortfolio,
+  onNotify,
+  accentColor,
+  principalColors,
+}: UserProfileModalProps): ReactNode {
+  const {
+    user,
+    wallets: userWallets,
+    deleteWallet,
+    renameWallet,
+    authMethod,
+  } = useHypurrConnectInternal();
+
+  const [settingsTab, setSettingsTab] = useState<SettingsTab>("ui");
+  const [walletToDelete, setWalletToDelete] =
+    useState<HyperliquidWallet | null>(null);
+  const [walletToRename, setWalletToRename] =
+    useState<HyperliquidWallet | null>(null);
+
+  const profilePic = user?.photoUrl || "";
+  const displayName = user?.displayName || "";
+  const hfunScore = user?.hfunScore ?? null;
+  const reputationScore = user?.reputationScore ?? null;
+  const telegramId = user?.telegramId;
+  const wallets = userWallets ?? [];
+  const colors = resolvePrincipalColors(accentColor, principalColors);
+
+  const handleDeleteWallet = useCallback(
+    async (walletId: number) => {
+      await deleteWallet(walletId);
+      onWalletDeleted?.(walletId);
+    },
+    [deleteWallet, onWalletDeleted],
+  );
+
+  const handleRenameWallet = useCallback(
+    async (walletId: number, name: string) => {
+      await renameWallet(walletId, name);
+      onWalletRenamed?.(walletId, name);
+    },
+    [renameWallet, onWalletRenamed],
+  );
+
+  const handleCopyAddress = useCallback(() => {
+    if (!displayName) return;
+    navigator.clipboard.writeText(displayName);
+    onNotify?.({ type: "success", message: "Address copied" });
+  }, [displayName, onNotify]);
+
+  return (
+    <>
+      <AnimatePresence>
+        {isOpen && (
+          <>
+            <SpinKeyframes />
+            <motion.div
+              key="backdrop"
+              style={backdropStyle}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              onClick={onClose}
+            />
+            <div style={wrapperStyle} onClick={onClose}>
+              <motion.div
+                key="panel"
+                style={panelStyle}
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 8 }}
+                transition={{ duration: 0.18, ease: "easeOut" }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                {/* Header */}
+                <div style={headerStyle}>
+                  <h3 style={titleStyle}>Profile & Settings</h3>
+                  <button
+                    onClick={onClose}
+                    style={makeCloseBtnStyle()}
+                    aria-label="Close"
+                  >
+                    <X size={16} />
+                  </button>
+                </div>
+
+                {/* Profile Section */}
+                <div style={profileSectionStyle}>
+                  {authMethod === "eoa" && !profilePic ? (
+                    <div
+                      style={{
+                        padding: "10px 12px",
+                        background: "rgba(255,255,255,0.03)",
+                        border: `1px solid ${profileColors.border}`,
+                        borderRadius: 8,
+                      }}
+                    >
+                      <p
+                        style={{
+                          margin: "0 0 6px",
+                          color: profileColors.muted,
+                          ...upperLabelStyle,
+                        }}
+                      >
+                        Wallet
+                      </p>
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          gap: 8,
+                        }}
+                      >
+                        <p
+                          style={{
+                            margin: 0,
+                            fontSize: 12.5,
+                            lineHeight: "1rem",
+                            color: profileColors.text,
+                            fontFamily: fontFamily.mono,
+                            wordBreak: "break-all",
+                          }}
+                        >
+                          {displayName}
+                        </p>
+                        <button
+                          onClick={handleCopyAddress}
+                          style={{
+                            background: "transparent",
+                            border: "none",
+                            color: profileColors.muted,
+                            cursor: "pointer",
+                            flexShrink: 0,
+                            display: "flex",
+                          }}
+                          aria-label="Copy address"
+                        >
+                          <Copy size={13} />
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 16,
+                      }}
+                    >
+                      {profilePic ? (
+                        <img
+                          src={profilePic}
+                          alt="Profile"
+                          style={{
+                            height: 56,
+                            width: 56,
+                            borderRadius: "50%",
+                            border: `1px solid ${profileColors.surfaceBd}`,
+                          }}
+                        />
+                      ) : (
+                        <div
+                          style={{
+                            height: 56,
+                            width: 56,
+                            borderRadius: "50%",
+                            border: `1px solid ${profileColors.surfaceBd}`,
+                            background: profileColors.surfaceBd,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: 18,
+                            lineHeight: "1.75rem",
+                            fontWeight: 700,
+                            color: profileColors.text,
+                          }}
+                        >
+                          {displayName?.charAt(0)}
+                        </div>
+                      )}
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <h4
+                          style={{
+                            margin: 0,
+                            fontSize: 14,
+                            lineHeight: "1.25rem",
+                            fontWeight: 600,
+                            color: profileColors.text,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                          }}
+                        >
+                          {displayName}
+                        </h4>
+                        {telegramId && (
+                          <p
+                            style={{
+                              margin: "2px 0 0",
+                              fontSize: 12.5,
+                              lineHeight: "1rem",
+                              color: profileColors.muted,
+                            }}
+                          >
+                            ID: {telegramId}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {user && (
+                    <div
+                      style={{
+                        marginTop: 16,
+                        display: "grid",
+                        gridTemplateColumns: "1fr 1fr",
+                        gap: 10,
+                      }}
+                    >
+                      <div style={statBoxStyle}>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6,
+                            color: "#eab308",
+                            marginBottom: 6,
+                          }}
+                        >
+                          <Star size={13} color="#eab308" fill="#eab308" />
+                          <span style={upperLabelStyle}>Hfun Score</span>
+                        </div>
+                        <p
+                          style={{
+                            margin: 0,
+                            fontSize: 18,
+                            lineHeight: "1.75rem",
+                            fontWeight: 700,
+                            color: profileColors.text,
+                            fontFamily: fontFamily.mono,
+                          }}
+                        >
+                          {hfunScore !== null ? hfunScore.toFixed(0) : "--"}
+                        </p>
+                      </div>
+                      <div style={statBoxStyle}>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6,
+                            color: profileColors.muted,
+                            marginBottom: 6,
+                          }}
+                        >
+                          <User size={13} />
+                          <span style={upperLabelStyle}>Reputation</span>
+                        </div>
+                        <p
+                          style={{
+                            margin: 0,
+                            fontSize: 18,
+                            lineHeight: "1.75rem",
+                            fontWeight: 700,
+                            color: profileColors.text,
+                            fontFamily: fontFamily.mono,
+                          }}
+                        >
+                          {reputationScore !== null
+                            ? reputationScore.toFixed(0)
+                            : "--"}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Settings Section */}
+                <div style={settingsSectionStyle}>
+                  <div style={tabRowStyle}>
+                    <RaisedButton
+                      selected={settingsTab === "ui"}
+                      onClick={() => setSettingsTab("ui")}
+                    >
+                      <Zap size={13} /> UI
+                    </RaisedButton>
+                    <RaisedButton
+                      selected={settingsTab === "trading"}
+                      onClick={() => setSettingsTab("trading")}
+                    >
+                      <TrendingUp size={13} /> Trading
+                    </RaisedButton>
+                    <RaisedButton
+                      selected={settingsTab === "wallets"}
+                      onClick={() => setSettingsTab("wallets")}
+                    >
+                      <Wallet size={13} /> Wallets
+                    </RaisedButton>
+                  </div>
+
+                  {settingsTab === "ui" && (
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 12,
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          padding: "8px 0",
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 12,
+                          }}
+                        >
+                          <Zap size={16} color={profileColors.muted} />
+                          <div>
+                            <p
+                              style={{
+                                margin: 0,
+                                fontSize: 12.5,
+                                lineHeight: "1rem",
+                                fontWeight: 500,
+                                color: profileColors.text,
+                              }}
+                            >
+                              Animations
+                            </p>
+                            <p
+                              style={{
+                                margin: 0,
+                                fontSize: 12.5,
+                                lineHeight: "1rem",
+                                color: profileColors.muted,
+                              }}
+                            >
+                              Enable chart and UI animations
+                            </p>
+                          </div>
+                        </div>
+                        <ToggleSwitch
+                          checked={animationsEnabled}
+                          onChange={onToggleAnimations}
+                          accentColor={colors.accent}
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  {settingsTab === "trading" && (
+                    <div style={{ padding: "8px 0" }}>
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 12,
+                          marginBottom: 12,
+                        }}
+                      >
+                        <TrendingUp size={16} color={profileColors.muted} />
+                        <div>
+                          <p
+                            style={{
+                              margin: 0,
+                              fontSize: 12.5,
+                              lineHeight: "1rem",
+                              fontWeight: 500,
+                              color: profileColors.text,
+                            }}
+                          >
+                            Default Slippage
+                          </p>
+                          <p
+                            style={{
+                              margin: 0,
+                              fontSize: 12.5,
+                              lineHeight: "1rem",
+                              color: profileColors.muted,
+                            }}
+                          >
+                            Max price deviation for market orders
+                          </p>
+                        </div>
+                      </div>
+                      <div style={{ display: "flex", gap: 6 }}>
+                        {slippageOptions.map((option) => (
+                          <SlippageButton
+                            key={option.value}
+                            onClick={() => onSlippageChange(option.value)}
+                            selected={defaultSlippage === option.value}
+                          >
+                            {option.label}
+                          </SlippageButton>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {settingsTab === "wallets" && (
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 8,
+                      }}
+                    >
+                      {wallets.length === 0 ? (
+                        <div
+                          style={{
+                            textAlign: "center",
+                            padding: "32px 0",
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: 40,
+                              height: 40,
+                              borderRadius: "50%",
+                              background: "rgba(255,255,255,0.04)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              margin: "0 auto 12px",
+                            }}
+                          >
+                            <Wallet size={18} color={profileColors.muted} />
+                          </div>
+                          <p
+                            style={{
+                              margin: 0,
+                              fontSize: 12.5,
+                              lineHeight: "1rem",
+                              color: profileColors.muted,
+                            }}
+                          >
+                            No wallets yet
+                          </p>
+                        </div>
+                      ) : (
+                        <div
+                          style={{
+                            maxHeight: 208,
+                            overflowY: "auto",
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 6,
+                          }}
+                        >
+                          {wallets.map((wallet) => (
+                            <WalletRow
+                              key={wallet.id}
+                              wallet={wallet}
+                              colors={colors}
+                              onRename={() => setWalletToRename(wallet)}
+                              onDelete={() => setWalletToDelete(wallet)}
+                              onShowPortfolio={
+                                onShowPortfolio
+                                  ? () => onShowPortfolio(wallet)
+                                  : undefined
+                              }
+                            />
+                          ))}
+                        </div>
+                      )}
+                      <p
+                        style={{
+                          margin: "4px 0 0",
+                          fontSize: 12.5,
+                          lineHeight: "1rem",
+                          color: profileColors.subdued,
+                          textAlign: "center",
+                        }}
+                      >
+                        {wallets.length} wallet
+                        {wallets.length !== 1 ? "s" : ""} linked
+                      </p>
+                    </div>
+                  )}
+                </div>
+
+                {/* Footer */}
+                <div style={{ padding: "0 24px 24px" }}>
+                  <button
+                    onClick={onClose}
+                    style={{
+                      ...raisedButtonStyle("default"),
+                      width: "100%",
+                      padding: "6px 0",
+                      fontSize: 12.5,
+                      lineHeight: "1rem",
+                      fontWeight: 500,
+                      borderRadius: 8,
+                      cursor: "pointer",
+                    }}
+                  >
+                    Close
+                  </button>
+                </div>
+              </motion.div>
+            </div>
+          </>
+        )}
+      </AnimatePresence>
+
+      <DeleteWalletModal
+        isOpen={!!walletToDelete}
+        onClose={() => setWalletToDelete(null)}
+        wallet={walletToDelete}
+        onConfirm={handleDeleteWallet}
+        onNotify={onNotify}
+      />
+      <RenameWalletModal
+        isOpen={!!walletToRename}
+        onClose={() => setWalletToRename(null)}
+        wallet={walletToRename}
+        onConfirm={handleRenameWallet}
+        onNotify={onNotify}
+        accentColor={colors.accent}
+      />
+    </>
+  );
+}
+
+function WalletRow({
+  wallet,
+  colors,
+  onRename,
+  onDelete,
+  onShowPortfolio,
+}: {
+  wallet: HyperliquidWallet;
+  colors: PrincipalColors;
+  onRename: () => void;
+  onDelete: () => void;
+  onShowPortfolio?: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <div
+      style={{
+        ...walletRowStyle,
+        background: hovered
+          ? profileColors.surfaceBtnHover
+          : profileColors.surfaceBtn,
+        borderColor: hovered
+          ? profileColors.surfaceBdHover
+          : profileColors.surfaceBd,
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div
+        style={{
+          width: 32,
+          height: 32,
+          borderRadius: 6,
+          background: colors.accentBackground,
+          border: `1px solid ${colors.accentBorder}`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        <span
+          style={{
+            fontSize: 12.5,
+            lineHeight: "1rem",
+            fontWeight: 600,
+            color: colors.accentText,
+          }}
+        >
+          {(wallet.name || "W")[0].toUpperCase()}
+        </span>
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <p
+          style={{
+            margin: 0,
+            fontSize: 12.5,
+            lineHeight: "1rem",
+            fontWeight: 500,
+            color: profileColors.text,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {wallet.name || "Unnamed"}
+        </p>
+        <p
+          style={{
+            margin: 0,
+            fontSize: 12.5,
+            lineHeight: "1rem",
+            color: profileColors.muted,
+            fontFamily: fontFamily.mono,
+          }}
+        >
+          {wallet.ethereumAddress?.slice(0, 6)}...
+          {wallet.ethereumAddress?.slice(-4)}
+        </p>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          flexShrink: 0,
+          opacity: hovered ? 1 : 0,
+          transition: "opacity 120ms",
+        }}
+      >
+        {onShowPortfolio && (
+          <IconBtn
+            color={colors.accent}
+            hoverBackgroundColor={colors.accentHoverBackground}
+            title="View portfolio"
+            ariaLabel={`View portfolio for ${wallet.name || "wallet"}`}
+            onClick={onShowPortfolio}
+          >
+            <LayoutDashboard size={13} />
+          </IconBtn>
+        )}
+        <IconBtn
+          color={colors.accent}
+          hoverBackgroundColor={colors.accentHoverBackground}
+          title="Rename wallet"
+          ariaLabel={`Rename ${wallet.name || "wallet"}`}
+          onClick={onRename}
+        >
+          <Pencil size={13} />
+        </IconBtn>
+        <IconBtn
+          color="#ef4444"
+          hoverBackgroundColor="rgba(239,68,68,0.1)"
+          title="Delete wallet"
+          ariaLabel={`Delete ${wallet.name || "wallet"}`}
+          onClick={onDelete}
+        >
+          <Trash2 size={13} />
+        </IconBtn>
+      </div>
+    </div>
+  );
+}
+
+function IconBtn({
+  children,
+  color,
+  hoverBackgroundColor,
+  title,
+  ariaLabel,
+  onClick,
+}: {
+  children: ReactNode;
+  color: string;
+  hoverBackgroundColor?: string;
+  title: string;
+  ariaLabel: string;
+  onClick: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <button
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+      style={{
+        padding: 6,
+        borderRadius: 4,
+        background: hovered
+          ? (hoverBackgroundColor ?? "transparent")
+          : "transparent",
+        border: "none",
+        color: hovered ? color : profileColors.disabled,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "color 120ms, background 120ms",
+      }}
+    >
+      {children}
+    </button>
+  );
+}