diff --git a/package-lock.json b/package-lock.json index 57e47fe92..ec2ab7208 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3866,6 +3866,11 @@ "web3-eth-contract": "^1.3.0" } }, + "@oceanprotocol/list-datapartners": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@oceanprotocol/list-datapartners/-/list-datapartners-1.0.0.tgz", + "integrity": "sha512-FkavpY56HhTLZetBNH0NXE6t+5G/0lF8r8LFHwcFBNpyLba87tPe30PqzR++4W9Ilrf4KnpU8pHfL6NwYzv8nw==" + }, "@oceanprotocol/react": { "version": "0.3.16", "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.16.tgz", @@ -27964,6 +27969,14 @@ "prop-types": "^15.6.2" } }, + "react-alice-carousel": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-alice-carousel/-/react-alice-carousel-2.0.2.tgz", + "integrity": "sha512-Uy9tOPAmwazPbq9uTygkk0zvCbMDWrtiBk7XnK5DTxkN3dLGxaCL3AKiCLLQOfnKbxZRGyXROLjlGYZ1aEpALg==", + "requires": { + "vanilla-swipe": "^2.2.0" + } + }, "react-color": { "version": "2.18.1", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.18.1.tgz", @@ -33685,6 +33698,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "vanilla-swipe": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/vanilla-swipe/-/vanilla-swipe-2.2.0.tgz", + "integrity": "sha512-iNXEIpPTe2KMOzHyi0lKP9rSSHry+SoHAc0aBHH4xcJBjKX5cnw6DcxgT3OoWsqxHQ6O1wmG4PAG9BOzzR5jGQ==" + }, "varint": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/varint/-/varint-5.0.2.tgz", diff --git a/package.json b/package.json index 9ff2b35e2..fabfc4b60 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@loadable/component": "5.13.1", "@oceanprotocol/art": "^3.0.0", "@oceanprotocol/lib": "^0.9.9", + "@oceanprotocol/list-datapartners": "^1.0.0", "@oceanprotocol/react": "^0.3.16", "@oceanprotocol/typographies": "^0.1.0", "@sindresorhus/slugify": "^1.0.0", @@ -62,6 +63,7 @@ "lodash.omit": "^4.5.0", "query-string": "^6.13.6", "react": "^16.14.0", + "react-alice-carousel": "^2.0.2", "react-data-table-component": "^6.11.5", "react-datepicker": "^3.3.0", "react-dom": "^16.14.0", diff --git a/src/components/Layout.module.css b/src/components/Layout.module.css index 1250bed18..aa335bda4 100644 --- a/src/components/Layout.module.css +++ b/src/components/Layout.module.css @@ -9,6 +9,12 @@ flex-direction: column; } +@media (min-width: 2000px) { + .app { + background-size: contain; + } +} + .app > * { width: 100%; } diff --git a/src/components/atoms/Partner.module.css b/src/components/atoms/Partner.module.css new file mode 100644 index 000000000..2d66cd343 --- /dev/null +++ b/src/components/atoms/Partner.module.css @@ -0,0 +1,24 @@ +.partner { + font-weight: var(--font-weight-bold); + margin-top: calc(var(--spacer) / 8); + margin-bottom: 0; +} + +.badge { + composes: badge from '../atoms/Badge.module.css'; + border-radius: 50%; + width: var(--font-size-h4); + height: var(--font-size-h4); + padding: 0.15rem; + vertical-align: middle; + margin-right: 0.2rem; + position: relative; + top: -0.1rem; +} + +.badge svg { + fill: currentColor; + display: inline-block; + width: 100%; + height: 100%; +} diff --git a/src/components/atoms/Partner.tsx b/src/components/atoms/Partner.tsx new file mode 100644 index 000000000..d0cd85a76 --- /dev/null +++ b/src/components/atoms/Partner.tsx @@ -0,0 +1,48 @@ +import React, { ReactElement } from 'react' +import { ReactComponent as PartnerIcon } from '../../images/partner.svg' +import styles from './Partner.module.css' +import classNames from 'classnames/bind' +import Tooltip from './Tooltip' +import { PartnerData } from '@oceanprotocol/list-datapartners/types' + +const cx = classNames.bind(styles) + +export function PartnerBadge(): ReactElement { + return ( + + + + ) +} + +export default function Partner({ + partner, + className +}: { + partner: PartnerData + className?: string +}): ReactElement { + const styleClasses = cx({ + partner: true, + [className]: className + }) + + return ( + + + Ocean Protocol{' '} + + Data Partner + + + } + placement="top" + > + + {partner.name} + + + ) +} diff --git a/src/components/atoms/Price/PriceUnit.module.css b/src/components/atoms/Price/PriceUnit.module.css index 332aa7224..3557bfefb 100644 --- a/src/components/atoms/Price/PriceUnit.module.css +++ b/src/components/atoms/Price/PriceUnit.module.css @@ -28,4 +28,5 @@ .badge { vertical-align: middle; margin-left: calc(var(--spacer) / 6); + background: var(--color-secondary); } diff --git a/src/components/molecules/AssetTitle.module.css b/src/components/molecules/AssetListTitle.module.css similarity index 100% rename from src/components/molecules/AssetTitle.module.css rename to src/components/molecules/AssetListTitle.module.css diff --git a/src/components/molecules/AssetListTitle.tsx b/src/components/molecules/AssetListTitle.tsx new file mode 100644 index 000000000..20035346f --- /dev/null +++ b/src/components/molecules/AssetListTitle.tsx @@ -0,0 +1,27 @@ +import { useMetadata } from '@oceanprotocol/react' +import { Link } from 'gatsby' +import React, { ReactElement } from 'react' +import { useDataPartner } from '../../hooks/useDataPartner' +import { PartnerBadge } from '../atoms/Partner' +import styles from './AssetListTitle.module.css' + +export default function AssetListTitle({ + did, + title, + owner +}: { + did?: string + title?: string + owner?: string +}): ReactElement { + const metadata = useMetadata(did) + const { partner } = useDataPartner(owner) + + return ( +

+ + {partner && } {title || metadata.title || did} + +

+ ) +} diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css index 14c7a8c94..aaa8f9a7c 100644 --- a/src/components/molecules/AssetTeaser.module.css +++ b/src/components/molecules/AssetTeaser.module.css @@ -15,6 +15,7 @@ } .content { + margin-top: calc(var(--spacer) / 2); overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; @@ -29,7 +30,13 @@ .title { font-size: var(--font-size-large); - margin-bottom: calc(var(--spacer) / 2); + margin-top: calc(var(--spacer) / 12); + margin-bottom: 0; +} + +.partner { + font-size: var(--font-size-small); + margin-top: calc(var(--spacer) / 8); } .foot { @@ -53,5 +60,5 @@ } .symbol { - display: inline-block; + display: block; } diff --git a/src/components/molecules/AssetTeaser.stories.tsx b/src/components/molecules/AssetTeaser.stories.tsx index 117b93cc5..63a4c445f 100644 --- a/src/components/molecules/AssetTeaser.stories.tsx +++ b/src/components/molecules/AssetTeaser.stories.tsx @@ -7,9 +7,4 @@ export default { title: 'Molecules/Asset Teaser' } -export const Default = () => ( - -) +export const Default = () => diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 38851155e..578f5419f 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -1,23 +1,25 @@ import React from 'react' import { Link } from 'gatsby' import Dotdotdot from 'react-dotdotdot' -import { MetadataMarket } from '../../@types/MetaData' import Price from '../atoms/Price' import styles from './AssetTeaser.module.css' import { DDO } from '@oceanprotocol/lib' import removeMarkdown from 'remove-markdown' import Tooltip from '../atoms/Tooltip' +import { useMetadata } from '@oceanprotocol/react' +import Partner from '../atoms/Partner' +import { useDataPartner } from '../../hooks/useDataPartner' declare type AssetTeaserProps = { ddo: DDO - metadata: MetadataMarket } -const AssetTeaser: React.FC = ({ - ddo, - metadata -}: AssetTeaserProps) => { - const { name } = metadata.main +const AssetTeaser: React.FC = ({ ddo }: AssetTeaserProps) => { + const { owner } = useMetadata(ddo) + const { partner } = useDataPartner(owner) + + const { attributes } = ddo.findServiceByType('metadata') + const { name } = attributes.main const { dataTokenInfo } = ddo const isCompute = Boolean(ddo.findServiceByType('compute')) @@ -32,12 +34,14 @@ const AssetTeaser: React.FC = ({ {dataTokenInfo?.symbol}

{name}

- + {partner && } {isCompute &&
Compute
}
- {removeMarkdown(metadata?.additionalInformation?.description || '')} + {removeMarkdown( + attributes?.additionalInformation?.description || '' + )}
diff --git a/src/components/molecules/AssetTitle.tsx b/src/components/molecules/AssetTitle.tsx deleted file mode 100644 index faedf45d3..000000000 --- a/src/components/molecules/AssetTitle.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useMetadata } from '@oceanprotocol/react' -import { Link } from 'gatsby' -import React, { ReactElement } from 'react' -import styles from './AssetTitle.module.css' - -export default function AssetTitle({ - did, - title -}: { - did?: string - title?: string -}): ReactElement { - const metadata = useMetadata(did) - - return ( -

- {title || metadata.title || did} -

- ) -} diff --git a/src/components/molecules/Bookmarks.tsx b/src/components/molecules/Bookmarks.tsx index 9bcf94cb2..cf46614b2 100644 --- a/src/components/molecules/Bookmarks.tsx +++ b/src/components/molecules/Bookmarks.tsx @@ -6,7 +6,7 @@ import { useOcean } from '@oceanprotocol/react' import Price from '../atoms/Price' import Tooltip from '../atoms/Tooltip' import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper' -import AssetTitle from './AssetTitle' +import AssetTitle from './AssetListTitle' async function getAssetsBookmarked( bookmarks: string[], @@ -28,7 +28,13 @@ const columns = [ name: 'Data Set', selector: function getAssetRow(row: DDO) { const { attributes } = row.findServiceByType('metadata') - return + return ( + + ) }, maxWidth: '45rem', grow: 1 diff --git a/src/components/molecules/PoolTransactions.tsx b/src/components/molecules/PoolTransactions.tsx index fef36750c..05681397c 100644 --- a/src/components/molecules/PoolTransactions.tsx +++ b/src/components/molecules/PoolTransactions.tsx @@ -4,7 +4,7 @@ import React, { ReactElement, useEffect, useState } from 'react' import EtherscanLink from '../atoms/EtherscanLink' import Time from '../atoms/Time' import Table from '../atoms/Table' -import AssetTitle from './AssetTitle' +import AssetTitle from './AssetListTitle' import styles from './PoolTransactions.module.css' import { formatCurrency } from '@coingecko/cryptoformat' import { useUserPreferences } from '../../providers/UserPreferences' diff --git a/src/components/organisms/AssetContent/Byline.module.css b/src/components/organisms/AssetContent/Byline.module.css new file mode 100644 index 000000000..a49dcc043 --- /dev/null +++ b/src/components/organisms/AssetContent/Byline.module.css @@ -0,0 +1,31 @@ +.byline { + display: inline-block; +} + +@media (min-width: 40rem) { + .bylineLinks { + display: inline; + } +} + +.bylineLinks a { + margin-left: calc(var(--spacer) / 3); + color: inherit; + font-size: var(--font-size-mini); +} + +.bylineLinks a:first-child { + margin-left: 0; +} + +.bylineLinks a:hover, +.bylineLinks a:focus { + color: var(--brand-pink); +} + +.bylineExternal { + width: 0.6em; + height: 0.6em; + display: inline-block; + fill: var(--brand-grey-light); +} diff --git a/src/components/organisms/AssetContent/Byline.tsx b/src/components/organisms/AssetContent/Byline.tsx new file mode 100644 index 000000000..5ab932e4c --- /dev/null +++ b/src/components/organisms/AssetContent/Byline.tsx @@ -0,0 +1,48 @@ +import React, { ReactElement } from 'react' +import styles from './Byline.module.css' +import { accountTruncate } from '../../../utils/wallet' +import Partner from '../../atoms/Partner' +import { ReactComponent as External } from '../../../images/external.svg' +import { Link } from 'gatsby' +import EtherscanLink from '../../atoms/EtherscanLink' +import { useOcean } from '@oceanprotocol/react' +import { useDataPartner } from '../../../hooks/useDataPartner' + +export default function Byline({ + owner, + prefix +}: { + owner: string + prefix?: string +}): ReactElement { + const { networkId } = useOcean() + const { partner } = useDataPartner(owner) + + return ( +
+ {prefix} + + {partner ? ( + + ) : ( + owner && accountTruncate(owner) + )} + +
+ {' — '} + {partner && + Object.entries(partner.links).map(([key, value]) => ( + + {key} + + ))} + + Etherscan + +
+
+ ) +} diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx index d7f9c93cd..fbd33ee54 100644 --- a/src/components/organisms/AssetContent/MetaFull.tsx +++ b/src/components/organisms/AssetContent/MetaFull.tsx @@ -4,6 +4,7 @@ import MetaItem from './MetaItem' import styles from './MetaFull.module.css' import { MetadataMarket } from '../../../@types/MetaData' import { DDO } from '@oceanprotocol/lib' +import Byline from './Byline' export default function MetaFull({ ddo, @@ -12,12 +13,13 @@ export default function MetaFull({ ddo: DDO metadata: MetadataMarket }): ReactElement { - const { id } = ddo + const { id, publicKey } = ddo const { dateCreated, datePublished } = metadata.main return (
+ } /> {metadata?.additionalInformation?.categories && ( }
-