diff --git a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx index 878129a6df..9ab701a47e 100644 --- a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx +++ b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx @@ -50,9 +50,9 @@ type AmmTransactionsTableProps = { data: FullAmmCurveFragment['transactions'] loading: boolean symbol: string -} +} & Pick -export const AmmTransactionsTable = ({ data, loading, symbol }: AmmTransactionsTableProps) => { +export const AmmTransactionsTable = ({ data, loading, symbol, pagination }: AmmTransactionsTableProps) => { const mappedData = useMemo( () => data.map((row) => ({ @@ -80,6 +80,8 @@ export const AmmTransactionsTable = ({ data, loading, symbol }: AmmTransactionsT data={loading ? tableLoadingData : mappedData ?? []} columns={COLUMNS} emptyState={tableEmptyState} + pagination={pagination} + pageSize={pagination?.itemsPerPage} /> ) } diff --git a/packages/atlas/src/hooks/useMarketTransactionsPagination.ts b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts new file mode 100644 index 0000000000..745ddf0569 --- /dev/null +++ b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts @@ -0,0 +1,54 @@ +import { useState } from 'react' + +import { useGetFullAmmCurveQuery } from '@/api/queries/__generated__/creatorTokens.generated' +import { SentryLogger } from '@/utils/logs' + +const separateListIntoChunks = (list: Array, chunkSize: number): Array => { + const chunks = [] + + for (let index = 0; index < list.length; index += chunkSize) { + chunks.push(list.slice(index, index + chunkSize)) + } + + return chunks +} + +export const useMarketTransactionsPagination = ({ + ammId, + initialPageSize = 10, +}: { + ammId?: string + initialPageSize?: number +}) => { + const [currentPage, setCurrentPage] = useState(0) + const [perPage, setPerPage] = useState(initialPageSize) + + const { data, loading } = useGetFullAmmCurveQuery({ + variables: { + where: { + id_eq: ammId, + }, + }, + skip: !ammId, + onError: (error) => { + SentryLogger.error('Failed to fetch AMM curve', 'CrtMarketTab', error) + }, + }) + + const marketTransactions = data?.ammCurves[0].transactions ?? [] + + const pages = separateListIntoChunks( + [...marketTransactions].sort((transactionA, transactionB) => transactionB.createdIn - transactionA.createdIn), + perPage + ) + + return { + currentPage, + setCurrentPage, + marketTransactions: pages[currentPage] ?? [], + totalCount: marketTransactions.length, + loading, + setPerPage, + perPage, + } +} diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx index dc45cf9830..737c0e3a02 100644 --- a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx +++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx @@ -1,7 +1,6 @@ import BN from 'bn.js' import { useMemo } from 'react' -import { useGetFullAmmCurveQuery } from '@/api/queries/__generated__/creatorTokens.generated' import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated' import { SvgJoyTokenMonochrome24 } from '@/assets/icons' import { FlexBox } from '@/components/FlexBox' @@ -10,29 +9,23 @@ import { WidgetTile } from '@/components/WidgetTile' import { AmmTransactionsTable } from '@/components/_crt/AmmTransactionsTable/AmmTransactionsTable' import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader' import { atlasConfig } from '@/config' +import { useMarketTransactionsPagination } from '@/hooks/useMarketTransactionsPagination' import { useMediaMatch } from '@/hooks/useMediaMatch' import { HAPI_TO_JOY_RATE } from '@/joystream-lib/config' import { calcBuyMarketPricePerToken } from '@/utils/crts' -import { SentryLogger } from '@/utils/logs' type CrtMarketTabProps = { token: FullCreatorTokenFragment } +const TILES_PER_PAGE = 10 + export const CrtMarketTab = ({ token }: CrtMarketTabProps) => { const mdMatch = useMediaMatch('md') const currentAmm = token.ammCurves.find((curve) => !curve.finalized) - const { data, loading } = useGetFullAmmCurveQuery({ - variables: { - where: { - id_eq: currentAmm?.id, - }, - }, - skip: !currentAmm, - onError: (error) => { - SentryLogger.error('Failed to fetch AMM curve', 'CrtMarketTab', error) - }, - }) + const { loading, marketTransactions, currentPage, setCurrentPage, perPage, setPerPage, totalCount } = + useMarketTransactionsPagination({ ammId: currentAmm?.id, initialPageSize: TILES_PER_PAGE }) + const pricePerUnit = useMemo( () => calcBuyMarketPricePerToken(currentAmm?.mintedByAmm, currentAmm?.ammSlopeParameter, currentAmm?.ammInitPrice), [currentAmm?.ammInitPrice, currentAmm?.ammSlopeParameter, currentAmm?.mintedByAmm] @@ -103,7 +96,8 @@ export const CrtMarketTab = ({ token }: CrtMarketTabProps) => { )