{{ details.description }}
@@ -32,20 +39,40 @@ import { Vue, Options } from 'vue-class-component'; import Trait from '@/components/NFT/Trait.vue'; import ScanTag from '@/components/NFT/ScanTag.vue'; - +import MarketTag from '@/components/NFT/MarketTag.vue'; @Options({ - components: { Trait, ScanTag }, + components: { Trait, ScanTag, MarketTag }, props: { details: Object, chain: String, + market: String, }, }) export default class NFTDetail extends Vue { details!: Object; chain!: String; + market!: String; + + public toMarket(address: string, tokenId: string) { + switch (this.market) { + case 'opensea': + window.open(`https://opensea.io/assets/${address}/${tokenId}`); + break; + case 'rarible': + window.open(`https://rarible.com/token/${address}:${tokenId}`); + break; + } + } - public toExternalLink(address: string, tokenId: string) { - window.open(`https://opensea.io/assets/${address}/${tokenId}`); + public toScan(address: string, tokenId: string) { + switch (this.chain) { + case 'BSC': + window.open(`https://bscscan.com/token/${address}?a=${tokenId}`); + break; + case 'Ethereum': + window.open(`https://etherscan.io/token/${address}?a=${tokenId}`); + break; + } } } @@ -64,6 +91,9 @@ export default class NFTDetail extends Vue { p { @apply text-sm leading-normal break-all; } + .tag-container { + @apply flex flex-row flex-wrap justify-start items-center gap-2.5; + } .traits-container { @apply flex flex-row flex-wrap justify-start items-center gap-2.5; } diff --git a/src/components/NFT/ScanTag.vue b/src/components/NFT/ScanTag.vue index 98ac11b..d6f3713 100644 --- a/src/components/NFT/ScanTag.vue +++ b/src/components/NFT/ScanTag.vue @@ -4,6 +4,7 @@ :class="{ 'bg-Etherscan': chain === 'Ethereum', 'bg-Roninscan': chain === 'Ronin', + 'bg-bscscan': chain === 'BSC', }" >