From 82dce7e21955e900b23c535ff846c8e06ee28471 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 12 Jan 2022 11:47:03 +0000 Subject: [PATCH] more UI elements and copy --- .../Publish/Submission/Feedback.module.css | 54 +++++++++++++++++++ .../Publish/Submission/Feedback.tsx | 17 +++--- src/components/Publish/_constants.tsx | 23 +++++++- src/components/Publish/_types.ts | 3 +- src/components/Publish/index.tsx | 43 +++++++++------ 5 files changed, 114 insertions(+), 26 deletions(-) create mode 100644 src/components/Publish/Submission/Feedback.module.css diff --git a/src/components/Publish/Submission/Feedback.module.css b/src/components/Publish/Submission/Feedback.module.css new file mode 100644 index 000000000..48b86fb74 --- /dev/null +++ b/src/components/Publish/Submission/Feedback.module.css @@ -0,0 +1,54 @@ +.feedback { +} + +.feedback li { + display: inline-block; + margin-bottom: var(--spacer); + counter-increment: list-number; +} + +/* inject the numbers */ +.feedback li:before { + content: counter(list-number); + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + border: 1px solid var(--border-color); + margin-right: calc(var(--spacer) / 4); + font-weight: var(--font-weight-bold); +} + +/* TODO: needs to have some spinner showing activity */ +.feedback .active:before { + color: var(--background-content); + background: var(--font-color-heading); + border-color: transparent; +} + +.feedback .success:before { + content: '✓'; + color: var(--brand-white); + background: var(--brand-alert-green); + border-color: transparent; +} + +.feedback .error:before { + content: '✕'; + color: var(--brand-white); + background: var(--brand-alert-red); + border-color: transparent; +} + +.title { + font-size: var(--font-size-large); + display: inline-block; + margin-bottom: 0; +} + +.description { + margin-left: calc(var(--spacer) * 1.3); + color: var(--color-secondary); +} diff --git a/src/components/Publish/Submission/Feedback.tsx b/src/components/Publish/Submission/Feedback.tsx index 446d7c771..e0967e756 100644 --- a/src/components/Publish/Submission/Feedback.tsx +++ b/src/components/Publish/Submission/Feedback.tsx @@ -1,18 +1,17 @@ -import { ListItem } from '@shared/atoms/Lists' import { useFormikContext } from 'formik' import React, { ReactElement } from 'react' import { FormPublishData } from '../_types' +import styles from './Feedback.module.css' export function Feedback(): ReactElement { const { values } = useFormikContext() - const items = Object.entries(values.feedback).map(([key, value], index) => { - return ( - - {value.name} - - ) - }) + const items = Object.entries(values.feedback).map(([key, value], index) => ( +
  • +

    {value.name}

    +

    {value.description}

    +
    • + )) - return
      {items}
    + return
      {items}
    } diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx index 0e31255fd..09066517e 100644 --- a/src/components/Publish/_constants.tsx +++ b/src/components/Publish/_constants.tsx @@ -1,6 +1,6 @@ import React from 'react' import { allowDynamicPricing, allowFixedPricing } from '../../../app.config.js' -import { FormPublishData, StepContent } from './_types' +import { FormPublishData, PublishFeedback, StepContent } from './_types' import content from '../../../content/publish/form.json' import PricingFields from './Pricing' import MetadataFields from './Metadata' @@ -120,3 +120,24 @@ export const algorithmContainerPresets: MetadataAlgorithmContainer[] = [ checksum: '' } ] + +export const initialPublishFeedback: PublishFeedback = { + 1: { + name: 'Create Tokens & Pricing', + description: + 'The Data NFT representing your asset, the Datatokens defining access to it, and the pricing schema are all created in one transaction.', + status: 'pending' + }, + 2: { + name: 'Construct & Encrypt DDO', + description: + 'The entered metadata and services are made into a DDO, where the file URLs are encrypted, and afterwards the whole DDO will be encrypted for storage on-chain. Indexers like Aquarius can decrypt the DDO for displaying purposes, the file URLs can only be decrypted by a user exchanging datatokens.', + status: 'pending' + }, + 3: { + name: 'Publish DDO', + description: + 'The encrypted DDO is stored on-chain as part of the Data NFT.', + status: 'pending' + } +} diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts index 0f5b8c21a..e25bd5506 100644 --- a/src/components/Publish/_types.ts +++ b/src/components/Publish/_types.ts @@ -55,7 +55,8 @@ export interface StepContent { export interface PublishFeedback { [key: number]: { name: string - status: 'success' | 'error' | 'pending' + description: string + status: 'success' | 'error' | 'pending' | 'active' message?: string } } diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx index 813d928b1..43e49ba11 100644 --- a/src/components/Publish/index.tsx +++ b/src/components/Publish/index.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, useState, useRef } from 'react' import { Form, Formik } from 'formik' -import { initialValues } from './_constants' +import { initialPublishFeedback, initialValues } from './_constants' import { useAccountPurgatory } from '@hooks/useAccountPurgatory' import { useWeb3 } from '@context/Web3' import { createTokensAndPricing, transformPublishFormToDdo } from './_utils' @@ -37,20 +37,9 @@ export default function PublishPage({ const nftFactory = useNftFactory() const newCancelToken = useCancelToken() - const [feedback, setFeedback] = useState({ - 1: { - name: 'Create Tokens & Pricing', - status: 'pending' - }, - 2: { - name: 'Encrypt DDO', - status: 'pending' - }, - 3: { - name: 'Publish DDO', - status: 'pending' - } - }) + const [feedback, setFeedback] = useState( + initialPublishFeedback + ) async function handleSubmit(values: FormPublishData) { let _erc721Address, _datatokenAddress, _ddo, _encryptedDdo @@ -59,6 +48,14 @@ export default function PublishPage({ // 1. Create NFT & datatokens & create pricing schema // -------------------------------------------------- try { + setFeedback({ + ...feedback, + 1: { + ...feedback[1], + status: 'active' + } + }) + const config = getOceanConfig(chainId) console.log('config', config) @@ -98,6 +95,14 @@ export default function PublishPage({ // 2. Construct and encypt DDO // -------------------------------------------------- try { + setFeedback({ + ...feedback, + 2: { + ...feedback[2], + status: 'active' + } + }) + const ddo = await transformPublishFormToDdo( values, _datatokenAddress, @@ -147,6 +152,14 @@ export default function PublishPage({ // 3. Publish DDO // -------------------------------------------------- try { + setFeedback({ + ...feedback, + 3: { + ...feedback[3], + status: 'active' + } + }) + // TODO: this whole setMetadata needs to go in a function ,too many hardcoded/calculated params // TODO: hash generation : this needs to be moved in a function (probably on ocean.js) after we figure out what is going on in provider, leave it here for now const metadataHash = getHash(JSON.stringify(_ddo))