Refactor after review

src/components/homePage/HomePageLayout.tsx

@@ -20,7 +20,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => {
   const { query: queryParams, pathname, replace } = useRouter()
   const isMulti = useIsMulti()
 
-  const [activeTab, setActiveTab] = useState<HomePageTabKeys>(
+  const [ activeTab, setActiveTab ] = useState<HomePageTabKeys>(
     (queryParams?.tab as HomePageTabKeys) || 'portfolio'
   )
   const sendEvent = useSendEvent()
@@ -29,7 +29,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => {
     if (isMulti && activeTab === 'history') {
       setActiveTab('portfolio')
     }
-  }, [isMulti, activeTab])
+  }, [ isMulti, activeTab ])
 
   const tabs = useMemo(() => {
     const txHistoryTab = isMulti
@@ -53,7 +53,7 @@ const HomePageLayout = ({ addresses }: OverviewSectionProps) => {
       },
       txHistoryTab,
     ]
-  }, [isMulti, addresses.join(',')])
+  }, [ isMulti, addresses.join(',') ])
 
   const onTabChanged = (tab: string) => {
     setActiveTab(tab as HomePageTabKeys)

src/components/txHistory/filter/ListFilter.tsx

@@ -1,6 +1,6 @@
 import SelectbleDropdown, {
   DropdownActionKind,
-} from '@/components/utils/Dropdowns/SelectbleDropdown'
+} from '@/components/utils/Dropdowns/SelectableDropdown'
 import { MenuItem } from '@/components/utils/Dropdowns/types'
 import styles from '../Index.module.sass'
 import { LabelWithIcon } from '@/components/table/balancesTable/utils'

src/components/txHistory/index.tsx

@@ -15,9 +15,9 @@ import ListFilter from './filter/ListFilter'
 import EventsIcon from '@/assets/icons/events.svg'
 import {
   eventsVariantsOpt,
-  networksVariantsWithIconOpt,
+  // networksVariantsWithIconOpt,
 } from './filter/filterItems'
-import { PiShareNetworkLight } from 'react-icons/pi'
+// import { PiShareNetworkLight } from 'react-icons/pi'
 
 const itemsByTxKind: Record<string, any> = {
   TRANSFER_FROM: TransferRow,
@@ -56,8 +56,10 @@ type TxHistoryLayoutProps = {
   addresses: string[]
 }
 
+const supportedNetowrks = [ 'subsocial' ]
+
 const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => {
-  const [ networks, setNetworks ] = useState<string[]>([ 'all' ])
+  // const [ networks, setNetworks ] = useState<string[]>([ 'all' ])
   const [ events, setEvents ] = useState<string[]>([ 'all' ])
   const address = addresses[0]
   const [ refresh, setRefresh ] = useState(false)
@@ -82,7 +84,7 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => {
     )
   }
 
-  const dataLoading = isEmptyArray(initialData.txs) && !initialData.actualData
+  const dataLoading = isEmptyArray(initialData.txs)
 
   const List = useCallback(() => {
     return (
@@ -94,15 +96,15 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => {
               address,
               page,
               size,
-              networks: networks.filter((x) => x !== 'all'),
+              networks: supportedNetowrks.filter((x) => x !== 'all'),
               events: events.filter((x) => x !== 'all'),
             })
           }
           dataLoading={dataLoading}
           dataLoadingClassName={styles.InfiniteListLoading}
           noDataDesc='No transactions yet'
           dataSource={
-            networks.includes('all') && events.includes('all')
+            supportedNetowrks.includes('all') && events.includes('all')
               ? initialData.txs
               : undefined
           }
@@ -119,7 +121,7 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => {
     dataLoading,
     address,
     JSON.stringify(initialData.txs),
-    networks.join(','),
+    supportedNetowrks.join(','),
     events.join(','),
   ])
 
@@ -128,13 +130,13 @@ const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => {
       <div className={styles.TxHistoryActionBlock}>
         <div className={styles.TxHistoryButtons}>
           <div className={styles.LeftPart}>
-            <ListFilter
+            {/* <ListFilter
               menus={networksVariantsWithIconOpt}
               filters={networks}
               setFilters={setNetworks}
               label={'Networks'}
               labelImage={<PiShareNetworkLight />}
-            />
+            /> */}
             <ListFilter
               menus={eventsVariantsOpt}
               filters={events}

src/components/txHistory/useGetTxHistory.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { getTxHistoryQueue } from '../../api/txHistory'
 import { Transaction } from './types'
 
@@ -20,7 +20,6 @@ const useGetInitialTxHistoryData = ({
   refresh,
   setRefresh,
 }: GetIniTitalTxHistoryDataProps) => {
-  let intervalRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const [ initialData, setInitialData ] =
     useState<InitialData>(defaultInitialData)
   const [ lastUpdateDate, setLastUpdateDate ] = useState<Date | undefined>(
@@ -35,17 +34,17 @@ const useGetInitialTxHistoryData = ({
   useEffect(() => {
     if (!address || !refresh) return
 
-    intervalRef.current = setInterval(async () => {
+    const interval = setInterval(async () => {
       const history: InitialData = await getTxHistoryQueue({
         address,
         offset: 0,
         pageSize: 30,
       })
 
       setInitialData(history)
+
       if (history?.actualData) {
-        clearInterval(intervalRef.current)
-        intervalRef.current = undefined
+        clearInterval(interval)
         setRefresh(false)
         setLastUpdateDate(new Date())
 
@@ -54,8 +53,7 @@ const useGetInitialTxHistoryData = ({
     }, 2000)
 
     return () => {
-      clearInterval(intervalRef.current)
-      intervalRef.current = undefined
+      clearInterval(interval)
     }
   }, [ address, refresh ])
 

src/components/utils/Dropdowns/Index.module.sass

@@ -29,7 +29,7 @@
     background: none !important
 
 
-.SelectbleMenuItem
+.SelectableMenuItem
   display: flex
   align-items: center
   justify-content: space-between

src/components/utils/Dropdowns/SelectbleDropdown.tsx → src/components/utils/Dropdowns/SelectableDropdown.tsx

@@ -7,12 +7,12 @@ import { IoCheckmarkSharp } from 'react-icons/io5'
 
 export type DropdownActionKind = 'select' | 'deselect'
 
-type SelectbleMenuItem = MenuItem & {
+type SelectableMenuItem = MenuItem & {
   className?: string
 }
 
 type MenuItemsProps = {
-  items: SelectbleMenuItem[]
+  items: SelectableMenuItem[]
   className?: string
   onChange?: (keys: string[], kind: DropdownActionKind) => void
   defaultValue: string
@@ -40,7 +40,7 @@ const MenuItems = ({
       return (
         <Menu.Item
           key={key}
-          className={clsx(styles.SelectbleMenuItem, className)}
+          className={clsx(styles.SelectableMenuItem, className)}
         >
           {label} {isSelected && <IoCheckmarkSharp />}
         </Menu.Item>