fix: Resolve insufficient funds issue and display transaction details…

… during inscription.

src/lib/actions/btc/inscribe.ts

@@ -42,8 +42,9 @@ export type PrevOutput = {
 
 export type InscriptionRequest = {
   commitTxPrevOutputList: PrevOutput[]
-  commitFeeRate: number
-  revealFeeRate: number
+  feeRate: number
+  // commitFeeRate: number
+  // revealFeeRate: number
   // inscriptionDataList: InscriptionData[]
   metaidDataList: MetaidData[]
   revealOutValue: number
@@ -112,22 +113,28 @@ export class InscriptionTool {
       tool.inscriptionTxCtxDataList.push(createMetaIdTxCtxData(network, metaidData, randomKeyPairs.publicKey))
     })
 
-    const totalRevealPrevOutputValue = tool.buildEmptyRevealTx(network, revealOutValue, request.revealFeeRate)
+    const totalRevealPrevOutputValue = tool.buildEmptyRevealTx(network, revealOutValue, request.feeRate)
+    console.log('buildEmptyRevealTx')
+
     const insufficient = tool.buildCommitTx(
       network,
       request.commitTxPrevOutputList,
       request.changeAddress,
       totalRevealPrevOutputValue,
-      request.commitFeeRate,
+      request.feeRate,
       minChangeValue,
       keyPairs.privateKey!
     )
+    console.log('buildCommitTx', insufficient)
+
     if (insufficient) {
       return tool
     }
+
     tool.signCommitTx(request.commitTxPrevOutputList, keyPairs.privateKey!)
+    console.log('signCommitTx')
     tool.completeRevealTx(randomKeyPairs.privateKey!)
-
+    console.log('completeRevealTx')
     return tool
   }
 
@@ -394,6 +401,8 @@ export function inscribe(network: bitcoin.Network, request: InscriptionRequest,
       commitTxFee: tool.mustCommitTxFee,
       revealTxFees: tool.mustRevealTxFees,
       commitAddrs: tool.commitAddrs,
+      commitCost: 0,
+      revealCost: 0,
     }
   }
 
@@ -402,6 +411,12 @@ export function inscribe(network: bitcoin.Network, request: InscriptionRequest,
     revealTxs: tool.revealTxs.map((revealTx) => revealTx.toHex()),
     ...tool.calculateFee(),
     commitAddrs: tool.commitAddrs,
+    commitCost: tool.commitTxPrevOutputFetcher.reduce((accumulator, currentValue) => {
+      return accumulator + currentValue
+    }, 0),
+    revealCost: tool.revealTxPrevOutputFetcher.reduce((accumulator, currentValue) => {
+      return accumulator + currentValue
+    }, 0),
   }
 }
 
@@ -412,19 +427,23 @@ function initOptions() {
 interface InscribeHexResult {
   commitTxHex: string
   revealTxsHex: string[]
+  commitCost: number
+  revealCost: number
 }
 
 interface InscribeTxIdResult {
   commitTxId: string
   revealTxIds: string[]
+  commitCost: number
+  revealCost: number
 }
 
 export async function process({
   data,
   options = initOptions(),
 }: {
   data: Omit<InscriptionRequest, 'commitTxPrevOutputList'>
-  options: { noBroadcast: boolean }
+  options?: { noBroadcast: boolean }
 }): Promise<InscribeHexResult | InscribeTxIdResult> {
   const network = await getBtcNetwork()
   const address = await getAddress('btc')
@@ -437,12 +456,16 @@ export async function process({
   }))
   const signer = (await getSigner('btc')) as BIP32Interface
 
-  const { commitTx, revealTxs } = inscribe(network, { ...data, commitTxPrevOutputList }, signer)
+  const { commitTx, revealTxs, commitCost, revealCost } = inscribe(network, { ...data, commitTxPrevOutputList }, signer)
+  if (commitTx === '') {
+    throw new Error('Insufficient funds')
+  }
+
   if (!options.noBroadcast) {
     const commitTxId = await broadcastBTCTx(commitTx)
     await sleep(1000)
     const [...revealTxIds] = await Promise.all([...revealTxs.map((revealTx) => broadcastBTCTx(revealTx))])
-    return { commitTxId, revealTxIds }
+    return { commitTxId, revealTxIds, commitCost, revealCost }
   }
-  return { commitTxHex: commitTx, revealTxsHex: revealTxs }
+  return { commitTxHex: commitTx, revealTxsHex: revealTxs, commitCost, revealCost }
 }

src/pages/authorize/Inscribe.vue

@@ -1,17 +1,104 @@
 <script lang="ts" setup>
-import { CheckBadgeIcon } from '@heroicons/vue/24/solid'
-
+import { ref } from 'vue'
 import actions from '@/data/authorize-actions'
+import CopyIcon from '@/assets/icons/copy.svg'
+import { ChevronLeftIcon } from '@heroicons/vue/24/outline'
 const action = actions.Inscribe
 
-const accesses = ['View your wallet address, balance and activity', 'Request approval for transactions']
+const props = defineProps<{
+  params: {
+    data: {
+      feeRate: number
+    }
+    message: string
+  }
+}>()
+
+const txHexs = ref<string[]>([])
+const error = ref<Error>()
+const commitCost = ref<number>(0)
+const revealCost = ref<number>(0)
+
+const isShowingDetails = ref(false)
+actions.Inscribe.process({ ...props.params, options: { noBroadcast: true } })
+  .then(
+    ({
+      commitTxHex,
+      revealTxsHex,
+      commitCost: _commitCost,
+      revealCost: _revealCost,
+    }: {
+      commitTxHex: string
+      revealTxsHex: string[]
+      commitCost: number
+      revealCost: number
+    }) => {
+      console.log('Inscribe', [commitTxHex, ...revealTxsHex])
+      txHexs.value = [commitTxHex, ...revealTxsHex]
+      commitCost.value = _commitCost
+      revealCost.value = _revealCost
+    }
+  )
+  .catch((err: Error) => {
+    error.value = err
+  })
+
+const copy = (txHex: string) => {
+  navigator.clipboard.writeText(txHex)
+}
 </script>
 
 <template>
-  <h3 class="text-base font-bold">{{ action.title }}</h3>
+  <div class="bg-white absolute inset-0 p-4 flex flex-col" v-if="isShowingDetails">
+    <!-- detail header -->
+    <div class="grid grid-cols-6 items-center">
+      <div class="col-span-1">
+        <button class="rounded-full shadow-md p-2" @click="isShowingDetails = false">
+          <ChevronLeftIcon class="h-4 w-4 text-gray-500" aria-hidden="true" />
+        </button>
+      </div>
 
-  <div class="mt-6 gap-x-2 flex items-center">
-    <CheckBadgeIcon class="h-6 w-6 text-primary-blue" />
-    <div class="text-sm text-gray-700">{{ action.description }}</div>
+      <div class="col-span-4 font-bold text-center">Transaction Details</div>
+    </div>
+
+    <!-- detail body -->
+    <div class="py-4 space-y-2">
+      <div class="flex justify-between">
+        <div class="label">Commit Cost</div>
+        <div class="text-xs flex gap-2">{{ commitCost / 1e8 }} BTC</div>
+      </div>
+      <div class="flex justify-between">
+        <div class="label">Reveal Cost</div>
+        <div class="text-xs flex gap-2">{{ revealCost / 1e8 }} BTC</div>
+      </div>
+      <div class="flex justify-between">
+        <div class="label">Total Cost</div>
+        <div class="text-xs flex gap-2">{{ (commitCost + revealCost) / 1e8 }} BTC</div>
+      </div>
+      <div class="flex justify-between">
+        <div class="label">Fee Rate</div>
+        <div class="text-xs flex gap-2">{{ params.data.feeRate }} sat/vB</div>
+      </div>
+      <div class="flex justify-between" v-for="(txHex, i) in txHexs">
+        <div class="label">{{ `Tx${i + 1}` }}</div>
+        <CopyIcon class="h-4 w-4 cursor-pointer text-blue-300 hover:text-blue-500" @click="copy(txHex)" />
+      </div>
+    </div>
   </div>
+  <template v-else>
+    <h3 class="text-base font-bold">{{ action.title }}</h3>
+
+    <div class="value">{{ params.message }}</div>
+
+    <div v-if="error" class="text-red-500 text-xs">{{error.message}}</div>
+
+    <div class="mt-2 flex items-center justify-center" v-else>
+      <button
+        class="underline decoration-primary-blue text-gray-700 px-4 py-2 mx-auto font-bold decoration underline-offset-4 hover:underline-offset-2 transition-all duration-300"
+        @click="isShowingDetails = true"
+      >
+        View Transaction Details
+      </button>
+    </div>
+  </template>
 </template>

src/pages/wallet/Index.vue

@@ -16,12 +16,13 @@ getCurrentAccount().then((acc) => {
 const test = async () => {
   // const res = await process({
   //   data: {
-  //     feeRate: 1,
-  //     metaidDataList: [
-  //     ],
+  //     commitFeeRate: 1,
+  //     revealFeeRate: 1,
+  //     metaidDataList: [],
   //     revealOutValue: 546,
   //     changeAddress: 'tb1pv3efxdwc2nkck5kg8updw62kxqt8mclshk3a2ywlazqa6n225n9qm9url7',
   //   },
+  //   options: { noBroadcast: false },
   // })
   // console.log({ res })
 }