improve portfolio

src/components/charts/apexChartConfig.ts

@@ -258,17 +258,23 @@ export const getMarketPriceChartConfig = (
     },
   };
 };
+
+// const donutColors = Array.from({length: 19}, () => (`#${Math.floor(Math.random()*16777215+100000).toString(16)}`))
+const donutColors = ['#c2992c', '#aa1cdb', '#83b0ad', '#bac470', '#cd1bb3', '#f65f30', '#5cfc8a', '#14aced', '#bf725b', '#2e9d9', '#2d5087', '#acfe3e', '#bbf511', '#53cd60', '#5d842d', '#61cd7c', '#c5cf75', '#ad5eb', '#164731']
+
 export const getDonutChartConfig = (
   theme: string,
   labels: string[]
 ) => {
-  const donutColors = {
+  // const donutColors = {
-    series1: '#fdd835',
+  //   series1: '#fdd835',
-    series2: '#00d4bd',
+  //   series2: '#00d4bd',
-    series3: '#826bf8',
+  //   series3: '#826bf8',
-    series4: '#32baff',
+  //   series4: '#32baff',
-    series5: '#ffa1a1',
+  //   series5: '#ffa1a1',
-  };
+  // };
+
+  console.log(donutColors)
 
   const { themeSecondaryTextColor, themePrimaryTextColor } =
     colorVariables(theme);
@@ -276,12 +282,13 @@ export const getDonutChartConfig = (
   return {
     stroke: { width: 0 },
     labels,
-    colors: [
+    colors: donutColors,
-      donutColors.series1,
+    // colors: [
-      donutColors.series5,
+    //   donutColors.series1,
-      donutColors.series3,
+    //   donutColors.series5,
-      donutColors.series2,
+    //   donutColors.series3,
-    ],
+    //   donutColors.series2,
+    // ],
     dataLabels: {
       enabled: true,
       formatter: (val: string) => `${parseInt(val, 10)}%`,

src/modules/[chain]/index.vue

@@ -202,7 +202,7 @@ const amount = computed({
             </div>
 
             <div class="flex">
-              <label class="btn btn-primary px-1 my-5 mr-2" for="calculator">
+              <label class="btn btn-primary !px-1 my-5 mr-2" for="calculator">
                 <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect x="4" y="2" width="16" height="20" rx="2"></rect> <line x1="8" x2="16" y1="6" y2="6"></line> <line x1="16" x2="16" y1="14" y2="18"></line> <path d="M16 10h.01"></path> <path d="M12 10h.01"></path> <path d="M8 10h.01"></path> <path d="M12 14h.01"></path> <path d="M8 14h.01"></path> <path d="M12 18h.01"></path> <path d="M8 18h.01"></path> </g></svg>
               </label>
               <!-- Put this part before </body> tag -->
@@ -232,7 +232,7 @@ const amount = computed({
                 </div>
                 <label class="modal-backdrop" for="calculator">Close</label>
               </div>
-              <a class="my-5 !text-white btn grow" :class="{'btn-success': store.trustColor === 'green', 'btn-warning': store.trustColor === 'yellow'}" :href="ticker.trade_url"
+              <a class="my-5 !text-white btn grow" :class="{'!btn-success': store.trustColor === 'green', '!btn-warning': store.trustColor === 'yellow'}" :href="ticker.trade_url"
                 target="_blank">
                 Buy {{ coinInfo.symbol || '' }}
               </a>

src/modules/wallet/portfolio.vue

@@ -27,17 +27,17 @@ scanLocalKeys().forEach((wallet) => {
   // load balance & delegations
   if (imported)
     imported.forEach((x) => {
-      if (x.endpoint) {
+      if (x.endpoint && x.address) {
         const client = CosmosRestClient.newDefault(x.endpoint);
         client.getBankBalances(x.address).then((res) => {
           const bal = res.balances.filter((x) => x.denom.length < 10);
-          balances.value[x.address] = bal;
+          if(bal) balances.value[x.address || ""] = bal;
           bal.forEach((b) => {
             tokenMeta.value[b.denom] = x;
           });
         });
         client.getStakingDelegations(x.address).then((res) => {
-          delegations.value[x.address] = res.delegation_responses;
+          if(res && res.delegation_responses) delegations.value[x.address || ""] = res.delegation_responses;
           res.delegation_responses.forEach((del) => {
             tokenMeta.value[del.balance.denom] = x;
           });
@@ -98,9 +98,11 @@ const tokenList = computed(() => {
   });
   return list.filter((x) => x.value > 0).sort((a, b) => b.value - a.value);
 });
+
 </script>
 <template>
   <div class="overflow-x-auto w-full card">
+
     <div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
       <div class="min-w-0 flex-1">
         <h2
@@ -127,18 +129,22 @@ const tokenList = computed(() => {
                 d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
               />
             </svg>
-            Manage all your assets in one page {{ totalValue }}
+            Manage all your assets in one page 
           </div>
         </div>
       </div>
-      <div class="mt-5 flex lg:!ml-4 lg:!mt-0"></div>
+      <div class="mt-5 lg:!ml-4 lg:!mt-0 text-right">
+        <div>Total Value</div>
+        <div class="text-success font-bold">${{ format.formatNumber(totalValue, '0,0.[00]') }}</div>
+      </div>
     </div>
-    <div class="bg-base-100">
+    <div  class="bg-base-100">
       <DonutChart
+        v-if="tokenList"
         :series="Object.values(tokenValues)"
-        :labels="Object.keys(tokenValues)"
+        :labels="Object.keys(tokenValues).map(x => format.tokenDisplayDenom(x)?.toUpperCase())"
       />
-      <div class="overflow-x-auto">
+      <div class="overflow-x-auto mt-4">
         <table class="table w-full">
           <thead>
             <tr>
@@ -149,25 +155,26 @@ const tokenList = computed(() => {
           </thead>
           <tbody>
             <tr v-for="(x, index) in tokenList" :key="index">
-              <td class="capitalize">
+              <td >
-                <div class="flex">
+                <div class="flex gap-1 text-xs items-center">
                   <div class="avatar">
                     <div class="mask mask-squircle w-6 h-6 mr-2">
                       <img :src="x.logo" :alt="x.chainName" />
                     </div>
                   </div>
-                  {{ x.chainName }}
+                  <span class="uppercase font-bold text-lg">{{ format.tokenDisplayDenom(x.denom) }}</span> @
+                  <span class="capitalize ">{{ x.chainName }} </span>
                 </div>
               </td>
-              <td class="text-right">${{ format.formatNumber(x.value) }}</td>
+              <td class="text-right">${{ format.formatNumber(x.value, '0,0.[00]') }}</td>
               <td class="text-right">{{ format.percent(x.percentage) }}</td>
             </tr>
           </tbody>
         </table>
         
       </div>
-      <div class="p-4 text-center" v-show="tokenList?.length ===0">
+      <div class="p-4 text-center" v-if="tokenList.length === 0">
-        No Data
+        No Data, <RouterLink to="./account" class="btn btn-link">Import Address</RouterLink>
       </div>
     </div>
   </div>

src/stores/useFormatter.ts

@@ -142,6 +142,30 @@ export const useFormatter = defineStore('formatter', {
       }
       return null
     },
+    tokenDisplayDenom(denom?: string) {
+      if (denom) {
+        if (denom && denom.startsWith('ibc/')) {
+          let ibcDenom = this.ibcDenoms[denom.replace('ibc/', '')];
+          if (ibcDenom) {
+            denom = ibcDenom.base_denom;
+          }
+        }
+
+        const conf = this.findGlobalAssetConfig(denom)
+
+        if (conf) {
+          let unit = { exponent: 6, denom: '' };
+          // find the max exponent for display
+          conf.denom_units.forEach((x) => {
+            if (x.exponent >= unit.exponent) {
+              unit = x;
+            }
+          });          
+          return unit.denom;
+        }
+        return denom;
+      }
+    },
     tokenDisplayNumber(
       token?: { denom: string; amount: string },
       mode = 'all'