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