mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
Merge pull request #196 from oceanprotocol/fix/asset-detail-errors
fix error output on asset details loading
This commit is contained in:
commit
5f37adc420
19
client/package-lock.json
generated
19
client/package-lock.json
generated
|
@ -2382,6 +2382,12 @@
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@types/shortid": {
|
||||||
|
"version": "0.0.29",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
|
||||||
|
"integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"@types/stack-utils": {
|
"@types/stack-utils": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||||
|
@ -11304,6 +11310,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/nano-json-stream-parser/-/nano-json-stream-parser-0.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/nano-json-stream-parser/-/nano-json-stream-parser-0.1.2.tgz",
|
||||||
"integrity": "sha1-DMj20OK2IrR5xA1JnEbWS3Vcb18="
|
"integrity": "sha1-DMj20OK2IrR5xA1JnEbWS3Vcb18="
|
||||||
},
|
},
|
||||||
|
"nanoid": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-0YbJdaL4JFoejIOoawgLcYValFGJ2iyUuVDIWL3g8Es87SSOWFbWdRUMV3VMSiyPs3SQ3QxCIxFX00q5DLkMCw=="
|
||||||
|
},
|
||||||
"nanomatch": {
|
"nanomatch": {
|
||||||
"version": "1.2.13",
|
"version": "1.2.13",
|
||||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
|
||||||
|
@ -15078,6 +15089,14 @@
|
||||||
"integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
|
"integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"shortid": {
|
||||||
|
"version": "2.2.15",
|
||||||
|
"resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.15.tgz",
|
||||||
|
"integrity": "sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==",
|
||||||
|
"requires": {
|
||||||
|
"nanoid": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"signal-exit": {
|
"signal-exit": {
|
||||||
"version": "3.0.2",
|
"version": "3.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
|
||||||
|
|
|
@ -40,6 +40,7 @@
|
||||||
"react-popper": "^1.3.3",
|
"react-popper": "^1.3.3",
|
||||||
"react-router-dom": "^5.0.1",
|
"react-router-dom": "^5.0.1",
|
||||||
"react-transition-group": "^4.2.1",
|
"react-transition-group": "^4.2.1",
|
||||||
|
"shortid": "^2.2.15",
|
||||||
"truffle-hdwallet-provider": "1.0.14",
|
"truffle-hdwallet-provider": "1.0.14",
|
||||||
"web3": "1.2.0"
|
"web3": "1.2.0"
|
||||||
},
|
},
|
||||||
|
@ -60,6 +61,7 @@
|
||||||
"@types/react-paginate": "^6.2.1",
|
"@types/react-paginate": "^6.2.1",
|
||||||
"@types/react-router-dom": "^4.3.4",
|
"@types/react-router-dom": "^4.3.4",
|
||||||
"@types/react-transition-group": "^4.2.0",
|
"@types/react-transition-group": "^4.2.0",
|
||||||
|
"@types/shortid": "0.0.29",
|
||||||
"@types/web3": "^1.0.19",
|
"@types/web3": "^1.0.19",
|
||||||
"jest-mock-axios": "^3.1.0",
|
"jest-mock-axios": "^3.1.0",
|
||||||
"node-sass": "^4.12.0",
|
"node-sass": "^4.12.0",
|
||||||
|
|
|
@ -15,19 +15,20 @@ export default class WalletSelector extends PureComponent<
|
||||||
isModalOpen: false
|
isModalOpen: false
|
||||||
}
|
}
|
||||||
|
|
||||||
private toggleModal = () => {
|
private handleToggleModal = (e?: Event) => {
|
||||||
|
e && e.preventDefault()
|
||||||
this.setState({ isModalOpen: !this.state.isModalOpen })
|
this.setState({ isModalOpen: !this.state.isModalOpen })
|
||||||
}
|
}
|
||||||
|
|
||||||
private loginBurnerWallet = () => {
|
private loginBurnerWallet = () => {
|
||||||
this.context.loginBurnerWallet()
|
this.context.loginBurnerWallet()
|
||||||
this.toggleModal()
|
this.handleToggleModal()
|
||||||
}
|
}
|
||||||
|
|
||||||
private loginMetamask = () => {
|
private loginMetamask = () => {
|
||||||
this.context.loginMetamask()
|
this.context.loginMetamask()
|
||||||
this.context.logoutBurnerWallet()
|
this.context.logoutBurnerWallet()
|
||||||
this.toggleModal()
|
this.handleToggleModal()
|
||||||
}
|
}
|
||||||
|
|
||||||
private WalletButton = ({
|
private WalletButton = ({
|
||||||
|
@ -80,7 +81,7 @@ export default class WalletSelector extends PureComponent<
|
||||||
<Button
|
<Button
|
||||||
link
|
link
|
||||||
className={styles.openLink}
|
className={styles.openLink}
|
||||||
onClick={this.toggleModal}
|
onClick={this.handleToggleModal}
|
||||||
data-action="wallet"
|
data-action="wallet"
|
||||||
>
|
>
|
||||||
{content.title}
|
{content.title}
|
||||||
|
@ -89,7 +90,7 @@ export default class WalletSelector extends PureComponent<
|
||||||
title={content.title}
|
title={content.title}
|
||||||
description={content.description}
|
description={content.description}
|
||||||
isOpen={this.state.isModalOpen}
|
isOpen={this.state.isModalOpen}
|
||||||
toggleModal={this.toggleModal}
|
toggleModal={this.handleToggleModal}
|
||||||
>
|
>
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
{content.buttons.map(({ title, description, icon }) => (
|
{content.buttons.map(({ title, description, icon }) => (
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { PureComponent } from 'react'
|
import React from 'react'
|
||||||
import Moment from 'react-moment'
|
import Moment from 'react-moment'
|
||||||
import { DDO, MetaData, File } from '@oceanprotocol/squid'
|
import { DDO, MetaData, File } from '@oceanprotocol/squid'
|
||||||
|
import shortid from 'shortid'
|
||||||
import Markdown from '../../atoms/Markdown'
|
import Markdown from '../../atoms/Markdown'
|
||||||
import CategoryLink from '../../atoms/CategoryLink'
|
import CategoryLink from '../../atoms/CategoryLink'
|
||||||
import styles from './AssetDetails.module.scss'
|
import styles from './AssetDetails.module.scss'
|
||||||
|
@ -21,103 +22,97 @@ export function datafilesLine(files: File[]) {
|
||||||
return <span>{files.length} data files</span>
|
return <span>{files.length} data files</span>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class AssetDetails extends PureComponent<AssetDetailsProps> {
|
const MetaFixedItem = ({ name, value }: { name: string; value: string }) => (
|
||||||
public render() {
|
<li>
|
||||||
const { metadata, ddo } = this.props
|
<span className={styles.metaLabel}>
|
||||||
const { base } = metadata
|
<strong>{name}</strong>
|
||||||
|
</span>
|
||||||
|
<span className={styles.metaValue}>{value}</span>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
export default function AssetDetails({ metadata, ddo }: AssetDetailsProps) {
|
||||||
<>
|
const { base } = metadata
|
||||||
<aside className={styles.metaPrimary}>
|
const price = base.price && Web3.utils.fromWei(base.price.toString())
|
||||||
<h2
|
|
||||||
className={styles.copyrightHolder}
|
const metaFixed = [
|
||||||
title="Copyright Holder"
|
{
|
||||||
|
name: 'Author',
|
||||||
|
value: base.author,
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'License',
|
||||||
|
value: base.license,
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'DID',
|
||||||
|
value: ddo.id,
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Price',
|
||||||
|
value: `${price} OCEAN`,
|
||||||
|
show: price !== '0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<aside className={styles.metaPrimary}>
|
||||||
|
<h2 className={styles.copyrightHolder} title="Copyright Holder">
|
||||||
|
{base.copyrightHolder}
|
||||||
|
</h2>
|
||||||
|
<div className={styles.metaPrimaryData}>
|
||||||
|
<span
|
||||||
|
title={`Date created, published on ${base.datePublished}`}
|
||||||
>
|
>
|
||||||
{base.copyrightHolder}
|
<Moment
|
||||||
</h2>
|
date={base.dateCreated}
|
||||||
<div className={styles.metaPrimaryData}>
|
format="L"
|
||||||
<span
|
interval={0}
|
||||||
title={`Date created, published on ${base.datePublished}`}
|
/>
|
||||||
>
|
</span>
|
||||||
<Moment
|
|
||||||
date={base.dateCreated}
|
|
||||||
format="L"
|
|
||||||
interval={0}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{base.categories && (
|
{base.categories && (
|
||||||
<CategoryLink category={base.categories[0]} />
|
<CategoryLink category={base.categories[0]} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{base.files && datafilesLine(base.files)}
|
{base.files && datafilesLine(base.files)}
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
{base.description && (
|
|
||||||
<Markdown
|
|
||||||
text={base.description}
|
|
||||||
className={styles.description}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Report did={ddo.id} title={metadata.base.name} />
|
|
||||||
|
|
||||||
<div className={styles.metaFixed}>
|
|
||||||
<h2
|
|
||||||
className={styles.metaFixedTitle}
|
|
||||||
title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
|
|
||||||
>
|
|
||||||
Fixed Metadata
|
|
||||||
</h2>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span className={styles.metaLabel}>
|
|
||||||
<strong>Author</strong>
|
|
||||||
</span>
|
|
||||||
<span className={styles.metaValue}>
|
|
||||||
{base.author}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span className={styles.metaLabel}>
|
|
||||||
<strong>License</strong>
|
|
||||||
</span>
|
|
||||||
<span className={styles.metaValue}>
|
|
||||||
{base.license}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span className={styles.metaLabel}>
|
|
||||||
<strong>DID</strong>
|
|
||||||
</span>
|
|
||||||
<span className={styles.metaValue}>
|
|
||||||
<code>{ddo.id}</code>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
{allowPricing ? (
|
|
||||||
<li>
|
|
||||||
<span className={styles.metaLabel}>
|
|
||||||
<strong>Price</strong>
|
|
||||||
</span>
|
|
||||||
<span className={styles.metaValue}>
|
|
||||||
{base.price === '0'
|
|
||||||
? 0
|
|
||||||
: Web3.utils.fromWei(
|
|
||||||
base.price.toString()
|
|
||||||
)}{' '}
|
|
||||||
OCEAN
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
) : null}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
<AssetFilesDetails
|
{base.description && (
|
||||||
files={base.files ? base.files : []}
|
<Markdown
|
||||||
ddo={ddo}
|
text={base.description}
|
||||||
|
className={styles.description}
|
||||||
/>
|
/>
|
||||||
</>
|
)}
|
||||||
)
|
|
||||||
}
|
<Report did={ddo.id} title={metadata.base.name} />
|
||||||
|
|
||||||
|
<div className={styles.metaFixed}>
|
||||||
|
<h2
|
||||||
|
className={styles.metaFixedTitle}
|
||||||
|
title="This metadata can not be changed because it is used to generate the checksums for the DDO, and to encrypt the file urls."
|
||||||
|
>
|
||||||
|
Fixed Metadata
|
||||||
|
</h2>
|
||||||
|
<ul>
|
||||||
|
{metaFixed
|
||||||
|
.filter(item => item.show)
|
||||||
|
.map(item => (
|
||||||
|
<MetaFixedItem
|
||||||
|
key={shortid.generate()}
|
||||||
|
name={item.name}
|
||||||
|
value={item.value}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AssetFilesDetails files={base.files ? base.files : []} ddo={ddo} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,6 +16,5 @@ describe('Details', () => {
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
expect(container.firstChild).toBeInTheDocument()
|
expect(container.firstChild).toBeInTheDocument()
|
||||||
expect(container.querySelector('.loader')).toBeInTheDocument()
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -54,12 +54,13 @@ class Asset extends Component<AssetProps, AssetState> {
|
||||||
public render() {
|
public render() {
|
||||||
const { metadata, ddo, error } = this.state
|
const { metadata, ddo, error } = this.state
|
||||||
const isLoading = metadata.base.name === ''
|
const isLoading = metadata.base.name === ''
|
||||||
|
const hasError = error !== ''
|
||||||
|
|
||||||
return isLoading ? (
|
return isLoading && !hasError ? (
|
||||||
<div className={stylesApp.loader}>
|
<div className={stylesApp.loader}>
|
||||||
<Spinner message="Loading asset..." />
|
<Spinner message="Loading asset..." />
|
||||||
</div>
|
</div>
|
||||||
) : error !== '' ? (
|
) : hasError ? (
|
||||||
<div className={styles.error}>{error}</div>
|
<div className={styles.error}>{error}</div>
|
||||||
) : (
|
) : (
|
||||||
<Route
|
<Route
|
||||||
|
|
Loading…
Reference in New Issue
Block a user