From aa7fc3c9f0903680151489dbcfffcba49d1351b6 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 20 Jul 2020 23:28:44 +0200 Subject: [PATCH 01/30] prepare custom price widget --- src/components/atoms/Input/InputElement.tsx | 3 +++ .../FormFields/Price/index.module.css | 26 +++++++++++++++++++ .../molecules/FormFields/Price/index.tsx | 20 ++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 src/components/molecules/FormFields/Price/index.module.css create mode 100644 src/components/molecules/FormFields/Price/index.tsx diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx index ec780206d..36a1b21b5 100644 --- a/src/components/atoms/Input/InputElement.tsx +++ b/src/components/atoms/Input/InputElement.tsx @@ -4,6 +4,7 @@ import styles from './InputElement.module.css' import { InputProps } from '.' import FilesInput from '../../molecules/FormFields/FilesInput' import Terms from '../../molecules/FormFields/Terms' +import Price from '../../molecules/FormFields/Price' export default function InputElement(props: InputProps): ReactElement { const { type, options, rows, name, value } = props @@ -56,6 +57,8 @@ export default function InputElement(props: InputProps): ReactElement { ) case 'files': return + case 'price': + return case 'terms': return default: diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css new file mode 100644 index 000000000..599fb566f --- /dev/null +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -0,0 +1,26 @@ +.price { + display: flex; + gap: calc(var(--spacer) / 2); + justify-content: center; + background: var(--brand-grey-dimmed); + margin-left: -2rem; + margin-right: -2rem; + padding: calc(var(--spacer) * 1.5) var(--spacer); +} + +.price > div { + max-width: 8rem; + text-align: center; +} + +.price label { + color: var(--color-secondary); +} + +.price input { + width: 100%; + text-align: center; + /* color: var(--brand-white); + background: rgba(255, 255, 255, 0.1); + border-color: var(--brand-grey); */ +} diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx new file mode 100644 index 000000000..6b5992761 --- /dev/null +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -0,0 +1,20 @@ +import React, { ReactElement } from 'react' +import { InputProps } from '../../../atoms/Input' +import InputElement from '../../../atoms/Input/InputElement' +import styles from './index.module.css' +import Label from '../../../atoms/Input/Label' + +export default function Price(props: InputProps): ReactElement { + return ( +
+
+ + +
+
+ + +
+
+ ) +} From 5d10f259782a97054d961b3bd9aabd6fd92f4d79 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 20 Jul 2020 23:46:18 +0200 Subject: [PATCH 02/30] style change --- .../molecules/FormFields/Price/index.module.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index 599fb566f..0f76e03c8 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -2,10 +2,10 @@ display: flex; gap: calc(var(--spacer) / 2); justify-content: center; + border: 1px solid var(--brand-grey-lighter); background: var(--brand-grey-dimmed); - margin-left: -2rem; - margin-right: -2rem; - padding: calc(var(--spacer) * 1.5) var(--spacer); + border-radius: var(--border-radius); + padding: var(--spacer); } .price > div { @@ -20,7 +20,4 @@ .price input { width: 100%; text-align: center; - /* color: var(--brand-white); - background: rgba(255, 255, 255, 0.1); - border-color: var(--brand-grey); */ } From 5bb3744dc3d0b18182573c76d5505eb6b8a8750f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 21 Jul 2020 11:56:53 +0200 Subject: [PATCH 03/30] collect cost & tokensToMint in form state --- content/pages/publish.json | 3 +-- src/@types/MetaData.d.ts | 5 ++++- src/components/atoms/Input/InputElement.tsx | 1 - .../molecules/FormFields/Price/index.tsx | 22 +++++++++++++++---- src/components/pages/Publish/Preview.tsx | 1 + src/components/pages/Publish/index.tsx | 8 +++---- src/components/pages/Publish/validation.ts | 10 +++++++-- src/pages/publish.tsx | 1 - 8 files changed, 36 insertions(+), 15 deletions(-) diff --git a/content/pages/publish.json b/content/pages/publish.json index af3d784a8..bfee73d99 100644 --- a/content/pages/publish.json +++ b/content/pages/publish.json @@ -35,11 +35,10 @@ "required": true }, { - "name": "cost", + "name": "price", "label": "Price", "help": "Set your price for accessing this data set in Ocean Tokens.", "type": "price", - "min": 1, "required": true }, { diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index 766651bb0..f49368b38 100644 --- a/src/@types/MetaData.d.ts +++ b/src/@types/MetaData.d.ts @@ -24,7 +24,10 @@ export interface MetadataPublishForm { files: string | File[] author: string license: string - cost: string + price: { + cost: string + tokensToMint: string + } access: 'Download' | 'Compute' | string termsAndConditions: boolean // ---- optional fields ---- diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx index 36a1b21b5..80d5c869d 100644 --- a/src/components/atoms/Input/InputElement.tsx +++ b/src/components/atoms/Input/InputElement.tsx @@ -68,7 +68,6 @@ export default function InputElement(props: InputProps): ReactElement { className={styles.input} name={name} {...props} - value={value || ''} type={type || 'text'} /> ) diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index 6b5992761..24d97e523 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -3,17 +3,31 @@ import { InputProps } from '../../../atoms/Input' import InputElement from '../../../atoms/Input/InputElement' import styles from './index.module.css' import Label from '../../../atoms/Input/Label' +import { useFormikContext } from 'formik' +import { MetadataPublishForm } from '../../../../@types/MetaData' export default function Price(props: InputProps): ReactElement { + const { values } = useFormikContext() + return (
- - + +
- - + +
) diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx index 212f8370a..f89e9e80a 100644 --- a/src/components/pages/Publish/Preview.tsx +++ b/src/components/pages/Publish/Preview.tsx @@ -38,6 +38,7 @@ export default function Preview({ key.includes('tags') || key.includes('files') || key.includes('termsAndConditions') || + key.includes('price') || value === undefined || value === '' ) diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 669e1a03c..4e870b3b7 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -8,7 +8,7 @@ import PublishForm from './PublishForm' import Web3Feedback from '../../molecules/Wallet/Feedback' import { FormContent } from '../../../@types/Form' import { initialValues, validationSchema } from './validation' -import { MetadataPublishForm } from '../../../@types/Metadata' +import { MetadataPublishForm, MetadataMarket } from '../../../@types/Metadata' import { transformPublishFormToMetadata } from './utils' import Preview from './Preview' @@ -28,20 +28,20 @@ export default function PublishPage({ `) const metadata = transformPublishFormToMetadata(values) - const tokensToMint = '4' // how to know this? + const { cost, tokensToMint } = values.price const serviceType = values.access === 'Download' ? 'access' : 'compute' console.log(` Transformed metadata values: ---------------------- ${JSON.stringify(metadata, null, 2)} - Cost: 1 + Cost: ${cost} Tokens to mint: ${tokensToMint} `) try { const ddo = await publish(metadata as any, tokensToMint, [ - { serviceType, cost: '1' } + { serviceType, cost } ]) if (publishError) { diff --git a/src/components/pages/Publish/validation.ts b/src/components/pages/Publish/validation.ts index 6e629adec..e2c948855 100644 --- a/src/components/pages/Publish/validation.ts +++ b/src/components/pages/Publish/validation.ts @@ -6,7 +6,10 @@ export const validationSchema = Yup.object().shape({ // ---- required fields ---- name: Yup.string().required('Required'), author: Yup.string().required('Required'), - cost: Yup.string().required('Required'), + price: Yup.object().shape({ + cost: Yup.string().required('Required'), + tokensToMint: Yup.string().required('Required') + }), files: Yup.array().required('Required').nullable(), description: Yup.string().required('Required'), license: Yup.string().required('Required'), @@ -24,7 +27,10 @@ export const validationSchema = Yup.object().shape({ export const initialValues: MetadataPublishForm = { name: '', author: '', - cost: '', + price: { + cost: '', + tokensToMint: '' + }, files: '', description: '', license: '', diff --git a/src/pages/publish.tsx b/src/pages/publish.tsx index 0ed58d5af..b8ffd4736 100644 --- a/src/pages/publish.tsx +++ b/src/pages/publish.tsx @@ -32,7 +32,6 @@ export const contentQuery = graphql` type required options - min } success } From bc30a13597d3f32c6f63c7085cebb027770f6903 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 23 Jul 2020 12:26:08 +0200 Subject: [PATCH 04/30] tabs component --- src/components/atoms/Tabs.module.css | 25 +++++++++++++ src/components/atoms/Tabs.tsx | 34 +++++++++++++++++ .../organisms/AssetActions/index.module.css | 26 ------------- .../organisms/AssetActions/index.tsx | 37 +++++++++---------- 4 files changed, 77 insertions(+), 45 deletions(-) create mode 100644 src/components/atoms/Tabs.module.css create mode 100644 src/components/atoms/Tabs.tsx diff --git a/src/components/atoms/Tabs.module.css b/src/components/atoms/Tabs.module.css new file mode 100644 index 000000000..f07939de6 --- /dev/null +++ b/src/components/atoms/Tabs.module.css @@ -0,0 +1,25 @@ +.tabList { + text-align: center; + border-bottom: 1px solid var(--brand-grey-lighter); + padding-top: calc(var(--spacer) / 2); + padding-bottom: calc(var(--spacer) / 2); +} + +.tab { + display: inline-block; + padding: calc(var(--spacer) / 12) var(--spacer); + border-radius: var(--border-radius); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + cursor: pointer; + color: var(--brand-grey-light); +} + +.tab[aria-selected='true'] { + background: var(--brand-black); + color: var(--brand-white); +} + +.tabContent { + padding: var(--spacer); +} diff --git a/src/components/atoms/Tabs.tsx b/src/components/atoms/Tabs.tsx new file mode 100644 index 000000000..95efa5e34 --- /dev/null +++ b/src/components/atoms/Tabs.tsx @@ -0,0 +1,34 @@ +import React, { ReactElement, ReactNode } from 'react' +import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs' +import styles from './Tabs.module.css' +import shortid from 'shortid' + +interface TabsItem { + title: string + content: ReactNode +} + +export default function Tabs({ + items, + className +}: { + items: TabsItem[] + className?: string +}): ReactElement { + return ( + + + {items.map((item) => ( + + {item.title} + + ))} + +
+ {items.map((item) => ( + {item.content} + ))} +
+ + ) +} diff --git a/src/components/organisms/AssetActions/index.module.css b/src/components/organisms/AssetActions/index.module.css index 6acd2decb..343af92ec 100644 --- a/src/components/organisms/AssetActions/index.module.css +++ b/src/components/organisms/AssetActions/index.module.css @@ -4,29 +4,3 @@ margin: auto; padding: 0; } - -.tabList { - text-align: center; - border-bottom: 1px solid var(--brand-grey-lighter); - padding-top: calc(var(--spacer) / 2); - padding-bottom: calc(var(--spacer) / 2); -} - -.tab { - display: inline-block; - padding: calc(var(--spacer) / 12) var(--spacer); - border-radius: var(--border-radius); - font-weight: var(--font-weight-bold); - text-transform: uppercase; - cursor: pointer; - color: var(--brand-grey-light); -} - -.tab[aria-selected='true'] { - background: var(--brand-black); - color: var(--brand-white); -} - -.tabContent { - padding: var(--spacer); -} diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index e8716f496..e64213981 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/src/components/organisms/AssetActions/index.tsx @@ -1,10 +1,10 @@ import React, { ReactElement } from 'react' -import { Tab, Tabs, TabList, TabPanel } from 'react-tabs' 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' export default function AssetActions({ metadata, @@ -15,23 +15,22 @@ export default function AssetActions({ }): ReactElement { const { access } = metadata.additionalInformation const isCompute = access && access === 'Compute' - - return ( - - - Use - Trade - -
- - {isCompute ? ( - - ) : ( - - )} - - Trade Me -
- + const UseContent = isCompute ? ( + + ) : ( + ) + + const tabs = [ + { + title: 'Use', + content: UseContent + }, + { + title: 'Trade', + content: 'Trade Me' + } + ] + + return } From 1b49413ec75647d3c9e2451f1a720134381c676d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 23 Jul 2020 13:00:06 +0200 Subject: [PATCH 05/30] new price tabs UI --- src/components/atoms/Tabs.module.css | 1 + .../FormFields/Price/index.module.css | 50 +++++++++++++---- .../molecules/FormFields/Price/index.tsx | 55 +++++++++++++++++-- 3 files changed, 92 insertions(+), 14 deletions(-) diff --git a/src/components/atoms/Tabs.module.css b/src/components/atoms/Tabs.module.css index f07939de6..cc5215d74 100644 --- a/src/components/atoms/Tabs.module.css +++ b/src/components/atoms/Tabs.module.css @@ -10,6 +10,7 @@ padding: calc(var(--spacer) / 12) var(--spacer); border-radius: var(--border-radius); font-weight: var(--font-weight-bold); + font-size: var(--font-size-small); text-transform: uppercase; cursor: pointer; color: var(--brand-grey-light); diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index 0f76e03c8..d943a7dec 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -1,23 +1,53 @@ .price { - display: flex; - gap: calc(var(--spacer) / 2); - justify-content: center; border: 1px solid var(--brand-grey-lighter); background: var(--brand-grey-dimmed); border-radius: var(--border-radius); - padding: var(--spacer); } -.price > div { +.content { + padding: 0 calc(var(--spacer) / 2); + text-align: center; +} + +.content label { + color: var(--color-secondary); +} + +.content input { max-width: 8rem; text-align: center; } -.price label { - color: var(--color-secondary); +.content p { + margin-bottom: 0; } -.price input { - width: 100%; - text-align: center; +.simpleInput { + display: flex; + justify-content: center; + margin-bottom: calc(var(--spacer) / 2); +} + +.simpleInput input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.prefix { + border: 1px solid var(--brand-grey-lighter); + display: flex; + align-items: center; + padding-left: calc(var(--spacer) / 2); + padding-right: calc(var(--spacer) / 2); + color: var(--color-secondary); + font-size: var(--font-size-small); + margin-right: -2px; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} + +.advancedInput { + display: flex; + gap: calc(var(--spacer) / 2); + justify-content: center; } diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index 24d97e523..50f412539 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -5,17 +5,43 @@ import styles from './index.module.css' import Label from '../../../atoms/Input/Label' import { useFormikContext } from 'formik' import { MetadataPublishForm } from '../../../../@types/MetaData' +import Tabs from '../../../atoms/Tabs' +import FormHelp from '../../../atoms/Input/Help' export default function Price(props: InputProps): ReactElement { const { values } = useFormikContext() - return ( -
+ const Simple = ( +
+
+ {/* */} +
OCEAN
+ +
+ {props.help} +
+ ) + + const Advanced = ( +
@@ -24,11 +50,32 @@ export default function Price(props: InputProps): ReactElement {
) + + const tabs = [ + { + title: 'Simple', + content: Simple + }, + { + title: 'Advanced', + content: Advanced + } + ] + + return ( +
+ +
+ ) } From 6e33ad92cb2c58f539e544bdf72446a9f09bc55d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 24 Jul 2020 09:00:49 +0200 Subject: [PATCH 06/30] price data structure tweaks --- src/@types/MetaData.d.ts | 4 ++-- src/components/pages/Publish/validation.ts | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index f49368b38..d3a474282 100644 --- a/src/@types/MetaData.d.ts +++ b/src/@types/MetaData.d.ts @@ -25,8 +25,8 @@ export interface MetadataPublishForm { author: string license: string price: { - cost: string - tokensToMint: string + cost: number + tokensToMint: number } access: 'Download' | 'Compute' | string termsAndConditions: boolean diff --git a/src/components/pages/Publish/validation.ts b/src/components/pages/Publish/validation.ts index e2c948855..639afd984 100644 --- a/src/components/pages/Publish/validation.ts +++ b/src/components/pages/Publish/validation.ts @@ -7,8 +7,8 @@ export const validationSchema = Yup.object().shape({ name: Yup.string().required('Required'), author: Yup.string().required('Required'), price: Yup.object().shape({ - cost: Yup.string().required('Required'), - tokensToMint: Yup.string().required('Required') + cost: Yup.number().required('Required'), + tokensToMint: Yup.number().required('Required') }), files: Yup.array().required('Required').nullable(), description: Yup.string().required('Required'), @@ -28,8 +28,8 @@ export const initialValues: MetadataPublishForm = { name: '', author: '', price: { - cost: '', - tokensToMint: '' + cost: 0, + tokensToMint: null }, files: '', description: '', From ef02919e5e7a4c20d536713961101f3bf382468c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 24 Jul 2020 09:13:38 +0200 Subject: [PATCH 07/30] add conversion, tweak default values --- src/components/atoms/Price/Conversion.module.css | 2 +- .../molecules/FormFields/Price/index.module.css | 2 ++ .../molecules/FormFields/Price/index.tsx | 16 +++++++++------- src/components/pages/Publish/validation.ts | 2 +- 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/atoms/Price/Conversion.module.css b/src/components/atoms/Price/Conversion.module.css index 1dedb014e..21c71782d 100644 --- a/src/components/atoms/Price/Conversion.module.css +++ b/src/components/atoms/Price/Conversion.module.css @@ -1,6 +1,6 @@ .conversion { display: inline-block; - font-size: var(--font-size-mini); + font-size: var(--font-size-small); margin-left: calc(var(--spacer) / 6); color: var(--color-secondary); } diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index d943a7dec..7ad682b21 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -25,6 +25,7 @@ .simpleInput { display: flex; justify-content: center; + align-items: center; margin-bottom: calc(var(--spacer) / 2); } @@ -35,6 +36,7 @@ .prefix { border: 1px solid var(--brand-grey-lighter); + min-height: 43px; display: flex; align-items: center; padding-left: calc(var(--spacer) / 2); diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index 50f412539..f5dc9fbf3 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -7,6 +7,7 @@ import { useFormikContext } from 'formik' import { MetadataPublishForm } from '../../../../@types/MetaData' import Tabs from '../../../atoms/Tabs' import FormHelp from '../../../atoms/Input/Help' +import Conversion from '../../../atoms/Price/Conversion' export default function Price(props: InputProps): ReactElement { const { values } = useFormikContext() @@ -21,11 +22,14 @@ export default function Price(props: InputProps): ReactElement { value={ ((values as MetadataPublishForm).price && (values as MetadataPublishForm).price.cost) || - '' + 0 } name="price.cost" type="number" /> +
{props.help} @@ -38,9 +42,8 @@ export default function Price(props: InputProps): ReactElement { Date: Tue, 28 Jul 2020 14:32:45 +0200 Subject: [PATCH 08/30] form model fixes --- src/components/pages/Publish/index.tsx | 12 +++++++----- .../Publish/validation.ts => models/FormPublish.ts} | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) rename src/{components/pages/Publish/validation.ts => models/FormPublish.ts} (94%) diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 4e870b3b7..4915befa3 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -7,8 +7,8 @@ import styles from './index.module.css' import PublishForm from './PublishForm' import Web3Feedback from '../../molecules/Wallet/Feedback' import { FormContent } from '../../../@types/Form' -import { initialValues, validationSchema } from './validation' -import { MetadataPublishForm, MetadataMarket } from '../../../@types/Metadata' +import { initialValues, validationSchema } from '../../../models/FormPublish' +import { MetadataPublishForm } from '../../../@types/Metadata' import { transformPublishFormToMetadata } from './utils' import Preview from './Preview' @@ -40,9 +40,11 @@ export default function PublishPage({ `) try { - const ddo = await publish(metadata as any, tokensToMint, [ - { serviceType, cost } - ]) + const ddo = await publish( + metadata as any, + tokensToMint.toString(), + [{ serviceType, cost: cost.toString() }] + ) if (publishError) { toast.error(publishError) diff --git a/src/components/pages/Publish/validation.ts b/src/models/FormPublish.ts similarity index 94% rename from src/components/pages/Publish/validation.ts rename to src/models/FormPublish.ts index f48ba964d..c9395d26f 100644 --- a/src/components/pages/Publish/validation.ts +++ b/src/models/FormPublish.ts @@ -1,4 +1,4 @@ -import { MetadataPublishForm } from '../../../@types/Metadata' +import { MetadataPublishForm } from '../@types/Metadata' import { File as FileMetadata } from '@oceanprotocol/lib' import * as Yup from 'yup' From 576b9f4c2e3f0984cc5e5f8282a59d11ac593465 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 28 Jul 2020 18:42:07 +0200 Subject: [PATCH 09/30] price field component splitup --- .../FormFields/Price/Advanced.module.css | 9 +++ .../molecules/FormFields/Price/Advanced.tsx | 27 +++++++ .../FormFields/Price/Cost.module.css | 28 ++++++++ .../molecules/FormFields/Price/Cost.tsx | 26 +++++++ .../FormFields/Price/Simple.module.css | 12 ++++ .../molecules/FormFields/Price/Simple.tsx | 17 +++++ .../FormFields/Price/index.module.css | 33 --------- .../molecules/FormFields/Price/index.tsx | 72 ++----------------- 8 files changed, 123 insertions(+), 101 deletions(-) create mode 100644 src/components/molecules/FormFields/Price/Advanced.module.css create mode 100644 src/components/molecules/FormFields/Price/Advanced.tsx create mode 100644 src/components/molecules/FormFields/Price/Cost.module.css create mode 100644 src/components/molecules/FormFields/Price/Cost.tsx create mode 100644 src/components/molecules/FormFields/Price/Simple.module.css create mode 100644 src/components/molecules/FormFields/Price/Simple.tsx diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css new file mode 100644 index 000000000..30d90102e --- /dev/null +++ b/src/components/molecules/FormFields/Price/Advanced.module.css @@ -0,0 +1,9 @@ +.advancedInput { + display: flex; + gap: calc(var(--spacer) / 2); + justify-content: center; + flex-wrap: wrap; +} + +.advancedInput label { +} diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx new file mode 100644 index 000000000..0120df47d --- /dev/null +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -0,0 +1,27 @@ +import React, { ReactElement } from 'react' +import { InputProps } from '../../../atoms/Input' +import InputElement from '../../../atoms/Input/InputElement' +import stylesIndex from './index.module.css' +import styles from './Advanced.module.css' +import Label from '../../../atoms/Input/Label' +import { MetadataPublishForm } from '../../../../@types/MetaData' +import Cost from './Cost' + +export default function Advanced(props: InputProps): ReactElement { + const { price } = props.form.values as MetadataPublishForm + + return ( +
+ +
+ + +
+
+ ) +} diff --git a/src/components/molecules/FormFields/Price/Cost.module.css b/src/components/molecules/FormFields/Price/Cost.module.css new file mode 100644 index 000000000..3d0131835 --- /dev/null +++ b/src/components/molecules/FormFields/Price/Cost.module.css @@ -0,0 +1,28 @@ +.cost { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.cost label { + width: 100%; +} + +.cost input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.prefix { + border: 1px solid var(--brand-grey-lighter); + min-height: 43px; + display: flex; + align-items: center; + padding-left: calc(var(--spacer) / 2); + padding-right: calc(var(--spacer) / 2); + color: var(--color-secondary); + font-size: var(--font-size-small); + margin-right: -2px; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} diff --git a/src/components/molecules/FormFields/Price/Cost.tsx b/src/components/molecules/FormFields/Price/Cost.tsx new file mode 100644 index 000000000..c23b82785 --- /dev/null +++ b/src/components/molecules/FormFields/Price/Cost.tsx @@ -0,0 +1,26 @@ +import React, { ReactElement } from 'react' +import InputElement from '../../../atoms/Input/InputElement' +import styles from './Cost.module.css' +import { MetadataPublishForm } from '../../../../@types/MetaData' +import Conversion from '../../../atoms/Price/Conversion' +import { InputProps } from '../../../atoms/Input' +import Label from '../../../atoms/Input/Label' + +export default function Cost(props: InputProps): ReactElement { + const { price } = props.form.values as MetadataPublishForm + + return ( +
+ + +
OCEAN
+ + +
+ ) +} diff --git a/src/components/molecules/FormFields/Price/Simple.module.css b/src/components/molecules/FormFields/Price/Simple.module.css new file mode 100644 index 000000000..200a835cf --- /dev/null +++ b/src/components/molecules/FormFields/Price/Simple.module.css @@ -0,0 +1,12 @@ +.simple { + margin-bottom: calc(var(--spacer) / 2); + text-align: center; +} + +.simple > div { + justify-content: center; +} + +.simple label { + display: none; +} diff --git a/src/components/molecules/FormFields/Price/Simple.tsx b/src/components/molecules/FormFields/Price/Simple.tsx new file mode 100644 index 000000000..8be0f36f4 --- /dev/null +++ b/src/components/molecules/FormFields/Price/Simple.tsx @@ -0,0 +1,17 @@ +import React, { ReactElement } from 'react' +import stylesIndex from './index.module.css' +import styles from './Simple.module.css' +import FormHelp from '../../../atoms/Input/Help' +import { InputProps } from '../../../atoms/Input' +import Cost from './Cost' + +export default function Simple(props: InputProps): ReactElement { + return ( +
+
+ +
+ {props.help && {props.help}} +
+ ) +} diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index 7ad682b21..90024ce6a 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -6,7 +6,6 @@ .content { padding: 0 calc(var(--spacer) / 2); - text-align: center; } .content label { @@ -21,35 +20,3 @@ .content p { margin-bottom: 0; } - -.simpleInput { - display: flex; - justify-content: center; - align-items: center; - margin-bottom: calc(var(--spacer) / 2); -} - -.simpleInput input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.prefix { - border: 1px solid var(--brand-grey-lighter); - min-height: 43px; - display: flex; - align-items: center; - padding-left: calc(var(--spacer) / 2); - padding-right: calc(var(--spacer) / 2); - color: var(--color-secondary); - font-size: var(--font-size-small); - margin-right: -2px; - border-top-left-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); -} - -.advancedInput { - display: flex; - gap: calc(var(--spacer) / 2); - justify-content: center; -} diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index f5dc9fbf3..747a3da8f 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -1,78 +1,14 @@ import React, { ReactElement } from 'react' import { InputProps } from '../../../atoms/Input' -import InputElement from '../../../atoms/Input/InputElement' import styles from './index.module.css' -import Label from '../../../atoms/Input/Label' -import { useFormikContext } from 'formik' -import { MetadataPublishForm } from '../../../../@types/MetaData' import Tabs from '../../../atoms/Tabs' -import FormHelp from '../../../atoms/Input/Help' -import Conversion from '../../../atoms/Price/Conversion' +import Simple from './Simple' +import Advanced from './Advanced' export default function Price(props: InputProps): ReactElement { - const { values } = useFormikContext() - - const Simple = ( -
-
- {/* */} -
OCEAN
- - -
- {props.help} -
- ) - - const Advanced = ( -
-
- - -
-
- - -
-
- ) - const tabs = [ - { - title: 'Simple', - content: Simple - }, - { - title: 'Advanced', - content: Advanced - } + { title: 'Simple', content: }, + { title: 'Advanced', content: } ] return ( From cbee8a714d2f83647088e37ca2e6374c1e9a0726 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 29 Jul 2020 10:04:09 +0200 Subject: [PATCH 10/30] lots of pricve refactor, build out advanced UI --- content/pages/publish.json | 1 - src/components/atoms/Input/Help.tsx | 20 +++++- .../atoms/Input/InputElement.module.css | 53 +++++++++++++++- src/components/atoms/Input/InputElement.tsx | 16 ++++- src/components/atoms/Input/index.tsx | 6 +- src/components/atoms/Price/Conversion.tsx | 14 ++++- .../FormFields/Price/Advanced.module.css | 11 ++-- .../molecules/FormFields/Price/Advanced.tsx | 63 +++++++++++++++---- .../FormFields/Price/Cost.module.css | 28 --------- .../molecules/FormFields/Price/Cost.tsx | 12 ++-- .../FormFields/Price/Simple.module.css | 7 +-- .../molecules/FormFields/Price/Simple.tsx | 5 +- .../FormFields/Price/index.module.css | 11 ++++ 13 files changed, 183 insertions(+), 64 deletions(-) delete mode 100644 src/components/molecules/FormFields/Price/Cost.module.css diff --git a/content/pages/publish.json b/content/pages/publish.json index bfee73d99..bc1b6ebc2 100644 --- a/content/pages/publish.json +++ b/content/pages/publish.json @@ -37,7 +37,6 @@ { "name": "price", "label": "Price", - "help": "Set your price for accessing this data set in Ocean Tokens.", "type": "price", "required": true }, diff --git a/src/components/atoms/Input/Help.tsx b/src/components/atoms/Input/Help.tsx index 99d98ea90..9152b1fd0 100644 --- a/src/components/atoms/Input/Help.tsx +++ b/src/components/atoms/Input/Help.tsx @@ -1,9 +1,23 @@ import React, { ReactElement } from 'react' import styles from './Help.module.css' import Markdown from '../Markdown' +import classNames from 'classnames/bind' -const FormHelp = ({ children }: { children: string }): ReactElement => ( - -) +const cx = classNames.bind(styles) + +const FormHelp = ({ + children, + className +}: { + children: string + className?: string +}): ReactElement => { + const styleClasses = cx({ + help: true, + [className]: className + }) + + return +} export default FormHelp diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css index d468b5dc9..2f9ef0936 100644 --- a/src/components/atoms/Input/InputElement.module.css +++ b/src/components/atoms/Input/InputElement.module.css @@ -33,7 +33,8 @@ .input[readonly], .input[disabled] { - background-color: var(--brand-grey-lighter); + background-color: var(--brand-grey-dimmed); + color: var(--brand-grey-light); cursor: not-allowed; pointer-events: none; } @@ -84,6 +85,56 @@ padding-left: 0.5rem; } +.prefixGroup, +.postfixGroup { + display: flex; + align-items: center; +} + +.prefixGroup input, +.postfixGroup input { + width: auto; +} + +.prefixGroup input { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.postfixGroup input { + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.prefix, +.postfix { + border: 1px solid var(--brand-grey-lighter); + min-height: 43px; + display: flex; + align-items: center; + padding-left: calc(var(--spacer) / 2); + padding-right: calc(var(--spacer) / 2); + color: var(--color-secondary); + font-size: var(--font-size-small); + transition: border 0.2s ease-out; +} + +.prefix { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} + +.postfix { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +.input:focus + .postfix { + border-color: var(--brand-grey); +} + /* Size modifiers */ .small { diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx index 80d5c869d..3e2645f21 100644 --- a/src/components/atoms/Input/InputElement.tsx +++ b/src/components/atoms/Input/InputElement.tsx @@ -7,7 +7,7 @@ import Terms from '../../molecules/FormFields/Terms' import Price from '../../molecules/FormFields/Price' export default function InputElement(props: InputProps): ReactElement { - const { type, options, rows, name, value } = props + const { type, options, rows, name, prefix, postfix } = props switch (type) { case 'select': @@ -62,7 +62,19 @@ export default function InputElement(props: InputProps): ReactElement { case 'terms': return default: - return ( + return prefix || postfix ? ( +
+ {prefix &&
{prefix}
} + + {postfix &&
{postfix}
} +
+ ) : ( ): ReactElement { diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx index 66a0e9267..345ef1247 100644 --- a/src/components/atoms/Price/Conversion.tsx +++ b/src/components/atoms/Price/Conversion.tsx @@ -2,19 +2,29 @@ import React, { useEffect, useState, ReactElement } from 'react' import useSWR from 'swr' import { fetchData, isBrowser } from '../../../utils' import styles from './Conversion.module.css' +import classNames from 'classnames/bind' + +const cx = classNames.bind(styles) const currencies = 'EUR' // comma-separated list const url = `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}&include_24hr_change=true` export default function Conversion({ price, - update = true + update = true, + className }: { price: string // expects price in OCEAN, not wei update?: boolean + className?: string }): ReactElement { const [priceEur, setPriceEur] = useState('0.00') + const styleClasses = cx({ + conversion: true, + [className]: className + }) + const onSuccess = async (data: { 'ocean-protocol': { eur: number } }) => { if (!data) return if (!price || price === '' || price === '0') { @@ -45,5 +55,5 @@ export default function Conversion({ }) } - return ≈ EUR {priceEur} + return ≈ EUR {priceEur} } diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css index 30d90102e..d307d5b07 100644 --- a/src/components/molecules/FormFields/Price/Advanced.module.css +++ b/src/components/molecules/FormFields/Price/Advanced.module.css @@ -1,9 +1,8 @@ -.advancedInput { - display: flex; - gap: calc(var(--spacer) / 2); - justify-content: center; - flex-wrap: wrap; +.advanced { } -.advancedInput label { +.advanced > div:last-child { + display: grid; + gap: calc(var(--spacer) / 2); + grid-template-columns: 1fr 1fr; } diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 0120df47d..e3eaabbe9 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement } from 'react' +import React, { ReactElement, useState, ChangeEvent } from 'react' import { InputProps } from '../../../atoms/Input' import InputElement from '../../../atoms/Input/InputElement' import stylesIndex from './index.module.css' @@ -6,21 +6,62 @@ import styles from './Advanced.module.css' import Label from '../../../atoms/Input/Label' import { MetadataPublishForm } from '../../../../@types/MetaData' import Cost from './Cost' +import Conversion from '../../../atoms/Price/Conversion' +import FormHelp from '../../../atoms/Input/Help' export default function Advanced(props: InputProps): ReactElement { const { price } = props.form.values as MetadataPublishForm + const [weight, setWeight] = useState('10') + + const liquidity = (price.cost * Number(weight)).toString() + + function handleWeightChange(event: ChangeEvent) { + setWeight(event.target.value) + } return ( -
- -
- - +
+
+ + Set your price for accessing this data set. A Data Token for this data + set worth the entered amount of OCEAN, and a Data Token/OCEAN + liquidity pool will be created with Balancer. + + +
+ +
+ + +
+
+ + + +
+
+ + +
+
) diff --git a/src/components/molecules/FormFields/Price/Cost.module.css b/src/components/molecules/FormFields/Price/Cost.module.css deleted file mode 100644 index 3d0131835..000000000 --- a/src/components/molecules/FormFields/Price/Cost.module.css +++ /dev/null @@ -1,28 +0,0 @@ -.cost { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.cost label { - width: 100%; -} - -.cost input { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.prefix { - border: 1px solid var(--brand-grey-lighter); - min-height: 43px; - display: flex; - align-items: center; - padding-left: calc(var(--spacer) / 2); - padding-right: calc(var(--spacer) / 2); - color: var(--color-secondary); - font-size: var(--font-size-small); - margin-right: -2px; - border-top-left-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); -} diff --git a/src/components/molecules/FormFields/Price/Cost.tsx b/src/components/molecules/FormFields/Price/Cost.tsx index c23b82785..1363ba379 100644 --- a/src/components/molecules/FormFields/Price/Cost.tsx +++ b/src/components/molecules/FormFields/Price/Cost.tsx @@ -1,26 +1,30 @@ import React, { ReactElement } from 'react' import InputElement from '../../../atoms/Input/InputElement' -import styles from './Cost.module.css' import { MetadataPublishForm } from '../../../../@types/MetaData' import Conversion from '../../../atoms/Price/Conversion' import { InputProps } from '../../../atoms/Input' import Label from '../../../atoms/Input/Label' +import stylesIndex from './index.module.css' export default function Cost(props: InputProps): ReactElement { const { price } = props.form.values as MetadataPublishForm return ( -
+
-
OCEAN
+ + -
) } diff --git a/src/components/molecules/FormFields/Price/Simple.module.css b/src/components/molecules/FormFields/Price/Simple.module.css index 200a835cf..47f9feabc 100644 --- a/src/components/molecules/FormFields/Price/Simple.module.css +++ b/src/components/molecules/FormFields/Price/Simple.module.css @@ -1,10 +1,9 @@ .simple { - margin-bottom: calc(var(--spacer) / 2); - text-align: center; } -.simple > div { - justify-content: center; +.simple > div:last-child { + max-width: 13.25rem; + margin: 0 auto; } .simple label { diff --git a/src/components/molecules/FormFields/Price/Simple.tsx b/src/components/molecules/FormFields/Price/Simple.tsx index 8be0f36f4..cb57d00c6 100644 --- a/src/components/molecules/FormFields/Price/Simple.tsx +++ b/src/components/molecules/FormFields/Price/Simple.tsx @@ -9,9 +9,12 @@ export default function Simple(props: InputProps): ReactElement { return (
+ + Set your price for accessing this data set. A Data Token for this data + set worth the entered amount of OCEAN will be created. +
- {props.help && {props.help}}
) } diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index 90024ce6a..d636d4643 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -20,3 +20,14 @@ .content p { margin-bottom: 0; } + +.conversion { + display: block; + padding-left: 5rem; + margin-top: calc(var(--spacer) / 6); +} + +.help { + text-align: center; + margin-bottom: calc(var(--spacer) / 2); +} From 9b6de84a1cfcded449e20b904d87c566f74953fd Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 29 Jul 2020 13:58:33 +0200 Subject: [PATCH 11/30] new calculation --- .../FormFields/Price/Advanced.module.css | 2 +- .../molecules/FormFields/Price/Advanced.tsx | 67 +++++++++++++------ .../molecules/FormFields/Price/Cost.tsx | 2 +- .../FormFields/Price/index.module.css | 2 +- 4 files changed, 50 insertions(+), 23 deletions(-) diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css index d307d5b07..e828fb686 100644 --- a/src/components/molecules/FormFields/Price/Advanced.module.css +++ b/src/components/molecules/FormFields/Price/Advanced.module.css @@ -4,5 +4,5 @@ .advanced > div:last-child { display: grid; gap: calc(var(--spacer) / 2); - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index e3eaabbe9..6de1cbabe 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -11,12 +11,14 @@ import FormHelp from '../../../atoms/Input/Help' export default function Advanced(props: InputProps): ReactElement { const { price } = props.form.values as MetadataPublishForm - const [weight, setWeight] = useState('10') - const liquidity = (price.cost * Number(weight)).toString() + const [ocean, setOcean] = useState('1') + const weight = '90' // in % + const tokensToMint = Number(ocean) * (Number(weight) / 100) + const cost = Number(ocean) / Number(tokensToMint) - function handleWeightChange(event: ChangeEvent) { - setWeight(event.target.value) + function handleOceanChange(event: ChangeEvent) { + setOcean(event.target.value) } return ( @@ -29,40 +31,65 @@ export default function Advanced(props: InputProps): ReactElement {
- +
+ + + + + +
+ +
+ + +
+
+
- + - -
-
- -
+ + {/* Hidden to fields to actually collect form values for Formik state */} + +
) } diff --git a/src/components/molecules/FormFields/Price/Cost.tsx b/src/components/molecules/FormFields/Price/Cost.tsx index 1363ba379..9c848e34e 100644 --- a/src/components/molecules/FormFields/Price/Cost.tsx +++ b/src/components/molecules/FormFields/Price/Cost.tsx @@ -11,7 +11,7 @@ export default function Cost(props: InputProps): ReactElement { return (
- + Date: Wed, 29 Jul 2020 17:37:30 +0200 Subject: [PATCH 12/30] add wallet to advanced price widget, UI tweaks --- .../FormFields/Price/Advanced.module.css | 5 +++++ .../molecules/FormFields/Price/Advanced.tsx | 10 ++++++++-- .../molecules/FormFields/Price/index.tsx | 4 ++-- src/components/molecules/Wallet/Account.tsx | 16 +++++++++++++--- 4 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css index e828fb686..226db2e6a 100644 --- a/src/components/molecules/FormFields/Price/Advanced.module.css +++ b/src/components/molecules/FormFields/Price/Advanced.module.css @@ -6,3 +6,8 @@ gap: calc(var(--spacer) / 2); grid-template-columns: 1fr 1fr 1fr; } + +.wallet > button { + margin: calc(var(--spacer) / 2) auto var(--spacer) auto; + display: block; +} diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 6de1cbabe..24caf6733 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -8,14 +8,16 @@ import { MetadataPublishForm } from '../../../../@types/MetaData' import Cost from './Cost' import Conversion from '../../../atoms/Price/Conversion' import FormHelp from '../../../atoms/Input/Help' +import Wallet from '../../Wallet' export default function Advanced(props: InputProps): ReactElement { const { price } = props.form.values as MetadataPublishForm - const [ocean, setOcean] = useState('1') + const cost = '1' const weight = '90' // in % + + const [ocean, setOcean] = useState('1') const tokensToMint = Number(ocean) * (Number(weight) / 100) - const cost = Number(ocean) / Number(tokensToMint) function handleOceanChange(event: ChangeEvent) { setOcean(event.target.value) @@ -30,6 +32,10 @@ export default function Advanced(props: InputProps): ReactElement { liquidity pool will be created with Balancer. + +
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index 747a3da8f..7c87aeca3 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -7,8 +7,8 @@ import Advanced from './Advanced' export default function Price(props: InputProps): ReactElement { const tabs = [ - { title: 'Simple', content: }, - { title: 'Advanced', content: } + { title: 'Simple: Fixed', content: }, + { title: 'Advanced: Dynamic', content: } ] return ( diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx index fd277021d..57ab0cf0a 100644 --- a/src/components/molecules/Wallet/Account.tsx +++ b/src/components/molecules/Wallet/Account.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { FormEvent } from 'react' import styles from './Account.module.css' import { useOcean } from '@oceanprotocol/react' import { toDataUrl } from 'ethereum-blockies' @@ -26,8 +26,18 @@ const Account = React.forwardRef((props, ref: any) => { const { accountId, status, connect, chainId } = useOcean() const hasSuccess = status === 1 && isCorrectNetwork(chainId) + async function handleActivation(e: FormEvent) { + e.preventDefault() + await connectWallet(connect) + } + return accountId ? ( - ) : ( ) }) From 5bc7b65265a3ee653e01d67cb644a996281ffada Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Jul 2020 11:03:26 +0200 Subject: [PATCH 19/30] feedback for wallet interaction within price widget --- .../molecules/FormFields/Price/Advanced.tsx | 20 +++++++++++++------ .../molecules/FormFields/Price/Coin.tsx | 1 - src/components/molecules/Wallet/Feedback.tsx | 4 ++-- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 486c5c083..3493a0a0c 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -1,21 +1,20 @@ import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react' import { InputProps } from '../../../atoms/Input' -import InputElement from '../../../atoms/Input/InputElement' import stylesIndex from './index.module.css' import styles from './Advanced.module.css' -import Label from '../../../atoms/Input/Label' import { MetadataPublishForm } from '../../../../@types/MetaData' -import Cost from './Cost' -import Conversion from '../../../atoms/Price/Conversion' import FormHelp from '../../../atoms/Input/Help' import Wallet from '../../Wallet' import { useOcean } from '@oceanprotocol/react' import Alert from '../../../atoms/Alert' import Coin from './Coin' +import { isCorrectNetwork } from '../../../../utils/wallet' +import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' export default function Advanced(props: InputProps): ReactElement { + const { appConfig } = useSiteMetadata() const { price } = props.form.values as MetadataPublishForm - const { balance } = useOcean() + const { account, balance, chainId } = useOcean() const cost = '1' const weightOnDataToken = '90' // in % @@ -24,9 +23,18 @@ export default function Advanced(props: InputProps): ReactElement { const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10) const [error, setError] = useState() + const correctNetwork = isCorrectNetwork(chainId) + const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) => + c.toUpperCase() + ) + // Check: account, network & insuffciant balance useEffect(() => { - if (balance.ocean < ocean) { + if (!account) { + setError(`No account detected. Please connect your wallet.`) + } else if (!correctNetwork) { + setError(`Wrong Network. Please connect to ${desiredNetworkName}.`) + } else if (balance.ocean < ocean) { setError(`Insufficiant balance. You need at least ${ocean} OCEAN`) } else { setError(undefined) diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx index 425ed517d..5b12ba0f8 100644 --- a/src/components/molecules/FormFields/Price/Coin.tsx +++ b/src/components/molecules/FormFields/Price/Coin.tsx @@ -4,7 +4,6 @@ import styles from './Coin.module.css' import InputElement from '../../../atoms/Input/InputElement' import { ReactComponent as Logo } from '../../../../images/logo.svg' import Conversion from '../../../atoms/Price/Conversion' -import Label from '../../../atoms/Input/Label' export default function Coin({ symbol, diff --git a/src/components/molecules/Wallet/Feedback.tsx b/src/components/molecules/Wallet/Feedback.tsx index f139ccdf8..17402b682 100644 --- a/src/components/molecules/Wallet/Feedback.tsx +++ b/src/components/molecules/Wallet/Feedback.tsx @@ -21,7 +21,7 @@ export default function Web3Feedback({ const isOceanConnectionError = status === -1 const correctNetwork = isCorrectNetwork(chainId) const showFeedback = !account || isOceanConnectionError || !correctNetwork - const networkName = appConfig.network.replace(/^\w/, (c: string) => + const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) => c.toUpperCase() ) @@ -50,7 +50,7 @@ export default function Web3Feedback({ : isOceanConnectionError ? 'Please try again.' : !correctNetwork - ? `Please connect to ${networkName}.` + ? `Please connect to ${desiredNetworkName}.` : isBalanceInsufficient === true ? 'You do not have enough OCEAN in your wallet to purchase this asset.' : 'Something went wrong.' From a223ed603c821903dbcba94cccdc620893decc83 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Jul 2020 11:26:22 +0200 Subject: [PATCH 20/30] wording --- src/components/molecules/FormFields/Price/Advanced.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 3493a0a0c..12f27f01c 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -31,7 +31,7 @@ export default function Advanced(props: InputProps): ReactElement { // Check: account, network & insuffciant balance useEffect(() => { if (!account) { - setError(`No account detected. Please connect your wallet.`) + setError(`No account connected. Please connect your Web3 wallet.`) } else if (!correctNetwork) { setError(`Wrong Network. Please connect to ${desiredNetworkName}.`) } else if (balance.ocean < ocean) { From 011a87e6b835c0e753f253d376800b200ee82120 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Jul 2020 12:53:42 +0200 Subject: [PATCH 21/30] nicer auto-layout for prefix/postfix input groups --- src/components/atoms/Input/InputElement.module.css | 13 +++++-------- .../molecules/FormFields/Price/index.module.css | 1 - 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css index 2f9ef0936..fc21df932 100644 --- a/src/components/atoms/Input/InputElement.module.css +++ b/src/components/atoms/Input/InputElement.module.css @@ -12,6 +12,7 @@ border-radius: var(--border-radius); transition: 0.2s ease-out; min-height: 43px; + min-width: 0; appearance: none; display: block; } @@ -87,15 +88,10 @@ .prefixGroup, .postfixGroup { - display: flex; + display: inline-flex; align-items: center; } -.prefixGroup input, -.postfixGroup input { - width: auto; -} - .prefixGroup input { border-left: 0; border-top-left-radius: 0; @@ -114,11 +110,12 @@ min-height: 43px; display: flex; align-items: center; - padding-left: calc(var(--spacer) / 2); - padding-right: calc(var(--spacer) / 2); + padding-left: calc(var(--spacer) / 4); + padding-right: calc(var(--spacer) / 4); color: var(--color-secondary); font-size: var(--font-size-small); transition: border 0.2s ease-out; + white-space: nowrap; } .prefix { diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index 1490cfcd7..fd10de916 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -13,7 +13,6 @@ } .content input { - max-width: 6rem; text-align: center; } From a6d612a1b2e4825a2aca31be6b73bbbda510a20c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 30 Jul 2020 13:34:15 +0200 Subject: [PATCH 22/30] visual cleanup, make more use of space --- .../FormFields/Price/Advanced.module.css | 26 ++++++++++---- .../molecules/FormFields/Price/Advanced.tsx | 6 +++- .../FormFields/Price/Coin.module.css | 34 +++++++------------ .../FormFields/Price/index.module.css | 1 + src/components/pages/Publish/index.tsx | 8 ++--- 5 files changed, 40 insertions(+), 35 deletions(-) diff --git a/src/components/molecules/FormFields/Price/Advanced.module.css b/src/components/molecules/FormFields/Price/Advanced.module.css index c8f54757d..8ff159aa2 100644 --- a/src/components/molecules/FormFields/Price/Advanced.module.css +++ b/src/components/molecules/FormFields/Price/Advanced.module.css @@ -30,15 +30,27 @@ margin-bottom: 0; color: var(--color-secondary); text-align: center; - border: 1px solid var(--brand-grey-lighter); - border-bottom: 0; - border-top-right-radius: var(--border-radius); - border-top-left-radius: var(--border-radius); - padding: calc(var(--spacer) / 3); + padding-bottom: calc(var(--spacer) / 3); } .tokens { display: grid; - grid-template-columns: 1fr 1fr; - margin-bottom: calc(var(--spacer) / 2); + margin-bottom: -2rem; + margin-left: -3rem; + margin-right: -3rem; +} + +@media screen and (min-width: 40rem) { + .tokens { + grid-template-columns: 1fr 1fr; + } +} + +.alertArea { + margin-left: -3rem; + margin-right: -3rem; + padding: var(--spacer) calc(var(--spacer) / 2); + padding-bottom: 0; + margin-top: var(--spacer); + border-top: 1px solid var(--brand-grey-lighter); } diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 12f27f01c..d60f5a97b 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -82,7 +82,11 @@ export default function Advanced(props: InputProps): ReactElement { />
- {error && } + {error && ( +
+ +
+ )}
{/* Hidden to fields to actually collect form values for Formik state */} diff --git a/src/components/molecules/FormFields/Price/Coin.module.css b/src/components/molecules/FormFields/Price/Coin.module.css index 93779497f..f528c1d4f 100644 --- a/src/components/molecules/FormFields/Price/Coin.module.css +++ b/src/components/molecules/FormFields/Price/Coin.module.css @@ -1,18 +1,10 @@ .coin { - border: 1px solid var(--brand-grey-lighter); - border-radius: var(--border-radius); - padding: calc(var(--spacer) / 2); -} - -.coin:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; + padding: var(--spacer) calc(var(--spacer) / 2); + border-top: 1px solid var(--brand-grey-lighter); } .coin:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - margin-left: -1px; + border-left: 1px solid var(--brand-grey-lighter); } .icon { @@ -26,7 +18,7 @@ border: 1px solid var(--brand-grey-lighter); border-radius: 50%; background-color: var(--brand-white); - margin-bottom: calc(var(--spacer) / 2); + margin-bottom: var(--spacer); } .coin:last-child .icon path { @@ -36,14 +28,8 @@ stroke-linejoin: round; } -.symbol { - text-align: center; - display: block; - font-size: var(--font-size-base); - margin-bottom: calc(var(--spacer) / 4); -} - .data { + position: relative; width: 100%; display: flex; flex-wrap: wrap; @@ -51,14 +37,18 @@ text-align: center; } +.max { + position: absolute; + right: var(--spacer); + top: calc(var(--spacer) / 2.5); +} + .weight { width: 100%; - margin-top: calc(var(--spacer) / 2); - padding-top: calc(var(--spacer) / 2); + margin-top: var(--spacer); text-transform: uppercase; font-size: var(--font-size-small); color: var(--color-secondary); - border-top: 1px solid var(--brand-grey-lighter); } .weight strong { diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css index fd10de916..0ccfe68e3 100644 --- a/src/components/molecules/FormFields/Price/index.module.css +++ b/src/components/molecules/FormFields/Price/index.module.css @@ -21,6 +21,7 @@ } .conversion { + width: 100%; display: block; text-align: center; margin-top: calc(var(--spacer) / 6); diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 4915befa3..89c12a7f6 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -40,11 +40,9 @@ export default function PublishPage({ `) try { - const ddo = await publish( - metadata as any, - tokensToMint.toString(), - [{ serviceType, cost: cost.toString() }] - ) + const ddo = await publish(metadata as any, tokensToMint.toString(), [ + { serviceType, cost: cost.toString() } + ]) if (publishError) { toast.error(publishError) From 9fa7a7ad3ce280268bedd7dbcfb6e3c7365e6098 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Fri, 31 Jul 2020 13:19:52 +0200 Subject: [PATCH 23/30] rebase fix --- src/components/molecules/Wallet/Account.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/Wallet/Account.tsx b/src/components/molecules/Wallet/Account.tsx index 25db8c28a..8f706e81d 100644 --- a/src/components/molecules/Wallet/Account.tsx +++ b/src/components/molecules/Wallet/Account.tsx @@ -29,7 +29,7 @@ const Account = React.forwardRef((props, ref: any) => { async function handleActivation(e: FormEvent) { // prevent accidentially submitting a form the button might be in e.preventDefault() - await connectWallet(connect) + await connect() } return accountId ? ( From e77832115c41a4ad7633ff6491957733a7a93abf Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Aug 2020 10:22:23 +0200 Subject: [PATCH 24/30] menu account color fix --- src/components/molecules/Wallet/Account.module.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/molecules/Wallet/Account.module.css b/src/components/molecules/Wallet/Account.module.css index d8a4f57cd..62ea614a9 100644 --- a/src/components/molecules/Wallet/Account.module.css +++ b/src/components/molecules/Wallet/Account.module.css @@ -8,12 +8,16 @@ padding: calc(var(--spacer) / 4); white-space: nowrap; background: none; - color: var(--brand-grey); margin: 0; transition: border 0.2s ease-out; cursor: pointer; } +.button, +.address { + color: var(--brand-grey); +} + .button:hover, .button:focus { transform: none; From c1b3444ae12ea340ddd4f40f02dc286a41a5b1d0 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Aug 2020 11:34:51 +0200 Subject: [PATCH 25/30] fix input defocus on user input --- src/components/atoms/Tabs.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/atoms/Tabs.tsx b/src/components/atoms/Tabs.tsx index 95efa5e34..88f2f0878 100644 --- a/src/components/atoms/Tabs.tsx +++ b/src/components/atoms/Tabs.tsx @@ -1,7 +1,6 @@ import React, { ReactElement, ReactNode } from 'react' import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs' import styles from './Tabs.module.css' -import shortid from 'shortid' interface TabsItem { title: string @@ -19,14 +18,14 @@ export default function Tabs({ {items.map((item) => ( - + {item.title} ))}
{items.map((item) => ( - {item.content} + {item.content} ))}
From 925cbcf173d8775cbfafa00f84fd1c930791aa7b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Aug 2020 11:37:31 +0200 Subject: [PATCH 26/30] refactor price data collection --- .../molecules/FormFields/Price/Advanced.tsx | 37 ++++++----------- .../FormFields/Price/Coin.module.css | 2 + .../molecules/FormFields/Price/Coin.tsx | 4 +- .../molecules/FormFields/Price/Cost.tsx | 30 -------------- .../FormFields/Price/Simple.module.css | 7 +--- .../molecules/FormFields/Price/Simple.tsx | 30 +++++++++++--- .../molecules/FormFields/Price/index.tsx | 41 +++++++++++++++++-- src/global/_code.css | 4 +- src/models/FormPublish.ts | 2 +- 9 files changed, 85 insertions(+), 72 deletions(-) delete mode 100644 src/components/molecules/FormFields/Price/Cost.tsx diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index d60f5a97b..59123a27f 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -1,8 +1,6 @@ import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react' -import { InputProps } from '../../../atoms/Input' import stylesIndex from './index.module.css' import styles from './Advanced.module.css' -import { MetadataPublishForm } from '../../../../@types/MetaData' import FormHelp from '../../../atoms/Input/Help' import Wallet from '../../Wallet' import { useOcean } from '@oceanprotocol/react' @@ -11,17 +9,20 @@ import Coin from './Coin' import { isCorrectNetwork } from '../../../../utils/wallet' import { useSiteMetadata } from '../../../../hooks/useSiteMetadata' -export default function Advanced(props: InputProps): ReactElement { +export default function Advanced({ + ocean, + tokensToMint, + weightOnDataToken, + onChange +}: { + ocean: string + tokensToMint: number + weightOnDataToken: string + onChange: (event: ChangeEvent) => void +}): ReactElement { const { appConfig } = useSiteMetadata() - const { price } = props.form.values as MetadataPublishForm const { account, balance, chainId } = useOcean() - const cost = '1' - const weightOnDataToken = '90' // in % - - const [ocean, setOcean] = useState('10') - const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10) - const [error, setError] = useState() const correctNetwork = isCorrectNetwork(chainId) const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) => @@ -41,10 +42,6 @@ export default function Advanced(props: InputProps): ReactElement { } }, [ocean]) - function handleOceanChange(event: ChangeEvent) { - setOcean(event.target.value) - } - return (
@@ -70,7 +67,7 @@ export default function Advanced(props: InputProps): ReactElement { symbol="OCEAN" value={ocean} weight={`${100 - Number(weightOnDataToken)}%`} - onChange={handleOceanChange} + onChange={onChange} />
@@ -88,15 +84,6 @@ export default function Advanced(props: InputProps): ReactElement {
)}
- - {/* Hidden to fields to actually collect form values for Formik state */} - -
) } diff --git a/src/components/molecules/FormFields/Price/Coin.module.css b/src/components/molecules/FormFields/Price/Coin.module.css index f528c1d4f..6e04ccf8e 100644 --- a/src/components/molecules/FormFields/Price/Coin.module.css +++ b/src/components/molecules/FormFields/Price/Coin.module.css @@ -35,6 +35,8 @@ flex-wrap: wrap; justify-content: center; text-align: center; + max-width: 12rem; + margin: auto; } .max { diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx index 5b12ba0f8..087563f0a 100644 --- a/src/components/molecules/FormFields/Price/Coin.tsx +++ b/src/components/molecules/FormFields/Price/Coin.tsx @@ -11,7 +11,8 @@ export default function Coin({ value, weight, onChange, - readOnly + readOnly, + field }: { symbol: string name: string @@ -29,6 +30,7 @@ export default function Coin({
- - - - - -
- ) -} diff --git a/src/components/molecules/FormFields/Price/Simple.module.css b/src/components/molecules/FormFields/Price/Simple.module.css index 47f9feabc..59027445a 100644 --- a/src/components/molecules/FormFields/Price/Simple.module.css +++ b/src/components/molecules/FormFields/Price/Simple.module.css @@ -1,8 +1,5 @@ -.simple { -} - -.simple > div:last-child { - max-width: 13.25rem; +.form { + max-width: 12rem; margin: 0 auto; } diff --git a/src/components/molecules/FormFields/Price/Simple.tsx b/src/components/molecules/FormFields/Price/Simple.tsx index 8d7e572de..c5ef99512 100644 --- a/src/components/molecules/FormFields/Price/Simple.tsx +++ b/src/components/molecules/FormFields/Price/Simple.tsx @@ -1,11 +1,18 @@ -import React, { ReactElement } from 'react' +import React, { ReactElement, ChangeEvent } from 'react' import stylesIndex from './index.module.css' import styles from './Simple.module.css' import FormHelp from '../../../atoms/Input/Help' -import { InputProps } from '../../../atoms/Input' -import Cost from './Cost' +import Label from '../../../atoms/Input/Label' +import InputElement from '../../../atoms/Input/InputElement' +import Conversion from '../../../atoms/Price/Conversion' -export default function Simple(props: InputProps): ReactElement { +export default function Simple({ + ocean, + onChange +}: { + ocean: string + onChange: (event: ChangeEvent) => void +}): ReactElement { return (
@@ -13,7 +20,20 @@ export default function Simple(props: InputProps): ReactElement { Set your price for accessing this data set. A Data Token contract for this data set, worth the entered amount of OCEAN will be created. - + +
+ + + + + +
) diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx index 7c87aeca3..c07761eb9 100644 --- a/src/components/molecules/FormFields/Price/index.tsx +++ b/src/components/molecules/FormFields/Price/index.tsx @@ -1,19 +1,54 @@ -import React, { ReactElement } from 'react' +import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react' import { InputProps } from '../../../atoms/Input' import styles from './index.module.css' import Tabs from '../../../atoms/Tabs' import Simple from './Simple' import Advanced from './Advanced' +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() + + function handleOceanChange(event: ChangeEvent) { + setOcean(event.target.value) + } + + // Always update everything when ocean changes + useEffect(() => { + const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10) + setTokensToMint(tokensToMint) + helpers.setValue({ cost, tokensToMint }) + }, [ocean]) + const tabs = [ - { title: 'Simple: Fixed', content: }, - { title: 'Advanced: Dynamic', content: } + { + title: 'Simple: Fixed', + content: + }, + { + title: 'Advanced: Dynamic', + content: ( + + ) + } ] return (
+ 
+        {JSON.stringify(field.value)}
+
) } diff --git a/src/global/_code.css b/src/global/_code.css index af5a0467c..14aabba40 100644 --- a/src/global/_code.css +++ b/src/global/_code.css @@ -1,7 +1,7 @@ code { font-family: var(--font-family-monospace); font-size: var(--font-size-small); - color: var(--brand-grey-light); + color: var(--brand-grey); text-shadow: none; } @@ -15,7 +15,7 @@ pre { display: block; margin: calc(var(--spacer) / 2) 0; padding: 0; - border: 1px solid var(--brand-grey-dark); + border: 1px solid var(--brand-grey-lighter); border-radius: var(--border-radius); } diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts index c9395d26f..6215695f7 100644 --- a/src/models/FormPublish.ts +++ b/src/models/FormPublish.ts @@ -29,7 +29,7 @@ export const initialValues: MetadataPublishForm = { author: '', price: { cost: 1, - tokensToMint: null + tokensToMint: 1 }, files: '', description: '', From 74f9c2202bb98a157bfd0c116614a1ee55d8663c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Aug 2020 11:57:36 +0200 Subject: [PATCH 27/30] debug output for collected and transformed values --- .../molecules/FormFields/Price/Advanced.tsx | 2 +- .../molecules/FormFields/Price/Coin.tsx | 5 +---- src/components/pages/Publish/PublishForm.tsx | 2 +- src/components/pages/Publish/index.tsx | 20 +++++++++++++++++++ 4 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx index 59123a27f..9badcf6fd 100644 --- a/src/components/molecules/FormFields/Price/Advanced.tsx +++ b/src/components/molecules/FormFields/Price/Advanced.tsx @@ -70,7 +70,7 @@ export default function Advanced({ onChange={onChange} /> ) => void readOnly?: boolean - field?: any }): ReactElement { return (
@@ -30,7 +28,6 @@ export default function Coin({
( ))} - {isLoading ? ( ) : ( diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx index 89c12a7f6..eac998386 100644 --- a/src/components/pages/Publish/index.tsx +++ b/src/components/pages/Publish/index.tsx @@ -82,6 +82,26 @@ export default function PublishPage({
+ +
+
Collected Form Values
+ 
+                {JSON.stringify(values, null, 2)}
+
+
+ +
+
Transformed Values
+ 
+                
+                  {JSON.stringify(
+                    transformPublishFormToMetadata(values),
+                    null,
+                    2
+                  )}
+                
+
+
)} From 24a7bdbd8187b1c2ffd741de418095956971c070 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Aug 2020 12:04:03 +0200 Subject: [PATCH 28/30] DDO debug output --- src/components/organisms/AssetContent/index.tsx | 4 ++++ src/global/_code.css | 17 +++++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx index c9a34b623..46c197a9a 100644 --- a/src/components/organisms/AssetContent/index.tsx +++ b/src/components/organisms/AssetContent/index.tsx @@ -51,6 +51,10 @@ export default function AssetContent({ /> */} {/* */}
+ + 
+          {JSON.stringify(ddo, null, 2)}
+
diff --git a/src/global/_code.css b/src/global/_code.css index 14aabba40..bfe882ed9 100644 --- a/src/global/_code.css +++ b/src/global/_code.css @@ -14,13 +14,22 @@ code { pre { display: block; margin: calc(var(--spacer) / 2) 0; - padding: 0; - border: 1px solid var(--brand-grey-lighter); + padding: calc(var(--spacer) / 2); + background-color: var(--brand-grey-dimmed) !important; border-radius: var(--border-radius); + overflow: auto; + -webkit-overflow-scrolling: touch; + max-height: 800px; + width: 100%; + position: relative; } pre code { - padding: calc(var(--spacer) / 2); + padding: 0; + white-space: pre; display: block; - white-space: pre-wrap; + overflow-wrap: normal; + word-wrap: normal; + word-break: normal; + width: 100%; } From d72d798b061071989ab3806457d62eb46595e17d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Aug 2020 12:26:00 +0200 Subject: [PATCH 29/30] data structure cleanup, initial values --- src/@types/MetaData.d.ts | 3 --- .../molecules/FormFields/FilesInput/index.tsx | 2 +- src/components/pages/Publish/PublishForm.tsx | 2 -- src/components/pages/Publish/utils.ts | 6 ++---- src/models/Asset.ts | 19 +++++++++---------- src/models/FormPublish.ts | 18 +++++++++--------- 6 files changed, 21 insertions(+), 29 deletions(-) diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts index d3a474282..8d75484ee 100644 --- a/src/@types/MetaData.d.ts +++ b/src/@types/MetaData.d.ts @@ -5,12 +5,9 @@ import { ServiceMetadata } from '@oceanprotocol/lib' -export declare type AccessType = 'Download' | 'Compute' - export interface AdditionalInformationMarket extends AdditionalInformation { links?: File[] termsAndConditions: boolean - access: AccessType | string } export interface MetadataMarket extends Metadata { diff --git a/src/components/molecules/FormFields/FilesInput/index.tsx b/src/components/molecules/FormFields/FilesInput/index.tsx index 06b9297bc..555a451cd 100644 --- a/src/components/molecules/FormFields/FilesInput/index.tsx +++ b/src/components/molecules/FormFields/FilesInput/index.tsx @@ -36,7 +36,7 @@ export default function FilesInput(props: InputProps): ReactElement { return ( <> - {typeof field.value === 'object' ? ( + {field && typeof field.value === 'object' ? ( ) : ( ({ }) export const initialValues: MetadataPublishForm = { - name: '', - author: '', + name: undefined, + author: undefined, price: { cost: 1, tokensToMint: 1 }, - files: '', - description: '', - license: '', - access: '', + files: undefined, + description: undefined, + license: undefined, + access: undefined, termsAndConditions: false, - copyrightHolder: '', - tags: '', - links: '' + copyrightHolder: undefined, + tags: undefined, + links: undefined } From 15ba3de211ddc5dd2eb7f8878f97138eb81b900b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 3 Aug 2020 19:25:21 +0200 Subject: [PATCH 30/30] refactor --- src/components/atoms/Input/InputElement.tsx | 29 +++++++++++---------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx index 3e2645f21..78a0b4d1d 100644 --- a/src/components/atoms/Input/InputElement.tsx +++ b/src/components/atoms/Input/InputElement.tsx @@ -6,6 +6,19 @@ import FilesInput from '../../molecules/FormFields/FilesInput' import Terms from '../../molecules/FormFields/Terms' import Price from '../../molecules/FormFields/Price' +const DefaultInput = ( + { name, type }: { name: string; type?: string }, + props: InputProps +) => ( + +) + export default function InputElement(props: InputProps): ReactElement { const { type, options, rows, name, prefix, postfix } = props @@ -65,23 +78,11 @@ export default function InputElement(props: InputProps): ReactElement { return prefix || postfix ? (
{prefix &&
{prefix}
} - + {postfix &&
{postfix}
}
) : ( - + ) } }