deep-stack/cosmos-explorer
4
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

Update Wallet UI

Browse Source
This commit is contained in:
liangping
2021-10-09 16:35:08 +08:00
parent 822196f90c
commit 60337b9db7
7 changed files with 154 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/ArrayFieldComponent.vue
+5 -1
View File
@@ -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
+14 -14
View File
@@ -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() {
src/views/ObjectFieldComponent.vue
+7 -2
View File
@@ -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
+3 -3
View File
@@ -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
+118 -51
View File
@@ -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',
// },
],
}
},