[Issue-927]: Allow reload NFT, staking in case list is empty

Koniverse · Aug 23, 2023 · ac624db · ac624db
1 parent 9e33ddb
commit ac624db
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 37 deletions.
diff --git a/src/components/EmptyList.tsx b/src/components/EmptyList.tsx
@@ -1,21 +1,38 @@
 import Text from 'components/Text';
-import { View } from 'react-native';
+import { RefreshControl, ScrollView, View } from 'react-native';
 import React from 'react';
 import { IconProps } from 'phosphor-react-native';
 import { centerStyle, FontMedium, FontSemiBold } from 'styles/sharedStyles';
 import { PageIcon } from 'components/design-system-ui';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import { ColorMap } from 'styles/color';
 
 interface Props {
   icon: React.ElementType<IconProps>;
   title: string;
   message?: string;
+  isRefresh?: boolean;
+  onPressReload?: () => void;
 }
 
-export const EmptyList = ({ icon, title, message }: Props) => {
+export const EmptyList = ({ icon, title, message, onPressReload, isRefresh }: Props) => {
   const theme = useSubWalletTheme().swThemes;
+
   return (
-    <View style={[centerStyle, { justifyContent: 'center', alignItems: 'center' }]}>
+    <ScrollView
+      contentContainerStyle={[centerStyle, { justifyContent: 'center', alignItems: 'center' }]}
+      refreshControl={
+        onPressReload ? (
+          <RefreshControl
+            style={{ backgroundColor: ColorMap.dark1 }}
+            tintColor={ColorMap.light}
+            refreshing={!!isRefresh}
+            onRefresh={onPressReload}
+          />
+        ) : (
+          <></>
+        )
+      }>
       <View style={{ justifyContent: 'center', alignItems: 'center' }}>
         <PageIcon icon={icon} color={theme.colorTextTertiary} backgroundColor={'rgba(77, 77, 77, 0.1)'} />
         <Text
@@ -40,6 +57,6 @@ export const EmptyList = ({ icon, title, message }: Props) => {
           </Text>
         )}
       </View>
-    </View>
+    </ScrollView>
   );
 };
diff --git a/src/components/EmptyValidator.tsx b/src/components/EmptyValidator.tsx
@@ -3,8 +3,9 @@ import { View } from 'react-native';
 import React from 'react';
 import { IconProps } from 'phosphor-react-native';
 import { centerStyle, FontMedium, FontSemiBold } from 'styles/sharedStyles';
-import { Button, PageIcon } from 'components/design-system-ui';
+import { Button, PageIcon, Typography } from 'components/design-system-ui';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import i18n from 'utils/i18n/i18n';
 
 interface Props {
   icon: React.ElementType<IconProps>;
@@ -45,9 +46,13 @@ export const EmptyValidator = ({ icon, title, message, isDataEmpty, validatorTit
                 color: theme.colorTextLight4,
                 ...FontMedium,
                 paddingTop: 8,
-              }}>{`Unable to fetch ${validatorTitle} information`}</Text>
-            <Button type={'ghost'} size={'xs'} onPress={handleReload}>
-              Reload
+              }}>
+              {i18n.message.unableToFetchInformation(validatorTitle)}
+            </Text>
+            <Button type={'ghost'} size={'sm'} onPress={handleReload}>
+              <Typography.Text style={{ ...FontMedium, color: theme.colorPrimary }}>
+                {i18n.buttonTitles.reload}
+              </Typography.Text>
             </Button>
           </>
         ) : (

diff --git a/src/components/LazyFlatList.tsx b/src/components/LazyFlatList.tsx
@@ -135,7 +135,7 @@ export function LazyFlatList<T>({
           />
         </View>
       ) : (
-        renderListEmptyComponent('searchString')
+        renderListEmptyComponent(searchString)
       )}
     </>
   );

diff --git a/src/predefined/dAppSites.ts b/src/predefined/dAppSites.ts
@@ -1171,7 +1171,7 @@ export const predefinedDApps: PredefinedDApps = {
       icon: 'https://azero.id/favicon.ico',
       id: 'www.azero.id',
       url: 'https://azero.id',
-      categories: ['defi', 'substrate'],
+      categories: ['substrate', 'utilities'],
       isSupportSubstrateAccount: true,
       isSupportEthereumAccount: false,
     },

diff --git a/src/screens/Home/NFT/Collection/NftCollectionList.tsx b/src/screens/Home/NFT/Collection/NftCollectionList.tsx
@@ -4,14 +4,15 @@ import React, { useCallback, useEffect } from 'react';
 import { ListRenderItemInfo, RefreshControl, SectionListData } from 'react-native';
 import NftCollectionItem from 'screens/Home/NFT/Collection/NftCollectionItem';
 import i18n from 'utils/i18n/i18n';
-import { Plus } from 'phosphor-react-native';
+import { Image, Plus } from 'phosphor-react-native';
 import useFetchNftCollection from 'hooks/screen/Home/Nft/useFetchNftCollection';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
-import { NFTNavigationProps, renderEmptyNFT } from 'screens/Home/NFT/NFTStackScreen';
+import { NFTNavigationProps } from 'screens/Home/NFT/NFTStackScreen';
 import { setAdjustPan } from 'rn-android-keyboard-adjust';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { useRefresh } from 'hooks/useRefresh';
 import { reloadCron } from 'messaging/index';
+import { EmptyList } from 'components/EmptyList';
 
 type GetItemLayoutType =
   | readonly NftCollection[]
@@ -59,6 +60,24 @@ const NftCollectionList = () => {
     offset: TOTAL_ITEM_HEIGHT * index,
   });
 
+  const renderEmptyNFT = (searchString?: string) => {
+    if (searchString) {
+      return (
+        <EmptyList title={i18n.emptyScreen.nftEmptyTitle} icon={Image} message={i18n.emptyScreen.nftEmptyMessage} />
+      );
+    } else {
+      return (
+        <EmptyList
+          title={i18n.emptyScreen.nftEmptyTitle}
+          icon={Image}
+          message={i18n.emptyScreen.nftEmptyMessage}
+          onPressReload={() => refresh(reloadCron({ data: 'nft' }))}
+          isRefresh={isRefresh}
+        />
+      );
+    }
+  };
+
   return (
     <>
       <FlatListScreen

diff --git a/src/screens/Home/NFT/Item/NftItemList.tsx b/src/screens/Home/NFT/Item/NftItemList.tsx
@@ -7,21 +7,22 @@ import { ListRenderItemInfo, RefreshControl, StyleProp, Text, View } from 'react
 import { RootNavigationProps } from 'routes/index';
 import NftItem from './NftItem';
 import i18n from 'utils/i18n/i18n';
-import { NFTCollectionProps, renderEmptyNFT } from 'screens/Home/NFT/NFTStackScreen';
+import { NFTCollectionProps } from 'screens/Home/NFT/NFTStackScreen';
 import { useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
 import { useNavigation } from '@react-navigation/native';
 import { FontBold, sharedStyles } from 'styles/sharedStyles';
 import { ColorMap } from 'styles/color';
-import { deleteCustomAssets, restartCronServices } from 'messaging/index';
+import { deleteCustomAssets, reloadCron, restartCronServices } from 'messaging/index';
 import { useRefresh } from 'hooks/useRefresh';
-import { Trash } from 'phosphor-react-native';
+import { Image, Trash } from 'phosphor-react-native';
 import DeleteModal from 'components/common/Modal/DeleteModal';
 import useConfirmModal from 'hooks/modal/useConfirmModal';
 import { _isCustomAsset, _isSmartContractToken } from '@subwallet/extension-base/services/chain-service/utils';
 import { useToast } from 'react-native-toast-notifications';
 import useGetChainAssetInfo from 'hooks/common/userGetChainAssetInfo';
 import { SectionListData } from 'react-native';
+import { EmptyList } from 'components/EmptyList';
 
 type GetItemLayoutType =
   | readonly _NftItem[]
@@ -162,6 +163,24 @@ const NftItemList = ({
     setVisible,
   } = useConfirmModal(handeDelete);
 
+  const renderEmptyNFT = (searchString?: string) => {
+    if (searchString) {
+      return (
+        <EmptyList title={i18n.emptyScreen.nftEmptyTitle} icon={Image} message={i18n.emptyScreen.nftEmptyMessage} />
+      );
+    } else {
+      return (
+        <EmptyList
+          title={i18n.emptyScreen.nftEmptyTitle}
+          icon={Image}
+          message={i18n.emptyScreen.nftEmptyMessage}
+          onPressReload={() => refresh(reloadCron({ data: 'nft' }))}
+          isRefresh={isRefresh}
+        />
+      );
+    }
+  };
+
   return (
     <View style={NftItemListStyle}>
       <FlatListScreen

diff --git a/src/screens/Home/NFT/NFTStackScreen.tsx b/src/screens/Home/NFT/NFTStackScreen.tsx
@@ -4,10 +4,7 @@ import NftCollectionList from 'screens/Home/NFT/Collection/NftCollectionList';
 import NftItemList from 'screens/Home/NFT/Item/NftItemList';
 import NftDetail from 'screens/Home/NFT/Detail/NftDetail';
 import { RootStackParamList } from 'routes/index';
-import { EmptyList } from 'components/EmptyList';
-import { Image } from 'phosphor-react-native';
 import withPageWrapper from 'components/pageWrapper';
-import i18n from 'utils/i18n/i18n';
 
 export type NFTStackParamList = {
   CollectionList: undefined;
@@ -19,10 +16,6 @@ export type NFTNavigationProps = NavigationProps['navigation'];
 export type NFTCollectionProps = NativeStackScreenProps<NFTStackParamList, 'Collection'>;
 export type NFTDetailProps = NativeStackScreenProps<NFTStackParamList, 'NftDetail'>;
 
-export const renderEmptyNFT = () => {
-  return <EmptyList title={i18n.emptyScreen.nftEmptyTitle} icon={Image} message={i18n.emptyScreen.nftEmptyMessage} />;
-};
-
 const NFTStackScreen = () => {
   const NFTStack = createNativeStackNavigator<NFTStackParamList>();
 

diff --git a/src/screens/Home/Staking/Balance/StakingBalanceList.tsx b/src/screens/Home/Staking/Balance/StakingBalanceList.tsx
@@ -5,7 +5,6 @@ import { Plus, Trophy } from 'phosphor-react-native';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Keyboard, ListRenderItemInfo, RefreshControl } from 'react-native';
 import StakingBalanceItem from 'screens/Home/Staking/Balance/StakingBalanceItem';
-import EmptyStaking from 'screens/Home/Staking/Shared/EmptyStaking';
 import i18n from 'utils/i18n/i18n';
 import { ColorMap } from 'styles/color';
 import { reloadCron } from 'messaging/index';
@@ -24,20 +23,6 @@ enum FilterValue {
   POOLED = 'pooled',
 }
 
-const renderEmpty = (val?: string) => {
-  if (val) {
-    return (
-      <EmptyList
-        title={i18n.emptyScreen.stakingEmptyTitle}
-        icon={Trophy}
-        message={i18n.emptyScreen.stakingEmptyMessage}
-      />
-    );
-  } else {
-    return <EmptyStaking />;
-  }
-};
-
 const filterFunction = (items: StakingDataType[], filters: string[]) => {
   if (!filters.length) {
     return items;
@@ -104,6 +89,30 @@ const StakingBalanceList = () => {
     return result;
   }, [data, priceMap]);
 
+  const renderEmpty = (val?: string) => {
+    if (val) {
+      return (
+        <EmptyList
+          title={i18n.emptyScreen.stakingEmptyTitle}
+          icon={Trophy}
+          message={i18n.emptyScreen.stakingEmptyMessage}
+        />
+      );
+    } else {
+      return (
+        <EmptyList
+          title={i18n.emptyScreen.stakingEmptyTitle}
+          icon={Trophy}
+          message={i18n.emptyScreen.stakingEmptyMessage}
+          isRefresh={isRefresh}
+          onPressReload={() => {
+            refresh(reloadCron({ data: 'staking' }));
+          }}
+        />
+      );
+    }
+  };
+
   const isFocused = useIsFocused();
   useEffect(() => {
     if (isFocused) {

diff --git a/src/utils/i18n/en_US.ts b/src/utils/i18n/en_US.ts
@@ -386,6 +386,7 @@ export const en = {
     disconnect: 'Disconnect',
     applyAccounts: (account: number) => `Apply ${account} accounts`,
     createOne: 'Create one',
+    reload: 'Reload',
   },
   inputLabel: {
     selectAcc: 'Select account',
@@ -603,6 +604,7 @@ export const en = {
     connectSuccessfully: 'Connect successfully',
     supportedNetworks: 'Supported networks',
     networkSupported: (networkNumber: number) => `${networkNumber} networks support`,
+    unableToFetchInformation: (validatorTitle: string) => `Unable to fetch ${validatorTitle} information`,
   },
   filterOptions: {
     polkadotParachain: 'Polkadot parachain',

diff --git a/src/utils/i18n/vi_VN.ts b/src/utils/i18n/vi_VN.ts
@@ -385,6 +385,7 @@ export const vi = {
     disconnect: 'Disconnect',
     applyAccounts: (account: number) => `Apply ${account} accounts`,
     createOne: 'Create one',
+    reload: 'Tải lại',
   },
   inputLabel: {
     selectAcc: 'Chọn tài khoản',
@@ -601,6 +602,7 @@ export const vi = {
     connectSuccessfully: 'Connect successfully',
     supportedNetworks: 'Supported networks',
     networkSupported: (networkNumber: number) => `${networkNumber} networks support`,
+    unableToFetchInformation: (validatorTitle: string) => `Không thể lấy thông tin của ${validatorTitle}`,
   },
   filterOptions: {
     polkadotParachain: 'Polkadot Parachain',

diff --git a/src/utils/i18n/zh_CN.ts b/src/utils/i18n/zh_CN.ts
@@ -381,6 +381,7 @@ export const zh = {
     disconnect: 'Disconnect',
     applyAccounts: (account: number) => `Apply ${account} accounts`,
     createOne: 'Create one',
+    reload: '重新加载',
   },
   inputLabel: {
     selectAcc: '选择账户',
@@ -595,6 +596,7 @@ export const zh = {
     connectSuccessfully: 'Connect successfully',
     supportedNetworks: 'Supported networks',
     networkSupported: (networkNumber: number) => `${networkNumber} networks support`,
+    unableToFetchInformation: (validatorTitle: string) => `无法获取${validatorTitle}资料`,
   },
   filterOptions: {
     polkadotParachain: 'Polkadot平行链',