unify owner actions

src/components/Asset/AssetActions/Calica/index.tsx

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

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 {

src/components/Asset/AssetActions/index.module.css

@@ -3,3 +3,7 @@
   max-width: 35rem;
   margin: auto;
 }
+
+.actionsSecondary {
+  margin-top: calc(var(--spacer) / 2);
+}

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

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

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>

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

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