add price load

src/modules/[chain]/index.vue

@@ -67,7 +67,20 @@ const comLinks = [
 ];
 
 // wallet box
-
+const change = computed(() => {
+  const token = walletStore.balanceOfStakingToken
+  return token? format.priceChanges(token.denom) : 0
+})
+const color= computed(() => {
+  switch(true) {
+    case change.value > 0: 
+      return "text-green-600"
+    case change.value === 0:
+      return "text-grey-500"
+    case change.value < 0:
+      return "text-red-600"
+  }
+})
 </script>
 
 <template>
@@ -228,8 +241,10 @@ const comLinks = [
         <span v-if="walletStore.currentAddress" class="float-right font-light text-sm">More</span>
       </div>
       <div class="grid grid-cols-1 md:grid-cols-4 auto-cols-auto gap-4 px-4 pb-8 py-4">
-        <div class="bg-base-100">{{ format.formatToken(walletStore.balanceOfStakingToken) }}</div>
-        <div class="bg-base-100">{{ format.formatToken(walletStore.stakingAmount) }}</div>
+        <div class="bg-base-100">{{ format.formatToken(walletStore.balanceOfStakingToken) }}
+          <br><span :class="color">{{ format.showChanges(change) }}<small>%</small></span>{{ format.tokenValue(walletStore.balanceOfStakingToken) }}</div>
+        <div class="bg-base-100">{{ format.formatToken(walletStore.stakingAmount) }}
+        <br> {{ format.tokenValue(walletStore.stakingAmount) }}</div>
         <div class="bg-base-100">{{ format.formatToken(walletStore.rewardAmount) }}</div>
         <div class="bg-base-100">{{ format.formatToken(walletStore.unbondingAmount) }}</div>
       </div>

src/pages/index.vue

@@ -12,6 +12,7 @@ const dashboard = useDashboard();
 
 dashboard.$subscribe((mutation, state) => {
   localStorage.setItem('favorite', JSON.stringify(state.favorite));
+  dashboard.loadingPrices()
 });
 const keywords = ref('');
 const chains = computed(() => {
@@ -23,7 +24,6 @@ const chains = computed(() => {
     return Object.values(dashboard.chains);
   }
 });
-const chain = useBlockchain();
 </script>
 <template>
   <div class="">

src/stores/useDashboard.ts

@@ -234,6 +234,8 @@ export const useDashboard = defineStore('dashboard', {
       favorite: fav as string[],
       favoriteMap: favMap as Record<string, boolean>,
       chains: {} as Record<string, ChainConfig>,
+      prices: {},
+      coingecko: {} as Record<string, {coinId: string, exponent: number, symbol: string}>,
     };
   },
   getters: {
@@ -246,6 +248,28 @@ export const useDashboard = defineStore('dashboard', {
       this.loadingFromLocal();
       // this.loadingFromRegistry()
     },
+    loadingPrices() {
+      const coinIds = [] as string[]
+      Object.keys(this.favoriteMap).forEach(k => {
+        if(this.chains[k]) this.chains[k].assets.forEach(a => {
+          if(a.coingecko_id !== undefined) {
+            coinIds.push(a.coingecko_id)
+            a.denom_units.forEach(u => {
+              this.coingecko[u.denom] = {
+                coinId: a.coingecko_id || '',
+                exponent: u.exponent,
+                symbol: a.symbol
+              }
+            })
+          } 
+        })
+      })
+
+      const currencies = ['usd, cny'] // usd,cny,eur,jpy,krw,sgd,hkd
+      get(`https://api.coingecko.com/api/v3/simple/price?include_24hr_change=true&vs_currencies=${currencies.join(',')}&ids=${coinIds.join(",")}`).then(x => {
+        this.prices = x
+      })
+    },
     async loadingFromRegistry() {
       if (this.status === LoadingStatus.Empty) {
         this.status = LoadingStatus.Loading;
@@ -274,12 +298,14 @@ export const useDashboard = defineStore('dashboard', {
         for (let i = 0; i < this.favorite.length; i++) {
           if (!blockchain.chainName && this.chains[this.favorite[i]]) {
             blockchain.setCurrent(this.favorite[i]);
+            break
           }
         }
         if (!blockchain.chainName) {
           const [first] = Object.keys(this.chains);
           blockchain.setCurrent(first);
         }
+        this.loadingPrices()
       }
     },
     setConfigSource(newSource: ConfigSource) {

src/stores/useFormatter.ts

@@ -11,7 +11,8 @@ import { useStakingStore } from './useStakingStore';
 import { fromBase64, fromBech32, fromHex, toHex } from '@cosmjs/encoding';
 import { consensusPubkeyToHexAddress } from '@/libs';
 import { useBankStore } from './useBankStore';
-import type { DenomTrace } from '@/types';
+import type { Coin, DenomTrace } from '@/types';
+import { useDashboard } from './useDashboard';
 
 dayjs.extend(localeData);
 dayjs.extend(duration);
@@ -52,6 +53,9 @@ export const useFormatter = defineStore('formatter', {
     useBank() {
       return useBankStore();
     },
+    dashboard() {
+      return useDashboard()
+    }
   },
   actions: {
     async fetchDenomTrace(denom: string) {
@@ -64,6 +68,33 @@ export const useFormatter = defineStore('formatter', {
       }
       return trace;
     },
+    priceInfo(denom: string) {
+      const id = this.dashboard.coingecko[denom]?.coinId
+      const prices = this.dashboard.prices[id]
+      return prices
+    },
+    price(denom: string, currency = "usd") {
+      const info = this.priceInfo(denom);
+      console.log("info", info, denom)
+      return info? info[currency]||0 : 0
+    },
+    priceChanges(denom: string, currency="usd"): number {
+      const info = this.priceInfo(denom);
+      return info? info[`${currency}_24h_change`]||0 : 0
+    },
+    showChanges(v: number) {
+      return numeral(v).format("+0,0.[00]")
+    },
+    tokenValue(token: Coin) {
+      // find the symbol, 
+      const symbol = this.dashboard.coingecko[token.denom]?.symbol || "" 
+      // convert denomation to to symbol
+      const exponent = this.dashboard.coingecko[symbol.toLowerCase()]?.exponent || 0
+      // cacualte amount of symbol
+      const amount = Number(token.amount) / (10 ** exponent)
+      const value = amount * this.price(token.denom)
+      return numeral(value).format('0,0.[00]')
+    },
     formatTokenAmount(token: { denom: string; amount: string }) {
       return this.formatToken(token, false);
     },