From 43b41a28c5c5dd698ae4627148dc25855049f445 Mon Sep 17 00:00:00 2001 From: RALPH Date: Thu, 16 Apr 2026 16:43:51 +0530 Subject: [PATCH 01/54] refactor(ui): default divider on modal header and simplify tooltip arrow --- .../components/global-settings-modal.tsx | 2 +- .../trade/components/spot-swap-modal.tsx | 2 +- .../positions/position-limit-close-modal.tsx | 4 +- .../trade/positions/position-tpsl-modal.tsx | 38 +++++++------- .../components/trade/positions/send-modal.tsx | 2 +- .../trade/positions/transfer-modal.tsx | 2 +- .../trade/tradebox/deposit-modal.tsx | 2 +- .../trade/tradebox/margin-mode-modal.tsx | 2 +- apps/terminal/src/locales/ar/messages.po | 47 ++++++++++++++---- apps/terminal/src/locales/en/messages.po | 49 +++++++++++++++---- apps/terminal/src/locales/es/messages.po | 47 ++++++++++++++---- apps/terminal/src/locales/fr/messages.po | 47 ++++++++++++++---- apps/terminal/src/locales/hi/messages.po | 47 ++++++++++++++---- apps/terminal/src/locales/zh/messages.po | 47 ++++++++++++++---- packages/ui/src/modal.tsx | 20 +++++--- packages/ui/src/tooltip.tsx | 14 +++--- 16 files changed, 276 insertions(+), 96 deletions(-) diff --git a/apps/terminal/src/components/trade/components/global-settings-modal.tsx b/apps/terminal/src/components/trade/components/global-settings-modal.tsx index dbd24587..dc4cc09b 100644 --- a/apps/terminal/src/components/trade/components/global-settings-modal.tsx +++ b/apps/terminal/src/components/trade/components/global-settings-modal.tsx @@ -74,7 +74,7 @@ export function GlobalSettingsModal() { return ( - + {t`Settings`} diff --git a/apps/terminal/src/components/trade/components/spot-swap-modal.tsx b/apps/terminal/src/components/trade/components/spot-swap-modal.tsx index 6891b453..8a76f40c 100644 --- a/apps/terminal/src/components/trade/components/spot-swap-modal.tsx +++ b/apps/terminal/src/components/trade/components/spot-swap-modal.tsx @@ -203,7 +203,7 @@ function SpotSwapModalContent({ initialFromToken, initialToToken, onClose }: Pro return ( - + Swap diff --git a/apps/terminal/src/components/trade/positions/position-limit-close-modal.tsx b/apps/terminal/src/components/trade/positions/position-limit-close-modal.tsx index 65016002..474987ac 100644 --- a/apps/terminal/src/components/trade/positions/position-limit-close-modal.tsx +++ b/apps/terminal/src/components/trade/positions/position-limit-close-modal.tsx @@ -115,7 +115,7 @@ export function PositionLimitCloseModal({ open, onOpenChange, position }: Props) return ( - + {t`Limit Close`} @@ -153,7 +153,7 @@ export function PositionLimitCloseModal({ open, onOpenChange, position }: Props) -
+
- - - - - {position.isLong ? ( - <> - - {t`Long`} - - ) : ( - <> - - {t`Short`} - - )} - - + + {t`Manage TP/SL`} + + {position.isLong ? t`Long ${position.coin} position` : t`Short ${position.coin} position`} + @@ -163,7 +159,7 @@ export function PositionTpSlModal({ open, onOpenChange, position }: Props) {
-
+
- + {t`Send Tokens`} {t`Send tokens to another account on the Hyperliquid L1.`} diff --git a/apps/terminal/src/components/trade/positions/transfer-modal.tsx b/apps/terminal/src/components/trade/positions/transfer-modal.tsx index 6aaf1aed..f7a1cb9b 100644 --- a/apps/terminal/src/components/trade/positions/transfer-modal.tsx +++ b/apps/terminal/src/components/trade/positions/transfer-modal.tsx @@ -104,7 +104,7 @@ export function TransferModal({ open, onOpenChange, initialDirection = "toSpot" return ( - + {t`Transfer USDC`} {t`Move USDC between your Perp and Spot accounts.`} diff --git a/apps/terminal/src/components/trade/tradebox/deposit-modal.tsx b/apps/terminal/src/components/trade/tradebox/deposit-modal.tsx index 772d27d9..9d0f687e 100644 --- a/apps/terminal/src/components/trade/tradebox/deposit-modal.tsx +++ b/apps/terminal/src/components/trade/tradebox/deposit-modal.tsx @@ -88,7 +88,7 @@ function StatusScreen({ return ( - + {title} diff --git a/apps/terminal/src/components/trade/tradebox/margin-mode-modal.tsx b/apps/terminal/src/components/trade/tradebox/margin-mode-modal.tsx index cfce122d..d1852db5 100644 --- a/apps/terminal/src/components/trade/tradebox/margin-mode-modal.tsx +++ b/apps/terminal/src/components/trade/tradebox/margin-mode-modal.tsx @@ -179,7 +179,7 @@ export function MarginModeModal({ return ( - + Margin & leverage diff --git a/apps/terminal/src/locales/ar/messages.po b/apps/terminal/src/locales/ar/messages.po index ed5ffdaf..ebce5d6a 100644 --- a/apps/terminal/src/locales/ar/messages.po +++ b/apps/terminal/src/locales/ar/messages.po @@ -318,8 +318,8 @@ msgid "Builders" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "buy" -msgstr "شراء" +#~ msgid "buy" +#~ msgstr "شراء" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Buy" @@ -1210,10 +1210,14 @@ msgid "Loading..." msgstr "جارٍ التحميل..." #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Long" msgstr "شراء" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Long {0} position" +msgstr "" + #: src/components/trade/tradebox/bridge-tab.tsx msgid "Low Balance" msgstr "" @@ -1223,6 +1227,10 @@ msgstr "" msgid "Maintenance Margin" msgstr "" +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Manage TP/SL" +msgstr "" + #: src/components/trade/tradebox/margin-mode-dialog.tsx #~ msgid "Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode." #~ msgstr "" @@ -1973,8 +1981,8 @@ msgid "selected" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "sell" -msgstr "بيع" +#~ msgid "sell" +#~ msgstr "بيع" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Sell" @@ -2040,10 +2048,14 @@ msgid "Settings" msgstr "الإعدادات" #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Short" msgstr "بيع" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Short {0} position" +msgstr "" + #: src/components/trade/components/global-settings-dialog.tsx #~ msgid "Show Executions" #~ msgstr "" @@ -2301,13 +2313,30 @@ msgid "Switch between mainnet and testnet. Page will reload." msgstr "" #. placeholder {0}: fill.coin -#. placeholder {0}: order.coin -#. placeholder {0}: state.coin #: src/components/trade/positions/history-tab.tsx +msgid "Switch to {0} market" +msgstr "" + +#. placeholder {0}: state.coin +#: src/components/trade/positions/twap-tab.tsx +msgid "Switch to {0} market, buy TWAP" +msgstr "" + +#. placeholder {0}: order.coin #: src/components/trade/positions/orders-history-tab.tsx #: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, long order" +msgstr "" + +#. placeholder {0}: state.coin #: src/components/trade/positions/twap-tab.tsx -msgid "Switch to {0} market" +msgid "Switch to {0} market, sell TWAP" +msgstr "" + +#. placeholder {0}: order.coin +#: src/components/trade/positions/orders-history-tab.tsx +#: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, short order" msgstr "" #: src/components/trade/positions/orders-tab.tsx diff --git a/apps/terminal/src/locales/en/messages.po b/apps/terminal/src/locales/en/messages.po index d22a3351..97a1fd7c 100644 --- a/apps/terminal/src/locales/en/messages.po +++ b/apps/terminal/src/locales/en/messages.po @@ -318,8 +318,8 @@ msgid "Builders" msgstr "Builders" #: src/components/trade/positions/twap-tab.tsx -msgid "buy" -msgstr "buy" +#~ msgid "buy" +#~ msgstr "buy" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Buy" @@ -1214,10 +1214,14 @@ msgid "Loading..." msgstr "Loading..." #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Long" msgstr "Long" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Long {0} position" +msgstr "Long {0} position" + #: src/components/trade/tradebox/bridge-tab.tsx msgid "Low Balance" msgstr "Low Balance" @@ -1227,6 +1231,10 @@ msgstr "Low Balance" msgid "Maintenance Margin" msgstr "Maintenance Margin" +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Manage TP/SL" +msgstr "Manage TP/SL" + #: src/components/trade/tradebox/margin-mode-dialog.tsx #~ msgid "Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode." #~ msgstr "Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode." @@ -1977,8 +1985,8 @@ msgid "selected" msgstr "selected" #: src/components/trade/positions/twap-tab.tsx -msgid "sell" -msgstr "sell" +#~ msgid "sell" +#~ msgstr "sell" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Sell" @@ -2044,10 +2052,14 @@ msgid "Settings" msgstr "Settings" #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Short" msgstr "Short" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Short {0} position" +msgstr "Short {0} position" + #: src/components/trade/components/global-settings-dialog.tsx #~ msgid "Show Executions" #~ msgstr "Show Executions" @@ -2305,14 +2317,31 @@ msgid "Switch between mainnet and testnet. Page will reload." msgstr "Switch between mainnet and testnet. Page will reload." #. placeholder {0}: fill.coin -#. placeholder {0}: order.coin -#. placeholder {0}: state.coin #: src/components/trade/positions/history-tab.tsx +msgid "Switch to {0} market" +msgstr "Switch to {0} market" + +#. placeholder {0}: state.coin +#: src/components/trade/positions/twap-tab.tsx +msgid "Switch to {0} market, buy TWAP" +msgstr "Switch to {0} market, buy TWAP" + +#. placeholder {0}: order.coin #: src/components/trade/positions/orders-history-tab.tsx #: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, long order" +msgstr "Switch to {0} market, long order" + +#. placeholder {0}: state.coin #: src/components/trade/positions/twap-tab.tsx -msgid "Switch to {0} market" -msgstr "Switch to {0} market" +msgid "Switch to {0} market, sell TWAP" +msgstr "Switch to {0} market, sell TWAP" + +#. placeholder {0}: order.coin +#: src/components/trade/positions/orders-history-tab.tsx +#: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, short order" +msgstr "Switch to {0} market, short order" #: src/components/trade/positions/orders-tab.tsx #~ msgid "Switch to {displayCoin} market" diff --git a/apps/terminal/src/locales/es/messages.po b/apps/terminal/src/locales/es/messages.po index 7b57b622..d3444024 100644 --- a/apps/terminal/src/locales/es/messages.po +++ b/apps/terminal/src/locales/es/messages.po @@ -318,8 +318,8 @@ msgid "Builders" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "buy" -msgstr "compra" +#~ msgid "buy" +#~ msgstr "compra" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Buy" @@ -1210,10 +1210,14 @@ msgid "Loading..." msgstr "Cargando..." #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Long" msgstr "Largo" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Long {0} position" +msgstr "" + #: src/components/trade/tradebox/bridge-tab.tsx msgid "Low Balance" msgstr "" @@ -1223,6 +1227,10 @@ msgstr "" msgid "Maintenance Margin" msgstr "" +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Manage TP/SL" +msgstr "" + #: src/components/trade/tradebox/margin-mode-dialog.tsx #~ msgid "Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode." #~ msgstr "" @@ -1973,8 +1981,8 @@ msgid "selected" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "sell" -msgstr "venta" +#~ msgid "sell" +#~ msgstr "venta" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Sell" @@ -2040,10 +2048,14 @@ msgid "Settings" msgstr "Configuración" #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Short" msgstr "Corto" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Short {0} position" +msgstr "" + #: src/components/trade/components/global-settings-dialog.tsx #~ msgid "Show Executions" #~ msgstr "" @@ -2301,13 +2313,30 @@ msgid "Switch between mainnet and testnet. Page will reload." msgstr "" #. placeholder {0}: fill.coin -#. placeholder {0}: order.coin -#. placeholder {0}: state.coin #: src/components/trade/positions/history-tab.tsx +msgid "Switch to {0} market" +msgstr "" + +#. placeholder {0}: state.coin +#: src/components/trade/positions/twap-tab.tsx +msgid "Switch to {0} market, buy TWAP" +msgstr "" + +#. placeholder {0}: order.coin #: src/components/trade/positions/orders-history-tab.tsx #: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, long order" +msgstr "" + +#. placeholder {0}: state.coin #: src/components/trade/positions/twap-tab.tsx -msgid "Switch to {0} market" +msgid "Switch to {0} market, sell TWAP" +msgstr "" + +#. placeholder {0}: order.coin +#: src/components/trade/positions/orders-history-tab.tsx +#: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, short order" msgstr "" #: src/components/trade/positions/orders-tab.tsx diff --git a/apps/terminal/src/locales/fr/messages.po b/apps/terminal/src/locales/fr/messages.po index c8e05134..114a55d3 100644 --- a/apps/terminal/src/locales/fr/messages.po +++ b/apps/terminal/src/locales/fr/messages.po @@ -318,8 +318,8 @@ msgid "Builders" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "buy" -msgstr "achat" +#~ msgid "buy" +#~ msgstr "achat" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Buy" @@ -1210,10 +1210,14 @@ msgid "Loading..." msgstr "Chargement..." #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Long" msgstr "Achat" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Long {0} position" +msgstr "" + #: src/components/trade/tradebox/bridge-tab.tsx msgid "Low Balance" msgstr "" @@ -1223,6 +1227,10 @@ msgstr "" msgid "Maintenance Margin" msgstr "" +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Manage TP/SL" +msgstr "" + #: src/components/trade/tradebox/margin-mode-dialog.tsx #~ msgid "Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode." #~ msgstr "" @@ -1973,8 +1981,8 @@ msgid "selected" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "sell" -msgstr "vente" +#~ msgid "sell" +#~ msgstr "vente" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Sell" @@ -2040,10 +2048,14 @@ msgid "Settings" msgstr "Paramètres" #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Short" msgstr "Vente" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Short {0} position" +msgstr "" + #: src/components/trade/components/global-settings-dialog.tsx #~ msgid "Show Executions" #~ msgstr "" @@ -2301,13 +2313,30 @@ msgid "Switch between mainnet and testnet. Page will reload." msgstr "" #. placeholder {0}: fill.coin -#. placeholder {0}: order.coin -#. placeholder {0}: state.coin #: src/components/trade/positions/history-tab.tsx +msgid "Switch to {0} market" +msgstr "" + +#. placeholder {0}: state.coin +#: src/components/trade/positions/twap-tab.tsx +msgid "Switch to {0} market, buy TWAP" +msgstr "" + +#. placeholder {0}: order.coin #: src/components/trade/positions/orders-history-tab.tsx #: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, long order" +msgstr "" + +#. placeholder {0}: state.coin #: src/components/trade/positions/twap-tab.tsx -msgid "Switch to {0} market" +msgid "Switch to {0} market, sell TWAP" +msgstr "" + +#. placeholder {0}: order.coin +#: src/components/trade/positions/orders-history-tab.tsx +#: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, short order" msgstr "" #: src/components/trade/positions/orders-tab.tsx diff --git a/apps/terminal/src/locales/hi/messages.po b/apps/terminal/src/locales/hi/messages.po index 4e75921d..4800a2e6 100644 --- a/apps/terminal/src/locales/hi/messages.po +++ b/apps/terminal/src/locales/hi/messages.po @@ -318,8 +318,8 @@ msgid "Builders" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "buy" -msgstr "खरीदें" +#~ msgid "buy" +#~ msgstr "खरीदें" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Buy" @@ -1210,10 +1210,14 @@ msgid "Loading..." msgstr "लोड हो रहा है..." #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Long" msgstr "लॉन्ग" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Long {0} position" +msgstr "" + #: src/components/trade/tradebox/bridge-tab.tsx msgid "Low Balance" msgstr "" @@ -1223,6 +1227,10 @@ msgstr "" msgid "Maintenance Margin" msgstr "" +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Manage TP/SL" +msgstr "" + #: src/components/trade/tradebox/margin-mode-dialog.tsx #~ msgid "Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode." #~ msgstr "" @@ -1973,8 +1981,8 @@ msgid "selected" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "sell" -msgstr "बेचें" +#~ msgid "sell" +#~ msgstr "बेचें" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Sell" @@ -2040,10 +2048,14 @@ msgid "Settings" msgstr "सेटिंग्स" #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Short" msgstr "शॉर्ट" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Short {0} position" +msgstr "" + #: src/components/trade/components/global-settings-dialog.tsx #~ msgid "Show Executions" #~ msgstr "" @@ -2301,13 +2313,30 @@ msgid "Switch between mainnet and testnet. Page will reload." msgstr "" #. placeholder {0}: fill.coin -#. placeholder {0}: order.coin -#. placeholder {0}: state.coin #: src/components/trade/positions/history-tab.tsx +msgid "Switch to {0} market" +msgstr "" + +#. placeholder {0}: state.coin +#: src/components/trade/positions/twap-tab.tsx +msgid "Switch to {0} market, buy TWAP" +msgstr "" + +#. placeholder {0}: order.coin #: src/components/trade/positions/orders-history-tab.tsx #: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, long order" +msgstr "" + +#. placeholder {0}: state.coin #: src/components/trade/positions/twap-tab.tsx -msgid "Switch to {0} market" +msgid "Switch to {0} market, sell TWAP" +msgstr "" + +#. placeholder {0}: order.coin +#: src/components/trade/positions/orders-history-tab.tsx +#: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, short order" msgstr "" #: src/components/trade/positions/orders-tab.tsx diff --git a/apps/terminal/src/locales/zh/messages.po b/apps/terminal/src/locales/zh/messages.po index a9933f3c..ea2dd475 100644 --- a/apps/terminal/src/locales/zh/messages.po +++ b/apps/terminal/src/locales/zh/messages.po @@ -318,8 +318,8 @@ msgid "Builders" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "buy" -msgstr "买入" +#~ msgid "buy" +#~ msgstr "买入" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Buy" @@ -1210,10 +1210,14 @@ msgid "Loading..." msgstr "加载中..." #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Long" msgstr "多" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Long {0} position" +msgstr "" + #: src/components/trade/tradebox/bridge-tab.tsx msgid "Low Balance" msgstr "" @@ -1223,6 +1227,10 @@ msgstr "" msgid "Maintenance Margin" msgstr "" +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Manage TP/SL" +msgstr "" + #: src/components/trade/tradebox/margin-mode-dialog.tsx #~ msgid "Manage your risk on individual positions by restricting the amount of margin allocated to each. If the margin ratio of an isolated position reaches 100%, the position will be liquidated. Margin can be added or removed to individual positions in this mode." #~ msgstr "" @@ -1973,8 +1981,8 @@ msgid "selected" msgstr "" #: src/components/trade/positions/twap-tab.tsx -msgid "sell" -msgstr "卖出" +#~ msgid "sell" +#~ msgstr "卖出" #: src/components/trade/mobile/mobile-twap-tab.tsx msgid "Sell" @@ -2040,10 +2048,14 @@ msgid "Settings" msgstr "设置" #: src/components/trade/mobile/mobile-positions-tab.tsx -#: src/components/trade/positions/position-tpsl-modal.tsx msgid "Short" msgstr "空" +#. placeholder {0}: position.coin +#: src/components/trade/positions/position-tpsl-modal.tsx +msgid "Short {0} position" +msgstr "" + #: src/components/trade/components/global-settings-dialog.tsx #~ msgid "Show Executions" #~ msgstr "" @@ -2301,13 +2313,30 @@ msgid "Switch between mainnet and testnet. Page will reload." msgstr "" #. placeholder {0}: fill.coin -#. placeholder {0}: order.coin -#. placeholder {0}: state.coin #: src/components/trade/positions/history-tab.tsx +msgid "Switch to {0} market" +msgstr "" + +#. placeholder {0}: state.coin +#: src/components/trade/positions/twap-tab.tsx +msgid "Switch to {0} market, buy TWAP" +msgstr "" + +#. placeholder {0}: order.coin #: src/components/trade/positions/orders-history-tab.tsx #: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, long order" +msgstr "" + +#. placeholder {0}: state.coin #: src/components/trade/positions/twap-tab.tsx -msgid "Switch to {0} market" +msgid "Switch to {0} market, sell TWAP" +msgstr "" + +#. placeholder {0}: order.coin +#: src/components/trade/positions/orders-history-tab.tsx +#: src/components/trade/positions/orders-tab.tsx +msgid "Switch to {0} market, short order" msgstr "" #: src/components/trade/positions/orders-tab.tsx diff --git a/packages/ui/src/modal.tsx b/packages/ui/src/modal.tsx index 99496b25..ce47e3a5 100644 --- a/packages/ui/src/modal.tsx +++ b/packages/ui/src/modal.tsx @@ -91,11 +91,19 @@ const ModalPopup = React.forwardRef( ); ModalPopup.displayName = "ModalPopup"; -interface ModalHeaderProps extends React.HTMLAttributes {} +interface ModalHeaderProps extends React.HTMLAttributes { + divider?: boolean; +} -const ModalHeader = React.forwardRef(({ className, ...props }, ref) => ( -
-)); +const ModalHeader = React.forwardRef( + ({ className, divider = true, ...props }, ref) => ( +
+ ), +); ModalHeader.displayName = "ModalHeader"; interface ModalTitleProps extends React.ComponentPropsWithoutRef {} @@ -117,14 +125,14 @@ ModalDescription.displayName = "ModalDescription"; interface ModalContentProps extends React.HTMLAttributes {} const ModalContent = React.forwardRef(({ className, ...props }, ref) => ( -
+
)); ModalContent.displayName = "ModalContent"; interface ModalFooterProps extends React.HTMLAttributes {} const ModalFooter = React.forwardRef(({ className, ...props }, ref) => ( -
+
)); ModalFooter.displayName = "ModalFooter"; diff --git a/packages/ui/src/tooltip.tsx b/packages/ui/src/tooltip.tsx index 7c04254f..19faf79c 100644 --- a/packages/ui/src/tooltip.tsx +++ b/packages/ui/src/tooltip.tsx @@ -16,7 +16,13 @@ const tooltipPopupVariants = cva([ "motion-reduce:transition-none", ]); -const tooltipArrowVariants = cva(["size-2 rotate-45 bg-overlay border border-stroke-weak"]); +const tooltipArrowVariants = cva([ + "size-2 rotate-45 bg-overlay border border-stroke-weak", + "data-[side=top]:-bottom-1", + "data-[side=bottom]:-top-1", + "data-[side=left]:-right-1", + "data-[side=right]:-left-1", +]); interface TooltipProps extends VariantProps { children: React.ReactElement; @@ -60,11 +66,7 @@ const Tooltip = React.forwardRef( {content} - {arrow && ( - -
- - )} + {arrow && } From 21c0f92adc20e894534a2348169d180da0099e82 Mon Sep 17 00:00:00 2001 From: RALPH Date: Thu, 16 Apr 2026 16:44:03 +0530 Subject: [PATCH 02/54] refactor(trade): use side indicator bar for orders and twap rows --- .../mobile/mobile-orders-history-tab.tsx | 9 +++++-- .../trade/positions/orders-history-tab.tsx | 15 ++++++++---- .../components/trade/positions/orders-tab.tsx | 24 ++++++++----------- .../trade/positions/positions-tab.tsx | 16 ++++++------- .../components/trade/positions/twap-tab.tsx | 14 +++++++---- apps/terminal/src/lib/trade/open-orders.ts | 15 +++--------- 6 files changed, 47 insertions(+), 46 deletions(-) diff --git a/apps/terminal/src/components/trade/mobile/mobile-orders-history-tab.tsx b/apps/terminal/src/components/trade/mobile/mobile-orders-history-tab.tsx index 50c450df..4f8c80b7 100644 --- a/apps/terminal/src/components/trade/mobile/mobile-orders-history-tab.tsx +++ b/apps/terminal/src/components/trade/mobile/mobile-orders-history-tab.tsx @@ -7,7 +7,7 @@ import { FALLBACK_VALUE_PLACEHOLDER } from "@/config/constants"; import { cn } from "@/lib/cn"; import { formatDateTime, formatToken, formatUSD } from "@/lib/format"; import { useMarkets, useSubscription } from "@/lib/hyperliquid"; -import { getSideClass, getSideLabel } from "@/lib/trade/open-orders"; +import { getSideLabel } from "@/lib/trade/open-orders"; import { useExchangeScope } from "@/providers/exchange-scope"; import { useMarketActions } from "@/stores/use-market-store"; import { AssetDisplay } from "../components/asset-display"; @@ -93,7 +93,12 @@ export function MobileOrdersHistoryTab({ className }: Props) { coin={order.coin} nameClassName="text-sm font-semibold" subtitle={ - + {getSideLabel(order.side, market?.kind)} } diff --git a/apps/terminal/src/components/trade/positions/orders-history-tab.tsx b/apps/terminal/src/components/trade/positions/orders-history-tab.tsx index f0078bf2..45b90fde 100644 --- a/apps/terminal/src/components/trade/positions/orders-history-tab.tsx +++ b/apps/terminal/src/components/trade/positions/orders-history-tab.tsx @@ -5,7 +5,6 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { cn } from "@/lib/cn"; import { formatDateTime, formatToken, formatUSD } from "@/lib/format"; import { useMarkets, useSubscription } from "@/lib/hyperliquid"; -import { getSideClass, getSideLabel } from "@/lib/trade/open-orders"; import { useExchangeScope } from "@/providers/exchange-scope"; import { useMarketActions } from "@/stores/use-market-store"; import { AssetDisplay } from "../components/asset-display"; @@ -114,6 +113,7 @@ export function OrdersHistoryTab() { {orders.map((entry, i) => { const { order } = entry; const market = markets.getMarket(order.coin); + const isLong = order.side === "B"; return (
+
diff --git a/apps/terminal/src/components/trade/positions/orders-tab.tsx b/apps/terminal/src/components/trade/positions/orders-tab.tsx index cc6ffbf4..0ac3e1ff 100644 --- a/apps/terminal/src/components/trade/positions/orders-tab.tsx +++ b/apps/terminal/src/components/trade/positions/orders-tab.tsx @@ -17,12 +17,9 @@ import { FALLBACK_VALUE_PLACEHOLDER, HL_ALL_DEXS } from "@/config/constants"; import { cn } from "@/lib/cn"; import { formatDateTime, formatPrice, formatToken, formatUSD } from "@/lib/format"; import { useExchange, useMarkets, useSubscription } from "@/lib/hyperliquid"; -import type { MarketKind } from "@/lib/hyperliquid/markets"; import { getOrderTypeConfig, getOrderValue, - getSideClass, - getSideLabel, isClosePositionOrder, isMarketTriggerOrder, type OpenOrder, @@ -287,7 +284,6 @@ export function OrdersTab() { @@ -351,24 +346,25 @@ function OrderRow({
+
- - {typeConfig.shortLabel} - + {typeConfig.shortLabel} diff --git a/apps/terminal/src/components/trade/positions/positions-tab.tsx b/apps/terminal/src/components/trade/positions/positions-tab.tsx index c78983b6..aac2c9d9 100644 --- a/apps/terminal/src/components/trade/positions/positions-tab.tsx +++ b/apps/terminal/src/components/trade/positions/positions-tab.tsx @@ -282,26 +282,26 @@ function PositionRow({ {tpSlInfo?.tpPrice && tpSlInfo?.slPrice ? ( <>
- {formatPrice(tpSlInfo.tpPrice, { szDecimals })} + {formatPrice(tpSlInfo.tpPrice, { szDecimals })} / - {formatPrice(tpSlInfo.slPrice, { szDecimals })} + {formatPrice(tpSlInfo.slPrice, { szDecimals })}
- + ) : hasTpSl ? ( <>
{tpSlInfo?.tpPrice ? ( - {formatPrice(tpSlInfo.tpPrice, { szDecimals })} + {formatPrice(tpSlInfo.tpPrice, { szDecimals })} ) : ( - {formatPrice(tpSlInfo?.slPrice, { szDecimals })} + {formatPrice(tpSlInfo?.slPrice, { szDecimals })} )}
- + ) : ( -
- +
+ {t`Add`}
)} diff --git a/apps/terminal/src/components/trade/positions/twap-tab.tsx b/apps/terminal/src/components/trade/positions/twap-tab.tsx index 75283525..188db053 100644 --- a/apps/terminal/src/components/trade/positions/twap-tab.tsx +++ b/apps/terminal/src/components/trade/positions/twap-tab.tsx @@ -118,7 +118,6 @@ export function TwapTab() { {activeOrders.map(({ twapId, state }, i) => { const isBuy = state.side === "B"; - const sideClass = isBuy ? "bg-success-soft text-success" : "bg-error-soft text-error"; const totalSize = toBig(state.sz)?.toNumber() ?? Number.NaN; const executedSize = toBig(state.executedSz)?.toNumber() ?? 0; const avgPrice = getAvgPrice(state.executedNtl, state.executedSz); @@ -133,14 +132,19 @@ export function TwapTab() { >
- - {isBuy ? t`buy` : t`sell`} - +