Merge pull request #135 from dappforce/deploy/transaction-history

Add tx history tab

src/api/txHistory.ts

@@ -0,0 +1,56 @@
+import { sendGetRequest } from './utils'
+
+type GetTxHistoryQueue = {
+  address: string
+  pageSize: number
+  offset: number
+}
+
+export const getTxHistoryQueue = async ({
+  address,
+  pageSize,
+  offset,
+}: GetTxHistoryQueue) =>
+  sendGetRequest({
+    params: {
+      url: 'tx/history/queue',
+      config: {
+        params: {
+          address,
+          pageSize,
+          offset,
+        },
+      },
+    },
+    onFailReturnedValue: undefined,
+    onFailedText: `Failed to get tx history by address ${address}`,
+  })
+
+type GetTxHistory = GetTxHistoryQueue & {
+  networks: string[]
+  events: string[]
+}
+
+export const getTxHistory = async ({
+  address,
+  pageSize,
+  offset,
+  networks,
+  events,
+}: GetTxHistory) =>
+  sendGetRequest({
+    params: {
+      url: 'tx/history',
+      config: {
+        params: {
+          address,
+          pageSize,
+          offset,
+          networks,
+          events,
+        },
+      },
+    },
+    onFailReturnedValue: undefined,
+    onFailedText: `Failed to get tx history by address ${address}`,
+  })

src/components/accountDashboard/index.tsx

@@ -3,13 +3,15 @@ import { Skeleton, Tooltip } from 'antd'
 import { MutedSpan } from '../utils/MutedText'
 import styles from './Index.module.sass'
 import {
+  useCurrentAccount,
   useMyBalances,
   useMyExtensionAccount,
 } from '../providers/MyExtensionAccountsContext'
 import { BalanceView } from '../homePage/address-views/utils/index'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BIGNUMBER_ZERO } from '../../config/app/consts'
+import { useGetTableData } from '../table/balancesTable/utils/useGetTableData'
 
 type TotalSectionProps = {
   title: string
@@ -58,6 +60,8 @@ export const AccountDashboard = () => {
   const { t } = useTranslation()
   const balances = useMyBalances()
   const { refreshBalances } = useMyExtensionAccount()
+  const currentAddresses = useCurrentAccount()
+  useGetTableData(currentAddresses, 'chains')
 
   const {
     freeChainBalances,

src/components/chat/ChatFloatingModal.module.sass

@@ -21,7 +21,7 @@
     padding: $space_small $space_normal
     // To offset optical illusion from the grill icon
     padding-left: $space_small
-    border-radius: 32px
+    border-radius: 32px !important
     font-size: 1rem
     color: white !important
     display: flex

src/components/creatorsStaking/Banner/calculateApr.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useGeneralEraInfo } from 'src/rtk/features/creatorStaking/generalEraInfo/generalEraInfoHooks'
 import BN from 'bignumber.js'
 import { convertToBalanceWithDecimal } from '@subsocial/utils'
-import { useGetDecimalsAndSymbolByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
 
 const blockReward = new BN(6)
 const eraReward = blockReward.multipliedBy(new BN(7200))
@@ -11,7 +11,7 @@ const backerPercent = new BN(0.6)
 
 export const useCalculateApr = () => {
   const generalEraInfo = useGeneralEraInfo()
-  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal } = useGetChainDataByNetwork('subsocial')
 
   const { info, loading } = generalEraInfo || {}
 

src/components/creatorsStaking/CreatorDashboard/DashboardCards.tsx

@@ -1,6 +1,6 @@
 import { FormatBalance } from 'src/components/common/balances'
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
-import { useGetDecimalsAndSymbolByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
 import { useEraStakesByIds } from 'src/rtk/features/creatorStaking/eraStake/eraStakeHooks'
 import { useGeneralEraInfo } from 'src/rtk/features/creatorStaking/generalEraInfo/generalEraInfoHooks'
 import DashboardCard from '../utils/DashboardCard'
@@ -18,7 +18,7 @@ type DashboardCardsProps = {
 
 const DashboardCards = ({ creators }: DashboardCardsProps) => {
   const { decimal, tokenSymbol: symbol } =
-    useGetDecimalsAndSymbolByNetwork('subsocial')
+    useGetChainDataByNetwork('subsocial')
   const myAddress = useMyAddress()
   const creatorRewards = useCreatorRewards(myAddress)
   const eraInfo = useGeneralEraInfo()

src/components/creatorsStaking/Creators/CreatorCard.tsx

@@ -10,7 +10,7 @@ import { useRef, useState } from 'react'
 import StakingModal, { StakingModalVariant } from './modals/StakeModal'
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
 import { ContactInfo } from '../utils/socialLinks'
-import { useGetDecimalsAndSymbolByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
 import { CreatorPreview } from '../utils/CreatorPreview'
 import { useModalContext } from '../contexts/ModalContext'
 import Button from '../tailwind-components/Button'
@@ -114,7 +114,7 @@ const CreatorCard = ({ spaceId }: CreatorCardProps) => {
   const { amount, setAmount } = useModalContext()
   const creatorSpaceEntity = useCreatorSpaceById(spaceId)
   // const eraStake = useEraStakesById(spaceId, era)
-  const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal, tokenSymbol } = useGetChainDataByNetwork('subsocial')
   const backerInfo = useBackerInfo(spaceId, myAddress)
   const [ openAboutModal, setOpenAboutModal ] = useState(false)
   const [ openStakeModal, setOpenStakeModal ] = useState(false)

src/components/creatorsStaking/Creators/modals/MoveStakeModal.tsx

@@ -11,7 +11,6 @@ import { AmountInput } from './AmountInput'
 import { useBackerInfo } from '@/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
 import { useMyAddress } from '@/components/providers/MyExtensionAccountsContext'
 import { FormatBalance } from '@/components/common/balances'
-import { useGetDecimalsAndSymbolByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
 import { MoveStakeTxButton } from './TxButtons'
 import {
   balanceWithDecimal,
@@ -21,6 +20,7 @@ import { BIGNUMBER_ZERO } from '@/config/app/consts'
 import BN from 'bignumber.js'
 import UserIcon from '@/assets/icons/user-icon.svg'
 import useRedirectToCreatorsPage from '../../hooks/useRedirectToCreatorsPage'
+import { useGetChainDataByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
 
 type MoveStakeModalProps = {
   open: boolean
@@ -35,7 +35,7 @@ const MoveStakeModal = ({
 }: MoveStakeModalProps) => {
   const myAddress = useMyAddress()
   const creatorsList = useCreatorsList()
-  const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal, tokenSymbol } = useGetChainDataByNetwork('subsocial')
   const redirectToCreatorsPage = useRedirectToCreatorsPage()
 
   const spaceIds = creatorsList?.map((item) => item.creator.spaceId)

src/components/creatorsStaking/Creators/modals/StakeModal.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useState, ChangeEvent } from 'react'
 import { useBackerInfo } from 'src/rtk/features/creatorStaking/backerInfo/backerInfoHooks'
 import { FormatBalance } from 'src/components/common/balances'
 import { StakeOrIncreaseTxButton, UnstakeTxButton } from './TxButtons'
-import { useGetDecimalsAndSymbolByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
 import Checkbox from '../../tailwind-components/Checkbox'
 import { linkTextStyles } from '../../tailwind-components/LinkText'
 import store from 'store'
@@ -80,7 +80,7 @@ type CurrentStakeProps = {
 const CurrentStake = ({ spaceId }: CurrentStakeProps) => {
   const myAddress = useMyAddress()
   const backerInfo = useBackerInfo(spaceId, myAddress)
-  const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal, tokenSymbol } = useGetChainDataByNetwork('subsocial')
 
   const { info } = backerInfo || {}
 
@@ -176,7 +176,7 @@ const StakingModal = ({
 
   const stakingConsts = useStakingConsts()
 
-  const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal, tokenSymbol } = useGetChainDataByNetwork('subsocial')
 
   const { space } = creatorSpaceEntity || {}
 

src/components/creatorsStaking/Creators/modals/TxButtons.tsx

@@ -29,7 +29,7 @@ import { useModalContext } from '../../contexts/ModalContext'
 import store from 'store'
 import { useSendEvent } from '@/components/providers/AnalyticContext'
 import getAmountRange from '../../utils/getAmountRangeForAnalytics'
-import { useGetDecimalsAndSymbolByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
 
 export type CommonTxButtonProps = {
   amount?: string
@@ -129,7 +129,7 @@ function StakingTxButton ({
 export function StakeOrIncreaseTxButton (props: CommonTxButtonProps) {
   const myAddress = useMyAddress()
   const sendEvent = useSendEvent()
-  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal } = useGetChainDataByNetwork('subsocial')
 
   const { currencyBalance: balancesByCurrency } = useBalancesByNetwork({
     address: myAddress,
@@ -161,7 +161,7 @@ export function UnstakeTxButton (props: CommonTxButtonProps) {
   const backerInfo = useBackerInfo(props.spaceId, myAddress)
   const { info } = backerInfo || {}
   const sendEvent = useSendEvent()
-  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal } = useGetChainDataByNetwork('subsocial')
 
   const { totalStaked } = info || {}
 

src/components/creatorsStaking/MyStaking/MyRewards.tsx

@@ -13,7 +13,7 @@ import {
 import ValueOrSkeleton from '../utils/ValueOrSkeleton'
 import ClaimRewardsTxButton from './ClaimRewardsTxButton'
 import DashboardCard from '../utils/DashboardCard'
-import { useGetDecimalsAndSymbolByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
 
 type RestakeButtonProps = {
   restake: boolean
@@ -44,7 +44,7 @@ const MyRewards = () => {
   const myAddress = useMyAddress()
   const creatorsList = useCreatorsList()
   const { decimal, tokenSymbol: symbol } =
-    useGetDecimalsAndSymbolByNetwork('subsocial')
+    useGetChainDataByNetwork('subsocial')
 
   const creatorsSpaceIds = useMemo(
     () => creatorsList?.map((creator) => creator.id),

src/components/creatorsStaking/MyStaking/Unstaking.tsx

@@ -8,7 +8,7 @@ import { useGeneralEraInfo } from 'src/rtk/features/creatorStaking/generalEraInf
 import BN from 'bignumber.js'
 import { useStakingContext } from 'src/components/staking/collators/StakingContext'
 import { BIGNUMBER_ZERO } from 'src/config/app/consts'
-import { useGetDecimalsAndSymbolByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from 'src/components/utils/useGetDecimalsAndSymbolByNetwork'
 import { useGetNextEraTime } from '../hooks/useGetNextEraTime'
 import { useResponsiveSize } from 'src/components/responsive'
 import { AiOutlineCheckCircle } from 'react-icons/ai'
@@ -66,7 +66,7 @@ const TimeRemaining = ({ unlockEra, className }: TimeRemainingProps) => {
 
 const Unstaking = () => {
   const myAddress = useMyAddress()
-  const { decimal, tokenSymbol } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal, tokenSymbol } = useGetChainDataByNetwork('subsocial')
   const { isMobile } = useResponsiveSize()
 
   const columns: Column[] = [

src/components/creatorsStaking/utils/StakingInfoBanner.tsx

@@ -3,7 +3,7 @@ import Button from '../tailwind-components/Button'
 import { useSendEvent } from '@/components/providers/AnalyticContext'
 import { useBackerLedger } from '@/rtk/features/creatorStaking/backerLedger/backerLedgerHooks'
 import { useMyAddress } from '@/components/providers/MyExtensionAccountsContext'
-import { useGetDecimalsAndSymbolByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
+import { useGetChainDataByNetwork } from '@/components/utils/useGetDecimalsAndSymbolByNetwork'
 import getAmountRange from './getAmountRangeForAnalytics'
 import { useResponsiveSize } from '@/components/responsive'
 import BN from 'bignumber.js'
@@ -13,7 +13,7 @@ const StakingInfoBanner = () => {
   const myAddress = useMyAddress()
   const sendEvent = useSendEvent()
   const backerLedger = useBackerLedger(myAddress)
-  const { decimal } = useGetDecimalsAndSymbolByNetwork('subsocial')
+  const { decimal } = useGetChainDataByNetwork('subsocial')
   const { isMobile } = useResponsiveSize()
   const wallet = getCurrentWallet()
 

src/components/homePage/HomePageLayout.tsx

@@ -1,10 +1,12 @@
 import NtfLayout from '../ntf/NftsLayout'
 import { Tabs } from 'antd'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import styles from './Index.module.sass'
 import BalancesTableNew from '../table/balancesTable'
 import { useSendEvent } from '../providers/AnalyticContext'
 import { useRouter } from 'next/router'
+import TxHistoryLayout from '../txHistory'
+import { useIsMulti } from '../providers/MyExtensionAccountsContext'
 
 type OverviewSectionProps = {
   addresses: string[]
@@ -16,24 +18,42 @@ type HomePageTabKeys = 'portfolio' | 'history' | 'nfts'
 
 const HomePageLayout = ({ addresses }: OverviewSectionProps) => {
   const { query: queryParams, pathname, replace } = useRouter()
+  const isMulti = useIsMulti()
 
   const [ activeTab, setActiveTab ] = useState<HomePageTabKeys>(
     (queryParams?.tab as HomePageTabKeys) || 'portfolio'
   )
   const sendEvent = useSendEvent()
 
-  const tabs = [
-    {
-      key: 'portfolio',
-      tab: 'Portfolio',
-      children: <BalancesTableNew addresses={addresses} />,
-    },
-    {
-      key: 'nfts',
-      tab: 'NFTs',
-      children: <NtfLayout addresses={addresses} />,
-    },
-  ]
+  useEffect(() => {
+    if (isMulti && activeTab === 'history') {
+      setActiveTab('portfolio')
+    }
+  }, [ isMulti, activeTab ])
+
+  const tabs = useMemo(() => {
+    const txHistoryTab = isMulti
+      ? {}
+      : {
+          key: 'history',
+          tab: 'Subsocial History',
+          children: <TxHistoryLayout addresses={addresses} />,
+        }
+
+    return [
+      {
+        key: 'portfolio',
+        tab: 'Portfolio',
+        children: <BalancesTableNew addresses={addresses} />,
+      },
+      {
+        key: 'nfts',
+        tab: 'NFTs',
+        children: <NtfLayout addresses={addresses} />,
+      },
+      txHistoryTab,
+    ]
+  }, [ isMulti, addresses.join(',') ])
 
   const onTabChanged = (tab: string) => {
     setActiveTab(tab as HomePageTabKeys)