diff --git a/src/components/Publish/Submission/Feedback.module.css b/src/components/Publish/Submission/Feedback.module.css index a4e3ec6ea..23c148fe5 100644 --- a/src/components/Publish/Submission/Feedback.module.css +++ b/src/components/Publish/Submission/Feedback.module.css @@ -55,16 +55,6 @@ margin-bottom: 0; } -.txHash { - display: inline-block; - margin-left: calc(var(--spacer) / 2); - margin-top: calc(var(--spacer) / 2); - font-size: var(--font-size-small); - font-family: var(--font-family-base); - font-weight: var(--font-weight-base); - color: var(--color-primary); -} - @keyframes loader { to { transform: rotate(360deg); diff --git a/src/components/Publish/Submission/Feedback.tsx b/src/components/Publish/Submission/Feedback.tsx index 256c73dfb..9b0a070eb 100644 --- a/src/components/Publish/Submission/Feedback.tsx +++ b/src/components/Publish/Submission/Feedback.tsx @@ -1,8 +1,8 @@ -import ExplorerLink from '@shared/ExplorerLink' import { useFormikContext } from 'formik' import React, { ReactElement } from 'react' import { FormPublishData } from '../_types' import styles from './Feedback.module.css' +import TransactionCount from './TransactionCount' export function Feedback(): ReactElement { const { values } = useFormikContext() @@ -10,15 +10,13 @@ export function Feedback(): ReactElement { const items = Object.entries(values.feedback).map(([key, value], index) => (
  • - {value.name}{' '} - {value.txHash && ( - - View Transaction - + {value.name} + {value.txCount > 0 && ( + )}

    {value.description}

    diff --git a/src/components/Publish/Submission/TransactionCount.module.css b/src/components/Publish/Submission/TransactionCount.module.css new file mode 100644 index 000000000..7f1b12b4b --- /dev/null +++ b/src/components/Publish/Submission/TransactionCount.module.css @@ -0,0 +1,16 @@ +.txHash { + display: inline-block; + margin-left: calc(var(--spacer) / 2); + margin-top: calc(var(--spacer) / 2); + font-size: var(--font-size-small); + font-family: var(--font-family-base); + font-weight: var(--font-weight-base); + color: var(--color-secondary); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: calc(var(--spacer) / 12) calc(var(--spacer) / 4); +} + +a.txHash { + color: var(--color-primary); +} diff --git a/src/components/Publish/Submission/TransactionCount.tsx b/src/components/Publish/Submission/TransactionCount.tsx new file mode 100644 index 000000000..fbecbb342 --- /dev/null +++ b/src/components/Publish/Submission/TransactionCount.tsx @@ -0,0 +1,27 @@ +import ExplorerLink from '@shared/ExplorerLink' +import React from 'react' +import styles from './TransactionCount.module.css' + +export default function TransactionCount({ + txCount, + chainId, + txHash +}: { + txCount: number + chainId: number + txHash: string +}) { + return txHash ? ( + + View Transaction + + ) : ( + + {txCount} Transaction{txCount > 1 ? 's' : ''} + + ) +} diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx index d54a918fd..042d1a5b6 100644 --- a/src/components/Publish/_constants.tsx +++ b/src/components/Publish/_constants.tsx @@ -126,18 +126,21 @@ export const initialPublishFeedback: PublishFeedback = { 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' + status: 'pending', + txCount: 1 }, 2: { name: 'Construct & Encrypt DDO', description: 'The file URLs are encrypted, and the whole DDO is encrypted too.', - status: 'pending' + status: 'pending', + txCount: 0 }, 3: { name: 'Publish DDO', description: 'The encrypted DDO is stored on-chain as part of the Data NFT. Indexers like Aquarius can decrypt the DDO for displaying purposes, but the file URLs can only be decrypted by exchanging the respective datatokens for this asset.', - status: 'pending' + status: 'pending', + txCount: 1 } } diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts index 15b635e9a..b93afc21c 100644 --- a/src/components/Publish/_types.ts +++ b/src/components/Publish/_types.ts @@ -57,6 +57,7 @@ export interface PublishFeedback { name: string description: string status: 'success' | 'error' | 'pending' | 'active' + txCount: number message?: string txHash?: string } diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx index 1936e5d68..8f4e89956 100644 --- a/src/components/Publish/index.tsx +++ b/src/components/Publish/index.tsx @@ -64,7 +64,8 @@ export default function PublishPage({ ...prevState, 1: { ...prevState[1], - status: 'active' + status: 'active', + txCount: values.pricing.type === 'dynamic' ? 2 : 1 } }))