global ui & i18n (#4859)

* ui & i18n * ui & i18n
OneKeyHQ · Jun 21, 2024 · 69ea8fa · 69ea8fa
1 parent b875bff
commit 69ea8fa
Show file tree

Hide file tree

Showing 30 changed files with 147 additions and 60 deletions.
diff --git a/packages/components/src/layouts/Page/PageFooterActions.tsx b/packages/components/src/layouts/Page/PageFooterActions.tsx
@@ -75,7 +75,8 @@ export function FooterCancelButton({
     <Button
       $md={
         {
-          flex: 1,
+          flexGrow: 1,
+          flexBasis: 0,
           size: 'large',
         } as IButtonProps
       }
@@ -138,7 +139,8 @@ export function FooterConfirmButton({
     <Button
       $md={
         {
-          flex: 1,
+          flexGrow: 1,
+          flexBasis: 0,
           size: 'large',
         } as IButtonProps
       }

diff --git a/packages/kit-bg/src/connectors/chains/walletconnect/ExternalControllerWalletConnect.ts b/packages/kit-bg/src/connectors/chains/walletconnect/ExternalControllerWalletConnect.ts
@@ -4,6 +4,8 @@ import {
   NotImplemented,
   OneKeyInternalError,
 } from '@onekeyhq/shared/src/errors';
+import { ETranslations } from '@onekeyhq/shared/src/locale';
+import { appLocale } from '@onekeyhq/shared/src/locale/appLocale';
 import type {
   IExternalConnectResultWalletConnect,
   IExternalConnectWalletResult,
@@ -113,10 +115,18 @@ export class ExternalControllerWalletConnect extends ExternalControllerBase {
     const sessions = await walletConnectStorage.dappSideStorage.getSessions();
     if (!sessions.find((item) => item.topic === topic)) {
       // (cleanupInactiveSessions)
-      throw new Error('WalletConnect session disconnected');
+      throw new Error(
+        appLocale.intl.formatMessage({
+          id: ETranslations.feedback_walletconnect_session_discconected,
+        }),
+      );
     }
     if (!connectedAddresses[networkId]) {
-      throw new Error(`External Wallet not approve this network: ${networkId}`);
+      throw new Error(
+        `${appLocale.intl.formatMessage({
+          id: ETranslations.feedback_external_wallet_does_not_approve_network,
+        })}: ${networkId}`,
+      );
     }
     // TODO checksum compare
     if (
@@ -125,7 +135,9 @@ export class ExternalControllerWalletConnect extends ExternalControllerBase {
         .includes(address.toLowerCase())
     ) {
       throw new Error(
-        `External Wallet not approve this address: ${networkId} ${address}`,
+        `${appLocale.intl.formatMessage({
+          id: ETranslations.feedback_external_wallet_doesn_not_approve_address,
+        })}: ${networkId} ${address}`,
       );
     }
   }

diff --git a/packages/kit/src/components/TokenListView/TokenListFooter.tsx b/packages/kit/src/components/TokenListView/TokenListFooter.tsx
@@ -135,7 +135,9 @@ function TokenListFooter(props: IProps) {
           </Stack>
           <ListItem.Text
             flex={1}
-            primary={`${smallBalanceTokens.length} Low-value Assets`}
+            primary={`${smallBalanceTokens.length} ${intl.formatMessage({
+              id: ETranslations.low_value_assets,
+            })}`}
             {...(tableLayout && {
               primaryTextProps: { size: '$bodyMdMedium' },
             })}

diff --git a/packages/kit/src/components/TxAction/TxActionTransfer.tsx b/packages/kit/src/components/TxAction/TxActionTransfer.tsx
@@ -511,9 +511,11 @@ function TxActionTransferDetailView(props: ITxActionProps) {
         <InfoItem
           label={intl.formatMessage({ id: ETranslations.network__network })}
           renderContent={
-            <XStack alignItems="center" space="$1">
+            <XStack alignItems="center" space="$2">
               <Image w="$5" h="$5" source={{ uri: network?.logoURI }} />
-              <SizableText size="$bodyMdMedium">{network?.name}</SizableText>
+              <SizableText size="$bodyMd" color="$textSubdued">
+                {network?.name}
+              </SizableText>
             </XStack>
           }
         />,

diff --git a/packages/kit/src/views/AssetDetails/pages/HistoryDetails/HistoryDetails.tsx b/packages/kit/src/views/AssetDetails/pages/HistoryDetails/HistoryDetails.tsx
@@ -663,7 +663,9 @@ function HistoryDetails() {
             />
             {new BigNumber(txInfo.blockHeight ?? 0).isGreaterThan(0) ? (
               <InfoItem
-                label="Block Height"
+                label={intl.formatMessage({
+                  id: ETranslations.global_block_height,
+                })}
                 renderContent={String(txInfo.blockHeight)}
                 compact
               />

diff --git a/packages/kit/src/views/Onboarding/pages/V4Migration/V4MigrationDone.tsx b/packages/kit/src/views/Onboarding/pages/V4Migration/V4MigrationDone.tsx
@@ -34,6 +34,7 @@ export function V4MigrationDone({
 
   return (
     <V4MigrationModalPage
+      scrollEnabled={false}
       exitPreventMode={
         preventClose
           ? EModalExitPreventMode.always

diff --git a/packages/kit/src/views/Onboarding/pages/V4Migration/V4MigrationProcess.tsx b/packages/kit/src/views/Onboarding/pages/V4Migration/V4MigrationProcess.tsx
@@ -99,6 +99,7 @@ export function V4MigrationProcess({
 
   return (
     <V4MigrationModalPage
+      scrollEnabled={false}
       exitPreventMode={
         preventClose
           ? EModalExitPreventMode.always

diff --git a/packages/kit/src/views/Onboarding/pages/V4Migration/components/V4MigrationModalPage.tsx b/packages/kit/src/views/Onboarding/pages/V4Migration/components/V4MigrationModalPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react';
 
 import { useIsFocused } from '@react-navigation/native';
 
+import type { IPageProps } from '@onekeyhq/components';
 import { Page } from '@onekeyhq/components';
 import { v4migrationAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
 
@@ -15,12 +16,13 @@ export function V4MigrationModalPage({
   onMounted,
   exitPreventMode = EModalExitPreventMode.confirm,
   isAutoStartOnMount,
+  ...rest
 }: {
   children: React.ReactNode;
   onMounted?: () => void;
   exitPreventMode?: EModalExitPreventMode;
   isAutoStartOnMount?: boolean;
-}) {
+} & IPageProps) {
   const timer = useRef<any>(null);
   const isFocused = useIsFocused();
 
@@ -49,6 +51,7 @@ export function V4MigrationModalPage({
       onClose={() => {
         console.log('V4MigrationModalPage   onClose');
       }}
+      {...rest}
     >
       {children}
     </Page>

diff --git a/packages/kit/src/views/Send/components/SendFee/FeeEditor.tsx b/packages/kit/src/views/Send/components/SendFee/FeeEditor.tsx
@@ -3,12 +3,12 @@ import { useCallback, useMemo, useState } from 'react';
 import BigNumber from 'bignumber.js';
 import { isNaN, isNil, isNumber } from 'lodash';
 import { useIntl } from 'react-intl';
+import { StyleSheet } from 'react-native';
 
-import type { IButtonProps } from '@onekeyhq/components';
+import type { IButtonProps, IXStackProps } from '@onekeyhq/components';
 import {
   Alert,
   Button,
-  Dialog,
   Divider,
   Form,
   Input,
@@ -21,7 +21,6 @@ import {
   YStack,
   useDialogInstance,
   useForm,
-  useMedia,
 } from '@onekeyhq/components';
 import type { IUnsignedTxPro } from '@onekeyhq/core/src/types';
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
@@ -96,7 +95,10 @@ const getPresetIndex = (
   return 0;
 };
 
-function FeeInfoItem({ feeInfo }: { feeInfo: IFeeInfoItem }) {
+function FeeInfoItem({
+  feeInfo,
+  ...rest
+}: { feeInfo: IFeeInfoItem } & IXStackProps) {
   const [settings] = useSettingsPersistAtom();
   const {
     label,
@@ -108,7 +110,7 @@ function FeeInfoItem({ feeInfo }: { feeInfo: IFeeInfoItem }) {
   } = feeInfo;
 
   return (
-    <XStack justifyContent="space-between" alignItems="center">
+    <XStack justifyContent="space-between" alignItems="center" {...rest}>
       <SizableText size="$bodyMd" color="$textSubdued">
         {label}
       </SizableText>
@@ -275,7 +277,7 @@ function FeeEditor(props: IProps) {
         max,
         priorityFee: priorityFee.toFixed(),
         description: `${intl.formatMessage({
-          id: ETranslations.provider_recommend,
+          id: ETranslations.global_recommend,
         })}: ${min} - ${max} ${feeSymbol}`,
       };
     }
@@ -427,7 +429,6 @@ function FeeEditor(props: IProps) {
 
     return (
       <>
-        {feeAlert ? <Alert type="warning" title={feeAlert} mb="$5" /> : null}
         <SizableText mb={6} size="$bodyMdMedium">
           {feeTitle}
         </SizableText>
@@ -478,7 +479,6 @@ function FeeEditor(props: IProps) {
   }, [
     currentFeeIndex,
     customFee.feeUTXO,
-    feeAlert,
     feeSelectorItems,
     feeSymbol,
     intl,
@@ -531,13 +531,15 @@ function FeeEditor(props: IProps) {
     if (customFee.gasEIP1559) {
       return (
         <Form form={form}>
-          <YStack space="$5">
+          <YStack space="$5" pt="$5">
             <Form.Field
               label={intl.formatMessage({
                 id: ETranslations.transaction_max_base_fee,
               })}
               name="maxBaseFee"
-              description={`Current: ${customFee.gasEIP1559.baseFeePerGas} ${feeSymbol}`}
+              description={`${intl.formatMessage({
+                id: ETranslations.form_max_base_fee_description,
+              })}: ${customFee.gasEIP1559.baseFeePerGas} ${feeSymbol}`}
               rules={{
                 required: true,
                 min: 0,
@@ -591,7 +593,7 @@ function FeeEditor(props: IProps) {
                 id: ETranslations.content__gas_limit,
               })}
               name="gasLimit"
-              description={recommendGasLimit.description}
+              // description={recommendGasLimit.description}
               rules={{
                 required: true,
                 validate: handleValidateGasLimit,
@@ -795,21 +797,21 @@ function FeeEditor(props: IProps) {
         vaultSettings?.withL1BaseFee &&
         new BigNumber(fee.common.baseFee ?? 0).gt(0)
           ? {
-              label: 'L1 Base Fee',
+              label: intl.formatMessage({ id: ETranslations.fee_l1_base_fee }),
               customValue: fee.common.baseFee,
               customSymbol: feeSymbol,
             }
           : null,
         {
-          label: 'Expected Fee',
+          label: intl.formatMessage({ id: ETranslations.fee_expected_fee }),
           nativeValue: expectedFeeInNative,
           nativeSymbol,
           fiatValue: new BigNumber(expectedFeeInNative)
             .times(nativeTokenPrice || 0)
             .toFixed(),
         },
         {
-          label: 'Max Fee',
+          label: intl.formatMessage({ id: ETranslations.fee_max_fee }),
           nativeValue: maxFeeInNative,
           nativeSymbol,
           fiatValue: new BigNumber(maxFeeInNative)
@@ -837,13 +839,13 @@ function FeeEditor(props: IProps) {
         vaultSettings?.withL1BaseFee &&
         new BigNumber(fee.common.baseFee ?? 0).gt(0)
           ? {
-              label: 'L1 Base Fee',
+              label: intl.formatMessage({ id: ETranslations.fee_l1_base_fee }),
               customValue: fee.common.baseFee,
               customSymbol: feeSymbol,
             }
           : null,
         {
-          label: 'Max Fee',
+          label: intl.formatMessage({ id: ETranslations.fee_max_fee }),
           nativeValue: maxFeeInNative,
           nativeSymbol,
           fiatValue: new BigNumber(maxFeeInNative)
@@ -920,7 +922,7 @@ function FeeEditor(props: IProps) {
 
       feeInfoItems = [
         {
-          label: 'Fee',
+          label: intl.formatMessage({ id: ETranslations.fee_fee }),
           nativeValue: maxFeeInNative,
           nativeSymbol,
           fiatValue: new BigNumber(maxFeeInNative)
@@ -932,13 +934,19 @@ function FeeEditor(props: IProps) {
 
     return (
       <>
-        <Stack space="$2" py="$4">
-          {feeInfoItems.map((feeInfo, index) => (
-            <FeeInfoItem feeInfo={feeInfo} key={index} />
-          ))}
-        </Stack>
+        {feeInfoItems.map((feeInfo, index) => (
+          <FeeInfoItem
+            feeInfo={feeInfo}
+            key={index}
+            {...(index !== 0 && {
+              pt: '$2',
+            })}
+          />
+        ))}
+        {feeAlert ? <Alert type="warning" mt="$4" title={feeAlert} /> : null}
         {vaultSettings?.editFeeEnabled ? (
           <Button
+            mt="$4"
             disabled={isSaveFeeDisabled}
             variant="primary"
             size="large"
@@ -959,6 +967,7 @@ function FeeEditor(props: IProps) {
     currentFeeType,
     customFee,
     estimateFeeParams?.estimateFeeParamsSol,
+    feeAlert,
     feeSelectorItems,
     feeSymbol,
     handleApplyFeeInfo,
@@ -1004,11 +1013,17 @@ function FeeEditor(props: IProps) {
     }
 
     return (
-      <YStack space="$4">
+      <>
         {feeInfoItems.map((feeInfo, index) => (
-          <FeeInfoItem feeInfo={feeInfo} key={index} />
+          <FeeInfoItem
+            feeInfo={feeInfo}
+            key={index}
+            {...(index !== 0 && {
+              pt: '$2',
+            })}
+          />
         ))}
-      </YStack>
+      </>
     );
   }, [
     currentFeeIndex,
@@ -1020,15 +1035,18 @@ function FeeEditor(props: IProps) {
 
   return (
     <>
-      <ScrollView mx="$-5">
-        <Stack space="$5" px="$5" pb="$5">
-          {renderFeeTypeSelector()}
-          {renderFeeDetails()}
-          {renderFeeEditorForm()}
-        </Stack>
+      <ScrollView mx="$-5" px="$5" pb="$5" maxHeight="$72">
+        {renderFeeTypeSelector()}
+        {renderFeeEditorForm()}
       </ScrollView>
-      <Divider />
-      {renderFeeOverview()}
+      <Stack
+        pt="$4"
+        borderTopWidth={StyleSheet}
+        borderTopColor="$borderSubdued"
+      >
+        {renderFeeDetails()}
+        {renderFeeOverview()}
+      </Stack>
     </>
   );
 }