txs watchlist

lib/api/resources.ts

@@ -39,7 +39,7 @@ import type {
 } from 'types/api/token';
 import type { TokensResponse, TokensFilters, TokenInstanceTransferResponse } from 'types/api/tokens';
 import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
-import type { TransactionsResponseValidated, TransactionsResponsePending, Transaction } from 'types/api/transaction';
+import type { TransactionsResponseValidated, TransactionsResponsePending, Transaction, TransactionsResponseWatchlist } from 'types/api/transaction';
 import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { VisualizedContract } from 'types/api/visualization';
@@ -145,6 +145,11 @@ export const RESOURCES = {
     paginationFields: [ 'filter' as const, 'hash' as const, 'inserted_at' as const ],
     filterFields: [ 'filter' as const, 'type' as const, 'method' as const ],
   },
+  txs_watchlist: {
+    path: '/api/v2/transactions/watchlist',
+    paginationFields: [ 'filter' as const, 'hash' as const, 'inserted_at' as const ],
+    filterFields: [ ],
+  },
   tx: {
     path: '/api/v2/transactions/:hash',
     pathParams: [ 'hash' as const ],
@@ -490,7 +495,7 @@ export interface ResourceError<T = unknown> {
 export type ResourceErrorAccount<T> = ResourceError<{ errors: T }>
 
 export type PaginatedResources = 'blocks' | 'block_txs' |
-'txs_validated' | 'txs_pending' |
+'txs_validated' | 'txs_pending' | 'txs_watchlist' |
 'tx_internal_txs' | 'tx_logs' | 'tx_token_transfers' |
 'addresses' |
 'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
@@ -529,6 +534,7 @@ Q extends 'block_txs' ? BlockTransactionsResponse :
 Q extends 'block_withdrawals' ? BlockWithdrawalsResponse :
 Q extends 'txs_validated' ? TransactionsResponseValidated :
 Q extends 'txs_pending' ? TransactionsResponsePending :
+Q extends 'txs_watchlist' ? TransactionsResponseWatchlist :
 Q extends 'tx' ? Transaction :
 Q extends 'tx_internal_txs' ? InternalTransactionsResponse :
 Q extends 'tx_logs' ? LogsResponseTx :

lib/hooks/useHasAccount.ts

+import appConfig from 'configs/app/config';
+import { useAppContext } from 'lib/appContext';
+import * as cookies from 'lib/cookies';
+
+export default function useHasAccount() {
+  const appProps = useAppContext();
+  const cookiesString = appProps.cookies;
+  const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, cookiesString));
+  return hasAuth && appConfig.isAccountSupported;
+}

middleware.ts

@@ -17,7 +17,9 @@ export function middleware(req: NextRequest) {
   }
 
   // we don't have any info from router here, so just do straight forward sub-string search (sorry)
-  const isAccountRoute = req.nextUrl.pathname.includes('/account/');
+  const isAccountRoute =
+    req.nextUrl.pathname.includes('/account/') ||
+    (req.nextUrl.pathname === '/txs' && req.nextUrl.searchParams.get('tab') === 'watchlist');
   const isProfileRoute = req.nextUrl.pathname.includes('/auth/profile');
   const apiToken = req.cookies.get(NAMES.API_TOKEN);
 

types/api/transaction.ts

@@ -70,6 +70,15 @@ export interface TransactionsResponsePending {
   } | null;
 }
 
+export interface TransactionsResponseWatchlist {
+  items: Array<Transaction>;
+  next_page_params: {
+    inserted_at: string;
+    hash: string;
+    filter: 'pending';
+  } | null;
+}
+
 export type TransactionType = 'token_transfer' | 'contract_creation' | 'contract_call' | 'token_creation' | 'coin_transfer'
 
 export type TxsResponse = TransactionsResponseValidated | TransactionsResponsePending | BlockTransactionsResponse;

ui/pages/Transactions.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import appConfig from 'configs/app/config';
+import useHasAccount from 'lib/hooks/useHasAccount';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
@@ -13,6 +14,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 import TxsContent from 'ui/txs/TxsContent';
 import TxsTabSlot from 'ui/txs/TxsTabSlot';
+import TxsWatchlist from 'ui/txs/TxsWatchlist';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
@@ -24,27 +26,49 @@ const Transactions = () => {
   const verifiedTitle = appConfig.network.verificationType === 'validation' ? 'Validated' : 'Mined';
   const router = useRouter();
   const isMobile = useIsMobile();
-  const filter = router.query.tab === 'pending' ? 'pending' : 'validated';
   const txsQuery = useQueryWithPages({
-    resourceName: filter === 'validated' ? 'txs_validated' : 'txs_pending',
-    filters: { filter },
+    resourceName: router.query.tab === 'pending' ? 'txs_pending' : 'txs_validated',
+    filters: { filter: router.query.tab === 'pending' ? 'pending' : 'validated' },
+    options: {
+      enabled: !router.query.tab || router.query.tab === 'validated' || router.query.tab === 'pending',
+    },
+  });
+
+  const txsWatchlistQuery = useQueryWithPages({
+    resourceName: 'txs_watchlist',
+    options: {
+      enabled: router.query.tab === 'watchlist',
+    },
   });
 
   const { num, socketAlert } = useNewTxsSocket();
 
-  const isFirstPage = txsQuery.pagination.page === 1;
+  const hasAccount = useHasAccount();
 
   const tabs: Array<RoutedTab> = [
     {
       id: 'validated',
       title: verifiedTitle,
-      component: <TxsContent query={ txsQuery } showSocketInfo={ isFirstPage } socketInfoNum={ num } socketInfoAlert={ socketAlert }/> },
+      component: <TxsContent query={ txsQuery } showSocketInfo={ txsQuery.pagination.page === 1 } socketInfoNum={ num } socketInfoAlert={ socketAlert }/> },
     {
       id: 'pending',
       title: 'Pending',
-      component: <TxsContent query={ txsQuery } showBlockInfo={ false } showSocketInfo={ isFirstPage } socketInfoNum={ num } socketInfoAlert={ socketAlert }/>,
+      component: (
+        <TxsContent
+          query={ txsQuery }
+          showBlockInfo={ false }
+          showSocketInfo={ txsQuery.pagination.page === 1 }
+          socketInfoNum={ num }
+          socketInfoAlert={ socketAlert }
+        />
+      ),
     },
-  ];
+    hasAccount ? {
+      id: 'watchlist',
+      title: 'Watchlist',
+      component: <TxsWatchlist query={ txsWatchlistQuery }/>,
+    } : undefined,
+  ].filter(Boolean);
 
   return (
     <Page>

ui/snippets/navigation/NavigationDesktop.tsx

@@ -6,6 +6,7 @@ import chevronIcon from 'icons/arrows/east-mini.svg';
 import testnetIcon from 'icons/testnet.svg';
 import { useAppContext } from 'lib/appContext';
 import * as cookies from 'lib/cookies';
+import useHasAccount from 'lib/hooks/useHasAccount';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
@@ -28,11 +29,10 @@ const NavigationDesktop = () => {
     isNavBarCollapsed = false;
   }
 
-  const hasAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN, cookiesString));
-
   const { mainNavItems, accountNavItems } = useNavItems();
 
-  const hasAccount = hasAuth && appConfig.isAccountSupported;
+  const hasAccount = useHasAccount();
+
   const [ isCollapsed, setCollapsedState ] = React.useState<boolean | undefined>(isNavBarCollapsed);
 
   const handleTogglerClick = React.useCallback(() => {

ui/snippets/navigation/NavigationMobile.tsx

@@ -2,9 +2,8 @@ import { Box, Flex, Text, Icon, VStack, useColorModeValue } from '@chakra-ui/rea
 import { animate, motion, useMotionValue } from 'framer-motion';
 import React, { useCallback } from 'react';
 
-import appConfig from 'configs/app/config';
 import chevronIcon from 'icons/arrows/east-mini.svg';
-import * as cookies from 'lib/cookies';
+import useHasAccount from 'lib/hooks/useHasAccount';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import NavFooter from 'ui/snippets/navigation/NavFooter';
 import NavLink from 'ui/snippets/navigation/NavLink';
@@ -30,8 +29,7 @@ const NavigationMobile = () => {
     animate(subX, 250, { ease: 'easeInOut', onComplete: () => setOpenedGroupIndex(-1) });
   }, [ mainX, subX ]);
 
-  const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
-  const hasAccount = appConfig.isAccountSupported && isAuth;
+  const hasAccount = useHasAccount();
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
 

ui/txs/TxsWatchlist.tsx

+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { TxsResponse } from 'types/api/transaction';
+
+import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import TxsContent from 'ui/txs/TxsContent';
+
+type QueryResult = UseQueryResult<TxsResponse> & {
+  pagination: PaginationProps;
+  isPaginationVisible: boolean;
+};
+
+type Props = {
+  query: QueryResult;
+}
+
+const TxsWatchlist = ({ query }: Props) => {
+  useRedirectForInvalidAuthToken();
+  return <TxsContent query={ query } showSocketInfo={ false }/>;
+};
+
+export default TxsWatchlist;