From 91802e7a5153a6c02500a40d1e3b80189c283111 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 5 Aug 2020 11:33:40 +0200 Subject: [PATCH 1/9] fix debug code blocks wrapping --- src/global/_code.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/global/_code.css b/src/global/_code.css index bfe882ed9..0eb5aa623 100644 --- a/src/global/_code.css +++ b/src/global/_code.css @@ -22,14 +22,11 @@ pre { max-height: 800px; width: 100%; position: relative; + white-space: pre-wrap; } pre code { padding: 0; - white-space: pre; display: block; - overflow-wrap: normal; - word-wrap: normal; - word-break: normal; width: 100%; } From 19ccb80a48a5abaeb83e4fffcf0267112312d784 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 5 Aug 2020 11:54:10 +0200 Subject: [PATCH 2/9] remove cost, capture price type --- src/@types/MetaData.d.ts | 2 +- src/components/atoms/Tabs.tsx | 10 ++++++++-- src/components/molecules/FormFields/Price/index.tsx | 11 ++++++++--- src/components/pages/Publish/index.tsx | 5 ++--- src/models/FormPublish.ts | 8 +++++--- 5 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index 8d75484ee..855973144 100644 --- a/src/@types/MetaData.d.ts +++ b/src/@types/MetaData.d.ts @@ -22,8 +22,8 @@ export interface MetadataPublishForm { author: string license: string price: { - cost: number tokensToMint: number + type: 'simple' | 'advanced' | string } access: 'Download' | 'Compute' | string termsAndConditions: boolean diff --git a/src/components/atoms/Tabs.tsx b/src/components/atoms/Tabs.tsx index 88f2f0878..62abb6012 100644 --- a/src/components/atoms/Tabs.tsx +++ b/src/components/atoms/Tabs.tsx @@ -9,16 +9,22 @@ interface TabsItem { export default function Tabs({ items, - className + className, + handleTabChange }: { items: TabsItem[] className?: string + handleTabChange?: (tabName: string) => void }): ReactElement { return ( {items.map((item) => ( - + handleTabChange(item.title)} + > {item.title} ))} diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index c07761eb9..9a0a264ce 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -9,7 +9,6 @@ import { useField } from 'formik' export default function Price(props: InputProps): ReactElement { const [field, meta, helpers] = useField(props) - const cost = 1 const weightOnDataToken = '90' // in % const [ocean, setOcean] = useState('1') const [tokensToMint, setTokensToMint] = useState() @@ -18,11 +17,17 @@ export default function Price(props: InputProps): ReactElement { setOcean(event.target.value) } + function handleTabChange(tabName: string) { + const type = tabName.startsWith('Simple') ? 'simple' : 'advanced' + helpers.setValue({ ...field.value, type }) + } + // Always update everything when ocean changes useEffect(() => { const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10) setTokensToMint(tokensToMint) - helpers.setValue({ cost, tokensToMint }) + console.log(field.value) + helpers.setValue({ ...field.value, tokensToMint }) }, [ocean]) const tabs = [ @@ -45,7 +50,7 @@ export default function Price(props: InputProps): ReactElement { return (
- + 
         {JSON.stringify(field.value)}
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index eac998386..887b690f5 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -28,20 +28,19 @@ export default function PublishPage({ `) const metadata = transformPublishFormToMetadata(values) - const { cost, tokensToMint } = values.price + const { tokensToMint, type } = values.price const serviceType = values.access === 'Download' ? 'access' : 'compute' console.log(` Transformed metadata values: ---------------------- ${JSON.stringify(metadata, null, 2)} - Cost: ${cost} Tokens to mint: ${tokensToMint} `) try { const ddo = await publish(metadata as any, tokensToMint.toString(), [ - { serviceType, cost: cost.toString() } + { serviceType } ]) if (publishError) { diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts index d4cfc3a9f..5f4c5d1e0 100644 --- a/src/models/FormPublish.ts +++ b/src/models/FormPublish.ts @@ -7,8 +7,10 @@ export const validationSchema = Yup.object().shape({ name: Yup.string().required('Required'), author: Yup.string().required('Required'), price: Yup.object().shape({ - cost: Yup.number().required('Required'), - tokensToMint: Yup.number().required('Required') + tokensToMint: Yup.number().required('Required'), + type: Yup.string() + .matches(/simple|advanced/g) + .required('Required') }), files: Yup.array().required('Required').nullable(), description: Yup.string().required('Required'), @@ -28,7 +30,7 @@ export const initialValues: MetadataPublishForm = { name: undefined, author: undefined, price: { - cost: 1, + type: 'simple', tokensToMint: 1 }, files: undefined, From 8b4363a8667d99667ef3bbb5666673a772616a6c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 5 Aug 2020 13:11:39 +0200 Subject: [PATCH 3/9] remove price conversion --- src/components/atoms/Price/index.tsx | 7 +++---- src/components/organisms/AssetActions/Consume.tsx | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/atoms/Price/index.tsx b/src/components/atoms/Price/index.tsx index 2cbad0a91..e12263084 100644 --- a/src/components/atoms/Price/index.tsx +++ b/src/components/atoms/Price/index.tsx @@ -1,5 +1,4 @@ import React, { ReactElement } from 'react' -import { fromWei } from 'web3-utils' import classNames from 'classnames/bind' import PriceConversion from './Conversion' import styles from './index.module.css' @@ -11,7 +10,7 @@ export default function Price({ className, small }: { - price: string + price: string // expects price in OCEAN, not wei className?: string small?: boolean }): ReactElement { @@ -27,8 +26,8 @@ export default function Price({ 'Free' ) : ( <> - OCEAN {fromWei(price)} - + OCEAN {price} + ) diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index 0594e6a39..1388a2959 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/src/components/organisms/AssetActions/Consume.tsx @@ -52,7 +52,7 @@ export default function Consume({
- {/* */} +
From 82049e94468c2d60442c77d26bcba7d6b8f302bd Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 5 Aug 2020 13:21:14 +0200 Subject: [PATCH 4/9] handle all price output --- src/components/molecules/AssetTeaser.tsx | 7 ++++++- .../organisms/AssetActions/Compute.tsx | 17 +++++++++++---- .../organisms/AssetActions/Consume.tsx | 12 +++++++---- .../organisms/AssetActions/index.tsx | 21 ++++++++++++++----- 4 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index ff21d9e9b..ab6e52e64 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -6,6 +6,7 @@ import Price from '../atoms/Price' import styles from './AssetTeaser.module.css' import { useMetadata } from '@oceanprotocol/react' import { DDO } from '@oceanprotocol/lib' +import Loader from '../atoms/Loader' declare type AssetTeaserProps = { ddo: DDO @@ -47,7 +48,11 @@ const AssetTeaser: React.FC = ({
- {price && } + {price ? ( + + ) : ( + + )}
diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx index a80c3a666..f62d84086 100644 --- a/src/components/organisms/AssetActions/Compute.tsx +++ b/src/components/organisms/AssetActions/Compute.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect, ReactElement } from 'react' import { DDO } from '@oceanprotocol/lib' -import { fromWei } from 'web3-utils' import compareAsBN, { Comparisson } from '../../../utils/compareAsBN' import Loader from '../../atoms/Loader' import Web3Feedback from '../../molecules/Wallet/Feedback' @@ -17,7 +16,13 @@ import Button from '../../atoms/Button' import Input from '../../atoms/Input' import Alert from '../../atoms/Alert' -export default function Compute({ ddo }: { ddo: DDO }): ReactElement { +export default function Compute({ + ddo, + price +}: { + ddo: DDO + price: string // in OCEAN, not wei +}): ReactElement { const { ocean } = useOcean() const { compute, isLoading, computeStepText, computeError } = useCompute() const computeService = ddo.findServiceByType('compute').attributes.main @@ -36,7 +41,7 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement { const [file, setFile] = useState(null) const [isTermsAgreed, setIsTermsAgreed] = useState(true) - const isFree = computeService.cost === '0' + const isFree = price === '0' const isComputeButtonDisabled = isJobStarting || @@ -96,7 +101,11 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement { return (
- + {price ? ( + + ) : ( + + )}
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index 1388a2959..6ceab1f9b 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/src/components/organisms/AssetActions/Consume.tsx @@ -1,5 +1,4 @@ import React, { ReactElement } from 'react' -import { fromWei } from 'web3-utils' import { toast } from 'react-toastify' import { File as FileMetadata, DDO } from '@oceanprotocol/lib' import compareAsBN, { Comparisson } from '../../../utils/compareAsBN' @@ -13,17 +12,18 @@ import { useOcean, useConsume } from '@oceanprotocol/react' export default function Consume({ ddo, + price, file }: { ddo: DDO + price: string // in OCEAN, not wei file: FileMetadata }): ReactElement { const accessService = ddo.findServiceByType('access') - const { cost } = accessService.attributes.main const { ocean } = useOcean() const { consumeStepText, consume, consumeError } = useConsume() - const isFree = cost === '0' + const isFree = price === '0' // const isBalanceSufficient = // isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte) const isDisabled = !ocean @@ -52,7 +52,11 @@ export default function Consume({
- + {price ? ( + + ) : ( + + )}
diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index e64213981..aac0c6252 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/src/components/organisms/AssetActions/index.tsx @@ -1,10 +1,11 @@ -import React, { ReactElement } from 'react' +import React, { ReactElement, useState, useEffect } from 'react' import styles from './index.module.css' import Compute from './Compute' import Consume from './Consume' import { MetadataMarket } from '../../../@types/Metadata' import { DDO } from '@oceanprotocol/lib' import Tabs from '../../atoms/Tabs' +import { useMetadata } from '@oceanprotocol/react' export default function AssetActions({ metadata, @@ -13,12 +14,22 @@ export default function AssetActions({ metadata: MetadataMarket ddo: DDO }): ReactElement { - const { access } = metadata.additionalInformation - const isCompute = access && access === 'Compute' + const { getBestPrice } = useMetadata(ddo.id) + const [price, setPrice] = useState() + + useEffect(() => { + async function init() { + const price = await getBestPrice(ddo.dataToken) + price && setPrice(price) + } + init() + }, []) + + const isCompute = Boolean(ddo.findServiceByType('compute')) const UseContent = isCompute ? ( - + ) : ( - + ) const tabs = [ From 2e63b868d931f9626941b13d5fa5c2ae6298edd7 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 5 Aug 2020 13:24:01 +0200 Subject: [PATCH 5/9] loader message fix --- src/components/atoms/Loader.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/atoms/Loader.module.css b/src/components/atoms/Loader.module.css index be55dda04..8b09217ca 100644 --- a/src/components/atoms/Loader.module.css +++ b/src/components/atoms/Loader.module.css @@ -14,6 +14,7 @@ } .message { + font-weight: var(--font-weight-base); font-size: var(--font-size-small); color: var(--brand-grey-light); display: block; From 9aa921c22c99185316a72213d639a32ae86364e3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 5 Aug 2020 13:32:37 +0200 Subject: [PATCH 6/9] restore asset teaser compute label --- src/components/molecules/AssetTeaser.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index ab6e52e64..d2f9454fe 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -21,6 +21,7 @@ const AssetTeaser: React.FC = ({ const { name } = metadata.main const { description } = metadata.additionalInformation + const isCompute = Boolean(ddo.findServiceByType('compute')) const { getBestPrice } = useMetadata(ddo.id) const [price, setPrice] = useState() @@ -37,9 +38,7 @@ const AssetTeaser: React.FC = ({

{name}

- {/* {access === 'Compute' && ( -
{access}
- )} */} + {isCompute &&
Compute
}
From 991a646dd7f4b1d942a7d89ff0c1c11a632f5801 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 5 Aug 2020 13:33:48 +0200 Subject: [PATCH 7/9] small price on asset teaser --- src/components/atoms/Price/index.module.css | 2 +- src/components/molecules/AssetTeaser.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/Price/index.module.css b/src/components/atoms/Price/index.module.css index 357a91056..43a071ee5 100644 --- a/src/components/atoms/Price/index.module.css +++ b/src/components/atoms/Price/index.module.css @@ -12,6 +12,6 @@ .small { /* lazy making-conversion-smaller-with-same-markup */ - transform: scale(0.7); + transform: scale(0.8); transform-origin: left 80%; } diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index d2f9454fe..239797de8 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -48,7 +48,7 @@ const AssetTeaser: React.FC = ({