2020-11-02 19:18:21 +01:00
|
|
|
import { useOcean } from '@oceanprotocol/react'
|
|
|
|
import React, { ReactElement, useEffect, useState } from 'react'
|
|
|
|
import EtherscanLink from '../atoms/EtherscanLink'
|
|
|
|
import Time from '../atoms/Time'
|
|
|
|
import Table from '../atoms/Table'
|
2020-11-05 14:43:13 +01:00
|
|
|
import AssetTitle from './AssetListTitle'
|
2020-11-02 19:18:21 +01:00
|
|
|
import styles from './PoolTransactions.module.css'
|
|
|
|
import { useUserPreferences } from '../../providers/UserPreferences'
|
2020-11-20 11:29:42 +01:00
|
|
|
import { Ocean } from '@oceanprotocol/lib'
|
|
|
|
import { formatPrice } from '../atoms/Price/PriceUnit'
|
2021-01-22 18:05:02 +01:00
|
|
|
import { gql, useQuery } from '@apollo/client'
|
|
|
|
import {
|
|
|
|
TransactionHistory,
|
|
|
|
TransactionHistoryPoolTransactions
|
|
|
|
} from '../../@types/apollo/TransactionHistory'
|
2021-01-21 16:02:48 +01:00
|
|
|
|
2021-01-22 18:05:02 +01:00
|
|
|
import web3 from 'web3'
|
|
|
|
|
|
|
|
const txHistoryQueryByPool = gql`
|
|
|
|
query TransactionHistoryByPool($user: String, $pool: String) {
|
|
|
|
poolTransactions(
|
|
|
|
orderBy: timestamp
|
|
|
|
orderDirection: desc
|
|
|
|
where: { userAddress: $user, poolAddress: $pool }
|
|
|
|
first: 1000
|
|
|
|
) {
|
|
|
|
tx
|
|
|
|
event
|
|
|
|
timestamp
|
|
|
|
poolAddress {
|
|
|
|
datatokenAddress
|
|
|
|
}
|
|
|
|
tokens {
|
|
|
|
value
|
|
|
|
type
|
|
|
|
tokenAddress
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
2021-01-21 16:02:48 +01:00
|
|
|
const txHistoryQuery = gql`
|
2021-01-22 18:05:02 +01:00
|
|
|
query TransactionHistory($user: String) {
|
|
|
|
poolTransactions(
|
|
|
|
orderBy: timestamp
|
|
|
|
orderDirection: desc
|
|
|
|
where: { userAddress: $user }
|
|
|
|
first: 1000
|
|
|
|
) {
|
|
|
|
tx
|
|
|
|
event
|
|
|
|
timestamp
|
|
|
|
poolAddress {
|
|
|
|
datatokenAddress
|
|
|
|
}
|
|
|
|
tokens {
|
|
|
|
value
|
|
|
|
type
|
|
|
|
tokenAddress
|
2021-01-21 16:02:48 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
2021-01-22 18:05:02 +01:00
|
|
|
async function getSymbol(ocean: Ocean, tokenAddress: string) {
|
2020-11-20 11:29:42 +01:00
|
|
|
const symbol =
|
2021-01-22 18:05:02 +01:00
|
|
|
ocean.pool.oceanAddress.toLowerCase() === tokenAddress.toLowerCase()
|
2020-11-20 11:29:42 +01:00
|
|
|
? 'OCEAN'
|
|
|
|
: await ocean.datatokens.getSymbol(tokenAddress)
|
|
|
|
|
|
|
|
return symbol
|
2020-11-02 19:18:21 +01:00
|
|
|
}
|
|
|
|
|
2020-11-20 11:29:42 +01:00
|
|
|
async function getTitle(
|
|
|
|
ocean: Ocean,
|
2021-01-22 18:05:02 +01:00
|
|
|
row: TransactionHistoryPoolTransactions,
|
|
|
|
locale: string
|
2020-11-20 11:29:42 +01:00
|
|
|
) {
|
2021-01-22 18:05:02 +01:00
|
|
|
let title = ''
|
2020-11-02 19:18:21 +01:00
|
|
|
|
2021-01-22 18:05:02 +01:00
|
|
|
switch (row.event) {
|
|
|
|
case 'swap': {
|
|
|
|
const inToken = row.tokens.filter((x) => x.type === 'in')[0]
|
|
|
|
const inTokenSymbol = await getSymbol(ocean, inToken.tokenAddress)
|
|
|
|
const outToken = row.tokens.filter((x) => x.type === 'out')[0]
|
|
|
|
const outTokenSymbol = await getSymbol(ocean, outToken.tokenAddress)
|
|
|
|
title += `Swap ${formatPrice(
|
|
|
|
Math.abs(inToken.value).toString(),
|
|
|
|
locale
|
|
|
|
)}${inTokenSymbol} for ${formatPrice(
|
|
|
|
Math.abs(outToken.value).toString(),
|
|
|
|
locale
|
|
|
|
)}${outTokenSymbol}`
|
|
|
|
break
|
|
|
|
}
|
|
|
|
case 'setup': {
|
|
|
|
const firstToken = row.tokens.filter(
|
|
|
|
(x) =>
|
|
|
|
x.tokenAddress.toLowerCase() === ocean.pool.oceanAddress.toLowerCase()
|
|
|
|
)[0]
|
|
|
|
const firstTokenSymbol = await getSymbol(ocean, firstToken.tokenAddress)
|
|
|
|
const secondToken = row.tokens.filter(
|
|
|
|
(x) =>
|
|
|
|
x.tokenAddress.toLowerCase() !== ocean.pool.oceanAddress.toLowerCase()
|
|
|
|
)[0]
|
|
|
|
const secondTokenSymbol = await getSymbol(ocean, secondToken.tokenAddress)
|
|
|
|
title += `Create pool with ${formatPrice(
|
|
|
|
Math.abs(firstToken.value).toString(),
|
|
|
|
locale
|
|
|
|
)}${firstTokenSymbol} and ${formatPrice(
|
|
|
|
Math.abs(secondToken.value).toString(),
|
|
|
|
locale
|
|
|
|
)}${secondTokenSymbol}`
|
|
|
|
break
|
|
|
|
}
|
|
|
|
case 'join':
|
|
|
|
case 'exit': {
|
|
|
|
for (let i = 0; i < row.tokens.length; i++) {
|
|
|
|
const tokenSymbol = await getSymbol(ocean, row.tokens[i].tokenAddress)
|
|
|
|
if (i > 0) title += '\n'
|
|
|
|
title += `${row.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
|
|
|
|
Math.abs(row.tokens[i].value).toString(),
|
|
|
|
locale
|
|
|
|
)}${tokenSymbol}`
|
|
|
|
}
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
2020-11-20 11:29:42 +01:00
|
|
|
|
|
|
|
return title
|
|
|
|
}
|
|
|
|
|
2021-01-22 18:05:02 +01:00
|
|
|
function Title({ row }: { row: TransactionHistoryPoolTransactions }) {
|
|
|
|
const { ocean, networkId } = useOcean()
|
2020-11-20 11:29:42 +01:00
|
|
|
const [title, setTitle] = useState<string>()
|
|
|
|
const { locale } = useUserPreferences()
|
2020-11-02 19:18:21 +01:00
|
|
|
|
|
|
|
useEffect(() => {
|
2021-01-22 18:05:02 +01:00
|
|
|
if (!ocean || !locale || !row) return
|
2020-11-02 19:18:21 +01:00
|
|
|
|
2020-11-20 11:29:42 +01:00
|
|
|
async function init() {
|
2021-01-22 18:05:02 +01:00
|
|
|
const title = await getTitle(ocean, row, locale)
|
2020-11-20 11:29:42 +01:00
|
|
|
setTitle(title)
|
2020-11-02 19:18:21 +01:00
|
|
|
}
|
2020-11-20 11:29:42 +01:00
|
|
|
init()
|
2021-01-22 18:05:02 +01:00
|
|
|
}, [ocean, row, locale])
|
2020-11-02 19:18:21 +01:00
|
|
|
|
2020-11-20 11:29:42 +01:00
|
|
|
return title ? (
|
2021-01-22 18:05:02 +01:00
|
|
|
<EtherscanLink networkId={networkId} path={`/tx/${row.tx}`}>
|
|
|
|
<span className={styles.titleText}>{title}</span>
|
2020-11-02 19:18:21 +01:00
|
|
|
</EtherscanLink>
|
2020-11-20 11:29:42 +01:00
|
|
|
) : null
|
2020-11-02 19:18:21 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
function getColumns(minimal?: boolean) {
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
name: 'Title',
|
2021-01-22 18:05:02 +01:00
|
|
|
selector: function getTitleRow(row: TransactionHistoryPoolTransactions) {
|
2020-11-02 19:18:21 +01:00
|
|
|
return <Title row={row} />
|
2020-11-20 11:29:42 +01:00
|
|
|
}
|
2020-11-02 19:18:21 +01:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Data Set',
|
2021-01-22 18:05:02 +01:00
|
|
|
selector: function getAssetRow(row: TransactionHistoryPoolTransactions) {
|
|
|
|
const did = web3.utils
|
|
|
|
.toChecksumAddress(row.poolAddress.datatokenAddress)
|
|
|
|
.replace('0x', 'did:op:')
|
|
|
|
|
2020-11-02 19:18:21 +01:00
|
|
|
return <AssetTitle did={did} />
|
|
|
|
},
|
|
|
|
omit: minimal
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Time',
|
2021-01-22 18:05:02 +01:00
|
|
|
selector: function getTimeRow(row: TransactionHistoryPoolTransactions) {
|
2020-11-02 19:18:21 +01:00
|
|
|
return (
|
|
|
|
<Time
|
|
|
|
className={styles.time}
|
|
|
|
date={row.timestamp.toString()}
|
|
|
|
relative
|
|
|
|
isUnix
|
|
|
|
/>
|
|
|
|
)
|
2020-11-20 11:29:42 +01:00
|
|
|
},
|
|
|
|
maxWidth: '10rem'
|
2020-11-02 19:18:21 +01:00
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function PoolTransactions({
|
|
|
|
poolAddress,
|
|
|
|
minimal
|
|
|
|
}: {
|
|
|
|
poolAddress?: string
|
|
|
|
minimal?: boolean
|
|
|
|
}): ReactElement {
|
2021-01-22 18:05:02 +01:00
|
|
|
const { accountId } = useOcean()
|
|
|
|
const [logs, setLogs] = useState<TransactionHistoryPoolTransactions[]>()
|
2020-11-02 19:18:21 +01:00
|
|
|
|
2021-01-22 18:05:02 +01:00
|
|
|
const { data, loading } = useQuery<TransactionHistory>(
|
|
|
|
poolAddress ? txHistoryQueryByPool : txHistoryQuery,
|
|
|
|
{
|
|
|
|
variables: {
|
|
|
|
user: accountId?.toLowerCase(),
|
|
|
|
pool: poolAddress?.toLowerCase()
|
|
|
|
},
|
|
|
|
pollInterval: 20000
|
2020-11-02 19:18:21 +01:00
|
|
|
}
|
2021-01-22 18:05:02 +01:00
|
|
|
)
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!data) return
|
|
|
|
setLogs(data.poolTransactions)
|
|
|
|
}, [data, loading])
|
2020-11-02 19:18:21 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Table
|
|
|
|
columns={getColumns(minimal)}
|
|
|
|
data={logs}
|
2021-01-22 18:05:02 +01:00
|
|
|
isLoading={loading}
|
2020-11-02 19:18:21 +01:00
|
|
|
noTableHead={minimal}
|
|
|
|
dense={minimal}
|
|
|
|
pagination={minimal ? logs?.length >= 4 : logs?.length >= 9}
|
|
|
|
paginationPerPage={minimal ? 5 : 10}
|
|
|
|
emptyMessage="Your pool transactions will show up here"
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}
|