@hfunlabs/hypurr-connect 0.1.12 → 0.1.13

package/src/icons/lucide.tsx

@@ -0,0 +1,197 @@
+import type { CSSProperties, SVGProps } from "react";
+
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, "fill"> {
+  size?: number;
+  color?: string;
+  fill?: string;
+  style?: CSSProperties;
+}
+
+function svgBase({
+  size = 16,
+  color = "currentColor",
+  fill = "none",
+  ...rest
+}: IconProps) {
+  return {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill,
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+    ...rest,
+  };
+}
+
+export function Copy(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}
+
+export function Star(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+    </svg>
+  );
+}
+
+export function User(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </svg>
+  );
+}
+
+export function Zap(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+    </svg>
+  );
+}
+
+export function Wallet(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4" />
+      <path d="M4 6v12c0 1.1.9 2 2 2h14v-4" />
+      <path d="M18 12a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4v-4z" />
+    </svg>
+  );
+}
+
+export function TrendingUp(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+      <polyline points="16 7 22 7 22 13" />
+    </svg>
+  );
+}
+
+export function Trash2(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M3 6h18" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+      <line x1="10" x2="10" y1="11" y2="17" />
+      <line x1="14" x2="14" y1="11" y2="17" />
+    </svg>
+  );
+}
+
+export function Pencil(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+      <path d="m15 5 4 4" />
+    </svg>
+  );
+}
+
+export function LayoutDashboard(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <rect width="7" height="9" x="3" y="3" rx="1" />
+      <rect width="7" height="5" x="14" y="3" rx="1" />
+      <rect width="7" height="9" x="14" y="12" rx="1" />
+      <rect width="7" height="5" x="3" y="16" rx="1" />
+    </svg>
+  );
+}
+
+export function AlertTriangle(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+      <line x1="12" x2="12" y1="9" y2="13" />
+      <line x1="12" x2="12.01" y1="17" y2="17" />
+    </svg>
+  );
+}
+
+export function Loader2(props: IconProps) {
+  const { size = 16, color = "currentColor", style, ...rest } = props;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        animation: "hypurr-spin 1s linear infinite",
+        ...style,
+      }}
+      {...rest}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+export function Crown(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" />
+      <path d="M5 21h14" />
+    </svg>
+  );
+}
+
+export function Folder(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+    </svg>
+  );
+}
+
+export function LogOut(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" x2="9" y1="12" y2="12" />
+    </svg>
+  );
+}
+
+export function Plus(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
+    </svg>
+  );
+}
+
+export function X(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+/** Inject the keyframes used by {@link Loader2}. Mount once at the top of any modal that spins. */
+export function SpinKeyframes() {
+  return (
+    <style>{`@keyframes hypurr-spin { to { transform: rotate(360deg); } }`}</style>
+  );
+}

package/src/index.ts

@@ -4,6 +4,15 @@ export {
 } from "./HypurrConnectProvider";
 export { LoginModal } from "./LoginModal";
 export type { LoginModalProps } from "./LoginModal";
+export { WalletSelectorDropdown } from "./WalletSelectorDropdown";
+export type { WalletSelectorDropdownProps } from "./WalletSelectorDropdown";
+export { UserProfileModal } from "./UserProfileModal";
+export type { UserProfileModalProps, SlippageOption } from "./UserProfileModal";
+export { DeleteWalletModal } from "./DeleteWalletModal";
+export type { DeleteWalletModalProps } from "./DeleteWalletModal";
+export { RenameWalletModal } from "./RenameWalletModal";
+export type { RenameWalletModalProps } from "./RenameWalletModal";
+export type { PrincipalColors, PrincipalColorOverrides } from "./profileStyles";
 export { GrpcExchangeTransport } from "./GrpcExchangeTransport";
 export type { GrpcExchangeTransportConfig } from "./GrpcExchangeTransport";
 export { createTelegramClient, createStaticClient } from "./grpc";

package/src/profileStyles.ts

@@ -0,0 +1,213 @@
+import type { CSSProperties } from "react";
+
+export const profileColors = {
+  accent: "#a855f7",
+  panel: "rgba(14,18,24,0.8)",
+  panelSolid: "#0e1218",
+  backdrop: "rgba(0,0,0,0.7)",
+  border: "#1f2937",
+  surfaceBtn: "#0D1219",
+  surfaceBtnHover: "#15171A",
+  surfaceBtnActive: "#1E2124",
+  surfaceBd: "#262A30",
+  surfaceBdHover: "#444548",
+  surfaceBdActive: "#4B4D50",
+  text: "#ffffff",
+  muted: "#aab1c1",
+  subdued: "#7d8597",
+  disabled: "#4b5563",
+  danger: "#f87171",
+  dangerStrong: "#ef4444",
+  purple: "#d8b4fe",
+  yellow: "#eab308",
+};
+
+export const fontFamily = {
+  sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
+  mono: "Google Sans Code, Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+};
+
+export interface PrincipalColors {
+  accent: string;
+  accentText: string;
+  accentBackground: string;
+  accentBorder: string;
+  accentHoverBackground: string;
+}
+
+export type PrincipalColorOverrides = Partial<PrincipalColors>;
+
+const colorWithAlpha = (color: string, alpha: number): string => {
+  const hex = color.trim();
+  const shortHex = /^#([0-9a-f]{3})$/i.exec(hex);
+  const longHex = /^#([0-9a-f]{6})$/i.exec(hex);
+
+  if (shortHex) {
+    const [r, g, b] = shortHex[1].split("").map((value) => value + value);
+    return `rgba(${parseInt(r, 16)},${parseInt(g, 16)},${parseInt(b, 16)},${alpha})`;
+  }
+
+  if (longHex) {
+    const value = longHex[1];
+    return `rgba(${parseInt(value.slice(0, 2), 16)},${parseInt(
+      value.slice(2, 4),
+      16,
+    )},${parseInt(value.slice(4, 6), 16)},${alpha})`;
+  }
+
+  return `color-mix(in srgb, ${color} ${Math.round(alpha * 100)}%, transparent)`;
+};
+
+export const resolvePrincipalColors = (
+  accentColor?: string,
+  overrides: PrincipalColorOverrides = {},
+): PrincipalColors => {
+  const hasCustomAccent = !!accentColor || !!overrides.accent;
+  const accent = overrides.accent ?? accentColor ?? profileColors.accent;
+  const accentText =
+    overrides.accentText ?? (hasCustomAccent ? accent : profileColors.purple);
+
+  return {
+    accent,
+    accentText,
+    accentBackground: overrides.accentBackground ?? colorWithAlpha(accent, 0.1),
+    accentBorder: overrides.accentBorder ?? colorWithAlpha(accent, 0.25),
+    accentHoverBackground:
+      overrides.accentHoverBackground ?? colorWithAlpha(accent, 0.1),
+  };
+};
+
+export const modalBackdropStyle = (zIndex: number): CSSProperties => ({
+  position: "fixed",
+  inset: 0,
+  zIndex,
+  background: profileColors.backdrop,
+  backdropFilter: "blur(4px)",
+  WebkitBackdropFilter: "blur(4px)",
+});
+
+export const modalWrapperStyle = (
+  zIndex: number,
+  padding = 0,
+): CSSProperties => ({
+  position: "fixed",
+  inset: 0,
+  zIndex,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding,
+});
+
+export const modalPanelStyle = (solid = false): CSSProperties => ({
+  position: "relative",
+  width: "100%",
+  maxWidth: 448,
+  background: solid ? profileColors.panelSolid : profileColors.panel,
+  backdropFilter: solid ? undefined : "blur(10px)",
+  WebkitBackdropFilter: solid ? undefined : "blur(10px)",
+  border: `1px solid ${profileColors.border}`,
+  borderRadius: 8,
+  boxShadow: "0 25px 50px -12px rgba(0,0,0,0.6)",
+  overflow: "hidden",
+  fontFamily: fontFamily.sans,
+});
+
+export const modalHeaderStyle: CSSProperties = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "24px 24px 20px",
+  borderBottom: `1px solid ${profileColors.border}`,
+};
+
+export const titleStyle: CSSProperties = {
+  margin: 0,
+  fontSize: 14,
+  lineHeight: "1.25rem",
+  fontWeight: 600,
+  color: profileColors.text,
+};
+
+export const closeBtnStyle = (disabled = false): CSSProperties => ({
+  position: "absolute",
+  right: 24,
+  background: "transparent",
+  border: "none",
+  color: profileColors.muted,
+  cursor: disabled ? "not-allowed" : "pointer",
+  padding: 0,
+  display: "flex",
+  opacity: disabled ? 0.4 : 1,
+  transition: "color 150ms",
+});
+
+export const upperLabelStyle: CSSProperties = {
+  fontSize: 11,
+  lineHeight: "1rem",
+  fontWeight: 500,
+  textTransform: "uppercase",
+  letterSpacing: "0.1em",
+};
+
+export const raisedButtonStyle = (
+  state: "default" | "hover" | "active" | "disabled" = "default",
+): CSSProperties => {
+  if (state === "active") {
+    return {
+      backgroundColor: profileColors.surfaceBtnActive,
+      backgroundImage:
+        "linear-gradient(to bottom, rgba(255,255,255,0.05), transparent)",
+      boxShadow:
+        "inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.45), inset 0 0 0 1px #4B4D50, 0 1px 2px rgba(0,0,0,0.5)",
+      color: profileColors.text,
+      border: "none",
+    };
+  }
+
+  if (state === "disabled") {
+    return {
+      backgroundColor: profileColors.surfaceBtn,
+      backgroundImage:
+        "linear-gradient(to bottom, rgba(255,255,255,0.02), transparent)",
+      boxShadow:
+        "inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 0 1px #1c2026",
+      color: profileColors.subdued,
+      border: "none",
+      cursor: "not-allowed",
+    };
+  }
+
+  if (state === "hover") {
+    return {
+      backgroundColor: profileColors.surfaceBtnHover,
+      backgroundImage:
+        "linear-gradient(to bottom, rgba(255,255,255,0.04), transparent)",
+      boxShadow:
+        "inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.40), inset 0 0 0 1px #444548",
+      color: "#d1d5db",
+      border: "none",
+    };
+  }
+
+  return {
+    backgroundColor: profileColors.surfaceBtn,
+    backgroundImage:
+      "linear-gradient(to bottom, rgba(255,255,255,0.03), transparent)",
+    boxShadow:
+      "inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.35), inset 0 0 0 1px #262A30",
+    color: profileColors.muted,
+    border: "none",
+  };
+};
+
+export const dangerOutlineButtonStyle = (
+  enabled: boolean,
+  hovered = false,
+): CSSProperties => ({
+  background: enabled && hovered ? "rgba(248,113,113,0.1)" : "transparent",
+  border: `1px solid ${enabled ? profileColors.danger : "#374151"}`,
+  color: enabled ? profileColors.danger : profileColors.disabled,
+  cursor: enabled ? "pointer" : "not-allowed",
+});

package/src/types.ts

@@ -25,19 +25,15 @@ export interface HypurrConnectConfig {
   isTestnet?: boolean;
   /** Polling interval in ms for TWAP/Scale session updates. Default 5000. Set 0 to disable. */
   sessionPollInterval?: number;
-  telegram: {
-    /** Deprecated for the hub flow; retained for older consumers. */
-    botUsername?: string;
-    /** Deprecated for the hub flow; retained for older consumers. */
-    botId?: string;
-    /** Deprecated: Telegram login is now handled by the auth hub. */
-    useWidget?: boolean;
+  telegram?: {
     /** Auth hub login URL. Defaults to https://auth.hypurr.fun/login. */
     authHubUrl?: string;
     /** Optional callback URL. Defaults to the current page without auth query params. */
     returnTo?: string | (() => string);
     /** Requested hub scopes. Defaults to the scopes required by this SDK. */
     scope?: string | string[];
+    /** @deprecated Telegram login is handled by the auth hub; this option is ignored. */
+    useWidget?: boolean;
   };
 }
 
@@ -217,6 +213,7 @@ export interface HypurrConnectState {
   // Wallet management (Telegram only)
   createWallet: (name: string) => Promise<HyperliquidWallet>;
   deleteWallet: (walletId: number) => Promise<void>;
+  renameWallet: (walletId: number, name: string) => Promise<void>;
   refreshWallets: () => void;
 
   // Wallet packs & labels (Telegram only)
@@ -271,9 +268,6 @@ export interface HypurrConnectState {
   agentReady: boolean;
   clearAgent: () => void;
 
-  // Telegram config
-  botId: string;
-
   // Low-level access
   /** Deprecated: JWT auth leaves authData empty; use `telegramRpcOptions` for low-level calls. */
   authDataMap: Record<string, string>;

package/src/TelegramLoginWidget.tsx

@@ -1,62 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { TelegramLoginData } from "./types";
-
-const WIDGET_SCRIPT_URL = "https://telegram.org/js/telegram-widget.js?22";
-const CALLBACK_NAME = "__hypurrConnectTelegramAuth";
-
-export interface TelegramLoginWidgetProps {
-  botUsername: string;
-  onAuth: (data: TelegramLoginData) => void;
-  buttonSize?: "large" | "medium" | "small";
-  cornerRadius?: number;
-  showUserPhoto?: boolean;
-  requestAccess?: boolean;
-}
-
-export function TelegramLoginWidget({
-  botUsername,
-  onAuth,
-  buttonSize = "large",
-  cornerRadius,
-  showUserPhoto = true,
-  requestAccess = true,
-}: TelegramLoginWidgetProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const onAuthRef = useRef(onAuth);
-  onAuthRef.current = onAuth;
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    (window as unknown as Record<string, unknown>)[CALLBACK_NAME] = (
-      user: TelegramLoginData,
-    ) => {
-      onAuthRef.current(user);
-    };
-
-    const script = document.createElement("script");
-    script.src = WIDGET_SCRIPT_URL;
-    script.async = true;
-    script.setAttribute("data-telegram-login", botUsername);
-    script.setAttribute("data-size", buttonSize);
-    script.setAttribute("data-onauth", `${CALLBACK_NAME}(user)`);
-    script.setAttribute("data-userpic", String(showUserPhoto));
-    if (requestAccess) {
-      script.setAttribute("data-request-access", "write");
-    }
-    if (cornerRadius !== undefined) {
-      script.setAttribute("data-radius", String(cornerRadius));
-    }
-
-    container.innerHTML = "";
-    container.appendChild(script);
-
-    return () => {
-      container.innerHTML = "";
-      delete (window as unknown as Record<string, unknown>)[CALLBACK_NAME];
-    };
-  }, [botUsername, buttonSize, cornerRadius, showUserPhoto, requestAccess]);
-
-  return <div ref={containerRef} />;
-}