From 564c7045611f6602795b0ab66ba433b561fdd72d Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Thu, 12 Oct 2023 14:25:56 +0800
Subject: [PATCH] feat(ui-ux): add hasFetchedEvmTokens flag in store for loader
 (#4054)

* feat(ui-ux): add hasFetchedEvmTokens flag in store

* add evm domain condition

---------

Co-authored-by: Pierre Gee <pierre@cakedefi.com>
---
 .../screens/Portfolio/PortfolioScreen.tsx             |  4 +++-
 .../screens/Portfolio/components/DFIBalanceCard.tsx   |  3 ++-
 .../Portfolio/screens/TokenSelectionScreen.tsx        | 11 +++++++----
 shared/store/evm.ts                                   |  3 +++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
index 69df7b3175..3a685ab4ca 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
@@ -134,6 +134,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
   const { hasFetchedToken, allTokens } = useSelector(
     (state: RootState) => state.wallet,
   );
+  const { hasFetchedEvmTokens } = useSelector((state: RootState) => state.evm);
   const ref = useRef(null);
   const logger = useLogger();
   useScrollToTop(ref);
@@ -686,7 +687,8 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
         {activeButtonGroup === ButtonGroupTabKey.AllTokens && (
           <DFIBalanceCard denominationCurrency={denominationCurrency} />
         )}
-        {!hasFetchedToken ? (
+        {!hasFetchedToken ||
+        (domain === DomainType.EVM && !hasFetchedEvmTokens) ? (
           <View style={tailwind("px-5")}>
             <SkeletonLoader row={2} screen={SkeletonLoaderScreen.Portfolio} />
           </View>
diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx
index 87286bf64c..02be14c2ab 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx
@@ -42,6 +42,7 @@ export function DFIBalanceCard({
     unifiedDFISelector(state.wallet),
   );
   const { hasFetchedToken } = useSelector((state: RootState) => state.wallet);
+  const { hasFetchedEvmTokens } = useSelector((state: RootState) => state.evm);
   const { getTokenPrice } = useTokenPrice(denominationCurrency); // input based on selected denomination from portfolio tab
   const isEvmDomain = domain === DomainType.EVM;
   const tokenAmount = isEvmDomain
@@ -92,7 +93,7 @@ export function DFIBalanceCard({
               "pt-0.5": Platform.OS === "android",
             })}
           >
-            {hasFetchedToken ? (
+            {hasFetchedToken || (isEvmDomain && hasFetchedEvmTokens) ? (
               <TokenAmountText
                 tokenAmount={tokenAmount.toString()}
                 usdAmount={usdAmount}
diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenSelectionScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenSelectionScreen.tsx
index 98d7c4e935..51d7a5f637 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenSelectionScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenSelectionScreen.tsx
@@ -61,6 +61,7 @@ export function TokenSelectionScreen(): JSX.Element {
   const { evmTokens } = useEvmTokenBalances();
 
   const { hasFetchedToken } = useSelector((state: RootState) => state.wallet);
+  const { hasFetchedEvmTokens } = useSelector((state: RootState) => state.evm);
   const [searchString, setSearchString] = useState("");
   const { getTokenPrice } = useTokenPrice();
   const debouncedSearchTerm = useDebounce(searchString, 250);
@@ -78,7 +79,9 @@ export function TokenSelectionScreen(): JSX.Element {
     return filterTokensBySearchTerm(tokensWithBalance, debouncedSearchTerm);
   }, [tokensWithBalance, debouncedSearchTerm]);
 
-  if (hasFetchedToken && tokensWithBalance.length === 0) {
+  const hasFetchedDvmEvmTokens =
+    hasFetchedToken || (domain === DomainType.EVM && hasFetchedEvmTokens);
+  if (hasFetchedDvmEvmTokens && tokensWithBalance.length === 0) {
     return <EmptyAsset navigation={navigation} />;
   }
 
@@ -151,7 +154,7 @@ export function TokenSelectionScreen(): JSX.Element {
             ref={searchRef}
           />
 
-          {(!hasFetchedToken || debouncedSearchTerm.trim() === "") && (
+          {(!hasFetchedDvmEvmTokens || debouncedSearchTerm.trim() === "") && (
             <ThemedTextV2
               style={tailwind("text-xs pl-5 mt-6 mb-2 font-normal-v2")}
               light={tailwind("text-mono-light-v2-500")}
@@ -161,7 +164,7 @@ export function TokenSelectionScreen(): JSX.Element {
             </ThemedTextV2>
           )}
 
-          {hasFetchedToken && debouncedSearchTerm.trim() !== "" && (
+          {hasFetchedDvmEvmTokens && debouncedSearchTerm.trim() !== "" && (
             <ThemedTextV2
               style={tailwind("text-xs pl-5 mt-6 mb-2 font-normal-v2")}
               light={tailwind("text-mono-light-v2-700")}
@@ -176,7 +179,7 @@ export function TokenSelectionScreen(): JSX.Element {
             </ThemedTextV2>
           )}
 
-          {!hasFetchedToken && (
+          {!hasFetchedDvmEvmTokens && (
             <SkeletonLoader
               row={5}
               screen={SkeletonLoaderScreen.TokenSelection}
diff --git a/shared/store/evm.ts b/shared/store/evm.ts
index 6232bb1eaa..ce1db037d3 100644
--- a/shared/store/evm.ts
+++ b/shared/store/evm.ts
@@ -32,11 +32,13 @@ interface EvmTokenBalance {
 interface EvmState {
   evmWalletDetails: EvmWalletDetails | null;
   evmTokenBalances: EvmTokenBalance[];
+  hasFetchedEvmTokens: boolean;
 }
 
 const initialState: EvmState = {
   evmWalletDetails: null,
   evmTokenBalances: [],
+  hasFetchedEvmTokens: false,
 };
 
 export const fetchEvmWalletDetails = createAsyncThunk(
@@ -126,6 +128,7 @@ export const evm = createSlice({
       fetchEvmTokenBalances.fulfilled,
       (state, action: PayloadAction<EvmTokenBalance[]>) => {
         state.evmTokenBalances = action.payload;
+        state.hasFetchedEvmTokens = true;
       },
     );
   },