From 13dc0213f39f79f9d6e6bf76f67ff67ba9914da0 Mon Sep 17 00:00:00 2001
From: CoderMageFox <Codermagefox@codermagefox.com>
Date: Wed, 5 Nov 2025 13:03:41 +0800
Subject: [PATCH] feat: add help tooltips for Aster exchange configuration
 fields Added interactive help icons with tooltips for Aster exchange fields
 (user, signer, privateKey) to guide users through correct configuration.
 Changes: - Added HelpCircle icon from lucide-react - Created reusable Tooltip
 component with hover/click interaction - Added bilingual help descriptions in
 translations.ts - User field: explains main wallet address (login address) -
 Signer field: explains API wallet address generation - Private Key field:
 clarifies local-only usage, never transmitted This prevents user confusion
 and configuration errors when setting up Aster exchange. Co-Authored-By:
 tinkle-community <tinklefund@gmail.com>

---
 web/src/components/AITradersPage.tsx | 70 ++++++++++++++++++++++++++--
 web/src/i18n/translations.ts         | 14 +++++-
 2 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/web/src/components/AITradersPage.tsx b/web/src/components/AITradersPage.tsx
index e1c73699..f3d4353e 100644
--- a/web/src/components/AITradersPage.tsx
+++ b/web/src/components/AITradersPage.tsx
@@ -23,6 +23,7 @@ import {
   Users,
   AlertTriangle,
   BookOpen,
+  HelpCircle,
 } from 'lucide-react'
 
 // 获取友好的AI模型名称
@@ -1064,6 +1065,51 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
   )
 }
 
+// Tooltip Helper Component
+function Tooltip({
+  content,
+  children,
+}: {
+  content: string
+  children: React.ReactNode
+}) {
+  const [show, setShow] = useState(false)
+
+  return (
+    <div className="relative inline-block">
+      <div
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+        onClick={() => setShow(!show)}
+      >
+        {children}
+      </div>
+      {show && (
+        <div
+          className="absolute z-10 px-3 py-2 text-sm rounded-lg shadow-lg w-64 left-1/2 transform -translate-x-1/2 bottom-full mb-2"
+          style={{
+            background: '#2B3139',
+            color: '#EAECEF',
+            border: '1px solid #474D57',
+          }}
+        >
+          {content}
+          <div
+            className="absolute left-1/2 transform -translate-x-1/2 top-full"
+            style={{
+              width: 0,
+              height: 0,
+              borderLeft: '6px solid transparent',
+              borderRight: '6px solid transparent',
+              borderTop: '6px solid #2B3139',
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
 // Signal Source Configuration Modal Component
 function SignalSourceModal({
   coinPoolUrl,
@@ -1772,10 +1818,16 @@ function ExchangeConfigModal({
                 <>
                   <div>
                     <label
-                      className="block text-sm font-semibold mb-2"
+                      className="block text-sm font-semibold mb-2 flex items-center gap-2"
                       style={{ color: '#EAECEF' }}
                     >
                       {t('user', language)}
+                      <Tooltip content={t('asterUserDesc', language)}>
+                        <HelpCircle
+                          className="w-4 h-4 cursor-help"
+                          style={{ color: '#F0B90B' }}
+                        />
+                      </Tooltip>
                     </label>
                     <input
                       type="text"
@@ -1794,10 +1846,16 @@ function ExchangeConfigModal({
 
                   <div>
                     <label
-                      className="block text-sm font-semibold mb-2"
+                      className="block text-sm font-semibold mb-2 flex items-center gap-2"
                       style={{ color: '#EAECEF' }}
                     >
                       {t('signer', language)}
+                      <Tooltip content={t('asterSignerDesc', language)}>
+                        <HelpCircle
+                          className="w-4 h-4 cursor-help"
+                          style={{ color: '#F0B90B' }}
+                        />
+                      </Tooltip>
                     </label>
                     <input
                       type="text"
@@ -1816,10 +1874,16 @@ function ExchangeConfigModal({
 
                   <div>
                     <label
-                      className="block text-sm font-semibold mb-2"
+                      className="block text-sm font-semibold mb-2 flex items-center gap-2"
                       style={{ color: '#EAECEF' }}
                     >
                       {t('privateKey', language)}
+                      <Tooltip content={t('asterPrivateKeyDesc', language)}>
+                        <HelpCircle
+                          className="w-4 h-4 cursor-help"
+                          style={{ color: '#F0B90B' }}
+                        />
+                      </Tooltip>
                     </label>
                     <input
                       type="password"
diff --git a/web/src/i18n/translations.ts b/web/src/i18n/translations.ts
index ae5c8cca..5322cd72 100644
--- a/web/src/i18n/translations.ts
+++ b/web/src/i18n/translations.ts
@@ -197,6 +197,12 @@ export const translations = {
       'Hyperliquid uses private key for trading authentication',
     hyperliquidWalletAddressDesc:
       'Wallet address corresponding to the private key',
+    asterUserDesc:
+      'Main wallet address - The EVM wallet address you use to log in to Aster',
+    asterSignerDesc:
+      'API wallet address - Generate from Aster API Wallet page',
+    asterPrivateKeyDesc:
+      'API wallet private key - Only used locally for signing, never transmitted',
     testnetDescription:
       'Enable to connect to exchange test environment for simulated trading',
     securityWarning: 'Security Warning',
@@ -658,7 +664,13 @@ export const translations = {
     enterPassphrase: '输入Passphrase (OKX必填)',
     hyperliquidPrivateKeyDesc: 'Hyperliquid 使用私钥进行交易认证',
     hyperliquidWalletAddressDesc: '与私钥对应的钱包地址',
-    testnetDescription: '启用后将连接到交易所测试环境，用于模拟交易',
+    asterUserDesc:
+      '主钱包地址 - 您用于登录 Aster 的 EVM 钱包地址',
+    asterSignerDesc:
+      'API 钱包地址 - 从 Aster API 钱包页面生成',
+    asterPrivateKeyDesc:
+      'API 钱包私钥 - 仅在本地用于签名，不会被传输',
+    testnetDescription: '启用后将连接到交易所测试环境,用于模拟交易',
     securityWarning: '安全提示',
     saveConfiguration: '保存配置',