OK-35211: Fix earn protection section UI (#6549)

* chore: i18n

* fix: protection section ui

packages/kit/src/views/Staking/components/ProtocolDetails/ProtectionSection.tsx

@@ -5,11 +5,11 @@ import {
   Dialog,
   Divider,
   Icon,
-  IconButton,
   SizableText,
   XStack,
   YStack,
 } from '@onekeyhq/components';
+import { ListItem } from '@onekeyhq/kit/src/components/ListItem';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import earnUtils from '@onekeyhq/shared/src/utils/earnUtils';
 import type { IStakeProtocolDetails } from '@onekeyhq/shared/types/staking';
@@ -19,7 +19,6 @@ function AutoRiskControlContent() {
   return (
     <YStack gap="$4">
       <YStack gap="$3">
-        {/* Point 1 */}
         <XStack alignItems="flex-start">
           <SizableText size="$bodyLg" flex={1}>
             1.{' '}
@@ -29,7 +28,6 @@ function AutoRiskControlContent() {
           </SizableText>
         </XStack>
 
-        {/* Point 2 */}
         <XStack alignItems="flex-start">
           <SizableText size="$bodyLg" flex={1}>
             2.{' '}
@@ -39,7 +37,6 @@ function AutoRiskControlContent() {
           </SizableText>
         </XStack>
 
-        {/* Point 3 */}
         <XStack alignItems="flex-start">
           <SizableText size="$bodyLg" flex={1}>
             3.{' '}
@@ -50,7 +47,6 @@ function AutoRiskControlContent() {
         </XStack>
       </YStack>
 
-      {/* Disclaimer Accordion */}
       <Accordion type="single" collapsible>
         <Accordion.Item value="disclaimer">
           <Accordion.Trigger
@@ -132,47 +128,50 @@ export const ProtectionSection = ({
   }
   return (
     <>
-      <YStack gap="$6">
+      <YStack>
         <SizableText size="$headingLg">
           {intl.formatMessage({
             id: ETranslations.earn_protection,
           })}
         </SizableText>
-        <XStack gap="$3" alignItems="center" justifyContent="space-between">
-          <XStack gap="$3" alignItems="center" flex={1}>
-            <Icon
-              name="ShieldCheckDoneOutline"
-              size="$6"
-              color="$iconSuccess"
-            />
-            <YStack>
-              <SizableText size="$bodyMdMedium" color="$text">
-                {intl.formatMessage({
-                  id: ETranslations.earn_auto_risk_control,
-                })}
-              </SizableText>
-              <SizableText size="$bodyMd" color="$textSubdued">
-                {intl.formatMessage({
-                  id: ETranslations.earn_auto_risk_control_subtitle,
-                })}
-              </SizableText>
-            </YStack>
-          </XStack>
-          <IconButton
-            icon="ChevronRightOutline"
-            size="small"
-            variant="tertiary"
-            onPress={() =>
+        <XStack mx="$-5" mt="$4">
+          <ListItem
+            gap="$3"
+            flex={1}
+            alignItems="center"
+            justifyContent="space-between"
+            onPress={() => {
               showAutoRiskControlDialog({
                 title: intl.formatMessage({
                   id: ETranslations.earn_auto_risk_control,
                 }),
                 confirmText: intl.formatMessage({
                   id: ETranslations.explore_got_it,
                 }),
-              })
-            }
-          />
+              });
+            }}
+          >
+            <XStack gap="$3" alignItems="center" flex={1}>
+              <Icon
+                name="ShieldCheckDoneOutline"
+                size="$6"
+                color="$iconSuccess"
+              />
+              <YStack>
+                <SizableText size="$bodyMdMedium" color="$text">
+                  {intl.formatMessage({
+                    id: ETranslations.earn_auto_risk_control,
+                  })}
+                </SizableText>
+                <SizableText size="$bodyMd" color="$textSubdued">
+                  {intl.formatMessage({
+                    id: ETranslations.earn_auto_risk_control_subtitle,
+                  })}
+                </SizableText>
+              </YStack>
+            </XStack>
+            <Icon name="ChevronRightOutline" size="$6" color="$iconSubdued" />
+          </ListItem>
         </XStack>
       </YStack>
       <Divider />

packages/shared/src/locale/enum/translations.ts

@@ -1307,6 +1307,7 @@
   history_notification_receiver_label = 'history.notification_receiver_label',
   history_switch_account_dialog_title = 'history.switch_account_dialog_title',
   hw_banner_description = 'hw_banner_description',
+  insufficient_fee_append_desc = 'insufficient_fee_append_desc',
   interact_with_contract = 'interact_with_contract',
   lighting_invoice = 'lighting_invoice',
   list_section_unavailable_networks_text = 'list_section_unavailable_networks_text',

packages/shared/src/locale/json/ar.json

@@ -395,7 +395,7 @@
   "earn.earn_up_to_number_per_year": "Earn up to {number} per year",
   "earn.earn_up_to_number_per_year_desc": "The APR is updated hourly and adjusted according to changes in TVL.",
   "earn.earnings_start": "Earnings start",
-  "earn.est_annual_rewards": "Est annual rewards",
+  "earn.est_annual_rewards": "Est. annual rewards",
   "earn.est_receive": "Est. receive",
   "earn.feature_1_desc": "Stake your assets and earn passive returns effortlessly",
   "earn.feature_1_title": "Activate idle assets",
@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "Data may take time to sync after the successful transaction.",
   "earn.portfolio": "Portfolio",
   "earn.portfolio_details": "Portfolio details",
-  "earn.protection": "Protection",
+  "earn.protection": "حماية",
   "earn.protocol_rewards": "مكافآت البروتوكول",
   "earn.provider_asset_staking": "{provider} {asset} staking",
   "earn.provider_asset_withdrawal": "{provider} {asset} withdrawal",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Notification received by",
   "history.switch_account_dialog_title": "Switch primary account to {account}?",
   "hw_banner_description": "Secure your crypto with the most powerful hardware wallet",
+  "insufficient_fee_append_desc": "based on max est. fee: {amount} {symbol}",
   "interact_with_contract": "Interact with (To)",
   "lighting_invoice": "Lightning Invoice",
   "list_section_unavailable_networks_text": "Unavailable networks for selected account",

packages/shared/src/locale/json/bn.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "সফল লেনদেনের পরে ডেটা সিঙ্ক হতে সময় লাগতে পারে।",
   "earn.portfolio": "পরিচয়পত্র",
   "earn.portfolio_details": "পরিকল্পনা বিবরণী",
-  "earn.protection": "Protection",
+  "earn.protection": "সুরক্ষা",
   "earn.protocol_rewards": "প্রোটোকল পুরস্কার",
   "earn.provider_asset_staking": "{provider} {asset} স্টেকিং",
   "earn.provider_asset_withdrawal": "{provider} {asset} উত্তোলন",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "বিজ্ঞপ্তি প্রাপ্ত হয়েছে",
   "history.switch_account_dialog_title": "প্রাথমিক অ্যাকাউন্ট {account} এ পরিবর্তন করবেন?",
   "hw_banner_description": "আপনার ক্রিপ্টো সংরক্ষণ করুন সবচেয়ে শক্তিশালী হার্ডওয়্যার ওয়ালেটের সাহায্যে",
+  "insufficient_fee_append_desc": "সর্বাধিক আনুমানিক ফি ভিত্তিক: {amount} {symbol}",
   "interact_with_contract": "(এর সাথে) যোগাযোগ করুন (প্রতি)",
   "lighting_invoice": "লাইটনিং ইনভয়েস",
   "list_section_unavailable_networks_text": "নির্বাচিত অ্যাকাউন্টের জন্য অনুপলব্ধ নেটওয়ার্কগুলি",

packages/shared/src/locale/json/de.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "Nach der erfolgreichen Transaktion kann die Synchronisierung der Daten einige Zeit in Anspruch nehmen.",
   "earn.portfolio": "Portfolio",
   "earn.portfolio_details": "Portfolio-Details",
-  "earn.protection": "Protection",
+  "earn.protection": "Schutz",
   "earn.protocol_rewards": "Protokollbelohnungen",
   "earn.provider_asset_staking": "{provider} {asset} Staking",
   "earn.provider_asset_withdrawal": "{provider} {asset} Abhebung",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Benachrichtigung erhalten von",
   "history.switch_account_dialog_title": "Primärkonto auf {account} umstellen?",
   "hw_banner_description": "Sichern Sie Ihre Krypto mit der leistungsstärksten Hardware-Wallet",
+  "insufficient_fee_append_desc": "basierend auf der maximal geschätzten Gebühr: {amount} {symbol}",
   "interact_with_contract": "Interagieren mit (An)",
   "lighting_invoice": "Blitzrechnung",
   "list_section_unavailable_networks_text": "Nicht verfügbare Netzwerke für das ausgewählte Konto",

packages/shared/src/locale/json/en.json

@@ -395,7 +395,7 @@
   "earn.earn_up_to_number_per_year": "Earn up to {number} per year",
   "earn.earn_up_to_number_per_year_desc": "The APR is updated hourly and adjusted according to changes in TVL.",
   "earn.earnings_start": "Earnings start",
-  "earn.est_annual_rewards": "Est annual rewards",
+  "earn.est_annual_rewards": "Est. annual rewards",
   "earn.est_receive": "Est. receive",
   "earn.feature_1_desc": "Stake your assets and earn passive returns effortlessly",
   "earn.feature_1_title": "Activate idle assets",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Notification received by",
   "history.switch_account_dialog_title": "Switch primary account to {account}?",
   "hw_banner_description": "Secure your crypto with the most powerful hardware wallet",
+  "insufficient_fee_append_desc": "based on max est. fee: {amount} {symbol}",
   "interact_with_contract": "Interact with (To)",
   "lighting_invoice": "Lightning Invoice",
   "list_section_unavailable_networks_text": "Unavailable networks for selected account",

packages/shared/src/locale/json/en_US.json

@@ -395,7 +395,7 @@
   "earn.earn_up_to_number_per_year": "Earn up to {number} per year",
   "earn.earn_up_to_number_per_year_desc": "The APR is updated hourly and adjusted according to changes in TVL.",
   "earn.earnings_start": "Earnings start",
-  "earn.est_annual_rewards": "Est annual rewards",
+  "earn.est_annual_rewards": "Est. annual rewards",
   "earn.est_receive": "Est. receive",
   "earn.feature_1_desc": "Stake your assets and earn passive returns effortlessly",
   "earn.feature_1_title": "Activate idle assets",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Notification received by",
   "history.switch_account_dialog_title": "Switch primary account to {account}?",
   "hw_banner_description": "Secure your crypto with the most powerful hardware wallet",
+  "insufficient_fee_append_desc": "based on max est. fee: {amount} {symbol}",
   "interact_with_contract": "Interact with (To)",
   "lighting_invoice": "Lightning Invoice",
   "list_section_unavailable_networks_text": "Unavailable networks for selected account",

packages/shared/src/locale/json/es.json

@@ -395,7 +395,7 @@
   "earn.earn_up_to_number_per_year": "Gana hasta {number} al año",
   "earn.earn_up_to_number_per_year_desc": "La APR se actualiza cada hora y se ajusta de acuerdo a los cambios en el TVL.",
   "earn.earnings_start": "Comienzan las ganancias",
-  "earn.est_annual_rewards": "Est recompensas anuales",
+  "earn.est_annual_rewards": "Est. recompensas anuales",
   "earn.est_receive": "Est. recibir",
   "earn.feature_1_desc": "Aposte sus activos y obtenga retornos pasivos sin esfuerzo",
   "earn.feature_1_title": "Activar activos inactivos",
@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "Los datos pueden tardar un tiempo en sincronizarse después de una transacción exitosa.",
   "earn.portfolio": "Portafolio",
   "earn.portfolio_details": "Detalles del portafolio",
-  "earn.protection": "Protection",
+  "earn.protection": "Protección",
   "earn.protocol_rewards": "Recompensas del protocolo",
   "earn.provider_asset_staking": "Staking de {provider} {asset}",
   "earn.provider_asset_withdrawal": "Retiro de {asset} de {provider}",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Notificación recibida por",
   "history.switch_account_dialog_title": "¿Cambiar la cuenta principal a {account}?",
   "hw_banner_description": "Asegura tu cripto con la cartera de hardware más potente",
+  "insufficient_fee_append_desc": "basado en la tarifa máxima estimada: {amount} {symbol}",
   "interact_with_contract": "Interactuar con (Para)",
   "lighting_invoice": "Factura de Rayo",
   "list_section_unavailable_networks_text": "Redes no disponibles para la cuenta seleccionada",

packages/shared/src/locale/json/fr_FR.json

@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Notification reçue par",
   "history.switch_account_dialog_title": "Passer au compte principal {account} ?",
   "hw_banner_description": "Sécurisez votre crypto avec le portefeuille matériel le plus puissant",
+  "insufficient_fee_append_desc": "basé sur les frais max estimés : {amount} {symbol}",
   "interact_with_contract": "Interagir avec (À)",
   "lighting_invoice": "Facture Éclair",
   "list_section_unavailable_networks_text": "Réseaux indisponibles pour le compte sélectionné",

packages/shared/src/locale/json/hi_IN.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "सफल लेनदेन के बाद डेटा को सिंक होने में समय लग सकता है।",
   "earn.portfolio": "पोर्टफोलियो",
   "earn.portfolio_details": "पोर्टफोलियो विवरण",
-  "earn.protection": "Protection",
+  "earn.protection": "सुरक्षा",
   "earn.protocol_rewards": "प्रोटोकॉल पुरस्कार",
   "earn.provider_asset_staking": "{provider} {asset} स्टेकिंग",
   "earn.provider_asset_withdrawal": "{provider} {asset} निकासी",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "द्वारा अधिसूचना प्राप्त हुई",
   "history.switch_account_dialog_title": "प्राथमिक खाता {account} में बदलें?",
   "hw_banner_description": "अपने क्रिप्टो को सबसे शक्तिशाली हार्डवेयर वॉलेट के साथ सुरक्षित करें",
+  "insufficient_fee_append_desc": "अधिकतम अनुमानित शुल्क के आधार पर: {amount} {symbol}",
   "interact_with_contract": "(से) संवाद करें",
   "lighting_invoice": "लाइटनिंग इनवॉइस",
   "list_section_unavailable_networks_text": "चयनित खाता के लिए अनुपलब्ध नेटवर्क",

packages/shared/src/locale/json/id.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "Data mungkin memerlukan waktu untuk disinkronkan setelah transaksi berhasil.",
   "earn.portfolio": "Portofolio",
   "earn.portfolio_details": "Detail Portofolio",
-  "earn.protection": "Protection",
+  "earn.protection": "Perlindungan",
   "earn.protocol_rewards": "Hadiah protokol",
   "earn.provider_asset_staking": "{provider} {asset} mempertaruhkan",
   "earn.provider_asset_withdrawal": "Penarikan {asset} dari {provider}",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Pemberitahuan diterima oleh",
   "history.switch_account_dialog_title": "Ubah akun utama ke {account}?",
   "hw_banner_description": "Amanakan kripto Anda dengan dompet perangkat keras yang paling kuat",
+  "insufficient_fee_append_desc": "berdasarkan perkiraan biaya maksimum: {amount} {symbol}",
   "interact_with_contract": "Berinteraksi dengan (Kepada)",
   "lighting_invoice": "Invoice Kilat",
   "list_section_unavailable_networks_text": "Jaringan tidak tersedia untuk akun yang dipilih",

packages/shared/src/locale/json/it_IT.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "Dopo la transazione riuscita, la sincronizzazione dei dati potrebbe richiedere del tempo.",
   "earn.portfolio": "Portafoglio",
   "earn.portfolio_details": "Dettagli del portfolio",
-  "earn.protection": "Protection",
+  "earn.protection": "Protezione",
   "earn.protocol_rewards": "Ricompense del protocollo",
   "earn.provider_asset_staking": "{provider} {asset} picchettamento",
   "earn.provider_asset_withdrawal": "Prelievo di {asset} da {provider}",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Notifica ricevuta da",
   "history.switch_account_dialog_title": "Passare all'account principale {account}?",
   "hw_banner_description": "Proteggi le tue criptovalute con il portafoglio hardware più potente",
+  "insufficient_fee_append_desc": "basato sulla tariffa massima stimata: {amount} {symbol}",
   "interact_with_contract": "Interagisci con (A)",
   "lighting_invoice": "Fattura Lightning",
   "list_section_unavailable_networks_text": "Reti non disponibili per l'account selezionato",

packages/shared/src/locale/json/ja_JP.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "トランザクションが成功した後、データの同期に時間がかかる場合があります。",
   "earn.portfolio": "ポートフォリオ",
   "earn.portfolio_details": "ポートフォリオの詳細",
-  "earn.protection": "Protection",
+  "earn.protection": "保護",
   "earn.protocol_rewards": "プロトコル報酬",
   "earn.provider_asset_staking": "{provider} {asset}ステーキング",
   "earn.provider_asset_withdrawal": "{provider} {asset} の引き出し",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "通知を受け取った人",
   "history.switch_account_dialog_title": "主なアカウントを{account}に切り替えますか？",
   "hw_banner_description": "最強力なハードウェアウォレットであなたの暗号を保護します",
+  "insufficient_fee_append_desc": "最大推定手数料に基づく: {amount} {symbol}",
   "interact_with_contract": "(に)交流する",
   "lighting_invoice": "ライトニングインボイス",
   "list_section_unavailable_networks_text": "選択したアカウントの利用不可能なネットワーク",

packages/shared/src/locale/json/ko_KR.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "거래가 성공적으로 완료된 후 데이터가 동기화되는 데 시간이 걸릴 수 있습니다.",
   "earn.portfolio": "포트폴리오",
   "earn.portfolio_details": "포트폴리오 세부사항",
-  "earn.protection": "Protection",
+  "earn.protection": "보호",
   "earn.protocol_rewards": "프로토콜 보상",
   "earn.provider_asset_staking": "{provider} {asset} 스테이킹",
   "earn.provider_asset_withdrawal": "{provider} {asset} 출금",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "알림 수신자",
   "history.switch_account_dialog_title": "주 계정을 {account}(으)로 전환하시겠습니까?",
   "hw_banner_description": "가장 강력한 하드웨어 지갑으로 귀하의 암호화폐를 보호하세요",
+  "insufficient_fee_append_desc": "최대 예상 수수료 기준: {amount} {symbol}",
   "interact_with_contract": "(~와) 상호 작용하기",
   "lighting_invoice": "라이트닝 인보이스",
   "list_section_unavailable_networks_text": "선택한 계정에 사용할 수 없는 네트워크",

packages/shared/src/locale/json/pt.json

@@ -456,7 +456,7 @@
   "earn.pending_transactions_data_out_of_sync": "Pode levar algum tempo para os dados serem sincronizados após a transação bem-sucedida.",
   "earn.portfolio": "Portfólio",
   "earn.portfolio_details": "Detalhes do portfólio",
-  "earn.protection": "Protection",
+  "earn.protection": "Proteção",
   "earn.protocol_rewards": "Recompensas do protocolo",
   "earn.provider_asset_staking": "{provider} {asset} apostando",
   "earn.provider_asset_withdrawal": "Saque de {provider} {asset}",
@@ -1302,6 +1302,7 @@
   "history.notification_receiver_label": "Notificação recebida por",
   "history.switch_account_dialog_title": "Alterar a conta principal para {account}?",
   "hw_banner_description": "Proteja sua criptomoeda com a carteira de hardware mais poderosa",
+  "insufficient_fee_append_desc": "com base na taxa máxima estimada: {amount} {symbol}",
   "interact_with_contract": "Interagir com (Para)",
   "lighting_invoice": "Fatura Relâmpago",
   "list_section_unavailable_networks_text": "Redes indisponíveis para a conta selecionada",