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:
commit
85013c1198
7048
package-lock.json
generated
7048
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -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",
|
||||||
|
@ -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'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
7
src/components/@shared/atoms/Table/Empty.module.css
Normal file
7
src/components/@shared/atoms/Table/Empty.module.css
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.empty {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-size: var(--font-size-small);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
6
src/components/@shared/atoms/Table/Empty.tsx
Normal file
6
src/components/@shared/atoms/Table/Empty.tsx
Normal 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>
|
||||||
|
}
|
57
src/components/@shared/atoms/Table/_styles.ts
Normal file
57
src/components/@shared/atoms/Table/_styles.ts
Normal 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)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -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';
|
|
||||||
}
|
|
@ -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 = [
|
||||||
|
@ -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 (
|
||||||
<DataTable
|
<div className={className}>
|
||||||
columns={columns}
|
<DataTable
|
||||||
data={data}
|
columns={columns}
|
||||||
className={className ? styles.table + ` ${className}` : styles.table}
|
data={data}
|
||||||
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 PaginationComponent}
|
||||||
paginationComponent={Pagination as unknown as ReactNode}
|
defaultSortFieldId={sortField}
|
||||||
defaultSortField={sortField}
|
defaultSortAsc={sortAsc}
|
||||||
defaultSortAsc={sortAsc}
|
theme="ocean"
|
||||||
{...props}
|
customStyles={customStyles}
|
||||||
/>
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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'
|
||||||
|
@ -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);
|
||||||
|
}
|
20
src/components/Asset/AssetActions/AssetStats/index.tsx
Normal file
20
src/components/Asset/AssetActions/AssetStats/index.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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,21 +112,26 @@ export default function AssetActions({
|
|||||||
}
|
}
|
||||||
}, [balance, accountId, asset?.accessDetails, dtBalance])
|
}, [balance, accountId, asset?.accessDetails, dtBalance])
|
||||||
|
|
||||||
const UseContent = isCompute ? (
|
const UseContent = (
|
||||||
<Compute
|
<>
|
||||||
asset={asset}
|
{isCompute ? (
|
||||||
dtBalance={dtBalance}
|
<Compute
|
||||||
file={fileMetadata}
|
asset={asset}
|
||||||
fileIsLoading={fileIsLoading}
|
dtBalance={dtBalance}
|
||||||
/>
|
file={fileMetadata}
|
||||||
) : (
|
fileIsLoading={fileIsLoading}
|
||||||
<Consume
|
/>
|
||||||
asset={asset}
|
) : (
|
||||||
dtBalance={dtBalance}
|
<Consume
|
||||||
isBalanceSufficient={isBalanceSufficient}
|
asset={asset}
|
||||||
file={fileMetadata}
|
dtBalance={dtBalance}
|
||||||
fileIsLoading={fileIsLoading}
|
isBalanceSufficient={isBalanceSufficient}
|
||||||
/>
|
file={fileMetadata}
|
||||||
|
fileIsLoading={fileIsLoading}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<AssetStats />
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
|
|
||||||
const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]
|
const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
@ -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 />
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user