@hfunlabs/hypurr-connect 0.1.1 → 0.1.3

package/src/LoginModal.tsx

@@ -11,9 +11,10 @@ import {
   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 { TelegramLoginWidget } from "./TelegramLoginWidget";
 import type { TelegramLoginData } from "./types";
 
 export interface LoginModalProps {
@@ -130,8 +131,14 @@ function HoverButton({
 }
 
 export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
-  const { loginTelegram, loginModalOpen, closeLoginModal, botId } =
-    useHypurrConnect();
+  const {
+    loginTelegram,
+    loginModalOpen,
+    closeLoginModal,
+    botId,
+    botUsername,
+    useWidget,
+  } = useHypurrConnectInternal();
 
   const handleTelegramAuth = useCallback(
     (user: TelegramLoginData) => {
@@ -195,10 +202,17 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
           overflow: "hidden",
         }}
       >
-        <HoverButton onClick={openTelegramOAuth}>
-          <TelegramColorIcon style={iconSize} />
-          Telegram
-        </HoverButton>
+        {useWidget && botUsername ? (
+          <TelegramLoginWidget
+            botUsername={botUsername}
+            onAuth={handleTelegramAuth}
+          />
+        ) : (
+          <HoverButton onClick={openTelegramOAuth}>
+            <TelegramColorIcon style={iconSize} />
+            Telegram
+          </HoverButton>
+        )}
       </div>
 
       <div style={dividerStyle} />

package/src/TelegramLoginWidget.tsx

@@ -0,0 +1,62 @@
+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} />;
+}

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/index.ts

@@ -4,11 +4,15 @@ export {
 } from "./HypurrConnectProvider";
 export { LoginModal } from "./LoginModal";
 export type { LoginModalProps } from "./LoginModal";
+export { TelegramLoginWidget } from "./TelegramLoginWidget";
+export type { TelegramLoginWidgetProps } from "./TelegramLoginWidget";
 export { GrpcExchangeTransport } from "./GrpcExchangeTransport";
 export type { GrpcExchangeTransportConfig } from "./GrpcExchangeTransport";
 export { createTelegramClient, createStaticClient } from "./grpc";
+export { createEoaSigner } from "./types";
 export type {
   AuthMethod,
+  EoaSigner,
   HypurrConnectConfig,
   HypurrConnectState,
   HypurrUser,
@@ -16,3 +20,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,15 +1,18 @@
 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 { TelegramChatWalletPack } from "hypurr-grpc/ts/hypurr/user";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
 
 // ─── Config ──────────────────────────────────────────────────────
 
 export interface HypurrConnectConfig {
   grpcTimeout?: number;
   isTestnet?: boolean;
-  telegram?: {
+  telegram: {
     botUsername: string;
-    botId: string;
+    botId?: string;
+    useWidget: boolean;
   };
 }
 
@@ -36,6 +39,8 @@ export interface HypurrUser {
   photoUrl?: string;
   authMethod: AuthMethod;
   telegramId?: string;
+  hfunScore?: number;
+  reputationScore?: number;
 }
 
 // ─── Agent (EOA flow) ────────────────────────────────────────────
@@ -44,6 +49,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: {
@@ -53,6 +60,51 @@ export type SignTypedDataFn = (params: {
   message: Record<string, unknown>;
 }) => Promise<`0x${string}`>;
 
+/** Wallet signer provided at EOA connect time for user-signed actions. */
+export interface EoaSigner {
+  signTypedData: SignTypedDataFn;
+  chainId: number;
+}
+
+/**
+ * Create an {@link EoaSigner} from any EIP-712 signing function.
+ *
+ * Accepts either a direct function or a `{ current }` ref object so the
+ * signer always calls through to the latest function (avoids stale closures
+ * with React hooks like wagmi's `useSignTypedData`).
+ *
+ * @example wagmi v2 — ref pattern (recommended)
+ * ```ts
+ * const { signTypedDataAsync } = useSignTypedData();
+ * const chainId = useChainId();
+ * const signerRef = useRef(signTypedDataAsync);
+ * signerRef.current = signTypedDataAsync; // stays fresh every render
+ *
+ * // call once — the ref keeps it up to date
+ * connectEoa(address, createEoaSigner(signerRef, chainId));
+ * ```
+ *
+ * @example direct function (e.g. from viem WalletClient)
+ * ```ts
+ * connectEoa(address, createEoaSigner(client.signTypedData, chainId));
+ * ```
+ */
+export function createEoaSigner(
+  signTypedDataAsync:
+    | ((args: Record<string, unknown>) => Promise<`0x${string}`>)
+    | { current: (args: Record<string, unknown>) => Promise<`0x${string}`> },
+  chainId: number,
+): EoaSigner {
+  const resolve =
+    typeof signTypedDataAsync === "function"
+      ? signTypedDataAsync
+      : (args: Record<string, unknown>) => signTypedDataAsync.current(args);
+  return {
+    signTypedData: (params) => resolve(params),
+    chainId,
+  };
+}
+
 // ─── Context state ───────────────────────────────────────────────
 
 export interface HypurrConnectState {
@@ -63,16 +115,40 @@ export interface HypurrConnectState {
   error: string | null;
   authMethod: AuthMethod;
 
-  // SDK ExchangeClient — works for all L1 actions
+  // SDK ExchangeClient — handles both L1 (agent-signed) and user-signed actions.
   // Telegram: backed by GrpcExchangeTransport (HyperliquidCoreAction)
-  // EOA: backed by HttpTransport + agent wallet
+  // EOA: uses a dual wallet — agent key for L1 actions, master wallet for
+  //   user-signed actions (transfers, withdrawals, etc.) when a signer is provided.
   // 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 +156,16 @@ export interface HypurrConnectState {
   closeLoginModal: () => void;
 
   // Auth actions
-  loginTelegram: (data: TelegramLoginData) => void;
-  loginEoa: (address: `0x${string}`) => void;
+  connectEoa: (address: `0x${string}`, signer?: EoaSigner) => 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