fix: ui improvements

src/components/news-detail/news-detail.tsx

@@ -9,11 +9,11 @@ import SimpleMarkdown from 'simple-markdown';
 
 import {Color} from '@app/colors';
 import {PopupContainer, Spacer, Text} from '@app/components/ui';
-import {createTheme, openURL} from '@app/helpers';
+import {createTheme} from '@app/helpers';
 import {News} from '@app/models/news';
 import {EventTracker} from '@app/services/event-tracker';
 import {MarketingEvents} from '@app/types';
-import {makeID} from '@app/utils';
+import {makeID, openWeb3Browser} from '@app/utils';
 
 type NodeImage = {
   alt: string;
@@ -213,7 +213,7 @@ const rules = {
           url: node.target,
         });
 
-        await openURL(node.target);
+        await openWeb3Browser(node.target);
       };
       return (
         <Text
@@ -260,7 +260,7 @@ export const NewsDetail = ({
         url,
       });
 
-      await openURL(url);
+      await openWeb3Browser(url);
     },
     [linkEvent],
   );

src/components/transaction-select-crypto/transaction-select-crypto.tsx

@@ -1,11 +1,15 @@
 import React, {useCallback} from 'react';
 
 import {toJS} from 'mobx';
-import {FlatList, StyleSheet} from 'react-native';
+import {ActivityIndicator, FlatList, StyleSheet} from 'react-native';
 
+import {Color, getColor} from '@app/colors';
 import {TokenRow} from '@app/components/token';
+import {Token} from '@app/models/tokens';
 import {IToken} from '@app/types';
 
+import {Spacer} from '../ui';
+
 export type Props = {
   tokens: IToken[];
   onItemPress: (token: IToken) => void;
@@ -23,12 +27,26 @@ export const TransactionSelectCrypto = ({tokens, onItemPress}: Props) => {
     return <TokenRow item={item} onPress={onPress} />;
   }, []);
 
+  const renderListFooterComponent = useCallback(() => {
+    return (
+      <>
+        {Token.isLoading && (
+          <>
+            <Spacer height={8} />
+            <ActivityIndicator size="small" color={getColor(Color.textBase2)} />
+          </>
+        )}
+      </>
+    );
+  }, [Token.isLoading]);
+
   return (
     <FlatList
       data={tokens}
       keyExtractor={keyExtractor}
       renderItem={renderItem}
       contentContainerStyle={styles.wrapper}
+      ListFooterComponent={renderListFooterComponent}
     />
   );
 };

src/components/ui/walletCard.tsx

@@ -10,6 +10,7 @@ import {TokenRow} from '@app/components/token';
 import {
   CardSmall,
   DataContent,
+  First,
   Icon,
   IconsName,
   Spacer,
@@ -141,13 +142,15 @@ export const WalletCard = observer(
             />
           );
         })}
-        {tokens.length > 0 && !isLast ? (
-          <SolidLine
-            style={styles.line}
-            width={width - 40}
-            color={Color.graphicSecond1}
-          />
-        ) : (
+        <First>
+          {isLast && <Spacer height={24} />}
+          {tokens.length > 0 && (
+            <SolidLine
+              style={styles.line}
+              width={width - 40}
+              color={Color.graphicSecond1}
+            />
+          )}
           <View style={styles.footer}>
             <Icon name={IconsName.coin} color={Color.textSecond1} />
             <Spacer width={4} />
@@ -157,7 +160,7 @@ export const WalletCard = observer(
               i18n={I18N.noTokens}
             />
           </View>
-        )}
+        </First>
       </View>
     );
   },

src/hooks/use-layout-animation.tsx

@@ -2,18 +2,16 @@ import {useCallback, useEffect} from 'react';
 
 import {LayoutAnimation, UIManager} from 'react-native';
 
-import {IS_ANDROID} from '@app/variables/common';
-
 export const useLayoutAnimation = () => {
   useEffect(() => {
-    if (!UIManager.setLayoutAnimationEnabledExperimental || !IS_ANDROID) {
+    if (!UIManager.setLayoutAnimationEnabledExperimental) {
       return;
     }
 
     UIManager.setLayoutAnimationEnabledExperimental(true);
 
     return () => {
-      if (!UIManager.setLayoutAnimationEnabledExperimental || !IS_ANDROID) {
+      if (!UIManager.setLayoutAnimationEnabledExperimental) {
         return;
       }
 

src/models/tokens.ts

@@ -313,7 +313,6 @@ class TokensStore implements MobXStore<IToken> {
 
     runInAction(() => {
       this._isLoading = true;
-      this.tokens = {};
     });
 
     const wallets = Wallet.getAll();
@@ -335,9 +334,12 @@ class TokensStore implements MobXStore<IToken> {
     const contracts = await Indexer.instance.getAddresses(
       updates.tokens.reduce(
         (prev, cur) => {
+          const tokens = Array.from(
+            new Set([...(prev[cur.chain_id] || []), cur.contract]),
+          );
           return {
             ...prev,
-            [cur.chain_id]: [...(prev[cur.chain_id] || []), cur.contract],
+            [cur.chain_id]: tokens,
           };
         },
         {} as Record<ChainId, string[]>,

src/screens/HomeStack/TransactionStack/transaction-address/transaction-address.tsx

@@ -9,22 +9,20 @@ import {
   KeyboardSafeArea,
   Spacer,
 } from '@app/components/ui';
-import {createTheme, showModal} from '@app/helpers';
+import {createTheme} from '@app/helpers';
 import {AddressUtils} from '@app/helpers/address-utils';
 import {useTypedNavigation, useTypedRoute} from '@app/hooks';
 import {useAndroidBackHandler} from '@app/hooks/use-android-back-handler';
 import {I18N} from '@app/i18n';
 import {Contact} from '@app/models/contact';
 import {Provider} from '@app/models/provider';
-import {Token} from '@app/models/tokens';
 import {Wallet} from '@app/models/wallet';
 import {
   TransactionStackParamList,
   TransactionStackRoutes,
 } from '@app/route-types';
 import {NetworkProviderTypes} from '@app/services/backend';
 import {HapticEffects, vibrate} from '@app/services/haptic';
-import {ModalType} from '@app/types';
 
 import {TransactionAddressAddContact} from './transaction-address-add-contact';
 import {TransactionAddressContactList} from './transaction-address-contact-list';
@@ -151,17 +149,6 @@ export const TransactionAddressScreen = observer(() => {
             token,
           });
         } else {
-          if (!Token.tokens?.[AddressUtils.toEth(from)]) {
-            const hide = showModal(ModalType.loading, {
-              text: 'Loading token balances',
-            });
-            try {
-              await Token.fetchTokens(true, true);
-            } catch {
-            } finally {
-              hide();
-            }
-          }
           navigation.navigate(TransactionStackRoutes.TransactionSelectCrypto, {
             from: converter(from),
             to: converter(result),

src/screens/transaction-select-crypto.tsx

@@ -54,7 +54,7 @@ export const TransactionSelectCryptoScreen = observer(() => {
     });
   };
 
-  if (Token.isLoading) {
+  if (Token.isLoading && !tokens.length) {
     return Array.from({length: 6}).map((_, index) => (
       <View key={index} style={styles.placeholderContainer}>
         <View style={styles.placeholderLeft}>

src/widgets/index.tsx

@@ -1,15 +1,9 @@
-import React, {
-  ReactNode,
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, {ReactNode, memo, useCallback, useEffect, useState} from 'react';
 
 import {app} from '@app/contexts';
 import {Events} from '@app/events';
 import {getAppInfo} from '@app/helpers/get-app-info';
+import {useLayoutAnimation} from '@app/hooks/use-layout-animation';
 import {VariablesString} from '@app/models/variables-string';
 import {Backend} from '@app/services/backend';
 import {IWidget} from '@app/types';
@@ -75,13 +69,16 @@ const WidgetMap: IWidgetMap = {
 };
 
 export const WidgetRoot = memo(({lastUpdate}: {lastUpdate: number}) => {
-  const dataCached = useRef(
-    VariablesString.get('widget_blocks') || '[]',
-  ).current;
-
-  const [data, setData] = useState<IWidget[]>(JSON.parse(dataCached));
+  const {animate} = useLayoutAnimation();
+  const [data, setData] = useState<IWidget[] | null>(null);
 
   const requestMarkup = useCallback(async () => {
+    const cached = VariablesString.get('widget_blocks');
+    if (cached && !data) {
+      animate();
+      setData(JSON.parse(cached));
+    }
+
     const appInfo = await getAppInfo();
     const response = await Backend.instance.markup('home', appInfo);
 
@@ -94,10 +91,11 @@ export const WidgetRoot = memo(({lastUpdate}: {lastUpdate: number}) => {
     const blocksAreEqual = JSON.stringify(blocks) === JSON.stringify(data);
 
     if (!blocksAreEqual) {
+      animate();
       setData(blocks);
       VariablesString.set('widget_blocks', JSON.stringify(blocks));
     }
-  }, [data]);
+  }, [data, animate]);
 
   useEffect(() => {
     requestMarkup();