From 8f540ae17ca2741216d2fa19d44524681a88a880 Mon Sep 17 00:00:00 2001
From: tinkle-community <tinklefund@gmail.com>
Date: Wed, 31 Dec 2025 12:56:19 +0800
Subject: [PATCH] feat: improve Hyperliquid agent wallet config UX and guidance

---
 .../traders/ExchangeConfigModal.tsx           | 129 ++++++++----------
 web/src/i18n/translations.ts                  |  33 +++--
 2 files changed, 75 insertions(+), 87 deletions(-)

diff --git a/web/src/components/traders/ExchangeConfigModal.tsx b/web/src/components/traders/ExchangeConfigModal.tsx
index d492ac7b..92642b93 100644
--- a/web/src/components/traders/ExchangeConfigModal.tsx
+++ b/web/src/components/traders/ExchangeConfigModal.tsx
@@ -915,33 +915,39 @@ export function ExchangeConfigModal({
                 {/* Hyperliquid 交易所的字段 */}
                 {currentExchangeType === 'hyperliquid' && (
                   <>
-                    {/* 安全提示 banner */}
+                    {/* 操作指引 banner */}
                     <div
-                      className="p-3 rounded mb-4"
+                      className="p-4 rounded mb-4"
                       style={{
-                        background: 'rgba(240, 185, 11, 0.1)',
-                        border: '1px solid rgba(240, 185, 11, 0.3)',
+                        background: 'rgba(88, 166, 255, 0.1)',
+                        border: '1px solid rgba(88, 166, 255, 0.3)',
                       }}
                     >
-                      <div className="flex items-start gap-2">
-                        <span style={{ color: '#F0B90B', fontSize: '16px' }}>
-                          🔐
-                        </span>
-                        <div className="flex-1">
-                          <div
-                            className="text-sm font-semibold mb-1"
-                            style={{ color: '#F0B90B' }}
-                          >
-                            {t('hyperliquidAgentWalletTitle', language)}
-                          </div>
-                          <div
-                            className="text-xs"
-                            style={{ color: '#848E9C', lineHeight: '1.5' }}
-                          >
-                            {t('hyperliquidAgentWalletDesc', language)}
-                          </div>
-                        </div>
+                      <div
+                        className="text-sm font-semibold mb-2"
+                        style={{ color: '#58a6ff' }}
+                      >
+                        {t('hyperliquidAgentWalletTitle', language)}
                       </div>
+                      <div
+                        className="text-xs mb-3"
+                        style={{ color: '#c9d1d9', lineHeight: '1.6' }}
+                      >
+                        {t('hyperliquidAgentWalletDesc', language)}
+                      </div>
+                      <a
+                        href="https://app.hyperliquid.xyz/API"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-2 px-3 py-2 rounded text-sm font-medium transition-all hover:scale-105"
+                        style={{
+                          background: 'rgba(88, 166, 255, 0.2)',
+                          color: '#58a6ff',
+                        }}
+                      >
+                        <ExternalLink className="w-4 h-4" />
+                        {t('hyperliquidAgentWalletLinkText', language)}
+                      </a>
                     </div>
 
                     {/* Agent Private Key 字段 */}
@@ -952,57 +958,36 @@ export function ExchangeConfigModal({
                       >
                         {t('hyperliquidAgentPrivateKey', language)}
                       </label>
-                      <div className="flex flex-col gap-2">
-                        <div className="flex gap-2">
-                          <input
-                            type="text"
-                            value={maskSecret(apiKey)}
-                            readOnly
-                            placeholder={t(
-                              'enterHyperliquidAgentPrivateKey',
-                              language
-                            )}
-                            className="w-full px-3 py-2 rounded"
-                            style={{
-                              background: '#0B0E11',
-                              border: '1px solid #2B3139',
-                              color: '#EAECEF',
-                            }}
-                          />
-                          <button
-                            type="button"
-                            onClick={() => setSecureInputTarget('hyperliquid')}
-                            className="px-3 py-2 rounded text-xs font-semibold transition-all hover:scale-105"
-                            style={{
-                              background: '#F0B90B',
-                              color: '#000',
-                              whiteSpace: 'nowrap',
-                            }}
-                          >
-                            {apiKey
-                              ? t('secureInputReenter', language)
-                              : t('secureInputButton', language)}
-                          </button>
-                          {apiKey && (
-                            <button
-                              type="button"
-                              onClick={() => setApiKey('')}
-                              className="px-3 py-2 rounded text-xs font-semibold transition-all hover:scale-105"
-                              style={{
-                                background: '#1B1F2B',
-                                color: '#848E9C',
-                                whiteSpace: 'nowrap',
-                              }}
-                            >
-                              {t('secureInputClear', language)}
-                            </button>
+                      <div className="flex gap-2">
+                        <input
+                          type="password"
+                          value={apiKey}
+                          onChange={(e) => setApiKey(e.target.value)}
+                          placeholder={t(
+                            'enterHyperliquidAgentPrivateKey',
+                            language
                           )}
-                        </div>
-                        {apiKey && (
-                          <div className="text-xs" style={{ color: '#848E9C' }}>
-                            {t('secureInputHint', language)}
-                          </div>
-                        )}
+                          className="w-full px-3 py-2 rounded"
+                          style={{
+                            background: '#0B0E11',
+                            border: '1px solid #2B3139',
+                            color: '#EAECEF',
+                          }}
+                          required
+                        />
+                        <button
+                          type="button"
+                          onClick={() => setSecureInputTarget('hyperliquid')}
+                          className="px-3 py-2 rounded text-xs font-semibold transition-all hover:scale-105"
+                          style={{
+                            background: '#2B3139',
+                            color: '#848E9C',
+                            whiteSpace: 'nowrap',
+                          }}
+                          title={language === 'zh' ? '分段安全输入（可选）' : 'Staged secure input (optional)'}
+                        >
+                          {language === 'zh' ? '安全输入' : 'Secure'}
+                        </button>
                       </div>
                       <div
                         className="text-xs mt-1"
diff --git a/web/src/i18n/translations.ts b/web/src/i18n/translations.ts
index e02e01ec..016d6f34 100644
--- a/web/src/i18n/translations.ts
+++ b/web/src/i18n/translations.ts
@@ -347,17 +347,19 @@ export const translations = {
     hyperliquidWalletAddressDesc:
       'Wallet address corresponding to the private key',
     // Hyperliquid Agent Wallet (New Security Model)
-    hyperliquidAgentWalletTitle: 'Hyperliquid Agent Wallet Configuration',
+    hyperliquidAgentWalletTitle: 'How to get Agent Wallet?',
     hyperliquidAgentWalletDesc:
-      'Use Agent Wallet for secure trading: Agent wallet signs transactions (balance ~0), Main wallet holds funds (never expose private key)',
-    hyperliquidAgentPrivateKey: 'Agent Private Key',
-    enterHyperliquidAgentPrivateKey: 'Enter Agent wallet private key',
+      'Go to Hyperliquid → More → API → Create Agent Wallet. The Agent Wallet can only trade, cannot withdraw funds.',
+    hyperliquidAgentWalletLink: 'https://app.hyperliquid.xyz/API',
+    hyperliquidAgentWalletLinkText: 'Go to Hyperliquid to create Agent Wallet →',
+    hyperliquidAgentPrivateKey: 'Agent Wallet Private Key',
+    enterHyperliquidAgentPrivateKey: '0x... (64 hex characters)',
     hyperliquidAgentPrivateKeyDesc:
-      'Agent wallet private key for signing transactions (keep balance near 0 for security)',
+      'Private key shown when creating Agent Wallet. Only has trading permission, cannot withdraw.',
     hyperliquidMainWalletAddress: 'Main Wallet Address',
-    enterHyperliquidMainWalletAddress: 'Enter Main wallet address',
+    enterHyperliquidMainWalletAddress: '0x... (your main wallet)',
     hyperliquidMainWalletAddressDesc:
-      'Main wallet address that holds your trading funds (never expose its private key)',
+      'The wallet address you use to log in Hyperliquid (holds your funds)',
     // Aster API Pro Configuration
     asterApiProTitle: 'Aster API Pro Wallet Configuration',
     asterApiProDesc:
@@ -1548,16 +1550,17 @@ export const translations = {
     hyperliquidPrivateKeyDesc: 'Hyperliquid 使用私钥进行交易认证',
     hyperliquidWalletAddressDesc: '与私钥对应的钱包地址',
     // Hyperliquid 代理钱包 (新安全模型)
-    hyperliquidAgentWalletTitle: 'Hyperliquid 代理钱包配置',
+    hyperliquidAgentWalletTitle: '如何获取代理钱包？',
     hyperliquidAgentWalletDesc:
-      '使用代理钱包安全交易：代理钱包用于签名（餘額~0），主钱包持有资金（永不暴露私钥）',
-    hyperliquidAgentPrivateKey: '代理私钥',
-    enterHyperliquidAgentPrivateKey: '输入代理钱包私钥',
-    hyperliquidAgentPrivateKeyDesc: '代理钱包仅有交易权限，无法提现',
+      '打开 Hyperliquid → 右上角 More → API → Create Agent Wallet 创建代理钱包。代理钱包只能交易，无法提现。',
+    hyperliquidAgentWalletLink: 'https://app.hyperliquid.xyz/API',
+    hyperliquidAgentWalletLinkText: '去 Hyperliquid 创建代理钱包 →',
+    hyperliquidAgentPrivateKey: '代理钱包私钥',
+    enterHyperliquidAgentPrivateKey: '0x... (64位十六进制)',
+    hyperliquidAgentPrivateKeyDesc: '创建代理钱包时显示的私钥，只能交易，无法提现',
     hyperliquidMainWalletAddress: '主钱包地址',
-    enterHyperliquidMainWalletAddress: '输入主钱包地址',
-    hyperliquidMainWalletAddressDesc:
-      '持有交易资金的主钱包地址（永不暴露其私钥）',
+    enterHyperliquidMainWalletAddress: '0x... (你的主钱包地址)',
+    hyperliquidMainWalletAddressDesc: '你登录 Hyperliquid 时使用的钱包地址（资金所在钱包）',
     // Aster API Pro 配置
     asterApiProTitle: 'Aster API Pro 代理钱包配置',
     asterApiProDesc: