watchlist txs homepage

lib/api/resources.ts

@@ -375,6 +375,9 @@ export const RESOURCES = {
   homepage_txs: {
     path: '/api/v2/main-page/transactions',
   },
+  homepage_txs_watchlist: {
+    path: '/api/v2/main-page/transactions/watchlist',
+  },
   homepage_indexing_status: {
     path: '/api/v2/main-page/indexing-status',
   },
@@ -523,6 +526,7 @@ Q extends 'homepage_chart_txs' ? ChartTransactionResponse :
 Q extends 'homepage_chart_market' ? ChartMarketResponse :
 Q extends 'homepage_blocks' ? Array<Block> :
 Q extends 'homepage_txs' ? Array<Transaction> :
+Q extends 'homepage_txs_watchlist' ? Array<Transaction> :
 Q extends 'homepage_deposits' ? Array<L2DepositsItem> :
 Q extends 'homepage_indexing_status' ? IndexingStatus :
 Q extends 'stats_counters' ? Counters :

ui/home/LatestWatchlistTxs.tsx

+import { Box, Flex, Text } from '@chakra-ui/react';
+import { route } from 'nextjs-routes';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
+import LinkInternal from 'ui/shared/LinkInternal';
+
+import LatestTxsItem from './LatestTxsItem';
+import LatestTxsItemSkeleton from './LatestTxsItemSkeleton';
+
+const LatestWatchlistTxs = () => {
+  useRedirectForInvalidAuthToken();
+  const isMobile = useIsMobile();
+  const txsCount = isMobile ? 2 : 6;
+  const { data, isLoading, isError } = useApiQuery('homepage_txs_watchlist');
+
+  if (isLoading) {
+    return <>{ Array.from(Array(txsCount)).map((item, index) => <LatestTxsItemSkeleton key={ index }/>) }</>;
+  }
+
+  if (isError) {
+    return <Text mt={ 4 }>No data. Please reload page.</Text>;
+  }
+
+  if (data) {
+    const txsUrl = route({ pathname: '/txs', query: { tab: 'watchlist' } });
+    return (
+      <>
+        <Box mb={{ base: 3, lg: 4 }}>
+          { data.slice(0, txsCount).map((tx => <LatestTxsItem key={ tx.hash } tx={ tx }/>)) }
+        </Box>
+        <Flex justifyContent="center">
+          <LinkInternal fontSize="sm" href={ txsUrl }>View all watchlist transactions</LinkInternal>
+        </Flex>
+      </>
+    );
+  }
+
+  return null;
+};
+
+export default LatestWatchlistTxs;

ui/home/Transactions.tsx

@@ -2,26 +2,37 @@ import { Heading, Tab, Tabs, TabList, TabPanel, TabPanels } from '@chakra-ui/rea
 import React from 'react';
 
 import appConfig from 'configs/app/config';
+import useHasAccount from 'lib/hooks/useHasAccount';
 import LatestDeposits from 'ui/home/LatestDeposits';
 import LatestTxs from 'ui/home/LatestTxs';
+import LatestWatchlistTxs from 'ui/home/LatestWatchlistTxs';
 
 const TransactionsHome = () => {
-  if (appConfig.L2.isL2Network) {
+  const hasAccount = useHasAccount();
+  if (appConfig.L2.isL2Network || hasAccount) {
     return (
       <>
         <Heading as="h4" size="sm" mb={ 4 }>Transactions</Heading>
         <Tabs isLazy lazyBehavior="keepMounted" defaultIndex={ 0 } variant="soft-rounded">
           <TabList>
             <Tab key="txn">Latest txn</Tab>
-            <Tab key="deposits">Deposits (L1→L2 txn)</Tab>
+            { appConfig.L2.isL2Network && <Tab key="deposits">Deposits (L1→L2 txn)</Tab> }
+            { hasAccount && <Tab key="deposits">Watch list</Tab> }
           </TabList>
           <TabPanels mt={ 4 }>
             <TabPanel key="txn" p={ 0 }>
               <LatestTxs/>
             </TabPanel>
-            <TabPanel key="deposits" p={ 0 }>
-              <LatestDeposits/>
-            </TabPanel>
+            { appConfig.L2.isL2Network && (
+              <TabPanel key="deposits" p={ 0 }>
+                <LatestDeposits/>
+              </TabPanel>
+            ) }
+            { hasAccount && (
+              <TabPanel key="deposits" p={ 0 }>
+                <LatestWatchlistTxs/>
+              </TabPanel>
+            ) }
           </TabPanels>
         </Tabs>
       </>