@hfunlabs/hypurr-connect 0.1.14 → 0.1.16

package/src/RenewAgentModal.tsx

@@ -0,0 +1,380 @@
+import { AnimatePresence, motion } from "framer-motion";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useHypurrConnectInternal } from "./HypurrConnectProvider";
+import {
+  AGENT_APPROVAL_DURATION_OPTIONS,
+  DEFAULT_AGENT_APPROVAL_DURATION_MS,
+  agentExpiresAtMs,
+  formatAgentExpiry,
+  getAgentExpiryTitle,
+  type AgentApprovalDurationOption,
+} from "./agentWallet";
+import {
+  AlertTriangle,
+  Check,
+  Loader2,
+  SpinKeyframes,
+  Wallet,
+  X,
+} from "./icons/lucide";
+import type { Hex, SignTypedDataFn } from "./types";
+
+export interface RenewAgentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  wallet: HyperliquidWallet | null;
+  ownerAddress?: string | null;
+  isWalletConnected?: boolean;
+  chainId?: number;
+  signTypedDataAsync?: SignTypedDataFn;
+  onConnectWallet?: () => void;
+  onDisconnectWallet?: () => void;
+  onRenewed?: (wallet: HyperliquidWallet) => void | Promise<void>;
+  onNotify?: (n: { type: "success" | "error"; message: string }) => void;
+  /** Expiration choices for the renewed owner approval. Defaults to 1/7/30/90 days. */
+  approvalDurationOptions?: AgentApprovalDurationOption[];
+  /** Initial renewal approval duration. Defaults to 1 day. */
+  defaultApprovalDurationMs?: number;
+}
+
+const isHexAddress = (address?: string | null): address is Hex =>
+  !!address && /^0x[a-fA-F0-9]{40}$/.test(address);
+
+const formatAddress = (address?: string | null) =>
+  address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "";
+
+const isSameAddress = (a?: string | null, b?: string | null) =>
+  isHexAddress(a) && isHexAddress(b) && a.toLowerCase() === b.toLowerCase();
+
+export function RenewAgentModal({
+  isOpen,
+  onClose,
+  wallet,
+  ownerAddress,
+  isWalletConnected,
+  chainId,
+  signTypedDataAsync,
+  onConnectWallet,
+  onDisconnectWallet,
+  onRenewed,
+  onNotify,
+  approvalDurationOptions,
+  defaultApprovalDurationMs = DEFAULT_AGENT_APPROVAL_DURATION_MS,
+}: RenewAgentModalProps): ReactNode {
+  const { renewAgentWallet } = useHypurrConnectInternal();
+  const [isRenewing, setIsRenewing] = useState(false);
+  const [approvalDurationMs, setApprovalDurationMs] = useState(
+    defaultApprovalDurationMs,
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  const expiryMessage = useMemo(
+    () => (wallet ? getAgentExpiryTitle(wallet) : null),
+    [wallet],
+  );
+  const currentExpiryMs = useMemo(
+    () => (wallet ? agentExpiresAtMs(wallet) : null),
+    [wallet],
+  );
+  const durationOptions =
+    approvalDurationOptions && approvalDurationOptions.length > 0
+      ? approvalDurationOptions
+      : AGENT_APPROVAL_DURATION_OPTIONS;
+  const expectedOwnerAddress = wallet?.ethereumAddress ?? null;
+  const agentAddress = wallet?.agentEthereumAddress?.value ?? null;
+  const hasExpectedOwner = isHexAddress(expectedOwnerAddress);
+  const hasAgentAddress = isHexAddress(agentAddress);
+  const hasConnectedOwner = isWalletConnected && isHexAddress(ownerAddress);
+  const ownerMatches = isSameAddress(ownerAddress, expectedOwnerAddress);
+  const ownerReady = ownerMatches && !!chainId;
+  const canRenew =
+    !!wallet &&
+    hasAgentAddress &&
+    ownerReady &&
+    !!signTypedDataAsync &&
+    !isRenewing;
+
+  const handleClose = useCallback(() => {
+    if (isRenewing) return;
+    setError(null);
+    onClose();
+  }, [isRenewing, onClose]);
+
+  const handleRenew = useCallback(async () => {
+    if (!wallet) return;
+    if (!isHexAddress(agentAddress)) {
+      setError("This wallet is missing its agent address.");
+      return;
+    }
+    if (!isHexAddress(expectedOwnerAddress)) {
+      setError("This wallet is missing its owner address.");
+      return;
+    }
+    if (!isHexAddress(ownerAddress)) {
+      onConnectWallet?.();
+      return;
+    }
+    if (!isSameAddress(ownerAddress, expectedOwnerAddress)) {
+      setError(
+        `Connect the owner wallet ${formatAddress(expectedOwnerAddress)} to renew this agent.`,
+      );
+      return;
+    }
+    if (!chainId || !signTypedDataAsync) {
+      setError("Wallet signing is not ready yet");
+      return;
+    }
+
+    setError(null);
+    setIsRenewing(true);
+    try {
+      await renewAgentWallet({
+        walletId: wallet.id,
+        ownerAddress,
+        signTypedDataAsync,
+        chainId,
+        approvalDurationMs,
+      });
+      await onRenewed?.(wallet);
+      onNotify?.({ type: "success", message: "Agent wallet renewed" });
+      onClose();
+    } catch (e: unknown) {
+      const message =
+        e instanceof Error ? e.message : "Failed to renew agent wallet";
+      setError(message);
+      onNotify?.({ type: "error", message });
+    } finally {
+      setIsRenewing(false);
+    }
+  }, [
+    agentAddress,
+    approvalDurationMs,
+    chainId,
+    expectedOwnerAddress,
+    onClose,
+    onConnectWallet,
+    onNotify,
+    onRenewed,
+    ownerAddress,
+    renewAgentWallet,
+    signTypedDataAsync,
+    wallet,
+  ]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && wallet && (
+        <motion.div className="hypurr-connect" style={{ display: "contents" }}>
+          <SpinKeyframes />
+          <motion.div
+            className="fixed inset-0 z-[110] bg-black/70 backdrop-blur-sm"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            onClick={handleClose}
+          />
+          <div className="fixed inset-0 z-[111] flex items-center justify-center p-4">
+            <motion.div
+              className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-bd bg-surface-modal font-sans shadow-modal"
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 8 }}
+              transition={{ duration: 0.18, ease: "easeOut" }}
+              onClick={(event) => event.stopPropagation()}
+            >
+              <div className="relative flex items-center justify-center border-b border-white/[0.06] px-6 pb-5 pt-6">
+                <h3 className="text-lg font-semibold text-white">
+                  Renew Agent Wallet
+                </h3>
+                <button
+                  onClick={handleClose}
+                  disabled={isRenewing}
+                  className="absolute right-6 text-gray-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+                  aria-label="Close"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+
+              <div className="space-y-4 px-6 py-5">
+                <div className="flex items-start gap-2 rounded-lg border border-amber-500/25 bg-amber-500/[0.08] p-3">
+                  <AlertTriangle
+                    size={14}
+                    className="mt-0.5 flex-shrink-0 text-amber-400"
+                  />
+                  <p className="text-base text-amber-200">
+                    {expiryMessage ??
+                      (currentExpiryMs
+                        ? `Current approval expires ${formatAgentExpiry(
+                            currentExpiryMs,
+                          )}. Renew to extend this agent wallet.`
+                        : "Renew this agent wallet with a fresh owner approval.")}
+                  </p>
+                </div>
+
+                <div className="rounded-lg border border-white/[0.06] bg-white/[0.03] p-3">
+                  <p className="mb-1.5 text-base uppercase tracking-[0.1em] text-gray-400">
+                    Agent address
+                  </p>
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0">
+                      <p className="truncate text-base font-medium text-white">
+                        {wallet.name || "Unnamed Wallet"}
+                      </p>
+                      <p className="font-mono text-base text-gray-400">
+                        {hasAgentAddress
+                          ? formatAddress(agentAddress)
+                          : "Missing agent address"}
+                      </p>
+                    </div>
+                    <AlertTriangle
+                      size={16}
+                      className="flex-shrink-0 text-amber-400"
+                    />
+                  </div>
+                </div>
+
+                {ownerReady ? (
+                  <div className="flex items-center gap-3 rounded-lg border border-white/[0.06] bg-white/[0.03] px-3 py-2.5">
+                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.06]">
+                      <Wallet size={14} className="text-gray-400" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <p className="text-base text-gray-400">
+                        Owner wallet connected
+                      </p>
+                      <p className="font-mono text-base text-white">
+                        {formatAddress(ownerAddress)}
+                      </p>
+                    </div>
+                    <Check size={16} className="flex-shrink-0 text-trade-up" />
+                  </div>
+                ) : hasConnectedOwner && !ownerMatches ? (
+                  <div className="space-y-3 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3">
+                    <div className="flex items-start gap-2">
+                      <AlertTriangle
+                        size={14}
+                        className="mt-0.5 flex-shrink-0 text-trade-down"
+                      />
+                      <div className="min-w-0">
+                        <p className="text-base text-trade-down">
+                          Wrong owner wallet connected
+                        </p>
+                        <p className="mt-1 font-mono text-base text-gray-400">
+                          Connected {formatAddress(ownerAddress)}
+                        </p>
+                        <p className="font-mono text-base text-gray-400">
+                          Required {formatAddress(expectedOwnerAddress)}
+                        </p>
+                      </div>
+                    </div>
+                    {onDisconnectWallet && (
+                      <button
+                        onClick={onDisconnectWallet}
+                        disabled={isRenewing}
+                        className="btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium disabled:cursor-not-allowed disabled:opacity-40"
+                      >
+                        Disconnect Wallet
+                      </button>
+                    )}
+                  </div>
+                ) : (
+                  <button
+                    onClick={onConnectWallet}
+                    className="btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium"
+                  >
+                    <Wallet size={14} /> Connect Owner Wallet
+                    {hasExpectedOwner
+                      ? ` ${formatAddress(expectedOwnerAddress)}`
+                      : ""}
+                  </button>
+                )}
+
+                <ApprovalDurationPicker
+                  value={approvalDurationMs}
+                  onChange={setApprovalDurationMs}
+                  options={durationOptions}
+                  disabled={isRenewing}
+                />
+
+                {error && (
+                  <div className="flex items-start gap-2 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3">
+                    <AlertTriangle
+                      size={14}
+                      className="mt-0.5 flex-shrink-0 text-trade-down"
+                    />
+                    <p className="text-base text-trade-down">{error}</p>
+                  </div>
+                )}
+              </div>
+
+              <div className="space-y-2 px-6 pb-6">
+                <button
+                  onClick={handleRenew}
+                  disabled={!canRenew}
+                  className={`flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${
+                    canRenew ? "btn-raised" : "btn-raised-disabled"
+                  }`}
+                >
+                  {isRenewing ? (
+                    <>
+                      <Loader2 size={14} /> Renewing...
+                    </>
+                  ) : (
+                    "Renew Agent Wallet"
+                  )}
+                </button>
+                {ownerReady && onDisconnectWallet && (
+                  <button
+                    onClick={onDisconnectWallet}
+                    disabled={isRenewing}
+                    className="w-full py-1.5 text-base text-gray-400 transition-colors hover:text-gray-300 disabled:cursor-not-allowed disabled:opacity-40"
+                  >
+                    Disconnect & use different owner
+                  </button>
+                )}
+              </div>
+            </motion.div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+function ApprovalDurationPicker({
+  value,
+  onChange,
+  options,
+  disabled,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+  options: AgentApprovalDurationOption[];
+  disabled?: boolean;
+}) {
+  return (
+    <div>
+      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-gray-400">
+        Approval Duration
+      </label>
+      <div className="grid grid-cols-4 gap-1.5">
+        {options.map((option) => (
+          <button
+            key={`${option.label}-${option.durationMs}`}
+            type="button"
+            onClick={() => onChange(option.durationMs)}
+            disabled={disabled}
+            className={`rounded py-1.5 text-base font-medium disabled:cursor-not-allowed disabled:opacity-50 ${
+              value === option.durationMs ? "btn-raised-active" : "btn-raised"
+            }`}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/UserProfileModal.tsx

@@ -6,13 +6,22 @@ import {
   type CSSProperties,
   type ReactNode,
 } from "react";
+import {
+  AgentExpiryWarningIcon,
+  EXPIRED_AGENT_COLOR,
+} from "./AgentExpiryWarning";
 import { DeleteWalletModal } from "./DeleteWalletModal";
 import { useHypurrConnectInternal } from "./HypurrConnectProvider";
 import { RenameWalletModal } from "./RenameWalletModal";
+import { getAgentExpiryTitle } from "./agentWallet";
 import {
+  Bot,
   Copy,
+  Eye,
+  KeyRound,
   LayoutDashboard,
   Pencil,
+  RefreshCw,
   SpinKeyframes,
   Star,
   Trash2,
@@ -29,6 +38,7 @@ import {
   modalHeaderStyle,
   modalPanelStyle,
   modalWrapperStyle,
+  pickContrastColor,
   type PrincipalColorOverrides,
   type PrincipalColors,
   profileColors,
@@ -82,6 +92,8 @@ export interface UserProfileModalProps {
    * portfolio UI in response.
    */
   onShowPortfolio?: (wallet: HyperliquidWallet) => void;
+  /** Called when the user clicks an agent wallet renew action. Host should connect the owner wallet and call `renewAgentWallet`. */
+  onRenewAgentWallet?: (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`. */
@@ -155,6 +167,44 @@ const walletRowStyle: CSSProperties = {
   transition: "background-color 150ms, border-color 150ms",
 };
 
+type WalletTypeMeta = {
+  label: string;
+  color: string;
+  background: string;
+  border: string;
+  icon: ReactNode;
+};
+
+function getWalletTypeMeta(wallet: HyperliquidWallet): WalletTypeMeta {
+  if (wallet.isAgent) {
+    return {
+      label: "Agent wallet",
+      color: "#38bdf8",
+      background: "rgba(56,189,248,0.16)",
+      border: "rgba(56,189,248,0.34)",
+      icon: <Bot size={10} />,
+    };
+  }
+
+  if (wallet.isReadOnly) {
+    return {
+      label: "Read-only wallet",
+      color: "#a78bfa",
+      background: "rgba(167,139,250,0.16)",
+      border: "rgba(167,139,250,0.34)",
+      icon: <Eye size={10} />,
+    };
+  }
+
+  return {
+    label: "Private-key wallet",
+    color: "#34d399",
+    background: "rgba(52,211,153,0.16)",
+    border: "rgba(52,211,153,0.34)",
+    icon: <KeyRound size={10} />,
+  };
+}
+
 function ToggleSwitch({
   checked,
   onChange,
@@ -189,9 +239,11 @@ function ToggleSwitch({
           height: 12,
           width: 12,
           borderRadius: "50%",
-          background: profileColors.text,
+          background: checked
+            ? pickContrastColor(accentColor)
+            : profileColors.text,
           transform: checked ? "translateX(20px)" : "translateX(4px)",
-          transition: "transform 150ms",
+          transition: "transform 150ms, background 150ms",
         }}
       />
     </button>
@@ -282,6 +334,7 @@ export function UserProfileModal({
   onWalletDeleted,
   onWalletRenamed,
   onShowPortfolio,
+  onRenewAgentWallet,
   onNotify,
   accentColor,
   principalColors,
@@ -746,6 +799,11 @@ export function UserProfileModal({
                               colors={colors}
                               onRename={() => setWalletToRename(wallet)}
                               onDelete={() => setWalletToDelete(wallet)}
+                              onRenewAgentWallet={
+                                wallet.isAgent && onRenewAgentWallet
+                                  ? () => onRenewAgentWallet(wallet)
+                                  : undefined
+                              }
                               onShowPortfolio={
                                 onShowPortfolio
                                   ? () => onShowPortfolio(wallet)
@@ -819,36 +877,52 @@ function WalletRow({
   colors,
   onRename,
   onDelete,
+  onRenewAgentWallet,
   onShowPortfolio,
 }: {
   wallet: HyperliquidWallet;
   colors: PrincipalColors;
   onRename: () => void;
   onDelete: () => void;
+  onRenewAgentWallet?: () => void;
   onShowPortfolio?: () => void;
 }) {
   const [hovered, setHovered] = useState(false);
+  const agentExpiryTitle = getAgentExpiryTitle(wallet);
+  const isAgentExpired = !!agentExpiryTitle;
+  const typeMeta = getWalletTypeMeta(wallet);
   return (
     <div
       style={{
         ...walletRowStyle,
-        background: hovered
-          ? profileColors.surfaceBtnHover
-          : profileColors.surfaceBtn,
-        borderColor: hovered
-          ? profileColors.surfaceBdHover
-          : profileColors.surfaceBd,
+        background: isAgentExpired
+          ? hovered
+            ? "rgba(245,158,11,0.12)"
+            : "rgba(245,158,11,0.07)"
+          : hovered
+            ? profileColors.surfaceBtnHover
+            : profileColors.surfaceBtn,
+        borderColor: isAgentExpired
+          ? "rgba(245,158,11,0.34)"
+          : hovered
+            ? profileColors.surfaceBdHover
+            : profileColors.surfaceBd,
       }}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
       <div
         style={{
+          position: "relative",
           width: 32,
           height: 32,
           borderRadius: 6,
-          background: colors.accentBackground,
-          border: `1px solid ${colors.accentBorder}`,
+          background: isAgentExpired
+            ? "rgba(245,158,11,0.12)"
+            : colors.accentBackground,
+          border: `1px solid ${
+            isAgentExpired ? "rgba(245,158,11,0.34)" : colors.accentBorder
+          }`,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -860,33 +934,66 @@ function WalletRow({
             fontSize: 12.5,
             lineHeight: "1rem",
             fontWeight: 600,
-            color: colors.accentText,
+            color: isAgentExpired ? EXPIRED_AGENT_COLOR : colors.accentText,
           }}
         >
           {(wallet.name || "W")[0].toUpperCase()}
         </span>
+        <span
+          role="img"
+          aria-label={typeMeta.label}
+          title={typeMeta.label}
+          style={{
+            position: "absolute",
+            right: -5,
+            bottom: -5,
+            width: 16,
+            height: 16,
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: typeMeta.color,
+            background: typeMeta.background,
+            border: `1px solid ${typeMeta.border}`,
+            boxShadow: "0 1px 4px rgba(0,0,0,0.35)",
+          }}
+        >
+          {typeMeta.icon}
+        </span>
       </div>
       <div style={{ flex: 1, minWidth: 0 }}>
-        <p
+        <div
           style={{
-            margin: 0,
-            fontSize: 12.5,
-            lineHeight: "1rem",
-            fontWeight: 500,
-            color: profileColors.text,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
+            display: "flex",
+            alignItems: "center",
+            gap: 5,
+            minWidth: 0,
           }}
         >
-          {wallet.name || "Unnamed"}
-        </p>
+          <p
+            style={{
+              margin: 0,
+              fontSize: 12.5,
+              lineHeight: "1rem",
+              fontWeight: 500,
+              color: isAgentExpired ? EXPIRED_AGENT_COLOR : profileColors.text,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {wallet.name || "Unnamed"}
+          </p>
+        </div>
         <p
           style={{
             margin: 0,
             fontSize: 12.5,
             lineHeight: "1rem",
-            color: profileColors.muted,
+            color: isAgentExpired
+              ? "rgba(245,158,11,0.76)"
+              : profileColors.muted,
             fontFamily: fontFamily.mono,
           }}
         >
@@ -894,6 +1001,12 @@ function WalletRow({
           {wallet.ethereumAddress?.slice(-4)}
         </p>
       </div>
+      {agentExpiryTitle && (
+        <AgentExpiryWarningIcon
+          message={agentExpiryTitle}
+          onClick={onRenewAgentWallet}
+        />
+      )}
       <div
         style={{
           display: "flex",
@@ -904,6 +1017,21 @@ function WalletRow({
           transition: "opacity 120ms",
         }}
       >
+        {wallet.isAgent && onRenewAgentWallet && (
+          <IconBtn
+            color={isAgentExpired ? EXPIRED_AGENT_COLOR : colors.accent}
+            hoverBackgroundColor={
+              isAgentExpired
+                ? "rgba(245,158,11,0.12)"
+                : colors.accentHoverBackground
+            }
+            title="Renew agent wallet"
+            ariaLabel={`Renew agent wallet for ${wallet.name || "wallet"}`}
+            onClick={onRenewAgentWallet}
+          >
+            <RefreshCw size={13} />
+          </IconBtn>
+        )}
         {onShowPortfolio && (
           <IconBtn
             color={colors.accent}