feat: market place tag & scan tag separated

src/components/NFT/MarketTag.vue

@@ -0,0 +1,30 @@
+<template>
+    <div
+        class="market-tag"
+        :class="{
+            'bg-opensea': market === 'opensea',
+            'bg-rarible': market === 'rarible',
+        }"
+    ></div>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component';
+
+@Options({
+    props: {
+        market: String,
+    },
+})
+export default class MarketTag extends Vue {
+    market!: String;
+}
+</script>
+
+<style scoped lang="postcss">
+@layer components {
+    .market-tag {
+        @apply rounded-sm border-xs border-nft-bg px-2 py-2 w-24 h-9 bg-origin-content bg-contain bg-center bg-no-repeat text-center leading-none;
+    }
+}
+</style>

src/components/NFT/NFTDetails.vue

@@ -1,11 +1,18 @@
 <template>
     <div class="details-container">
         <h2>{{ details.name }} #{{ details.token_id }}</h2>
-        <ScanTag
-            :chain="chain"
-            class="cursor-pointer"
-            @click="toExternalLink(details.asset_contract?.address, details.token_id)"
-        />
+        <div class="tag-container">
+            <ScanTag
+                :chain="chain"
+                class="cursor-pointer"
+                @click="toScan(details.asset_contract?.address, details.token_id)"
+            />
+            <MarketTag
+                :market="market"
+                class="cursor-pointer"
+                @click="toMarket(details.asset_contract?.address, details.token_id)"
+            />
+        </div>
         <div>
             <h3>Description</h3>
             <p>{{ details.description }}</p>
@@ -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;
+        }
     }
 }
 </script>
@@ -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;
     }

src/components/NFT/ScanTag.vue

@@ -4,6 +4,7 @@
         :class="{
             'bg-Etherscan': chain === 'Ethereum',
             'bg-Roninscan': chain === 'Ronin',
+            'bg-bscscan': chain === 'BSC',
         }"
     ></div>
 </template>

src/views/SingleNFT.vue

@@ -37,7 +37,7 @@
                 <div class="image pb-4">
                     <NFTItem :imageUrl="this.details.image_url" :size="NFTWidth > 416 ? 416 : NFTWidth"></NFTItem>
                 </div>
-                <NFTDetail :chain="details.chain" :details="details" />
+                <NFTDetail :chain="details.chain" :details="details" market="opensea" />
             </div>
         </div>
     </div>

tailwind.config.js

@@ -103,6 +103,9 @@ module.exports = {
                 Ronin: "url('@/assets/images/chains/Ronin.png')",
                 Etherscan: "url('@/assets/images/scans/Etherscan.png')",
                 Roninscan: "url('@/assets/images/scans/Roninscan.png')",
+                bscscan: "url('@/assets/images/scans/bscscan.png')",
+                opensea: "url('@/assets/images/marketplaces/OpenSea.png')",
+                rarible: "url('@/assets/images/marketplaces/rarible.png')",
                 pass3gif: 'url(@/assets/images/pass3.gif)',
                 pass3logo: 'url(@/assets/images/pass3logo.svg)',
                 pass3gradient: