@hfunlabs/hypurr-connect 0.1.13 → 0.1.15

package/src/WalletSelectorDropdown.tsx

@@ -9,15 +9,24 @@ import {
   type MouseEvent as ReactMouseEvent,
   type ReactNode,
 } from "react";
+import {
+  AgentExpiryWarningIcon,
+  EXPIRED_AGENT_COLOR,
+} from "./AgentExpiryWarning";
 import { useHypurrConnectInternal } from "./HypurrConnectProvider";
 import { UserProfileModal, type SlippageOption } from "./UserProfileModal";
+import { getAgentExpiryTitle } from "./agentWallet";
 import {
+  Bot,
   Copy,
   Crown,
+  Eye,
   Folder,
+  KeyRound,
   LayoutDashboard,
   LogOut,
   Plus,
+  RefreshCw,
   Star,
   User,
   Wallet,
@@ -36,6 +45,8 @@ export interface WalletSelectorDropdownProps {
   onAddWallet?: () => void;
   /** Called when the user clicks the portfolio icon on a wallet row. */
   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;
   /**
    * Called before the SDK's `logout()` runs. Host can do extra cleanup
    * (e.g. wagmi `disconnect()`).
@@ -67,6 +78,21 @@ export interface WalletSelectorDropdownProps {
   principalColors?: PrincipalColorOverrides;
   /** CSS color used as the dropdown panel background. Defaults to `rgba(20,20,20,0.95)`. */
   backgroundColor?: string;
+  /** Extra footer rows rendered between "Profile & Settings" and "Logout". */
+  extraFooterItems?: ExtraFooterItem[];
+}
+
+export interface ExtraFooterItem {
+  /** Stable key for React reconciliation. */
+  key: string;
+  /** Leading icon (e.g. an icon from `./icons/lucide`). */
+  icon: ReactNode;
+  /** Row label. */
+  label: string;
+  /** Click handler. The dropdown is NOT auto-closed — call `onClose` yourself if desired. */
+  onClick: () => void;
+  /** Optional hover text color (matches the "Logout" red-on-hover pattern). */
+  hoverColor?: string;
 }
 
 const DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
@@ -75,6 +101,10 @@ interface DropdownWallet {
   id: number;
   name?: string | null;
   ethereumAddress?: string;
+  agentEthereumAddress?: HyperliquidWallet["agentEthereumAddress"];
+  isAgent?: boolean;
+  isReadOnly?: boolean;
+  agentExpiresAt?: HyperliquidWallet["agentExpiresAt"];
 }
 
 interface WalletListItem {
@@ -171,6 +201,41 @@ const formatCompactAddress = (addr: string | undefined) => {
   return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
 };
 
+const getDisplayAddress = (wallet: DropdownWallet) =>
+  wallet.isAgent && wallet.agentEthereumAddress?.value
+    ? wallet.agentEthereumAddress.value
+    : wallet.ethereumAddress;
+
+type WalletTypeMeta = {
+  label: string;
+  color: string;
+  icon: ReactNode;
+};
+
+function getWalletTypeMeta(wallet: DropdownWallet): WalletTypeMeta {
+  if (wallet.isAgent) {
+    return {
+      label: "Agent wallet",
+      color: "#38bdf8",
+      icon: <Bot size={12} />,
+    };
+  }
+
+  if (wallet.isReadOnly) {
+    return {
+      label: "Read-only wallet",
+      color: "#a78bfa",
+      icon: <Eye size={12} />,
+    };
+  }
+
+  return {
+    label: "Private-key wallet",
+    color: "#34d399",
+    icon: <KeyRound size={12} />,
+  };
+}
+
 const rootStyle: CSSProperties = {
   position: "absolute",
   right: 0,
@@ -217,6 +282,7 @@ export function WalletSelectorDropdown({
   onClose,
   onAddWallet,
   onShowPortfolio,
+  onRenewAgentWallet,
   onLogout,
   onNotify,
   vipThreshold = 10,
@@ -230,6 +296,7 @@ export function WalletSelectorDropdown({
   accentColor,
   principalColors,
   backgroundColor = DEFAULT_BACKGROUND_COLOR,
+  extraFooterItems,
 }: WalletSelectorDropdownProps): ReactNode {
   const { user, wallets, selectedWalletId, selectWallet, logout, authMethod } =
     useHypurrConnectInternal();
@@ -269,13 +336,19 @@ export function WalletSelectorDropdown({
   const renderWalletRow = (item: WalletListItem, depth: number): ReactNode => {
     const { wallet, label } = item;
     const isSelected = wallet.id === selectedWalletId;
-    const compactAddress = formatCompactAddress(wallet.ethereumAddress);
+    const displayAddress = getDisplayAddress(wallet);
+    const compactAddress = formatCompactAddress(displayAddress);
+    const agentExpiryTitle = getAgentExpiryTitle({
+      isAgent: !!wallet.isAgent,
+      agentExpiresAt: wallet.agentExpiresAt,
+    });
     return (
       <WalletRow
         key={wallet.id}
         depth={depth}
         isSelected={isSelected}
         label={label}
+        walletType={getWalletTypeMeta(wallet)}
         compactAddress={compactAddress}
         onSelect={() => {
           selectWallet(wallet.id);
@@ -289,7 +362,16 @@ export function WalletSelectorDropdown({
               }
             : undefined
         }
-        onCopy={() => handleCopyAddress(wallet.ethereumAddress)}
+        onCopy={() => handleCopyAddress(displayAddress)}
+        agentExpiryTitle={agentExpiryTitle}
+        onRenewAgentWallet={
+          wallet.isAgent && onRenewAgentWallet
+            ? () => {
+                onRenewAgentWallet(wallet as HyperliquidWallet);
+                onClose();
+              }
+            : undefined
+        }
         colors={colors}
       />
     );
@@ -557,6 +639,15 @@ export function WalletSelectorDropdown({
                 icon={<User size={14} />}
                 label="Profile & Settings"
               />
+              {extraFooterItems?.map((item) => (
+                <FooterBtn
+                  key={item.key}
+                  onClick={item.onClick}
+                  icon={item.icon}
+                  label={item.label}
+                  hoverColor={item.hoverColor}
+                />
+              ))}
               <FooterBtn
                 onClick={handleLogout}
                 icon={<LogOut size={14} />}
@@ -580,6 +671,7 @@ export function WalletSelectorDropdown({
         principalColors={principalColors}
         onWalletDeleted={onWalletDeleted}
         onWalletRenamed={onWalletRenamed}
+        onRenewAgentWallet={onRenewAgentWallet}
         onShowPortfolio={
           onShowPortfolio
             ? (wallet) => {
@@ -628,21 +720,30 @@ function WalletRow({
   depth,
   isSelected,
   label,
+  walletType,
   compactAddress,
   onSelect,
   onShowPortfolio,
   onCopy,
+  agentExpiryTitle,
+  onRenewAgentWallet,
   colors,
 }: {
   depth: number;
   isSelected: boolean;
   label: string | null;
+  walletType: WalletTypeMeta;
   compactAddress: string;
   onSelect: () => void;
   onShowPortfolio?: () => void;
   onCopy: () => void;
+  agentExpiryTitle?: string | null;
+  onRenewAgentWallet?: () => void;
   colors: PrincipalColors;
 }) {
+  const isAgentExpired = !!agentExpiryTitle;
+  const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "#d1d5db";
+  const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "#6b7280";
   return (
     <div
       style={{
@@ -652,7 +753,7 @@ function WalletRow({
         paddingTop: 6,
         paddingBottom: 6,
         fontSize: 14,
-        color: "#d1d5db",
+        color: walletTextColor,
         display: "flex",
         alignItems: "center",
         background: isSelected ? "rgba(255,255,255,0.06)" : "transparent",
@@ -689,6 +790,19 @@ function WalletRow({
           padding: 0,
         }}
       >
+        <span
+          title={walletType.label}
+          aria-label={walletType.label}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            color: isAgentExpired ? walletTextColor : walletType.color,
+          }}
+        >
+          {walletType.icon}
+        </span>
         {label ? (
           <>
             <span
@@ -696,7 +810,11 @@ function WalletRow({
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 whiteSpace: "nowrap",
-                color: isSelected ? "#fff" : undefined,
+                color: isAgentExpired
+                  ? walletTextColor
+                  : isSelected
+                    ? "#fff"
+                    : undefined,
                 fontWeight: isSelected ? 500 : undefined,
               }}
             >
@@ -707,7 +825,7 @@ function WalletRow({
                 fontSize: 12,
                 fontWeight: 400,
                 flexShrink: 0,
-                color: "#6b7280",
+                color: mutedTextColor,
               }}
             >
               ({compactAddress})
@@ -717,7 +835,11 @@ function WalletRow({
           <span
             style={{
               fontSize: 12,
-              color: isSelected ? "#fff" : "#9ca3af",
+              color: isAgentExpired
+                ? walletTextColor
+                : isSelected
+                  ? "#fff"
+                  : "#9ca3af",
               fontWeight: isSelected ? 500 : undefined,
             }}
           >
@@ -725,6 +847,12 @@ function WalletRow({
           </span>
         )}
       </button>
+      {agentExpiryTitle && (
+        <AgentExpiryWarningIcon
+          message={agentExpiryTitle}
+          onClick={onRenewAgentWallet}
+        />
+      )}
       <div
         data-row-actions
         style={{
@@ -734,6 +862,18 @@ function WalletRow({
           transition: "opacity 120ms",
         }}
       >
+        {onRenewAgentWallet && (
+          <RowIconBtn
+            title="Renew agent wallet"
+            hoverColor={isAgentExpired ? EXPIRED_AGENT_COLOR : colors.accent}
+            onClick={(e) => {
+              e.stopPropagation();
+              onRenewAgentWallet();
+            }}
+          >
+            <RefreshCw size={12} />
+          </RowIconBtn>
+        )}
         {onShowPortfolio && (
           <RowIconBtn
             title="View portfolio"

package/src/agent.ts

@@ -50,14 +50,14 @@ interface ExtraAgent {
   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(
+function isNamedAgent(agent: ExtraAgent): boolean {
+  return agent.name.replace(/ valid_until \d+$/, "") === AGENT_NAME;
+}
+
+async function fetchExtraAgents(
   userAddress: string,
   isTestnet: boolean,
-): Promise<ExtraAgent | null> {
+): Promise<ExtraAgent[]> {
   const url = isTestnet
     ? "https://api.hyperliquid-testnet.xyz/info"
     : "https://api.hyperliquid.xyz/info";
@@ -68,17 +68,43 @@ export async function fetchActiveAgent(
     body: JSON.stringify({ type: "extraAgents", user: userAddress }),
   });
 
-  if (!res.ok) return null;
+  if (!res.ok) return [];
 
   const agents: unknown = await res.json();
-  if (!Array.isArray(agents)) return null;
+  if (!Array.isArray(agents)) return [];
+
+  return (agents as ExtraAgent[]).map((agent) => ({
+    ...agent,
+    validUntil: agent.validUntil * 1000,
+  }));
+}
 
+/**
+ * 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 nowMs = Date.now();
-  const match = (agents as ExtraAgent[]).find(
-    (a) => a.name === AGENT_NAME && a.validUntil * 1000 > nowMs,
-  );
+  const agents = await fetchExtraAgents(userAddress, isTestnet);
+  const match = agents.find((a) => isNamedAgent(a) && a.validUntil > nowMs);
   if (!match) return null;
-  return { ...match, validUntil: match.validUntil * 1000 };
+  return match;
+}
+
+export async function fetchAgentByAddress(
+  userAddress: string,
+  agentAddress: string,
+  isTestnet: boolean,
+): Promise<ExtraAgent | null> {
+  const agents = await fetchExtraAgents(userAddress, isTestnet);
+  return (
+    agents.find(
+      (agent) => agent.address.toLowerCase() === agentAddress.toLowerCase(),
+    ) ?? null
+  );
 }
 
 /**

package/src/agentWallet.ts

@@ -0,0 +1,86 @@
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
+
+const MS_PER_SECOND = 1_000;
+const NS_PER_MS = 1_000_000;
+const MS_PER_DAY = 24 * 60 * 60 * 1_000;
+const TELEGRAM_AGENT_APPROVAL_NAME = "xyz";
+
+export interface AgentApprovalDurationOption {
+  label: string;
+  durationMs: number;
+}
+
+export const DEFAULT_AGENT_APPROVAL_DURATION_MS = MS_PER_DAY;
+
+export const AGENT_APPROVAL_DURATION_OPTIONS: AgentApprovalDurationOption[] = [
+  { label: "1 day", durationMs: MS_PER_DAY },
+  { label: "7 days", durationMs: 7 * MS_PER_DAY },
+  { label: "30 days", durationMs: 30 * MS_PER_DAY },
+  { label: "90 days", durationMs: 90 * MS_PER_DAY },
+];
+
+type TimestampLike =
+  | {
+      seconds?: number | string | bigint;
+      nanos?: number | string | bigint;
+    }
+  | string
+  | number
+  | Date;
+
+function toFiniteNumber(value: number | string | bigint | undefined): number {
+  if (value === undefined) return 0;
+  const numeric = typeof value === "bigint" ? Number(value) : Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+}
+
+export function normalizeAgentApprovalDurationMs(durationMs?: number): number {
+  return typeof durationMs === "number" &&
+    Number.isFinite(durationMs) &&
+    durationMs > 0
+    ? durationMs
+    : DEFAULT_AGENT_APPROVAL_DURATION_MS;
+}
+
+export function createTelegramAgentApprovalName(durationMs?: number): string {
+  const expiresAt = Date.now() + normalizeAgentApprovalDurationMs(durationMs);
+  return `${TELEGRAM_AGENT_APPROVAL_NAME} valid_until ${expiresAt}`;
+}
+
+type WalletWithAgentExpiry = Pick<HyperliquidWallet, "isAgent"> & {
+  agentExpiresAt?: unknown;
+};
+
+export function agentExpiresAtMs(wallet: WalletWithAgentExpiry): number | null {
+  if (!wallet.isAgent || !wallet.agentExpiresAt) return null;
+
+  const timestamp = wallet.agentExpiresAt as TimestampLike;
+  if (timestamp instanceof Date) return timestamp.getTime();
+  if (typeof timestamp === "number") return timestamp;
+  if (typeof timestamp === "string") {
+    const parsed = Date.parse(timestamp);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+
+  const seconds = toFiniteNumber(timestamp.seconds);
+  const nanos = toFiniteNumber(timestamp.nanos);
+  const ms = seconds * MS_PER_SECOND + Math.floor(nanos / NS_PER_MS);
+  return Number.isFinite(ms) && ms > 0 ? ms : null;
+}
+
+export function formatAgentExpiry(expiresAtMs: number): string {
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(expiresAtMs));
+}
+
+export function getAgentExpiryTitle(
+  wallet: WalletWithAgentExpiry,
+): string | null {
+  const expiresAtMs = agentExpiresAtMs(wallet);
+  if (!expiresAtMs || expiresAtMs > Date.now()) return null;
+
+  const expiresAt = formatAgentExpiry(expiresAtMs);
+  return `Agent approval expired ${expiresAt}. Connect the owner wallet to renew this agent.`;
+}

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/icons/lucide.tsx

@@ -70,6 +70,67 @@ export function Wallet(props: IconProps) {
   );
 }
 
+export function Bot(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M12 8V4H8" />
+      <rect width="16" height="12" x="4" y="8" rx="2" />
+      <path d="M2 14h2" />
+      <path d="M20 14h2" />
+      <path d="M15 13v2" />
+      <path d="M9 13v2" />
+    </svg>
+  );
+}
+
+export function Eye(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function EyeOff(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M10.733 5.076a10.74 10.74 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.8 10.8 0 0 1-1.444 2.49" />
+      <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+      <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+      <path d="m2 2 20 20" />
+    </svg>
+  );
+}
+
+export function Check(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export function KeyRound(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
+      <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function RefreshCw(props: IconProps) {
+  return (
+    <svg {...svgBase(props)}>
+      <path d="M3 12a9 9 0 0 1 15.18-6.49" />
+      <path d="M21 3v6h-6" />
+      <path d="M21 12a9 9 0 0 1-15.18 6.49" />
+      <path d="M3 21v-6h6" />
+    </svg>
+  );
+}
+
 export function TrendingUp(props: IconProps) {
   return (
     <svg {...svgBase(props)}>

package/src/index.ts

@@ -1,11 +1,20 @@
+import "./styles.css";
+
 export {
   HypurrConnectProvider,
   useHypurrConnect,
 } from "./HypurrConnectProvider";
 export { LoginModal } from "./LoginModal";
 export type { LoginModalProps } from "./LoginModal";
+export { AddWalletModal } from "./AddWalletModal";
+export type { AddWalletModalProps } from "./AddWalletModal";
+export { RenewAgentModal } from "./RenewAgentModal";
+export type { RenewAgentModalProps } from "./RenewAgentModal";
 export { WalletSelectorDropdown } from "./WalletSelectorDropdown";
-export type { WalletSelectorDropdownProps } from "./WalletSelectorDropdown";
+export type {
+  WalletSelectorDropdownProps,
+  ExtraFooterItem,
+} from "./WalletSelectorDropdown";
 export { UserProfileModal } from "./UserProfileModal";
 export type { UserProfileModalProps, SlippageOption } from "./UserProfileModal";
 export { DeleteWalletModal } from "./DeleteWalletModal";
@@ -17,6 +26,12 @@ export { GrpcExchangeTransport } from "./GrpcExchangeTransport";
 export type { GrpcExchangeTransportConfig } from "./GrpcExchangeTransport";
 export { createTelegramClient, createStaticClient } from "./grpc";
 export { PrivateKeySigner } from "./privateKeySigner";
+export {
+  AGENT_APPROVAL_DURATION_OPTIONS,
+  DEFAULT_AGENT_APPROVAL_DURATION_MS,
+  createTelegramAgentApprovalName,
+} from "./agentWallet";
+export type { AgentApprovalDurationOption } from "./agentWallet";
 export { createEoaSigner } from "./types";
 export type {
   AuthMethod,
@@ -29,6 +44,7 @@ export type {
   HypurrConnectConfig,
   HypurrConnectState,
   HypurrUser,
+  RenewAgentWalletParams,
   ScaleCreateParams,
   SignEvmTransactionFn,
   SignTypedDataFn,

package/src/profileStyles.ts

@@ -37,6 +37,64 @@ export interface PrincipalColors {
 
 export type PrincipalColorOverrides = Partial<PrincipalColors>;
 
+const parseSrgb = (color: string): [number, number, number] | null => {
+  const value = color.trim();
+  const shortHex = /^#([0-9a-f]{3})$/i.exec(value);
+  if (shortHex) {
+    const [r, g, b] = shortHex[1].split("").map((c) => parseInt(c + c, 16)) as [
+      number,
+      number,
+      number,
+    ];
+    return [r, g, b];
+  }
+  const longHex = /^#([0-9a-f]{6})$/i.exec(value);
+  if (longHex) {
+    const v = longHex[1];
+    return [
+      parseInt(v.slice(0, 2), 16),
+      parseInt(v.slice(2, 4), 16),
+      parseInt(v.slice(4, 6), 16),
+    ];
+  }
+  const rgb =
+    /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(
+      value,
+    );
+  if (rgb) {
+    return [parseInt(rgb[1], 10), parseInt(rgb[2], 10), parseInt(rgb[3], 10)];
+  }
+  return null;
+};
+
+/**
+ * WCAG-style relative luminance in [0, 1]. Returns `null` for color formats
+ * the parser doesn't understand (named colors, hsl, color-mix, …).
+ */
+export const relativeLuminance = (color: string): number | null => {
+  const rgb = parseSrgb(color);
+  if (!rgb) return null;
+  const [r, g, b] = rgb.map((c) => {
+    const v = c / 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  }) as [number, number, number];
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+/**
+ * Picks a readable foreground for `background`. Falls back to `lightFg` when
+ * the background can't be parsed.
+ */
+export const pickContrastColor = (
+  background: string,
+  lightFg: string = profileColors.text,
+  darkFg: string = "#0a0a0a",
+): string => {
+  const lum = relativeLuminance(background);
+  if (lum === null) return lightFg;
+  return lum > 0.5 ? darkFg : lightFg;
+};
+
 const colorWithAlpha = (color: string, alpha: number): string => {
   const hex = color.trim();
   const shortHex = /^#([0-9a-f]{3})$/i.exec(hex);

package/src/styles.css

@@ -0,0 +1 @@
+.hypurr-connect .btn-raised{background-color:#0d1219;background-image:linear-gradient(180deg,hsla(0,0%,100%,.03),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.1),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px #262a30;color:#aab1c1;transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised:hover:not(:disabled){background-color:#15171a;background-image:linear-gradient(180deg,hsla(0,0%,100%,.04),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.14),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px #444548;color:#d1d5db}.hypurr-connect .btn-raised-active{background-color:#1e2124;background-image:linear-gradient(180deg,hsla(0,0%,100%,.05),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px #4b4d50,0 1px 2px rgba(0,0,0,.5);color:#fff}.hypurr-connect .btn-raised-active,.hypurr-connect .btn-raised-disabled{transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised-disabled{background-color:#0d1219;background-image:linear-gradient(180deg,hsla(0,0%,100%,.02),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.05),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px #1c2026;color:#7d8597;cursor:not-allowed}.hypurr-connect .\!visible{visibility:visible!important}.hypurr-connect .visible{visibility:visible}.hypurr-connect .fixed{position:fixed}.hypurr-connect .absolute{position:absolute}.hypurr-connect .relative{position:relative}.hypurr-connect .inset-0{inset:0}.hypurr-connect .right-2{right:.5rem}.hypurr-connect .right-6{right:1.5rem}.hypurr-connect .top-1\/2{top:50%}.hypurr-connect .z-\[100\]{z-index:100}.hypurr-connect .z-\[101\]{z-index:101}.hypurr-connect .z-\[110\]{z-index:110}.hypurr-connect .z-\[111\]{z-index:111}.hypurr-connect .mb-1\.5{margin-bottom:.375rem}.hypurr-connect .mb-2{margin-bottom:.5rem}.hypurr-connect .mt-0\.5{margin-top:.125rem}.hypurr-connect .mt-1{margin-top:.25rem}.hypurr-connect .mt-1\.5{margin-top:.375rem}.hypurr-connect .block{display:block}.hypurr-connect .inline-block{display:inline-block}.hypurr-connect .inline{display:inline}.hypurr-connect .flex{display:flex}.hypurr-connect .inline-flex{display:inline-flex}.hypurr-connect .grid{display:grid}.hypurr-connect .contents{display:contents}.hypurr-connect .hidden{display:none}.hypurr-connect .h-8{height:2rem}.hypurr-connect .w-8{width:2rem}.hypurr-connect .w-full{width:100%}.hypurr-connect .min-w-0{min-width:0}.hypurr-connect .max-w-md{max-width:28rem}.hypurr-connect .flex-1{flex:1 1 0%}.hypurr-connect .flex-shrink-0{flex-shrink:0}.hypurr-connect .-translate-y-1\/2{--tw-translate-y:-50%}.hypurr-connect .-translate-y-1\/2,.hypurr-connect .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hypurr-connect .cursor-not-allowed{cursor:not-allowed}.hypurr-connect .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hypurr-connect .items-start{align-items:flex-start}.hypurr-connect .items-center{align-items:center}.hypurr-connect .justify-center{justify-content:center}.hypurr-connect .justify-between{justify-content:space-between}.hypurr-connect .gap-1\.5{gap:.375rem}.hypurr-connect .gap-2{gap:.5rem}.hypurr-connect .gap-3{gap:.75rem}.hypurr-connect :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.hypurr-connect .overflow-hidden{overflow:hidden}.hypurr-connect .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hypurr-connect .break-all{word-break:break-all}.hypurr-connect .rounded{border-radius:.25rem}.hypurr-connect .rounded-lg{border-radius:.5rem}.hypurr-connect .rounded-md{border-radius:.375rem}.hypurr-connect .border{border-width:1px}.hypurr-connect .border-b{border-bottom-width:1px}.hypurr-connect .border-amber-500\/25{border-color:rgba(245,158,11,.25)}.hypurr-connect .border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.hypurr-connect .border-purple-500{--tw-border-opacity:1;border-color:rgb(185 125 241/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd{--tw-border-opacity:1;border-color:rgb(38 42 48/var(--tw-border-opacity,1))}.hypurr-connect .border-trade-down\/20{border-color:hsla(0,91%,71%,.2)}.hypurr-connect .border-trade-down\/50{border-color:hsla(0,91%,71%,.5)}.hypurr-connect .border-white\/\[0\.06\]{border-color:hsla(0,0%,100%,.06)}.hypurr-connect .border-white\/\[0\.08\]{border-color:hsla(0,0%,100%,.08)}.hypurr-connect .bg-amber-500\/\[0\.08\]{background-color:rgba(245,158,11,.08)}.hypurr-connect .bg-black\/70{background-color:rgba(0,0,0,.7)}.hypurr-connect .bg-surface-btn\/90{background-color:rgba(13,18,25,.9)}.hypurr-connect .bg-surface-modal{--tw-bg-opacity:1;background-color:rgb(14 18 24/var(--tw-bg-opacity,1))}.hypurr-connect .bg-trade-down\/\[0\.08\]{background-color:hsla(0,91%,71%,.08)}.hypurr-connect .bg-transparent{background-color:transparent}.hypurr-connect .bg-white\/\[0\.03\]{background-color:hsla(0,0%,100%,.03)}.hypurr-connect .bg-white\/\[0\.06\]{background-color:hsla(0,0%,100%,.06)}.hypurr-connect .p-1\.5{padding:.375rem}.hypurr-connect .p-3{padding:.75rem}.hypurr-connect .p-4{padding:1rem}.hypurr-connect .px-3{padding-left:.75rem;padding-right:.75rem}.hypurr-connect .px-6{padding-left:1.5rem;padding-right:1.5rem}.hypurr-connect .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.hypurr-connect .py-2{padding-top:.5rem;padding-bottom:.5rem}.hypurr-connect .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.hypurr-connect .py-5{padding-top:1.25rem}.hypurr-connect .pb-5,.hypurr-connect .py-5{padding-bottom:1.25rem}.hypurr-connect .pb-6{padding-bottom:1.5rem}.hypurr-connect .pr-11{padding-right:2.75rem}.hypurr-connect .pt-5{padding-top:1.25rem}.hypurr-connect .pt-6{padding-top:1.5rem}.hypurr-connect .font-mono{font-family:Google Sans Code,Roboto Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hypurr-connect .font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.hypurr-connect .text-base{font-size:12.5px;line-height:1rem}.hypurr-connect .text-lg{font-size:14px;line-height:1.25rem}.hypurr-connect .font-medium{font-weight:500}.hypurr-connect .font-semibold{font-weight:600}.hypurr-connect .uppercase{text-transform:uppercase}.hypurr-connect .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.hypurr-connect .tracking-\[0\.1em\]{letter-spacing:.1em}.hypurr-connect .text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.hypurr-connect .text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-400{--tw-text-opacity:1;color:rgb(170 177 193/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-600{--tw-text-opacity:1;color:rgb(125 133 151/var(--tw-text-opacity,1))}.hypurr-connect .text-purple-400{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-down{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-up{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.hypurr-connect .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hypurr-connect .placeholder-gray-600::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(125 133 151/var(--tw-placeholder-opacity,1))}.hypurr-connect .placeholder-gray-600::placeholder{--tw-placeholder-opacity:1;color:rgb(125 133 151/var(--tw-placeholder-opacity,1))}.hypurr-connect .shadow-modal{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.6);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hypurr-connect .outline{outline-style:solid}.hypurr-connect .blur{--tw-blur:blur(8px)}.hypurr-connect .blur,.hypurr-connect .drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hypurr-connect .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.hypurr-connect .filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hypurr-connect .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.hypurr-connect .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .hover\:bg-purple-500\/10:hover{background-color:rgba(185,125,241,.1)}.hypurr-connect .hover\:text-gray-300:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.hypurr-connect .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hypurr-connect .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.hypurr-connect .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.hypurr-connect .disabled\:opacity-40:disabled{opacity:.4}.hypurr-connect .disabled\:opacity-50:disabled{opacity:.5}