You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.9 KiB
136 lines
3.9 KiB
<template>
|
|
<div
|
|
class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
|
|
>
|
|
<Cards
|
|
:title="cardOptions.title"
|
|
:value="`Token ID: ${currentTokenId}`"
|
|
:options="cardOptions.options"
|
|
:total-supply="cardOptions.totalSupply"
|
|
:url="cardOptions.url"
|
|
/>
|
|
<div
|
|
class="flex flex-1 w-full bg-black-19191A mt-[56px] pb-[28px] rounded-[10px] overflow-hidden"
|
|
>
|
|
<div class="details-tabs w-full">
|
|
<el-tabs v-model="active" class="w-full">
|
|
<el-tab-pane label="Token Transfers" name="tokenTransfers">
|
|
<div
|
|
class="flex flex-1 flex-col desktop:pt-[36px] desktop:px-[34px] mobile:px-[20px] mobile:pt-[24px]"
|
|
>
|
|
<p class="text-white text-[22px] font-semibold">
|
|
Token Transfers
|
|
</p>
|
|
<div
|
|
class="mt-[10px] bg-black-2B2B2C rounded-[10px] px-[34px] py-[30px]"
|
|
>
|
|
<transfers-row
|
|
v-for="(item, index) in transfersRows"
|
|
:key="index + item.title"
|
|
:title="item.title"
|
|
:value1="item.value1"
|
|
:value2="item.value2"
|
|
:value3="item.value3"
|
|
:state="item.state"
|
|
/>
|
|
</div>
|
|
<upper-lower-switch :current="'page1'" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<!-- Token Holders -->
|
|
<!-- <el-tab-pane label="Token Holders" name="tokenHolders">
|
|
<div class="flex flex-1 justify-center items-center h-[210px]">
|
|
<p class="text-white text-[14px] font-normal opacity-80">
|
|
There are no transactions for this Token Holders.
|
|
</p>
|
|
</div>
|
|
</el-tab-pane> -->
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, watchEffect } from 'vue'
|
|
import Cards from '../BitcNFt/cards.vue'
|
|
import transfersRow from './transfersRow.vue'
|
|
import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
|
|
import {
|
|
getFindReceiptByTokenPage,
|
|
getFindTokenInfo,
|
|
} from '@src/api/TokensController'
|
|
import { useRoute } from 'vue-router'
|
|
const active = ref('tokenTransfers')
|
|
|
|
const route = useRoute()
|
|
const cardOptions = reactive({
|
|
title: '',
|
|
options: [
|
|
{
|
|
key: 'ERC721',
|
|
value: '',
|
|
},
|
|
{
|
|
key: 'Transfers',
|
|
value: '',
|
|
},
|
|
],
|
|
totalSupply: '',
|
|
url: '',
|
|
})
|
|
const holdrersRows = ref<any>([])
|
|
const transfersRows = ref<any>([])
|
|
|
|
const currentTokenId = ref('')
|
|
|
|
// 请求代币信息
|
|
const requestInfo = async (tokenId: string, address: string) => {
|
|
const params = {
|
|
tokenId: tokenId,
|
|
contractAddress: address,
|
|
}
|
|
const res = await getFindTokenInfo(params)
|
|
const { data } = res
|
|
console.log(data)
|
|
|
|
cardOptions.title = data.name
|
|
cardOptions.url = data.tokenImages
|
|
cardOptions.options[0].key = data.tokenType
|
|
cardOptions.options[1].value = data.transfers
|
|
// cardOptions.options[2].value = data.transfers
|
|
}
|
|
// 请求Token Transfers
|
|
const requestTransfers = async (address: string) => {
|
|
const params = {
|
|
contractAddress: address,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
}
|
|
const res = await getFindReceiptByTokenPage(params)
|
|
transfersRows.value = res.data.rows.map((item: any) => {
|
|
return {
|
|
title: `Block #${item.blockNumber}`,
|
|
value1: item?.blockHash,
|
|
value2: item?.from,
|
|
value3: item?.to,
|
|
state: item?.status === '0x1' ? 'Success' : 'Faild',
|
|
}
|
|
})
|
|
console.log(res)
|
|
}
|
|
watchEffect(() => {
|
|
let path = route.fullPath.split('/')[2] || undefined
|
|
let tokenId = path?.split('?')[0].split('=')[1] || undefined
|
|
let address = path?.split('?')[1].split('=')[1] || undefined
|
|
|
|
if (address == undefined || tokenId == undefined) {
|
|
return
|
|
}
|
|
currentTokenId.value = parseInt(tokenId).toString()
|
|
requestInfo(tokenId, address)
|
|
requestTransfers(address)
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style>
|
|
|