From 67fd8f452f41c1d36c9ed93ce0cf76d135eccddb Mon Sep 17 00:00:00 2001
From: 2xburnt <169301814+2xburnt@users.noreply.github.com>
Date: Mon, 28 Apr 2025 17:51:56 -0500
Subject: [PATCH] improve supply page

---
 src/modules/[chain]/supply/index.vue | 100 +++++++++++++++++++--------
 1 file changed, 72 insertions(+), 28 deletions(-)

diff --git a/src/modules/[chain]/supply/index.vue b/src/modules/[chain]/supply/index.vue
index 2216f0eb..85644f57 100644
--- a/src/modules/[chain]/supply/index.vue
+++ b/src/modules/[chain]/supply/index.vue
@@ -1,52 +1,96 @@
 <script lang="ts" setup>
-import { computed, ref } from '@vue/reactivity';
-import { useBaseStore, useBlockchain, useFormatter } from '@/stores';
-import { PageRequest, type AuthAccount, type Pagination, type Coin } from '@/types';
+import { ref } from '@vue/reactivity';
+import { useBlockchain, useFormatter } from '@/stores';
+import { PageRequest, type Pagination, type Coin, type DenomMetadata } from '@/types';
 import { onMounted } from 'vue';
+import type { Asset } from '@ping-pub/chain-registry-client/dist/types'
 import PaginationBar from '@/components/PaginationBar.vue';
 const props = defineProps(['chain']);
 
 const format = useFormatter();
-const chainStore = useBlockchain()
+const chainStore = useBlockchain();
 
-const list = ref([] as Coin[])
-
-function showType(v: string) {
-    return v.replace("/cosmos.auth.v1beta1.", "")
-}
+const list = ref([] as ({ denom: string, amount: string, base: string, info: string, logo: string | undefined })[])
 
 const pageRequest = ref(new PageRequest())
 const pageResponse = ref({} as Pagination)
 
+interface SupplyAsset extends Asset {
+  logo: string | undefined
+}
+
 onMounted(() => {
   pageload(1)
 });
 
+function findGlobalAssetConfig(denom: string) {
+  const assets = chainStore.current?.assets
+  if (assets) {
+    const conf = assets.find(a => a.base === denom)
+    if (conf) {
+      return conf
+    }
+  }
+  return undefined
+}
+
+async function mergeDenomMetadata(denom: string, denomsMetadatas: DenomMetadata[]): Promise<SupplyAsset> {
+  const denomMetadata = denomsMetadatas.find(d => d.base.endsWith(denom));
+  let asset = findGlobalAssetConfig(denom) as SupplyAsset
+  if (asset && denomMetadata) {
+    asset = { ...denomMetadata, ...asset }
+    asset.display = denomMetadata.display
+    asset.logo = asset.logo_URIs?.svg || asset.logo_URIs?.png || asset.logo_URIs?.jpeg || undefined
+  } else if (denomMetadata) {
+    return denomMetadata as SupplyAsset
+  }
+  return asset;
+}
+
 function pageload(p: number) {
   pageRequest.value.setPage(p)
-  chainStore.rpc.getBankSupply(pageRequest.value).then(x => {
-    list.value = x.supply
-    pageResponse.value = x.pagination
-  });
+  chainStore.rpc.getBankDenomMetadata().then(async (denomsMetaResponse) => {
+    const bankSupplyResponse = await chainStore.rpc.getBankSupply(pageRequest.value);
+    list.value = await Promise.all(bankSupplyResponse.supply.map(async (coin: Coin) => {
+      const asset = await mergeDenomMetadata(coin.denom, denomsMetaResponse.metadatas)
+      const denom = (asset?.symbol || coin.denom)
+      return {
+        denom: denom.split('/')[denom.split('/').length - 1].toUpperCase(),
+        amount: format.tokenAmountNumber({ amount: coin.amount, denom: denom }).toString(),
+        base: asset.base || coin.denom,
+        info: asset.display || coin.denom,
+        logo: asset?.logo_URIs?.svg || asset?.logo_URIs?.png || asset?.logo_URIs?.jpeg || "/logo.svg",
+      }
+    }));
+    pageResponse.value = bankSupplyResponse.pagination
+  })
 }
 
 </script>
 <template>
-    <div class="overflow-auto bg-base-100">
-        <table class="table table-compact">
-            <thead class=" bg-base-200">
-                <tr>
-                    <td>Token</td>
-                    <td>Amount</td>
-                </tr>
-            </thead>
-            <tr v-for="item in list" class="hover">
-                <td>{{ item.denom  }}</td>
-                <td>{{ item.amount  }}</td>
-            </tr>
-        </table>
-        <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
-    </div>
+  <div class="overflow-auto bg-base-100">
+    <table class="table table-compact">
+      <thead class=" bg-base-200">
+        <tr>
+          <td>Logo</td>
+          <td>Token</td>
+          <td>Amount</td>
+          <td>Info</td>
+          <td>Base</td>
+        </tr>
+      </thead>
+      <tr v-for="item in list" class="hover">
+        <td>
+          <img v-if="item.logo" :src="item.logo" class="w-7 h-7" />
+        </td>
+        <td>{{ item.denom }}</td>
+        <td>{{ item.amount }}</td>
+        <td>{{ item.info }}</td>
+        <td>{{ item.base }}</td>
+      </tr>
+    </table>
+    <PaginationBar :limit="pageRequest.limit" :total="pageResponse.total" :callback="pageload" />
+  </div>
 </template>
 
 <route>