feat: fetch NFT collections from explorer

Author: Kirill Ageychenko

.last-build

@@ -1 +1 @@
-7a575d8f15d4803176c8918bf00f6c8437612388
+543f114e0977965de7f507b1dc6977bd3a07b8fd

src/components/home-feed.tsx

@@ -44,7 +44,7 @@ export const HomeFeed = observer(() => {
     }
     setLastUpdate(Date.now());
     await Promise.allSettled([
-      Currencies.fetchCurrencies(),
+      !AppStore.isRpcOnly && Currencies.fetchCurrencies(),
       Wallet.fetchBalances(),
       Token.fetchTokens(),
       Nft.fetchNft(),
@@ -100,10 +100,12 @@ export const HomeFeed = observer(() => {
       <BannersWrapper />
       <Spacer height={12} />
       <LayoutWidget
+        key={'export-layout'}
         direction="vertical"
         deep={true}
         children={[
           <HomeBanner
+            key={'export-banner'}
             onPress={exportWallet}
             banner={{
               id: 'export_wallet',

src/components/image-wrapper.tsx

@@ -13,6 +13,7 @@ import {
 import BlastedImage, {BlastedImageProps} from 'react-native-blasted-image';
 import WebView from 'react-native-webview';
 
+import {useThemeSelector} from '@app/hooks';
 import {isValidUrl} from '@app/utils';
 
 import {First} from './ui';
@@ -26,7 +27,10 @@ const SVG_MIME_TYPE = 'data:image/svg+xml;base64,';
 
 export function ImageWrapper({source, style, ...props}: ImageWrapperProps) {
   const [isError, setError] = useState(false);
-
+  const placeholder = useThemeSelector({
+    light: require('@assets/images/nft_placeholder_light.png'),
+    dark: require('@assets/images/nft_placeholder_dark.png'),
+  });
   const fixedSource = useMemo(() => {
     if (!source) {
       return undefined;
@@ -120,7 +124,7 @@ export function ImageWrapper({source, style, ...props}: ImageWrapperProps) {
         <Image
           {...(props as ImageProps)}
           style={StyleSheet.flatten(style)}
-          source={fixedSource!}
+          source={placeholder!}
         />
       )}
       <BlastedImage

src/components/nft-viewer/nft-viewer-item-preview-large.tsx

@@ -16,7 +16,7 @@ export const NftViewerItemPreviewLarge = ({
   item,
   onPress,
 }: NftViewerItemPreviewExtendedProps) => {
-  const imageUri = useNftImage(item.cached_url);
+  const imageUri = useNftImage(item.metadata?.image || item?.cached_url);
   const handlePress = useCallback(() => onPress?.(item), [onPress, item]);
   const [layout, onLayout] = useLayout();
   const itemTextStyle = useMemo(

src/components/nft-viewer/nft-viewer-item-preview-medium.tsx

@@ -17,7 +17,7 @@ export const NftViewerItemPreviewMedium = ({
   onPress,
 }: NftViewerItemPreviewExtendedProps) => {
   const handlePress = useCallback(() => onPress?.(item), [onPress, item]);
-  const imageUri = useNftImage(item.cached_url);
+  const imageUri = useNftImage(item.metadata?.image || item?.cached_url);
   const [layout, onLayout] = useLayout();
 
   const containerStyle: ViewStyle = useMemo(

src/components/nft-viewer/nft-viewer-item-preview-small.tsx

@@ -16,7 +16,7 @@ export const NftViewerItemPreviewSmall = ({
   onPress,
 }: NftViewerItemPreviewExtendedProps) => {
   const handlePress = useCallback(() => onPress?.(item), [onPress, item]);
-  const imageUri = useNftImage(item.cached_url);
+  const imageUri = useNftImage(item.metadata?.image || item?.cached_url);
   const [layout, onLayout] = useLayout();
 
   const containerStyle: ViewStyle = useMemo(

src/components/total-value-info/total-value-info.tsx

@@ -82,9 +82,12 @@ export const TotalValueInfo = observer(
       [activeTab],
     );
 
-    const onTabChange = useCallback((tabName: TotalValueTabNames) => {
-      setActiveTab(tabName);
-    }, []);
+    const onTabChange = useCallback(
+      (tabName: TotalValueTabNames) => {
+        setActiveTab(tabName);
+      },
+      [addressList],
+    );
 
     const renderListHeader = () => (
       <>
@@ -120,9 +123,9 @@ export const TotalValueInfo = observer(
       </>
     );
 
-    const renderListEmptyComponent = useCallback(
-      () => (
-        <First>
+    const renderListEmptyComponent = useCallback(() => {
+      return (
+        <First key={`total-value-info-tab-content-${activeTab}`}>
           {activeTab === TotalValueTabNames.transactions && (
             <TransactionEmpty />
           )}
@@ -147,9 +150,8 @@ export const TotalValueInfo = observer(
             </>
           )}
         </First>
-      ),
-      [activeTab, tokens],
-    );
+      );
+    }, [activeTab, tokens]);
 
     return (
       <TransactionList

src/components/transaction-list/transaction-list.tsx

@@ -88,8 +88,6 @@ export const TransactionList = observer(
     onTransactionPress,
     ...sectionListProps
   }: TransactionListProps) => {
-    Logger.log('TransactionList', 'render', {addresses});
-
     /* HOOKS */
     const {transactions, isTransactionsLoading} = useTransactionList(addresses);
     const txTimestampHeadersEnabled = useRemoteConfigVar(
@@ -181,7 +179,12 @@ export const TransactionList = observer(
         return sectionListProps.ListEmptyComponent;
       }
       return renderListEmptyComponentDefault;
-    }, [hideContent, renderListEmptyComponentDefault, isTransactionsLoading]);
+    }, [
+      hideContent,
+      renderListEmptyComponentDefault,
+      isTransactionsLoading,
+      sectionListProps.ListEmptyComponent,
+    ]);
 
     const renderListFooterComponent = useCallback(
       () => (

src/components/transaction-nft-confirmation.tsx

@@ -51,7 +51,7 @@ export const TransactionNftConfirmation = observer(
     fee,
   }: TransactionConfirmationProps) => {
     const splittedTo = useMemo(() => splitAddress(to), [to]);
-    const imageUri = useNftImage(item.metadata?.image || item.cached_url);
+    const imageUri = useNftImage(item.metadata?.image || item?.cached_url);
 
     return (
       <PopupContainer style={styles.container}>

src/contexts/app.ts

@@ -11,7 +11,6 @@ import Keychain, {
   getGenericPassword,
   setGenericPassword,
 } from 'react-native-keychain';
-import SplashScreen from 'react-native-splash-screen';
 import TouchID from 'react-native-touch-id';
 
 import {DEBUG_VARS} from '@app/debug-vars';
@@ -38,7 +37,6 @@ import {Cosmos} from '@app/services/cosmos';
 import {EventTracker} from '@app/services/event-tracker';
 import {HapticEffects, vibrate} from '@app/services/haptic';
 import {RemoteConfig} from '@app/services/remote-config';
-import {sleep} from '@app/utils';
 
 import {showModal} from '../helpers';
 import {User} from '../models/user';
@@ -132,22 +130,7 @@ class App extends AsyncEventEmitter {
 
               Logger.log('isBackendAvailable', isBackendAvailable);
               if (!isBackendAvailable) {
-                SplashScreen.hide();
-                await sleep(1000);
-                return new Promise(() => {
-                  Alert.alert(
-                    'Haqq Wallet Backend Shutdown',
-                    'The backend service for Haqq Wallet is no longer maintained. Please switch to RPC mode.',
-                    [
-                      {
-                        text: 'Switch to RPC',
-                        onPress: () => {
-                          AppStore.dataFetchMode = DataFetchSource.Rpc;
-                        },
-                      },
-                    ],
-                  );
-                });
+                AppStore.dataFetchMode = DataFetchSource.Rpc;
               }
             }
           });