Update Wallet UI

2021-10-09 16:35:08 +08:00 · 2021-10-09 16:35:08 +08:00 · 60337b9db7
commit 60337b9db7
parent 822196f90c
7 changed files with 154 additions and 77 deletions
--- a/src/@core/components/app-collapse/AppCollapseItem.vue
+++ b/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>
--- a/src/views/ArrayFieldComponent.vue
+++ b/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('...')
      }
--- a/src/views/ChartjsComponentBar.vue
+++ b/src/views/ChartjsComponentBar.vue
@ -5,23 +5,23 @@ export default {
  extends: Bar,
  mixins: [mixins.reactiveProp],
  props: {
-    // options: {
-    //   type: Object,
-    //   default: null,
-    // },
+    options: {
+      type: Object,
+      default: null,
+    },
  },
  data() {
    return {
-      options: {
-        plugins: {
-          legend: {
-            display: false,
-            labels: {
-              color: 'rgb(255, 99, 132)',
-            },
-          },
-        },
-      },
+      // options: {
+      //   plugins: {
+      //     legend: {
+      //       display: false,
+      //       labels: {
+      //         color: 'rgb(255, 99, 132)',
+      //       },
+      //     },
+      //   },
+      // },
    }
  },
  mounted() {
--- a/src/views/ObjectFieldComponent.vue
+++ b/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
    },
  },
--- a/src/views/WalletAccountDetail.vue
+++ b/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',
          },
--- a/src/views/WalletAccounts.vue
+++ b/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
-                      class="pl-1 float-right text-muted text-overflow "
-                      @click="copy(acc.addr)"
-                    >
-                      {{ formatAddr(acc.addr) }}
-                    </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">
+                    <app-collapse hover>
+                      <app-collapse-item title="1">
+                        <template #header>
+                          <small class="text-muted">{{ formatAddr(acc.addr) }}</small>
+                        </template>
                        <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>
-                    </b-tabs>
+                        <div
+                          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 total = {}
-      if (v) {
-        v.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
-            }
-          })
-        })
-      }
-      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
-            }
-          })
-        })
-      }
+      const prices = this.calculateByDenom
+      // const changes = Object.entries(prices).map(v => {
+      //   console.log('entries:', v[0], v[1])
+      //   const quote = this.$store.state.chains.quotes[`${v[0]}`]
+      //   return quote ? (v[1] * quote[`${this.currency2}_24h_change`]) / 100 : 0
+      // })
      return {
-        labels: Object.keys(total),
+        labels: Object.keys(prices),
        datasets: [
          {
-            label: '',
-            data: Object.values(total),
-            backgroundColor: chartColors(),
+            label: 'Holdings',
+            data: Object.values(prices),
+            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',
+          // },
        ],
      }
    },
--- a/yarn.lock
+++ b/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: