diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 75ba726..f378b8a 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - 'feature/**'
 
 jobs:
   build:
diff --git a/package.json b/package.json
index 0ae1401..e080512 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "metalet",
   "private": true,
-  "version": "2.0.4",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite --config vite.dev.config.ts",
diff --git a/public/content.js b/public/content.js
index 7315b14..8c797a4 100644
--- a/public/content.js
+++ b/public/content.js
@@ -1,161 +1,155 @@
-const m = (n = 32) => {
-  let e = "";
-  const a = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  for (let r = 0; r < n; r++)
-    e += a.charAt(Math.floor(Math.random() * a.length));
-  return e;
-};
-async function t(n, e = "authorize", a) {
-  const r = `${e}-${n}`, u = m(16), l = window.location.host;
-  window.postMessage(
-    {
-      nonce: u,
-      channel: "to-metaidwallet",
-      action: r,
-      host: l,
-      icon: "",
-      params: a || {}
-    },
-    "*"
-  );
-  const h = (i) => {
-    const o = (c) => {
-      if (!(c.source !== window || c.data?.channel !== "from-metaidwallet")) {
-        if (c.data?.nonce === u) {
-          if (window.removeEventListener("message", o), c.data?.res?.error)
-            throw new Error(c.data.res.error);
-          i && typeof i == "function" && i(c.data);
+;(function () {
+  'use strict'
+  const l = (n = 32) => {
+    let r = ''
+    const a = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+    for (let t = 0; t < n; t++) r += a.charAt(Math.floor(Math.random() * a.length))
+    return r
+  }
+  async function e(n, r = 'authorize', a, t) {
+    const x = `${r}-${n}`,
+      f = l(16),
+      N = window.location.host
+    window.postMessage({ nonce: f, channel: 'to-metaidwallet', action: x, host: N, icon: '', params: a || {} }, '*')
+    const v = (c) => {
+      const o = (i) => {
+        if (!(i.source !== window || i.data?.channel !== 'from-metaidwallet')) {
+          if (i.data?.nonce === f) {
+            if ((window.removeEventListener('message', o), i.data?.res?.error)) throw new Error(i.data.res.error)
+            c && typeof c == 'function' && c(i.data)
+          }
+          return !0
         }
-        return !0;
       }
-    };
-    window.addEventListener("message", o);
-  };
-  return await new Promise((i) => {
-    h((o) => {
-      i(o.res);
-    });
-  });
-}
-async function s() {
-  return await t("Connect");
-}
-async function y() {
-  return await t("Disconnect");
-}
-async function T() {
-  return await t("IsConnected", "query");
-}
-async function B() {
-  return await t("GetNetwork", "query");
-}
-async function b() {
-  return await t("SwitchNetwork");
-}
-async function q(n) {
-  return await t("GetAddress", "query", n);
-}
-async function G(n) {
-  return await t("GetPublicKey", "query", n);
-}
-async function P() {
-  return await t("GetXPublicKey", "query");
-}
-async function w(n) {
-  return await t("GetBalance", "query", n);
-}
-async function S(n) {
-  return await t("GetUtxos", "query", n);
-}
-async function p(n) {
-  return await t("EciesEncrypt", "authorize", n);
-}
-async function z(n) {
-  return await t("EciesDecrypt", "authorize", n);
-}
-async function A(n) {
-  return await t("SignMessage", "authorize", n);
-}
-async function C(n) {
-  return await t("VerifySignature", "query", n);
-}
-async function E(n) {
-  return await t("PreviewTransaction", "query", n);
-}
-async function M(n) {
-  return await t("SignTransaction", "authorize", n);
-}
-async function K(n) {
-  return await t("SignTransactions", "authorize", n);
-}
-async function k(n) {
-  return await t("Pay", "authorize", n);
-}
-async function x(n) {
-  return await t("Transfer", "authorize", n);
-}
-async function N(n) {
-  return await t("Merge", "authorize", n);
-}
-async function g(n) {
-  return await t("GetTokenBalance", "query", n);
-}
-const f = {
-  query: [
-    { name: "getBalance", action: "GetBTCBalance" },
-    { name: "getAddress", action: "GetBTCAddress" },
-    { name: "getPublicKey", action: "GetBTCPublicKey" },
-    { name: "getUtxos", action: "GetBTCUtxos" }
-  ],
-  authorize: [
-    { name: "signPsbt", action: "SignBTCPsbt" },
-    { name: "signMessage", action: "SignBTCMessage" }
-  ]
-}, d = {
-  connect: s,
-  isConnected: T,
-  disconnect: y,
-  getNetwork: B,
-  switchNetwork: b,
-  getAddress: q,
-  getPublicKey: G,
-  getXPublicKey: P,
-  getBalance: w,
-  getUtxos: S,
-  transfer: x,
-  merge: N,
-  previewTransaction: E,
-  signTransaction: M,
-  signTransactions: K,
-  pay: k,
-  signMessage: A,
-  verifySignature: C,
-  eciesEncrypt: p,
-  eciesDecrypt: z,
-  // signTransaction,
-  // transferAll,
-  token: {
-    getBalance: g
-  },
-  nft: {},
-  btc: {},
-  // btc: {
-  //   getBalance: () => {},
-  //   getAddress: () => {},
-  //   getPublicKey: () => {},
-  //   getUtxos: () => {},
-  // },
-  // Deprecating
-  requestAccount: s,
-  getAccount: s,
-  exitAccount: y,
-  getMvcBalance: w,
-  getSensibleFtBalance: g
-};
-Object.keys(f).forEach((n) => {
-  const e = n;
-  f[e].forEach((a) => {
-    d.btc[a.name] = async (r) => await t(a.action, e, r);
-  });
-});
-window.metaidwallet = d;
+      window.addEventListener('message', o)
+    }
+    return await new Promise((c) => {
+      v((o) => {
+        c(o.res)
+      })
+    })
+  }
+  async function s() {
+    return await e('Connect')
+  }
+  async function u() {
+    return await e('Disconnect')
+  }
+  async function m() {
+    return await e('IsConnected', 'query')
+  }
+  async function h() {
+    return await e('GetNetwork', 'query')
+  }
+  async function T() {
+    return await e('SwitchNetwork')
+  }
+  async function B(n) {
+    return await e('GetAddress', 'query', n)
+  }
+  async function b(n) {
+    return await e('GetPublicKey', 'query', n)
+  }
+  async function q() {
+    return await e('GetXPublicKey', 'query')
+  }
+  async function w(n) {
+    return await e('GetBalance', 'query', n)
+  }
+  async function E(n) {
+    return await e('GetUtxos', 'query', n)
+  }
+  async function G(n) {
+    return await e('EciesEncrypt', 'authorize', n)
+  }
+  async function S(n) {
+    return await e('EciesDecrypt', 'authorize', n)
+  }
+  async function p(n) {
+    return await e('SignMessage', 'authorize', n)
+  }
+  async function M(n) {
+    return await e('VerifySignature', 'query', n)
+  }
+  async function P(n) {
+    return await e('PreviewTransaction', 'query', n)
+  }
+  async function z(n) {
+    return await e('SignTransaction', 'authorize', n)
+  }
+  async function A(n) {
+    return await e('SignTransactions', 'authorize', n)
+  }
+  async function C(n) {
+    return await e('Transfer', 'authorize', n)
+  }
+  async function L(n) {
+    return await e('Merge', 'authorize', n)
+  }
+  async function y(n) {
+    return await e('GetTokenBalance', 'query', n)
+  }
+  async function K(n, r) {
+    const a = (t) => {
+      if (t.data?.channel === 'removeListener' && t.data?.eventName === n) {
+        window.removeEventListener('message', a)
+        return
+      }
+      t.source !== window || t.data?.channel !== 'from-metaidwallet' || t.data?.eventName !== n || r(...t.data.args)
+    }
+    window.addEventListener('message', a)
+  }
+  async function k(n) {
+    window.postMessage({ eventName: n, channel: 'removeListener' }, '*')
+  }
+  const d = {
+      query: [
+        { name: 'getBalance', action: 'GetBTCBalance' },
+        { name: 'getAddress', action: 'GetBTCAddress' },
+        { name: 'getPublicKey', action: 'GetBTCPublicKey' },
+        { name: 'getUtxos', action: 'GetBTCUtxos' },
+      ],
+      authorize: [
+        { name: 'signPsbt', action: 'SignBTCPsbt' },
+        { name: 'signMessage', action: 'SignBTCMessage' },
+      ],
+    },
+    g = {
+      connect: s,
+      isConnected: m,
+      disconnect: u,
+      getNetwork: h,
+      switchNetwork: T,
+      getAddress: B,
+      getPublicKey: b,
+      getXPublicKey: q,
+      getBalance: w,
+      getUtxos: E,
+      transfer: C,
+      merge: L,
+      previewTransaction: P,
+      signTransaction: z,
+      signTransactions: A,
+      signMessage: p,
+      verifySignature: M,
+      eciesEncrypt: G,
+      eciesDecrypt: S,
+      token: { getBalance: y },
+      nft: {},
+      btc: {},
+      on: K,
+      removeListener: k,
+      requestAccount: s,
+      getAccount: s,
+      exitAccount: u,
+      getMvcBalance: w,
+      getSensibleFtBalance: y,
+    }
+  Object.keys(d).forEach((n) => {
+    const r = n
+    d[r].forEach((a) => {
+      g.btc[a.name] = async (t) => await e(a.action, r, t)
+    })
+  }),
+    (window.metaidwallet = g)
+})()
diff --git a/public/manifest.json b/public/manifest.json
index 0bf0fcf..f32e376 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Metalet",
   "description": "An MVC Crypto Wallet Extension",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "manifest_version": 3,
   "action": {
     "default_popup": "index.html",
diff --git a/src/background.ts b/src/background.ts
index 18c3333..808ce9e 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -1,14 +1,19 @@
 import browser from 'webextension-polyfill'
 import actions from './data/query-actions'
+import exActions from './data/extension-actions'
 import { NOTIFICATION_HEIGHT, NOTIFICATION_WIDTH } from './data/config'
 import connector from './lib/connector'
 import { getCurrentAccount } from './lib/account'
 import { isLocked } from './lib/password'
 
 browser.runtime.onMessage.addListener(async (msg, sender) => {
+  if (msg.channel === 'inter-extension') {
+    return await exActions[msg.fn](...msg.args)
+  }
+
   const account = await getCurrentAccount()
   const walletLocked = await isLocked()
-  const actionName = msg.action.replace('authorize-', '').replace('query-', '')
+  const actionName = msg.action.replace('authorize-', '').replace('query-', '').replace('event-', '')
 
   // 如果连接状态为未连接，且请求的 action 不是connect或者IsConnected，则返回错误
   let failedStatus: string = ''
@@ -33,6 +38,18 @@ browser.runtime.onMessage.addListener(async (msg, sender) => {
 
     return response
   }
+  
+  // event actions
+  // if (msg.action?.startsWith('event')) {
+
+  //   if (msg.params?.type === 'on') {
+  //     console.log(`register ${actionName}`)
+  //     register(actionName)
+  //   } else if (msg.params?.type === 'removeListener') {
+  //     unregister(actionName)
+  //   }
+  //   return
+  // }
 
   // authorize actions
   if (msg.action?.startsWith('authorize')) {
diff --git a/src/content-script/actions.ts b/src/content-script/actions.ts
index 60c2cc2..227048e 100644
--- a/src/content-script/actions.ts
+++ b/src/content-script/actions.ts
@@ -8,12 +8,13 @@ type Echo = {
   res: any
 }
 
-export type ActionType = 'authorize' | 'query'
+export type ActionType = 'authorize' | 'query' | 'event'
 
 export async function createAction(
   actionName: string,
   actionType: ActionType = 'authorize',
-  params?: any
+  params?: any,
+  handler?: any
 ): Promise<any> {
   const action = `${actionType}-${actionName}`
   // nonce为32位随机字符串
@@ -165,6 +166,27 @@ export async function getTokenBalance(params?: { genesis: string; codehash: stri
   return await createAction('GetTokenBalance', 'query', params)
 }
 
+// event on
+export async function on(eventName: string, handler: Function) {
+  const handleFn = (event: MessageEvent) => {
+    if (event.data?.channel === 'removeListener' && event.data?.eventName === eventName) {
+      window.removeEventListener('message', handleFn)
+      return
+    }
+    if (event.source !== window || event.data?.channel !== 'from-metaidwallet' || event.data?.eventName !== eventName) {
+      return
+    }
+
+    handler(...event.data.args)
+  }
+  window.addEventListener('message', handleFn)
+}
+
+// event removeListener
+export async function removeListener(eventName: string) {
+  window.postMessage({ eventName, channel: 'removeListener' }, '*')
+}
+
 export interface ActionItem {
   name: string
   action: string
@@ -174,7 +196,7 @@ export type Keys = {
   [K in ActionType]: ActionItem[]
 }
 
-export const btcKeys: Keys = {
+export const btcKeys: Omit<Keys, 'event'> = {
   query: [
     { name: 'getBalance', action: 'GetBTCBalance' },
     { name: 'getAddress', action: 'GetBTCAddress' },
diff --git a/src/content-script/inject.ts b/src/content-script/inject.ts
index bb75879..be10137 100644
--- a/src/content-script/inject.ts
+++ b/src/content-script/inject.ts
@@ -32,8 +32,8 @@ const callMetalet = async (params: MetaletParams) => {
 
       if (response?.channel === 'from-metaidwallet') {
         // post on console
-        console.log(`🚀 Reponse from Metalet on action ${response.action} 🚀`)
-        console.log(response?.res)
+        // console.log(`🚀 Response from Metalet on action ${response.action} 🚀`)
+        // console.log(response?.res)
 
         window.postMessage(response, '*')
       }
diff --git a/src/content-script/main.ts b/src/content-script/main.ts
index f3c53d7..630152f 100644
--- a/src/content-script/main.ts
+++ b/src/content-script/main.ts
@@ -22,7 +22,7 @@ import {
   pay,
 } from './actions'
 
-import { btcKeys, createAction, ActionType } from './actions'
+import { btcKeys, createAction, ActionType, on, removeListener } from './actions'
 
 type Metalet = {
   connect: any
@@ -109,12 +109,9 @@ const metalet: any = {
 
   btc: {},
 
-  // btc: {
-  //   getBalance: () => {},
-  //   getAddress: () => {},
-  //   getPublicKey: () => {},
-  //   getUtxos: () => {},
-  // },
+  // event
+  on,
+  removeListener,
 
   // Deprecating
   requestAccount: connect,
@@ -125,7 +122,7 @@ const metalet: any = {
 }
 
 Object.keys(btcKeys).forEach((type) => {
-  const actionType = type as ActionType
+  const actionType = type as Exclude<ActionType, 'event'>
   btcKeys[actionType].forEach((item) => {
     metalet['btc'][item.name] = async (params?: any) => {
       return await createAction(item.action, actionType, params)
diff --git a/src/data/config.ts b/src/data/config.ts
index 1bce714..9d17dc8 100644
--- a/src/data/config.ts
+++ b/src/data/config.ts
@@ -5,4 +5,4 @@ export const DERIVE_MAX_DEPTH = 1000
 export const NOTIFICATION_WIDTH = 360
 export const NOTIFICATION_HEIGHT = 620
 
-export const VERSION = '2.0.4'
+export const VERSION = '2.1.0'
diff --git a/src/data/event-actions.ts b/src/data/event-actions.ts
new file mode 100644
index 0000000..e97330d
--- /dev/null
+++ b/src/data/event-actions.ts
@@ -0,0 +1,40 @@
+import browser from 'webextension-polyfill'
+
+interface EmitParams {
+  args: unknown[]
+  eventName: string
+}
+
+// const eventSet = ref<Set<string>>(new Set())
+
+// export function register(eventName: string) {
+//   eventSet.value.add(eventName)
+//   console.log('eventSet', eventSet.value)
+// }
+
+// export function unregister(eventName: string) {
+//   eventSet.value.delete(eventName)
+// }
+
+// export function isSend(eventName: string) {
+//   console.log('eventSet', eventSet.value)
+//   return eventSet.value.has(eventName)
+// }
+
+async function emit(params: EmitParams) {
+  const channel = 'from-metaidwallet'
+
+  const tab = await browser.tabs.query({
+    active: true,
+    windowType: 'normal',
+    currentWindow: true,
+  })
+
+  if (tab[0].id) {
+    browser.tabs.sendMessage(tab[0].id, { ...params, channel })
+  }
+}
+
+export function createEmit(eventName: string) {
+  return (...args: unknown[]) => emit({ eventName, args })
+}
diff --git a/src/data/extension-actions.ts b/src/data/extension-actions.ts
new file mode 100644
index 0000000..945d5cb
--- /dev/null
+++ b/src/data/extension-actions.ts
@@ -0,0 +1,27 @@
+import { deriveAllAddresses } from '@/lib/bip32-deriver'
+import { addAssetsDisplay, getAssetsDisplay, removeAssetsDisplay } from '@/lib/assets'
+import {
+  getCurrentAccount,
+  updateName,
+  addAccount,
+  getAddress,
+  getPrivateKey,
+  updateBtcPath,
+  migrateV2,
+  needsMigrationV2,
+} from '@/lib/account'
+
+export default {
+  getCurrentAccount,
+  updateName,
+  addAccount,
+  getAddress,
+  getPrivateKey,
+  updateBtcPath,
+  migrateV2,
+  needsMigrationV2,
+  deriveAllAddresses,
+  getAssetsDisplay,
+  addAssetsDisplay,
+  removeAssetsDisplay,
+} as { [key: string]: Function }
diff --git a/src/lib/account.ts b/src/lib/account.ts
index 53f839b..39b18c6 100644
--- a/src/lib/account.ts
+++ b/src/lib/account.ts
@@ -1,7 +1,11 @@
-import { Ref, ref } from 'vue'
-import { fetchUtxos } from '../queries/utxos'
 import { mvc } from 'meta-contract'
-
+import { createEmit } from '@/data/event-actions'
+import { getNetwork } from './network'
+import { signMessage } from './crypto'
+import { fetchUtxos } from '../queries/utxos'
+import { getStorage, setStorage } from './storage'
+import { generateRandomString, raise } from './helpers'
+import { fetchSpaceBalance, fetchBtcBalance, doNothing } from '@/queries/balance'
 import {
   AddressType,
   deriveAddress,
@@ -10,16 +14,12 @@ import {
   derivePublicKey,
   inferAddressType,
 } from './bip32-deriver'
-import { fetchSpaceBalance, fetchBtcBalance, doNothing } from '@/queries/balance'
-import { getStorage, setStorage } from './storage'
-import { generateRandomString, raise } from './helpers'
-import { getNetwork } from './network'
-import { signMessage } from './crypto'
 
 const CURRENT_ACCOUNT_ID = 'currentAccountId'
 const ACCOUNT_STORAGE_CURRENT_KEY = 'accounts_v2'
 const ACCOUNT_STORAGE_HISTORY_KEYS = ['accounts']
 
+// TODO put in types.ts
 export type Chain = 'btc' | 'mvc'
 
 type DerivedAccountDetail = {
@@ -128,6 +128,10 @@ export async function connectAccount(accountId: string) {
 
   await setStorage(CURRENT_ACCOUNT_ID, accountId)
 
+  const mvcAddress = await getAddress('mvc')
+  const btcAddress = await getAddress('btc')
+  createEmit('accountsChanged')({ mvcAddress, btcAddress })
+
   return true
 }
 
@@ -300,14 +304,13 @@ export async function getBalance(chain: Chain = 'mvc', address?: string) {
   }
 }
 
-export async function getUtxos(params?: { path?: string }) {
+export async function getUtxos(chain: Chain = 'mvc', params?: { path?: string }) {
   const account = await getCurrentAccount()
   if (!account) {
     return null
   }
-  const address = await getAddress('mvc', params?.path)
-
-  return await fetchUtxos(address)
+  const address = await getAddress(chain, params?.path)
+  return await fetchUtxos(chain, address)
 }
 
 export async function updateName(name: string) {
@@ -431,7 +434,7 @@ type AccountManager = {
   getBalance: (chain: Chain, address?: string) => Promise<Awaited<ReturnType<typeof fetchSpaceBalance>> | null>
   getAddress: (chain: Chain, path?: string) => Promise<any>
   getXPublicKey: () => Promise<string | null>
-  getUtxos: (params?: any) => Promise<any>
+  getUtxos: (chain: Chain, params?: any) => Promise<any>
   updateName: (name: string) => Promise<void>
 }
 
diff --git a/src/lib/actions/btc/get-utxos.ts b/src/lib/actions/btc/get-utxos.ts
index 2104ba9..d18c400 100644
--- a/src/lib/actions/btc/get-utxos.ts
+++ b/src/lib/actions/btc/get-utxos.ts
@@ -1,3 +1,5 @@
-export async function process(params: any, host: string) {
-  return 'getUtxos'
+import { getUtxos } from '@/lib/account'
+
+export async function process() {
+  return await getUtxos('btc')
 }
diff --git a/src/lib/actions/get-utxos.ts b/src/lib/actions/get-utxos.ts
index 72624a2..457d00a 100644
--- a/src/lib/actions/get-utxos.ts
+++ b/src/lib/actions/get-utxos.ts
@@ -1,5 +1,5 @@
-import accountManager from '../account'
+import { getUtxos } from '../account'
 
 export async function process(params: any, host: string) {
-  return await accountManager.getUtxos(params)
+  return await getUtxos('mvc', params)
 }
diff --git a/src/lib/emitters/index.ts b/src/lib/emitters/index.ts
new file mode 100644
index 0000000..d1dfdd6
--- /dev/null
+++ b/src/lib/emitters/index.ts
@@ -0,0 +1,15 @@
+import browser from 'webextension-polyfill'
+
+interface EmitParams {
+  fn: string
+  args: unknown[]
+}
+
+async function emit<T>(params: EmitParams): Promise<T> {
+  const channel = 'inter-extension'
+  return await browser.runtime.sendMessage({ ...params, channel })
+}
+
+export function createEmit<T>(fn: string) {
+  return (...args: unknown[]) => emit<T>({ fn, args })
+}
diff --git a/src/lib/network.ts b/src/lib/network.ts
index 2d2e407..bab0d3f 100644
--- a/src/lib/network.ts
+++ b/src/lib/network.ts
@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import storage from './storage'
+import { createEmit } from '@/data/event-actions'
 
 export type Network = 'mainnet' | 'testnet'
 
@@ -8,6 +9,8 @@ export const network = ref<Network>(await storage.get('network', { defaultValue:
 export async function setNetwork(_network: Network) {
   await storage.set('network', _network)
   network.value = _network
+  createEmit('networkChanged')(_network)
+  console.log("createEmit('networkChanged')", _network)
 }
 
 export async function getNetwork(): Promise<Network> {
diff --git a/src/pages/accounts/Index.vue b/src/pages/accounts/Index.vue
index 7cd15b6..df66ed6 100644
--- a/src/pages/accounts/Index.vue
+++ b/src/pages/accounts/Index.vue
@@ -1,26 +1,30 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import accountManager from '@/lib/account'
-
+import { ref, toRaw } from 'vue'
+import { createEmit } from '@/lib/emitters'
 import AccountItem from './components/Item.vue'
 import { PlusIcon } from '@heroicons/vue/20/solid'
-import { toRaw } from 'vue'
+import { type Account, getAccounts } from '@/lib/account'
 
-const accounts = ref()
-accountManager.all().then((res) => {
+const accounts = ref<Account[] | undefined>()
+getAccounts().then((res) => {
   accounts.value = Array.from(toRaw(res), ([key, value]) => value)
 })
+
+const currentAccount = ref<Account | undefined>()
+createEmit<Account>('getCurrentAccount')().then((acc) => {
+  currentAccount.value = acc
+})
 </script>
 
 <template>
   <div class="">
-    <AccountItem v-for="account in accounts" :key="account.id" :account="account" :show-connect-button="true" />
+    <AccountItem v-for="account in accounts" :key="account.id" v-if="currentAccount" :account="account"
+      :currentAccount="currentAccount" :show-connect-button="true" />
 
     <!-- create -->
     <div
       class="group group -mx-2 flex cursor-pointer items-center justify-start gap-x-2 rounded-md px-2 py-4 transition hover:bg-blue-100"
-      @click="() => $router.push('/welcome')"
-    >
+      @click="() => $router.push('/welcome')">
       <!-- icon -->
       <div class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 group-hover:bg-blue-200">
         <PlusIcon class="h-6 w-6 text-gray-400 group-hover:text-blue-500" />
diff --git a/src/pages/accounts/components/EditName.vue b/src/pages/accounts/components/EditName.vue
index 9875743..519e37b 100644
--- a/src/pages/accounts/components/EditName.vue
+++ b/src/pages/accounts/components/EditName.vue
@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import Modal from '@/components/Modal.vue'
-import accountManager, { type Account } from '@/lib/account'
+import { type Account } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 
 defineProps(['open'])
 const emit = defineEmits(['update:open'])
 
 const currentAccount = ref<Account | null>(null)
-accountManager.getCurrent().then((acc) => {
+createEmit<Account>('getCurrentAccount')().then((acc) => {
   currentAccount.value = acc
 })
 const name = ref(currentAccount.value?.name)
 function updateName() {
   if (currentAccount.value && name.value) {
-    accountManager.updateName(name.value)
+    createEmit<Account>('updateName')(name.value)
+    // accountManager.updateName(name.value)
   }
 
   // Refresh
@@ -27,23 +29,16 @@ function updateName() {
 
     <template #body>
       <div class="mt-8">
-        <input
-          type="text"
-          name="name"
-          id="name"
+        <input type="text" name="name" id="name"
           class="block w-full rounded-md border border-gray-100 px-2 py-1.5 text-gray-900 shadow placeholder:text-gray-400 sm:text-sm sm:leading-6"
-          placeholder="Account Name"
-          v-model="name"
-        />
+          placeholder="Account Name" v-model="name" />
       </div>
     </template>
 
     <template #control>
       <div class="grid grid-cols-2 gap-x-4">
-        <button
-          class="w-full rounded-lg border border-primary-blue bg-white py-3 text-sm font-bold text-gray-700"
-          @click="$emit('update:open', false)"
-        >
+        <button class="w-full rounded-lg border border-primary-blue bg-white py-3 text-sm font-bold text-gray-700"
+          @click="$emit('update:open', false)">
           Cancel
         </button>
         <button class="main-btn-bg w-full rounded-lg py-3 text-sm font-bold text-sky-100" @click="updateName">
diff --git a/src/pages/accounts/components/Item.vue b/src/pages/accounts/components/Item.vue
index 3bae3ca..0c860e2 100644
--- a/src/pages/accounts/components/Item.vue
+++ b/src/pages/accounts/components/Item.vue
@@ -5,10 +5,11 @@ import { useRouter } from 'vue-router'
 import { API_NET, API_TARGET, Wallet } from 'meta-contract'
 import { useQueryClient } from '@tanstack/vue-query'
 
-import accountManager, { type Account, getPrivateKey, getCurrentAccount } from '@/lib/account'
+import { type Account, connectAccount } from '@/lib/account'
 import { getNetwork, network } from '@/lib/network'
 import { shortestAddress } from '@/lib/formatters'
 import { FEEB } from '@/data/config'
+import { createEmit } from '@/lib/emitters'
 
 import EditName from './EditName.vue'
 
@@ -16,14 +17,11 @@ const router = useRouter()
 
 const props = defineProps<{
   account: Account
-  showConnectButton?: boolean
+  currentAccount: Account
   showNetwork?: boolean
+  showConnectButton?: boolean
 }>()
 
-const currentAccount = ref<Account | null>(null)
-getCurrentAccount().then((acc) => {
-  currentAccount.value = acc
-})
 const mvcAddress = ref(
   network.value === 'mainnet' ? props.account.mvc.mainnetAddress : props.account.mvc.testnetAddress
 )
@@ -63,21 +61,22 @@ const randomColor = (key: string) => {
 const queryClient = useQueryClient()
 const wallet = inject<Ref<Wallet>>('wallet')!
 const connect = async () => {
-  await accountManager.connect(props.account.id)
+  await connectAccount(props.account.id)
 
   // invalidate all queries
   await queryClient.invalidateQueries()
 
   // update injected wallet
   const network = await getNetwork()
-  const wif = await getPrivateKey()
+  // const wif = await getPrivateKey()
+  const wif = await createEmit<string>('getPrivateKey')()
   wallet.value = new Wallet(wif, network as API_NET, FEEB, API_TARGET.MVC)
 
   router.push('/wallet')
 }
 
 const isCurrent = computed(() => {
-  return currentAccount.value && props.account.id === currentAccount.value.id
+  return props.account.id === props.currentAccount.id
 })
 
 const openEditNameModal = ref(false)
@@ -99,17 +98,11 @@ const openEditNameModal = ref(false)
             {{ account.name }}
           </div>
 
-          <PencilSquareIcon
-            class="hidden h-4 w-4 cursor-pointer text-gray-400 hover:text-gray-500 group-hover:inline"
-            @click="openEditNameModal = true"
-            v-if="!showConnectButton"
-          />
-
-          <span
-            class="rounded-sm bg-gray-100 px-2 py-0.5 text-xs text-gray-500"
-            v-if="showNetwork && network === 'testnet'"
-            >{{ network }}</span
-          >
+          <PencilSquareIcon class="hidden h-4 w-4 cursor-pointer text-gray-400 hover:text-gray-500 group-hover:inline"
+            @click="openEditNameModal = true" v-if="!showConnectButton" />
+
+          <span class="rounded-sm bg-gray-100 px-2 py-0.5 text-xs text-gray-500"
+            v-if="showNetwork && network === 'testnet'">{{ network }}</span>
         </div>
 
         <div class="mt-1 flex items-center gap-x-1">
@@ -141,11 +134,8 @@ const openEditNameModal = ref(false)
     <!-- connect button -->
     <template v-if="showConnectButton">
       <span v-if="isCurrent" class="text-sm text-gray-500">active</span>
-      <button
-        class="rounded-md bg-blue-100 px-2 py-1 text-sm text-blue-700 transition hover:bg-blue-200"
-        @click="connect"
-        v-else
-      >
+      <button class="rounded-md bg-blue-100 px-2 py-1 text-sm text-blue-700 transition hover:bg-blue-200" @click="connect"
+        v-else>
         Connect
       </button>
     </template>
diff --git a/src/pages/migrate/Index.vue b/src/pages/migrate/Index.vue
index 4e2cb06..5e07029 100644
--- a/src/pages/migrate/Index.vue
+++ b/src/pages/migrate/Index.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import MetaletLogoImg from '@/assets/images/metalet-logo.png?url'
-import accountManager, { getAccounts, getLegacyAccounts } from '@/lib/account'
-import type { Account } from '@/lib/account'
+import { getAccounts, getLegacyAccounts } from '@/lib/account'
 import { mvc } from 'meta-contract'
 import { setNetwork } from '@/lib/network'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { deriveAllAddresses, type AddressType } from '@/lib/bip32-deriver'
+import { createEmit } from '@/lib/emitters'
 
 const router = useRouter()
 
@@ -76,7 +76,8 @@ const importWallet = async () => {
           },
         }
 
-        await accountManager.add(account)
+        // await accountManager.add(account)
+        await createEmit('addAccount')(account)
 
         // 根据用户使用的网络，设置当前网络环境
         await setNetwork(network)
@@ -110,10 +111,8 @@ const importWallet = async () => {
 
     <div class="flex flex-col items-stretch pb-4">
       <p class="mb-2 text-sm text-red-500" v-if="error">{{ error }}</p>
-      <button
-        class="gradient-bg rounded-md py-4 text-base font-bold leading-none tracking-wide text-blue-50"
-        @click="importWallet"
-      >
+      <button class="gradient-bg rounded-md py-4 text-base font-bold leading-none tracking-wide text-blue-50"
+        @click="importWallet">
         OK
       </button>
     </div>
diff --git a/src/pages/nfts/Collection.vue b/src/pages/nfts/Collection.vue
index 124a38a..f16b07d 100644
--- a/src/pages/nfts/Collection.vue
+++ b/src/pages/nfts/Collection.vue
@@ -4,12 +4,14 @@ import { computed, ref } from 'vue'
 
 import useNftsQuery, { useOneNftCollectionQuery } from '@/queries/nfts'
 import { useCollectionInfoQuery } from '@/queries/metadata'
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 
 import NftItem from './components/NftItem.vue'
 
 const address = ref<string>('')
-getAddress('mvc').then((add) => (address.value = add!))
+// getAddress('mvc').then((add) => (address.value = add!))
+createEmit<string>('getAddress')('mvc').then((add) => (address.value = add!))
 
 const route = useRoute()
 const { codehash, genesis } = route.params as {
@@ -45,13 +47,9 @@ const { isLoading, data: nfts } = useNftsQuery(
 
   <!-- list -->
   <div class="grid grid-cols-3 gap-x-2">
-    <NftItem
-      v-for="nft in nfts"
-      :nft="nft"
-      :collection-meta-info="{
-        metaTxid: txid,
-        metaOutputIndex: Number(outputIndex),
-      }"
-    />
+    <NftItem v-for="nft in nfts" :nft="nft" :collection-meta-info="{
+      metaTxid: txid,
+      metaOutputIndex: Number(outputIndex),
+    }" />
   </div>
 </template>
diff --git a/src/pages/nfts/Index.vue b/src/pages/nfts/Index.vue
index 4070592..26108aa 100644
--- a/src/pages/nfts/Index.vue
+++ b/src/pages/nfts/Index.vue
@@ -7,17 +7,21 @@ import BtcLogoImg from '@/assets/images/btc-logo.svg?url'
 import MvcCollectionPanel from './components/MvcCollectionPanel.vue'
 import BtcCollectionPanel from './components/BtcCollectionPanel.vue'
 import AccountItem from '../accounts/components/Item.vue'
-import { type Account, getCurrentAccount } from '@/lib/account'
+import { type Account } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 
 const account = ref<Account | null>(null)
-getCurrentAccount().then((acc) => {
+createEmit<Account>('getCurrentAccount')().then((acc) => {
   account.value = acc
 })
+// getCurrentAccount().then((acc) => {
+//   account.value = acc
+// })
 </script>
 
 <template>
   <!-- 账号信息 -->
-  <AccountItem :account="account" v-if="account" :show-network="true" class="mb-4" />
+  <AccountItem :account="account" :current-account="account" v-if="account" :show-network="true" class="mb-4" />
 
   <MvcCollectionPanel />
 
diff --git a/src/pages/nfts/Transfer.vue b/src/pages/nfts/Transfer.vue
index c8c5581..a93e872 100644
--- a/src/pages/nfts/Transfer.vue
+++ b/src/pages/nfts/Transfer.vue
@@ -3,11 +3,12 @@ import { ComputedRef, computed, ref, Ref } from 'vue'
 import { useQueryClient } from '@tanstack/vue-query'
 import { API_NET, API_TARGET, NftManager } from 'meta-contract'
 
-import { getAddress, getCurrentAccount, getPrivateKey } from '@/lib/account'
+// import { getAddress, getCurrentAccount, getPrivateKey } from '@/lib/account'
 import { parseMetaFile, getResizeQuery } from '@/lib/metadata'
 import { useOneNftQuery } from '@/queries/nfts'
 import { useNftInfoQuery } from '@/queries/metadata'
 import { network } from '@/lib/network'
+import { createEmit } from '@/lib/emitters'
 
 import Modal from '@/components/Modal.vue'
 import TransactionResultModal, { type TransactionResult } from './components/TransactionResultModal.vue'
@@ -21,8 +22,11 @@ const { codehash, genesis, tokenIndex } = defineProps<{
 }>()
 
 const address = ref('')
-getCurrentAccount()
-getAddress().then((addr) => {
+// getCurrentAccount()
+// getAddress().then((addr) => {
+//   address.value = addr!
+// })
+createEmit<string>('getAddress')().then((addr) => {
   address.value = addr!
 })
 
@@ -58,7 +62,8 @@ async function transfer() {
 
   operationLock.value = true
 
-  const privateKey = await getPrivateKey("mvc")
+  // const privateKey = await getPrivateKey("mvc")
+  const privateKey = await createEmit<string>('getPrivateKey')("mvc")
 
   const nftManager = new NftManager({
     network: network.value as API_NET,
diff --git a/src/pages/nfts/components/BtcCollectionPanel.vue b/src/pages/nfts/components/BtcCollectionPanel.vue
index 1290772..e6accbe 100644
--- a/src/pages/nfts/components/BtcCollectionPanel.vue
+++ b/src/pages/nfts/components/BtcCollectionPanel.vue
@@ -3,7 +3,8 @@ import { Ref, computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ArrowDownLeftIcon } from '@heroicons/vue/20/solid'
 
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { useNftCollectionsQuery } from '@/queries/nfts'
 
 import NftCollectionItem from './CollectionItem.vue'
@@ -11,10 +12,16 @@ import NftCollectionItem from './CollectionItem.vue'
 const router = useRouter()
 
 const address: Ref<string> = ref('')
-getAddress().then((add) => {
-  if (!add) return router.push('/welcome')
+// getAddress().then((add) => {
+//   if (!add) return router.push('/welcome')
 
-  address.value = add
+//   address.value = add
+// })
+
+createEmit<string>('getAddress')().then((addr) => {
+  if (!addr) return router.push('/welcome')
+
+  address.value = addr!
 })
 const enabled = computed(() => !!address.value)
 
diff --git a/src/pages/nfts/components/CollectionItem.vue b/src/pages/nfts/components/CollectionItem.vue
index 795f74b..45169ec 100644
--- a/src/pages/nfts/components/CollectionItem.vue
+++ b/src/pages/nfts/components/CollectionItem.vue
@@ -4,7 +4,8 @@ import { useRouter } from 'vue-router'
 
 import { NftCollection, useNftsQuery } from '@/queries/nfts'
 import { useCollectionInfoQuery } from '@/queries/metadata'
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { ref, onMounted, computed } from 'vue'
 
 import NftItem from './NftItem.vue'
@@ -17,7 +18,8 @@ const router = useRouter()
 const address = ref<string>('')
 
 onMounted(async () => {
-  address.value = await getAddress('mvc')
+  // address.value = await getAddress('mvc')
+  address.value = await createEmit<string>('getAddress')('mvc')
 })
 
 const { isLoading, data: nfts } = useNftsQuery(
@@ -55,14 +57,10 @@ const toCollection = () => {
 
     <!-- list -->
     <div class="grid grid-cols-3 gap-x-2">
-      <NftItem
-        v-for="nft in nfts"
-        :nft="nft"
-        :collection-meta-info="{
-          metaTxid: props.collection.metaTxid,
-          metaOutputIndex: props.collection.metaOutputIndex,
-        }"
-      />
+      <NftItem v-for="nft in nfts" :nft="nft" :collection-meta-info="{
+        metaTxid: props.collection.metaTxid,
+        metaOutputIndex: props.collection.metaOutputIndex,
+      }" />
     </div>
   </div>
 </template>
diff --git a/src/pages/nfts/components/MvcCollectionPanel.vue b/src/pages/nfts/components/MvcCollectionPanel.vue
index 939000d..ab9b229 100644
--- a/src/pages/nfts/components/MvcCollectionPanel.vue
+++ b/src/pages/nfts/components/MvcCollectionPanel.vue
@@ -3,7 +3,8 @@ import { Ref, computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ArrowDownLeftIcon } from '@heroicons/vue/20/solid'
 
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { useNftCollectionsQuery } from '@/queries/nfts'
 
 import NftCollectionItem from './CollectionItem.vue'
@@ -11,7 +12,13 @@ import NftCollectionItem from './CollectionItem.vue'
 const router = useRouter()
 
 const address: Ref<string> = ref('')
-getAddress().then((add) => {
+// getAddress().then((add) => {
+//   if (!add) return router.push('/welcome')
+
+//   address.value = add
+// })
+
+createEmit<string>('getAddress')().then((add) => {
   if (!add) return router.push('/welcome')
 
   address.value = add
diff --git a/src/pages/settings/AddressType.vue b/src/pages/settings/AddressType.vue
index bba2d22..163ecf3 100644
--- a/src/pages/settings/AddressType.vue
+++ b/src/pages/settings/AddressType.vue
@@ -2,12 +2,15 @@
 import { ref } from 'vue'
 import { RadioGroup, RadioGroupLabel, RadioGroupDescription, RadioGroupOption } from '@headlessui/vue'
 
-import { getCurrentAccount, updateBtcPath } from '@/lib/account'
+// import { getCurrentAccount, updateBtcPath } from '@/lib/account'
+import { type Account } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { scripts } from '@/lib/bip32-deriver'
 
 const mvcPath = ref('')
 const selected = ref(scripts[0])
-getCurrentAccount().then((account) => {
+// getCurrentAccount().then((account) => {
+createEmit<Account>('getCurrentAccount')().then((account) => {
   if (!account) {
     return
   }
@@ -25,9 +28,11 @@ getCurrentAccount().then((account) => {
 const onUpdateBtcPath = async (script: (typeof scripts)[number]) => {
   selected.value = script
   if (script.name === 'Same as MVC') {
-    await updateBtcPath(mvcPath.value)
+    // await updateBtcPath(mvcPath.value)
+    await createEmit('updateBtcPath')(mvcPath.value)
   } else {
-    await updateBtcPath(script.path)
+    // await updateBtcPath(script.path)
+    await createEmit('updateBtcPath')(script.path)
   }
 }
 </script>
@@ -38,19 +43,11 @@ const onUpdateBtcPath = async (script: (typeof scripts)[number]) => {
       <RadioGroup v-model="selected">
         <RadioGroupLabel class="sr-only">BTC Address Type</RadioGroupLabel>
         <div class="space-y-4">
-          <RadioGroupOption
-            as="template"
-            v-for="script in scripts"
-            :key="script.name"
-            :value="script"
-            v-slot="{ checked }"
-          >
-            <div
-              @click="onUpdateBtcPath(script)"
-              :class="[checked ? ' ' : 'bg-[#f5f5f5] ']"
+          <RadioGroupOption as="template" v-for="script in scripts" :key="script.name" :value="script"
+            v-slot="{ checked }">
+            <div @click="onUpdateBtcPath(script)" :class="[checked ? ' ' : 'bg-[#f5f5f5] ']"
               class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none"
-              :style="checked ? 'background: linear-gradient(98deg, #72F5F6 4%, #171AFF 94%)' : ''"
-            >
+              :style="checked ? 'background: linear-gradient(98deg, #72F5F6 4%, #171AFF 94%)' : ''">
               <div class="flex w-full items-center justify-between">
                 <div class="flex items-center">
                   <div class="text-sm">
@@ -67,13 +64,8 @@ const onUpdateBtcPath = async (script: (typeof scripts)[number]) => {
                 <div v-show="checked" class="shrink-0 text-white">
                   <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
                     <circle cx="12" cy="12" r="12" fill="#fff" fill-opacity="0.2" />
-                    <path
-                      d="M7 13l3 3 7-7"
-                      stroke="#fff"
-                      stroke-width="1.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
+                    <path d="M7 13l3 3 7-7" stroke="#fff" stroke-width="1.5" stroke-linecap="round"
+                      stroke-linejoin="round" />
                   </svg>
                 </div>
               </div>
diff --git a/src/pages/settings/CurrentAccount.vue b/src/pages/settings/CurrentAccount.vue
index f944ced..46550e2 100644
--- a/src/pages/settings/CurrentAccount.vue
+++ b/src/pages/settings/CurrentAccount.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 
-import { getCurrentAccount, getAddress, type Account } from '@/lib/account'
+// import { getCurrentAccount, getAddress, type Account } from '@/lib/account'
+import {  type Account } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 
 const address = ref<string>('')
 const account = ref<Account | null>(null)
 
 onMounted(async () => {
-  address.value = await getAddress()
-  account.value = await getCurrentAccount()
+  // address.value = await getAddress()
+  // account.value = await getCurrentAccount()
+  address.value = await createEmit<string>('getAddress')()
+  account.value = await createEmit<Account>('getCurrentAccount')()
 })
 </script>
 
diff --git a/src/pages/settings/components/SelectNetwork.vue b/src/pages/settings/components/SelectNetwork.vue
index 01a66d2..20bca22 100644
--- a/src/pages/settings/components/SelectNetwork.vue
+++ b/src/pages/settings/components/SelectNetwork.vue
@@ -24,8 +24,6 @@ const select = async (network: Network) => {
   // 存入存储
   await setNetwork(network.type)
 
-  //
-
   // force a reload
   window.location.reload()
 }
diff --git a/src/pages/wallet/Asset.vue b/src/pages/wallet/Asset.vue
index 7b5b15d..de3be94 100644
--- a/src/pages/wallet/Asset.vue
+++ b/src/pages/wallet/Asset.vue
@@ -5,7 +5,9 @@ import { ArrowUpRightIcon, QrCodeIcon } from '@heroicons/vue/20/solid'
 
 import { type Asset, allAssets, getTags } from '@/data/assets'
 import { useBalanceQuery } from '@/queries/balance'
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
+
 import { prettifyBalance, prettifyTokenBalance } from '@/lib/formatters'
 import { useExchangeRatesQuery } from '@/queries/exchange-rates'
 
@@ -25,7 +27,10 @@ const router = useRouter()
 const tags = getTags(asset)
 
 const address: Ref<string> = ref('')
-getAddress(asset.chain).then((add) => {
+// getAddress(asset.chain).then((add) => {
+//   address.value = add!
+// })
+createEmit<string>('getAddress')(asset.chain).then((add) => {
   address.value = add!
 })
 
diff --git a/src/pages/wallet/Backup.vue b/src/pages/wallet/Backup.vue
index 7eef35a..2fb8969 100644
--- a/src/pages/wallet/Backup.vue
+++ b/src/pages/wallet/Backup.vue
@@ -4,12 +4,17 @@ import { useRouter } from 'vue-router'
 import { EyeIcon, EyeSlashIcon } from '@heroicons/vue/24/solid'
 import PasswordImg from '@/assets/images/password.svg?url'
 import passwordManager from '@/lib/password'
-import { type Account, getCurrentAccount } from '@/lib/account'
+// import { type Account, getCurrentAccount } from '@/lib/account'
+import { type Account } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 
 const router = useRouter()
 
 const account = ref<Account | null>(null)
-getCurrentAccount().then((acc) => {
+// getCurrentAccount().then((acc) => {
+//   account.value = acc
+// })
+createEmit<Account>('getCurrentAccount')().then((acc) => {
   account.value = acc
 })
 
diff --git a/src/pages/wallet/CheckBackup.vue b/src/pages/wallet/CheckBackup.vue
index 8c27831..a5755d4 100644
--- a/src/pages/wallet/CheckBackup.vue
+++ b/src/pages/wallet/CheckBackup.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { type Account, getCurrentAccount } from '@/lib/account'
+// import { type Account, getCurrentAccount } from '@/lib/account'
+import { type Account } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 
 const router = useRouter()
 
@@ -9,7 +11,10 @@ const mnemonic = ref('')
 const isValid = ref(true)
 
 const account = ref<Account | null>(null)
-getCurrentAccount().then((acc) => {
+// getCurrentAccount().then((acc) => {
+//   account.value = acc
+// })
+createEmit<Account>('getCurrentAccount')().then((acc) => {
   account.value = acc
 })
 
@@ -39,13 +44,8 @@ const verify = async () => {
       Write down your seed phrase to make sure you have backed up your wallet.
     </p>
 
-    <textarea
-      name=""
-      rows="5"
-      class="mt-8 w-full resize-none rounded-md border bg-gray-100 p-4"
-      :class="isValid ? 'border-transparent' : 'border-red-500'"
-      v-model="mnemonic"
-    ></textarea>
+    <textarea name="" rows="5" class="mt-8 w-full resize-none rounded-md border bg-gray-100 p-4"
+      :class="isValid ? 'border-transparent' : 'border-red-500'" v-model="mnemonic"></textarea>
     <p v-if="!isValid" class="mt-2 text-sm text-red-500">The seed phrase you entered is incorrect.</p>
 
     <!-- buttons -->
diff --git a/src/pages/wallet/Create.vue b/src/pages/wallet/Create.vue
index 7ea0bfa..5fb8b79 100644
--- a/src/pages/wallet/Create.vue
+++ b/src/pages/wallet/Create.vue
@@ -5,8 +5,10 @@ import { EyeIcon } from '@heroicons/vue/24/solid'
 import { useRouter } from 'vue-router'
 
 import LockIcon from '@/assets/icons/lock.svg?component'
-import { addAccount } from '@/lib/account'
-import { deriveAllAddresses, type AddressType } from '@/lib/bip32-deriver'
+// import { addAccount } from '@/lib/account'
+// import { deriveAllAddresses, type AddressType } from '@/lib/bip32-deriver'
+import { createEmit } from '@/lib/emitters'
+import { type AddressType } from '@/lib/bip32-deriver'
 
 const router = useRouter()
 
@@ -30,7 +32,12 @@ const saveAccount = async (backup: boolean) => {
     const fullPath = `m/44'/10001'/0'/0/0`
     const btcPath = fullPath
 
-    const allAddresses = deriveAllAddresses({
+    // const allAddresses = deriveAllAddresses({
+    //   mnemonic: mnemonicStr,
+    //   btcPath,
+    //   mvcPath: fullPath,
+    // })
+    const allAddresses = await createEmit<{ [key: string]: string }>('deriveAllAddresses')({
       mnemonic: mnemonicStr,
       btcPath,
       mvcPath: fullPath,
@@ -53,7 +60,8 @@ const saveAccount = async (backup: boolean) => {
         testnetAddress: allAddresses.btcTestnetAddress,
       },
     }
-    await addAccount(account)
+    // await addAccount(account)
+    await createEmit('addAccount')(account)
 
     console.log('addAccount')
     console.log('backup', backup)
@@ -88,14 +96,10 @@ const saveAccount = async (backup: boolean) => {
         {{ wordsDisplay }}
       </div>
 
-      <div
-        class="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-gray-100/30 backdrop-blur"
-        v-if="isCover"
-      >
-        <button
-          class="w- flex w-32 items-center justify-center gap-x-2 rounded-full border border-black py-2"
-          @click="isCover = false"
-        >
+      <div class="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-gray-100/30 backdrop-blur"
+        v-if="isCover">
+        <button class="w- flex w-32 items-center justify-center gap-x-2 rounded-full border border-black py-2"
+          @click="isCover = false">
           <EyeIcon class="h-5 w-5" />
           <span>Show</span>
         </button>
diff --git a/src/pages/wallet/Import.vue b/src/pages/wallet/Import.vue
index 3f5892e..687e919 100644
--- a/src/pages/wallet/Import.vue
+++ b/src/pages/wallet/Import.vue
@@ -18,8 +18,10 @@ import {
 import { TrashIcon, CheckIcon, ChevronUpDownIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
 
 import MetaletLogoImg from '@/assets/images/metalet-logo.png?url'
-import { addAccount } from '@/lib/account'
-import { deriveAllAddresses, scripts, type AddressType } from '@/lib/bip32-deriver'
+// import { addAccount } from '@/lib/account'
+// import { deriveAllAddresses, scripts, type AddressType } from '@/lib/bip32-deriver'
+import { createEmit } from '@/lib/emitters'
+import { type AddressType, scripts } from '@/lib/bip32-deriver'
 
 // Remove the last one
 const selectableScripts = scripts.slice(0, -1)
@@ -72,7 +74,12 @@ const onSubmit = async () => {
     const fullPath = `m/44'/${pathDepth.value}'/0'/0/0`
     const btcPath = useSamePath.value ? fullPath : selectedScript.value.path
 
-    const allAddresses = deriveAllAddresses({
+    // const allAddresses = deriveAllAddresses({
+    //   mnemonic: mnemonicStr,
+    //   btcPath,
+    //   mvcPath: fullPath,
+    // })
+    const allAddresses = await createEmit<{ [key: string]: string }>('deriveAllAddresses')({
       mnemonic: mnemonicStr,
       btcPath,
       mvcPath: fullPath,
@@ -96,7 +103,8 @@ const onSubmit = async () => {
       },
     }
 
-    await addAccount(account)
+    // await addAccount(account)
+    await createEmit('addAccount')(account)
 
     // 跳转到首页
     router.push('/wallet')
@@ -133,12 +141,10 @@ const onSubmit = async () => {
         <RadioGroup v-model="selectedWordsLength">
           <div class="flex items-center gap-x-2">
             <RadioGroupOption v-slot="{ checked }" :value="length" v-for="length of wordsLengths" class="rounded">
-              <div
-                :class="[
-                  checked ? 'bg-blue-100 text-blue-500' : 'text-gray-500',
-                  'w-full cursor-pointer rounded-inherit px-2 py-0.5 text-center text-xs',
-                ]"
-              >
+              <div :class="[
+                checked ? 'bg-blue-100 text-blue-500' : 'text-gray-500',
+                'w-full cursor-pointer rounded-inherit px-2 py-0.5 text-center text-xs',
+              ]">
                 {{ `${length} words` }}
               </div>
             </RadioGroupOption>
@@ -148,15 +154,8 @@ const onSubmit = async () => {
 
       <div class="grid grid-cols-3 gap-2">
         <!-- input框 绑定粘贴事件 -->
-        <input
-          v-for="(word, index) in words"
-          :key="index"
-          type="text"
-          class="pit-input gradient-text font-bold"
-          :placeholder="(index + 1).toString()"
-          v-model="words[index]"
-          @paste.prevent="onPasteWords"
-        />
+        <input v-for="(word, index) in words" :key="index" type="text" class="pit-input gradient-text font-bold"
+          :placeholder="(index + 1).toString()" v-model="words[index]" @paste.prevent="onPasteWords" />
       </div>
     </div>
 
@@ -168,14 +167,9 @@ const onSubmit = async () => {
           <ChevronRightIcon :class="['h-4 w-4 text-gray-400 transition duration-200', open && 'rotate-90 transform']" />
         </DisclosureButton>
 
-        <transition
-          enter-active-class="transition duration-100 ease-out"
-          enter-from-class="transform scale-95 opacity-0"
-          enter-to-class="transform scale-100 opacity-100"
-          leave-active-class="transition duration-75 ease-out"
-          leave-from-class="transform scale-100 opacity-100"
-          leave-to-class="transform scale-95 opacity-0"
-        >
+        <transition enter-active-class="transition duration-100 ease-out" enter-from-class="transform scale-95 opacity-0"
+          enter-to-class="transform scale-100 opacity-100" leave-active-class="transition duration-75 ease-out"
+          leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
           <DisclosurePanel class="mt-1 space-y-2 rounded-lg bg-gray-100 p-4 text-sm text-gray-500 shadow-inner">
             <h3 class="text-sm font-bold text-gray-900">What is a derivation path?</h3>
             <p class="">
@@ -197,26 +191,18 @@ const onSubmit = async () => {
       <span class="text-xs text-gray-500">BTC Path</span>
 
       <SwitchGroup as="div" class="flex items-center mt-2">
-        <Switch
-          v-model="useSamePath"
-          class="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full"
-        >
+        <Switch v-model="useSamePath"
+          class="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full">
           <span class="sr-only">Use same path as MVC</span>
           <span aria-hidden="true" class="pointer-events-none absolute h-full w-full rounded-md bg-white"></span>
-          <span
-            aria-hidden="true"
-            :class="[
-              useSamePath ? 'bg-btn-blue' : 'bg-gray-200',
-              'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out',
-            ]"
-          ></span>
-          <span
-            aria-hidden="true"
-            :class="[
-              useSamePath ? 'translate-x-5' : 'translate-x-0',
-              'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out',
-            ]"
-          ></span>
+          <span aria-hidden="true" :class="[
+            useSamePath ? 'bg-btn-blue' : 'bg-gray-200',
+            'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out',
+          ]"></span>
+          <span aria-hidden="true" :class="[
+            useSamePath ? 'translate-x-5' : 'translate-x-0',
+            'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out',
+          ]"></span>
         </Switch>
 
         <SwitchLabel as="span" class="ml-3 text-sm text-gray-500"> Use the same path as MVC </SwitchLabel>
@@ -225,35 +211,23 @@ const onSubmit = async () => {
       <Listbox v-model="selectedScript" v-if="!useSamePath">
         <div class="relative mt-4">
           <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 selectableScripts"
-                :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 selectableScripts" :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>
@@ -266,12 +240,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>
@@ -280,4 +250,3 @@ const onSubmit = async () => {
     <div class="mt-4 text-center text-sm text-red-500" v-if="error">{{ error }}</div>
   </div>
 </template>
-@/lib/bip32-deriver
diff --git a/src/pages/wallet/Index.vue b/src/pages/wallet/Index.vue
index ef45d3d..69ee21c 100644
--- a/src/pages/wallet/Index.vue
+++ b/src/pages/wallet/Index.vue
@@ -1,26 +1,25 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-
 import Balance from './components/Balance.vue'
-import AccountItem from '../accounts/components/Item.vue'
 import AssetList from './components/AssetList.vue'
-import { type Account, getCurrentAccount } from '@/lib/account'
+import AccountItem from '../accounts/components/Item.vue'
+import { type Account } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 
-const currentAccount = ref<Account | null>(null)
-getCurrentAccount().then((acc) => {
+const currentAccount = ref<Account | undefined>()
+createEmit<Account>('getCurrentAccount')().then((acc) => {
   currentAccount.value = acc
 })
 </script>
 
 <template>
-  <!-- main -->
   <div class="-mt-4">
-    <!-- 账号信息 -->
-    <AccountItem :account="currentAccount" v-if="currentAccount" :show-network="true" />
+    <!-- Account Info -->
+    <AccountItem :account="currentAccount" :currentAccount="currentAccount" v-if="currentAccount" :show-network="true" />
 
     <Balance />
 
-    <!-- 资产列表 -->
+    <!-- Asset List -->
     <AssetList />
   </div>
 </template>
diff --git a/src/pages/wallet/Receive.vue b/src/pages/wallet/Receive.vue
index 4130b92..5583111 100644
--- a/src/pages/wallet/Receive.vue
+++ b/src/pages/wallet/Receive.vue
@@ -3,7 +3,9 @@ import { ref, computed, Ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useQRCode } from '@vueuse/integrations/useQRCode'
 
-import { type Chain, getAddress } from '@/lib/account'
+// import { type Chain, getAddress } from '@/lib/account'
+import { type Chain } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { allAssets } from '@/data/assets'
 
 // init
@@ -12,7 +14,10 @@ const chain: Ref<Chain> = ref(route.query.chain as Chain)
 const asset = computed(() => allAssets.find((asset) => asset.chain === chain.value))
 
 const address = ref<string>('')
-getAddress(chain.value).then((add) => {
+// getAddress(chain.value).then((add) => {
+//   address.value = add!
+// })
+createEmit<string>('getAddress')(chain.value).then((add) => {
   address.value = add!
 })
 
diff --git a/src/pages/wallet/SelectAsset.vue b/src/pages/wallet/SelectAsset.vue
index 4e4e86c..82f7908 100644
--- a/src/pages/wallet/SelectAsset.vue
+++ b/src/pages/wallet/SelectAsset.vue
@@ -4,7 +4,8 @@ import { useRoute, useRouter } from 'vue-router'
 
 import { MVCAssets } from '@/data/assets'
 import AssetItem from './components/AssetItem.vue'
-import { getAssetsDisplay } from '@/lib/assets'
+// import { getAssetsDisplay } from '@/lib/assets'
+import { createEmit } from '@/lib/emitters'
 
 const props = defineProps<{
   purpose: 'receive' | 'send'
@@ -14,7 +15,10 @@ const router = useRouter()
 
 const assets = ref(MVCAssets)
 const assetsDisplay: Ref<string[]> = ref([])
-getAssetsDisplay().then((display) => {
+// getAssetsDisplay().then((display) => {
+//   assetsDisplay.value = display
+// })
+createEmit<string[]>('getAssetsDisplay')().then((display) => {
   assetsDisplay.value = display
 })
 const displayingAssets = computed(() => {
diff --git a/src/pages/wallet/Send.vue b/src/pages/wallet/Send.vue
index 41091ce..c35f55b 100644
--- a/src/pages/wallet/Send.vue
+++ b/src/pages/wallet/Send.vue
@@ -6,7 +6,8 @@ import { useQueryClient } from '@tanstack/vue-query'
 
 import { useBalanceQuery } from '@/queries/balance'
 import { prettifyBalance } from '@/lib/formatters'
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { MVCAssets } from '@/data/assets'
 
 import Modal from '@/components/Modal.vue'
@@ -18,7 +19,10 @@ const asset = computed(() => MVCAssets.find((asset) => asset.symbol === symbol.v
 const queryClient = useQueryClient()
 
 const address = ref('')
-getAddress().then((addr) => {
+// getAddress().then((addr) => {
+//   address.value = addr!
+// })
+createEmit<string>('getAddress')().then((addr) => {
   address.value = addr!
 })
 
diff --git a/src/pages/wallet/SendToken.vue b/src/pages/wallet/SendToken.vue
index 52e2e97..fec4c7c 100644
--- a/src/pages/wallet/SendToken.vue
+++ b/src/pages/wallet/SendToken.vue
@@ -6,7 +6,8 @@ import { CircleStackIcon } from '@heroicons/vue/24/solid'
 import { useQueryClient } from '@tanstack/vue-query'
 
 import { prettifyTokenBalance } from '@/lib/formatters'
-import { getAddress, getCurrentAccount, getPrivateKey } from '@/lib/account'
+// import { getAddress, getCurrentAccount, getPrivateKey } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { useTokenQuery } from '@/queries/tokens'
 import { network } from '@/lib/network'
 
@@ -19,8 +20,11 @@ const genesis = route.params.genesis as string
 const queryClient = useQueryClient()
 
 const address = ref('')
-getCurrentAccount()
-getAddress().then((addr) => {
+// getCurrentAccount()
+// getAddress().then((addr) => {
+//   address.value = addr!
+// })
+createEmit<string>('getAddress')().then((addr) => {
   address.value = addr!
 })
 
@@ -50,7 +54,8 @@ async function send() {
 
   operationLock.value = true
 
-  const privateKey = await getPrivateKey("mvc")
+  // const privateKey = await getPrivateKey("mvc")
+  const privateKey = await createEmit<string>('getPrivateKey')("mvc")
 
   const ftManager = new FtManager({
     network: network.value as API_NET,
diff --git a/src/pages/wallet/SetPassword.vue b/src/pages/wallet/SetPassword.vue
index 654664e..3e0c591 100644
--- a/src/pages/wallet/SetPassword.vue
+++ b/src/pages/wallet/SetPassword.vue
@@ -4,7 +4,7 @@ import PasswordImg from '@/assets/images/password.svg?url'
 import { Ref, computed, ref } from 'vue'
 import { passwordStrength } from 'check-password-strength'
 import { useRouter } from 'vue-router'
-import accountManager from '@/lib/account'
+// import accountManager from '@/lib/account'
 import passwordManager from '@/lib/password'
 
 const router = useRouter()
diff --git a/src/pages/wallet/Token.vue b/src/pages/wallet/Token.vue
index 7edd3ee..01e952f 100644
--- a/src/pages/wallet/Token.vue
+++ b/src/pages/wallet/Token.vue
@@ -8,7 +8,8 @@ import {
   ClipboardDocumentListIcon,
 } from '@heroicons/vue/24/solid'
 
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { prettifyTokenBalance, prettifyTokenGenesis } from '@/lib/formatters'
 import { useTokenQuery } from '@/queries/tokens'
 import { isOfficialToken } from '@/lib/assets'
@@ -21,7 +22,10 @@ const genesis = route.params.genesis as string
 const symbol = route.params.symbol as string
 
 const address: Ref<string> = ref('')
-getAddress().then((add) => {
+// getAddress().then((add) => {
+//   address.value = add!
+// })
+createEmit<string>('getAddress')().then((add) => {
   address.value = add!
 })
 const enabled = computed(() => !!address.value)
diff --git a/src/pages/wallet/components/Activities.vue b/src/pages/wallet/components/Activities.vue
index e8c91a6..1c0b023 100644
--- a/src/pages/wallet/components/Activities.vue
+++ b/src/pages/wallet/components/Activities.vue
@@ -2,7 +2,8 @@
 import { Ref, ref, computed } from 'vue'
 import { InboxIcon } from '@heroicons/vue/24/solid'
 
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import { useActivitiesQuery } from '@/queries/activities'
 import type { Token } from '@/queries/tokens'
 
@@ -14,7 +15,10 @@ const props = defineProps<{
 }>()
 
 const address: Ref<string> = ref('')
-getAddress(props.asset.chain).then((add) => {
+// getAddress(props.asset.chain).then((add) => {
+//   address.value = add!
+// })
+createEmit<string>('getAddress')(props.asset.chain).then((add) => {
   address.value = add!
 })
 const enabled = computed(() => !!address.value)
diff --git a/src/pages/wallet/components/ActivityItem.vue b/src/pages/wallet/components/ActivityItem.vue
index 9aa6888..566eac9 100644
--- a/src/pages/wallet/components/ActivityItem.vue
+++ b/src/pages/wallet/components/ActivityItem.vue
@@ -6,7 +6,7 @@ import type { Activity } from '@/queries/activities'
 import { prettifyTimestamp, prettifyTxId } from '@/lib/formatters'
 import { toTx } from '@/lib/helpers'
 import { getBrowserHost } from '@/lib/host'
-import { Chain } from '@/lib/account'
+import { type Chain } from '@/lib/account'
 
 const props = defineProps<{
   activity: Activity
diff --git a/src/pages/wallet/components/AssetItem.vue b/src/pages/wallet/components/AssetItem.vue
index 52324d0..edfc06a 100644
--- a/src/pages/wallet/components/AssetItem.vue
+++ b/src/pages/wallet/components/AssetItem.vue
@@ -7,9 +7,11 @@ import { isOfficialToken } from '@/lib/assets'
 import { prettifyBalance, prettifyTokenBalance } from '@/lib/formatters'
 import { type Asset, getTagInfo, Tag } from '@/data/assets'
 import { useExchangeRatesQuery } from '@/queries/exchange-rates'
-import { getCurrentAccount } from '@/lib/account'
+// import { getCurrentAccount } from '@/lib/account'
 import { getNetwork } from '@/lib/network'
 import { updateAsset } from '@/lib/balance'
+import { createEmit } from '@/lib/emitters'
+import { type Account } from '@/lib/account'
 
 const { asset } = defineProps<{
   asset: Asset
@@ -19,7 +21,17 @@ const chain = computed(() => asset.chain)
 const address = ref('')
 const tag = ref<Tag>()
 
-getCurrentAccount().then(async (account) => {
+// getCurrentAccount().then(async (account) => {
+//   if (!account) return
+
+//   const network = await getNetwork()
+//   if (network === 'mainnet') {
+//     address.value = account[chain.value].mainnetAddress
+//   } else {
+//     address.value = account[chain.value].testnetAddress
+//   }
+// })
+createEmit<Account>("getCurrentAccount")().then(async (account) => {
   if (!account) return
 
   const network = await getNetwork()
@@ -62,25 +74,17 @@ const exchange = computed(() => {
         <img class="h-10 w-10 rounded-full" :src="asset.logo" v-if="asset.logo" />
         <CircleStackIcon class="h-10 w-10 text-gray-300 transition-all group-hover:text-blue-500" v-else />
         <div class="flex flex-col gap-y-1 items-start">
-          <div
-            :class="[
-              'flex w-24 items-center gap-x-0.5 truncate whitespace-nowrap',
-              asset.isNative ? 'text-lg' : 'text-sm',
-            ]"
-            :title="asset.tokenName"
-          >
+          <div :class="[
+            'flex w-24 items-center gap-x-0.5 truncate whitespace-nowrap',
+            asset.isNative ? 'text-lg' : 'text-sm',
+          ]" :title="asset.tokenName">
             {{ asset.tokenName }}
-            <CheckBadgeIcon
-              class="h-4 w-4 shrink-0 text-blue-500"
-              v-if="asset?.genesis && isOfficialToken(asset.genesis)"
-            />
+            <CheckBadgeIcon class="h-4 w-4 shrink-0 text-blue-500"
+              v-if="asset?.genesis && isOfficialToken(asset.genesis)" />
           </div>
 
-          <div
-            :style="`background-color:${tag.bg};color:${tag.color};`"
-            :class="['px-1.5', 'py-0.5', 'rounded', 'text-xs', 'inline-block']"
-            v-if="tag"
-          >
+          <div :style="`background-color:${tag.bg};color:${tag.color};`"
+            :class="['px-1.5', 'py-0.5', 'rounded', 'text-xs', 'inline-block']" v-if="tag">
             {{ tag.name }}
           </div>
         </div>
diff --git a/src/pages/wallet/components/AssetList.vue b/src/pages/wallet/components/AssetList.vue
index 89a9441..1ad3d35 100644
--- a/src/pages/wallet/components/AssetList.vue
+++ b/src/pages/wallet/components/AssetList.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { SquaresPlusIcon } from '@heroicons/vue/24/outline'
 
 import AssetItem from './AssetItem.vue'
-import { getAddress } from '@/lib/account'
+// import { getAddress } from '@/lib/account'
+import { createEmit } from '@/lib/emitters'
 import useTokensQuery from '@/queries/tokens'
-import { getAssetsDisplay } from '@/lib/assets'
+// import { getAssetsDisplay } from '@/lib/assets'
+import { useBTCAseetQuery } from '@/queries/btc'
 import { type Asset, BTCAssets, MVCAssets } from '@/data/assets'
-
-import { fetchBtcAsset } from '@/queries/btc'
-import { deriveAllAddresses } from '@/lib/bip32-deriver'
+// import { toManageAssets, toNative, toWelcome } from '@/lib/router'
 
 const router = useRouter()
 
@@ -18,27 +18,62 @@ const mvcAddress = ref<string>('')
 const btcAddress = ref<string>('')
 const btcAssets = ref<Asset[]>(BTCAssets.filter((asset) => asset.symbol === 'BTC') || [])
 
-// TODO Refactor into hooks
-getAddress('mvc').then((addr) => {
+// onMounted(async () => {
+//   mvcAddress.value = await getAddress('mvc')
+//   btcAddress.value = await getAddress('btc')
+//   console.log("btcAddress", btcAddress.value);
+
+//   if (!btcAddress.value || !mvcAddress.value) {
+//     toWelcome()
+//   }
+// })
+
+// getAddress('mvc').then(addr => {
+//   if (!addr) {
+//     toWelcome()
+//     return
+//   }
+//   mvcAddress.value = addr
+//   console.log("mvcAddress", mvcAddress.value);
+// })
+createEmit<string>('getAddress')('mvc').then(addr => {
+  if (!addr) {
+    toWelcome()
+    return
+  }
   mvcAddress.value = addr
 })
-getAddress('btc').then((addr) => {
-  if (!addr) return router.push('/welcome')
+
+createEmit<string>('getAddress')('btc').then(addr => {
+  if (!addr) {
+    toWelcome()
+    return
+  }
   btcAddress.value = addr
-  fetchBtcAsset(addr).then((userBRC20Asset) => {
-    btcAssets.value = BTCAssets.filter((asset) => asset.symbol === 'BTC' || userBRC20Asset.includes(asset.symbol))
-  })
 })
 
+
+// FTXME fetchBTCAsset loop request
+const enabledBTCAseetQuery = computed(() => !!btcAddress.value)
+// if(enabledBTCAseetQuery)
+const { data: userBRC20Asset } = useBTCAseetQuery(btcAddress, { enabled: enabledBTCAseetQuery })
+console.log({ userBRC20Asset });
+btcAssets.value = BTCAssets.filter((asset) =>
+  asset.symbol === 'BTC' || userBRC20Asset.value?.includes(asset.symbol))
+
 const listedAssets = ref(MVCAssets)
 
 const { isLoading, data: userOwnedTokens } = useTokensQuery(mvcAddress, { enabled: computed(() => !!mvcAddress.value) })
 type UserOwnedToken = NonNullable<typeof userOwnedTokens.value>[number]
 
 const assetsDisplay = ref<string[]>([])
-getAssetsDisplay().then((display) => {
+// getAssetsDisplay().then((display) => {
+//   assetsDisplay.value = display
+// })
+createEmit<string[]>('getAssetsDisplay')().then((display) => {
   assetsDisplay.value = display
 })
+
 const displayingAssets = computed(() => {
   return listedAssets.value.filter((asset) => assetsDisplay.value.includes(asset.symbol))
 })
@@ -54,6 +89,10 @@ function toNative(asset: Asset) {
   })
 }
 
+function toWelcome() {
+  router.push('/welcome')
+}
+
 function toToken(token: UserOwnedToken) {
   router.push({
     name: 'token',
diff --git a/src/pages/wallet/components/AssetSelect.vue b/src/pages/wallet/components/AssetSelect.vue
index 0fc86fe..6e673f8 100644
--- a/src/pages/wallet/components/AssetSelect.vue
+++ b/src/pages/wallet/components/AssetSelect.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
 import { Switch } from '@headlessui/vue'
-
-import { addAssetsDisplay, getAssetsDisplay, removeAssetsDisplay } from '@/lib/assets'
+import { createEmit } from '@/lib/emitters'
+// import { addAssetsDisplay, getAssetsDisplay, removeAssetsDisplay } from '@/lib/assets'
 
 const props = defineProps<{
   asset: {
@@ -14,7 +14,11 @@ const props = defineProps<{
 
 const enabled = ref(false)
 const initializing = ref(true)
-getAssetsDisplay().then((assets) => {
+// getAssetsDisplay().then((assets) => {
+//   enabled.value = assets.includes(props.asset.symbol)
+//   initializing.value = false
+// })
+createEmit<string[]>('getAssetsDisplay')().then((assets) => {
   enabled.value = assets.includes(props.asset.symbol)
   initializing.value = false
 })
@@ -25,10 +29,12 @@ watch(enabled, async (value) => {
 
   if (value) {
     // 保存至显示列表
-    await addAssetsDisplay(props.asset.symbol)
+    // await addAssetsDisplay(props.asset.symbol)
+    await createEmit('addAssetsDisplay')(props.asset.symbol)
   } else {
     // 从显示列表中删除
-    await removeAssetsDisplay(props.asset.symbol)
+    // await removeAssetsDisplay(props.asset.symbol)
+    await createEmit('removeAssetsDisplay')(props.asset.symbol)
   }
 })
 </script>
diff --git a/src/pages/welcome/Index.vue b/src/pages/welcome/Index.vue
index 4d8881f..7d361e4 100644
--- a/src/pages/welcome/Index.vue
+++ b/src/pages/welcome/Index.vue
@@ -3,8 +3,10 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import MetaletLogoImg from '@/assets/images/metalet-logo.png?url'
-import { getAccounts, getCurrentAccount, migrateV2, needsMigrationV2 } from '@/lib/account'
+// import { getAccounts, getCurrentAccount, migrateV2, needsMigrationV2 } from '@/lib/account'
+import { getAccounts } from '@/lib/account'
 import { sleep } from '@/lib/helpers'
+import { createEmit } from '@/lib/emitters'
 
 const router = useRouter()
 
@@ -18,7 +20,28 @@ getAccounts().then((accounts) => {
 })
 
 const showingMigrationCover = ref(true)
-needsMigrationV2().then(async (needsMigration: boolean) => {
+// needsMigrationV2().then(async (needsMigration: boolean) => {
+//   if (!needsMigration) {
+//     showingMigrationCover.value = false
+//     return
+//   }
+
+//   if (needsMigration) {
+//     showingMigrationCover.value = true
+
+//     await migrateV2()
+//     await sleep(1000)
+
+//     showingMigrationCover.value = false
+
+//     if (await getCurrentAccount()) {
+//       router.push('/')
+//     } else {
+//       window.location.reload()
+//     }
+//   }
+// })
+createEmit<boolean>('needsMigrationV2')().then(async (needsMigration: boolean) => {
   if (!needsMigration) {
     showingMigrationCover.value = false
     return
@@ -27,12 +50,14 @@ needsMigrationV2().then(async (needsMigration: boolean) => {
   if (needsMigration) {
     showingMigrationCover.value = true
 
-    await migrateV2()
+    // await migrateV2()
+    await createEmit('migrateV2')()
     await sleep(1000)
 
     showingMigrationCover.value = false
 
-    if (await getCurrentAccount()) {
+    // if (await getCurrentAccount()) {
+    if (await createEmit('getCurrentAccount')()) {
       router.push('/')
     } else {
       window.location.reload()
diff --git a/src/queries/balance.ts b/src/queries/balance.ts
index 1902528..5ebfdaa 100644
--- a/src/queries/balance.ts
+++ b/src/queries/balance.ts
@@ -2,8 +2,9 @@ import { useQuery } from '@tanstack/vue-query'
 import { metaletApi, mvcApi } from './request'
 import { ComputedRef, Ref } from 'vue'
 import { SymbolUC, BRC20_SYMBOLS } from '@/lib/asset-symbol'
+import { brc20TickList } from './btc'
 
-type TokenType = "BRC20"
+type TokenType = 'BRC20'
 
 interface Tick {
   token: SymbolUC
@@ -39,6 +40,17 @@ export const fetchBtcBalance = async (address: string): Promise<Balance> => {
 }
 
 export const fetchBRC20Balance = async (address: string, symbol: SymbolUC): Promise<Balance> => {
+  if (brc20TickList.value?.length) {
+    const brc20TickAsset = brc20TickList.value.find((tick) => tick.token === symbol)
+    if (brc20TickAsset) {
+      return {
+        address,
+        total: Number(brc20TickAsset.balance),
+        transferBalance: Number(brc20TickAsset.transferBalance),
+        availableBalance: Number(brc20TickAsset.availableBalance),
+      }
+    }
+  }
   const { tickList } = await metaletApi(`/address/brc20/asset`)
     .get({ address, chain: 'btc', tick: symbol.toLowerCase() })
     .then((res) => res.data)
@@ -48,9 +60,9 @@ export const fetchBRC20Balance = async (address: string, symbol: SymbolUC): Prom
   if (tickAsset) {
     return {
       address,
-      availableBalance: Number(tickAsset.availableBalance),
-      transferBalance: Number(tickAsset.transferBalance),
       total: Number(tickAsset.balance),
+      transferBalance: Number(tickAsset.transferBalance),
+      availableBalance: Number(tickAsset.availableBalance),
     }
   }
 
@@ -89,6 +101,5 @@ export const useBalanceQuery = (address: Ref, symbol: SymbolUC, options: { enabl
       }
     },
     ...options,
-
   })
 }
diff --git a/src/queries/btc.ts b/src/queries/btc.ts
index a3690d2..33e006b 100644
--- a/src/queries/btc.ts
+++ b/src/queries/btc.ts
@@ -1,6 +1,18 @@
 import dayjs from 'dayjs'
-import { ordersApi, metaletApi } from '@/queries/request'
+import { ref, Ref, ComputedRef } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 import { BRC20_Symbol_UC } from '@/lib/asset-symbol'
+import { ordersApi, metaletApi } from '@/queries/request'
+
+interface Tick {
+  token: BRC20_Symbol_UC
+  tokenType: TokenType
+  balance: string
+  availableBalance: string
+  transferBalance: string
+}
+
+export const brc20TickList = ref<Tick[]>()
 
 export const getBTCBalance = (address: string) => {
   return ordersApi('/balance').get({ address })
@@ -16,7 +28,6 @@ export interface Tx {
 
 export const getBTActivities = async (address: string): Promise<Tx[]> => {
   const transactions = (await ordersApi('/activities').get({ address })) as any
-  console.log('transactions', transactions)
 
   const txs: Tx[] = []
 
@@ -55,20 +66,28 @@ export const getBTCPrice = () => {
 
 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`)
+export const fetchBTCAsset = async (address: string): Promise<string[]> => {
+  console.log('fetchBtcAsset address', address)
+  if (!address) {
+    return []
+  }
+  return await metaletApi(`/address/brc20/asset`)
     .get({ address, chain: 'btc' })
     .then((res) => {
-      return res.data.tickList.map((tick: Tick) => tick.token)
+      // brc20TickList.value = res?.data?.tickList || []
+      console.log('tickList', res.data.tickList)
+
+      return res?.data?.tickList.map((tick: Tick) => tick.token) || []
     })
+}
+
+export const useBTCAseetQuery = (addressRef: Ref<string>, options: { enabled: ComputedRef<boolean> }) => {
+  const address = addressRef.value
+  console.log('useBTCAseetQuery address', address, options.enabled.value)
 
-  return brc20Assets
+  return useQuery({
+    queryKey: ['BTCAsset', { address }],
+    queryFn: () => fetchBTCAsset(address),
+    ...options,
+  })
 }
diff --git a/src/queries/request.ts b/src/queries/request.ts
index 8bc5d94..ca7e7e2 100644
--- a/src/queries/request.ts
+++ b/src/queries/request.ts
@@ -68,6 +68,15 @@ export const metaletApi = (path: string) => {
   }
 }
 
+export const metaletApiV2 = (path: string) => {
+  // metalet api requires credential to pass authentication check
+  const metaletHost = METALET_HOST + '/wallet-api/v2'
+  return {
+    get: (params?: OptionParams) => request(`${metaletHost}${path}`, { method: 'GET', params, withCredential: true }),
+    post: (data?: OptionData) => request(`${metaletHost}${path}`, { method: 'POST', data, withCredential: true }),
+  }
+}
+
 export const ordersApi = (path: string) => {
   const ordersHost = ORDERS_HOST + '/api'
   return {
diff --git a/src/queries/utxos.ts b/src/queries/utxos.ts
index e262d05..de5c0b2 100644
--- a/src/queries/utxos.ts
+++ b/src/queries/utxos.ts
@@ -1,7 +1,40 @@
-import { mvcApi } from './request'
+import { Chain } from '@/lib/account'
+import { mvcApi, metaletApiV2 } from './request'
 
-export const fetchUtxos = async (address: string): Promise<any[]> => {
-  const utxos: any = await mvcApi(`/address/${address}/utxo`).get()
+export interface UTXO {
+  address: string
+  codeType: number
+  height: number
+  idx: number
+  inscriptions: string[]
+  isOpInRBF: boolean
+  satoshi: number
+  scriptPk: string
+  scriptType: string
+  txId: string
+  vout: number
+}
+
+const fetchMVCUtxos = async (address: string): Promise<any[]> => {
+  return await mvcApi(`/address/${address}/utxo`).get()
+}
+
+// Fetch BTC address non inscription UTXO utxos
+const fetchBTCUtxos = async (address: string): Promise<UTXO[]> => {
+  const {
+    data: { utxo },
+  } = await metaletApiV2(`/address/utxos`).get({
+    address,
+    chain: 'btc',
+  })
+
+  return utxo
+}
 
-  return utxos
+export const fetchUtxos = async (chain: Chain = 'mvc', address: string): Promise<any[]> => {
+  if (chain === 'mvc') {
+    return await fetchMVCUtxos(address)
+  } else {
+    return await fetchBTCUtxos(address)
+  }
 }
diff --git a/vite-config/vite.content.config.ts b/vite-config/vite.content.config.ts
index 3de2d1d..835ddb8 100644
--- a/vite-config/vite.content.config.ts
+++ b/vite-config/vite.content.config.ts
@@ -22,7 +22,7 @@ export default defineConfig({
     lib: {
       entry: resolve(__dirname, '../src/content-script/main.ts'),
       name: 'Metalet',
-      formats: ['es'],
+      formats: ['iife'],
     },
     rollupOptions: {
       output: {