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

BirthdayResearch · Oct 12, 2023 · 183acfd · 183acfd
1 parent e5b0151
commit 183acfd
Show file tree

Hide file tree

Showing 4 changed files with 13 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,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
@@ -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
@@ -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
@@ -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;
       },
     );
   },