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 <[email protected]>
BirthdayResearch · Oct 13, 2023 · 564c704 · 564c704
1 parent 96ea2eb
commit 564c704
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
       },
     );
   },