From 183acfd09e7418c34ad9e41d1b42a4ef072e1bec Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Thu, 12 Oct 2023 11:11:42 +0800
Subject: [PATCH 1/2] feat(ui-ux): add hasFetchedEvmTokens flag in store

---
 .../AppNavigator/screens/Portfolio/PortfolioScreen.tsx |  3 ++-
 .../screens/Portfolio/components/DFIBalanceCard.tsx    |  3 ++-
 .../screens/Portfolio/screens/TokenSelectionScreen.tsx | 10 ++++++----
 shared/store/evm.ts                                    |  3 +++
 4 files changed, 13 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..f1f4b1bfc1 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,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
         {activeButtonGroup === ButtonGroupTabKey.AllTokens && (
           <DFIBalanceCard denominationCurrency={denominationCurrency} />
         )}
-        {!hasFetchedToken ? (
+        {!(hasFetchedToken && 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..cadcb737a4 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 && 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..2f98594a17 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,8 @@ export function TokenSelectionScreen(): JSX.Element {
     return filterTokensBySearchTerm(tokensWithBalance, debouncedSearchTerm);
   }, [tokensWithBalance, debouncedSearchTerm]);
 
-  if (hasFetchedToken && tokensWithBalance.length === 0) {
+  const hasFetchedDvmEvmTokens = hasFetchedToken && hasFetchedEvmTokens;
+  if (hasFetchedDvmEvmTokens && tokensWithBalance.length === 0) {
     return <EmptyAsset navigation={navigation} />;
   }
 
@@ -151,7 +153,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 +163,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 +178,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 e724c53069..b231fd96df 100644
--- a/shared/store/evm.ts
+++ b/shared/store/evm.ts
@@ -30,11 +30,13 @@ interface EvmTokenBalance {
 interface EvmState {
   evmWalletDetails: EvmWalletDetails | null;
   evmTokenBalances: EvmTokenBalance[];
+  hasFetchedEvmTokens: boolean;
 }
 
 const initialState: EvmState = {
   evmWalletDetails: null,
   evmTokenBalances: [],
+  hasFetchedEvmTokens: false,
 };
 
 export const fetchEvmWalletDetails = createAsyncThunk(
@@ -84,6 +86,7 @@ export const evm = createSlice({
       fetchEvmTokenBalances.fulfilled,
       (state, action: PayloadAction<EvmTokenBalance[]>) => {
         state.evmTokenBalances = action.payload;
+        state.hasFetchedEvmTokens = true;
       },
     );
   },

From 5738d8cd8ca49c1c54534901358062d95eb73932 Mon Sep 17 00:00:00 2001
From: Lyka Labrada <lykalabrada@gmail.com>
Date: Thu, 12 Oct 2023 13:44:21 +0800
Subject: [PATCH 2/2] add evm domain condition

---
 .../screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx | 3 ++-
 .../screens/Portfolio/components/DFIBalanceCard.tsx            | 2 +-
 .../screens/Portfolio/screens/TokenSelectionScreen.tsx         | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
index f1f4b1bfc1..3a685ab4ca 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
@@ -687,7 +687,8 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
         {activeButtonGroup === ButtonGroupTabKey.AllTokens && (
           <DFIBalanceCard denominationCurrency={denominationCurrency} />
         )}
-        {!(hasFetchedToken && hasFetchedEvmTokens) ? (
+        {!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 cadcb737a4..02be14c2ab 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx
@@ -93,7 +93,7 @@ export function DFIBalanceCard({
               "pt-0.5": Platform.OS === "android",
             })}
           >
-            {hasFetchedToken && hasFetchedEvmTokens ? (
+            {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 2f98594a17..51d7a5f637 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenSelectionScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenSelectionScreen.tsx
@@ -79,7 +79,8 @@ export function TokenSelectionScreen(): JSX.Element {
     return filterTokensBySearchTerm(tokensWithBalance, debouncedSearchTerm);
   }, [tokensWithBalance, debouncedSearchTerm]);
 
-  const hasFetchedDvmEvmTokens = hasFetchedToken && hasFetchedEvmTokens;
+  const hasFetchedDvmEvmTokens =
+    hasFetchedToken || (domain === DomainType.EVM && hasFetchedEvmTokens);
   if (hasFetchedDvmEvmTokens && tokensWithBalance.length === 0) {
     return <EmptyAsset navigation={navigation} />;
   }