test1

nextjs/getServerSideProps.ts

@@ -12,6 +12,7 @@ export type Props = {
   number: string;
   q: string;
   name: string;
+  tab: string;
 }
 
 export const base: GetServerSideProps<Props> = async({ req, query }) => {
@@ -25,6 +26,7 @@ export const base: GetServerSideProps<Props> = async({ req, query }) => {
       number: query.number?.toString() || '',
       q: query.q?.toString() || '',
       name: query.name?.toString() || '',
+      tab: query.tab?.toString() || '',
     },
   };
 };

pages/address/[hash]/index.tsx

@@ -1,13 +1,21 @@
 import type { NextPage } from 'next';
 import dynamic from 'next/dynamic';
+import useAddressTxsQuery from 'queries/address/addresTxs';
 import React from 'react';
 
 import type { Props } from 'nextjs/getServerSideProps';
 import PageNextJs from 'nextjs/PageNextJs';
 
+import useAddressQuery from 'ui/address/utils/useAddressQuery';
+
 const Address = dynamic(() => import('ui/pages/Address'), { ssr: false });
 
 const Page: NextPage<Props> = (props: Props) => {
+  useAddressQuery({ hash: props.hash });
+
+  // add filter
+  useAddressTxsQuery({ hash: props.hash, enabled: !props.tab || props.tab === 'txs' });
+
   return (
     <PageNextJs pathname="/address/[hash]" query={ props }>
       <Address/>

queries/address/addresTxs.tsx

@@ -0,0 +1,37 @@
+import type React from 'react';
+
+import type { AddressFromToFilter } from 'types/api/address';
+import type { TransactionsSortingField, TransactionsSortingValue, TransactionsSorting } from 'types/api/transaction';
+
+import { TX } from 'stubs/tx';
+import { generateListStub } from 'stubs/utils';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
+
+type Props = {
+  hash: string;
+  sort?: TransactionsSortingValue;
+  filter?: AddressFromToFilter;
+  scrollRef?: React.RefObject<HTMLDivElement>;
+  enabled: boolean;
+}
+
+export default function useAddressTxsQuery({ hash, filter, sort, scrollRef, enabled }: Props) {
+
+  return useQueryWithPages({
+    resourceName: 'address_txs',
+    pathParams: { hash },
+    filters: { filter },
+    sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
+    scrollRef,
+    options: {
+      enabled,
+      refetchOnMount: false,
+      placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
+        block_number: 9005713,
+        index: 5,
+        items_count: 50,
+      } }),
+    },
+  });
+}

ui/address/AddressTxs.tsx

@@ -1,24 +1,21 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
+import useAddressTxsQuery from 'queries/address/addresTxs';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { AddressFromToFilter, AddressTransactionsResponse } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
-import type { Transaction, TransactionsSortingField, TransactionsSortingValue, TransactionsSorting } from 'types/api/transaction';
+import type { Transaction, TransactionsSortingValue } from 'types/api/transaction';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
-import { TX } from 'stubs/tx';
-import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/pagination/Pagination';
-import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
-import getSortParamsFromValue from 'ui/shared/sort/getSortParamsFromValue';
 import getSortValueFromQuery from 'ui/shared/sort/getSortValueFromQuery';
 import TxsWithAPISorting from 'ui/txs/TxsWithAPISorting';
 import { SORT_OPTIONS } from 'ui/txs/useTxsSort';
@@ -63,20 +60,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
 
   const [ filterValue, setFilterValue ] = React.useState<AddressFromToFilter>(getFilterValue(router.query.filter));
 
-  const addressTxsQuery = useQueryWithPages({
-    resourceName: 'address_txs',
-    pathParams: { hash: currentAddress },
-    filters: { filter: filterValue },
-    sorting: getSortParamsFromValue<TransactionsSortingValue, TransactionsSortingField, TransactionsSorting['order']>(sort),
-    scrollRef,
-    options: {
-      placeholderData: generateListStub<'address_txs'>(TX, 50, { next_page_params: {
-        block_number: 9005713,
-        index: 5,
-        items_count: 50,
-      } }),
-    },
-  });
+  const addressTxsQuery = useAddressTxsQuery({ hash: currentAddress, filter: filterValue, sort, scrollRef, enabled: true });
 
   const handleFilterChange = React.useCallback((val: string | Array<string>) => {