npm - @hfunlabs/hypurr-connect - Versions diffs - 0.1.13 → 0.1.15 - Mend

@hfunlabs/hypurr-connect 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +12 -0
package/dist/index.d.ts +89 -4
package/dist/index.js +1858 -348
package/dist/index.js.map +1 -1
package/package.json +17 -6
package/src/AddWalletModal.tsx +744 -0
package/src/AgentExpiryWarning.tsx +129 -0
package/src/DeleteWalletModal.tsx +5 -1
package/src/HypurrConnectProvider.tsx +193 -1
package/src/LoginModal.tsx +30 -19
package/src/RenameWalletModal.tsx +5 -1
package/src/RenewAgentModal.tsx +380 -0
package/src/UserProfileModal.tsx +157 -25
package/src/WalletSelectorDropdown.tsx +146 -6
package/src/agent.ts +38 -12
package/src/agentWallet.ts +86 -0
package/src/css.d.ts +1 -0
package/src/icons/lucide.tsx +61 -0
package/src/index.ts +17 -1
package/src/profileStyles.ts +58 -0
package/src/styles.css +1 -0
package/src/tailwind.css +77 -0
package/src/types.ts +13 -0

package/dist/index.js CHANGED Viewed

@@ -1,3 +1,28 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+// src/styles.css
+styleInject(".hypurr-connect .btn-raised {\n  background-color: #0d1219;\n  background-image:\n    linear-gradient(\n      180deg,\n      hsla(0, 0%, 100%, .03),\n      transparent);\n  box-shadow:\n    inset 0 1px 0 hsla(0, 0%, 100%, .1),\n    inset 0 -1px 0 rgba(0, 0, 0, .35),\n    inset 0 0 0 1px #262a30;\n  color: #aab1c1;\n  transition:\n    background-color .15s,\n    color .15s,\n    background-image .15s,\n    box-shadow .15s;\n}\n.hypurr-connect .btn-raised:hover:not(:disabled) {\n  background-color: #15171a;\n  background-image:\n    linear-gradient(\n      180deg,\n      hsla(0, 0%, 100%, .04),\n      transparent);\n  box-shadow:\n    inset 0 1px 0 hsla(0, 0%, 100%, .14),\n    inset 0 -1px 0 rgba(0, 0, 0, .4),\n    inset 0 0 0 1px #444548;\n  color: #d1d5db;\n}\n.hypurr-connect .btn-raised-active {\n  background-color: #1e2124;\n  background-image:\n    linear-gradient(\n      180deg,\n      hsla(0, 0%, 100%, .05),\n      transparent);\n  box-shadow:\n    inset 0 1px 0 hsla(0, 0%, 100%, .18),\n    inset 0 -1px 0 rgba(0, 0, 0, .45),\n    inset 0 0 0 1px #4b4d50,\n    0 1px 2px rgba(0, 0, 0, .5);\n  color: #fff;\n}\n.hypurr-connect .btn-raised-active,\n.hypurr-connect .btn-raised-disabled {\n  transition:\n    background-color .15s,\n    color .15s,\n    background-image .15s,\n    box-shadow .15s;\n}\n.hypurr-connect .btn-raised-disabled {\n  background-color: #0d1219;\n  background-image:\n    linear-gradient(\n      180deg,\n      hsla(0, 0%, 100%, .02),\n      transparent);\n  box-shadow:\n    inset 0 1px 0 hsla(0, 0%, 100%, .05),\n    inset 0 -1px 0 rgba(0, 0, 0, .25),\n    inset 0 0 0 1px #1c2026;\n  color: #7d8597;\n  cursor: not-allowed;\n}\n.hypurr-connect .\\!visible {\n  visibility: visible !important;\n}\n.hypurr-connect .visible {\n  visibility: visible;\n}\n.hypurr-connect .fixed {\n  position: fixed;\n}\n.hypurr-connect .absolute {\n  position: absolute;\n}\n.hypurr-connect .relative {\n  position: relative;\n}\n.hypurr-connect .inset-0 {\n  inset: 0;\n}\n.hypurr-connect .right-2 {\n  right: .5rem;\n}\n.hypurr-connect .right-6 {\n  right: 1.5rem;\n}\n.hypurr-connect .top-1\\/2 {\n  top: 50%;\n}\n.hypurr-connect .z-\\[100\\] {\n  z-index: 100;\n}\n.hypurr-connect .z-\\[101\\] {\n  z-index: 101;\n}\n.hypurr-connect .z-\\[110\\] {\n  z-index: 110;\n}\n.hypurr-connect .z-\\[111\\] {\n  z-index: 111;\n}\n.hypurr-connect .mb-1\\.5 {\n  margin-bottom: .375rem;\n}\n.hypurr-connect .mb-2 {\n  margin-bottom: .5rem;\n}\n.hypurr-connect .mt-0\\.5 {\n  margin-top: .125rem;\n}\n.hypurr-connect .mt-1 {\n  margin-top: .25rem;\n}\n.hypurr-connect .mt-1\\.5 {\n  margin-top: .375rem;\n}\n.hypurr-connect .block {\n  display: block;\n}\n.hypurr-connect .inline-block {\n  display: inline-block;\n}\n.hypurr-connect .inline {\n  display: inline;\n}\n.hypurr-connect .flex {\n  display: flex;\n}\n.hypurr-connect .inline-flex {\n  display: inline-flex;\n}\n.hypurr-connect .grid {\n  display: grid;\n}\n.hypurr-connect .contents {\n  display: contents;\n}\n.hypurr-connect .hidden {\n  display: none;\n}\n.hypurr-connect .h-8 {\n  height: 2rem;\n}\n.hypurr-connect .w-8 {\n  width: 2rem;\n}\n.hypurr-connect .w-full {\n  width: 100%;\n}\n.hypurr-connect .min-w-0 {\n  min-width: 0;\n}\n.hypurr-connect .max-w-md {\n  max-width: 28rem;\n}\n.hypurr-connect .flex-1 {\n  flex: 1 1 0%;\n}\n.hypurr-connect .flex-shrink-0 {\n  flex-shrink: 0;\n}\n.hypurr-connect .-translate-y-1\\/2 {\n  --tw-translate-y:-50%;\n}\n.hypurr-connect .-translate-y-1\\/2,\n.hypurr-connect .transform {\n  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));\n}\n.hypurr-connect .cursor-not-allowed {\n  cursor: not-allowed;\n}\n.hypurr-connect .grid-cols-4 {\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n.hypurr-connect .items-start {\n  align-items: flex-start;\n}\n.hypurr-connect .items-center {\n  align-items: center;\n}\n.hypurr-connect .justify-center {\n  justify-content: center;\n}\n.hypurr-connect .justify-between {\n  justify-content: space-between;\n}\n.hypurr-connect .gap-1\\.5 {\n  gap: .375rem;\n}\n.hypurr-connect .gap-2 {\n  gap: .5rem;\n}\n.hypurr-connect .gap-3 {\n  gap: .75rem;\n}\n.hypurr-connect :is(.space-y-2 > :not([hidden]) ~ :not([hidden])) {\n  --tw-space-y-reverse:0;\n  margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(.5rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {\n  --tw-space-y-reverse:0;\n  margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(.75rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {\n  --tw-space-y-reverse:0;\n  margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(1rem*var(--tw-space-y-reverse));\n}\n.hypurr-connect .overflow-hidden {\n  overflow: hidden;\n}\n.hypurr-connect .truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.hypurr-connect .break-all {\n  word-break: break-all;\n}\n.hypurr-connect .rounded {\n  border-radius: .25rem;\n}\n.hypurr-connect .rounded-lg {\n  border-radius: .5rem;\n}\n.hypurr-connect .rounded-md {\n  border-radius: .375rem;\n}\n.hypurr-connect .border {\n  border-width: 1px;\n}\n.hypurr-connect .border-b {\n  border-bottom-width: 1px;\n}\n.hypurr-connect .border-amber-500\\/25 {\n  border-color: rgba(245, 158, 11, .25);\n}\n.hypurr-connect .border-gray-700 {\n  --tw-border-opacity:1;\n  border-color: rgb(55 65 81/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-purple-500 {\n  --tw-border-opacity:1;\n  border-color: rgb(185 125 241/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-surface-bd {\n  --tw-border-opacity:1;\n  border-color: rgb(38 42 48/var(--tw-border-opacity,1));\n}\n.hypurr-connect .border-trade-down\\/20 {\n  border-color: hsla(0, 91%, 71%, .2);\n}\n.hypurr-connect .border-trade-down\\/50 {\n  border-color: hsla(0, 91%, 71%, .5);\n}\n.hypurr-connect .border-white\\/\\[0\\.06\\] {\n  border-color: hsla(0, 0%, 100%, .06);\n}\n.hypurr-connect .border-white\\/\\[0\\.08\\] {\n  border-color: hsla(0, 0%, 100%, .08);\n}\n.hypurr-connect .bg-amber-500\\/\\[0\\.08\\] {\n  background-color: rgba(245, 158, 11, .08);\n}\n.hypurr-connect .bg-black\\/70 {\n  background-color: rgba(0, 0, 0, .7);\n}\n.hypurr-connect .bg-surface-btn\\/90 {\n  background-color: rgba(13, 18, 25, .9);\n}\n.hypurr-connect .bg-surface-modal {\n  --tw-bg-opacity:1;\n  background-color: rgb(14 18 24/var(--tw-bg-opacity,1));\n}\n.hypurr-connect .bg-trade-down\\/\\[0\\.08\\] {\n  background-color: hsla(0, 91%, 71%, .08);\n}\n.hypurr-connect .bg-transparent {\n  background-color: transparent;\n}\n.hypurr-connect .bg-white\\/\\[0\\.03\\] {\n  background-color: hsla(0, 0%, 100%, .03);\n}\n.hypurr-connect .bg-white\\/\\[0\\.06\\] {\n  background-color: hsla(0, 0%, 100%, .06);\n}\n.hypurr-connect .p-1\\.5 {\n  padding: .375rem;\n}\n.hypurr-connect .p-3 {\n  padding: .75rem;\n}\n.hypurr-connect .p-4 {\n  padding: 1rem;\n}\n.hypurr-connect .px-3 {\n  padding-left: .75rem;\n  padding-right: .75rem;\n}\n.hypurr-connect .px-6 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n.hypurr-connect .py-1\\.5 {\n  padding-top: .375rem;\n  padding-bottom: .375rem;\n}\n.hypurr-connect .py-2 {\n  padding-top: .5rem;\n  padding-bottom: .5rem;\n}\n.hypurr-connect .py-2\\.5 {\n  padding-top: .625rem;\n  padding-bottom: .625rem;\n}\n.hypurr-connect .py-5 {\n  padding-top: 1.25rem;\n}\n.hypurr-connect .pb-5,\n.hypurr-connect .py-5 {\n  padding-bottom: 1.25rem;\n}\n.hypurr-connect .pb-6 {\n  padding-bottom: 1.5rem;\n}\n.hypurr-connect .pr-11 {\n  padding-right: 2.75rem;\n}\n.hypurr-connect .pt-5 {\n  padding-top: 1.25rem;\n}\n.hypurr-connect .pt-6 {\n  padding-top: 1.5rem;\n}\n.hypurr-connect .font-mono {\n  font-family:\n    Google Sans Code,\n    Roboto Mono,\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n}\n.hypurr-connect .font-sans {\n  font-family:\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    Segoe UI,\n    Roboto,\n    Helvetica Neue,\n    Arial,\n    sans-serif;\n}\n.hypurr-connect .text-base {\n  font-size: 12.5px;\n  line-height: 1rem;\n}\n.hypurr-connect .text-lg {\n  font-size: 14px;\n  line-height: 1.25rem;\n}\n.hypurr-connect .font-medium {\n  font-weight: 500;\n}\n.hypurr-connect .font-semibold {\n  font-weight: 600;\n}\n.hypurr-connect .uppercase {\n  text-transform: uppercase;\n}\n.hypurr-connect .tabular-nums {\n  --tw-numeric-spacing:tabular-nums;\n  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n.hypurr-connect .tracking-\\[0\\.1em\\] {\n  letter-spacing: .1em;\n}\n.hypurr-connect .text-amber-200 {\n  --tw-text-opacity:1;\n  color: rgb(253 230 138/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-amber-400 {\n  --tw-text-opacity:1;\n  color: rgb(251 191 36/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-gray-400 {\n  --tw-text-opacity:1;\n  color: rgb(170 177 193/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-gray-500 {\n  --tw-text-opacity:1;\n  color: rgb(107 114 128/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-gray-600 {\n  --tw-text-opacity:1;\n  color: rgb(125 133 151/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-purple-400 {\n  --tw-text-opacity:1;\n  color: rgb(216 180 254/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-down {\n  --tw-text-opacity:1;\n  color: rgb(248 113 113/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-trade-up {\n  --tw-text-opacity:1;\n  color: rgb(52 211 153/var(--tw-text-opacity,1));\n}\n.hypurr-connect .text-white {\n  --tw-text-opacity:1;\n  color: rgb(255 255 255/var(--tw-text-opacity,1));\n}\n.hypurr-connect .placeholder-gray-600::-moz-placeholder {\n  --tw-placeholder-opacity:1;\n  color: rgb(125 133 151/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .placeholder-gray-600::placeholder {\n  --tw-placeholder-opacity:1;\n  color: rgb(125 133 151/var(--tw-placeholder-opacity,1));\n}\n.hypurr-connect .shadow-modal {\n  --tw-shadow:0 25px 50px -12px rgba(0,0,0,.6);\n  --tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow,0 0 #0000),\n    var(--tw-ring-shadow,0 0 #0000),\n    var(--tw-shadow);\n}\n.hypurr-connect .outline {\n  outline-style: solid;\n}\n.hypurr-connect .blur {\n  --tw-blur:blur(8px);\n}\n.hypurr-connect .blur,\n.hypurr-connect .drop-shadow {\n  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);\n}\n.hypurr-connect .drop-shadow {\n  --tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06));\n}\n.hypurr-connect .filter {\n  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);\n}\n.hypurr-connect .backdrop-blur-sm {\n  --tw-backdrop-blur:blur(4px);\n  -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);\n  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);\n}\n.hypurr-connect .transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    opacity,\n    box-shadow,\n    transform,\n    filter,\n    -webkit-backdrop-filter;\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    opacity,\n    box-shadow,\n    transform,\n    filter,\n    backdrop-filter;\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    opacity,\n    box-shadow,\n    transform,\n    filter,\n    backdrop-filter,\n    -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n  transition-duration: .15s;\n}\n.hypurr-connect .transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n  transition-duration: .15s;\n}\n.hypurr-connect .hover\\:bg-purple-500\\/10:hover {\n  background-color: rgba(185, 125, 241, .1);\n}\n.hypurr-connect .hover\\:text-gray-300:hover {\n  --tw-text-opacity:1;\n  color: rgb(209 213 219/var(--tw-text-opacity,1));\n}\n.hypurr-connect .hover\\:text-white:hover {\n  --tw-text-opacity:1;\n  color: rgb(255 255 255/var(--tw-text-opacity,1));\n}\n.hypurr-connect .focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.hypurr-connect .disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n.hypurr-connect .disabled\\:opacity-40:disabled {\n  opacity: .4;\n}\n.hypurr-connect .disabled\\:opacity-50:disabled {\n  opacity: .5;\n}\n");
 // src/HypurrConnectProvider.tsx
 import {
   ExchangeClient,
@@ -62,22 +87,36 @@ async function generateAgentKey() {
   const signer = new PrivateKeySigner(privateKey);
   return { privateKey, address: signer.address };
 }
-async function fetchActiveAgent(userAddress, isTestnet) {
+function isNamedAgent(agent) {
+  return agent.name.replace(/ valid_until \d+$/, "") === AGENT_NAME;
+}
+async function fetchExtraAgents(userAddress, isTestnet) {
   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;
+  if (!res.ok) return [];
   const agents = await res.json();
-  if (!Array.isArray(agents)) return null;
+  if (!Array.isArray(agents)) return [];
+  return agents.map((agent) => ({
+    ...agent,
+    validUntil: agent.validUntil * 1e3
+  }));
+}
+async function fetchActiveAgent(userAddress, isTestnet) {
   const nowMs = Date.now();
-  const match = agents.find(
-    (a) => a.name === AGENT_NAME && a.validUntil * 1e3 > 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 * 1e3 };
+  return match;
+}
+async function fetchAgentByAddress(userAddress, agentAddress, isTestnet) {
+  const agents = await fetchExtraAgents(userAddress, isTestnet);
+  return agents.find(
+    (agent) => agent.address.toLowerCase() === agentAddress.toLowerCase()
+  ) ?? null;
 }
 async function isAgentValid(stored, userAddress, isTestnet) {
   if (stored.validUntil <= Date.now()) return false;
@@ -197,6 +236,57 @@ var GrpcExchangeTransport = class {
   }
 };
+// src/agentWallet.ts
+var MS_PER_SECOND = 1e3;
+var NS_PER_MS = 1e6;
+var MS_PER_DAY = 24 * 60 * 60 * 1e3;
+var TELEGRAM_AGENT_APPROVAL_NAME = "xyz";
+var DEFAULT_AGENT_APPROVAL_DURATION_MS = MS_PER_DAY;
+var AGENT_APPROVAL_DURATION_OPTIONS = [
+  { 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 }
+];
+function toFiniteNumber(value) {
+  if (value === void 0) return 0;
+  const numeric = typeof value === "bigint" ? Number(value) : Number(value);
+  return Number.isFinite(numeric) ? numeric : 0;
+}
+function normalizeAgentApprovalDurationMs(durationMs) {
+  return typeof durationMs === "number" && Number.isFinite(durationMs) && durationMs > 0 ? durationMs : DEFAULT_AGENT_APPROVAL_DURATION_MS;
+}
+function createTelegramAgentApprovalName(durationMs) {
+  const expiresAt = Date.now() + normalizeAgentApprovalDurationMs(durationMs);
+  return `${TELEGRAM_AGENT_APPROVAL_NAME} valid_until ${expiresAt}`;
+}
+function agentExpiresAtMs(wallet) {
+  if (!wallet.isAgent || !wallet.agentExpiresAt) return null;
+  const timestamp = wallet.agentExpiresAt;
+  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;
+}
+function formatAgentExpiry(expiresAtMs) {
+  return new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(new Date(expiresAtMs));
+}
+function getAgentExpiryTitle(wallet) {
+  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.`;
+}
 // src/HypurrConnectProvider.tsx
 import { jsx } from "react/jsx-runtime";
 var TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-jwt";
@@ -205,6 +295,23 @@ var TELEGRAM_AUTH_STATE_KEY = "hypurr-connect-auth-state";
 var TELEGRAM_AUTH_MESSAGE = "hypurr-connect:telegram-auth";
 var DEFAULT_AUTH_HUB_URL = "https://auth.hypurr.fun/login";
 var DEFAULT_MEDIA_URL = "https://media.hypurr.fun";
+var USER_SIGNED_DOMAIN_NAME = "HyperliquidSignTransaction";
+var ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+var APPROVE_AGENT_PRIMARY_TYPE = "HyperliquidTransaction:ApproveAgent";
+var APPROVE_AGENT_TYPES = {
+  [APPROVE_AGENT_PRIMARY_TYPE]: [
+    { name: "hyperliquidChain", type: "string" },
+    { name: "agentAddress", type: "address" },
+    { name: "agentName", type: "string" },
+    { name: "nonce", type: "uint64" }
+  ]
+};
+var EIP712_DOMAIN_TYPES = [
+  { name: "name", type: "string" },
+  { name: "version", type: "string" },
+  { name: "chainId", type: "uint256" },
+  { name: "verifyingContract", type: "address" }
+];
 var IGNORED_EXTERNAL_SIGNATURE = "0x000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001b";
 var DEFAULT_TELEGRAM_SCOPES = [
   "telegram:user:read",
@@ -239,6 +346,46 @@ function normalizeMediaUrl(mediaUrl) {
 function isAddress(value) {
   return !!value && /^0x[a-fA-F0-9]{40}$/.test(value);
 }
+function createApproveAgentAction(params) {
+  const nonce = Date.now();
+  return {
+    action: {
+      type: "approveAgent",
+      signatureChainId: `0x${params.chainId.toString(16)}`,
+      hyperliquidChain: params.isTestnet ? "Testnet" : "Mainnet",
+      agentAddress: params.agentAddress.toLowerCase(),
+      agentName: params.agentName,
+      nonce
+    },
+    nonce
+  };
+}
+async function signApproveAgentAction(params) {
+  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) {
   if (typeof result === "string" && result.startsWith("0x")) {
     return result;
@@ -877,6 +1024,104 @@ function HypurrConnectProvider({
     },
     [tgClient, telegramRpcOptions, refreshWallets]
   );
+  const renewAgentWallet = useCallback(
+    async ({
+      walletId,
+      ownerAddress,
+      signTypedDataAsync,
+      chainId,
+      approvalDurationMs,
+      agentName
+    }) => {
+      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) => {
       const { response } = await tgClient.telegramChatWalletPackCreate(
@@ -1052,7 +1297,9 @@ function HypurrConnectProvider({
     sessionStorage.setItem(TELEGRAM_AUTH_STATE_KEY, state);
     const configuredReturnTo = config.telegram?.returnTo;
     const returnTo = typeof configuredReturnTo === "function" ? 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));
@@ -1219,6 +1466,7 @@ function HypurrConnectProvider({
       createWallet,
       deleteWallet,
       renameWallet,
+      renewAgentWallet,
       refreshWallets,
       packs,
       createWalletPack,
@@ -1261,6 +1509,7 @@ function HypurrConnectProvider({
       createWallet,
       deleteWallet,
       renameWallet,
+      renewAgentWallet,
       refreshWallets,
       packs,
       createWalletPack,
@@ -1434,6 +1683,7 @@ function TelegramColorIcon({ style }) {
 // src/LoginModal.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MOBILE_BREAKPOINT = 640;
+var DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
 var btnStyle = {
   display: "flex",
   height: 53,
@@ -1441,18 +1691,18 @@ var btnStyle = {
   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"
 };
-var btnHoverBg = { background: "rgba(255,255,255,0.1)" };
+var btnHoverBg = { background: "rgba(255,255,255,0.15)" };
 var backdropStyle = {
   position: "fixed",
   inset: 0,
@@ -1479,13 +1729,12 @@ var modalBoxStyle = {
   overflow: "hidden",
   borderRadius: 12,
   border: "1px solid rgba(255,255,255,0.1)",
-  background: "#282828",
   padding: 24
 };
 var headingStyle = {
-  fontSize: 16,
-  fontWeight: 700,
-  letterSpacing: "-0.025em",
+  fontSize: 20,
+  fontWeight: 500,
+  letterSpacing: "-0.03em",
   color: "#fff",
   margin: 0
 };
@@ -1494,7 +1743,7 @@ var dividerStyle = {
   width: "100%",
   background: "rgba(255,255,255,0.05)"
 };
-var iconSize = { width: 20, height: 20 };
+var iconSize = { width: 26, height: 26 };
 var mobileQuery = typeof window !== "undefined" ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`) : null;
 function subscribeMobile(cb) {
   mobileQuery?.addEventListener("change", cb);
@@ -1521,7 +1770,11 @@ function HoverButton({
     }
   );
 }
-function LoginModal({ onConnectWallet, walletIcon }) {
+function LoginModal({
+  onConnectWallet,
+  walletIcon,
+  backgroundColor = DEFAULT_BACKGROUND_COLOR
+}) {
   const { loginTelegram, loginModalOpen, closeLoginModal } = useHypurrConnectInternal();
   const handleTelegramAuth = useCallback2(() => {
     closeLoginModal();
@@ -1561,7 +1814,15 @@ function LoginModal({ onConnectWallet, walletIcon }) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(MobileDrawer, { onClose: closeLoginModal, children: modalContent }, "drawer") : /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(
+    MobileDrawer,
+    {
+      onClose: closeLoginModal,
+      backgroundColor,
+      children: modalContent
+    },
+    "drawer"
+  ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx4(
       motion.div,
       {
@@ -1586,7 +1847,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
         children: /* @__PURE__ */ jsxs3(
           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 },
@@ -1618,7 +1879,6 @@ var drawerSheetStyle = {
   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))"
 };
 var drawerBgStyle = {
@@ -1628,7 +1888,6 @@ var drawerBgStyle = {
   top: 0,
   bottom: "-100vh",
   zIndex: -1,
-  background: "#282828",
   borderTopLeftRadius: 12,
   borderTopRightRadius: 12
 };
@@ -1641,12 +1900,13 @@ var grabHandleStyle = {
   margin: "0 auto",
   height: 4,
   width: 100,
-  borderRadius: 9999,
+  borderRadius: 4,
   background: "rgba(255,255,255,0.05)"
 };
 function MobileDrawer({
   children,
-  onClose
+  onClose,
+  backgroundColor
 }) {
   const controls = useAnimationControls();
   const handleDragEnd = useCallback2(
@@ -1675,7 +1935,7 @@ function MobileDrawer({
     /* @__PURE__ */ jsxs3(
       motion.div,
       {
-        style: drawerSheetStyle,
+        style: { ...drawerSheetStyle, background: backgroundColor },
         initial: { y: "100%" },
         animate: { y: 0 },
         exit: { y: "100%" },
@@ -1685,7 +1945,7 @@ function MobileDrawer({
         dragElastic: { top: 0, bottom: 0.4 },
         onDragEnd: handleDragEnd,
         children: [
-          /* @__PURE__ */ jsx4("div", { style: drawerBgStyle }),
+          /* @__PURE__ */ jsx4("div", { style: { ...drawerBgStyle, background: backgroundColor } }),
           /* @__PURE__ */ jsx4("div", { style: grabHandleAreaStyle, children: /* @__PURE__ */ jsx4("div", { style: grabHandleStyle }) }),
           /* @__PURE__ */ jsx4("p", { style: headingStyle, children: "Connect" }),
           children
@@ -1696,28 +1956,9 @@ function MobileDrawer({
   ] });
 }
-// src/WalletSelectorDropdown.tsx
-import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
-import {
-  Fragment as Fragment5,
-  useCallback as useCallback6,
-  useMemo as useMemo2,
-  useState as useState5
-} from "react";
-// src/UserProfileModal.tsx
-import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
-import {
-  useCallback as useCallback5,
-  useState as useState4
-} from "react";
-// src/DeleteWalletModal.tsx
+// src/AddWalletModal.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
-import {
-  useCallback as useCallback3,
-  useState as useState2
-} from "react";
+import { useCallback as useCallback3, useState as useState2 } from "react";
 // src/icons/lucide.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1764,6 +2005,47 @@ function Wallet(props) {
     /* @__PURE__ */ jsx5("path", { d: "M18 12a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4v-4z" })
   ] });
 }
+function Bot(props) {
+  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
+    /* @__PURE__ */ jsx5("path", { d: "M12 8V4H8" }),
+    /* @__PURE__ */ jsx5("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M2 14h2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M20 14h2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M15 13v2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M9 13v2" })
+  ] });
+}
+function Eye(props) {
+  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
+    /* @__PURE__ */ jsx5("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" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function EyeOff(props) {
+  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
+    /* @__PURE__ */ jsx5("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" }),
+    /* @__PURE__ */ jsx5("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+    /* @__PURE__ */ jsx5("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" }),
+    /* @__PURE__ */ jsx5("path", { d: "m2 2 20 20" })
+  ] });
+}
+function Check(props) {
+  return /* @__PURE__ */ jsx5("svg", { ...svgBase(props), children: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function KeyRound(props) {
+  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
+    /* @__PURE__ */ jsx5("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" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "16.5", cy: "7.5", r: ".5", fill: "currentColor" })
+  ] });
+}
+function RefreshCw(props) {
+  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
+    /* @__PURE__ */ jsx5("path", { d: "M3 12a9 9 0 0 1 15.18-6.49" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 3v6h-6" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 12a9 9 0 0 1-15.18 6.49" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 21v-6h6" })
+  ] });
+}
 function TrendingUp(props) {
   return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
     /* @__PURE__ */ jsx5("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }),
@@ -1838,21 +2120,1026 @@ function LogOut(props) {
     /* @__PURE__ */ jsx5("line", { x1: "21", x2: "9", y1: "12", y2: "12" })
   ] });
 }
-function Plus(props) {
-  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
-    /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx5("path", { d: "M12 5v14" })
+function Plus(props) {
+  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
+    /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 5v14" })
+  ] });
+}
+function X(props) {
+  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
+    /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
+  ] });
+}
+function SpinKeyframes() {
+  return /* @__PURE__ */ jsx5("style", { children: `@keyframes hypurr-spin { to { transform: rotate(360deg); } }` });
+}
+// src/AddWalletModal.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var WALLET_NAME_REGEX = /^[a-zA-Z0-9/]*$/;
+var PRIVATE_KEY_REGEX = /^(0x)?[a-fA-F0-9]{64}$/;
+var BASE_TAB_KEYS = ["generate", "import", "api"];
+function createAuthSignatureRequest(chainId, hyperliquidChain, agentAddress, approvalDurationMs) {
+  const nonce = Date.now();
+  return {
+    domain: {
+      name: "HyperliquidSignTransaction",
+      version: "1",
+      chainId,
+      verifyingContract: "0x0000000000000000000000000000000000000000"
+    },
+    types: {
+      "HyperliquidTransaction:ApproveAgent": [
+        { name: "hyperliquidChain", type: "string" },
+        { name: "agentAddress", type: "address" },
+        { name: "agentName", type: "string" },
+        { name: "nonce", type: "uint64" }
+      ]
+    },
+    primaryType: "HyperliquidTransaction:ApproveAgent",
+    message: {
+      hyperliquidChain,
+      agentAddress: agentAddress.toLowerCase(),
+      agentName: createTelegramAgentApprovalName(approvalDurationMs),
+      nonce
+    }
+  };
+}
+var tabClass = (selected) => `flex-1 py-1.5 rounded text-base font-medium flex items-center justify-center gap-1.5 ${selected ? "btn-raised-active" : "btn-raised"}`;
+var inputClass = (hasError) => `w-full bg-surface-btn/90 border ${hasError ? "border-trade-down/50" : "border-surface-bd"} rounded-lg px-3 py-2.5 text-white placeholder-gray-600 focus:outline-none font-mono text-base`;
+var formatAddress = (address) => `${address.slice(0, 6)}...${address.slice(-4)}`;
+function AddWalletModal({
+  isOpen,
+  onClose,
+  ownerAddress,
+  isWalletConnected,
+  chainId,
+  signTypedDataAsync,
+  onConnectWallet,
+  onDisconnectWallet,
+  onWalletAdded,
+  onAddReadOnlyWallet,
+  onNotify,
+  hyperliquidChain = "Mainnet",
+  agentApprovalDurationOptions,
+  defaultAgentApprovalDurationMs = DEFAULT_AGENT_APPROVAL_DURATION_MS
+}) {
+  const tabKeys = onAddReadOnlyWallet ? [...BASE_TAB_KEYS, "readonly"] : BASE_TAB_KEYS;
+  const [activeTab, setActiveTab] = useState2("generate");
+  const [isLoading, setIsLoading] = useState2(false);
+  const [walletName, setWalletName] = useState2("");
+  const [newWalletName, setNewWalletName] = useState2("");
+  const [importWalletName, setImportWalletName] = useState2("");
+  const [importPrivateKey, setImportPrivateKey] = useState2("");
+  const [showImportPrivateKey, setShowImportPrivateKey] = useState2(false);
+  const [readOnlyAddress, setReadOnlyAddress] = useState2("");
+  const [agentApprovalDurationMs, setAgentApprovalDurationMs] = useState2(
+    defaultAgentApprovalDurationMs
+  );
+  const [error, setError] = useState2(null);
+  const {
+    authMethod,
+    createWallet,
+    isLoading: userLoading,
+    refreshWallets,
+    telegramClient,
+    telegramRpcOptions
+  } = useHypurrConnectInternal();
+  const isValidWalletName = walletName.length > 0 && WALLET_NAME_REGEX.test(walletName);
+  const isValidNewWalletName = newWalletName.length > 0 && WALLET_NAME_REGEX.test(newWalletName);
+  const isValidImportWalletName = importWalletName.length > 0 && WALLET_NAME_REGEX.test(importWalletName);
+  const trimmedImportPrivateKey = importPrivateKey.trim();
+  const isValidImportPrivateKey = PRIVATE_KEY_REGEX.test(
+    trimmedImportPrivateKey
+  );
+  const isProcessing = isLoading || userLoading;
+  const durationOptions = agentApprovalDurationOptions && agentApprovalDurationOptions.length > 0 ? agentApprovalDurationOptions : AGENT_APPROVAL_DURATION_OPTIONS;
+  const handleClose = useCallback3(() => {
+    if (isProcessing) return;
+    setError(null);
+    setImportPrivateKey("");
+    setShowImportPrivateKey(false);
+    onClose();
+  }, [isProcessing, onClose]);
+  const assertTelegramReady = useCallback3(() => {
+    if (authMethod !== "telegram" || !telegramRpcOptions) {
+      throw new Error("Telegram login is required to add wallets");
+    }
+  }, [authMethod, telegramRpcOptions]);
+  const completeWalletAdded = useCallback3(
+    async (wallet) => {
+      refreshWallets();
+      await onWalletAdded?.(wallet);
+    },
+    [onWalletAdded, refreshWallets]
+  );
+  const handleCreateWallet = useCallback3(async () => {
+    if (!isValidNewWalletName) {
+      setError("Wallet name may only contain letters, numbers, and /");
+      return;
+    }
+    setError(null);
+    setIsLoading(true);
+    try {
+      assertTelegramReady();
+      const wallet = await createWallet(newWalletName);
+      await completeWalletAdded(wallet);
+      onNotify?.({ type: "success", message: "Wallet created successfully" });
+      setNewWalletName("");
+      handleClose();
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Failed to create wallet";
+      setError(message);
+      onNotify?.({ type: "error", message });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    assertTelegramReady,
+    completeWalletAdded,
+    createWallet,
+    handleClose,
+    isValidNewWalletName,
+    newWalletName,
+    onNotify
+  ]);
+  const handleImportWallet = useCallback3(async () => {
+    if (!isValidImportWalletName) {
+      setError("Wallet name may only contain letters, numbers, and /");
+      return;
+    }
+    if (!isValidImportPrivateKey) {
+      setError("Please enter a valid 64-character hex private key");
+      return;
+    }
+    setError(null);
+    setIsLoading(true);
+    try {
+      assertTelegramReady();
+      const response = await telegramClient.hyperliquidWalletImport(
+        {
+          authData: {},
+          name: importWalletName,
+          privateKey: trimmedImportPrivateKey
+        },
+        telegramRpcOptions
+      );
+      await completeWalletAdded(response.response.wallet);
+      onNotify?.({ type: "success", message: "Wallet imported successfully" });
+      setImportWalletName("");
+      setImportPrivateKey("");
+      handleClose();
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Failed to import wallet";
+      setError(message);
+      onNotify?.({ type: "error", message });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    assertTelegramReady,
+    completeWalletAdded,
+    handleClose,
+    importWalletName,
+    isValidImportPrivateKey,
+    isValidImportWalletName,
+    onNotify,
+    telegramClient,
+    telegramRpcOptions,
+    trimmedImportPrivateKey
+  ]);
+  const handleSignAndAdd = useCallback3(async () => {
+    if (!ownerAddress) {
+      onConnectWallet?.();
+      return;
+    }
+    if (!signTypedDataAsync || !chainId) {
+      setError("Wallet signing is not ready yet");
+      return;
+    }
+    if (!isValidWalletName) {
+      setError("Wallet name may only contain letters, numbers, and /");
+      return;
+    }
+    setError(null);
+    setIsLoading(true);
+    try {
+      assertTelegramReady();
+      const res = await telegramClient.hyperliquidAgentSignatureCreate(
+        { authData: {}, address: ownerAddress },
+        telegramRpcOptions
+      );
+      const agentAddress = res.response.agent;
+      const request = createAuthSignatureRequest(
+        chainId,
+        hyperliquidChain,
+        agentAddress,
+        agentApprovalDurationMs
+      );
+      const signature = await signTypedDataAsync(request);
+      await telegramClient.hyperliquidAgentWalletCreate(
+        {
+          authData: {},
+          name: walletName,
+          signature: {
+            agentAddress: request.message.agentAddress,
+            agentName: request.message.agentName,
+            nonce: request.message.nonce,
+            chainId,
+            signature
+          }
+        },
+        telegramRpcOptions
+      );
+      await completeWalletAdded();
+      onNotify?.({ type: "success", message: "Wallet added successfully" });
+      onDisconnectWallet?.();
+      setWalletName("");
+      handleClose();
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Failed to add wallet";
+      setError(message);
+      onNotify?.({ type: "error", message });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    assertTelegramReady,
+    agentApprovalDurationMs,
+    chainId,
+    completeWalletAdded,
+    handleClose,
+    hyperliquidChain,
+    isValidWalletName,
+    onConnectWallet,
+    onDisconnectWallet,
+    onNotify,
+    ownerAddress,
+    signTypedDataAsync,
+    telegramClient,
+    telegramRpcOptions,
+    walletName
+  ]);
+  const handleAddReadOnly = useCallback3(async () => {
+    const trimmed = readOnlyAddress.trim();
+    if (!trimmed) {
+      setError("Please enter a wallet address");
+      return;
+    }
+    if (!/^0x[a-fA-F0-9]{40}$/.test(trimmed)) {
+      setError("Invalid Ethereum address format");
+      return;
+    }
+    setError(null);
+    setIsLoading(true);
+    try {
+      await onAddReadOnlyWallet?.(trimmed);
+      onNotify?.({ type: "success", message: "Read-only wallet added" });
+      setReadOnlyAddress("");
+      handleClose();
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Failed to add wallet";
+      setError(message);
+      onNotify?.({ type: "error", message });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [handleClose, onAddReadOnlyWallet, onNotify, readOnlyAddress]);
+  return /* @__PURE__ */ jsx6(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs5(motion2.div, { className: "hypurr-connect", style: { display: "contents" }, children: [
+    /* @__PURE__ */ jsx6(SpinKeyframes, {}),
+    /* @__PURE__ */ jsx6(
+      motion2.div,
+      {
+        className: "fixed inset-0 z-[100] bg-black/70 backdrop-blur-sm",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.15 },
+        onClick: handleClose
+      }
+    ),
+    /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-[101] flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs5(
+      motion2.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(),
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center justify-center border-b border-white/[0.06] px-6 pb-5 pt-6", children: [
+            /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold text-white", children: "Add Wallet" }),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                onClick: handleClose,
+                disabled: isProcessing,
+                className: "absolute right-6 text-gray-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-40",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx6(X, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5 px-6 pt-5", children: tabKeys.map((tab) => /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setError(null);
+                setActiveTab(tab);
+              },
+              className: tabClass(activeTab === tab),
+              children: tab === "generate" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsx6(Plus, { size: 13 }),
+                " New"
+              ] }) : tab === "import" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsx6(KeyRound, { size: 13 }),
+                " Import"
+              ] }) : tab === "api" ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsx6(Wallet, { size: 13 }),
+                " Link"
+              ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsx6(Eye, { size: 13 }),
+                " Watch"
+              ] })
+            },
+            tab
+          )) }),
+          /* @__PURE__ */ jsxs5("div", { className: "px-6 pb-6 pt-5", children: [
+            activeTab === "generate" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Create a new Hyperliquid wallet." }),
+              /* @__PURE__ */ jsx6(
+                WalletNameInput,
+                {
+                  value: newWalletName,
+                  setValue: setNewWalletName,
+                  isValid: isValidNewWalletName,
+                  clearError: () => setError(null),
+                  placeholder: "MyNewWallet"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  onClick: handleCreateWallet,
+                  disabled: isProcessing || !isValidNewWalletName,
+                  className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && isValidNewWalletName ? "btn-raised" : "btn-raised-disabled"}`,
+                  children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
+                    " Creating..."
+                  ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsx6(Plus, { size: 14 }),
+                    " Create Wallet"
+                  ] })
+                }
+              ),
+              error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
+            ] }),
+            activeTab === "import" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Import a Hyperliquid wallet with its private key." }),
+              /* @__PURE__ */ jsx6(
+                WalletNameInput,
+                {
+                  value: importWalletName,
+                  setValue: setImportWalletName,
+                  isValid: isValidImportWalletName,
+                  clearError: () => setError(null),
+                  placeholder: "MyImportedWallet"
+                }
+              ),
+              /* @__PURE__ */ jsxs5("div", { children: [
+                /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Private Key" }),
+                /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx6(
+                    "input",
+                    {
+                      type: showImportPrivateKey ? "text" : "password",
+                      value: importPrivateKey,
+                      onChange: (event) => {
+                        setImportPrivateKey(event.target.value);
+                        setError(null);
+                      },
+                      placeholder: "0x...",
+                      spellCheck: false,
+                      autoComplete: "off",
+                      className: `${inputClass(
+                        !!importPrivateKey && !isValidImportPrivateKey
+                      )} pr-11`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setShowImportPrivateKey((visible) => !visible),
+                      className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-500 transition-colors hover:text-gray-300",
+                      "aria-label": showImportPrivateKey ? "Hide private key" : "Show private key",
+                      children: showImportPrivateKey ? /* @__PURE__ */ jsx6(EyeOff, { size: 15 }) : /* @__PURE__ */ jsx6(Eye, { size: 15 })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  onClick: handleImportWallet,
+                  disabled: isProcessing || !isValidImportWalletName || !isValidImportPrivateKey,
+                  className: `flex w-full items-center justify-center gap-2 rounded-lg border bg-transparent py-2 text-base font-medium transition-colors ${!isProcessing && isValidImportWalletName && isValidImportPrivateKey ? "border-purple-500 text-purple-400 hover:bg-purple-500/10" : "cursor-not-allowed border-gray-700 text-gray-600"}`,
+                  children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
+                    " Importing..."
+                  ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsx6(KeyRound, { size: 14 }),
+                    " Import Wallet"
+                  ] })
+                }
+              ),
+              error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
+            ] }),
+            activeTab === "api" && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Connect your wallet and sign to link it for trading." }),
+              !isWalletConnected || !ownerAddress ? /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  onClick: onConnectWallet,
+                  className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
+                  children: [
+                    /* @__PURE__ */ jsx6(Wallet, { size: 14 }),
+                    " Connect Wallet"
+                  ]
+                }
+              ) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 rounded-lg border border-white/[0.06] bg-white/[0.03] px-3 py-2.5", children: [
+                  /* @__PURE__ */ jsx6("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]", children: /* @__PURE__ */ jsx6(Wallet, { size: 14, className: "text-gray-400" }) }),
+                  /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "Connected" }),
+                    /* @__PURE__ */ jsx6("p", { className: "font-mono text-base text-white", children: formatAddress(ownerAddress) })
+                  ] }),
+                  /* @__PURE__ */ jsx6(
+                    Check,
+                    {
+                      size: 16,
+                      className: "flex-shrink-0 text-trade-up"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx6(
+                  WalletNameInput,
+                  {
+                    value: walletName,
+                    setValue: setWalletName,
+                    isValid: isValidWalletName,
+                    clearError: () => setError(null),
+                    placeholder: "MyWallet"
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  ApprovalDurationPicker,
+                  {
+                    value: agentApprovalDurationMs,
+                    onChange: setAgentApprovalDurationMs,
+                    options: durationOptions,
+                    disabled: isProcessing
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    onClick: handleSignAndAdd,
+                    disabled: isProcessing || !isValidWalletName,
+                    className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && isValidWalletName ? "btn-raised" : "btn-raised-disabled"}`,
+                    children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                      /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
+                      " Signing..."
+                    ] }) : "Sign & Add Wallet"
+                  }
+                ),
+                onDisconnectWallet && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    onClick: onDisconnectWallet,
+                    className: "w-full py-1.5 text-base text-gray-400 transition-colors hover:text-gray-300",
+                    children: "Disconnect & use different wallet"
+                  }
+                )
+              ] }),
+              error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
+            ] }),
+            activeTab === "readonly" && onAddReadOnlyWallet && /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx6("p", { className: "text-base text-gray-400", children: "View positions and balances without trading access." }),
+              /* @__PURE__ */ jsxs5("div", { children: [
+                /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Wallet Address" }),
+                /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    type: "text",
+                    value: readOnlyAddress,
+                    onChange: (event) => setReadOnlyAddress(event.target.value),
+                    placeholder: "0x...",
+                    className: inputClass()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  onClick: handleAddReadOnly,
+                  disabled: isProcessing || !readOnlyAddress.trim(),
+                  className: `flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${!isProcessing && readOnlyAddress.trim() ? "btn-raised" : "btn-raised-disabled"}`,
+                  children: isProcessing ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
+                    " Adding..."
+                  ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsx6(Eye, { size: 14 }),
+                    " Add Watch Wallet"
+                  ] })
+                }
+              ),
+              error && /* @__PURE__ */ jsx6(ErrorBox, { message: error })
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+function WalletNameInput({
+  value,
+  setValue,
+  isValid,
+  clearError,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Wallet Name" }),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (event) => {
+          const nextValue = event.target.value;
+          if (WALLET_NAME_REGEX.test(nextValue) || nextValue === "") {
+            setValue(nextValue);
+            clearError();
+          }
+        },
+        placeholder,
+        className: inputClass(!!value && !isValid)
+      }
+    ),
+    /* @__PURE__ */ jsx6("p", { className: "mt-1.5 text-base text-gray-600", children: "Letters, numbers, and / only" })
+  ] });
+}
+function ApprovalDurationPicker({
+  value,
+  onChange,
+  options,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx6("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Approval Duration" }),
+    /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-4 gap-1.5", children: options.map((option) => /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(option.durationMs),
+        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"}`,
+        children: option.label
+      },
+      `${option.label}-${option.durationMs}`
+    )) })
+  ] });
+}
+function ErrorBox({ message }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
+    /* @__PURE__ */ jsx6(
+      AlertTriangle,
+      {
+        size: 14,
+        className: "mt-0.5 flex-shrink-0 text-trade-down"
+      }
+    ),
+    /* @__PURE__ */ jsx6("p", { className: "text-base text-trade-down", children: message })
+  ] });
+}
+// src/RenewAgentModal.tsx
+import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
+import { useCallback as useCallback4, useMemo as useMemo2, useState as useState3 } from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var isHexAddress = (address) => !!address && /^0x[a-fA-F0-9]{40}$/.test(address);
+var formatAddress2 = (address) => address ? `${address.slice(0, 6)}...${address.slice(-4)}` : "";
+var isSameAddress = (a, b) => isHexAddress(a) && isHexAddress(b) && a.toLowerCase() === b.toLowerCase();
+function RenewAgentModal({
+  isOpen,
+  onClose,
+  wallet,
+  ownerAddress,
+  isWalletConnected,
+  chainId,
+  signTypedDataAsync,
+  onConnectWallet,
+  onDisconnectWallet,
+  onRenewed,
+  onNotify,
+  approvalDurationOptions,
+  defaultApprovalDurationMs = DEFAULT_AGENT_APPROVAL_DURATION_MS
+}) {
+  const { renewAgentWallet } = useHypurrConnectInternal();
+  const [isRenewing, setIsRenewing] = useState3(false);
+  const [approvalDurationMs, setApprovalDurationMs] = useState3(
+    defaultApprovalDurationMs
+  );
+  const [error, setError] = useState3(null);
+  const expiryMessage = useMemo2(
+    () => wallet ? getAgentExpiryTitle(wallet) : null,
+    [wallet]
+  );
+  const currentExpiryMs = useMemo2(
+    () => 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 = useCallback4(() => {
+    if (isRenewing) return;
+    setError(null);
+    onClose();
+  }, [isRenewing, onClose]);
+  const handleRenew = useCallback4(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 ${formatAddress2(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) {
+      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 /* @__PURE__ */ jsx7(AnimatePresence3, { children: isOpen && wallet && /* @__PURE__ */ jsxs6(motion3.div, { className: "hypurr-connect", style: { display: "contents" }, children: [
+    /* @__PURE__ */ jsx7(SpinKeyframes, {}),
+    /* @__PURE__ */ jsx7(
+      motion3.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
+      }
+    ),
+    /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[111] flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs6(
+      motion3.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(),
+        children: [
+          /* @__PURE__ */ jsxs6("div", { className: "relative flex items-center justify-center border-b border-white/[0.06] px-6 pb-5 pt-6", children: [
+            /* @__PURE__ */ jsx7("h3", { className: "text-lg font-semibold text-white", children: "Renew Agent Wallet" }),
+            /* @__PURE__ */ jsx7(
+              "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",
+                children: /* @__PURE__ */ jsx7(X, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "space-y-4 px-6 py-5", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 rounded-lg border border-amber-500/25 bg-amber-500/[0.08] p-3", children: [
+              /* @__PURE__ */ jsx7(
+                AlertTriangle,
+                {
+                  size: 14,
+                  className: "mt-0.5 flex-shrink-0 text-amber-400"
+                }
+              ),
+              /* @__PURE__ */ jsx7("p", { className: "text-base text-amber-200", children: expiryMessage ?? (currentExpiryMs ? `Current approval expires ${formatAgentExpiry(
+                currentExpiryMs
+              )}. Renew to extend this agent wallet.` : "Renew this agent wallet with a fresh owner approval.") })
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "rounded-lg border border-white/[0.06] bg-white/[0.03] p-3", children: [
+              /* @__PURE__ */ jsx7("p", { className: "mb-1.5 text-base uppercase tracking-[0.1em] text-gray-400", children: "Agent address" }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx7("p", { className: "truncate text-base font-medium text-white", children: wallet.name || "Unnamed Wallet" }),
+                  /* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-gray-400", children: hasAgentAddress ? formatAddress2(agentAddress) : "Missing agent address" })
+                ] }),
+                /* @__PURE__ */ jsx7(
+                  AlertTriangle,
+                  {
+                    size: 16,
+                    className: "flex-shrink-0 text-amber-400"
+                  }
+                )
+              ] })
+            ] }),
+            ownerReady ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 rounded-lg border border-white/[0.06] bg-white/[0.03] px-3 py-2.5", children: [
+              /* @__PURE__ */ jsx7("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]", children: /* @__PURE__ */ jsx7(Wallet, { size: 14, className: "text-gray-400" }) }),
+              /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx7("p", { className: "text-base text-gray-400", children: "Owner wallet connected" }),
+                /* @__PURE__ */ jsx7("p", { className: "font-mono text-base text-white", children: formatAddress2(ownerAddress) })
+              ] }),
+              /* @__PURE__ */ jsx7(Check, { size: 16, className: "flex-shrink-0 text-trade-up" })
+            ] }) : hasConnectedOwner && !ownerMatches ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2", children: [
+                /* @__PURE__ */ jsx7(
+                  AlertTriangle,
+                  {
+                    size: 14,
+                    className: "mt-0.5 flex-shrink-0 text-trade-down"
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: "Wrong owner wallet connected" }),
+                  /* @__PURE__ */ jsxs6("p", { className: "mt-1 font-mono text-base text-gray-400", children: [
+                    "Connected ",
+                    formatAddress2(ownerAddress)
+                  ] }),
+                  /* @__PURE__ */ jsxs6("p", { className: "font-mono text-base text-gray-400", children: [
+                    "Required ",
+                    formatAddress2(expectedOwnerAddress)
+                  ] })
+                ] })
+              ] }),
+              onDisconnectWallet && /* @__PURE__ */ jsx7(
+                "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",
+                  children: "Disconnect Wallet"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                onClick: onConnectWallet,
+                className: "btn-raised flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium",
+                children: [
+                  /* @__PURE__ */ jsx7(Wallet, { size: 14 }),
+                  " Connect Owner Wallet",
+                  hasExpectedOwner ? ` ${formatAddress2(expectedOwnerAddress)}` : ""
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx7(
+              ApprovalDurationPicker2,
+              {
+                value: approvalDurationMs,
+                onChange: setApprovalDurationMs,
+                options: durationOptions,
+                disabled: isRenewing
+              }
+            ),
+            error && /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-2 rounded-lg border border-trade-down/20 bg-trade-down/[0.08] p-3", children: [
+              /* @__PURE__ */ jsx7(
+                AlertTriangle,
+                {
+                  size: 14,
+                  className: "mt-0.5 flex-shrink-0 text-trade-down"
+                }
+              ),
+              /* @__PURE__ */ jsx7("p", { className: "text-base text-trade-down", children: error })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "space-y-2 px-6 pb-6", children: [
+            /* @__PURE__ */ jsx7(
+              "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"}`,
+                children: isRenewing ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+                  /* @__PURE__ */ jsx7(Loader2, { size: 14 }),
+                  " Renewing..."
+                ] }) : "Renew Agent Wallet"
+              }
+            ),
+            ownerReady && onDisconnectWallet && /* @__PURE__ */ jsx7(
+              "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",
+                children: "Disconnect & use different owner"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+function ApprovalDurationPicker2({
+  value,
+  onChange,
+  options,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx7("label", { className: "mb-2 block text-base uppercase tracking-[0.1em] text-gray-400", children: "Approval Duration" }),
+    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-4 gap-1.5", children: options.map((option) => /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(option.durationMs),
+        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"}`,
+        children: option.label
+      },
+      `${option.label}-${option.durationMs}`
+    )) })
   ] });
 }
-function X(props) {
-  return /* @__PURE__ */ jsxs4("svg", { ...svgBase(props), children: [
-    /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
+// src/WalletSelectorDropdown.tsx
+import { AnimatePresence as AnimatePresence7, motion as motion7 } from "framer-motion";
+import {
+  Fragment as Fragment8,
+  useCallback as useCallback9,
+  useMemo as useMemo3,
+  useState as useState8
+} from "react";
+// src/AgentExpiryWarning.tsx
+import {
+  useCallback as useCallback5,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var EXPIRED_AGENT_COLOR = "#f59e0b";
+function AgentExpiryWarningIcon({
+  message,
+  onClick,
+  size = 13
+}) {
+  const triggerRef = useRef2(null);
+  const [tooltipPosition, setTooltipPosition] = useState4(null);
+  const setTriggerRef = useCallback5((node) => {
+    triggerRef.current = node;
+  }, []);
+  const showTooltip = useCallback5(() => {
+    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 = useCallback5(() => {
+    setTooltipPosition(null);
+  }, []);
+  const triggerStyle = {
+    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 /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    onClick ? /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        ...sharedProps,
+        onClick: (event) => {
+          event.stopPropagation();
+          onClick();
+        },
+        children: /* @__PURE__ */ jsx8(AlertTriangle, { size, color: EXPIRED_AGENT_COLOR })
+      }
+    ) : /* @__PURE__ */ jsx8("span", { ...sharedProps, children: /* @__PURE__ */ jsx8(AlertTriangle, { size, color: EXPIRED_AGENT_COLOR }) }),
+    tooltipPosition && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "tooltip",
+        style: {
+          position: "fixed",
+          left: tooltipPosition.left,
+          top: tooltipPosition.top,
+          transform: "translateX(-50%)",
+          zIndex: 1e4,
+          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"
+        },
+        children: message
+      }
+    )
   ] });
 }
-function SpinKeyframes() {
-  return /* @__PURE__ */ jsx5("style", { children: `@keyframes hypurr-spin { to { transform: rotate(360deg); } }` });
-}
+// src/UserProfileModal.tsx
+import { AnimatePresence as AnimatePresence6, motion as motion6 } from "framer-motion";
+import {
+  useCallback as useCallback8,
+  useState as useState7
+} from "react";
+// src/DeleteWalletModal.tsx
+import { AnimatePresence as AnimatePresence4, motion as motion4 } from "framer-motion";
+import {
+  useCallback as useCallback6,
+  useState as useState5
+} from "react";
 // src/profileStyles.ts
 var profileColors = {
@@ -1880,6 +3167,44 @@ var fontFamily = {
   sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
   mono: "Google Sans Code, Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
 };
+var parseSrgb = (color) => {
+  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));
+    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;
+};
+var relativeLuminance = (color) => {
+  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);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var pickContrastColor = (background, lightFg = profileColors.text, darkFg = "#0a0a0a") => {
+  const lum = relativeLuminance(background);
+  if (lum === null) return lightFg;
+  return lum > 0.5 ? darkFg : lightFg;
+};
 var colorWithAlpha = (color, alpha) => {
   const hex = color.trim();
   const shortHex = /^#([0-9a-f]{3})$/i.exec(hex);
@@ -2018,7 +3343,7 @@ var dangerOutlineButtonStyle = (enabled, hovered = false) => ({
 });
 // src/DeleteWalletModal.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var DANGER_BG = "rgba(248,113,113,0.07)";
 var DANGER_BORDER = "rgba(248,113,113,0.2)";
 var backdropStyle2 = modalBackdropStyle(110);
@@ -2098,20 +3423,21 @@ function DeleteWalletModal({
   onConfirm,
   onNotify
 }) {
-  const [confirmName, setConfirmName] = useState2("");
-  const [isDeleting, setIsDeleting] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [deleteHovered, setDeleteHovered] = useState2(false);
+  const [confirmName, setConfirmName] = useState5("");
+  const [isDeleting, setIsDeleting] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [deleteHovered, setDeleteHovered] = useState5(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;
-  const handleClose = useCallback3(() => {
+  const handleClose = useCallback6(() => {
     if (isDeleting) return;
     setConfirmName("");
     setError(null);
     onClose();
   }, [isDeleting, onClose]);
-  const handleDelete = useCallback3(async () => {
+  const handleDelete = useCallback6(async () => {
     if (!wallet || !isNameMatch) return;
     setError(null);
     setIsDeleting(true);
@@ -2126,10 +3452,10 @@ function DeleteWalletModal({
       setIsDeleting(false);
     }
   }, [wallet, isNameMatch, onConfirm, onClose, onNotify]);
-  return /* @__PURE__ */ jsx6(AnimatePresence2, { children: isOpen && wallet && /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(SpinKeyframes, {}),
-    /* @__PURE__ */ jsx6(
-      motion2.div,
+  return /* @__PURE__ */ jsx9(AnimatePresence4, { children: isOpen && wallet && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx9(SpinKeyframes, {}),
+    /* @__PURE__ */ jsx9(
+      motion4.div,
       {
         style: backdropStyle2,
         initial: { opacity: 0 },
@@ -2140,8 +3466,8 @@ function DeleteWalletModal({
       },
       "backdrop"
     ),
-    /* @__PURE__ */ jsx6("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxs5(
-      motion2.div,
+    /* @__PURE__ */ jsx9("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxs8(
+      motion4.div,
       {
         style: panelStyle,
         initial: { opacity: 0, y: 8 },
@@ -2150,22 +3476,22 @@ function DeleteWalletModal({
         transition: { duration: 0.18, ease: "easeOut" },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs5("div", { style: headerStyle, children: [
-            /* @__PURE__ */ jsx6("h3", { style: titleStyle, children: "Delete Wallet" }),
-            /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsxs8("div", { style: headerStyle, children: [
+            /* @__PURE__ */ jsx9("h3", { style: titleStyle, children: "Delete Wallet" }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 onClick: handleClose,
                 disabled: isDeleting,
                 style: closeBtnStyle(isDeleting),
                 "aria-label": "Close",
-                children: /* @__PURE__ */ jsx6(X, { size: 16 })
+                children: /* @__PURE__ */ jsx9(X, { size: 16 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs5("div", { style: bodyStyle, children: [
-            /* @__PURE__ */ jsxs5("div", { style: warningBoxStyle, children: [
-              /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsxs8("div", { style: bodyStyle, children: [
+            /* @__PURE__ */ jsxs8("div", { style: warningBoxStyle, children: [
+              /* @__PURE__ */ jsx9(
                 AlertTriangle,
                 {
                   size: 15,
@@ -2173,8 +3499,8 @@ function DeleteWalletModal({
                   style: { flexShrink: 0, marginTop: 2 }
                 }
               ),
-              /* @__PURE__ */ jsxs5("div", { children: [
-                /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx9(
                   "p",
                   {
                     style: {
@@ -2187,7 +3513,7 @@ function DeleteWalletModal({
                     children: "This action cannot be undone"
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx9(
                   "p",
                   {
                     style: {
@@ -2201,8 +3527,8 @@ function DeleteWalletModal({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs5("div", { style: infoBoxStyle, children: [
-              /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsxs8("div", { style: infoBoxStyle, children: [
+              /* @__PURE__ */ jsx9(
                 "p",
                 {
                   style: {
@@ -2213,7 +3539,7 @@ function DeleteWalletModal({
                   children: "Wallet to delete"
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx9(
                 "p",
                 {
                   style: {
@@ -2226,7 +3552,7 @@ function DeleteWalletModal({
                   children: walletName
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx9(
                 "p",
                 {
                   style: {
@@ -2237,15 +3563,15 @@ function DeleteWalletModal({
                     fontFamily: fontFamily.mono,
                     wordBreak: "break-all"
                   },
-                  children: wallet.ethereumAddress
+                  children: displayAddress
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs5("div", { children: [
-              /* @__PURE__ */ jsxs5("label", { style: labelStyle, children: [
+            /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsxs8("label", { style: labelStyle, children: [
                 "Type",
                 " ",
-                /* @__PURE__ */ jsxs5(
+                /* @__PURE__ */ jsxs8(
                   "span",
                   {
                     style: {
@@ -2262,7 +3588,7 @@ function DeleteWalletModal({
                 " ",
                 "to confirm"
               ] }),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx9(
                 "input",
                 {
                   type: "text",
@@ -2274,7 +3600,7 @@ function DeleteWalletModal({
                 }
               )
             ] }),
-            error && /* @__PURE__ */ jsxs5(
+            error && /* @__PURE__ */ jsxs8(
               "div",
               {
                 style: {
@@ -2287,7 +3613,7 @@ function DeleteWalletModal({
                   borderRadius: 8
                 },
                 children: [
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx9(
                     AlertTriangle,
                     {
                       size: 14,
@@ -2295,7 +3621,7 @@ function DeleteWalletModal({
                       style: { flexShrink: 0, marginTop: 2 }
                     }
                   ),
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx9(
                     "p",
                     {
                       style: {
@@ -2311,7 +3637,7 @@ function DeleteWalletModal({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx6("div", { style: footerStyle, children: /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx9("div", { style: footerStyle, children: /* @__PURE__ */ jsx9(
             "button",
             {
               onClick: handleDelete,
@@ -2319,11 +3645,11 @@ function DeleteWalletModal({
               onMouseEnter: () => setDeleteHovered(true),
               onMouseLeave: () => setDeleteHovered(false),
               style: deleteButtonStyle(canDelete, deleteHovered),
-              children: isDeleting ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                /* @__PURE__ */ jsx6(Loader2, { size: 14 }),
+              children: isDeleting ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+                /* @__PURE__ */ jsx9(Loader2, { size: 14 }),
                 " Deleting..."
-              ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                /* @__PURE__ */ jsx6(Trash2, { size: 14 }),
+              ] }) : /* @__PURE__ */ jsxs8(Fragment5, { children: [
+                /* @__PURE__ */ jsx9(Trash2, { size: 14 }),
                 " Delete Wallet"
               ] })
             }
@@ -2336,15 +3662,15 @@ function DeleteWalletModal({
 }
 // src/RenameWalletModal.tsx
-import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
+import { AnimatePresence as AnimatePresence5, motion as motion5 } from "framer-motion";
 import {
-  useCallback as useCallback4,
+  useCallback as useCallback7,
   useEffect as useEffect2,
-  useState as useState3
+  useState as useState6
 } from "react";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var DANGER_BORDER2 = "rgba(248,113,113,0.2)";
-var WALLET_NAME_REGEX = /^[a-zA-Z0-9/]+$/;
+var WALLET_NAME_REGEX2 = /^[a-zA-Z0-9/]+$/;
 var backdropStyle3 = modalBackdropStyle(110);
 var wrapperStyle2 = modalWrapperStyle2(111, 16);
 var panelStyle2 = {
@@ -2412,26 +3738,27 @@ function RenameWalletModal({
   onConfirm,
   onNotify
 }) {
-  const [name, setName] = useState3("");
-  const [isRenaming, setIsRenaming] = useState3(false);
-  const [error, setError] = useState3(null);
-  const [saveHovered, setSaveHovered] = useState3(false);
+  const [name, setName] = useState6("");
+  const [isRenaming, setIsRenaming] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [saveHovered, setSaveHovered] = useState6(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);
+  const isNameValid = WALLET_NAME_REGEX2.test(trimmedName);
   const canSubmit = isNameValid && isNameChanged && !isRenaming;
   useEffect2(() => {
     if (!wallet) return;
     setName(wallet.name || "");
     setError(null);
   }, [wallet]);
-  const handleClose = useCallback4(() => {
+  const handleClose = useCallback7(() => {
     if (isRenaming) return;
     setError(null);
     onClose();
   }, [isRenaming, onClose]);
-  const handleRename = useCallback4(async () => {
+  const handleRename = useCallback7(async () => {
     if (!wallet || !isNameValid || !isNameChanged) return;
     setError(null);
     setIsRenaming(true);
@@ -2453,10 +3780,10 @@ function RenameWalletModal({
     onClose,
     onNotify
   ]);
-  return /* @__PURE__ */ jsx7(AnimatePresence3, { children: isOpen && wallet && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx7(SpinKeyframes, {}),
-    /* @__PURE__ */ jsx7(
-      motion3.div,
+  return /* @__PURE__ */ jsx10(AnimatePresence5, { children: isOpen && wallet && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx10(SpinKeyframes, {}),
+    /* @__PURE__ */ jsx10(
+      motion5.div,
       {
         style: backdropStyle3,
         initial: { opacity: 0 },
@@ -2467,8 +3794,8 @@ function RenameWalletModal({
       },
       "backdrop"
     ),
-    /* @__PURE__ */ jsx7("div", { style: wrapperStyle2, children: /* @__PURE__ */ jsxs6(
-      motion3.div,
+    /* @__PURE__ */ jsx10("div", { style: wrapperStyle2, children: /* @__PURE__ */ jsxs9(
+      motion5.div,
       {
         style: panelStyle2,
         initial: { opacity: 0, y: 8 },
@@ -2477,22 +3804,22 @@ function RenameWalletModal({
         transition: { duration: 0.18, ease: "easeOut" },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs6("div", { style: headerStyle2, children: [
-            /* @__PURE__ */ jsx7("h3", { style: titleStyle, children: "Rename Wallet" }),
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs9("div", { style: headerStyle2, children: [
+            /* @__PURE__ */ jsx10("h3", { style: titleStyle, children: "Rename Wallet" }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 onClick: handleClose,
                 disabled: isRenaming,
                 style: closeBtnStyle(isRenaming),
                 "aria-label": "Close",
-                children: /* @__PURE__ */ jsx7(X, { size: 16 })
+                children: /* @__PURE__ */ jsx10(X, { size: 16 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs6("div", { style: bodyStyle2, children: [
-            /* @__PURE__ */ jsxs6("div", { style: infoBoxStyle2, children: [
-              /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs9("div", { style: bodyStyle2, children: [
+            /* @__PURE__ */ jsxs9("div", { style: infoBoxStyle2, children: [
+              /* @__PURE__ */ jsx10(
                 "p",
                 {
                   style: {
@@ -2503,7 +3830,7 @@ function RenameWalletModal({
                   children: "Wallet"
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx10(
                 "p",
                 {
                   style: {
@@ -2516,7 +3843,7 @@ function RenameWalletModal({
                   children: currentName
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx10(
                 "p",
                 {
                   style: {
@@ -2527,13 +3854,13 @@ function RenameWalletModal({
                     fontFamily: fontFamily.mono,
                     wordBreak: "break-all"
                   },
-                  children: wallet.ethereumAddress
+                  children: displayAddress
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx7("label", { style: labelStyle2, children: "Wallet name" }),
-              /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsx10("label", { style: labelStyle2, children: "Wallet name" }),
+              /* @__PURE__ */ jsx10(
                 "input",
                 {
                   type: "text",
@@ -2551,7 +3878,7 @@ function RenameWalletModal({
                   style: inputStyle2(!!error, isRenaming)
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx10(
                 "p",
                 {
                   style: {
@@ -2564,7 +3891,7 @@ function RenameWalletModal({
                 }
               )
             ] }),
-            error && /* @__PURE__ */ jsxs6(
+            error && /* @__PURE__ */ jsxs9(
               "div",
               {
                 style: {
@@ -2577,7 +3904,7 @@ function RenameWalletModal({
                   borderRadius: 8
                 },
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx10(
                     AlertTriangle,
                     {
                       size: 14,
@@ -2585,7 +3912,7 @@ function RenameWalletModal({
                       style: { flexShrink: 0, marginTop: 2 }
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx10(
                     "p",
                     {
                       style: {
@@ -2601,7 +3928,7 @@ function RenameWalletModal({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx7("div", { style: footerStyle2, children: /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx10("div", { style: footerStyle2, children: /* @__PURE__ */ jsx10(
             "button",
             {
               onClick: handleRename,
@@ -2609,11 +3936,11 @@ function RenameWalletModal({
               onMouseEnter: () => setSaveHovered(true),
               onMouseLeave: () => setSaveHovered(false),
               style: saveButtonStyle(canSubmit, saveHovered),
-              children: isRenaming ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-                /* @__PURE__ */ jsx7(Loader2, { size: 14 }),
+              children: isRenaming ? /* @__PURE__ */ jsxs9(Fragment6, { children: [
+                /* @__PURE__ */ jsx10(Loader2, { size: 14 }),
                 " Saving..."
-              ] }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
-                /* @__PURE__ */ jsx7(Pencil, { size: 14 }),
+              ] }) : /* @__PURE__ */ jsxs9(Fragment6, { children: [
+                /* @__PURE__ */ jsx10(Pencil, { size: 14 }),
                 " Save Name"
               ] })
             }
@@ -2626,7 +3953,7 @@ function RenameWalletModal({
 }
 // src/UserProfileModal.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_SLIPPAGE_OPTIONS = [
   { label: "0.5%", value: 5e-3 },
   { label: "1%", value: 0.01 },
@@ -2691,12 +4018,39 @@ var walletRowStyle = {
   border: `1px solid ${profileColors.surfaceBd}`,
   transition: "background-color 150ms, border-color 150ms"
 };
+function getWalletTypeMeta(wallet) {
+  if (wallet.isAgent) {
+    return {
+      label: "Agent wallet",
+      color: "#38bdf8",
+      background: "rgba(56,189,248,0.16)",
+      border: "rgba(56,189,248,0.34)",
+      icon: /* @__PURE__ */ jsx11(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: /* @__PURE__ */ jsx11(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: /* @__PURE__ */ jsx11(KeyRound, { size: 10 })
+  };
+}
 function ToggleSwitch({
   checked,
   onChange,
   accentColor
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       onClick: onChange,
@@ -2715,7 +4069,7 @@ function ToggleSwitch({
         padding: 0,
         transition: "background 150ms"
       },
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx11(
         "span",
         {
           style: {
@@ -2723,9 +4077,9 @@ 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"
           }
         }
       )
@@ -2738,8 +4092,8 @@ function RaisedButton({
   children,
   style
 }) {
-  const [hovered, setHovered] = useState4(false);
-  return /* @__PURE__ */ jsx8(
+  const [hovered, setHovered] = useState7(false);
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       type: "button",
@@ -2762,8 +4116,8 @@ function SlippageButton({
   onClick,
   children
 }) {
-  const [hovered, setHovered] = useState4(false);
-  return /* @__PURE__ */ jsx8(
+  const [hovered, setHovered] = useState7(false);
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       type: "button",
@@ -2791,6 +4145,7 @@ function UserProfileModal({
   onWalletDeleted,
   onWalletRenamed,
   onShowPortfolio,
+  onRenewAgentWallet,
   onNotify,
   accentColor,
   principalColors
@@ -2802,9 +4157,9 @@ function UserProfileModal({
     renameWallet,
     authMethod
   } = useHypurrConnectInternal();
-  const [settingsTab, setSettingsTab] = useState4("ui");
-  const [walletToDelete, setWalletToDelete] = useState4(null);
-  const [walletToRename, setWalletToRename] = useState4(null);
+  const [settingsTab, setSettingsTab] = useState7("ui");
+  const [walletToDelete, setWalletToDelete] = useState7(null);
+  const [walletToRename, setWalletToRename] = useState7(null);
   const profilePic = user?.photoUrl || "";
   const displayName = user?.displayName || "";
   const hfunScore = user?.hfunScore ?? null;
@@ -2812,30 +4167,30 @@ function UserProfileModal({
   const telegramId = user?.telegramId;
   const wallets = userWallets ?? [];
   const colors = resolvePrincipalColors(accentColor, principalColors);
-  const handleDeleteWallet = useCallback5(
+  const handleDeleteWallet = useCallback8(
     async (walletId) => {
       await deleteWallet(walletId);
       onWalletDeleted?.(walletId);
     },
     [deleteWallet, onWalletDeleted]
   );
-  const handleRenameWallet = useCallback5(
+  const handleRenameWallet = useCallback8(
     async (walletId, name) => {
       await renameWallet(walletId, name);
       onWalletRenamed?.(walletId, name);
     },
     [renameWallet, onWalletRenamed]
   );
-  const handleCopyAddress = useCallback5(() => {
+  const handleCopyAddress = useCallback8(() => {
     if (!displayName) return;
     navigator.clipboard.writeText(displayName);
     onNotify?.({ type: "success", message: "Address copied" });
   }, [displayName, onNotify]);
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx8(AnimatePresence4, { children: isOpen && /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsx8(SpinKeyframes, {}),
-      /* @__PURE__ */ jsx8(
-        motion4.div,
+  return /* @__PURE__ */ jsxs10(Fragment7, { children: [
+    /* @__PURE__ */ jsx11(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsxs10(Fragment7, { children: [
+      /* @__PURE__ */ jsx11(SpinKeyframes, {}),
+      /* @__PURE__ */ jsx11(
+        motion6.div,
         {
           style: backdropStyle4,
           initial: { opacity: 0 },
@@ -2846,8 +4201,8 @@ function UserProfileModal({
         },
         "backdrop"
       ),
-      /* @__PURE__ */ jsx8("div", { style: wrapperStyle3, onClick: onClose, children: /* @__PURE__ */ jsxs7(
-        motion4.div,
+      /* @__PURE__ */ jsx11("div", { style: wrapperStyle3, onClick: onClose, children: /* @__PURE__ */ jsxs10(
+        motion6.div,
         {
           style: panelStyle3,
           initial: { opacity: 0, y: 8 },
@@ -2856,20 +4211,20 @@ function UserProfileModal({
           transition: { duration: 0.18, ease: "easeOut" },
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs7("div", { style: headerStyle3, children: [
-              /* @__PURE__ */ jsx8("h3", { style: titleStyle, children: "Profile & Settings" }),
-              /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsxs10("div", { style: headerStyle3, children: [
+              /* @__PURE__ */ jsx11("h3", { style: titleStyle, children: "Profile & Settings" }),
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   onClick: onClose,
                   style: closeBtnStyle(),
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx8(X, { size: 16 })
+                  children: /* @__PURE__ */ jsx11(X, { size: 16 })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs7("div", { style: profileSectionStyle, children: [
-              authMethod === "eoa" && !profilePic ? /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs10("div", { style: profileSectionStyle, children: [
+              authMethod === "eoa" && !profilePic ? /* @__PURE__ */ jsxs10(
                 "div",
                 {
                   style: {
@@ -2879,7 +4234,7 @@ function UserProfileModal({
                     borderRadius: 8
                   },
                   children: [
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx11(
                       "p",
                       {
                         style: {
@@ -2890,7 +4245,7 @@ function UserProfileModal({
                         children: "Wallet"
                       }
                     ),
-                    /* @__PURE__ */ jsxs7(
+                    /* @__PURE__ */ jsxs10(
                       "div",
                       {
                         style: {
@@ -2900,7 +4255,7 @@ function UserProfileModal({
                           gap: 8
                         },
                         children: [
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx11(
                             "p",
                             {
                               style: {
@@ -2914,7 +4269,7 @@ function UserProfileModal({
                               children: displayName
                             }
                           ),
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx11(
                             "button",
                             {
                               onClick: handleCopyAddress,
@@ -2927,7 +4282,7 @@ function UserProfileModal({
                                 display: "flex"
                               },
                               "aria-label": "Copy address",
-                              children: /* @__PURE__ */ jsx8(Copy, { size: 13 })
+                              children: /* @__PURE__ */ jsx11(Copy, { size: 13 })
                             }
                           )
                         ]
@@ -2935,7 +4290,7 @@ function UserProfileModal({
                     )
                   ]
                 }
-              ) : /* @__PURE__ */ jsxs7(
+              ) : /* @__PURE__ */ jsxs10(
                 "div",
                 {
                   style: {
@@ -2944,7 +4299,7 @@ function UserProfileModal({
                     gap: 16
                   },
                   children: [
-                    profilePic ? /* @__PURE__ */ jsx8(
+                    profilePic ? /* @__PURE__ */ jsx11(
                       "img",
                       {
                         src: profilePic,
@@ -2956,7 +4311,7 @@ function UserProfileModal({
                           border: `1px solid ${profileColors.surfaceBd}`
                         }
                       }
-                    ) : /* @__PURE__ */ jsx8(
+                    ) : /* @__PURE__ */ jsx11(
                       "div",
                       {
                         style: {
@@ -2976,8 +4331,8 @@ function UserProfileModal({
                         children: displayName?.charAt(0)
                       }
                     ),
-                    /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
-                      /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsxs10("div", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsx11(
                         "h4",
                         {
                           style: {
@@ -2993,7 +4348,7 @@ function UserProfileModal({
                           children: displayName
                         }
                       ),
-                      telegramId && /* @__PURE__ */ jsxs7(
+                      telegramId && /* @__PURE__ */ jsxs10(
                         "p",
                         {
                           style: {
@@ -3012,7 +4367,7 @@ function UserProfileModal({
                   ]
                 }
               ),
-              user && /* @__PURE__ */ jsxs7(
+              user && /* @__PURE__ */ jsxs10(
                 "div",
                 {
                   style: {
@@ -3022,8 +4377,8 @@ function UserProfileModal({
                     gap: 10
                   },
                   children: [
-                    /* @__PURE__ */ jsxs7("div", { style: statBoxStyle, children: [
-                      /* @__PURE__ */ jsxs7(
+                    /* @__PURE__ */ jsxs10("div", { style: statBoxStyle, children: [
+                      /* @__PURE__ */ jsxs10(
                         "div",
                         {
                           style: {
@@ -3034,12 +4389,12 @@ function UserProfileModal({
                             marginBottom: 6
                           },
                           children: [
-                            /* @__PURE__ */ jsx8(Star, { size: 13, color: "#eab308", fill: "#eab308" }),
-                            /* @__PURE__ */ jsx8("span", { style: upperLabelStyle, children: "Hfun Score" })
+                            /* @__PURE__ */ jsx11(Star, { size: 13, color: "#eab308", fill: "#eab308" }),
+                            /* @__PURE__ */ jsx11("span", { style: upperLabelStyle, children: "Hfun Score" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx8(
+                      /* @__PURE__ */ jsx11(
                         "p",
                         {
                           style: {
@@ -3054,8 +4409,8 @@ function UserProfileModal({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs7("div", { style: statBoxStyle, children: [
-                      /* @__PURE__ */ jsxs7(
+                    /* @__PURE__ */ jsxs10("div", { style: statBoxStyle, children: [
+                      /* @__PURE__ */ jsxs10(
                         "div",
                         {
                           style: {
@@ -3066,12 +4421,12 @@ function UserProfileModal({
                             marginBottom: 6
                           },
                           children: [
-                            /* @__PURE__ */ jsx8(User, { size: 13 }),
-                            /* @__PURE__ */ jsx8("span", { style: upperLabelStyle, children: "Reputation" })
+                            /* @__PURE__ */ jsx11(User, { size: 13 }),
+                            /* @__PURE__ */ jsx11("span", { style: upperLabelStyle, children: "Reputation" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx8(
+                      /* @__PURE__ */ jsx11(
                         "p",
                         {
                           style: {
@@ -3090,43 +4445,43 @@ function UserProfileModal({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs7("div", { style: settingsSectionStyle, children: [
-              /* @__PURE__ */ jsxs7("div", { style: tabRowStyle, children: [
-                /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs10("div", { style: settingsSectionStyle, children: [
+              /* @__PURE__ */ jsxs10("div", { style: tabRowStyle, children: [
+                /* @__PURE__ */ jsxs10(
                   RaisedButton,
                   {
                     selected: settingsTab === "ui",
                     onClick: () => setSettingsTab("ui"),
                     children: [
-                      /* @__PURE__ */ jsx8(Zap, { size: 13 }),
+                      /* @__PURE__ */ jsx11(Zap, { size: 13 }),
                       " UI"
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsxs10(
                   RaisedButton,
                   {
                     selected: settingsTab === "trading",
                     onClick: () => setSettingsTab("trading"),
                     children: [
-                      /* @__PURE__ */ jsx8(TrendingUp, { size: 13 }),
+                      /* @__PURE__ */ jsx11(TrendingUp, { size: 13 }),
                       " Trading"
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsxs10(
                   RaisedButton,
                   {
                     selected: settingsTab === "wallets",
                     onClick: () => setSettingsTab("wallets"),
                     children: [
-                      /* @__PURE__ */ jsx8(Wallet, { size: 13 }),
+                      /* @__PURE__ */ jsx11(Wallet, { size: 13 }),
                       " Wallets"
                     ]
                   }
                 )
               ] }),
-              settingsTab === "ui" && /* @__PURE__ */ jsx8(
+              settingsTab === "ui" && /* @__PURE__ */ jsx11(
                 "div",
                 {
                   style: {
@@ -3134,7 +4489,7 @@ function UserProfileModal({
                     flexDirection: "column",
                     gap: 12
                   },
-                  children: /* @__PURE__ */ jsxs7(
+                  children: /* @__PURE__ */ jsxs10(
                     "div",
                     {
                       style: {
@@ -3144,7 +4499,7 @@ function UserProfileModal({
                         padding: "8px 0"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs7(
+                        /* @__PURE__ */ jsxs10(
                           "div",
                           {
                             style: {
@@ -3153,9 +4508,9 @@ function UserProfileModal({
                               gap: 12
                             },
                             children: [
-                              /* @__PURE__ */ jsx8(Zap, { size: 16, color: profileColors.muted }),
-                              /* @__PURE__ */ jsxs7("div", { children: [
-                                /* @__PURE__ */ jsx8(
+                              /* @__PURE__ */ jsx11(Zap, { size: 16, color: profileColors.muted }),
+                              /* @__PURE__ */ jsxs10("div", { children: [
+                                /* @__PURE__ */ jsx11(
                                   "p",
                                   {
                                     style: {
@@ -3168,7 +4523,7 @@ function UserProfileModal({
                                     children: "Animations"
                                   }
                                 ),
-                                /* @__PURE__ */ jsx8(
+                                /* @__PURE__ */ jsx11(
                                   "p",
                                   {
                                     style: {
@@ -3184,7 +4539,7 @@ function UserProfileModal({
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsx8(
+                        /* @__PURE__ */ jsx11(
                           ToggleSwitch,
                           {
                             checked: animationsEnabled,
@@ -3197,8 +4552,8 @@ function UserProfileModal({
                   )
                 }
               ),
-              settingsTab === "trading" && /* @__PURE__ */ jsxs7("div", { style: { padding: "8px 0" }, children: [
-                /* @__PURE__ */ jsxs7(
+              settingsTab === "trading" && /* @__PURE__ */ jsxs10("div", { style: { padding: "8px 0" }, children: [
+                /* @__PURE__ */ jsxs10(
                   "div",
                   {
                     style: {
@@ -3208,9 +4563,9 @@ function UserProfileModal({
                       marginBottom: 12
                     },
                     children: [
-                      /* @__PURE__ */ jsx8(TrendingUp, { size: 16, color: profileColors.muted }),
-                      /* @__PURE__ */ jsxs7("div", { children: [
-                        /* @__PURE__ */ jsx8(
+                      /* @__PURE__ */ jsx11(TrendingUp, { size: 16, color: profileColors.muted }),
+                      /* @__PURE__ */ jsxs10("div", { children: [
+                        /* @__PURE__ */ jsx11(
                           "p",
                           {
                             style: {
@@ -3223,7 +4578,7 @@ function UserProfileModal({
                             children: "Default Slippage"
                           }
                         ),
-                        /* @__PURE__ */ jsx8(
+                        /* @__PURE__ */ jsx11(
                           "p",
                           {
                             style: {
@@ -3239,7 +4594,7 @@ function UserProfileModal({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: 6 }, children: slippageOptions.map((option) => /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx11("div", { style: { display: "flex", gap: 6 }, children: slippageOptions.map((option) => /* @__PURE__ */ jsx11(
                   SlippageButton,
                   {
                     onClick: () => onSlippageChange(option.value),
@@ -3249,7 +4604,7 @@ function UserProfileModal({
                   option.value
                 )) })
               ] }),
-              settingsTab === "wallets" && /* @__PURE__ */ jsxs7(
+              settingsTab === "wallets" && /* @__PURE__ */ jsxs10(
                 "div",
                 {
                   style: {
@@ -3258,7 +4613,7 @@ function UserProfileModal({
                     gap: 8
                   },
                   children: [
-                    wallets.length === 0 ? /* @__PURE__ */ jsxs7(
+                    wallets.length === 0 ? /* @__PURE__ */ jsxs10(
                       "div",
                       {
                         style: {
@@ -3266,7 +4621,7 @@ function UserProfileModal({
                           padding: "32px 0"
                         },
                         children: [
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx11(
                             "div",
                             {
                               style: {
@@ -3279,10 +4634,10 @@ function UserProfileModal({
                                 justifyContent: "center",
                                 margin: "0 auto 12px"
                               },
-                              children: /* @__PURE__ */ jsx8(Wallet, { size: 18, color: profileColors.muted })
+                              children: /* @__PURE__ */ jsx11(Wallet, { size: 18, color: profileColors.muted })
                             }
                           ),
-                          /* @__PURE__ */ jsx8(
+                          /* @__PURE__ */ jsx11(
                             "p",
                             {
                               style: {
@@ -3296,7 +4651,7 @@ function UserProfileModal({
                           )
                         ]
                       }
-                    ) : /* @__PURE__ */ jsx8(
+                    ) : /* @__PURE__ */ jsx11(
                       "div",
                       {
                         style: {
@@ -3306,20 +4661,21 @@ function UserProfileModal({
                           flexDirection: "column",
                           gap: 6
                         },
-                        children: wallets.map((wallet) => /* @__PURE__ */ jsx8(
+                        children: wallets.map((wallet) => /* @__PURE__ */ jsx11(
                           WalletRow,
                           {
                             wallet,
                             colors,
                             onRename: () => setWalletToRename(wallet),
                             onDelete: () => setWalletToDelete(wallet),
+                            onRenewAgentWallet: wallet.isAgent && onRenewAgentWallet ? () => onRenewAgentWallet(wallet) : void 0,
                             onShowPortfolio: onShowPortfolio ? () => onShowPortfolio(wallet) : void 0
                           },
                           wallet.id
                         ))
                       }
                     ),
-                    /* @__PURE__ */ jsxs7(
+                    /* @__PURE__ */ jsxs10(
                       "p",
                       {
                         style: {
@@ -3341,7 +4697,7 @@ function UserProfileModal({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx8("div", { style: { padding: "0 24px 24px" }, children: /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx11("div", { style: { padding: "0 24px 24px" }, children: /* @__PURE__ */ jsx11(
               "button",
               {
                 onClick: onClose,
@@ -3363,7 +4719,7 @@ function UserProfileModal({
         "panel"
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       DeleteWalletModal,
       {
         isOpen: !!walletToDelete,
@@ -3373,7 +4729,7 @@ function UserProfileModal({
         onNotify
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       RenameWalletModal,
       {
         isOpen: !!walletToRename,
@@ -3391,84 +4747,134 @@ function WalletRow({
   colors,
   onRename,
   onDelete,
+  onRenewAgentWallet,
   onShowPortfolio
 }) {
-  const [hovered, setHovered] = useState4(false);
-  return /* @__PURE__ */ jsxs7(
+  const [hovered, setHovered] = useState7(false);
+  const agentExpiryTitle = getAgentExpiryTitle(wallet);
+  const isAgentExpired = !!agentExpiryTitle;
+  const displayAddress = wallet.isAgent && wallet.agentEthereumAddress?.value ? wallet.agentEthereumAddress.value : wallet.ethereumAddress;
+  const typeMeta = getWalletTypeMeta(wallet);
+  return /* @__PURE__ */ jsxs10(
     "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),
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs10(
           "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",
               flexShrink: 0
             },
-            children: /* @__PURE__ */ jsx8(
-              "span",
-              {
-                style: {
-                  fontSize: 12.5,
-                  lineHeight: "1rem",
-                  fontWeight: 600,
-                  color: colors.accentText
-                },
-                children: (wallet.name || "W")[0].toUpperCase()
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx11(
+                "span",
+                {
+                  style: {
+                    fontSize: 12.5,
+                    lineHeight: "1rem",
+                    fontWeight: 600,
+                    color: isAgentExpired ? EXPIRED_AGENT_COLOR : colors.accentText
+                  },
+                  children: (wallet.name || "W")[0].toUpperCase()
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                "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)"
+                  },
+                  children: typeMeta.icon
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx8(
-            "p",
+        /* @__PURE__ */ jsxs10("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx11(
+            "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
               },
-              children: wallet.name || "Unnamed"
+              children: /* @__PURE__ */ jsx11(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: 12.5,
+                    lineHeight: "1rem",
+                    fontWeight: 500,
+                    color: isAgentExpired ? EXPIRED_AGENT_COLOR : profileColors.text,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: wallet.name || "Unnamed"
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs10(
             "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
               },
               children: [
-                wallet.ethereumAddress?.slice(0, 6),
+                displayAddress?.slice(0, 6),
                 "...",
-                wallet.ethereumAddress?.slice(-4)
+                displayAddress?.slice(-4)
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs7(
+        agentExpiryTitle && /* @__PURE__ */ jsx11(
+          AgentExpiryWarningIcon,
+          {
+            message: agentExpiryTitle,
+            onClick: onRenewAgentWallet
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
           "div",
           {
             style: {
@@ -3480,7 +4886,18 @@ function WalletRow({
               transition: "opacity 120ms"
             },
             children: [
-              onShowPortfolio && /* @__PURE__ */ jsx8(
+              wallet.isAgent && onRenewAgentWallet && /* @__PURE__ */ jsx11(
+                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,
+                  children: /* @__PURE__ */ jsx11(RefreshCw, { size: 13 })
+                }
+              ),
+              onShowPortfolio && /* @__PURE__ */ jsx11(
                 IconBtn,
                 {
                   color: colors.accent,
@@ -3488,10 +4905,10 @@ function WalletRow({
                   title: "View portfolio",
                   ariaLabel: `View portfolio for ${wallet.name || "wallet"}`,
                   onClick: onShowPortfolio,
-                  children: /* @__PURE__ */ jsx8(LayoutDashboard, { size: 13 })
+                  children: /* @__PURE__ */ jsx11(LayoutDashboard, { size: 13 })
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx11(
                 IconBtn,
                 {
                   color: colors.accent,
@@ -3499,10 +4916,10 @@ function WalletRow({
                   title: "Rename wallet",
                   ariaLabel: `Rename ${wallet.name || "wallet"}`,
                   onClick: onRename,
-                  children: /* @__PURE__ */ jsx8(Pencil, { size: 13 })
+                  children: /* @__PURE__ */ jsx11(Pencil, { size: 13 })
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx11(
                 IconBtn,
                 {
                   color: "#ef4444",
@@ -3510,7 +4927,7 @@ function WalletRow({
                   title: "Delete wallet",
                   ariaLabel: `Delete ${wallet.name || "wallet"}`,
                   onClick: onDelete,
-                  children: /* @__PURE__ */ jsx8(Trash2, { size: 13 })
+                  children: /* @__PURE__ */ jsx11(Trash2, { size: 13 })
                 }
               )
             ]
@@ -3528,8 +4945,8 @@ function IconBtn({
   ariaLabel,
   onClick
 }) {
-  const [hovered, setHovered] = useState4(false);
-  return /* @__PURE__ */ jsx8(
+  const [hovered, setHovered] = useState7(false);
+  return /* @__PURE__ */ jsx11(
     "button",
     {
       onMouseEnter: () => setHovered(true),
@@ -3555,8 +4972,8 @@ function IconBtn({
 }
 // src/WalletSelectorDropdown.tsx
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
+import { Fragment as Fragment9, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var DEFAULT_BACKGROUND_COLOR2 = "rgba(20,20,20,0.95)";
 var getWalletNameParts = (name) => (name ?? "").split("/").map((part) => part.trim()).filter(Boolean);
 var buildWalletListEntries = (wallets) => {
   const standalone = [];
@@ -3625,6 +5042,28 @@ var formatCompactAddress = (addr) => {
   if (!addr) return "";
   return `${addr.slice(0, 4)}...${addr.slice(-2)}`;
 };
+var getDisplayAddress = (wallet) => wallet.isAgent && wallet.agentEthereumAddress?.value ? wallet.agentEthereumAddress.value : wallet.ethereumAddress;
+function getWalletTypeMeta2(wallet) {
+  if (wallet.isAgent) {
+    return {
+      label: "Agent wallet",
+      color: "#38bdf8",
+      icon: /* @__PURE__ */ jsx12(Bot, { size: 12 })
+    };
+  }
+  if (wallet.isReadOnly) {
+    return {
+      label: "Read-only wallet",
+      color: "#a78bfa",
+      icon: /* @__PURE__ */ jsx12(Eye, { size: 12 })
+    };
+  }
+  return {
+    label: "Private-key wallet",
+    color: "#34d399",
+    icon: /* @__PURE__ */ jsx12(KeyRound, { size: 12 })
+  };
+}
 var rootStyle = {
   position: "absolute",
   right: 0,
@@ -3667,6 +5106,7 @@ function WalletSelectorDropdown({
   onClose,
   onAddWallet,
   onShowPortfolio,
+  onRenewAgentWallet,
   onLogout,
   onNotify,
   vipThreshold = 10,
@@ -3679,19 +5119,20 @@ function WalletSelectorDropdown({
   onWalletRenamed,
   accentColor,
   principalColors,
-  backgroundColor = DEFAULT_BACKGROUND_COLOR
+  backgroundColor = DEFAULT_BACKGROUND_COLOR2,
+  extraFooterItems
 }) {
   const { user, wallets, selectedWalletId, selectWallet, logout, authMethod } = useHypurrConnectInternal();
-  const [profileOpen, setProfileOpen] = useState5(false);
-  const openProfile = useCallback6(() => {
+  const [profileOpen, setProfileOpen] = useState8(false);
+  const openProfile = useCallback9(() => {
     setProfileOpen(true);
     onClose();
   }, [onClose]);
-  const walletListEntries = useMemo2(
+  const walletListEntries = useMemo3(
     () => buildWalletListEntries(Array.isArray(wallets) ? wallets : void 0),
     [wallets]
   );
-  const handleCopyAddress = useCallback6(
+  const handleCopyAddress = useCallback9(
     (address) => {
       if (!address) return;
       navigator.clipboard.writeText(address);
@@ -3699,7 +5140,7 @@ function WalletSelectorDropdown({
     },
     [onNotify]
   );
-  const handleLogout = useCallback6(() => {
+  const handleLogout = useCallback9(() => {
     onLogout?.();
     logout();
     onClose();
@@ -3712,13 +5153,19 @@ function WalletSelectorDropdown({
   const renderWalletRow = (item, depth) => {
     const { wallet, label } = item;
     const isSelected = wallet.id === selectedWalletId;
-    const compactAddress = formatCompactAddress(wallet.ethereumAddress);
-    return /* @__PURE__ */ jsx9(
+    const displayAddress = getDisplayAddress(wallet);
+    const compactAddress = formatCompactAddress(displayAddress);
+    const agentExpiryTitle = getAgentExpiryTitle({
+      isAgent: !!wallet.isAgent,
+      agentExpiresAt: wallet.agentExpiresAt
+    });
+    return /* @__PURE__ */ jsx12(
       WalletRow2,
       {
         depth,
         isSelected,
         label,
+        walletType: getWalletTypeMeta2(wallet),
         compactAddress,
         onSelect: () => {
           selectWallet(wallet.id);
@@ -3728,15 +5175,20 @@ function WalletSelectorDropdown({
           onShowPortfolio(wallet);
           onClose();
         } : void 0,
-        onCopy: () => handleCopyAddress(wallet.ethereumAddress),
+        onCopy: () => handleCopyAddress(displayAddress),
+        agentExpiryTitle,
+        onRenewAgentWallet: wallet.isAgent && onRenewAgentWallet ? () => {
+          onRenewAgentWallet(wallet);
+          onClose();
+        } : void 0,
         colors
       },
       wallet.id
     );
   };
-  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
-    /* @__PURE__ */ jsx9(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsxs8(
-      motion5.div,
+  return /* @__PURE__ */ jsxs11(Fragment9, { children: [
+    /* @__PURE__ */ jsx12(AnimatePresence7, { children: isOpen && /* @__PURE__ */ jsxs11(
+      motion7.div,
       {
         style: { ...rootStyle, background: backgroundColor },
         initial: { opacity: 0, scale: 0.95 },
@@ -3744,7 +5196,7 @@ function WalletSelectorDropdown({
         exit: { opacity: 0, scale: 0.95 },
         transition: { duration: 0.15, ease: "easeOut" },
         children: [
-          /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs11(
             "button",
             {
               onClick: openProfile,
@@ -3767,7 +5219,7 @@ function WalletSelectorDropdown({
               onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.06)",
               onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
               children: [
-                profilePic ? /* @__PURE__ */ jsxs8(
+                profilePic ? /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     style: {
@@ -3777,7 +5229,7 @@ function WalletSelectorDropdown({
                       background: isVip ? "linear-gradient(to right, #fde047, #eab308, #ca8a04)" : "transparent"
                     },
                     children: [
-                      /* @__PURE__ */ jsx9(
+                      /* @__PURE__ */ jsx12(
                         "img",
                         {
                           src: profilePic,
@@ -3790,7 +5242,7 @@ function WalletSelectorDropdown({
                           }
                         }
                       ),
-                      isVip && /* @__PURE__ */ jsx9(
+                      isVip && /* @__PURE__ */ jsx12(
                         Crown,
                         {
                           size: 12,
@@ -3806,7 +5258,7 @@ function WalletSelectorDropdown({
                       )
                     ]
                   }
-                ) : authMethod === "eoa" ? /* @__PURE__ */ jsx9(
+                ) : authMethod === "eoa" ? /* @__PURE__ */ jsx12(
                   "div",
                   {
                     style: {
@@ -3820,9 +5272,9 @@ function WalletSelectorDropdown({
                       justifyContent: "center",
                       flexShrink: 0
                     },
-                    children: /* @__PURE__ */ jsx9(Wallet, { size: 14, color: colors.accentText })
+                    children: /* @__PURE__ */ jsx12(Wallet, { size: 14, color: colors.accentText })
                   }
-                ) : /* @__PURE__ */ jsxs8(
+                ) : /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     style: {
@@ -3841,7 +5293,7 @@ function WalletSelectorDropdown({
                     },
                     children: [
                       displayName.charAt(0),
-                      isVip && /* @__PURE__ */ jsx9(
+                      isVip && /* @__PURE__ */ jsx12(
                         Crown,
                         {
                           size: 12,
@@ -3858,8 +5310,8 @@ function WalletSelectorDropdown({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx9("div", { style: { overflow: "hidden", flex: 1 }, children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx12("div", { style: { overflow: "hidden", flex: 1 }, children: /* @__PURE__ */ jsxs11("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  /* @__PURE__ */ jsx12(
                     "p",
                     {
                       style: {
@@ -3874,7 +5326,7 @@ function WalletSelectorDropdown({
                       children: displayName
                     }
                   ),
-                  hfunScore > 0 && /* @__PURE__ */ jsxs8(
+                  hfunScore > 0 && /* @__PURE__ */ jsxs11(
                     "span",
                     {
                       style: {
@@ -3889,7 +5341,7 @@ function WalletSelectorDropdown({
                         borderRadius: 4
                       },
                       children: [
-                        /* @__PURE__ */ jsx9(Star, { size: 10, color: "#eab308", fill: "#eab308" }),
+                        /* @__PURE__ */ jsx12(Star, { size: 10, color: "#eab308", fill: "#eab308" }),
                         hfunScore.toFixed(0)
                       ]
                     }
@@ -3898,9 +5350,9 @@ function WalletSelectorDropdown({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs8("div", { style: { borderBottom: sectionBorder }, children: [
-            /* @__PURE__ */ jsx9("div", { style: sectionHeaderStyle, children: "Wallets" }),
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs11("div", { style: { borderBottom: sectionBorder }, children: [
+            /* @__PURE__ */ jsx12("div", { style: sectionHeaderStyle, children: "Wallets" }),
+            /* @__PURE__ */ jsx12(
               "div",
               {
                 style: {
@@ -3915,8 +5367,8 @@ function WalletSelectorDropdown({
                   const isSelectedGroup = entry.items.some(
                     (item) => item.wallet.id === selectedWalletId
                   );
-                  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-                    /* @__PURE__ */ jsxs8(
+                  return /* @__PURE__ */ jsxs11(Fragment8, { children: [
+                    /* @__PURE__ */ jsxs11(
                       "div",
                       {
                         style: {
@@ -3931,8 +5383,8 @@ function WalletSelectorDropdown({
                           color: isSelectedGroup ? "#e5e7eb" : "#6b7280"
                         },
                         children: [
-                          /* @__PURE__ */ jsx9(Folder, { size: 12, style: { flexShrink: 0 } }),
-                          /* @__PURE__ */ jsx9(
+                          /* @__PURE__ */ jsx12(Folder, { size: 12, style: { flexShrink: 0 } }),
+                          /* @__PURE__ */ jsx12(
                             "span",
                             {
                               style: {
@@ -3945,7 +5397,7 @@ function WalletSelectorDropdown({
                               children: entry.path
                             }
                           ),
-                          /* @__PURE__ */ jsx9(
+                          /* @__PURE__ */ jsx12(
                             "span",
                             {
                               style: {
@@ -3964,7 +5416,7 @@ function WalletSelectorDropdown({
                 })
               }
             ),
-            authMethod !== "eoa" && onAddWallet && /* @__PURE__ */ jsxs8(
+            authMethod !== "eoa" && onAddWallet && /* @__PURE__ */ jsxs11(
               "button",
               {
                 onClick: () => {
@@ -3988,26 +5440,36 @@ function WalletSelectorDropdown({
                 onMouseEnter: (e) => e.currentTarget.style.background = "rgba(255,255,255,0.06)",
                 onMouseLeave: (e) => e.currentTarget.style.background = "transparent",
                 children: [
-                  /* @__PURE__ */ jsx9(Plus, { size: 14 }),
+                  /* @__PURE__ */ jsx12(Plus, { size: 14 }),
                   "Add Wallet"
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs8("div", { children: [
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs11("div", { children: [
+            /* @__PURE__ */ jsx12(
               FooterBtn,
               {
                 onClick: openProfile,
-                icon: /* @__PURE__ */ jsx9(User, { size: 14 }),
+                icon: /* @__PURE__ */ jsx12(User, { size: 14 }),
                 label: "Profile & Settings"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            extraFooterItems?.map((item) => /* @__PURE__ */ jsx12(
+              FooterBtn,
+              {
+                onClick: item.onClick,
+                icon: item.icon,
+                label: item.label,
+                hoverColor: item.hoverColor
+              },
+              item.key
+            )),
+            /* @__PURE__ */ jsx12(
               FooterBtn,
               {
                 onClick: handleLogout,
-                icon: /* @__PURE__ */ jsx9(LogOut, { size: 14 }),
+                icon: /* @__PURE__ */ jsx12(LogOut, { size: 14 }),
                 label: "Logout",
                 hoverColor: "#ef4444"
               }
@@ -4016,7 +5478,7 @@ function WalletSelectorDropdown({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx12(
       UserProfileModal,
       {
         isOpen: profileOpen,
@@ -4030,6 +5492,7 @@ function WalletSelectorDropdown({
         principalColors,
         onWalletDeleted,
         onWalletRenamed,
+        onRenewAgentWallet,
         onShowPortfolio: onShowPortfolio ? (wallet) => {
           onShowPortfolio(wallet);
           setProfileOpen(false);
@@ -4045,7 +5508,7 @@ function FooterBtn({
   label,
   hoverColor = "#fff"
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "button",
     {
       onClick,
@@ -4069,13 +5532,19 @@ function WalletRow2({
   depth,
   isSelected,
   label,
+  walletType,
   compactAddress,
   onSelect,
   onShowPortfolio,
   onCopy,
+  agentExpiryTitle,
+  onRenewAgentWallet,
   colors
 }) {
-  return /* @__PURE__ */ jsxs8(
+  const isAgentExpired = !!agentExpiryTitle;
+  const walletTextColor = isAgentExpired ? EXPIRED_AGENT_COLOR : "#d1d5db";
+  const mutedTextColor = isAgentExpired ? "rgba(245,158,11,0.78)" : "#6b7280";
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       style: {
@@ -4085,7 +5554,7 @@ function WalletRow2({
         paddingTop: 6,
         paddingBottom: 6,
         fontSize: 14,
-        color: "#d1d5db",
+        color: walletTextColor,
         display: "flex",
         alignItems: "center",
         background: isSelected ? "rgba(255,255,255,0.06)" : "transparent",
@@ -4102,7 +5571,7 @@ function WalletRow2({
         if (actions) actions.style.opacity = "0";
       },
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs11(
           "button",
           {
             onClick: onSelect,
@@ -4119,50 +5588,74 @@ function WalletRow2({
               cursor: "pointer",
               padding: 0
             },
-            children: label ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
-              /* @__PURE__ */ jsx9(
+            children: [
+              /* @__PURE__ */ jsx12(
                 "span",
                 {
+                  title: walletType.label,
+                  "aria-label": walletType.label,
                   style: {
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    color: isSelected ? "#fff" : void 0,
-                    fontWeight: isSelected ? 500 : void 0
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
+                    color: isAgentExpired ? walletTextColor : walletType.color
                   },
-                  children: label
+                  children: walletType.icon
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              label ? /* @__PURE__ */ jsxs11(Fragment9, { children: [
+                /* @__PURE__ */ jsx12(
+                  "span",
+                  {
+                    style: {
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      color: isAgentExpired ? walletTextColor : isSelected ? "#fff" : void 0,
+                      fontWeight: isSelected ? 500 : void 0
+                    },
+                    children: label
+                  }
+                ),
+                /* @__PURE__ */ jsxs11(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12,
+                      fontWeight: 400,
+                      flexShrink: 0,
+                      color: mutedTextColor
+                    },
+                    children: [
+                      "(",
+                      compactAddress,
+                      ")"
+                    ]
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx12(
                 "span",
                 {
                   style: {
                     fontSize: 12,
-                    fontWeight: 400,
-                    flexShrink: 0,
-                    color: "#6b7280"
+                    color: isAgentExpired ? walletTextColor : isSelected ? "#fff" : "#9ca3af",
+                    fontWeight: isSelected ? 500 : void 0
                   },
-                  children: [
-                    "(",
-                    compactAddress,
-                    ")"
-                  ]
+                  children: compactAddress
                 }
               )
-            ] }) : /* @__PURE__ */ jsx9(
-              "span",
-              {
-                style: {
-                  fontSize: 12,
-                  color: isSelected ? "#fff" : "#9ca3af",
-                  fontWeight: isSelected ? 500 : void 0
-                },
-                children: compactAddress
-              }
-            )
+            ]
+          }
+        ),
+        agentExpiryTitle && /* @__PURE__ */ jsx12(
+          AgentExpiryWarningIcon,
+          {
+            message: agentExpiryTitle,
+            onClick: onRenewAgentWallet
           }
         ),
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             "data-row-actions": true,
@@ -4173,7 +5666,19 @@ function WalletRow2({
               transition: "opacity 120ms"
             },
             children: [
-              onShowPortfolio && /* @__PURE__ */ jsx9(
+              onRenewAgentWallet && /* @__PURE__ */ jsx12(
+                RowIconBtn,
+                {
+                  title: "Renew agent wallet",
+                  hoverColor: isAgentExpired ? EXPIRED_AGENT_COLOR : colors.accent,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onRenewAgentWallet();
+                  },
+                  children: /* @__PURE__ */ jsx12(RefreshCw, { size: 12 })
+                }
+              ),
+              onShowPortfolio && /* @__PURE__ */ jsx12(
                 RowIconBtn,
                 {
                   title: "View portfolio",
@@ -4182,10 +5687,10 @@ function WalletRow2({
                     e.stopPropagation();
                     onShowPortfolio();
                   },
-                  children: /* @__PURE__ */ jsx9(LayoutDashboard, { size: 12 })
+                  children: /* @__PURE__ */ jsx12(LayoutDashboard, { size: 12 })
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx12(
                 RowIconBtn,
                 {
                   title: "Copy address",
@@ -4194,7 +5699,7 @@ function WalletRow2({
                     e.stopPropagation();
                     onCopy();
                   },
-                  children: /* @__PURE__ */ jsx9(Copy, { size: 12 })
+                  children: /* @__PURE__ */ jsx12(Copy, { size: 12 })
                 }
               )
             ]
@@ -4210,7 +5715,7 @@ function RowIconBtn({
   onClick,
   hoverColor = profileColors.text
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       onClick,
@@ -4245,16 +5750,21 @@ function createEoaSigner(signTypedDataAsync, chainId, options = {}) {
   };
 }
 export {
+  AGENT_APPROVAL_DURATION_OPTIONS,
+  AddWalletModal,
+  DEFAULT_AGENT_APPROVAL_DURATION_MS,
   DeleteWalletModal,
   GrpcExchangeTransport,
   HypurrConnectProvider,
   LoginModal,
   PrivateKeySigner,
   RenameWalletModal,
+  RenewAgentModal,
   UserProfileModal,
   WalletSelectorDropdown,
   createEoaSigner,
   createStaticClient,
+  createTelegramAgentApprovalName,
   createTelegramClient,
   useHypurrConnect
 };