Update Wallet UI

src/@core/components/app-collapse/AppCollapseItem.vue

@@ -12,6 +12,7 @@
       :aria-controls="collapseItemID"
       role="tab"
       data-toggle="collapse"
+      class="px-0 mx-0"
       @click="updateVisible(!visible)"
     >
       <slot name="header">
@@ -25,7 +26,7 @@
       :accordion="accordion"
       role="tabpanel"
     >
-      <b-card-body>
+      <b-card-body class="px-0">
         <slot />
       </b-card-body>
     </b-collapse>

src/views/ArrayFieldComponent.vue

@@ -26,7 +26,7 @@
 import { BTable } from 'bootstrap-vue'
 
 import {
-  getStakingValidatorByHex, isHexAddress, isToken, toDay, tokenFormatter,
+  getStakingValidatorByHex, isHexAddress, isToken, percent, toDay, tokenFormatter,
 } from '@/libs/data/data'
 
 export default {
@@ -56,9 +56,13 @@ export default {
     },
     formatText(value) {
       const reg = /^\d{4}.\d{1,2}.\d{1,2}T\d{2}:\d{2}:.+Z$/
+      const percentage = /^0\.\d+/
       if (reg.test(value)) {
         return toDay(value)
       }
+      if (percentage.test(value)) {
+        return `${percent(value)}%`
+      }
       if (value.length > 40) {
         return value.substring(0, 40).concat('...')
       }

src/views/ChartjsComponentBar.vue

@@ -5,23 +5,23 @@ export default {
   extends: Bar,
   mixins: [mixins.reactiveProp],
   props: {
-    // options: {
+    options: {
-    //   type: Object,
+      type: Object,
-    //   default: null,
+      default: null,
-    // },
+    },
   },
   data() {
     return {
-      options: {
+      // options: {
-        plugins: {
+      //   plugins: {
-          legend: {
+      //     legend: {
-            display: false,
+      //       display: false,
-            labels: {
+      //       labels: {
-              color: 'rgb(255, 99, 132)',
+      //         color: 'rgb(255, 99, 132)',
-            },
+      //       },
-          },
+      //     },
-        },
+      //   },
-      },
+      // },
     }
   },
   mounted() {

src/views/ObjectFieldComponent.vue

@@ -51,7 +51,7 @@
                 v-else-if="typeof value[key] === 'object'"
                 :tablefield="value[key]"
               />
-              <span v-else>{{ formatText(value[key]) }} </span>
+              <span v-else>{{ formatText(value[key]) }}</span>
             </b-tab>
           </b-tabs>
         </b-td>
@@ -68,7 +68,7 @@ import {
   BTableSimple, BTr, BTd, BTabs, BTab, BTbody,
 } from 'bootstrap-vue'
 import {
-  abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter,
+  abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, percent, tokenFormatter,
 } from '@/libs/data'
 import ArrayFieldComponent from './ArrayFieldComponent.vue'
 
@@ -122,9 +122,14 @@ export default {
       return tokenFormatter(value)
     },
     addNewLine(value) {
+      const percentage = /^0\.\d+/
+      if (percentage.test(value)) {
+        return `${percent(value)}%`
+      }
       if (typeof value === 'string' && value.indexOf('\\n') > -1) {
         return value.replaceAll('\\n', '\n')
       }
+
       return value
     },
   },

src/views/WalletAccountDetail.vue

@@ -456,7 +456,7 @@ export default {
       total = total.concat(this.assets.map(x => {
         const xh = x
         xh.type = 'Balance'
-        xh.color = 'primary'
+        xh.color = 'success'
         xh.icon = 'CreditCardIcon'
         xh.currency = this.formatCurrency(xh.amount, xh.denom)
         sumCurrency += xh.currency
@@ -477,7 +477,7 @@ export default {
         })
         total.push({
           type: 'Delegation',
-          color: 'success',
+          color: 'primary',
           icon: 'LockIcon',
           amount: temp,
           denom: stakingDenom,
@@ -551,7 +551,7 @@ export default {
           {
             labels: Object.keys(data),
             data: Object.values(data),
-            backgroundColor: [$themeColors.primary, $themeColors.success, $themeColors.warning, $themeColors.danger, $themeColors.info],
+            backgroundColor: [$themeColors.success, $themeColors.primary, $themeColors.warning, $themeColors.danger, $themeColors.info],
             borderWidth: 0,
             pointStyle: 'rectRounded',
           },

src/views/WalletAccounts.vue

@@ -4,7 +4,7 @@
       v-if="calculateTotal > 0"
       border-variant="primary"
     >
-      <b-row class="mx-0">
+      <b-row class="mx-0 d-flex align-items-center">
         <b-col
           md="4"
         >
@@ -54,6 +54,8 @@
           <chartjs-component-bar
             :height="135.0"
             :chart-data="calculateChartBar"
+            :options="options"
+            class="align-self-stretch"
           />
         </b-col>
       </b-row>
@@ -141,26 +143,28 @@
                       />
                       <h3>{{ currency }}{{ formatBalance(acc.addr) }}</h3>
                     </div>
-                    <small
+                    <app-collapse hover>
-                      class="pl-1 float-right text-muted text-overflow "
+                      <app-collapse-item title="1">
-                      @click="copy(acc.addr)"
+                        <template #header>
-                    >
+                          <small class="text-muted">{{ formatAddr(acc.addr) }}</small>
-                      {{ formatAddr(acc.addr) }}
+                        </template>
-                    </small>
-                  </b-col>
-                </b-row>
-                <b-row class="d-none">
-                  <b-col>
-                    <b-tabs
-                      active-nav-item-class="font-weight-bold text-second"
-                    >
-                      <b-tab title="Balance">
                         <div
                           v-for="b,i in balances[acc.addr]"
                           :key="i"
                           class="d-flex justify-content-between align-items-center"
                         >
                           <div class="ml-25 font-weight-bolder text-uppercase">
+                            <b-avatar
+                              variant="light-success"
+                              rounded
+                              title="Balance"
+                            >
+                              <feather-icon
+                                icon="CreditCardIcon"
+                                size="16"
+                                class="text-success"
+                              />
+                            </b-avatar>
                             {{ formatDenom(b.denom) }}
                           </div>
                           <div class="d-flex flex-column text-right">
@@ -168,8 +172,32 @@
                             <span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
                           </div>
                         </div>
-                      </b-tab>
+                        <div
-                    </b-tabs>
+                          v-for="b,i in delegations[acc.addr]"
+                          :key="`d-${i}`"
+                          class="d-flex justify-content-between align-items-center"
+                        >
+                          <div class="ml-25 font-weight-bolder text-uppercase">
+                            <b-avatar
+                              variant="light-primary"
+                              rounded
+                              title="Delegations"
+                            >
+                              <feather-icon
+                                icon="LockIcon"
+                                size="16"
+                                class="text-primary"
+                              />
+                            </b-avatar>
+                            {{ formatDenom(b.denom) }}
+                          </div>
+                          <div class="d-flex flex-column text-right">
+                            <span class="font-weight-bold mb-0">{{ formatAmount(b.amount) }}</span>
+                            <span class="font-small-2 text-muted text-nowrap">{{ currency }}{{ formatCurrency(b.amount, b.denom) }}</span>
+                          </div>
+                        </div>
+                      </app-collapse-item>
+                    </app-collapse>
                   </b-col>
                 </b-row>
               </b-card-body>
@@ -193,6 +221,7 @@
 </template>
 
 <script>
+import { $themeColors } from '@themeConfig'
 import {
   BCard, BCardHeader, BCardTitle, BCardBody, VBModal, BRow, BCol, BTabs, BTab, BAvatar, BDropdown, BDropdownItem,
 } from 'bootstrap-vue'
@@ -203,6 +232,8 @@ import {
   formatTokenAmount, formatTokenDenom, getLocalAccounts, getLocalChains, getUserCurrency, getUserCurrencySign, setUserCurrency,
 } from '@/libs/data'
 import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
+import AppCollapse from '@core/components/app-collapse/AppCollapse.vue'
+import AppCollapseItem from '@core/components/app-collapse/AppCollapseItem.vue'
 import OperationTransferComponent from './OperationTransferComponent.vue'
 import OperationTransfer2Component from './OperationTransfer2Component.vue'
 import ChartComponentDoughnut from './ChartComponentDoughnut.vue'
@@ -228,6 +259,8 @@ export default {
     OperationTransfer2Component,
     ChartComponentDoughnut,
     ChartjsComponentBar,
+    AppCollapse,
+    AppCollapseItem,
   },
   directives: {
     'b-modal': VBModal,
@@ -245,6 +278,50 @@ export default {
       delegations: {},
       ibcDenom: {},
       quotes: {},
+      options: {
+        legend: {
+          display: false,
+        },
+        // responsive: true,
+        title: {
+          display: true,
+          text: 'Token Portfolio',
+        },
+        tooltips: {
+          mode: 'index',
+          intersect: true,
+        },
+        scales: {
+          yAxes: [{
+            // type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+            type: 'logarithmic',
+            display: true,
+            position: 'left',
+            id: 'y-axis-1',
+            ticks: {
+              // For a category axis, the val is the index so the lookup via getLabelForValue is needed
+              callback(val, index) {
+                // Hide the label of every 2nd dataset
+                return index % 5 === 0 ? `${val}` : ''
+              },
+              color: 'red',
+            },
+            offset: true,
+            gridLines: {
+              display: false,
+              offsetGridLines: false,
+            },
+          }, {
+            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+            display: false,
+            position: 'right',
+            id: 'y-axis-2',
+            gridLines: {
+              drawOnChartArea: true,
+            },
+          }],
+        },
+      },
     }
   },
   computed: {
@@ -266,7 +343,7 @@ export default {
       }
       return parseFloat(total.toFixed(2))
     },
-    calculateChartDoughnut() {
+    calculateByDenom() {
       const v = Object.values(this.balances)
       const total = {}
       if (v) {
@@ -296,6 +373,10 @@ export default {
           })
         })
       }
+      return total
+    },
+    calculateChartDoughnut() {
+      const total = this.calculateByDenom
       return {
         datasets: [
           {
@@ -309,45 +390,31 @@ export default {
       }
     },
     calculateChartBar() {
-      const v = Object.values(this.balances)
+      const prices = this.calculateByDenom
-      const total = {}
+      // const changes = Object.entries(prices).map(v => {
-      if (v) {
+      //   console.log('entries:', v[0], v[1])
-        v.forEach(tokens => {
+      //   const quote = this.$store.state.chains.quotes[`${v[0]}`]
-          const subtotal = tokens.map(x => ({ denom: x.denom, sub: this.formatCurrency(x.amount, x.denom) }))
+      //   return quote ? (v[1] * quote[`${this.currency2}_24h_change`]) / 100 : 0
-          subtotal.forEach(x => {
+      // })
-            const denom = this.formatDenom(x.denom)
-            if (total[denom]) {
-              total[denom] += x.sub
-            } else {
-              total[denom] = x.sub
-            }
-          })
-        })
-      }
-      const d = Object.values(this.delegations)
-      if (d) {
-        d.forEach(tokens => {
-          const subtotal = tokens.map(x => ({ denom: x.denom, sub: this.formatCurrency(x.amount, x.denom) }))
-          subtotal.forEach(x => {
-            const denom = this.formatDenom(x.denom)
-            if (total[denom]) {
-              total[denom] += x.sub
-            } else {
-              total[denom] = x.sub
-            }
-          })
-        })
-      }
       return {
-        labels: Object.keys(total),
+        labels: Object.keys(prices),
         datasets: [
           {
-            label: '',
+            label: 'Holdings',
-            data: Object.values(total),
+            data: Object.values(prices),
-            backgroundColor: chartColors(),
+            backgroundColor: $themeColors.success,
             borderWidth: 0,
             pointStyle: 'rectRounded',
+            yAxisID: 'y-axis-1',
           },
+          // {
+          //   label: '24H Change',
+          //   data: Object.values(changes),
+          //   backgroundColor: $themeColors.warning,
+          //   borderWidth: 0,
+          //   pointStyle: 'rectRounded',
+          //   // yAxisID: 'y-axis-2',
+          // },
         ],
       }
     },

yarn.lock

@@ -3327,7 +3327,7 @@ chardet@^0.7.0:
 
 chart.js@2.9.4:
   version "2.9.4"
-  resolved "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
   integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
   dependencies:
     chartjs-color "^2.1.0"
@@ -3335,14 +3335,14 @@ chart.js@2.9.4:
 
 chartjs-color-string@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
   integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
   dependencies:
     color-name "^1.0.0"
 
 chartjs-color@^2.1.0:
   version "2.4.1"
-  resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
   integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
   dependencies:
     chartjs-color-string "^0.6.0"
@@ -3559,7 +3559,7 @@ collection-visit@^1.0.0:
 
 color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
   version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
     color-name "1.1.3"
@@ -7757,7 +7757,7 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
 
 moment@^2.10.2:
   version "2.29.1"
-  resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
 move-concurrently@^1.0.1: