mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-28 00:27:49 +02:00
82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import React, { useEffect, useState, ReactElement } from 'react'
|
|
import Loader from '../atoms/Loader'
|
|
import {
|
|
useOcean,
|
|
OceanConnectionStatus,
|
|
useSearch
|
|
} from '@oceanprotocol/react'
|
|
import Table from '../atoms/Table'
|
|
import Price from '../atoms/Price'
|
|
import { fromWei } from 'web3-utils'
|
|
import DateCell from '../atoms/Table/DateCell'
|
|
import DdoLinkCell from '../atoms/Table/DdoLinkCell'
|
|
import { MetadataMain } from '@oceanprotocol/lib'
|
|
|
|
const consumedColumns = [
|
|
{
|
|
name: 'Published',
|
|
selector: 'published',
|
|
sortable: true,
|
|
cell: function getCell(row: any) {
|
|
return <DateCell date={row.published} />
|
|
}
|
|
},
|
|
{
|
|
name: 'Name',
|
|
selector: 'name',
|
|
sortable: true,
|
|
cell: function getCell(row: any) {
|
|
return <DdoLinkCell id={row.id} name={row.name} />
|
|
}
|
|
},
|
|
{
|
|
name: 'Price',
|
|
selector: 'price',
|
|
sortable: true,
|
|
cell: function getCell(row: any) {
|
|
return <Price price={fromWei(row.price)} small />
|
|
}
|
|
}
|
|
]
|
|
|
|
export default function ConsumedList(): ReactElement {
|
|
const { ocean, status, accountId, account } = useOcean()
|
|
const [consumedList, setConsumedList] = useState<any>([])
|
|
const { getConsumedList } = useSearch()
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
useEffect(() => {
|
|
async function getConsumed() {
|
|
if (!accountId || !ocean || status !== OceanConnectionStatus.CONNECTED)
|
|
return
|
|
setIsLoading(true)
|
|
|
|
const consumedItems = await getConsumedList()
|
|
|
|
if (!consumedItems) return
|
|
|
|
const data = consumedItems.map((ddo) => {
|
|
const { attributes } = ddo.findServiceByType('metadata')
|
|
const { name, price, datePublished } = attributes.main as MetadataMain
|
|
return {
|
|
published: datePublished,
|
|
name: name,
|
|
price: price
|
|
}
|
|
})
|
|
|
|
setConsumedList(data)
|
|
setIsLoading(false)
|
|
}
|
|
getConsumed()
|
|
}, [accountId, ocean, status])
|
|
|
|
return isLoading ? (
|
|
<Loader />
|
|
) : account && ocean ? (
|
|
<Table data={consumedList} columns={consumedColumns} />
|
|
) : (
|
|
<div>Connect your wallet to see your consumed data sets.</div>
|
|
)
|
|
}
|