1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

Merge branch 'main' into fix/change-c2dorders-order

This commit is contained in:
Bogdan Fazakas 2022-07-05 09:58:00 +03:00
commit 85013c1198
20 changed files with 5312 additions and 2198 deletions

7034
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -25,7 +25,7 @@
"@coingecko/cryptoformat": "^0.5.4", "@coingecko/cryptoformat": "^0.5.4",
"@loadable/component": "^5.15.2", "@loadable/component": "^5.15.2",
"@oceanprotocol/art": "^3.2.0", "@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/lib": "^1.1.3", "@oceanprotocol/lib": "^1.1.5",
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
"@urql/exchange-refocus": "^0.2.5", "@urql/exchange-refocus": "^0.2.5",
@ -48,10 +48,10 @@
"myetherwallet-blockies": "^0.1.1", "myetherwallet-blockies": "^0.1.1",
"next": "^12.1.6", "next": "^12.1.6",
"query-string": "^7.1.1", "query-string": "^7.1.1",
"react": "^18.1.0", "react": "^18.2.0",
"react-chartjs-2": "^4.2.0", "react-chartjs-2": "^4.2.0",
"react-clipboard.js": "^2.0.16", "react-clipboard.js": "^2.0.16",
"react-data-table-component": "^6.11.7", "react-data-table-component": "^7.5.2",
"react-dom": "^18.1.0", "react-dom": "^18.1.0",
"react-dotdotdot": "^1.3.1", "react-dotdotdot": "^1.3.1",
"react-modal": "^3.15.1", "react-modal": "^3.15.1",
@ -67,14 +67,14 @@
"swr": "^1.3.0", "swr": "^1.3.0",
"urql": "^2.2.1", "urql": "^2.2.1",
"use-dark-mode": "^2.3.1", "use-dark-mode": "^2.3.1",
"web3": "^1.7.3", "web3": "^1.7.4",
"web3modal": "^1.9.7", "web3modal": "^1.9.8",
"yup": "^0.32.11" "yup": "^0.32.11"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-essentials": "^6.5.7", "@storybook/addon-essentials": "^6.5.7",
"@storybook/addon-storyshots": "^6.5.7", "@storybook/addon-storyshots": "^6.5.9",
"@storybook/builder-webpack5": "^6.5.7", "@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.7", "@storybook/manager-webpack5": "^6.5.7",
"@storybook/react": "^6.5.7", "@storybook/react": "^6.5.7",
"@storybook/testing-library": "^0.0.11", "@storybook/testing-library": "^0.0.11",
@ -88,7 +88,7 @@
"@types/lodash.debounce": "^4.0.7", "@types/lodash.debounce": "^4.0.7",
"@types/lodash.omit": "^4.5.7", "@types/lodash.omit": "^4.5.7",
"@types/node": "^17.0.41", "@types/node": "^17.0.41",
"@types/react": "^18.0.12", "@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5", "@types/react-dom": "^18.0.5",
"@types/react-modal": "^3.13.1", "@types/react-modal": "^3.13.1",
"@types/react-paginate": "^7.1.1", "@types/react-paginate": "^7.1.1",
@ -109,8 +109,8 @@
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"https-browserify": "^1.0.0", "https-browserify": "^1.0.0",
"husky": "^8.0.1", "husky": "^8.0.1",
"jest": "^28.1.1", "jest": "^28.1.2",
"jest-environment-jsdom": "^28.1.1", "jest-environment-jsdom": "^28.1.2",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"pretty-quick": "^3.1.3", "pretty-quick": "^3.1.3",
"process": "^0.11.10", "process": "^0.11.10",

View File

@ -1,6 +1,6 @@
import React, { ReactElement, useCallback, useEffect, useState } from 'react' import React, { ReactElement, useCallback, useEffect, useState } from 'react'
import Time from '@shared/atoms/Time' import Time from '@shared/atoms/Time'
import Table from '@shared/atoms/Table' import Table, { TableOceanColumn } from '@shared/atoms/Table'
import AssetTitle from '@shared/AssetList/AssetListTitle' import AssetTitle from '@shared/AssetList/AssetListTitle'
import { useUserPreferences } from '@context/UserPreferences' import { useUserPreferences } from '@context/UserPreferences'
import { gql } from 'urql' import { gql } from 'urql'
@ -84,38 +84,30 @@ export interface PoolTransaction extends TransactionHistoryPoolTransactions {
asset: Asset asset: Asset
} }
const columns = [ const columns: TableOceanColumn<PoolTransaction>[] = [
{ {
name: 'Title', name: 'Title',
selector: function getTitleRow(row: PoolTransaction) { selector: (row) => <Title row={row} />
return <Title row={row} />
}
}, },
{ {
name: 'Data Set', name: 'Data Set',
selector: function getAssetRow(row: PoolTransaction) { selector: (row) => <AssetTitle asset={row.asset} />
return <AssetTitle asset={row.asset} />
}
}, },
{ {
name: 'Network', name: 'Network',
selector: function getNetwork(row: PoolTransaction) { selector: (row) => <NetworkName networkId={row.networkId} />,
return <NetworkName networkId={row.networkId} />
},
maxWidth: '12rem' maxWidth: '12rem'
}, },
{ {
name: 'Time', name: 'Time',
selector: function getTimeRow(row: PoolTransaction) { selector: (row) => (
return (
<Time <Time
className={styles.time} className={styles.time}
date={row.timestamp.toString()} date={row.timestamp.toString()}
relative relative
isUnix isUnix
/> />
) ),
},
maxWidth: '10rem' maxWidth: '10rem'
} }
] ]

View File

@ -0,0 +1,7 @@
.empty {
width: 100%;
text-align: left;
color: var(--color-secondary);
font-size: var(--font-size-small);
font-style: italic;
}

View File

@ -0,0 +1,6 @@
import React, { ReactElement } from 'react'
import styles from './Empty.module.css'
export default function Empty({ message }: { message?: string }): ReactElement {
return <div className={styles.empty}>{message || 'No results found'}</div>
}

View File

@ -0,0 +1,57 @@
import { createTheme, TableStyles, Theme } from 'react-data-table-component'
// https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/themes.ts
const theme: Partial<Theme> = {
text: {
primary: 'var(--font-color-text)',
secondary: 'var(--color-secondary)',
disabled: 'var(--color-secondary)'
},
background: {
default: 'transparent'
},
divider: {
default: 'var(--border-color)'
},
button: {
default: 'var(--font-color-text)',
focus: 'var(--color-primary)',
hover: 'var(--color-primary)',
disabled: 'var(--color-secondary)'
}
}
createTheme('ocean', theme)
// https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts
export const customStyles: TableStyles = {
table: {
style: {
scrollbarWidth: 'thin'
}
},
head: {
style: {
fontSize: 'var(--font-size-small)',
fontWeight: 'var(--font-weight-base)'
}
},
headCells: {
style: {
textTransform: 'uppercase',
color: 'var(--color-secondary)',
fontSize: 'var(--font-size-small)'
}
},
cells: {
style: {
minWidth: '0 !important'
}
},
rows: {
style: {
fontSize: 'var(--font-size-small)',
fontWeight: 'var(--font-weight-base)'
}
}
}

View File

@ -1,82 +0,0 @@
.table div {
background-color: transparent !important;
}
.table [role='table'],
.table [role='row'] {
color: var(--font-color-text);
font-size: var(--font-size-small);
min-width: 0;
}
.table [class~='rdt_TableCol'] {
border-bottom: 1px solid var(--border-color);
}
.table [role='columnheader'] {
text-transform: uppercase;
font-size: var(--font-size-small);
}
.table [role='columnheader'] > span,
.table [role='columnheader'] > div {
color: var(--color-secondary);
}
.table [role='gridcell'] {
min-width: 0;
}
.table [role='row'] {
border-bottom: 1px solid var(--border-color) !important;
}
.table + div [class*='rdt_Pagination'] {
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
background: none;
min-height: 0;
padding-top: calc(var(--spacer) / 2);
}
.table + div [class*='rdt_Pagination'] svg {
fill: var(--color-secondary);
}
.table + div [class*='rdt_Pagination'] [disabled] svg {
fill: var(--background-highlight);
}
.table + div [class*='rdt_Pagination'] button:hover:not(:disabled) {
background: none;
}
.table + div [class*='rdt_Pagination'] button:hover:not(:disabled) svg {
fill: var(--brand-pink);
}
.table + div [class*='rdt_Pagination'] button[aria-label='First Page'],
.table + div [class*='rdt_Pagination'] button[aria-label='Last Page'] {
display: none;
}
.table [class*='Table-module'] {
scrollbar-width: thin;
}
.empty {
width: 100%;
text-align: left;
color: var(--color-secondary);
font-size: var(--font-size-small);
font-style: italic;
}
.arrow {
composes: arrow from '@shared/Pagination/index.module.css';
}
.previous {
composes: previous from '@shared/Pagination/index.module.css';
}

View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react' import { ComponentStory, ComponentMeta } from '@storybook/react'
import Table, { TableProps } from '@shared/atoms/Table' import Table, { TableOceanProps } from '@shared/atoms/Table'
export default { export default {
title: 'Component/@shared/atoms/Table', title: 'Component/@shared/atoms/Table',
@ -10,7 +10,7 @@ export default {
const Template: ComponentStory<typeof Table> = (args) => <Table {...args} /> const Template: ComponentStory<typeof Table> = (args) => <Table {...args} />
interface Props { interface Props {
args: TableProps args: TableOceanProps<any>
} }
const columns = [ const columns = [

View File

@ -1,10 +1,19 @@
import React, { ReactElement, ReactNode } from 'react' import React, { ReactElement } from 'react'
import DataTable, { IDataTableProps } from 'react-data-table-component' import DataTable, { TableProps, TableColumn } from 'react-data-table-component'
import Loader from '../Loader' import Loader from '../Loader'
import Pagination from '@shared/Pagination' import Pagination from '@shared/Pagination'
import styles from './index.module.css' import { PaginationComponent } from 'react-data-table-component/dist/src/DataTable/types'
import Empty from './Empty'
import { customStyles } from './_styles'
export interface TableProps extends IDataTableProps { // Hack in support for returning components for each row, as this works,
// but is not supported by the typings.
export interface TableOceanColumn<T> extends TableColumn<T> {
selector?: (row: T) => any
}
export interface TableOceanProps<T> extends TableProps<T> {
columns: TableOceanColumn<T>[]
isLoading?: boolean isLoading?: boolean
emptyMessage?: string emptyMessage?: string
sortField?: string sortField?: string
@ -12,10 +21,6 @@ export interface TableProps extends IDataTableProps {
className?: string className?: string
} }
function Empty({ message }: { message?: string }): ReactElement {
return <div className={styles.empty}>{message || 'No results found'}</div>
}
export default function Table({ export default function Table({
data, data,
columns, columns,
@ -27,22 +32,24 @@ export default function Table({
sortAsc, sortAsc,
className, className,
...props ...props
}: TableProps): ReactElement { }: TableOceanProps<any>): ReactElement {
return ( return (
<div className={className}>
<DataTable <DataTable
columns={columns} columns={columns}
data={data} data={data}
className={className ? styles.table + ` ${className}` : styles.table}
noHeader
pagination={pagination || data?.length >= 9} pagination={pagination || data?.length >= 9}
paginationPerPage={paginationPerPage || 10} paginationPerPage={paginationPerPage || 10}
noDataComponent={<Empty message={emptyMessage} />} noDataComponent={<Empty message={emptyMessage} />}
progressPending={isLoading} progressPending={isLoading}
progressComponent={<Loader />} progressComponent={<Loader />}
paginationComponent={Pagination as unknown as ReactNode} paginationComponent={Pagination as unknown as PaginationComponent}
defaultSortField={sortField} defaultSortFieldId={sortField}
defaultSortAsc={sortAsc} defaultSortAsc={sortAsc}
theme="ocean"
customStyles={customStyles}
{...props} {...props}
/> />
</div>
) )
} }

View File

@ -10,6 +10,7 @@
padding: calc(var(--spacer) / 2); padding: calc(var(--spacer) / 2);
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
scrollbar-width: none;
} }
.tab { .tab {

View File

@ -1,4 +1,4 @@
import React, { ReactElement, ReactNode, useState } from 'react' import React, { ReactElement, ReactNode } from 'react'
import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs' import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
import styles from './index.module.css' import styles from './index.module.css'
import InputRadio from '@shared/FormInput/InputRadio' import InputRadio from '@shared/FormInput/InputRadio'

View File

@ -0,0 +1,26 @@
.stats {
border-top: 1px solid var(--border-color);
margin: calc(var(--spacer) / 2) calc(var(--spacer) / -2)
calc(var(--spacer) / -5) calc(var(--spacer) / -2);
margin-top: calc(var(--spacer) / 2);
padding: calc(var(--spacer) / 3);
padding-bottom: 0;
font-size: var(--font-size-small);
color: var(--color-secondary);
text-align: center;
}
@media (min-width: 40rem) {
.stats {
margin-bottom: calc(var(--spacer) / -1.5);
margin-left: calc(var(--spacer) / -1);
margin-right: calc(var(--spacer) / -1);
padding-left: var(--spacer);
padding-right: var(--spacer);
}
}
.number {
font-weight: var(--font-weight-bold);
color: var(--font-color-heading);
}

View File

@ -0,0 +1,20 @@
import { useAsset } from '@context/Asset'
import React from 'react'
import styles from './index.module.css'
export default function AssetStats() {
const { asset } = useAsset()
return (
<footer className={styles.stats}>
{!asset || !asset?.stats || asset?.stats?.orders === 0 ? (
'No sales yet'
) : (
<>
<span className={styles.number}>{asset.stats.orders}</span> sale
{asset.stats.orders === 1 ? '' : 's'}
</>
)}
</footer>
)
}

View File

@ -17,6 +17,7 @@ import { calcMaxExactIn, LoggerInstance, Pool } from '@oceanprotocol/lib'
import { usePool } from '@context/Pool' import { usePool } from '@context/Pool'
import { MAX_DECIMALS } from '@utils/constants' import { MAX_DECIMALS } from '@utils/constants'
import { getMaxDecimalsValidation } from '@utils/numbers' import { getMaxDecimalsValidation } from '@utils/numbers'
import Decimal from 'decimal.js'
export interface FormAddLiquidity { export interface FormAddLiquidity {
amount: number amount: number
@ -81,11 +82,11 @@ export default function Add({
) )
const amountMaxPool = calcMaxExactIn(poolReserve) const amountMaxPool = calcMaxExactIn(poolReserve)
const amountMax = const oceanDecimal = new Decimal(balance.ocean)
Number(balance.ocean) > Number(amountMaxPool) const amountMax = oceanDecimal.greaterThan(amountMaxPool)
? amountMaxPool ? amountMaxPool
: balance.ocean : oceanDecimal
setAmountMax(Number(amountMax).toFixed(3)) setAmountMax(amountMax.toFixed(3, Decimal.ROUND_DOWN))
} catch (error) { } catch (error) {
LoggerInstance.error(error.message) LoggerInstance.error(error.message)
} }

View File

@ -18,6 +18,7 @@ import { useFormikContext } from 'formik'
import { FormPublishData } from 'src/components/Publish/_types' import { FormPublishData } from 'src/components/Publish/_types'
import { AssetExtended } from 'src/@types/AssetExtended' import { AssetExtended } from 'src/@types/AssetExtended'
import PoolProvider from '@context/Pool' import PoolProvider from '@context/Pool'
import AssetStats from './AssetStats'
export default function AssetActions({ export default function AssetActions({
asset asset
@ -111,7 +112,9 @@ export default function AssetActions({
} }
}, [balance, accountId, asset?.accessDetails, dtBalance]) }, [balance, accountId, asset?.accessDetails, dtBalance])
const UseContent = isCompute ? ( const UseContent = (
<>
{isCompute ? (
<Compute <Compute
asset={asset} asset={asset}
dtBalance={dtBalance} dtBalance={dtBalance}
@ -126,6 +129,9 @@ export default function AssetActions({
file={fileMetadata} file={fileMetadata}
fileIsLoading={fileIsLoading} fileIsLoading={fileIsLoading}
/> />
)}
<AssetStats />
</>
) )
const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }] const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]

View File

@ -1,6 +1,6 @@
import { useUserPreferences } from '@context/UserPreferences' import { useUserPreferences } from '@context/UserPreferences'
import React, { ReactElement, useEffect, useState } from 'react' import React, { ReactElement, useEffect, useState } from 'react'
import Table from '@shared/atoms/Table' import Table, { TableOceanColumn } from '@shared/atoms/Table'
import { LoggerInstance } from '@oceanprotocol/lib' import { LoggerInstance } from '@oceanprotocol/lib'
import Price from '@shared/Price' import Price from '@shared/Price'
import Tooltip from '@shared/atoms/Tooltip' import Tooltip from '@shared/atoms/Tooltip'
@ -12,10 +12,10 @@ import { getAccessDetailsForAssets } from '@utils/accessDetailsAndPricing'
import { useWeb3 } from '@context/Web3' import { useWeb3 } from '@context/Web3'
import { useMarketMetadata } from '@context/MarketMetadata' import { useMarketMetadata } from '@context/MarketMetadata'
const columns = [ const columns: TableOceanColumn<AssetExtended>[] = [
{ {
name: 'Data Set', name: 'Data Set',
selector: function getAssetRow(row: AssetExtended) { selector: (row) => {
const { metadata } = row const { metadata } = row
return <AssetTitle title={metadata.name} asset={row} /> return <AssetTitle title={metadata.name} asset={row} />
}, },
@ -24,20 +24,16 @@ const columns = [
}, },
{ {
name: 'Datatoken Symbol', name: 'Datatoken Symbol',
selector: function getAssetRow(row: AssetExtended) { selector: (row) => (
return (
<Tooltip content={row.datatokens[0].name}> <Tooltip content={row.datatokens[0].name}>
<>{row.datatokens[0].symbol}</> <>{row.datatokens[0].symbol}</>
</Tooltip> </Tooltip>
) ),
},
maxWidth: '10rem' maxWidth: '10rem'
}, },
{ {
name: 'Price', name: 'Price',
selector: function getAssetRow(row: AssetExtended) { selector: (row) => <Price accessDetails={row.accessDetails} size="small" />,
return <Price accessDetails={row.accessDetails} size="small" />
},
right: true right: true
} }
] ]

View File

@ -1,7 +1,7 @@
import React, { ReactElement, useEffect, useState, useCallback } from 'react' import React, { ReactElement, useEffect, useState, useCallback } from 'react'
import Time from '@shared/atoms/Time' import Time from '@shared/atoms/Time'
import { LoggerInstance } from '@oceanprotocol/lib' import { LoggerInstance } from '@oceanprotocol/lib'
import Table from '@shared/atoms/Table' import Table, { TableOceanColumn } from '@shared/atoms/Table'
import Button from '@shared/atoms/Button' import Button from '@shared/atoms/Button'
import { useWeb3 } from '@context/Web3' import { useWeb3 } from '@context/Web3'
import Details from './Details' import Details from './Details'
@ -19,46 +19,33 @@ export function Status({ children }: { children: string }): ReactElement {
return <div className={styles.status}>{children}</div> return <div className={styles.status}>{children}</div>
} }
const columns = [ const columns: TableOceanColumn<ComputeJobMetaData>[] = [
{ {
name: 'Data Set', name: 'Data Set',
selector: function getAssetRow(row: ComputeJobMetaData) { selector: (row) => (
return <AssetListTitle did={row.inputDID[0]} title={row.assetName} /> <AssetListTitle did={row.inputDID[0]} title={row.assetName} />
} )
}, },
{ {
name: 'Network', name: 'Network',
selector: function getNetwork(row: ComputeJobMetaData) { selector: (row) => <NetworkName networkId={row.networkId} />
return <NetworkName networkId={row.networkId} />
}
}, },
{ {
name: 'Created', name: 'Created',
selector: function getTimeRow(row: ComputeJobMetaData) { selector: (row) => <Time date={row.dateCreated} isUnix relative />
return <Time date={row.dateCreated} isUnix relative />
}
}, },
{ {
name: 'Finished', name: 'Finished',
selector: function getTimeRow(row: ComputeJobMetaData) { selector: (row) =>
return row.dateFinished ? ( row.dateFinished ? <Time date={row.dateFinished} isUnix relative /> : ''
<Time date={row.dateFinished} isUnix relative />
) : (
''
)
}
}, },
{ {
name: 'Status', name: 'Status',
selector: function getStatus(row: ComputeJobMetaData) { selector: (row) => <Status>{row.statusText}</Status>
return <Status>{row.statusText}</Status>
}
}, },
{ {
name: 'Actions', name: 'Actions',
selector: function getActions(row: ComputeJobMetaData) { selector: (row) => <Details job={row} />
return <Details job={row} />
}
} }
] ]
@ -125,7 +112,7 @@ export default function ComputeJobs({
columns={minimal ? columnsMinimal : columns} columns={minimal ? columnsMinimal : columns}
data={jobs} data={jobs}
isLoading={isLoading} isLoading={isLoading}
defaultSortField="row.dateCreated" defaultSortFieldId="row.dateCreated"
defaultSortAsc={false} defaultSortAsc={false}
emptyMessage={chainIds.length === 0 ? 'No network selected' : null} emptyMessage={chainIds.length === 0 ? 'No network selected' : null}
/> />

View File

@ -1,34 +1,27 @@
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import Table from '@shared/atoms/Table' import Table, { TableOceanColumn } from '@shared/atoms/Table'
import Time from '@shared/atoms/Time' import Time from '@shared/atoms/Time'
import AssetTitle from '@shared/AssetList/AssetListTitle' import AssetTitle from '@shared/AssetList/AssetListTitle'
import NetworkName from '@shared/NetworkName' import NetworkName from '@shared/NetworkName'
import { useProfile } from '@context/Profile' import { useProfile } from '@context/Profile'
import { useUserPreferences } from '@context/UserPreferences' import { useUserPreferences } from '@context/UserPreferences'
const columns = [
const columns: TableOceanColumn<DownloadedAsset>[] = [
{ {
name: 'Data Set', name: 'Data Set',
selector: function getAssetRow(row: DownloadedAsset) { selector: (row) => <AssetTitle asset={row.asset} />
return <AssetTitle asset={row.asset} />
}
}, },
{ {
name: 'Network', name: 'Network',
selector: function getNetwork(row: DownloadedAsset) { selector: (row) => <NetworkName networkId={row.networkId} />
return <NetworkName networkId={row.networkId} />
}
}, },
{ {
name: 'Datatoken', name: 'Datatoken',
selector: function getTitleRow(row: DownloadedAsset) { selector: (row) => row.dtSymbol
return row.dtSymbol
}
}, },
{ {
name: 'Time', name: 'Time',
selector: function getTimeRow(row: DownloadedAsset) { selector: (row) => <Time date={row.timestamp.toString()} relative isUnix />
return <Time date={row.timestamp.toString()} relative isUnix />
}
} }
] ]

View File

@ -1,5 +1,5 @@
import React, { ReactElement, useCallback, useEffect, useState } from 'react' import React, { ReactElement, useCallback, useEffect, useState } from 'react'
import Table from '@shared/atoms/Table' import Table, { TableOceanColumn } from '@shared/atoms/Table'
import styles from './index.module.css' import styles from './index.module.css'
import AssetTitle from '@shared/AssetList/AssetListTitle' import AssetTitle from '@shared/AssetList/AssetListTitle'
import { PoolShares_poolShares as PoolShare } from '../../../../@types/subgraph/PoolShares' import { PoolShares_poolShares as PoolShare } from '../../../../@types/subgraph/PoolShares'
@ -23,32 +23,24 @@ export interface AssetPoolShare {
asset: Asset asset: Asset
} }
const columns = [ const columns: TableOceanColumn<AssetPoolShare>[] = [
{ {
name: 'Data Set', name: 'Data Set',
selector: function getAssetRow(row: AssetPoolShare) { selector: (row) => <AssetTitle asset={row.asset} />,
return <AssetTitle asset={row.asset} />
},
grow: 2 grow: 2
}, },
{ {
name: 'Network', name: 'Network',
selector: function getNetwork(row: AssetPoolShare) { selector: (row) => <NetworkName networkId={row.networkId} />
return <NetworkName networkId={row.networkId} />
}
}, },
{ {
name: 'Your liquidity', name: 'Your liquidity',
selector: function getAssetRow(row: AssetPoolShare) { selector: (row) => <Liquidity row={row} type="user" />,
return <Liquidity row={row} type="user" />
},
right: true right: true
}, },
{ {
name: 'Total Value Locked', name: 'Total Value Locked',
selector: function getAssetRow(row: AssetPoolShare) { selector: (row) => <Liquidity row={row} type="pool" />,
return <Liquidity row={row} type="pool" />
},
right: true right: true
} }
] ]

View File

@ -34,6 +34,7 @@
.tabs div[class*='tabContent'] { .tabs div[class*='tabContent'] {
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }