66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { useOcean } from '@oceanprotocol/react'
|
|
import React, { ReactElement, useEffect, useState } from 'react'
|
|
import { useAsset } from '../../../providers/Asset'
|
|
import EtherscanLink from '../../atoms/EtherscanLink'
|
|
import Time from '../../atoms/Time'
|
|
import styles from './EditHistory.module.css'
|
|
import { gql, useQuery } from '@apollo/client'
|
|
import { ReceiptData_datatokens_updates as ReceiptData } from '../../../@types/apollo/ReceiptData'
|
|
|
|
const getReceipts = gql`
|
|
query ReceiptData($address: ID!) {
|
|
datatokens(where: { id: $address }) {
|
|
updates(orderBy: timestamp, orderDirection: desc) {
|
|
id
|
|
tx
|
|
timestamp
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export default function EditHistory(): ReactElement {
|
|
const { networkId } = useOcean()
|
|
const { ddo } = useAsset()
|
|
const { data } = useQuery(getReceipts, {
|
|
variables: { address: ddo?.dataToken.toLowerCase() }
|
|
})
|
|
|
|
const [receipts, setReceipts] = useState<ReceiptData[]>()
|
|
const [creationTx, setCreationTx] = useState<string>()
|
|
|
|
useEffect(() => {
|
|
if (!data || data.datatokens.length === 0) return
|
|
|
|
const receiptCollectionLength = data.datatokens[0].updates.length
|
|
const creationData = data.datatokens[0].updates[receiptCollectionLength - 1]
|
|
setCreationTx(creationData.tx)
|
|
|
|
const receiptCollection = [...data.datatokens[0].updates]
|
|
receiptCollection.splice(-1, 1)
|
|
|
|
setReceipts(receiptCollection)
|
|
}, [data])
|
|
|
|
return (
|
|
<>
|
|
<h3 className={styles.title}>Metadata History</h3>
|
|
<ul className={styles.history}>
|
|
{receipts?.map((receipt) => (
|
|
<li key={receipt.id} className={styles.item}>
|
|
<EtherscanLink networkId={networkId} path={`/tx/${receipt.tx}`}>
|
|
edited{' '}
|
|
<Time date={receipt.timestamp.toString()} relative isUnix />
|
|
</EtherscanLink>
|
|
</li>
|
|
))}
|
|
<li className={styles.item}>
|
|
<EtherscanLink networkId={networkId} path={`/tx/${creationTx}`}>
|
|
published <Time date={ddo.created} relative />
|
|
</EtherscanLink>
|
|
</li>
|
|
</ul>
|
|
</>
|
|
)
|
|
}
|