tx link tweaks, output tx count beforehand

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);

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<FormPublishData>()
@@ -10,15 +10,13 @@ export function Feedback(): ReactElement {
   const items = Object.entries(values.feedback).map(([key, value], index) => (
     <li key={index} className={styles[value.status]}>
       <h3 className={styles.title}>
-        {value.name}{' '}
+        {value.name}
-        {value.txHash && (
+        {value.txCount > 0 && (
-          <ExplorerLink
+          <TransactionCount
-            networkId={values.user.chainId}
+            txCount={value.txCount}
-            path={`/tx/${value.txHash}`}
+            chainId={values.user.chainId}
-            className={styles.txHash}
+            txHash={value.txHash}
-          >
+          />
-            View Transaction
-          </ExplorerLink>
         )}
       </h3>
       <p className={styles.description}>{value.description}</p>

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);
+}

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 ? (
+    <ExplorerLink
+      networkId={chainId}
+      path={`/tx/${txHash}`}
+      className={styles.txHash}
+    >
+      View Transaction
+    </ExplorerLink>
+  ) : (
+    <span className={styles.txHash}>
+      {txCount} Transaction{txCount > 1 ? 's' : ''}
+    </span>
+  )
+}

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
   }
 }

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
   }

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
         }
       }))