From c8e6daa590085300fbf04d29d126128383cb1207 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 6 Dec 2022 10:38:06 +0000
Subject: [PATCH] unify owner actions

---
 .../Asset/AssetActions/Calica/index.tsx       | 19 --------
 .../Asset/AssetActions/Download.module.css    |  2 +-
 .../Asset/AssetActions/index.module.css       |  4 ++
 src/components/Asset/AssetActions/index.tsx   | 48 ++++++++-----------
 .../Asset/AssetContent/index.module.css       |  9 ----
 src/components/Asset/AssetContent/index.tsx   | 20 ++++----
 .../Asset/OwnerActions/index.module.css       |  9 ++++
 src/components/Asset/OwnerActions/index.tsx   | 30 ++++++++++++
 8 files changed, 75 insertions(+), 66 deletions(-)
 delete mode 100644 src/components/Asset/AssetActions/Calica/index.tsx
 create mode 100644 src/components/Asset/OwnerActions/index.module.css
 create mode 100644 src/components/Asset/OwnerActions/index.tsx

diff --git a/src/components/Asset/AssetActions/Calica/index.tsx b/src/components/Asset/AssetActions/Calica/index.tsx
deleted file mode 100644
index f664530b3..000000000
--- a/src/components/Asset/AssetActions/Calica/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useAsset } from '@context/Asset'
-import React from 'react'
-import { useWeb3 } from '@context/Web3'
-import { calicaUri } from '../../../../../app.config'
-export default function CalicaIntegration() {
-  const { isOwner } = useAsset()
-  const { accountId } = useWeb3()
-
-  return isOwner ? (
-    <a
-      href={`${calicaUri}/${accountId}`}
-      target="_blank"
-      rel="noopener noreferrer"
-      title="Use Calica for revenue split"
-    >
-      Use Calica for revenue split
-    </a>
-  ) : null
-}
diff --git a/src/components/Asset/AssetActions/Download.module.css b/src/components/Asset/AssetActions/Download.module.css
index 697854f7e..f8d7cb176 100644
--- a/src/components/Asset/AssetActions/Download.module.css
+++ b/src/components/Asset/AssetActions/Download.module.css
@@ -6,11 +6,11 @@
 .info {
   display: flex;
   width: auto;
-  padding: 0 calc(var(--spacer) / 2) 0 calc(var(--spacer) * 1.5);
 }
 
 .filewrapper {
   flex-shrink: 0;
+  margin-right: calc(var(--spacer) / 3);
 }
 
 .feedback {
diff --git a/src/components/Asset/AssetActions/index.module.css b/src/components/Asset/AssetActions/index.module.css
index 59d7dc5b1..bf3d6dafc 100644
--- a/src/components/Asset/AssetActions/index.module.css
+++ b/src/components/Asset/AssetActions/index.module.css
@@ -3,3 +3,7 @@
   max-width: 35rem;
   margin: auto;
 }
+
+.actionsSecondary {
+  margin-top: calc(var(--spacer) / 2);
+}
diff --git a/src/components/Asset/AssetActions/index.tsx b/src/components/Asset/AssetActions/index.tsx
index fab368e2a..21ed1b55a 100644
--- a/src/components/Asset/AssetActions/index.tsx
+++ b/src/components/Asset/AssetActions/index.tsx
@@ -15,7 +15,7 @@ import { useFormikContext } from 'formik'
 import { FormPublishData } from '@components/Publish/_types'
 import { getTokenBalanceFromSymbol } from '@utils/web3'
 import AssetStats from './AssetStats'
-import Calica from './Calica'
+import Calica from '../OwnerActions'
 
 export default function AssetActions({
   asset
@@ -133,32 +133,24 @@ export default function AssetActions({
   }, [balance, accountId, asset?.accessDetails, dtBalance])
 
   return (
-    <>
-      <div className={styles.actions}>
-        {isCompute ? (
-          <Compute
-            asset={asset}
-            dtBalance={dtBalance}
-            file={fileMetadata}
-            fileIsLoading={fileIsLoading}
-          />
-        ) : (
-          <Download
-            asset={asset}
-            dtBalance={dtBalance}
-            isBalanceSufficient={isBalanceSufficient}
-            file={fileMetadata}
-            fileIsLoading={fileIsLoading}
-          />
-        )}
-        <AssetStats />
-      </div>
-      <Calica />
-      <Web3Feedback
-        networkId={asset?.chainId}
-        accountId={accountId}
-        isAssetNetwork={isAssetNetwork}
-      />
-    </>
+    <div className={styles.actions}>
+      {isCompute ? (
+        <Compute
+          asset={asset}
+          dtBalance={dtBalance}
+          file={fileMetadata}
+          fileIsLoading={fileIsLoading}
+        />
+      ) : (
+        <Download
+          asset={asset}
+          dtBalance={dtBalance}
+          isBalanceSufficient={isBalanceSufficient}
+          file={fileMetadata}
+          fileIsLoading={fileIsLoading}
+        />
+      )}
+      <AssetStats />
+    </div>
   )
 }
diff --git a/src/components/Asset/AssetContent/index.module.css b/src/components/Asset/AssetContent/index.module.css
index 992dd5081..ffda32b38 100644
--- a/src/components/Asset/AssetContent/index.module.css
+++ b/src/components/Asset/AssetContent/index.module.css
@@ -30,12 +30,3 @@
     margin-top: var(--spacer);
   }
 }
-
-.ownerActions {
-  text-align: center;
-  margin-top: var(--spacer);
-  margin-bottom: calc(var(--spacer) * 1.5);
-  padding: calc(var(--spacer) / 3) var(--spacer);
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-}
diff --git a/src/components/Asset/AssetContent/index.tsx b/src/components/Asset/AssetContent/index.tsx
index 2eb57ab62..5741ecd0e 100644
--- a/src/components/Asset/AssetContent/index.tsx
+++ b/src/components/Asset/AssetContent/index.tsx
@@ -14,16 +14,19 @@ import styles from './index.module.css'
 import NetworkName from '@shared/NetworkName'
 import content from '../../../../content/purgatory.json'
 import Web3 from 'web3'
-import Button from '@shared/atoms/Button'
 import RelatedAssets from '../RelatedAssets'
+import OwnerActions from '../OwnerActions'
+import Web3Feedback from '@components/@shared/Web3Feedback'
+import { useWeb3 } from '@context/Web3'
 
 export default function AssetContent({
   asset
 }: {
   asset: AssetExtended
 }): ReactElement {
-  const { isInPurgatory, purgatoryData, isOwner, isAssetNetwork } = useAsset()
+  const { isInPurgatory, purgatoryData, isAssetNetwork } = useAsset()
   const { debug } = useUserPreferences()
+  const { accountId } = useWeb3()
   const [receipts, setReceipts] = useState([])
   const [nftPublisher, setNftPublisher] = useState<string>()
 
@@ -72,13 +75,12 @@ export default function AssetContent({
 
         <div className={styles.actions}>
           <AssetActions asset={asset} />
-          {isOwner && isAssetNetwork && (
-            <div className={styles.ownerActions}>
-              <Button style="text" size="small" to={`/asset/${asset?.id}/edit`}>
-                Edit Asset
-              </Button>
-            </div>
-          )}
+          <OwnerActions />
+          <Web3Feedback
+            networkId={asset?.chainId}
+            accountId={accountId}
+            isAssetNetwork={isAssetNetwork}
+          />
           <RelatedAssets />
         </div>
       </article>
diff --git a/src/components/Asset/OwnerActions/index.module.css b/src/components/Asset/OwnerActions/index.module.css
new file mode 100644
index 000000000..b276bb74b
--- /dev/null
+++ b/src/components/Asset/OwnerActions/index.module.css
@@ -0,0 +1,9 @@
+.ownerActions {
+  text-align: center;
+  margin-top: var(--spacer);
+  margin-bottom: calc(var(--spacer) * 1.5);
+  padding: calc(var(--spacer) / 3) var(--spacer);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  color: var(--color-secondary);
+}
diff --git a/src/components/Asset/OwnerActions/index.tsx b/src/components/Asset/OwnerActions/index.tsx
new file mode 100644
index 000000000..a9b21d45c
--- /dev/null
+++ b/src/components/Asset/OwnerActions/index.tsx
@@ -0,0 +1,30 @@
+import { useAsset } from '@context/Asset'
+import React from 'react'
+import { useWeb3 } from '@context/Web3'
+import { calicaUri } from '../../../../app.config'
+import Button from '@components/@shared/atoms/Button'
+import styles from './index.module.css'
+
+export default function OwnerActions() {
+  const { asset, isOwner } = useAsset()
+  const { accountId } = useWeb3()
+
+  return isOwner ? (
+    <div className={styles.ownerActions}>
+      <Button style="text" size="small" to={`/asset/${asset?.id}/edit`}>
+        Edit Asset
+      </Button>{' '}
+      |{' '}
+      <Button
+        style="text"
+        size="small"
+        href={`${calicaUri}/${accountId}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Use Calica for splitting revenue between multiple accounts."
+      >
+        Split Revenue
+      </Button>
+    </div>
+  ) : null
+}