chore: Update BRC20 NFT module

src/data/authorize-actions.ts

@@ -159,7 +159,7 @@ export default {
   Inscribe: {
     name: 'Inscribe',
     title: 'Inscribe',
-    description: 'Inscrible Your Data On The Chain.',
+    description: '',
     process: Inscribe.process,
     estimate: doNothing,
     closeAfterProcess: true,

src/pages/nfts/BRCToken.vue

@@ -9,7 +9,7 @@ const { contentBody, value } = defineProps<{
   <div class="flex items-center justify-center rounded-md p-1 bg-[#F5F5F5] relative h-[95px] w-full">
     <div class="text-black-primary text-xs break-all scale-75">{{ contentBody }}</div>
     <span class="absolute rounded right-0 bottom-1 py-3px px-1.5 bg-[#EBECFF] text-[#787FFF] text-xs scale-75"
-      >{{ value }} sat</span
+      >{{ value }} sats</span
     >
   </div>
 </template>

src/pages/nfts/BRCTokenDetail.vue

@@ -1,105 +1,112 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ref } from 'vue'
-import { getAddress } from '@/lib/account'
-import { ordinalsApi } from '@/queries/request'
+import { ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Inscription } from '@/queries/inscribe'
 import { shortestAddress } from '@/lib/formatters'
+import { useBRCInscriptionInfoQuery } from '@/queries/inscribe'
 
-const address = ref('')
 const router = useRouter()
-const { query } = useRoute()
-const inscription = JSON.parse(JSON.stringify(query)) as Inscription
+const { params } = useRoute()
 
-getAddress('btc').then((addressStr) => {
-  address.value = addressStr
-})
+const address = ref(params.address as string)
+const inscriptionId = ref(params.inscriptionId as string)
 
-const content = ref('')
+const {
+  isLoading,
+  data: inscriptionDetail,
+  error,
+} = useBRCInscriptionInfoQuery(inscriptionId, {
+  enabled: computed(() => !!inscriptionId.value),
+})
 
-ordinalsApi(inscription.content)
-  .get()
-  .then((data: string) => {
-    content.value = data
-  })
+watch(error, () => {
+  if (error) {
+    router.go(-1)
+  }
+})
 
 const toSendBRC20 = () => {
+  const content = JSON.parse(inscriptionDetail.value!.contentBody)
   router.push({
     name: 'sendBRC20',
     query: {
+      inscriptionId: inscriptionId.value,
       address: address.value,
-      symbol: 'BTC',
-      inscriptionId: inscription.inscriptionId,
-      amount: inscription.outputValue / 1e8,
+      symbol: content.tick,
+      amount: content.amt,
     },
   })
 }
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="w-full text-gray-primary text-center" v-if="isLoading">Inscription Info Loading...</div>
+  <div class="w-full" v-else-if="inscriptionDetail">
     <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="text-white break-all">{{ inscriptionDetail.contentBody }}</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
+          >{{ inscriptionDetail.outputValue }} sats</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]"># {{ inscriptionDetail.inscriptionNumber }}</h4>
       <div class="text-xs text-[#999999]">
-        {{ dayjs(Number(inscription!.timestamp)).format('YYYY/MM/DD HH:mm:ss') }}
+        {{ dayjs(Number(inscriptionDetail.timestamp)).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="inscriptionDetail.inscriptionId">
+          {{ inscriptionDetail.inscriptionId }}
+        </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>{{ inscriptionDetail.outputValue }}</div>
       </div>
       <div class="flex items-start justify-between">
         <span class="title">Preview</span>
         <a
           target="_blank"
-          :href="inscription.preview"
-          :title="inscription.preview"
+          :href="inscriptionDetail.preview"
+          :title="inscriptionDetail.preview"
           class="w-52 truncate text-[#5173B9] underline"
-          >{{ inscription.preview }}</a
+          >{{ inscriptionDetail.preview }}</a
         >
       </div>
       <div class="flex items-start justify-between">
         <span class="title">Content:</span>
         <a
           target="_blank"
-          :href="inscription.content"
-          :title="inscription.content"
+          :href="inscriptionDetail.content"
+          :title="inscriptionDetail.content"
           class="w-52 truncate text-[#5173B9] underline"
-          >{{ inscription.content }}</a
+          >{{ inscriptionDetail.content }}</a
         >
       </div>
       <div class="flex items-center justify-between">
         <span class="title">Content Length:</span>
-        <span>{{ inscription.contentLength }}</span>
+        <span>{{ inscriptionDetail.contentLength }}</span>
       </div>
       <div class="flex items-center justify-between">
         <span class="title">Content Type:</span>
-        <span>{{ inscription.contentType }}</span>
+        <span>{{ inscriptionDetail.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(inscriptionDetail!.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="inscriptionDetail.genesisTransaction">
+          {{ inscriptionDetail.genesisTransaction }}
+        </div>
       </div>
     </div>
 

src/pages/nfts/BRCTokenList.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import dayjs from 'dayjs'
+import { ref, computed, watch } from 'vue'
 import BRCToken from './BRCToken.vue'
 import { useRouter } from 'vue-router'
 import { getAddress } from '@/lib/account'
-import { Inscription, useBRCInscriptionsQuery } from '@/queries/inscribe'
-import dayjs from 'dayjs'
+import { type Inscription, useBRCInscriptionsQuery } from '@/queries/inscribe'
 
+const sizeRef = ref(10)
 const addressRef = ref()
 const cursorRef = ref(0)
-const sizeRef = ref(10)
 const router = useRouter()
+const inscriptions = ref<Inscription[]>([])
 
 getAddress('btc').then((address) => {
   addressRef.value = address
@@ -19,6 +20,12 @@ const { isLoading, data: inscriptionsData } = useBRCInscriptionsQuery(addressRef
   enabled: computed(() => !!addressRef.value),
 })
 
+watch(inscriptionsData, () => {
+  if (inscriptionsData.value) {
+    inscriptions.value.push(...inscriptionsData.value.list)
+  }
+})
+
 const inscriptionsCountDisplay = computed(() => {
   if (!inscriptionsData.value) return '--'
   return `${inscriptionsData.value.list.length} items`
@@ -28,21 +35,17 @@ const toReceive = () => {
   router.push(`/wallet/receive?chain=btc`)
 }
 
-const toBRC20Detail = (inscription: Inscription) => {
-  const query = {
-    inscriptionId: inscription.inscriptionId,
-    inscriptionNumber: inscription.inscriptionNumber,
-    timestamp: inscription.timestamp * 1000,
-    outputValue: inscription.outputValue,
-    preview: inscription.preview,
-    content: inscription.content,
-    genesisTransaction: inscription.genesisTransaction,
-    contentLength: inscription.contentLength,
-    contentType: inscription.contentType,
-  }
+const loadBRCInscriptions = () => {
+  cursorRef.value = cursorRef.value + 1
+}
+
+const toBRC20Detail = (inscriptionId: string) => {
   router.push({
     name: 'brc20Detail',
-    query,
+    params: {
+      address: addressRef.value,
+      inscriptionId,
+    },
   })
 }
 </script>
@@ -64,22 +67,28 @@ const toBRC20Detail = (inscription: Inscription) => {
     <div v-if="isLoading" class="w-full py-3 text-center text-sm font-bold text-gray-500">
       BRC Token List loading...
     </div>
-    <div
-      v-else-if="inscriptionsData && inscriptionsData.total"
-      class="mt-12 px-3 py-4 grid grid-cols-3 gap-x-1 gap-y-7"
-    >
+    <div v-else-if="inscriptions.length">
+      <div class="px-3 py-4 grid grid-cols-3 gap-x-1 gap-y-7">
+        <div
+          v-for="inscription in inscriptions"
+          @click="toBRC20Detail(inscription.inscriptionId)"
+          class="flex flex-col items-center justify-center rounded-md cursor-pointer text-[#999999]"
+        >
+          <BRCToken :value="inscription.outputValue" :contentBody="inscription.contentBody" />
+          <span class="text-sm text-center mt-3 truncate" :title="'# ' + inscription.inscriptionNumber">{{
+            inscription.utxoHeight === 0 ? 'Uncomfirmed' : `# ${inscription.inscriptionNumber}`
+          }}</span>
+          <span class="text-xs text-center mt-1 h-[30px]">{{
+            dayjs(inscription.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss')
+          }}</span>
+        </div>
+      </div>
       <div
-        v-for="inscription in inscriptionsData.list"
-        @click="toBRC20Detail(inscription)"
-        class="flex flex-col items-center justify-center rounded-md cursor-pointer text-[#999999]"
+        v-if="inscriptionsData && inscriptionsData.total > inscriptions.length"
+        class="text-center text-gray-primary hover:underline cursor-pointer hover:text-blue-500"
+        @click="loadBRCInscriptions"
       >
-        <BRCToken :value="inscription.outputValue" :contentBody="inscription.contentBody" />
-        <span class="text-sm text-center mt-3 truncate" :title="'# ' + inscription.inscriptionNumber">{{
-          inscription.utxoHeight === 0 ? 'Uncomfirmed' : `# ${inscription.inscriptionNumber}`
-        }}</span>
-        <span class="text-xs text-center mt-1 h-[30px]">{{
-          dayjs(inscription.timestamp * 1000).format('YYYY/MM/DD HH:mm:ss')
-        }}</span>
+        Load more Ordinals
       </div>
     </div>
     <div v-else class="w-full py-3 text-center text-sm font-bold text-gray-500">No Ordinals yet.</div>

src/pages/wallet/Asset.vue

@@ -236,8 +236,8 @@ const toTransfer = () => {
             <span class="text-base">Available</span>
             <span class="text-lg" v-if="tickersData">
               <span>{{ tickersData.tokenBalance.availableBalanceSafe }} {{ asset.symbol }}</span>
-              <span class="text-gray-primary"
-                > + {{ Math.abs(Number(tickersData.tokenBalance.availableBalanceUnSafe)) }} {{ asset.symbol }}</span
+              <span v-if="Number(tickersData.tokenBalance.availableBalanceUnSafe)" class="text-gray-primary">
+                + {{ Math.abs(Number(tickersData.tokenBalance.availableBalanceUnSafe)) }} {{ asset.symbol }}</span
               >
             </span>
             <span class="text-lg" v-else>--</span>

src/pages/wallet/Index.vue

@@ -1,18 +1,30 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-
-import { getCurrentAccount, type Account } from '@/lib/account'
-
 import Balance from './components/Balance.vue'
 import AssetList from './components/AssetList.vue'
+import { process } from '@/lib/actions/btc/inscribe'
 import AccountItem from '../accounts/components/Item.vue'
+import { getCurrentAccount, type Account } from '@/lib/account'
 
 const currentAccount = ref<Account>()
 getCurrentAccount().then((acc) => {
   if (!acc) return
 
   currentAccount.value = acc
 })
+
+const test = async () => {
+  // const res = await process({
+  //   data: {
+  //     feeRate: 1,
+  //     metaidDataList: [
+  //     ],
+  //     revealOutValue: 546,
+  //     changeAddress: 'tb1pv3efxdwc2nkck5kg8updw62kxqt8mclshk3a2ywlazqa6n225n9qm9url7',
+  //   },
+  // })
+  // console.log({ res })
+}
 </script>
 
 <template>
@@ -25,6 +37,8 @@ getCurrentAccount().then((acc) => {
       :current-account="currentAccount"
     />
 
+    <button @click="test">test</button>
+
     <Balance />
 
     <!-- Asset List -->

src/pages/wallet/Inscribe.vue

@@ -296,7 +296,7 @@ function toSuceess() {
           <span class="text-sm" @click="copyHex">Copy psbt transaction data</span>
         </div>
       </div>
-      <div class="w-full left-0 flex items-center space-x-4 mt-4 justify-center">
+      <div class="w-full left-0 flex items-center space-x-4 mt-4 pb-4 justify-center">
         <button
           @click="cancel"
           class="border w-[133px] rounded-lg py-3 text-sm font-bold text-black-primary"

src/queries/exchange-rates.ts

@@ -52,7 +52,7 @@ export const useExchangeRatesQuery = (
     queryKey: ['exchangeRates', { coinType }],
     queryFn: async () => {
       const net = getNet()
-      if (net === 'mainnet') {
+      if (net === 'testnet') {
         return doNothing(symbol.value)
       }
       if (coinType.value === 'BRC-20') {

src/queries/inscribe.ts

@@ -110,15 +110,34 @@ export async function getBRCInscriptions(
   })
 }
 
+export async function getBRCInscriptionInfo(inscriptionId: string): Promise<Inscription> {
+  const net = getNet()
+  const {
+    inscriptions: [inscription],
+  } = await metaletApiV3<{ inscriptions: Inscription[] }>('/inscription/utxo').get({
+    net,
+    inscriptionId,
+  })
+  return inscription
+}
+
 export const useBRCInscriptionsQuery = (
   address: Ref<string>,
-  cursor: Ref<number>,
+  page: Ref<number>,
   size: Ref<number>,
   options: { enabled: ComputedRef<boolean> }
 ) => {
   return useQuery({
-    queryKey: ['BRCInscriptions', { address: address.value, cursor: cursor.value, size: size.value }],
-    queryFn: () => getBRCInscriptions(address.value, cursor.value, size.value),
+    queryKey: ['BRCInscriptions', { address, page, size }],
+    queryFn: () => getBRCInscriptions(address.value, size.value * page.value, size.value),
+    ...options,
+  })
+}
+
+export const useBRCInscriptionInfoQuery = (inscriptionId: Ref<string>, options: { enabled: ComputedRef<boolean> }) => {
+  return useQuery({
+    queryKey: ['BRCInscriptionInfo', { inscriptionId }],
+    queryFn: () => getBRCInscriptionInfo(inscriptionId.value),
     ...options,
   })
 }

src/queries/utxos.ts

@@ -86,7 +86,7 @@ export async function getBtcUtxos(address: string): Promise<UTXO[]> {
 // }
 
 export async function getInscriptionUtxo(inscriptionId: string): Promise<UTXO> {
-  const net = await getNet()
+  const net = getNet()
   return await metaletApiV3<UTXO>('/inscription/utxo').get({ net, inscriptionId })
 }