Skip to content

Commit

Permalink
chore: Update MetaPin
Browse files Browse the repository at this point in the history
  • Loading branch information
@AricRedemption
AricRedemption committed Mar 22, 2024
1 parent 43db5ec commit 5231ee0
Show file tree
Hide file tree
Showing 7 changed files with 350 additions and 116 deletions.
17 changes: 8 additions & 9 deletions src/pages/nfts/BRCTokenDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useBRCInscriptionInfoQuery } from '@/queries/inscribe'
const router = useRouter()
const { params } = useRoute()
const address = ref(params.address as string)
const address = params.address as string
const inscriptionId = ref(params.inscriptionId as string)
const {
Expand All @@ -25,15 +25,14 @@ watch(error, () => {
}
})
const toSendBRC20 = () => {
const content = JSON.parse(inscriptionDetail.value!.contentBody)
const toSendNFT = (id: string) => {
router.push({
name: 'sendBRC20',
name: 'sendNFT',
params: { id, nftType: 'brc20' },
query: {
inscriptionId: inscriptionId.value,
address: address.value,
symbol: content.tick,
amount: content.amt,
amount: inscriptionDetail.value?.outputValue,
satoshis: inscriptionDetail.value?.outputValue,
content: inscriptionDetail.value?.contentBody,
},
})
}
Expand Down Expand Up @@ -113,7 +112,7 @@ const toSendBRC20 = () => {
</div>
</div>

<button @click="toSendBRC20" class="main-btn-bg w-full rounded-lg py-3 text-sm text-sky-100">
<button @click="toSendNFT(inscriptionId)" class="main-btn-bg w-full rounded-lg py-3 text-sm text-sky-100">
Transfers
</button>
</div>
Expand Down
37 changes: 12 additions & 25 deletions src/pages/nfts/MetaIDPinList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ref, computed } from 'vue'
import MetaPin from './MetaPin.vue'
import { useRouter } from 'vue-router'
import { getAddress } from '@/lib/account'
import { useMetaPinsQuery, MetaIDPin } from '@/queries/nfts'
import { useMetaPinsQuery } from '@/queries/nfts'
const addressRef = ref()
const cursorRef = ref(0)
Expand All @@ -18,44 +18,31 @@ const { isLoading, data: metaPins } = useMetaPinsQuery(addressRef, cursorRef, si
enabled: computed(() => !!addressRef.value),
})
const toBRC20Detail = (metaIDPin: MetaIDPin) => {
const query = {
inscriptionId: metaIDPin.id,
inscriptionNumber: metaIDPin.number,
timestamp: metaIDPin.timestamp * 1000,
outputValue: metaIDPin.outputValue,
preview: metaIDPin.contentSummary,
content: metaIDPin.contentSummary,
genesisTransaction: metaIDPin.genesisTransaction,
contentLength: metaIDPin.contentLength,
contentType: metaIDPin.contentType,
}
const toMetaPinDetail = (metaPinId: string) => {
router.push({
name: 'metaPinDetail',
query,
params: { metaPinId, address: addressRef.value },
})
}
</script>

<template>
<div class="space-y-4">
<div v-if="isLoading" class="w-full py-3 text-center text-sm text-gray-500">
MetaID Pin List loading...
</div>
<div v-if="isLoading" class="w-full py-3 text-center text-sm text-gray-500">MetaID Pin List loading...</div>
<div v-else-if="metaPins?.length" class="mt-12 px-3 py-4 grid grid-cols-3 gap-x-3 gap-y-7">
<div v-for="metaPin in metaPins" @click="toBRC20Detail(metaPin)"
class="flex flex-col items-center justify-center rounded-md cursor-pointer text-[#999999]">
<div
v-for="metaPin in metaPins"
@click="toMetaPinDetail(metaPin.id)"
class="flex flex-col items-center justify-center rounded-md cursor-pointer text-[#999999]"
>
<MetaPin :value="metaPin.outputValue" :content="metaPin.contentSummary" :contentType="metaPin.contentType" />
<span class="text-sm text-center mt-3 truncate" :title="'# ' + metaPin.number"># {{
metaPin.number }}</span>
<span class="text-sm text-center mt-3 truncate" :title="'# ' + metaPin.number"># {{ metaPin.number }}</span>
<span class="text-xs text-center mt-1 h-[30px]">{{
metaPin.timestamp === 0
? 'Uncomfirmed'
: dayjs(metaPin.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss')
metaPin.timestamp === 0 ? 'Uncomfirmed' : dayjs(metaPin.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss')
}}</span>
</div>
</div>
<div v-else class="w-full py-3 text-center text-sm text-gray-500">No MetaID Pins yet</div>
<div v-else class="w-full py-3 text-center text-sm text-gray-500">No MetaID Pins yet</div>
</div>
</template>

Expand Down
83 changes: 39 additions & 44 deletions src/pages/nfts/MetaPinDetail.vue
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,107 @@
<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import { getAddress } from '@/lib/account'
import { ordinalsApi } from '@/queries/request'
import { computed, ref } from 'vue'
import { useMetaPinQuery } from '@/queries/nfts'
import { useRoute, useRouter } from 'vue-router'
import { Inscription } from '@/queries/inscribe'
import { shortestAddress } from '@/lib/formatters'
const address = ref('')
const { params } = useRoute()
const router = useRouter()
const { query } = useRoute()
const inscription = JSON.parse(JSON.stringify(query)) as Inscription
getAddress('btc').then((addressStr) => {
address.value = addressStr
})
const address = params.address as string
const metaPinId = ref(params.metaPinId as string)
const content = ref('')
const { data: metaPin, isLoading } = useMetaPinQuery(metaPinId, { enabled: computed(() => !!address) })
ordinalsApi(inscription.content)
.get()
.then((data: string) => {
content.value = data
})
const toSendBRC20 = () => {
const toSendNFT = (id: string) => {
router.push({
name: 'sendBRC20',
name: 'sendNFT',
params: { id, nftType: 'metaPin' },
query: {
address: address.value,
symbol: 'BTC',
inscriptionId: inscription.inscriptionId,
amount: inscription.outputValue / 1e8,
satoshis: metaPin.value?.outputValue,
content: metaPin.value?.contentSummary,
imgUrl:
metaPin.value?.contentType === 'image/jpeg'
? `https://man-test.metaid.io${metaPin.value?.contentSummary}`
: undefined,
},
})
}
</script>

<template>
<div class="w-full">
<div class="w-full text-gray-primary text-center" v-if="isLoading">MetaPin Info Loading...</div>
<div class="w-full" v-else-if="metaPin">
<div class="w-full flex items-center justify-center">
<div class="w-64 h-64 bg-[#1E2BFF] flex items-center justify-center rounded-xl relative p-2">
<div class="text-white break-all">{{ content }}</div>
<div class="w-64 h-64 bg-[#1E2BFF] flex items-center justify-center rounded-xl relative p-2 text-white">
<img alt="" class="w-full h-full" :src="metaPin.contentSummary" v-if="metaPin.contentType === 'image/jpeg'" />
<div class="overflow-hidden line-clamp-6 break-all" v-else>{{ metaPin.contentSummary }}</div>
<span class="absolute rounded right-3 bottom-3 py-3px px-1.5 bg-[rgb(235,236,255,0.2)] text-[#EBECFF] text-xs"
>{{ inscription.outputValue }} sat</span
>{{ metaPin.outputValue }} sat</span
>
</div>
</div>
<div class="flex flex-col p-4 gap-y-4">
<h4 class="text-xl text-[#303133]"># {{ inscription.inscriptionNumber }}</h4>
<h4 class="text-xl text-[#303133]"># {{ metaPin.number }}</h4>
<div class="text-xs text-[#999999]">
{{ dayjs(Number(inscription!.timestamp)).format('YYYY/MM/DD HH:mm:ss') }}
{{ dayjs(metaPin.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss') }}
</div>
<hr />
<div class="flex items-center justify-between">
<span class="title">ID:</span>
<div class="w-60 truncate" :title="inscription.inscriptionId">{{ inscription.inscriptionId }}</div>
<div class="w-60 truncate" :title="metaPin.id">{{ metaPin.id }}</div>
</div>
<div class="flex items-center justify-between">
<span class="title">Address:</span>
<div :title="address">{{ shortestAddress(address) }}</div>
</div>
<div class="flex items-center justify-between">
<span class="title">Output value:</span>
<div>{{ inscription.outputValue }}</div>
<div>{{ metaPin.outputValue }}</div>
</div>
<div class="flex items-start justify-between">
<span class="title">Preview</span>
<a
target="_blank"
:href="inscription.preview"
:title="inscription.preview"
class="w-52 truncate text-[#5173B9] underline"
>{{ inscription.preview }}</a
:href="metaPin.preview"
:title="metaPin.preview"
class="max-w-52 truncate text-[#5173B9] underline"
>{{ metaPin.preview }}</a
>
</div>
<div class="flex items-start justify-between">
<span class="title">Content:</span>
<a
target="_blank"
:href="inscription.content"
:title="inscription.content"
class="w-52 truncate text-[#5173B9] underline"
>{{ inscription.content }}</a
:href="metaPin.content"
:title="metaPin.content"
class="max-w-52 truncate text-[#5173B9] underline"
>{{ metaPin.content }}</a
>
</div>
<div class="flex items-center justify-between">
<span class="title">Content Length:</span>
<span>{{ inscription.contentLength }}</span>
<span>{{ metaPin.contentLength }}</span>
</div>
<div class="flex items-center justify-between">
<span class="title">Content Type:</span>
<span>{{ inscription.contentType }}</span>
<span>{{ metaPin.contentType }}</span>
</div>
<div class="flex items-start justify-between">
<span class="title">Timestamp:</span>
<div>{{ dayjs(Number(inscription!.timestamp)).format('YYYY/MM/DD HH:mm:ss') }}</div>
<div>{{ dayjs(Number(metaPin!.timestamp)).format('YYYY/MM/DD HH:mm:ss') }}</div>
</div>
<div class="flex items-start justify-between">
<div class="title">Genesis Transaction:</div>
<div class="w-44 truncate" :title="inscription.genesisTransaction">{{ inscription.genesisTransaction }}</div>
<div class="w-44 truncate" :title="metaPin.genesisTransaction">{{ metaPin.genesisTransaction }}</div>
</div>
</div>

<button @click="toSendBRC20" class="main-btn-bg w-full rounded-lg py-3 text-sm text-sky-100">
<button @click="toSendNFT(metaPin.id)" class="main-btn-bg w-full rounded-lg py-3 text-sm text-sky-100">
Transfers
</button>
</div>
<div v-else></div>
</template>

<style lang="css" scoped>
Expand Down
Loading

0 comments on commit 5231ee0

Please sign in to comment.