From 81cee067632ae91751c7dc666c6e73a7fdc7b2d4 Mon Sep 17 00:00:00 2001
From: AricRedemption <aricredemption@gmail.com>
Date: Tue, 26 Sep 2023 00:17:05 +0800
Subject: [PATCH 1/5] chore: add brc20 fiter and total balance

---
 src/lib/actions/btc/sign-psbt.ts          |  2 +-
 src/lib/balance.ts                        | 21 +++++
 src/pages/wallet/components/AssetItem.vue |  2 +
 src/pages/wallet/components/AssetList.vue | 19 +++--
 src/pages/wallet/components/Balance.vue   | 34 +-------
 src/queries/btc.ts                        | 23 +++++-
 src/queries/utxo.ts                       | 94 +++++++++++++++++++++++
 7 files changed, 157 insertions(+), 38 deletions(-)
 create mode 100644 src/queries/utxo.ts

diff --git a/src/lib/actions/btc/sign-psbt.ts b/src/lib/actions/btc/sign-psbt.ts
index 2534009..453894d 100644
--- a/src/lib/actions/btc/sign-psbt.ts
+++ b/src/lib/actions/btc/sign-psbt.ts
@@ -1,5 +1,5 @@
 import ECPairFactory from 'ecpair'
-import { getPrivateKey, getCurrentAccount, getAddressType, getPublicKey, getAddress } from '@/lib/account'
+import { getPrivateKey, getAddressType, getPublicKey, getAddress } from '@/lib/account'
 import bitcoin, { address as PsbtAddress, networks } from 'bitcoinjs-lib'
 import * as ecc from '@bitcoin-js/tiny-secp256k1-asmjs'
 import { getNetwork } from '@/lib/network'
diff --git a/src/lib/balance.ts b/src/lib/balance.ts
index e69de29..6603b31 100644
--- a/src/lib/balance.ts
+++ b/src/lib/balance.ts
@@ -0,0 +1,21 @@
+import { computed, ref } from 'vue'
+
+interface Asset {
+  name: string
+  value: number
+}
+
+export const totalBalance = computed(() => {
+  return assetList.value.reduce((sum, asset) => sum + asset.value, 0)
+})
+
+export const assetList = ref<Asset[]>([])
+
+export async function updateAsset(asset: Asset) {
+  const preAsset = assetList.value.find((assetItem) => assetItem.name === asset.name)
+  if (!preAsset) {
+    assetList.value.push(asset)
+  } else {
+    preAsset.value = asset.value
+  }
+}
diff --git a/src/pages/wallet/components/AssetItem.vue b/src/pages/wallet/components/AssetItem.vue
index 9bd8219..18eaa3c 100644
--- a/src/pages/wallet/components/AssetItem.vue
+++ b/src/pages/wallet/components/AssetItem.vue
@@ -9,6 +9,7 @@ import { type Asset, getTagInfo, Tag } from '@/data/assets'
 import { useExchangeRatesQuery } from '@/queries/exchange-rates'
 import { getCurrentAccount } from '@/lib/account'
 import { getNetwork } from '@/lib/network'
+import { updateAsset } from '@/lib/balance'
 
 const { asset } = defineProps<{
   asset: Asset
@@ -45,6 +46,7 @@ const exchange = computed(() => {
     const usdRate: number = Number(exchangeRate.value.price)
     const balanceInStandardUnit = balance.value.total / 10 ** asset.decimal
     const exchanged = balanceInStandardUnit * usdRate
+    updateAsset({ name: asset.symbol, value: exchanged })
     return `$${exchanged.toFixed(2)} USD`
   }
 
diff --git a/src/pages/wallet/components/AssetList.vue b/src/pages/wallet/components/AssetList.vue
index de66b27..338aa4e 100644
--- a/src/pages/wallet/components/AssetList.vue
+++ b/src/pages/wallet/components/AssetList.vue
@@ -10,17 +10,26 @@ import useTokensQuery from '@/queries/tokens'
 import { getAssetsDisplay } from '@/lib/assets'
 import { BTCAssets, MVCAssets } from '@/data/assets'
 
+import { fetchBtcAsset } from '@/queries/btc'
+
 const router = useRouter()
 
 const address = ref<string>('')
-getAddress().then((add) => {
-  if (!add) return router.push('/welcome')
-
-  address.value = add
+const btcAssets = ref(BTCAssets)
+getAddress().then((addr) => {
+  if (!addr) return router.push('/welcome')
+  address.value = addr
+  fetchBtcAsset(addr).then(userBRC20Asset => {
+    btcAssets.value = btcAssets.value
+      .filter(asset =>
+        asset.symbol === 'BTC' || userBRC20Asset.includes(asset.symbol))
+  })
 })
+
+
 const enabled = computed(() => !!address.value)
 
-const btcAssets = ref(BTCAssets)
+
 const listedAssets = ref(MVCAssets)
 
 const { isLoading, data: userOwnedTokens } = useTokensQuery(address, { enabled })
diff --git a/src/pages/wallet/components/Balance.vue b/src/pages/wallet/components/Balance.vue
index 4274519..5e29f65 100644
--- a/src/pages/wallet/components/Balance.vue
+++ b/src/pages/wallet/components/Balance.vue
@@ -1,37 +1,10 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import { computed, ref, Ref } from 'vue'
+import { totalBalance } from '@/lib/balance'
 import { ArrowUpRightIcon, QrCodeIcon } from '@heroicons/vue/20/solid'
 
-import { useBalanceQuery } from '@/queries/balance'
-import { useExchangeRatesQuery } from '@/queries/exchange-rates'
-import { getAddress } from '@/lib/account'
-
 const router = useRouter()
 
-const address: Ref<string> = ref('')
-getAddress('mvc').then((add) => {
-  address.value = add!
-})
-
-const enabled = computed(() => !!address.value)
-
-const { isLoading, data: balance } = useBalanceQuery(address, 'SPACE', { enabled })
-const { isLoading: isExchangeRateLoading, data: exchangeRate } = useExchangeRatesQuery('SPACE', { enabled })
-
-const exchange = computed(() => {
-  if (balance.value && exchangeRate.value) {
-    const usdRate: number = Number(exchangeRate.value.price)
-    const balanceInStandardUnit = balance.value.total / 10 ** 8
-    const exchanged = balanceInStandardUnit * usdRate
-
-    // 保留两位
-    return `$${exchanged.toFixed(2)}`
-  }
-
-  return '--'
-})
-
 function toSelectAsset(purpose: 'receive' | 'send') {
   const selectAssetRoute = {
     name: 'select-asset',
@@ -46,9 +19,8 @@ function toSelectAsset(purpose: 'receive' | 'send') {
 <template>
   <div class="pt-4">
     <div class="text-gray-500">Total Balance</div>
-    <div class="mt-2 text-3xl font-bold" v-if="isLoading || isExchangeRateLoading">--</div>
-    <div class="mt-2 text-3xl font-bold" v-else>
-      {{ exchange }}
+    <div class="mt-2 text-3xl font-bold">
+      $ {{ totalBalance.toFixed(2) }} USD
     </div>
 
     <!-- 接收和发送按钮 -->
diff --git a/src/queries/btc.ts b/src/queries/btc.ts
index 308e4ff..a3690d2 100644
--- a/src/queries/btc.ts
+++ b/src/queries/btc.ts
@@ -1,5 +1,6 @@
 import dayjs from 'dayjs'
-import { ordersApi } from '@/queries/request'
+import { ordersApi, metaletApi } from '@/queries/request'
+import { BRC20_Symbol_UC } from '@/lib/asset-symbol'
 
 export const getBTCBalance = (address: string) => {
   return ordersApi('/balance').get({ address })
@@ -51,3 +52,23 @@ export const getBTActivities = async (address: string): Promise<Tx[]> => {
 export const getBTCPrice = () => {
   return ordersApi('/btc-price').get()
 }
+
+type TokenType = 'BRC20'
+
+interface Tick {
+  token: BRC20_Symbol_UC
+  tokenType: TokenType
+  balance: string
+  availableBalance: string
+  transferBalance: string
+}
+
+export const fetchBtcAsset = async (address: string): Promise<string[]> => {
+  const brc20Assets = await metaletApi(`/address/brc20/asset`)
+    .get({ address, chain: 'btc' })
+    .then((res) => {
+      return res.data.tickList.map((tick: Tick) => tick.token)
+    })
+
+  return brc20Assets
+}
diff --git a/src/queries/utxo.ts b/src/queries/utxo.ts
new file mode 100644
index 0000000..1902528
--- /dev/null
+++ b/src/queries/utxo.ts
@@ -0,0 +1,94 @@
+import { useQuery } from '@tanstack/vue-query'
+import { metaletApi, mvcApi } from './request'
+import { ComputedRef, Ref } from 'vue'
+import { SymbolUC, BRC20_SYMBOLS } from '@/lib/asset-symbol'
+
+type TokenType = "BRC20"
+
+interface Tick {
+  token: SymbolUC
+  tokenType: TokenType
+  balance: string
+  availableBalance: string
+  transferBalance: string
+}
+
+export type Balance = {
+  address: string
+  confirmed?: number
+  unconfirmed?: number
+  availableBalance?: number
+  transferBalance?: number
+  total: number
+}
+
+export const fetchSpaceBalance = async (address: string): Promise<Balance> => {
+  const balance: any = await mvcApi(`/address/${address}/balance`).get()
+  balance.total = balance.confirmed + balance.unconfirmed
+  return balance
+}
+
+export const fetchBtcBalance = async (address: string): Promise<Balance> => {
+  const balance: any = await metaletApi(`/address/balance`)
+    .get({ address, chain: 'btc' })
+    .then((res) => res.data)
+
+  balance.total = balance.confirmed + balance.unconfirmed
+
+  return balance
+}
+
+export const fetchBRC20Balance = async (address: string, symbol: SymbolUC): Promise<Balance> => {
+  const { tickList } = await metaletApi(`/address/brc20/asset`)
+    .get({ address, chain: 'btc', tick: symbol.toLowerCase() })
+    .then((res) => res.data)
+
+  const tickAsset = tickList.find((tick: Tick) => tick.token === symbol)
+
+  if (tickAsset) {
+    return {
+      address,
+      availableBalance: Number(tickAsset.availableBalance),
+      transferBalance: Number(tickAsset.transferBalance),
+      total: Number(tickAsset.balance),
+    }
+  }
+
+  return {
+    address,
+    availableBalance: 0,
+    transferBalance: 0,
+    total: 0,
+  }
+}
+
+export const doNothing = async (): Promise<Balance> => {
+  return {
+    address: '',
+    confirmed: 0,
+    unconfirmed: 0,
+    total: 0,
+  }
+}
+
+export const useBalanceQuery = (address: Ref, symbol: SymbolUC, options: { enabled: ComputedRef<boolean> }) => {
+  return useQuery({
+    queryKey: ['balance', { address, symbol }],
+    queryFn: () => {
+      switch (symbol) {
+        case 'SPACE':
+          return fetchSpaceBalance(address.value)
+        case 'BTC':
+          return fetchBtcBalance(address.value)
+        default: {
+          if (BRC20_SYMBOLS.includes(symbol)) {
+            return fetchBRC20Balance(address.value, symbol)
+          }
+          return doNothing()
+        }
+      }
+    },
+    ...options,
+
+  })
+}

From 8215b96d56099fccf552a61dcb33303acc664af6 Mon Sep 17 00:00:00 2001
From: Vincent Tse <river_run@126.com>
Date: Tue, 26 Sep 2023 14:21:10 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=8F=84=E2=80=8D=E2=99=82=EF=B8=8F=20C?=
 =?UTF-8?q?hore:=20Remove=20some=20unused=20console.log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content-script/inject.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/content-script/inject.ts b/src/content-script/inject.ts
index 281342d..dc3370c 100644
--- a/src/content-script/inject.ts
+++ b/src/content-script/inject.ts
@@ -23,9 +23,7 @@ const listenToMetalet = () => {
 listenToMetalet()
 
 const callMetalet = async (params: MetaletParams) => {
-  console.log('calling...')
   const response = await browser.runtime.sendMessage(params)
-  console.log({ response })
 
   if (response?.channel === 'from-metaidwallet') {
     window.postMessage(response, '*')

From 160dde6b3da9bf26f005bcb655eea7b9948e87ac Mon Sep 17 00:00:00 2001
From: AricRedemption <aricredemption@gmail.com>
Date: Tue, 26 Sep 2023 21:42:51 +0800
Subject: [PATCH 3/5] fix: import wallet info error

---
 src/lib/bip32-deriver.ts    |  4 +++-
 src/pages/wallet/Import.vue | 38 +++++++++++--------------------------
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/lib/bip32-deriver.ts b/src/lib/bip32-deriver.ts
index 14d3f92..a86bc30 100644
--- a/src/lib/bip32-deriver.ts
+++ b/src/lib/bip32-deriver.ts
@@ -5,7 +5,9 @@ import { mvc } from 'meta-contract'
 
 import { raise } from './helpers'
 import { type Network } from './network'
-import { networks, payments } from 'bitcoinjs-lib'
+import bitcoin, { networks, payments } from 'bitcoinjs-lib'
+
+bitcoin.initEccLib(ecc)
 
 export type AddressType = 'P2WPKH' | 'P2SH-P2WPKH' | 'P2TR' | 'P2PKH'
 
diff --git a/src/pages/wallet/Import.vue b/src/pages/wallet/Import.vue
index d703b7b..c46114f 100644
--- a/src/pages/wallet/Import.vue
+++ b/src/pages/wallet/Import.vue
@@ -62,8 +62,8 @@ const onSubmit = async () => {
 
   // 转化成私钥
   try {
+    const btcPath = selectedScript.value.path
     const fullPath = `m/44'/${pathDepth.value}'/0'/0/0`
-    const btcPath = `m/86'/0'/0'/0/0`
 
     const allAddresses = deriveAllAddresses({
       mnemonic: mnemonicStr,
@@ -177,35 +177,23 @@ const onSubmit = async () => {
     <Listbox v-model="selectedScript">
       <div class="relative mt-1">
         <ListboxButton
-          class="relative w-full cursor-default rounded-lg bg-[#f5f5f5] py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-        >
+          class="relative w-full cursor-default rounded-lg bg-[#f5f5f5] py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
           <span class="block truncate">{{ selectedScript.path }}</span>
           <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
           </span>
         </ListboxButton>
 
-        <transition
-          leave-active-class="transition duration-100 ease-in"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
-        >
+        <transition leave-active-class="transition duration-100 ease-in" leave-from-class="opacity-100"
+          leave-to-class="opacity-0">
           <ListboxOptions
-            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-[#f5f5f5] py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-          >
-            <ListboxOption
-              v-slot="{ selected }"
-              v-for="script in scripts"
-              :key="script.name"
-              :value="script"
-              as="template"
-            >
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-[#f5f5f5] py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <ListboxOption v-slot="{ selected }" v-for="script in scripts" :key="script.name" :value="script"
+              as="template">
               <li :class="['text-gray-900', 'relative cursor-pointer select-none py-1 pl-3 pr-4']">
                 <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{ script.path }}</span>
-                <span
-                  v-if="selected"
-                  class="absolute inset-y-2 right-2 flex h-5 w-5 items-center justify-center rounded-md bg-[#1E2BFF] text-white"
-                >
+                <span v-if="selected"
+                  class="absolute inset-y-2 right-2 flex h-5 w-5 items-center justify-center rounded-md bg-[#1E2BFF] text-white">
                   <CheckIcon class="h-4 w-4" aria-hidden="true" />
                 </span>
               </li>
@@ -217,12 +205,8 @@ const onSubmit = async () => {
 
     <!-- ok -->
     <div class="mt-32 flex items-center justify-center">
-      <button
-        class="main-btn-bg mt-8 grow rounded-md py-3 text-sm font-bold text-sky-50"
-        :class="[!finished && 'muted']"
-        :disabled="!finished"
-        @click="onSubmit"
-      >
+      <button class="main-btn-bg mt-8 grow rounded-md py-3 text-sm font-bold text-sky-50" :class="[!finished && 'muted']"
+        :disabled="!finished" @click="onSubmit">
         OK
       </button>
     </div>

From c813924f22a65ded7758157ad987749123b7df78 Mon Sep 17 00:00:00 2001
From: AricRedemption <aricredemption@gmail.com>
Date: Tue, 26 Sep 2023 22:23:00 +0800
Subject: [PATCH 4/5] fix: brc20 asset list load wrong

---
 src/lib/account.ts                        | 2 ++
 src/lib/balance.ts                        | 2 ++
 src/pages/wallet/components/AssetList.vue | 8 ++++----
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/account.ts b/src/lib/account.ts
index eda1448..f860227 100644
--- a/src/lib/account.ts
+++ b/src/lib/account.ts
@@ -177,6 +177,8 @@ export async function addAccount(newAccount: Omit<Account, 'id' | 'name'>) {
 
 async function getAccountProperty(chain: Chain, key: keyof ChainDetail[Chain]): Promise<string> {
   const account = await getCurrentAccount()
+  console.log('current account', account)
+
   if (!account) {
     return ''
   }
diff --git a/src/lib/balance.ts b/src/lib/balance.ts
index 6603b31..fcd8e13 100644
--- a/src/lib/balance.ts
+++ b/src/lib/balance.ts
@@ -6,6 +6,8 @@ interface Asset {
 }
 
 export const totalBalance = computed(() => {
+  console.log('assetList', assetList.value)
+
   return assetList.value.reduce((sum, asset) => sum + asset.value, 0)
 })
 
diff --git a/src/pages/wallet/components/AssetList.vue b/src/pages/wallet/components/AssetList.vue
index 338aa4e..102b26f 100644
--- a/src/pages/wallet/components/AssetList.vue
+++ b/src/pages/wallet/components/AssetList.vue
@@ -16,7 +16,9 @@ const router = useRouter()
 
 const address = ref<string>('')
 const btcAssets = ref(BTCAssets)
-getAddress().then((addr) => {
+
+// TODO Refactor into hooks
+getAddress("btc").then((addr) => {
   if (!addr) return router.push('/welcome')
   address.value = addr
   fetchBtcAsset(addr).then(userBRC20Asset => {
@@ -26,12 +28,10 @@ getAddress().then((addr) => {
   })
 })
 
+const listedAssets = ref(MVCAssets)
 
 const enabled = computed(() => !!address.value)
 
-
-const listedAssets = ref(MVCAssets)
-
 const { isLoading, data: userOwnedTokens } = useTokensQuery(address, { enabled })
 type UserOwnedToken = NonNullable<typeof userOwnedTokens.value>[number]
 

From aef0f93e7a811288bfce1433a23809ce63849d13 Mon Sep 17 00:00:00 2001
From: Vincent Tse <river_run@126.com>
Date: Wed, 27 Sep 2023 17:37:26 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=90=9B=20FIX:=20don't=20emit=20anothe?=
 =?UTF-8?q?r=20request=20when=20it's=20an=20authorize=20action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/content-script/inject.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content-script/inject.ts b/src/content-script/inject.ts
index d9fecfe..9fdfb96 100644
--- a/src/content-script/inject.ts
+++ b/src/content-script/inject.ts
@@ -37,8 +37,8 @@ const callMetalet = async (params: MetaletParams) => {
   try {
     await tryCall(params)
   } catch (e: any) {
-    // If the error comes from timeout, we try again
-    if (e.message.includes('Could not establish connection.')) {
+    // If the error comes from timeout and it's a query action, we try again
+    if (e.message.includes('Could not establish connection.') && params.action.includes('query')) {
       setTimeout(async () => {
         await tryCall(params)
       }, 1000)