fix: fix ui issues & support onPaste event on Web (#5626)

OneKeyHQ · Aug 23, 2024 · 0cd4ae8 · 0cd4ae8
1 parent cc1caa7
commit 0cd4ae8
Show file tree

Hide file tree

Showing 24 changed files with 61 additions and 42 deletions.
diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
@@ -1130,7 +1130,7 @@ PODS:
     - React-Core
   - react-native-slider (4.4.3):
     - React-Core
-  - react-native-tab-page-view (1.0.11):
+  - react-native-tab-page-view (1.0.14):
     - JXCategoryView (~> 1.6.1)
     - JXPagingView/Pager (~> 2.1.2)
     - React
@@ -1892,7 +1892,7 @@ SPEC CHECKSUMS:
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
   react-native-safe-area-context: 7aa8e6d9d0f3100a820efb1a98af68aa747f9284
   react-native-slider: 1cdd6ba29675df21f30544253bf7351d3c2d68c4
-  react-native-tab-page-view: 1110d6898e66f6135035286de4bfa87a79e96a7b
+  react-native-tab-page-view: e624dca7419a6a3f1bd38ffd49ffbfb036fb0418
   react-native-tcp-socket: e724380c910c2e704816ec817ed28f1342246ff7
   react-native-video: dc3118548cf8864a83f57df4345cf6c692402e8f
   react-native-view-shot: 4475fde003fe8a210053d1f98fb9e06c1d834e1c

diff --git a/packages/components/src/forms/Input/index.tsx b/packages/components/src/forms/Input/index.tsx
@@ -47,6 +47,12 @@ export type IInputProps = {
   leftAddOnProps?: IInputAddOnProps;
   addOns?: IInputAddOnProps[];
   containerProps?: IGroupProps;
+  // not support on Native
+  // https://github.com/facebook/react-native/pull/45425
+  // About to add to React-Native.
+  //
+  // https://github.com/Expensify/App/pull/47203/files#diff-9bdb475c2552cf81e4b3cdf2496ef5f779fd501613ac89c1252538b008722abc
+  onPaste?: () => void;
   onChangeText?: ((text: string) => string | void) | undefined;
 } & Omit<ITMInputProps, 'size' | 'onChangeText'> & {
     /** Web only */
@@ -128,6 +134,7 @@ function BaseInput(inputProps: IInputProps, ref: ForwardedRef<IInputRef>) {
     onFocus,
     value,
     displayAsMaskWhenEmptyValue,
+    onPaste,
     ...props
   } = useProps(inputProps);
   const { paddingLeftWithIcon, height, iconLeftPosition } = SIZE_MAPPINGS[size];
@@ -143,6 +150,16 @@ function BaseInput(inputProps: IInputProps, ref: ForwardedRef<IInputRef>) {
   const reloadAutoFocus = useAutoFocus(inputRef, autoFocus);
   const readOnlyStyle = useReadOnlyStyle(readonly);
 
+  useEffect(() => {
+    if (!platformEnv.isNative && inputRef.current && onPaste) {
+      const inputElement = inputRef.current as unknown as HTMLInputElement;
+      inputElement.addEventListener('paste', onPaste);
+      return () => {
+        inputElement.removeEventListener('paste', onPaste);
+      };
+    }
+  }, [onPaste]);
+
   useImperativeHandle(ref, () => ({
     focus: () => {
       inputRef.current?.focus();

diff --git a/packages/components/src/hooks/useClipboard.ts b/packages/components/src/hooks/useClipboard.ts
@@ -30,7 +30,12 @@ export function useClipboard() {
 
   const clearText = useCallback(() => {
     void setStringAsync('');
-  }, []);
+    Toast.success({
+      title: intl.formatMessage({
+        id: ETranslations.feedback_pasted_and_cleared,
+      }),
+    });
+  }, [intl]);
 
   return useMemo(
     () => ({ copyText, clearText, getClipboard }),

diff --git a/packages/kit/src/components/Spotlight/index.tsx b/packages/kit/src/components/Spotlight/index.tsx
@@ -17,7 +17,7 @@ import {
 
 import { useIntl } from 'react-intl';
 
-import type { IElement } from '@onekeyhq/components';
+import type { IElement, IStackStyle } from '@onekeyhq/components';
 import {
   Button,
   EPortalContainerConstantName,
@@ -40,7 +40,8 @@ import { useRouteIsFocused } from '../../hooks/useRouteIsFocused';
 import type { IDeferredPromise } from '../../hooks/useDeferredPromise';
 import type { View as NativeView } from 'react-native';
 
-export type ISpotlight = PropsWithChildren<{
+export type ISpotlightProps = PropsWithChildren<{
+  containerProps?: IStackStyle;
   content: ReactElement;
   childrenPadding?: number;
   floatingOffset?: number;
@@ -56,7 +57,7 @@ interface IFloatingPosition {
   height: number;
 }
 
-type ISpotlightContentEvent = ISpotlight & {
+type ISpotlightContentEvent = ISpotlightProps & {
   triggerRef: RefObject<NativeView>;
   floatingOffset: number;
   childrenPadding: number;
@@ -206,14 +207,15 @@ function SpotlightContent({
 }
 
 export function SpotlightView({
+  containerProps,
   children,
   replaceChildren,
   content,
   childrenPadding = 8,
   floatingOffset = 12,
   visible = false,
   onConfirm,
-}: ISpotlight) {
+}: ISpotlightProps) {
   const defer = useDeferredPromise();
   const triggerRef = useRef<IElement | null>(null);
   const triggerPropsRef = useRef<{
@@ -246,17 +248,10 @@ export function SpotlightView({
     visible,
     childrenPadding,
   ]);
-  // const handleLayout = useCallback(() => {
-  //   (triggerRef?.current as any as NativeView)?.measureInWindow(
-  //     (x, y, width, height) => {
-  //       console.log('onlayout---', x, y, width, height);x
-  //     },
-  //   );
-  // }, []);
 
   return (
     <>
-      <View ref={triggerRef} collapsable={false}>
+      <View ref={triggerRef} collapsable={false} {...containerProps}>
         {children}
       </View>
       {visible ? (
@@ -298,12 +293,19 @@ export const useSpotlight = (tourName: ESpotlightTour) => {
 };
 
 export function Spotlight(props: {
+  containerProps?: ISpotlightProps['containerProps'];
   isVisible?: boolean;
   message: string;
   tourName: ESpotlightTour;
   children: ReactNode;
 }) {
-  const { isVisible = true, tourName, message, children } = props;
+  const {
+    isVisible = true,
+    tourName,
+    message,
+    children,
+    containerProps,
+  } = props;
   const { isFirstVisit, tourVisited } = useSpotlight(tourName);
   const visible = isFirstVisit && isVisible;
 
@@ -312,6 +314,7 @@ export function Spotlight(props: {
       visible={visible}
       content={<SizableText size="$bodyMd">{message}</SizableText>}
       onConfirm={tourVisited}
+      containerProps={containerProps}
     >
       {children}
     </SpotlightView>

diff --git a/...ges/kit/src/views/AccountManagerStacks/pages/AccountSelectorStack/WalletDetails/index.tsx b/...ges/kit/src/views/AccountManagerStacks/pages/AccountSelectorStack/WalletDetails/index.tsx
@@ -442,6 +442,7 @@ function WalletDetailsView({ num }: IWalletDetailsProps) {
       return (
         <>
           <Spotlight
+            containerProps={{ flexShrink: 1 }}
             isVisible={shouldShowSpotlight}
             message={intl.formatMessage({
               id: ETranslations.spotlight_enable_account_asset_message,

diff --git a/packages/kit/src/views/Market/components/MarketHomeList.tsx b/packages/kit/src/views/Market/components/MarketHomeList.tsx
@@ -689,7 +689,7 @@ function BasicMarketHomeList({
               : undefined,
             {
               title: intl.formatMessage({
-                id: ETranslations.market_seven_day_percentage,
+                id: ETranslations.market_24h_vol_usd,
               }),
               dataIndex: 'totalVolume',
               columnProps: {

diff --git a/packages/kit/src/views/Onboarding/components/hooks.ts b/packages/kit/src/views/Onboarding/components/hooks.ts
@@ -241,11 +241,6 @@ export const useSuggestion = (
       if (arrays.length === phraseLength) {
         setTimeout(() => {
           clearText();
-          Toast.success({
-            title: intl.formatMessage({
-              id: ETranslations.feedback_pasted_and_cleared,
-            }),
-          });
           form.reset(
             arrays.reduce((prev, next, index) => {
               prev[`phrase${index + 1}`] = next;
@@ -261,7 +256,7 @@ export const useSuggestion = (
       }
       return false;
     },
-    [checkAllWords, clearText, form, intl, phraseLength, resetSuggestions],
+    [checkAllWords, clearText, form, phraseLength, resetSuggestions],
   );
 
   const closePopover = useCallback(() => {

diff --git a/packages/kit/src/views/Onboarding/pages/ImportWallet/ImportAddress.tsx b/packages/kit/src/views/Onboarding/pages/ImportWallet/ImportAddress.tsx
@@ -221,7 +221,6 @@ function ImportAddress() {
           );
         setValidateResult(result);
         console.log('validateGeneralInputOfImporting result', result);
-        clearText();
       } catch (error) {
         setValidateResult({
           isValid: false,
@@ -237,7 +236,6 @@ function ImportAddress() {
     networkIdText,
     form,
     networksResp.publicKeyExportEnabled,
-    clearText,
   ]);
 
   useEffect(() => {
@@ -330,6 +328,7 @@ function ImportAddress() {
                   })}
                   testID="import-address-input"
                   size={media.gtMd ? 'medium' : 'large'}
+                  onPaste={clearText}
                   addOns={[
                     {
                       iconName: 'ScanOutline',

diff --git a/packages/kit/src/views/Onboarding/pages/ImportWallet/ImportSingleChainBase.tsx b/packages/kit/src/views/Onboarding/pages/ImportWallet/ImportSingleChainBase.tsx
@@ -133,7 +133,6 @@ export function ImportSingleChainBase({
         setValidateResult(result);
         console.log('validateGeneralInputOfImporting result', result);
         // TODO: need to replaced by https://github.com/mattermost/react-native-paste-input
-        clearText();
       } catch (error) {
         setValidateResult({
           isValid: false,
@@ -144,7 +143,6 @@ export function ImportSingleChainBase({
     }
   }, [
     accountNameDebounced,
-    clearText,
     form,
     inputTextDebounced,
     networkIdText,
@@ -188,6 +186,7 @@ export function ImportSingleChainBase({
               placeholder={inputPlaceholder}
               size={media.gtMd ? 'medium' : 'large'}
               testID={inputTestID}
+              onPaste={clearText}
               addOns={[
                 {
                   iconName: 'ScanOutline',

diff --git a/packages/shared/src/locale/json/bn.json b/packages/shared/src/locale/json/bn.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "ব্রাউজার",
   "global.bulk_accounts_advance": "অগ্রসর হন",
-  "global.bulk_accounts_loading": "{amount} ঠিকানা যোগ করা হয়েছে",
+  "global.bulk_accounts_loading": "{amount} ঠিকানা(গুলি) যোগ করা হয়েছে",
   "global.bulk_accounts_loading_error": "বাল্ক অ্যাড অ্যাকাউন্টগুলি বাতিল করা হয়েছে",
   "global.bulk_accounts_loading_subtitle": "({amount} অ্যাকাউন্টস)",
   "global.bulk_accounts_page_number": "পৃষ্ঠা নম্বর",

diff --git a/packages/shared/src/locale/json/de.json b/packages/shared/src/locale/json/de.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Browser",
   "global.bulk_accounts_advance": "Voraus",
-  "global.bulk_accounts_loading": "{amount} Adressen hinzugefügt",
+  "global.bulk_accounts_loading": "{amount} Adresse(n) hinzugefügt",
   "global.bulk_accounts_loading_error": "Massenhafte Kontozugänge wurden abgebrochen",
   "global.bulk_accounts_loading_subtitle": "({amount} Konten)",
   "global.bulk_accounts_page_number": "Seitennummer",

diff --git a/packages/shared/src/locale/json/en_US.json b/packages/shared/src/locale/json/en_US.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Browser",
   "global.bulk_accounts_advance": "Advance",
-  "global.bulk_accounts_loading": "{amount} addresses added",
+  "global.bulk_accounts_loading": "{amount} address(es) added",
   "global.bulk_accounts_loading_error": "Bulk add accounts have been canceled",
   "global.bulk_accounts_loading_subtitle": "({amount} accounts)",
   "global.bulk_accounts_page_number": "Page number",

diff --git a/packages/shared/src/locale/json/es.json b/packages/shared/src/locale/json/es.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Navegador",
   "global.bulk_accounts_advance": "Avanzar",
-  "global.bulk_accounts_loading": "{amount} direcciones añadidas",
+  "global.bulk_accounts_loading": "{amount} dirección(es) añadida(s)",
   "global.bulk_accounts_loading_error": "Se han cancelado las cuentas agregadas en masa",
   "global.bulk_accounts_loading_subtitle": "({amount} cuentas)",
   "global.bulk_accounts_page_number": "Número de página",

diff --git a/packages/shared/src/locale/json/fr_FR.json b/packages/shared/src/locale/json/fr_FR.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Navigateur",
   "global.bulk_accounts_advance": "Avance",
-  "global.bulk_accounts_loading": "{amount} adresses ajoutées",
+  "global.bulk_accounts_loading": "{amount} adresse(s) ajoutée(s)",
   "global.bulk_accounts_loading_error": "L'ajout en masse de comptes a été annulé",
   "global.bulk_accounts_loading_subtitle": "({amount} comptes)",
   "global.bulk_accounts_page_number": "Numéro de page",

diff --git a/packages/shared/src/locale/json/hi_IN.json b/packages/shared/src/locale/json/hi_IN.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "ब्राउज़र",
   "global.bulk_accounts_advance": "अग्रिम",
-  "global.bulk_accounts_loading": "{amount} पते जोड़े गए",
+  "global.bulk_accounts_loading": "{amount} पता(एं) जोड़े गए",
   "global.bulk_accounts_loading_error": "बल्क में जोड़े गए खाते रद्द कर दिए गए हैं",
   "global.bulk_accounts_loading_subtitle": "({amount} खाते)",
   "global.bulk_accounts_page_number": "पृष्ठ संख्या",

diff --git a/packages/shared/src/locale/json/it_IT.json b/packages/shared/src/locale/json/it_IT.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Browser",
   "global.bulk_accounts_advance": "Avanzare",
-  "global.bulk_accounts_loading": "Aggiunti {amount} indirizzi",
+  "global.bulk_accounts_loading": "{amount} indirizzo/i aggiunto/i",
   "global.bulk_accounts_loading_error": "L'aggiunta massiva di account è stata annullata",
   "global.bulk_accounts_loading_subtitle": "({amount} conti)",
   "global.bulk_accounts_page_number": "Numero di pagina",

diff --git a/packages/shared/src/locale/json/pt.json b/packages/shared/src/locale/json/pt.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Navegador",
   "global.bulk_accounts_advance": "Avançar",
-  "global.bulk_accounts_loading": "{amount} endereços adicionados",
+  "global.bulk_accounts_loading": "{amount} endereço(s) adicionado(s)",
   "global.bulk_accounts_loading_error": "As adições em massa de contas foram canceladas",
   "global.bulk_accounts_loading_subtitle": "({amount} contas)",
   "global.bulk_accounts_page_number": "Número da página",

diff --git a/packages/shared/src/locale/json/pt_BR.json b/packages/shared/src/locale/json/pt_BR.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Navegador",
   "global.bulk_accounts_advance": "Avançar",
-  "global.bulk_accounts_loading": "{amount} endereços adicionados",
+  "global.bulk_accounts_loading": "{amount} endereço(s) adicionado(s)",
   "global.bulk_accounts_loading_error": "Adições em massa de contas foram canceladas",
   "global.bulk_accounts_loading_subtitle": "({amount} contas)",
   "global.bulk_accounts_page_number": "Número da página",

diff --git a/packages/shared/src/locale/json/ru.json b/packages/shared/src/locale/json/ru.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Браузер",
   "global.bulk_accounts_advance": "Продвигаться",
-  "global.bulk_accounts_loading": "Добавлено {amount} адресов",
+  "global.bulk_accounts_loading": "{amount} адрес(а) добавлен(ы)",
   "global.bulk_accounts_loading_error": "Массовое добавление аккаунтов было отменено",
   "global.bulk_accounts_loading_subtitle": "({amount} аккаунтов)",
   "global.bulk_accounts_page_number": "Номер страницы",

diff --git a/packages/shared/src/locale/json/uk_UA.json b/packages/shared/src/locale/json/uk_UA.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Браузер",
   "global.bulk_accounts_advance": "Аванс",
-  "global.bulk_accounts_loading": "{amount} адреси додано",
+  "global.bulk_accounts_loading": "{amount} адрес(и) додано",
   "global.bulk_accounts_loading_error": "Масове додавання облікових записів було скасовано",
   "global.bulk_accounts_loading_subtitle": "({amount} рахунків)",
   "global.bulk_accounts_page_number": "Номер сторінки",

diff --git a/packages/shared/src/locale/json/vi.json b/packages/shared/src/locale/json/vi.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "Trình duyệt",
   "global.bulk_accounts_advance": "Tiến bộ",
-  "global.bulk_accounts_loading": "Đã thêm {amount} địa chỉ",
+  "global.bulk_accounts_loading": "{amount} địa chỉ đã được thêm",
   "global.bulk_accounts_loading_error": "Đã hủy thêm tài khoản số lượng lớn",
   "global.bulk_accounts_loading_subtitle": "({amount} tài khoản)",
   "global.bulk_accounts_page_number": "Số trang",

diff --git a/packages/shared/src/locale/json/zh_CN.json b/packages/shared/src/locale/json/zh_CN.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "浏览器",
   "global.bulk_accounts_advance": "高级",
-  "global.bulk_accounts_loading": "添加了 {amount} 个地址",
+  "global.bulk_accounts_loading": "{amount} 个地址已添加",
   "global.bulk_accounts_loading_error": "批量添加账户已被取消",
   "global.bulk_accounts_loading_subtitle": "({amount} 个账户)",
   "global.bulk_accounts_page_number": "页码",

diff --git a/packages/shared/src/locale/json/zh_HK.json b/packages/shared/src/locale/json/zh_HK.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "瀏覽器",
   "global.bulk_accounts_advance": "高級",
-  "global.bulk_accounts_loading": "已添加 {amount} 個地址",
+  "global.bulk_accounts_loading": "{amount} 個地址已添加",
   "global.bulk_accounts_loading_error": "批量新增帳戶已被取消",
   "global.bulk_accounts_loading_subtitle": "({amount} 個帳戶)",
   "global.bulk_accounts_page_number": "頁碼",

diff --git a/packages/shared/src/locale/json/zh_TW.json b/packages/shared/src/locale/json/zh_TW.json
@@ -586,7 +586,7 @@
   "global.bootloader": "Bootloader",
   "global.browser": "瀏覽器",
   "global.bulk_accounts_advance": "進階",
-  "global.bulk_accounts_loading": "已添加 {amount} 個地址",
+  "global.bulk_accounts_loading": "{amount} 個地址已添加",
   "global.bulk_accounts_loading_error": "批量新增帳戶已被取消",
   "global.bulk_accounts_loading_subtitle": "({amount} 個帳戶)",
   "global.bulk_accounts_page_number": "頁碼",