{withName && accountName}
diff --git a/src/components/topMenu/TopMeny.module.sass b/src/components/topMenu/TopMeny.module.sass
index abb84561..8ff378a3 100644
--- a/src/components/topMenu/TopMeny.module.sass
+++ b/src/components/topMenu/TopMeny.module.sass
@@ -6,7 +6,7 @@
border-style: solid
border-width: 0 1px 1px 1px
position: fixed !important
- z-index: 1
+ z-index: 11
max-height: 100%
overflow-y: auto
overflow-x: hidden
diff --git a/src/components/txHistory/CustomDataList.tsx b/src/components/txHistory/CustomDataList.tsx
new file mode 100644
index 00000000..0539bdaa
--- /dev/null
+++ b/src/components/txHistory/CustomDataList.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import NoData from 'src/components/utils/EmptyList'
+import { DataListProps } from '../list'
+import { groupBy } from 'lodash'
+import { Transaction } from './types'
+import styles from './Index.module.sass'
+import utc from 'dayjs/plugin/utc'
+import dayjs from 'dayjs'
+
+dayjs.extend(utc)
+
+function CustomDataList (props: DataListProps
) {
+ const {
+ dataSource,
+ renderItem,
+ getKey,
+ noDataDesc = null,
+ noDataExt,
+ customNoData,
+ } = props
+
+ const total = dataSource.length
+
+ const hasData = total > 0
+
+ const groupedData = groupBy(dataSource, (x) =>
+ dayjs(x.timestamp).format('MMMM D, YYYY')
+ )
+
+ if (!hasData) {
+ return (
+ <>
+ {customNoData || {noDataExt}}
+
+ )
+ }
+
+ return (
+
+ {Object.entries(groupedData).map(([ date, item ], i) => {
+ return (
+
+
{date}
+
+ {item.map((x, i) => (
+
{renderItem(x, i, item.length)}
+ ))}
+
+
+ )
+ })}
+
+ }
+ />
+
+ )
+}
+
+export default ListFilter
diff --git a/src/components/txHistory/filter/filterItems.tsx b/src/components/txHistory/filter/filterItems.tsx
new file mode 100644
index 00000000..99c4a8c5
--- /dev/null
+++ b/src/components/txHistory/filter/filterItems.tsx
@@ -0,0 +1,115 @@
+import { PiShareNetworkLight } from 'react-icons/pi'
+import { LabelWithIcon } from '../../table/balancesTable/utils'
+import { getIconUrl } from '../../utils'
+import styles from '../Index.module.sass'
+import EventsIcon from '@/assets/icons/events.svg'
+import clsx from 'clsx'
+import SentIcon from '@/assets/icons/sent-big.svg'
+import ReceivedIcon from '@/assets/icons/received-big.svg'
+
+export const networksVariantsWithIconOpt = [
+ {
+ label: (
+
}
+ />
+ ),
+ key: 'all',
+ },
+ {
+ label: (
+
+ ),
+ key: 'polkadot',
+ },
+ {
+ label: (
+
+ ),
+ key: 'kusama',
+ },
+ {
+ label: (
+
+ ),
+ key: 'astar',
+ },
+ {
+ label: (
+
+ ),
+ key: 'moonbeam',
+ },
+ {
+ label: (
+
+ ),
+ key: 'moonriver',
+ },
+ {
+ label: (
+
+ ),
+ key: 'subsocial',
+ },
+]
+
+export const eventsVariantsOpt = [
+ {
+ label: (
+
}
+ />
+ ),
+ key: 'all',
+ className: styles.AllEvents,
+ },
+ {
+ label: (
+
}
+ />
+ ),
+ key: 'transfer_from',
+ },
+ {
+ label: (
+
}
+ />
+ ),
+ key: 'transfer_to',
+ },
+]
\ No newline at end of file
diff --git a/src/components/txHistory/index.tsx b/src/components/txHistory/index.tsx
new file mode 100644
index 00000000..530927fd
--- /dev/null
+++ b/src/components/txHistory/index.tsx
@@ -0,0 +1,230 @@
+import { DataListProps, InfiniteListByData } from '../list'
+import styles from './Index.module.sass'
+import { getTxHistory } from '@/api/txHistory'
+import { TransferRow } from './transactions/Transfer'
+import { Transaction } from './types'
+import CustomDataList from './CustomDataList'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import useGetInitialTxHistoryData from './useGetTxHistory'
+import { Button, Tooltip } from 'antd'
+import { SubDate, isEmptyArray } from '@subsocial/utils'
+import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
+import { MutedDiv } from '../utils/MutedText'
+import { useResponsiveSize } from '../responsive'
+import ListFilter from './filter/ListFilter'
+import EventsIcon from '@/assets/icons/events.svg'
+import {
+ eventsVariantsOpt,
+ // networksVariantsWithIconOpt,
+} from './filter/filterItems'
+// import { PiShareNetworkLight } from 'react-icons/pi'
+import { toGenericAccountId } from '../../rtk/app/util'
+import { useFetchIdentities } from '@/rtk/features/identities/identitiesHooks'
+
+const itemsByTxKind: Record
= {
+ TRANSFER_FROM: TransferRow,
+ TRANSFER_TO: TransferRow,
+}
+
+type LoadMoreProps = {
+ address: string
+ page: number
+ size: number
+ networks: string[]
+ events: string[]
+}
+
+const loadMore = async ({
+ address,
+ page,
+ size,
+ networks,
+ events,
+}: LoadMoreProps) => {
+ const offset = (page - 1) * size
+
+ const history = await getTxHistory({
+ address,
+ pageSize: size,
+ offset,
+ networks,
+ events,
+ })
+
+ return history
+}
+
+type TxHistoryLayoutProps = {
+ addresses: string[]
+}
+
+const supportedNetowrks = [ 'subsocial' ]
+
+const TxHistoryLayout = ({ addresses }: TxHistoryLayoutProps) => {
+ // const [ networks, setNetworks ] = useState([ 'all' ])
+ const [ events, setEvents ] = useState([ 'all' ])
+ const address = addresses[0]
+ const [ refresh, setRefresh ] = useState(false)
+ const { isMobile } = useResponsiveSize()
+ const historySection = useRef(null)
+
+ const { initialData, lastUpdateDate } = useGetInitialTxHistoryData({
+ address,
+ refresh,
+ setRefresh,
+ })
+
+ const renderItem = (item: Transaction, i: number, dataLength?: number) => {
+ const { txKind } = item
+
+ const Component = itemsByTxKind[txKind]
+
+ return (
+
+ )
+ }
+
+ const dataLoading = isEmptyArray(initialData.txs) && !initialData.actualData
+
+ const List = useCallback(() => {
+ return (
+
+
+ loadMore({
+ address,
+ page,
+ size,
+ networks: supportedNetowrks.filter((x) => x !== 'all'),
+ events: events.filter((x) => x !== 'all'),
+ })
+ }
+ dataLoading={dataLoading}
+ dataLoadingClassName={styles.InfiniteListLoading}
+ noDataDesc='No transactions yet'
+ dataSource={
+ supportedNetowrks.includes('all') && events.includes('all')
+ ? initialData.txs
+ : undefined
+ }
+ getKey={(data) => data.id}
+ renderItem={renderItem}
+ >
+ {(dataListProps) => {
+ return
+ }}
+
+
+ )
+ }, [
+ dataLoading,
+ address,
+ JSON.stringify(initialData.txs),
+ supportedNetowrks.join(','),
+ events.join(','),
+ ])
+
+ return (
+
+
+
+
+ {/* }
+ /> */}
+ }
+ scrollPosition={(historySection.current as any)?.offsetTop - 180}
+ />
+
+
+ {!isMobile && (
+
+ )}
+
+
+
+ {isMobile && (
+
+ Last update:
+
+
+ )}
+
+
+
+
+
+ {refresh || !lastUpdateDate ? 'updating...' : lastUpdate}
+
+
+
+ )
+}
+
+export default TxHistoryLayout
diff --git a/src/components/txHistory/transactions/MobileTransferModal.tsx b/src/components/txHistory/transactions/MobileTransferModal.tsx
new file mode 100644
index 00000000..673edc1f
--- /dev/null
+++ b/src/components/txHistory/transactions/MobileTransferModal.tsx
@@ -0,0 +1,158 @@
+import FloatingModal from '@/components/utils/FloatingModal'
+import styles from './Transactions.module.sass'
+import dayjs from 'dayjs'
+import { Button } from 'antd'
+import { RiArrowRightUpLine } from 'react-icons/ri'
+import { useCurrentAccount } from '@/components/providers/MyExtensionAccountsContext'
+import { AccountPreview, AvatarOrSkeleton } from '@/components/table/utils'
+import { CopyAddress } from '../../homePage/address-views/utils/index'
+import { toShortAddress } from '../../utils/index'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+type TransferInfo = {
+ icon: string
+ address: string
+ balance: React.ReactNode
+ totalBalance: React.ReactNode
+ txKind: string
+ timestamp: string
+ extrinsicHash: string
+ networkName: string
+ subscanUrl: string
+}
+
+type MobileTransferModalProps = {
+ open: boolean
+ closeModal: () => void
+ transferInfo: TransferInfo
+}
+
+const MobileTransferModal = ({
+ open,
+ closeModal,
+ transferInfo,
+}: MobileTransferModalProps) => {
+ const {
+ icon,
+ address: senderOrTarget,
+ balance,
+ totalBalance,
+ txKind,
+ timestamp,
+ extrinsicHash,
+ networkName,
+ subscanUrl,
+ } = transferInfo
+
+ const currentAddresses = useCurrentAccount()
+
+ const currentAddress = currentAddresses?.[0]
+
+ const date = dayjs(timestamp).format('MMM DD, YYYY [at] HH:mm:ss ')
+
+ const isRecieved = txKind === 'TRANSFER_TO'
+
+ const sender = isRecieved ? senderOrTarget : currentAddress
+ const recipient = isRecieved ? currentAddress : senderOrTarget
+
+ return (
+
+
+
+
+
+ {isRecieved ? '+' : '-'}
+ {balance}
+
+
{totalBalance}
+
+
+
+
+
Network
+
+
+ {networkName}
+
+
+
+
+
+ Transaction ID
+
+
+ {toShortAddress(extrinsicHash, 8)}
+
+
+
+
{date}
+
+
+
+
+ {isMobile ? (
+
+ ) : (
+
+ )}
+ {!isLastElement && !isMobile && (
+
+ )}
+
+ {titleByKind} •{' '}
+
+ Transfer
+
+ }
+ />
+
+ )
+
+ return (
+
+
+
+
{txKind === 'TRANSFER_TO' ? 'From' : 'To'}
+
+
+
+
+
+
+
+ {txKind === 'TRANSFER_TO' ? '+' : '-'}
+ {balance}
+
+
{totalBalance}
+