fix:UI issues on web (OneKeyHQ#393)

tutuna · Mar 22, 2022 · bba855b · bba855b
1 parent fc060b4
commit bba855b
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 142 deletions.
diff --git a/packages/kit/src/views/Account/AddNewAccount/Authentication.tsx b/packages/kit/src/views/Account/AddNewAccount/Authentication.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { FC, useEffect } from 'react';
 
+import { useNavigation } from '@react-navigation/core';
 import { RouteProp, useRoute } from '@react-navigation/native';
 
 import { Center, Modal, Spinner } from '@onekeyhq/components';
@@ -9,6 +10,7 @@ import {
   CreateAccountModalRoutes,
   CreateAccountRoutesParams,
 } from '@onekeyhq/kit/src/routes';
+import { ModalScreenProps } from '@onekeyhq/kit/src/routes/types';
 
 export type EnableLocalAuthenticationProps = {
   password: string;
@@ -35,15 +37,23 @@ const HDAccountAuthenticationDone: FC<EnableLocalAuthenticationProps> = ({
     </Center>
   );
 };
+type NavigationProps = ModalScreenProps<CreateAccountRoutesParams>;
 
 export const HDAccountAuthentication: FC = () => {
   const route = useRoute<RouteProps>();
   const { onDone } = route.params;
+  const navigation = useNavigation<NavigationProps['navigation']>();
   return (
     <Modal footer={null}>
       <Protected>
         {(password) => (
-          <HDAccountAuthenticationDone password={password} onDone={onDone} />
+          <HDAccountAuthenticationDone
+            password={password}
+            onDone={() => {
+              onDone(password);
+              navigation?.goBack();
+            }}
+          />
         )}
       </Protected>
     </Modal>

diff --git a/packages/kit/src/views/Account/AddNewAccount/RecoverAccounts.tsx b/packages/kit/src/views/Account/AddNewAccount/RecoverAccounts.tsx
@@ -12,10 +12,12 @@ import { ListRenderItem } from 'react-native';
 
 import {
   Box,
+  Center,
   CheckBox,
   Divider,
   Empty,
   Modal,
+  Spinner,
   Typography,
 } from '@onekeyhq/components';
 import type {
@@ -90,14 +92,15 @@ const CustomCell: FC<CellProps> = ({ item, index, onChange }) => {
   );
 };
 
+type PageStatusType = 'loading' | 'empty' | 'data';
 const RecoverAccounts: FC = () => {
   const intl = useIntl();
   const route = useRoute<RouteProps>();
   const { password, walletId, network } = route.params;
   const [currentPage, setCurrentPage] = useState(0);
+  const [pageStatus, setPageStatus] = useState<PageStatusType>('loading');
   const navigation = useNavigation<NavigationProps['navigation']>();
 
-  // let currentPage = 0;
   const [flatListData, updateFlatListData] = useState<FlatDataType[]>([]);
   const wallets = useAppSelector((s) => s.wallet.wallets);
   const wallet = wallets.find((w) => w.id === walletId) ?? null;
@@ -127,6 +130,9 @@ const RecoverAccounts: FC = () => {
         start,
         limit,
       );
+      if (currentPage === 0) {
+        setPageStatus(accounts.length > 0 ? 'data' : 'empty');
+      }
       updateFlatListData((prev) => [
         ...prev,
         ...accounts.map((item) => {
@@ -135,10 +141,9 @@ const RecoverAccounts: FC = () => {
           return { ...item, selected: isDisabled, isDisabled };
         }),
       ]);
-
       return accounts;
     },
-    [getActiveAccount, network, password, walletId],
+    [currentPage, getActiveAccount, network, password, walletId],
   );
 
   const checkBoxOnChange = useCallback(
@@ -176,6 +181,7 @@ const RecoverAccounts: FC = () => {
 
   return (
     <Modal
+      height="640px"
       header={intl.formatMessage({ id: 'action__recover_accounts' })}
       headerDescription={`${intl.formatMessage({
         id: 'account__recover_Step_1_of_2',
@@ -211,14 +217,30 @@ const RecoverAccounts: FC = () => {
         isDisabled: !isVaild,
       }}
       hideSecondaryAction
-      flatListProps={{
-        data: flatListData,
-        // @ts-ignore
-        renderItem,
-        ItemSeparatorComponent: () => <Divider />,
-        keyExtractor: (item) => (item as ImportableHDAccount).path,
-        ListEmptyComponent: (
-          <Box flex={1} alignItems="center" justifyContent="center">
+      // @ts-ignore
+      flatListProps={
+        pageStatus === 'data'
+          ? {
+              height: '640px',
+              data: flatListData,
+              // @ts-ignore
+              renderItem,
+              ItemSeparatorComponent: () => <Divider />,
+              keyExtractor: (item) => (item as ImportableHDAccount).path,
+              ListEmptyComponent: (
+                <Box flex={1} alignItems="center" justifyContent="center" />
+              ),
+              onEndReached: () => {
+                setCurrentPage((p) => p + 1);
+              },
+            }
+          : undefined
+      }
+      mt="10px"
+    >
+      {pageStatus !== 'data' ? (
+        <Center h="full" w="full">
+          {pageStatus === 'empty' ? (
             <Empty
               imageUrl={IconAccount}
               title={intl.formatMessage({
@@ -228,14 +250,12 @@ const RecoverAccounts: FC = () => {
                 id: 'empty__no_recoverable_account_desc',
               })}
             />
-          </Box>
-        ),
-        onEndReached: () => {
-          setCurrentPage((p) => p + 1);
-        },
-      }}
-      mt="10px"
-    />
+          ) : (
+            <Spinner size="lg" />
+          )}
+        </Center>
+      ) : null}
+    </Modal>
   );
 };
 

diff --git a/packages/kit/src/views/Help/HelpSelector.tsx b/packages/kit/src/views/Help/HelpSelector.tsx
@@ -83,14 +83,14 @@ const HelpSelector: FC = () => {
           label: intl.formatMessage({ id: 'form__submit_a_request' }),
           value: 'submit_request',
           iconProps: {
-            name: 'AnnotationSolid',
+            name: 'AnnotationOutline',
           },
         },
         {
           label: intl.formatMessage({ id: 'form__s_request_history' }),
           value: 'history',
           iconProps: {
-            name: 'ClockSolid',
+            name: 'ClockOutline',
           },
         },
       ],
@@ -102,21 +102,21 @@ const HelpSelector: FC = () => {
           label: intl.formatMessage({ id: 'form__help_support' }),
           value: 'support',
           iconProps: {
-            name: 'AnnotationSolid',
+            name: 'AnnotationOutline',
           },
         },
         {
           label: intl.formatMessage({ id: 'form__beginner_guide' }),
           value: 'guide',
           iconProps: {
-            name: 'MapSolid',
+            name: 'MapOutline',
           },
         },
         {
           label: intl.formatMessage({ id: 'form__hardware_wallet_manuals' }),
           value: 'hardware_wallet',
           iconProps: {
-            name: 'BookmarkAltSolid',
+            name: 'BookmarkAltOutline',
           },
         },
       ],
@@ -128,21 +128,21 @@ const HelpSelector: FC = () => {
           label: intl.formatMessage({ id: 'title__official_website' }),
           value: 'website',
           iconProps: {
-            name: 'GlobeAltSolid',
+            name: 'GlobeAltOutline',
           },
         },
         {
           label: intl.formatMessage({ id: 'title__buy_onekey_hardware' }),
           value: 'shop',
           iconProps: {
-            name: 'ShoppingBagSolid',
+            name: 'ShoppingBagOutline',
           },
         },
         {
           label: intl.formatMessage({ id: 'title__client_download' }),
           value: 'download',
           iconProps: {
-            name: 'DownloadSolid',
+            name: 'DownloadOutline',
           },
         },
       ],
@@ -214,7 +214,9 @@ const HelpSelector: FC = () => {
           isSmallScreen ? intl.formatMessage({ id: 'title__help' }) : undefined
         }
         dropdownPosition="right"
-        dropdownProps={isSmallScreen ? {} : { minW: '240px', bottom: '62px' }}
+        dropdownProps={
+          isSmallScreen ? {} : { minW: '240px', minH: '330px', bottom: '62px' }
+        }
         headerShown={false}
         options={options}
         isTriggerPlain