@hfunlabs/hypurr-connect 0.1.13 → 0.1.15

package/src/AgentExpiryWarning.tsx

@@ -0,0 +1,129 @@
+import {
+  useCallback,
+  useRef,
+  useState,
+  type CSSProperties,
+  type RefCallback,
+} from "react";
+import { AlertTriangle } from "./icons/lucide";
+
+const EXPIRED_AGENT_COLOR = "#f59e0b";
+
+interface TooltipPosition {
+  left: number;
+  top: number;
+}
+
+export function AgentExpiryWarningIcon({
+  message,
+  onClick,
+  size = 13,
+}: {
+  message: string;
+  onClick?: () => void;
+  size?: number;
+}) {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const [tooltipPosition, setTooltipPosition] =
+    useState<TooltipPosition | null>(null);
+
+  const setTriggerRef: RefCallback<HTMLElement> = useCallback((node) => {
+    triggerRef.current = node;
+  }, []);
+
+  const showTooltip = useCallback(() => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+
+    const tooltipWidth = 260;
+    const left = Math.min(
+      Math.max(rect.left + rect.width / 2, tooltipWidth / 2 + 8),
+      window.innerWidth - tooltipWidth / 2 - 8,
+    );
+    const top =
+      rect.bottom + 8 < window.innerHeight - 48
+        ? rect.bottom + 8
+        : Math.max(8, rect.top - 44);
+
+    setTooltipPosition({ left, top });
+  }, []);
+
+  const hideTooltip = useCallback(() => {
+    setTooltipPosition(null);
+  }, []);
+
+  const triggerStyle: CSSProperties = {
+    width: size + 5,
+    height: size + 5,
+    padding: 0,
+    border: "none",
+    borderRadius: 4,
+    background: "transparent",
+    color: EXPIRED_AGENT_COLOR,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    cursor: onClick ? "pointer" : "help",
+  };
+
+  const sharedProps = {
+    ref: setTriggerRef,
+    "aria-label": "Agent approval expired",
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip,
+    style: triggerStyle,
+  };
+
+  return (
+    <>
+      {onClick ? (
+        <button
+          type="button"
+          {...sharedProps}
+          onClick={(event) => {
+            event.stopPropagation();
+            onClick();
+          }}
+        >
+          <AlertTriangle size={size} color={EXPIRED_AGENT_COLOR} />
+        </button>
+      ) : (
+        <span {...sharedProps}>
+          <AlertTriangle size={size} color={EXPIRED_AGENT_COLOR} />
+        </span>
+      )}
+      {tooltipPosition && (
+        <div
+          role="tooltip"
+          style={{
+            position: "fixed",
+            left: tooltipPosition.left,
+            top: tooltipPosition.top,
+            transform: "translateX(-50%)",
+            zIndex: 10_000,
+            width: 260,
+            maxWidth: "calc(100vw - 16px)",
+            padding: "7px 9px",
+            borderRadius: 6,
+            border: "1px solid rgba(255,255,255,0.12)",
+            background: "#111827",
+            boxShadow: "0 10px 28px rgba(0,0,0,0.45)",
+            color: "#e5e7eb",
+            fontSize: 12,
+            lineHeight: "1rem",
+            fontWeight: 500,
+            pointerEvents: "none",
+            whiteSpace: "normal",
+          }}
+        >
+          {message}
+        </div>
+      )}
+    </>
+  );
+}
+
+export { EXPIRED_AGENT_COLOR };

package/src/DeleteWalletModal.tsx

@@ -132,6 +132,10 @@ export function DeleteWalletModal({
   const [deleteHovered, setDeleteHovered] = useState(false);
 
   const walletName = wallet?.name || "Unnamed Wallet";
+  const displayAddress =
+    wallet?.isAgent && wallet.agentEthereumAddress?.value
+      ? wallet.agentEthereumAddress.value
+      : wallet?.ethereumAddress;
   const isNameMatch = confirmName === walletName;
   const canDelete = isNameMatch && !isDeleting;
 
@@ -258,7 +262,7 @@ export function DeleteWalletModal({
                       wordBreak: "break-all",
                     }}
                   >
-                    {wallet.ethereumAddress}
+                    {displayAddress}
                   </p>
                 </div>
 

package/src/HypurrConnectProvider.tsx

@@ -27,6 +27,7 @@ import {
 import {
   AGENT_NAME,
   clearAgent as clearStoredAgent,
+  fetchAgentByAddress,
   fetchActiveAgent,
   generateAgentKey,
   isAgentValid,
@@ -37,6 +38,7 @@ import {
 import { createStaticClient, createTelegramClient } from "./grpc";
 import { GrpcExchangeTransport } from "./GrpcExchangeTransport";
 import { PrivateKeySigner } from "./privateKeySigner";
+import { createTelegramAgentApprovalName } from "./agentWallet";
 import type {
   AuthMethod,
   EoaSigner,
@@ -45,6 +47,7 @@ import type {
   HypurrConnectConfig,
   HypurrConnectState,
   HypurrUser,
+  RenewAgentWalletParams,
   SignTypedDataFn,
   StoredAgent,
 } from "./types";
@@ -60,6 +63,23 @@ const TELEGRAM_AUTH_STATE_KEY = "hypurr-connect-auth-state";
 const TELEGRAM_AUTH_MESSAGE = "hypurr-connect:telegram-auth";
 const DEFAULT_AUTH_HUB_URL = "https://auth.hypurr.fun/login";
 const DEFAULT_MEDIA_URL = "https://media.hypurr.fun";
+const USER_SIGNED_DOMAIN_NAME = "HyperliquidSignTransaction";
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000" as const;
+const APPROVE_AGENT_PRIMARY_TYPE = "HyperliquidTransaction:ApproveAgent";
+const APPROVE_AGENT_TYPES = {
+  [APPROVE_AGENT_PRIMARY_TYPE]: [
+    { name: "hyperliquidChain", type: "string" },
+    { name: "agentAddress", type: "address" },
+    { name: "agentName", type: "string" },
+    { name: "nonce", type: "uint64" },
+  ],
+};
+const EIP712_DOMAIN_TYPES = [
+  { name: "name", type: "string" },
+  { name: "version", type: "string" },
+  { name: "chainId", type: "uint256" },
+  { name: "verifyingContract", type: "address" },
+];
 const IGNORED_EXTERNAL_SIGNATURE =
   "0x000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001b" as const;
 const DEFAULT_TELEGRAM_SCOPES = [
@@ -105,6 +125,67 @@ function isAddress(value?: string | null): value is Hex {
   return !!value && /^0x[a-fA-F0-9]{40}$/.test(value);
 }
 
+function createApproveAgentAction(params: {
+  agentAddress: Hex;
+  agentName: string;
+  chainId: number;
+  isTestnet: boolean;
+}) {
+  const nonce = Date.now();
+  return {
+    action: {
+      type: "approveAgent" as const,
+      signatureChainId: `0x${params.chainId.toString(16)}` as Hex,
+      hyperliquidChain: (params.isTestnet ? "Testnet" : "Mainnet") as
+        | "Testnet"
+        | "Mainnet",
+      agentAddress: params.agentAddress.toLowerCase() as Hex,
+      agentName: params.agentName,
+      nonce,
+    },
+    nonce,
+  };
+}
+
+type ApproveAgentAction = ReturnType<typeof createApproveAgentAction>["action"];
+
+async function signApproveAgentAction(params: {
+  signTypedDataAsync: SignTypedDataFn;
+  agentAddress: Hex;
+  agentName: string;
+  chainId: number;
+  isTestnet: boolean;
+}): Promise<{
+  action: ApproveAgentAction;
+  signatureHex: Hex;
+}> {
+  const { action } = createApproveAgentAction(params);
+  const signatureHex = await params.signTypedDataAsync({
+    domain: {
+      name: USER_SIGNED_DOMAIN_NAME,
+      version: "1",
+      chainId: params.chainId,
+      verifyingContract: ZERO_ADDRESS,
+    },
+    types: {
+      EIP712Domain: EIP712_DOMAIN_TYPES,
+      ...APPROVE_AGENT_TYPES,
+    },
+    primaryType: APPROVE_AGENT_PRIMARY_TYPE,
+    message: {
+      hyperliquidChain: action.hyperliquidChain,
+      agentAddress: action.agentAddress,
+      agentName: action.agentName,
+      nonce: action.nonce,
+    },
+  });
+
+  return {
+    action,
+    signatureHex,
+  };
+}
+
 function getRawSignedTransaction(result: unknown): Hex | null {
   if (typeof result === "string" && result.startsWith("0x")) {
     return result as Hex;
@@ -928,6 +1009,113 @@ export function HypurrConnectProvider({
     [tgClient, telegramRpcOptions, refreshWallets],
   );
 
+  const renewAgentWallet = useCallback(
+    async ({
+      walletId,
+      ownerAddress,
+      signTypedDataAsync,
+      chainId,
+      approvalDurationMs,
+      agentName,
+    }: RenewAgentWalletParams): Promise<void> => {
+      if (authMethod !== "telegram") {
+        throw new Error(
+          "[HypurrConnect] Agent wallet renewal is only available for Telegram wallets.",
+        );
+      }
+      if (!isAddress(ownerAddress)) {
+        throw new Error(
+          "[HypurrConnect] Connect the owner EOA wallet before renewing this agent.",
+        );
+      }
+      if (!telegramRpcOptions) {
+        throw new Error("[HypurrConnect] No Telegram RPC session available.");
+      }
+
+      const wallet = wallets.find((w) => w.id === walletId);
+      if (!wallet) {
+        throw new Error("[HypurrConnect] Agent wallet not found.");
+      }
+      if (!wallet.isAgent) {
+        throw new Error(
+          "[HypurrConnect] Selected wallet is not an agent wallet.",
+        );
+      }
+      if (!isAddress(wallet.ethereumAddress)) {
+        throw new Error(
+          "[HypurrConnect] Agent wallet does not have a valid owner EVM address.",
+        );
+      }
+      if (ownerAddress.toLowerCase() !== wallet.ethereumAddress.toLowerCase()) {
+        throw new Error(
+          "[HypurrConnect] Connect the owner EOA for this agent wallet before renewing.",
+        );
+      }
+
+      const agentAddress = wallet.agentEthereumAddress?.value;
+      if (!isAddress(agentAddress)) {
+        throw new Error(
+          "[HypurrConnect] Agent wallet does not have a valid agent EVM address.",
+        );
+      }
+
+      const isTestnet = config.isTestnet ?? false;
+      const approvalAgentName =
+        agentName ?? createTelegramAgentApprovalName(approvalDurationMs);
+      setTgError(null);
+
+      try {
+        const { action, signatureHex } = await signApproveAgentAction({
+          signTypedDataAsync,
+          agentAddress,
+          agentName: approvalAgentName,
+          chainId,
+          isTestnet,
+        });
+
+        await tgClient.hyperliquidAgentWalletRenew(
+          {
+            authData: {},
+            address: { value: wallet.ethereumAddress },
+            signature: {
+              agentAddress: action.agentAddress,
+              agentName: action.agentName,
+              nonce: action.nonce,
+              chainId,
+              signature: signatureHex,
+            },
+          },
+          telegramRpcOptions,
+        );
+
+        const remote = await fetchAgentByAddress(
+          ownerAddress,
+          agentAddress,
+          isTestnet,
+        );
+        if (remote && remote.validUntil <= Date.now()) {
+          throw new Error(
+            "[HypurrConnect] Agent renewal was submitted, but the agent is still expired.",
+          );
+        }
+
+        refreshWallets();
+      } catch (err) {
+        console.error("[HypurrConnect] Agent wallet renewal failed:", err);
+        setTgError(err instanceof Error ? err.message : String(err));
+        throw err;
+      }
+    },
+    [
+      authMethod,
+      config.isTestnet,
+      refreshWallets,
+      telegramRpcOptions,
+      tgClient,
+      wallets,
+    ],
+  );
+
   const createWalletPack = useCallback(
     async (name: string): Promise<number> => {
       const { response } = await tgClient.telegramChatWalletPackCreate(
@@ -1155,7 +1343,9 @@ export function HypurrConnectProvider({
         ? configuredReturnTo()
         : configuredReturnTo || currentReturnTo();
 
-    const authUrl = new URL(config.telegram?.authHubUrl || DEFAULT_AUTH_HUB_URL);
+    const authUrl = new URL(
+      config.telegram?.authHubUrl || DEFAULT_AUTH_HUB_URL,
+    );
     authUrl.searchParams.set("return_to", returnTo);
     authUrl.searchParams.set("state", state);
     authUrl.searchParams.set("scope", normalizeScopes(config.telegram?.scope));
@@ -1350,6 +1540,7 @@ export function HypurrConnectProvider({
       createWallet,
       deleteWallet,
       renameWallet,
+      renewAgentWallet,
       refreshWallets,
 
       packs,
@@ -1399,6 +1590,7 @@ export function HypurrConnectProvider({
       createWallet,
       deleteWallet,
       renameWallet,
+      renewAgentWallet,
       refreshWallets,
       packs,
       createWalletPack,

package/src/LoginModal.tsx

@@ -17,10 +17,14 @@ import { TelegramColorIcon } from "./icons/TelegramColorIcon";
 export interface LoginModalProps {
   onConnectWallet: () => void;
   walletIcon?: ReactNode;
+  /** CSS color used as the modal/drawer background. Defaults to `rgba(20,20,20,0.95)`. */
+  backgroundColor?: string;
 }
 
 const MOBILE_BREAKPOINT = 640;
 
+const DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
+
 const btnStyle: CSSProperties = {
   display: "flex",
   height: 53,
@@ -28,19 +32,19 @@ const btnStyle: CSSProperties = {
   alignItems: "center",
   gap: 12,
   overflow: "hidden",
-  borderRadius: 6,
-  background: "rgba(255,255,255,0.05)",
-  padding: "0 24px",
+  borderRadius: 4,
+  background: "rgba(255,255,255,0.1)",
+  padding: "4px 24px",
   fontSize: 14,
-  fontWeight: 600,
-  letterSpacing: "-0.01em",
+  fontWeight: 500,
+  letterSpacing: "-0.03em",
   color: "#fff",
   cursor: "pointer",
   border: "none",
   transition: "background 150ms",
 };
 
-const btnHoverBg = { background: "rgba(255,255,255,0.1)" };
+const btnHoverBg = { background: "rgba(255,255,255,0.15)" };
 
 const backdropStyle: CSSProperties = {
   position: "fixed",
@@ -70,14 +74,13 @@ const modalBoxStyle: CSSProperties = {
   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",
+  fontSize: 20,
+  fontWeight: 500,
+  letterSpacing: "-0.03em",
   color: "#fff",
   margin: 0,
 };
@@ -88,7 +91,7 @@ const dividerStyle: CSSProperties = {
   background: "rgba(255,255,255,0.05)",
 };
 
-const iconSize: CSSProperties = { width: 20, height: 20 };
+const iconSize: CSSProperties = { width: 26, height: 26 };
 
 const mobileQuery =
   typeof window !== "undefined"
@@ -127,7 +130,11 @@ function HoverButton({
   );
 }
 
-export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
+export function LoginModal({
+  onConnectWallet,
+  walletIcon,
+  backgroundColor = DEFAULT_BACKGROUND_COLOR,
+}: LoginModalProps) {
   const { loginTelegram, loginModalOpen, closeLoginModal } =
     useHypurrConnectInternal();
 
@@ -174,7 +181,11 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
     <AnimatePresence>
       {loginModalOpen &&
         (isMobile ? (
-          <MobileDrawer key="drawer" onClose={closeLoginModal}>
+          <MobileDrawer
+            key="drawer"
+            onClose={closeLoginModal}
+            backgroundColor={backgroundColor}
+          >
             {modalContent}
           </MobileDrawer>
         ) : (
@@ -198,7 +209,7 @@ export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
               onClick={closeLoginModal}
             >
               <motion.div
-                style={modalBoxStyle}
+                style={{ ...modalBoxStyle, background: backgroundColor }}
                 initial={{ scale: 0.96, opacity: 0, y: 8 }}
                 animate={{ scale: 1, opacity: 1, y: 0 }}
                 exit={{ scale: 0.96, opacity: 0, y: 8 }}
@@ -230,7 +241,6 @@ const drawerSheetStyle: CSSProperties = {
   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))",
 };
 
@@ -241,7 +251,6 @@ const drawerBgStyle: CSSProperties = {
   top: 0,
   bottom: "-100vh",
   zIndex: -1,
-  background: "#282828",
   borderTopLeftRadius: 12,
   borderTopRightRadius: 12,
 };
@@ -256,16 +265,18 @@ const grabHandleStyle: CSSProperties = {
   margin: "0 auto",
   height: 4,
   width: 100,
-  borderRadius: 9999,
+  borderRadius: 4,
   background: "rgba(255,255,255,0.05)",
 };
 
 function MobileDrawer({
   children,
   onClose,
+  backgroundColor,
 }: {
   children: ReactNode;
   onClose: () => void;
+  backgroundColor: string;
 }) {
   const controls = useAnimationControls();
 
@@ -294,7 +305,7 @@ function MobileDrawer({
 
       <motion.div
         key="drawer-sheet"
-        style={drawerSheetStyle}
+        style={{ ...drawerSheetStyle, background: backgroundColor }}
         initial={{ y: "100%" }}
         animate={{ y: 0 }}
         exit={{ y: "100%" }}
@@ -304,7 +315,7 @@ function MobileDrawer({
         dragElastic={{ top: 0, bottom: 0.4 }}
         onDragEnd={handleDragEnd}
       >
-        <div style={drawerBgStyle} />
+        <div style={{ ...drawerBgStyle, background: backgroundColor }} />
 
         <div style={grabHandleAreaStyle}>
           <div style={grabHandleStyle} />

package/src/RenameWalletModal.tsx

@@ -125,6 +125,10 @@ export function RenameWalletModal({
   const [saveHovered, setSaveHovered] = useState(false);
 
   const currentName = wallet?.name || "Unnamed";
+  const displayAddress =
+    wallet?.isAgent && wallet.agentEthereumAddress?.value
+      ? wallet.agentEthereumAddress.value
+      : wallet?.ethereumAddress;
   const trimmedName = name.trim();
   const isNameChanged = trimmedName !== currentName;
   const isNameValid = WALLET_NAME_REGEX.test(trimmedName);
@@ -233,7 +237,7 @@ export function RenameWalletModal({
                       wordBreak: "break-all",
                     }}
                   >
-                    {wallet.ethereumAddress}
+                    {displayAddress}
                   </p>
                 </div>