Skip to content

Commit

Permalink
feat(apps/earn): v3 tx table improv
Browse files Browse the repository at this point in the history
  • Loading branch information
@LufyCZ
LufyCZ committed May 26, 2023
1 parent fe123e0 commit a7488f4
Show file tree
Hide file tree
Showing 3 changed files with 278 additions and 44 deletions.
70 changes: 61 additions & 9 deletions apps/earn/components/PoolSection/V3/PoolTransactionsV3/PoolTransactionsV3.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Pool } from '@sushiswap/v3-sdk'
import { FC, useMemo, useState } from 'react'
import { Transaction, useTransactionsV3 } from './useTransactionsV3'
import { Transaction, TransactionType, useTransactionsV3 } from './useTransactionsV3'
import {
PaginationState,
getCoreRowModel,
Expand All @@ -12,6 +12,7 @@ import { AMOUNT_COLUMN, AMOUNT_USD_COLUMN, SENDER_COLUMN, TIME_COLUMN, TYPE_COLU
import { GenericTable } from '@sushiswap/ui/future/components/table/GenericTable'
import { Chain } from '@sushiswap/chain'
import { Paginator } from '@sushiswap/ui/table/Paginator'
import { classNames } from '@sushiswap/ui'

interface PoolTransactionsV3Props {
pool: Pool | undefined | null
Expand All @@ -26,15 +27,18 @@ const PAGE_SIZE = 10
const PAGE_COUNT = TOTAL_ROWS / PAGE_SIZE

export const PoolTransactionsV3: FC<PoolTransactionsV3Props> = ({ pool, poolId }) => {
const [type, setType] = useState<Parameters<typeof useTransactionsV3>['2']['type']>('All')
const [pageIndex, setPageIndex] = useState<number>(0)

const opts = useMemo(
() => ({
refetchInterval: 60_000,
// Fetch first 10 on initial load, then TOTAL_ROWS after
first: pageIndex === 0 ? PAGE_SIZE : TOTAL_ROWS,
}),
[pageIndex]
() =>
({
refetchInterval: 60_000,
// Fetch first 10 (+1 for paging) on initial load, then TOTAL_ROWS after
first: pageIndex === 0 ? PAGE_SIZE + 1 : TOTAL_ROWS,
type,
} as const),
[pageIndex, type]
)

const { data, isLoading } = useTransactionsV3(pool, poolId, opts)
Expand All @@ -54,7 +58,55 @@ export const PoolTransactionsV3: FC<PoolTransactionsV3Props> = ({ pool, poolId }
})

return (
<div className="w-full pt-3">
<div className="w-full pt-3 space-y-2">
<div className="flex items-center justify-between text-gray-300">
<div>Transactions</div>
<div className="flex flex-row space-x-2 text-sm select-none">
<div
onClick={() => setType('All')}
className={classNames('cursor-pointer text-gray-400', type === 'All' && 'text-gray-300 font-bold')}
>
All
</div>
<div
onClick={() => setType(TransactionType.Swap)}
className={classNames(
'cursor-pointer text-gray-400',
type === TransactionType.Swap && 'text-gray-300 font-bold'
)}
>
Swaps
</div>
<div
onClick={() => setType(TransactionType.Burn)}
className={classNames(
'cursor-pointer text-gray-400',
type === TransactionType.Burn && 'text-gray-300 font-bold'
)}
>
Burns
</div>
<div
onClick={() => setType(TransactionType.Mint)}
className={classNames(
'cursor-pointer text-gray-400',
type === TransactionType.Mint && 'text-gray-300 font-bold'
)}
>
Mints
</div>
<div
onClick={() => setType(TransactionType.Collect)}
className={classNames(
'cursor-pointer text-gray-400',
type === TransactionType.Collect && 'text-gray-300 font-bold'
)}
>
Collects
</div>
</div>
</div>

<GenericTable<Transaction>
table={table}
loading={isLoading}
Expand All @@ -68,7 +120,7 @@ export const PoolTransactionsV3: FC<PoolTransactionsV3Props> = ({ pool, poolId }
hasPrev={pageIndex > 0}
onNext={() => setPageIndex(pageIndex + 1)}
onPage={() => {}}
hasNext={pageIndex < PAGE_COUNT - 1}
hasNext={pageIndex < PAGE_COUNT - 1 && !!data && data?.length > (pageIndex + 1) * PAGE_SIZE}
onPrev={() => setPageIndex(pageIndex - 1)}
pageSize={PAGE_SIZE}
/>
Expand Down
179 changes: 145 additions & 34 deletions apps/earn/components/PoolSection/V3/PoolTransactionsV3/useTransactionsV3.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ChainId } from '@sushiswap/chain'
import { getBuiltGraphSDK } from '@sushiswap/graph-client'
import { SUBGRAPH_HOST, SUSHISWAP_V3_SUBGRAPH_NAME } from '@sushiswap/graph-config'
import { Pool, isV3ChainId } from '@sushiswap/v3-sdk'
import { Query, UseQueryResult, useQuery } from '@tanstack/react-query'
import { Pool, V3ChainId, isV3ChainId } from '@sushiswap/v3-sdk'
import { useQuery } from '@tanstack/react-query'

export enum TransactionType {
Mint = 'Mint',
Expand All @@ -12,11 +12,134 @@ export enum TransactionType {
}

interface UseTransactionsV3Opts {
type?: TransactionType | 'All'
refetchInterval?: number
first: number
skip?: number
}

const fetchAll = async (poolId: string, chainId: V3ChainId, opts: UseTransactionsV3Opts) => {
const sdk = getBuiltGraphSDK({
subgraphHost: SUBGRAPH_HOST[chainId],
subgraphName: SUSHISWAP_V3_SUBGRAPH_NAME[chainId],
})

const { transactions } = await sdk.V3Transactions({
first: opts.first,
skip: opts?.skip ?? 0,
where: {
or: [
{
mints_: {
pool: poolId.toLowerCase(),
},
},
{
burns_: {
pool: poolId.toLowerCase(),
},
},
{
swaps_: {
pool: poolId.toLowerCase(),
},
},
{
collects_: {
pool: poolId.toLowerCase(),
},
},
],
},
})

return transactions
}

const fetchMints = async (poolId: string, chainId: V3ChainId, opts: UseTransactionsV3Opts) => {
const sdk = getBuiltGraphSDK({
subgraphHost: SUBGRAPH_HOST[chainId],
subgraphName: SUSHISWAP_V3_SUBGRAPH_NAME[chainId],
})

const { mints } = await sdk.V3Mints({
first: opts.first,
skip: opts?.skip ?? 0,
where: { pool: poolId.toLowerCase() },
})

return mints.map((mint) => ({
...mint.transaction,
mints: [mint],
burns: [],
swaps: [],
collects: [],
}))
}

const fetchBurns = async (poolId: string, chainId: V3ChainId, opts: UseTransactionsV3Opts) => {
const sdk = getBuiltGraphSDK({
subgraphHost: SUBGRAPH_HOST[chainId],
subgraphName: SUSHISWAP_V3_SUBGRAPH_NAME[chainId],
})

const { burns } = await sdk.V3Burns({
first: opts.first,
skip: opts?.skip ?? 0,
where: { pool: poolId.toLowerCase() },
})

return burns.map((burn) => ({
...burn.transaction,
mints: [],
burns: [burn],
swaps: [],
collects: [],
}))
}

const fetchSwaps = async (poolId: string, chainId: V3ChainId, opts: UseTransactionsV3Opts) => {
const sdk = getBuiltGraphSDK({
subgraphHost: SUBGRAPH_HOST[chainId],
subgraphName: SUSHISWAP_V3_SUBGRAPH_NAME[chainId],
})

const { swaps } = await sdk.V3Swaps({
first: opts.first,
skip: opts?.skip ?? 0,
where: { pool: poolId.toLowerCase() },
})

return swaps.map((swap) => ({
...swap.transaction,
mints: [],
burns: [],
swaps: [swap],
collects: [],
}))
}

const fetchCollects = async (poolId: string, chainId: V3ChainId, opts: UseTransactionsV3Opts) => {
const sdk = getBuiltGraphSDK({
subgraphHost: SUBGRAPH_HOST[chainId],
subgraphName: SUSHISWAP_V3_SUBGRAPH_NAME[chainId],
})

const { collects } = await sdk.V3Collects({
first: opts.first,
skip: opts?.skip ?? 0,
where: { pool: poolId.toLowerCase() },
})

return collects.map((collect) => ({
...collect.transaction,
mints: [],
burns: [],
swaps: [],
collects: [collect],
}))
}

// Will only support the last 1k txs
// The fact that there are different subtransactions aggregated under one transaction makes paging a bit difficult
function useTransactionsV3(pool: Pool | undefined | null, poolId: string, opts: UseTransactionsV3Opts) {
Expand All @@ -27,39 +150,27 @@ function useTransactionsV3(pool: Pool | undefined | null, poolId: string, opts:

if (!pool || !isV3ChainId(chainId)) return []

const sdk = getBuiltGraphSDK({
subgraphHost: SUBGRAPH_HOST[chainId],
subgraphName: SUSHISWAP_V3_SUBGRAPH_NAME[chainId],
})
let transactions: Awaited<ReturnType<typeof fetchAll>> = []

const { transactions } = await sdk.V3Transactions({
first: opts.first,
skip: opts?.skip ?? 0,
where: {
or: [
{
mints_: {
pool: poolId.toLowerCase(),
},
},
{
burns_: {
pool: poolId.toLowerCase(),
},
},
{
swaps_: {
pool: poolId.toLowerCase(),
},
},
{
collects_: {
pool: poolId.toLowerCase(),
},
},
],
},
})
switch (opts.type) {
case 'All':
transactions = await fetchAll(poolId, chainId, opts)
break
case TransactionType.Mint:
transactions = await fetchMints(poolId, chainId, opts)
break
case TransactionType.Burn:
transactions = await fetchBurns(poolId, chainId, opts)
break
case TransactionType.Swap:
transactions = await fetchSwaps(poolId, chainId, opts)
break
case TransactionType.Collect:
transactions = await fetchCollects(poolId, chainId, opts)
break
default:
transactions = await fetchAll(poolId, chainId, opts)
}

if (!transactions.length) return []

Expand Down
73 changes: 72 additions & 1 deletion packages/graph-client/queries/concetrated.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,4 +97,75 @@ query V3Transactions($first: Int = 100, $skip: Int = 0, $orderBy: Transaction_or
logIndex
}
}
}
}

query V3Burns($first: Int = 100, $skip: Int = 0, $orderBy: Burn_orderBy = timestamp, $orderDir: OrderDirection = desc, $where: Burn_filter) {
burns(first: $first, skip: $skip, orderBy: $orderBy, orderDirection: $orderDir, where: $where) {
id
owner
origin
amount
amount0
amount1
amountUSD
logIndex
transaction {
id
timestamp
blockNumber
}
}
}

query V3Mints($first: Int = 100, $skip: Int = 0, $orderBy: Mint_orderBy = timestamp, $orderDir: OrderDirection = desc, $where: Mint_filter) {
mints(first: $first, skip: $skip, orderBy: $orderBy, orderDirection: $orderDir, where: $where) {
id
owner
sender
origin
amount
amount0
amount1
amountUSD
logIndex
transaction {
id
timestamp
blockNumber
}
}
}

query V3Swaps($first: Int = 100, $skip: Int = 0, $orderBy: Swap_orderBy = timestamp, $orderDir: OrderDirection = desc, $where: Swap_filter) {
swaps(first: $first, skip: $skip, orderBy: $orderBy, orderDirection: $orderDir, where: $where) {
id
sender
recipient
origin
amount0
amount1
amountUSD
logIndex
transaction {
id
timestamp
blockNumber
}
}
}

query V3Collects($first: Int = 100, $skip: Int = 0, $orderBy: Collect_orderBy = timestamp, $orderDir: OrderDirection = desc, $where: Collect_filter) {
collects(first: $first, skip: $skip, orderBy: $orderBy, orderDirection: $orderDir, where: $where) {
id
owner
amount0
amount1
amountUSD
logIndex
transaction {
id
timestamp
blockNumber
}
}
}

0 comments on commit a7488f4

Please sign in to comment.