haqq-network · iGroza · Jul 3, 2023 · Jul 3, 2023
@@ -11,18 +11,22 @@ import {Feature, isFeatureEnabled} from '@app/helpers/is-feature-enabled';
 import {I18N} from '@app/i18n';
 import {BannersWrapper} from '@app/screens/banners';
 import {WalletsWrapper} from '@app/screens/wallets';
-import {TransactionList} from '@app/types';
+import {NftCollection, TokenItem, TransactionList} from '@app/types';
 
 import {NftViewer} from './nft-viewer';
-import {nftCollections} from './nft-viewer/mock';
+import {TokenRow} from './token-row';
 import {TopTabNavigator, TopTabNavigatorVariant} from './top-tab-navigator';
 import {First, Spacer, Text} from './ui';
 
 type HomeFeedProps = {
   refreshing: boolean;
-  onWalletsRefresh: () => void;
   transactionsList: TransactionList[];
-  onPressRow: (hash: string) => void;
+  tokensList: TokenItem[];
+  nftColletionsList: NftCollection[];
+  islmPrice: number;
+  onWalletsRefresh: () => void;
+  onPressTransactionRow: (hash: string) => void;
+  onPressTokenRow: (tiker: string) => void;
 };
 
 enum TabNames {
@@ -32,11 +36,16 @@ enum TabNames {
 }
 
 const PAGE_ITEMS_COUNT = 15;
+
 export const HomeFeed = ({
   refreshing,
-  onWalletsRefresh,
   transactionsList,
-  onPressRow,
+  tokensList,
+  nftColletionsList,
+  islmPrice,
+  onWalletsRefresh,
+  onPressTokenRow,
+  onPressTransactionRow,
 }: HomeFeedProps) => {
   const [page, setPage] = useState(1);
   const transactionListData = useMemo(
@@ -49,7 +58,7 @@ export const HomeFeed = ({
       activeTab === TabNames.transactions ? !!transactionsList.length : true,
     [activeTab, transactionsList.length],
   );
-  const data = useMemo(
+  const transactionsData = useMemo(
     () => (activeTab === TabNames.transactions ? transactionListData : []),
     [activeTab, transactionListData],
   );
@@ -64,34 +73,65 @@ export const HomeFeed = ({
       <>
         <WalletsWrapper />
         <BannersWrapper />
-        {isFeatureEnabled(Feature.nft) ? (
-          <TopTabNavigator
-            contentContainerStyle={styles.tabsContentContainerStyle}
-            tabHeaderStyle={styles.tabHeaderStyle}
-            variant={TopTabNavigatorVariant.large}
-            // showSeparators
-            onTabChange={onTabChange}>
-            <TopTabNavigator.Tab
-              name={TabNames.transactions}
-              title={I18N.homeFeedTransactionTabTitle}
-              component={null}
-            />
-            <TopTabNavigator.Tab
-              name={TabNames.nft}
-              title={I18N.homeFeedNftTabTitle}
-              component={null}
-            />
-          </TopTabNavigator>
-        ) : (
+        <First>
+          {isFeatureEnabled(Feature.tokens) && (
+            <>
+              <Spacer height={12} />
+              <TopTabNavigator
+                contentContainerStyle={styles.tabsContentContainerStyle}
+                tabHeaderStyle={styles.tabHeaderStyle}
+                variant={TopTabNavigatorVariant.large}
+                showSeparators
+                onTabChange={onTabChange}>
+                <TopTabNavigator.Tab
+                  name={TabNames.tokens}
+                  title={I18N.homeFeedTokensTabTitle}
+                  component={<Spacer height={12} />}
+                />
+                <TopTabNavigator.Tab
+                  name={TabNames.nft}
+                  title={I18N.homeFeedNftTabTitle}
+                  component={null}
+                />
+                <TopTabNavigator.Tab
+                  name={TabNames.transactions}
+                  title={I18N.homeFeedTransactionTabTitle}
+                  component={null}
+                />
+              </TopTabNavigator>
+            </>
+          )}
+          {isFeatureEnabled(Feature.nft) && (
+            <>
+              <Spacer height={12} />
+              <TopTabNavigator
+                contentContainerStyle={styles.tabsContentContainerStyle}
+                tabHeaderStyle={styles.tabHeaderStyle}
+                variant={TopTabNavigatorVariant.large}
+                showSeparators={false}
+                onTabChange={onTabChange}>
+                <TopTabNavigator.Tab
+                  name={TabNames.transactions}
+                  title={I18N.homeFeedTransactionTabTitle}
+                  component={null}
+                />
+                <TopTabNavigator.Tab
+                  name={TabNames.nft}
+                  title={I18N.homeFeedNftTabTitle}
+                  component={null}
+                />
+              </TopTabNavigator>
+            </>
+          )}
           <Text t6 i18n={I18N.transactions} style={styles.t6} />
-        )}
+        </First>
       </>
     );
   }, [onTabChange]);
 
-  const renderItem: ListRenderItem<TransactionList> = useCallback(
-    ({item}) => <TransactionRow item={item} onPress={onPressRow} />,
-    [onPressRow],
+  const transactionRenderItem: ListRenderItem<TransactionList> = useCallback(
+    ({item}) => <TransactionRow item={item} onPress={onPressTransactionRow} />,
+    [onPressTransactionRow],
   );
 
   const renderListEmptyComponent = useCallback(
@@ -102,18 +142,49 @@ export const HomeFeed = ({
           <>
             <Spacer height={24} />
             <NftViewer
-              data={nftCollections}
+              data={nftColletionsList}
               scrollEnabled={false}
               style={styles.nftViewerContainer}
             />
           </>
         )}
       </First>
     ),
-    [activeTab],
+    [activeTab, nftColletionsList],
   );
 
-  const keyExtractor = useCallback((item: TransactionList) => item.hash, []);
+  const transactionKeyExtractor = useCallback(
+    (item: TransactionList) => item.hash,
+    [],
+  );
+
+  const tokensKeyExtractor = useCallback((item: TokenItem) => item.ticker, []);
+  const tokensRenderItem: ListRenderItem<TokenItem> = useCallback(
+    ({item}) => (
+      <TokenRow islmPrice={islmPrice} item={item} onPress={onPressTokenRow} />
+    ),
+    [islmPrice, onPressTokenRow],
+  );
+
+  if (activeTab === TabNames.tokens) {
+    return (
+      <FlatList
+        key={app.providerId}
+        style={styles.container}
+        refreshing={refreshing}
+        onRefresh={onWalletsRefresh}
+        contentContainerStyle={styles.grow}
+        scrollEnabled={scrollEnabled}
+        ListHeaderComponent={renderListHeader}
+        ListEmptyComponent={renderListEmptyComponent}
+        data={tokensList}
+        renderItem={tokensRenderItem}
+        keyExtractor={tokensKeyExtractor}
+        onEndReached={onEndReached}
+        onEndReachedThreshold={0.2}
+      />
+    );
+  }
 
   return (
     <FlatList
@@ -125,9 +196,9 @@ export const HomeFeed = ({
       scrollEnabled={scrollEnabled}
       ListHeaderComponent={renderListHeader}
       ListEmptyComponent={renderListEmptyComponent}
-      data={data}
-      renderItem={renderItem}
-      keyExtractor={keyExtractor}
+      data={transactionsData}
+      renderItem={transactionRenderItem}
+      keyExtractor={transactionKeyExtractor}
       onEndReached={onEndReached}
       onEndReachedThreshold={0.2}
     />

@@ -2,6 +2,7 @@ import React, {useCallback, useMemo, useState} from 'react';
 
 import {useActionSheet} from '@expo/react-native-action-sheet';
 import {
+  Image,
   SectionList,
   SectionListData,
   SectionListRenderItem,
@@ -163,6 +164,19 @@ export const NftViewer = ({
     [],
   );
 
+  if (!data?.length) {
+    return (
+      <View style={styles.empty}>
+        <Image
+          style={styles.emptyImage}
+          source={require('@assets/images/none-nft.png')}
+        />
+        <Spacer height={12} />
+        <Text t13 color={Color.textSecond1} i18n={I18N.nftViewerNoNFTs} />
+      </View>
+    );
+  }
+
   return (
     <View style={style}>
       <View style={styles.row}>
@@ -204,4 +218,14 @@ const styles = createTheme({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  empty: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyImage: {
+    height: 80,
+    width: 80,
+    tintColor: Color.graphicSecond3,
+  },
 });
@@ -0,0 +1,75 @@
+import React, {useCallback, useMemo} from 'react';
+
+import {Image, TouchableOpacity, View} from 'react-native';
+
+import {Color} from '@app/colors';
+import {cleanNumber, createTheme} from '@app/helpers';
+import {TokenItem} from '@app/types';
+
+import {Spacer, Text} from './ui';
+
+export interface TokenRowProps {
+  item: TokenItem;
+  islmPrice: number;
+  onPress?(tiker: string): void;
+}
+
+export function TokenRow({item, islmPrice, onPress}: TokenRowProps) {
+  const totalUsd = useMemo(() => item.priceUsd * item.count, [item]);
+  const totalUsdFormatted = useMemo(() => cleanNumber(totalUsd), [totalUsd]);
+
+  const islmCount = useMemo(
+    () => cleanNumber(totalUsd / islmPrice),
+    [islmPrice, totalUsd],
+  );
+
+  const handlerPress = useCallback(
+    () => onPress?.(item?.ticker),
+    [onPress, item],
+  );
+  return (
+    <TouchableOpacity style={styles.container} onPress={handlerPress}>
+      <View style={styles.row}>
+        <Image style={styles.icon} source={{uri: item.icon}} />
+        <Spacer width={12} />
+        <View style={styles.textContainer}>
+          <View style={styles.row}>
+            <Text t11>{item.name}</Text>
+            <Spacer />
+            <Text t11>{islmCount} ISLM</Text>
+          </View>
+          <View style={styles.row}>
+            <Text t14 color={Color.textBase2}>
+              {item.ticker}
+            </Text>
+            <Spacer />
+            <Text t14 color={Color.textBase2}>
+              ${totalUsdFormatted}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = createTheme({
+  container: {
+    marginHorizontal: 20,
+    marginVertical: 8,
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  icon: {
+    width: 42,
+    height: 42,
+    borderRadius: 12,
+    backgroundColor: Color.graphicBase2,
+  },
+  textContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});
@@ -2,7 +2,11 @@ import React from 'react';
 
 import {View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import Animated, {useAnimatedStyle} from 'react-native-reanimated';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 import {useTiming} from 'react-native-redash';
 
 import {Color} from '@app/colors';
@@ -59,7 +63,11 @@ export const TopTabNavigatorLarge = ({
           const title = isI18N(tab.props.title)
             ? getText(tab.props.title)
             : tab.props.title;
-          const showSeparator = showSeparators && index !== tabList.length - 1;
+          const showSeparator =
+            showSeparators &&
+            index !== tabList.length - 1 &&
+            activeTabIndex !== index &&
+            activeTabIndex - 1 !== index;
 
           return (
             <React.Fragment key={`${tab.props.title}_${index}`}>
@@ -74,7 +82,13 @@ export const TopTabNavigatorLarge = ({
                   {title}
                 </Text>
               </TouchableOpacity>
-              {showSeparator && <View style={styles.tabSeparator} />}
+              {showSeparator && (
+                <Animated.View
+                  entering={FadeIn}
+                  exiting={FadeOut}
+                  style={styles.tabSeparator}
+                />
+              )}
             </React.Fragment>
           );
         })}
@@ -95,8 +109,10 @@ const styles = createTheme({
     alignSelf: 'center',
     backgroundColor: Color.graphicSecond2,
     transform: [{translateX: -0.5}],
+    zIndex: 1,
   },
   activeTabIndicator: {
+    zIndex: 2,
     backgroundColor: Color.bg1,
     position: 'absolute',
     borderRadius: 12,
@@ -121,6 +137,7 @@ const styles = createTheme({
     backgroundColor: Color.bg3,
   },
   tab: {
+    zIndex: 2,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',