@hfunlabs/hypurr-connect 0.1.0 → 0.1.2

package/src/LoginModal.tsx

@@ -8,9 +8,10 @@ import {
   useCallback,
   useEffect,
   useSyncExternalStore,
+  type CSSProperties,
   type ReactNode,
 } from "react";
-import { useHypurrConnect } from "./HypurrConnectProvider";
+import { useHypurrConnectInternal } from "./HypurrConnectProvider";
 import { MetaMaskColorIcon } from "./icons/MetaMaskColorIcon";
 import { TelegramColorIcon } from "./icons/TelegramColorIcon";
 import type { TelegramLoginData } from "./types";
@@ -22,8 +23,74 @@ export interface LoginModalProps {
 
 const MOBILE_BREAKPOINT = 640;
 
-const btnClass =
-  "flex h-[53px] w-full items-center gap-3 overflow-hidden rounded bg-white/5 px-6 text-sm font-semibold tracking-tight text-white cursor-pointer transition-colors duration-150 hover:bg-white/10";
+const btnStyle: CSSProperties = {
+  display: "flex",
+  height: 53,
+  width: "100%",
+  alignItems: "center",
+  gap: 12,
+  overflow: "hidden",
+  borderRadius: 6,
+  background: "rgba(255,255,255,0.05)",
+  padding: "0 24px",
+  fontSize: 14,
+  fontWeight: 600,
+  letterSpacing: "-0.01em",
+  color: "#fff",
+  cursor: "pointer",
+  border: "none",
+  transition: "background 150ms",
+};
+
+const btnHoverBg = { background: "rgba(255,255,255,0.1)" };
+
+const backdropStyle: CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 100,
+  background: "rgba(0,0,0,0.6)",
+  backdropFilter: "blur(2px)",
+  WebkitBackdropFilter: "blur(2px)",
+};
+
+const modalWrapperStyle: CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 101,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 16,
+};
+
+const modalBoxStyle: CSSProperties = {
+  display: "flex",
+  width: 400,
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 16,
+  overflow: "hidden",
+  borderRadius: 12,
+  border: "1px solid rgba(255,255,255,0.1)",
+  background: "#282828",
+  padding: 24,
+};
+
+const headingStyle: CSSProperties = {
+  fontSize: 16,
+  fontWeight: 700,
+  letterSpacing: "-0.025em",
+  color: "#fff",
+  margin: 0,
+};
+
+const dividerStyle: CSSProperties = {
+  height: 1,
+  width: "100%",
+  background: "rgba(255,255,255,0.05)",
+};
+
+const iconSize: CSSProperties = { width: 20, height: 20 };
 
 const mobileQuery =
   typeof window !== "undefined"
@@ -43,9 +110,28 @@ function useIsMobile() {
   return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
 }
 
+function HoverButton({
+  onClick,
+  children,
+}: {
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <motion.button
+      type="button"
+      onClick={onClick}
+      style={btnStyle}
+      whileHover={btnHoverBg}
+    >
+      {children}
+    </motion.button>
+  );
+}
+
 export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
   const { loginTelegram, loginModalOpen, closeLoginModal, botId } =
-    useHypurrConnect();
+    useHypurrConnectInternal();
 
   const handleTelegramAuth = useCallback(
     (user: TelegramLoginData) => {
@@ -99,26 +185,33 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
 
   const modalContent = (
     <>
-      <div className="flex w-full flex-col items-center gap-2 overflow-hidden">
-        <button type="button" onClick={openTelegramOAuth} className={btnClass}>
-          <TelegramColorIcon className="size-5" />
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 8,
+          overflow: "hidden",
+        }}
+      >
+        <HoverButton onClick={openTelegramOAuth}>
+          <TelegramColorIcon style={iconSize} />
           Telegram
-        </button>
+        </HoverButton>
       </div>
 
-      <div className="h-px w-full bg-white/5" />
+      <div style={dividerStyle} />
 
-      <button
-        type="button"
+      <HoverButton
         onClick={() => {
           closeLoginModal();
           onConnectWallet();
         }}
-        className={btnClass}
       >
-        {walletIcon ?? <MetaMaskColorIcon className="size-5" />}
+        {walletIcon ?? <MetaMaskColorIcon style={iconSize} />}
         Wallet
-      </button>
+      </HoverButton>
     </>
   );
 
@@ -133,7 +226,7 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
           <>
             <motion.div
               key="backdrop"
-              className="fixed inset-0 z-[100] bg-black/60 backdrop-blur-[2px]"
+              style={backdropStyle}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
@@ -142,7 +235,7 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
             />
             <motion.div
               key="modal-wrapper"
-              className="fixed inset-0 z-[101] flex items-center justify-center p-4"
+              style={modalWrapperStyle}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
@@ -150,16 +243,14 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
               onClick={closeLoginModal}
             >
               <motion.div
-                className="flex w-[400px] flex-col items-center gap-4 overflow-hidden rounded-xl border border-white/10 bg-[#282828] p-6"
+                style={modalBoxStyle}
                 initial={{ opacity: 0, scale: 0.95, y: 10 }}
                 animate={{ opacity: 1, scale: 1, y: 0 }}
                 exit={{ opacity: 0, scale: 0.95, y: 10 }}
                 transition={{ duration: 0.2, ease: "easeOut" }}
                 onClick={(e) => e.stopPropagation()}
               >
-                <p className="text-base font-bold tracking-tight text-white">
-                  Connect
-                </p>
+                <p style={headingStyle}>Connect</p>
                 {modalContent}
               </motion.div>
             </motion.div>
@@ -169,6 +260,51 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
   );
 }
 
+const drawerSheetStyle: CSSProperties = {
+  position: "fixed",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 101,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 16,
+  borderTopLeftRadius: 12,
+  borderTopRightRadius: 12,
+  borderLeft: "1px solid rgba(255,255,255,0.1)",
+  borderRight: "1px solid rgba(255,255,255,0.1)",
+  borderTop: "1px solid rgba(255,255,255,0.1)",
+  background: "#282828",
+  padding: "12px 24px max(24px, env(safe-area-inset-bottom))",
+};
+
+const drawerBgStyle: CSSProperties = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: "-100vh",
+  zIndex: -1,
+  background: "#282828",
+  borderTopLeftRadius: 12,
+  borderTopRightRadius: 12,
+};
+
+const grabHandleAreaStyle: CSSProperties = {
+  width: "100%",
+  cursor: "grab",
+  paddingBottom: 4,
+};
+
+const grabHandleStyle: CSSProperties = {
+  margin: "0 auto",
+  height: 4,
+  width: 100,
+  borderRadius: 9999,
+  background: "rgba(255,255,255,0.05)",
+};
+
 function MobileDrawer({
   children,
   onClose,
@@ -193,7 +329,7 @@ function MobileDrawer({
     <>
       <motion.div
         key="drawer-backdrop"
-        className="fixed inset-0 z-[100] bg-black/60 backdrop-blur-[2px]"
+        style={backdropStyle}
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
@@ -203,7 +339,7 @@ function MobileDrawer({
 
       <motion.div
         key="drawer-sheet"
-        className="fixed inset-x-0 bottom-0 z-[101] flex flex-col items-center gap-4 rounded-t-xl border-x border-t border-white/10 bg-[#282828] px-6 pb-[max(24px,env(safe-area-inset-bottom))] pt-3"
+        style={drawerSheetStyle}
         initial={{ y: "100%" }}
         animate={{ y: 0 }}
         exit={{ y: "100%" }}
@@ -213,15 +349,13 @@ function MobileDrawer({
         dragElastic={{ top: 0, bottom: 0.4 }}
         onDragEnd={handleDragEnd}
       >
-        <div className="absolute inset-x-0 top-0 bottom-[-100vh] -z-10 bg-[#282828] rounded-t-xl" />
+        <div style={drawerBgStyle} />
 
-        <div className="w-full cursor-grab pt-0 pb-1 active:cursor-grabbing">
-          <div className="mx-auto h-1 w-[100px] rounded-full bg-white/5" />
+        <div style={grabHandleAreaStyle}>
+          <div style={grabHandleStyle} />
         </div>
 
-        <p className="text-base font-bold tracking-tight text-white">
-          Connect
-        </p>
+        <p style={headingStyle}>Connect</p>
 
         {children}
       </motion.div>

package/src/agent.ts

@@ -1,5 +1,7 @@
 import type { StoredAgent } from "./types";
 
+export const AGENT_NAME = "hypurr-connect";
+
 const AGENT_STORAGE_PREFIX = "hypurr-connect-agent";
 
 function storageKey(masterAddress: string): string {
@@ -41,3 +43,81 @@ export async function generateAgentKey(): Promise<{
   const signer = new PrivateKeySigner(privateKey);
   return { privateKey, address: signer.address };
 }
+
+interface ExtraAgent {
+  address: string;
+  name: string;
+  validUntil: number;
+}
+
+/**
+ * Query the Hyperliquid info API for the named agents registered to a user.
+ * Returns the matching entry for AGENT_NAME if it exists and is still valid.
+ */
+export async function fetchActiveAgent(
+  userAddress: string,
+  isTestnet: boolean,
+): Promise<ExtraAgent | null> {
+  const url = isTestnet
+    ? "https://api.hyperliquid-testnet.xyz/info"
+    : "https://api.hyperliquid.xyz/info";
+
+  const res = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ type: "extraAgents", user: userAddress }),
+  });
+
+  if (!res.ok) return null;
+
+  const agents: unknown = await res.json();
+  if (!Array.isArray(agents)) return null;
+
+  const nowMs = Date.now();
+  const match = (agents as ExtraAgent[]).find(
+    (a) => a.name === AGENT_NAME && a.validUntil * 1000 > nowMs,
+  );
+  if (!match) return null;
+  return { ...match, validUntil: match.validUntil * 1000 };
+}
+
+/**
+ * Checks whether a stored agent is still valid: the address must appear in the
+ * on-chain `extraAgents` list and not be expired.
+ */
+export async function isAgentValid(
+  stored: StoredAgent,
+  userAddress: string,
+  isTestnet: boolean,
+): Promise<boolean> {
+  if (stored.validUntil <= Date.now()) return false;
+
+  const remote = await fetchActiveAgent(userAddress, isTestnet);
+  if (!remote) return false;
+
+  return (
+    remote.address.toLowerCase() === stored.address.toLowerCase() &&
+    remote.validUntil > Date.now()
+  );
+}
+
+const DEAD_AGENT_PATTERNS = [
+  /agent address .+ is not valid/i,
+  /unknown signer/i,
+  /not authorized/i,
+  /not an agent/i,
+];
+
+/**
+ * Returns true if the error indicates the agent has been pruned, expired,
+ * or is otherwise no longer registered on-chain.
+ */
+export function isDeadAgentError(err: unknown): boolean {
+  const msg =
+    err instanceof Error
+      ? err.message
+      : typeof err === "object" && err !== null && "message" in err
+        ? String((err as { message: unknown }).message)
+        : String(err);
+  return DEAD_AGENT_PATTERNS.some((p) => p.test(msg));
+}

package/src/icons/MetaMaskColorIcon.tsx

@@ -1,14 +1,16 @@
-export function MetaMaskColorIcon({ className }: { className?: string }) {
+import type { CSSProperties } from "react";
+
+export function MetaMaskColorIcon({ style }: { style?: CSSProperties }) {
   return (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      className={className}
+      style={style}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_2567_1088)">
+      <g clipPath="url(#clip0_2567_1088)">
         <path
           d="M19.8188 19.418L15.9421 18.2871L13.0186 19.9994L10.9788 19.9985L8.05356 18.2871L4.17862 19.418L3 15.5193L4.17875 11.1924L3 7.5341L4.17875 3L10.2336 6.54437H13.7639L19.8188 3L20.9976 7.5341L19.8188 11.1924L20.9976 15.5193L19.8188 19.418Z"
           fill="#FF5C16"

package/src/icons/TelegramColorIcon.tsx

@@ -1,10 +1,12 @@
-export function TelegramColorIcon({ className }: { className?: string }) {
+import type { CSSProperties } from "react";
+
+export function TelegramColorIcon({ style }: { style?: CSSProperties }) {
   return (
     <svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
-      className={className}
+      style={style}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -13,8 +15,8 @@ export function TelegramColorIcon({ className }: { className?: string }) {
         fill="url(#paint0_linear_2571_1084)"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M7.07426 11.905C9.69794 10.7619 11.4475 10.0083 12.3229 9.64417C14.8222 8.60458 15.3416 8.424 15.6801 8.41803C15.7546 8.41672 15.921 8.43517 16.0289 8.52267C16.1199 8.59655 16.145 8.69635 16.1569 8.7664C16.1689 8.83645 16.1839 8.99602 16.172 9.1207C16.0366 10.5438 15.4505 13.9973 15.1523 15.5912C15.0262 16.2657 14.7778 16.4918 14.5373 16.514C14.0146 16.562 13.6178 16.1686 13.1115 15.8367C12.3194 15.3175 11.8719 14.9943 11.103 14.4876C10.2145 13.902 10.7905 13.5802 11.2969 13.0542C11.4294 12.9166 13.7322 10.822 13.7768 10.632C13.7824 10.6082 13.7875 10.5196 13.7349 10.4729C13.6823 10.4261 13.6046 10.4421 13.5486 10.4548C13.4691 10.4728 12.2037 11.3092 9.75232 12.964C9.39313 13.2106 9.06779 13.3308 8.7763 13.3245C8.45496 13.3176 7.83681 13.1428 7.37729 12.9934C6.81366 12.8102 6.3657 12.7134 6.40471 12.4022C6.42503 12.2401 6.64821 12.0744 7.07426 11.905Z"
         fill="white"
       />
@@ -27,8 +29,8 @@ export function TelegramColorIcon({ className }: { className?: string }) {
           y2="1789.65"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#2AABEE" />
-          <stop offset="1" stop-color="#229ED9" />
+          <stop stopColor="#2AABEE" />
+          <stop offset="1" stopColor="#229ED9" />
         </linearGradient>
       </defs>
     </svg>

package/src/index.ts

@@ -16,3 +16,7 @@ export type {
   StoredAgent,
   TelegramLoginData,
 } from "./types";
+
+// Re-export wallet types from hypurr-grpc so consumers don't need the dependency
+export type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+export type { TelegramChatWalletPack } from "hypurr-grpc/ts/hypurr/user";

package/src/types.ts

@@ -1,6 +1,8 @@
 import type { ExchangeClient } from "@hfunlabs/hyperliquid";
 import type { StaticClient } from "hypurr-grpc/ts/hypurr/static/static_service.client";
 import type { TelegramClient } from "hypurr-grpc/ts/hypurr/telegram/telegram_service.client";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+import type { TelegramChatWalletPack } from "hypurr-grpc/ts/hypurr/user";
 
 // ─── Config ──────────────────────────────────────────────────────
 
@@ -36,6 +38,8 @@ export interface HypurrUser {
   photoUrl?: string;
   authMethod: AuthMethod;
   telegramId?: string;
+  hfunScore?: number;
+  reputationScore?: number;
 }
 
 // ─── Agent (EOA flow) ────────────────────────────────────────────
@@ -44,6 +48,8 @@ export interface StoredAgent {
   privateKey: `0x${string}`;
   address: `0x${string}`;
   approvedAt: number;
+  /** Epoch ms from the `extraAgents` response; agent is invalid after this time. */
+  validUntil: number;
 }
 
 export type SignTypedDataFn = (params: {
@@ -69,10 +75,33 @@ export interface HypurrConnectState {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   exchange: ExchangeClient<any> | null;
 
-  // USDC balance from Hyperliquid perps clearinghouse
-  usdcBalance: string | null;
-  usdcBalanceLoading: boolean;
-  refreshBalance: () => void;
+  // Multi-wallet (Telegram only — EOA has a single wallet)
+  wallets: HyperliquidWallet[];
+  selectedWalletId: number;
+  selectWallet: (walletId: number) => void;
+
+  // Wallet management (Telegram only)
+  createWallet: (name: string) => Promise<HyperliquidWallet>;
+  deleteWallet: (walletId: number) => Promise<void>;
+  refreshWallets: () => void;
+
+  // Wallet packs & labels (Telegram only)
+  packs: TelegramChatWalletPack[];
+  createWalletPack: (name: string) => Promise<number>;
+  addPackLabel: (params: {
+    walletAddress: string;
+    walletLabel: string;
+    packId: number;
+  }) => Promise<void>;
+  modifyPackLabel: (params: {
+    walletLabelOld: string;
+    walletLabelNew: string;
+    packId: number;
+  }) => Promise<void>;
+  removePackLabel: (params: {
+    walletLabel: string;
+    packId: number;
+  }) => Promise<void>;
 
   // Login modal
   loginModalOpen: boolean;
@@ -80,14 +109,16 @@ export interface HypurrConnectState {
   closeLoginModal: () => void;
 
   // Auth actions
-  loginTelegram: (data: TelegramLoginData) => void;
-  loginEoa: (address: `0x${string}`) => void;
+  connectEoa: (address: `0x${string}`) => void;
+  approveAgent: (
+    signTypedDataAsync: SignTypedDataFn,
+    chainId: number,
+  ) => Promise<void>;
   logout: () => void;
 
   // EOA agent management
   agent: StoredAgent | null;
   agentReady: boolean;
-  approveAgent: (signTypedDataAsync: SignTypedDataFn) => Promise<void>;
   clearAgent: () => void;
 
   // Telegram config