📦 VERSION: 2.7.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "metalet",
   "private": true,
-  "version": "2.6.0",
+  "version": "2.7.0",
   "type": "module",
   "scripts": {
     "dev": "vite --config ./vite-config/vite.dev.config.ts",
@@ -33,6 +33,7 @@
     "@scure/bip39": "^1.2.2",
     "@sentry/vue": "^7.81.1",
     "@tanstack/vue-query": "^4.26.1",
+    "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.4.1",
     "axios": "0.27.2",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Metalet",
   "description": "A cross-chain crypto wallet extension",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "manifest_version": 3,
   "action": {
     "default_popup": "popup.html",

src/data/config.ts

@@ -1,4 +1,4 @@
-export const VERSION = '2.6.0'
+export const VERSION = '2.7.0'
 
 export const FEEB = 1
 export const P2PKH_UNLOCK_SIZE = 1 + 1 + 72 + 1 + 33

src/pages/wallet/Token.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import { UseImage } from '@vueuse/components'
 import { isOfficialToken } from '@/lib/assets'
 import { useRoute, useRouter } from 'vue-router'
 import { useMVCTokenQuery } from '@/queries/tokens'
@@ -26,7 +27,7 @@ const { isLoading, data: asset } = useMVCTokenQuery(ref(address), ref(genesis),
 const toSend = () => {
   router.push({
     name: 'send-token',
-    params: { symbol, genesis,address },
+    params: { symbol, genesis, address },
   })
 }
 const toReceive = () => {
@@ -46,7 +47,13 @@ const copyGenesis = () => {
 
     <template v-else-if="!!asset">
       <!-- logo -->
-      <img v-if="asset?.logo" :src="asset.logo" alt="" class="h-20 w-20 rounded-full" />
+      <UseImage :src="asset.logo" v-if="asset.logo && asset.codeHash" class="h-20 w-20 rounded-xl">
+        <template #error>
+          <div style="line-height: 80px" class="h-20 w-20 text-center rounded-full text-white text-3xl bg-[#1E2BFF]">
+            {{ symbol[0].toLocaleUpperCase() }}
+          </div>
+        </template>
+      </UseImage>
       <div v-else style="line-height: 80px" class="h-20 w-20 text-center rounded-full text-white text-3xl bg-[#1E2BFF]">
         {{ symbol[0].toLocaleUpperCase() }}
       </div>

src/pages/wallet/components/AssetItem.vue

@@ -2,6 +2,7 @@
 import Decimal from 'decimal.js'
 import { ref, computed, watch } from 'vue'
 import { updateAsset } from '@/lib/balance'
+import { UseImage } from '@vueuse/components'
 import { isOfficialToken } from '@/lib/assets'
 import { useBalanceQuery } from '@/queries/balance'
 import { CheckBadgeIcon } from '@heroicons/vue/24/solid'
@@ -70,7 +71,13 @@ watch(
     <div class="flex gap-2 cursor-pointer items-center justify-between rounded-md bg-gray-100 px-4 py-4">
       <!-- left part -->
       <div class="flex flex-shrink-0 items-center gap-x-3">
-        <img class="h-10 w-10" :src="asset.logo" v-if="asset.logo && asset.codeHash" />
+        <UseImage :src="asset.logo" v-if="asset.logo && asset.codeHash" class="h-10 w-10 rounded-md">
+          <template #error>
+            <div class="h-10 w-10 text-center leading-10 rounded-full text-white text-base bg-[#1E2BFF]">
+              {{ asset.symbol[0].toLocaleUpperCase() }}
+            </div>
+          </template>
+        </UseImage>
         <img class="h-10 w-10 rounded-full" :src="asset.logo" v-else-if="asset.logo" />
         <div v-else class="h-10 w-10 text-center leading-10 rounded-full text-white text-base bg-[#1E2BFF]">
           {{ asset.symbol[0].toLocaleUpperCase() }}

src/queries/constants.ts

@@ -1 +1 @@
-export const Balance_QUERY_INTERVAL = 15000;
+export const Balance_QUERY_INTERVAL = 30000;