From 5f50379f6350b917b9d655e28af59b230a324aa2 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 12 Jan 2022 15:20:18 +0000
Subject: [PATCH] tx link tweaks, output tx count beforehand

---
 .../Publish/Submission/Feedback.module.css    | 10 -------
 .../Publish/Submission/Feedback.tsx           | 18 ++++++-------
 .../Submission/TransactionCount.module.css    | 16 +++++++++++
 .../Publish/Submission/TransactionCount.tsx   | 27 +++++++++++++++++++
 src/components/Publish/_constants.tsx         |  9 ++++---
 src/components/Publish/_types.ts              |  1 +
 src/components/Publish/index.tsx              |  3 ++-
 7 files changed, 60 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Publish/Submission/TransactionCount.module.css
 create mode 100644 src/components/Publish/Submission/TransactionCount.tsx

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<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.txHash && (
-          <ExplorerLink
-            networkId={values.user.chainId}
-            path={`/tx/${value.txHash}`}
-            className={styles.txHash}
-          >
-            View Transaction
-          </ExplorerLink>
+        {value.name}
+        {value.txCount > 0 && (
+          <TransactionCount
+            txCount={value.txCount}
+            chainId={values.user.chainId}
+            txHash={value.txHash}
+          />
         )}
       </h3>
       <p className={styles.description}>{value.description}</p>
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 ? (
+    <ExplorerLink
+      networkId={chainId}
+      path={`/tx/${txHash}`}
+      className={styles.txHash}
+    >
+      View Transaction
+    </ExplorerLink>
+  ) : (
+    <span className={styles.txHash}>
+      {txCount} Transaction{txCount > 1 ? 's' : ''}
+    </span>
+  )
+}
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
         }
       }))