optimize wallet menu
This commit is contained in:
liangping
parent
4c8694a43e
commit
0093928c16
@ -62,16 +62,7 @@
|
||||
<dark-Toggler class="d-none d-lg-block" />
|
||||
<search-bar />
|
||||
<locale />
|
||||
<b-button
|
||||
v-ripple.400="'rgba(255, 255, 255, 0.15)'"
|
||||
variant="primary"
|
||||
class="btn-icon"
|
||||
:to="{ name: 'accounts' }"
|
||||
>
|
||||
<feather-icon icon="KeyIcon" />
|
||||
<span class="align-middle ml-25">{{ walletName }}</span>
|
||||
</b-button>
|
||||
<!-- <b-dropdown
|
||||
<b-dropdown
|
||||
class="ml-1"
|
||||
variant="link"
|
||||
no-caret
|
||||
@ -85,11 +76,15 @@
|
||||
variant="primary"
|
||||
class="btn-icon"
|
||||
>
|
||||
<feather-icon icon="UserIcon" />
|
||||
<feather-icon icon="KeyIcon" />
|
||||
{{ walletName }}
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<b-dropdown-item :to="{ name: 'portfolio' }">
|
||||
<b-dropdown-item
|
||||
:to="{ name: 'portfolio' }"
|
||||
class="d-none"
|
||||
>
|
||||
<feather-icon
|
||||
icon="PieChartIcon"
|
||||
size="16"
|
||||
@ -105,22 +100,22 @@
|
||||
<span class="align-middle ml-50">Accounts</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item :to="{ name: 'addresses' }">
|
||||
<b-dropdown-item :to="{ name: 'delegations' }">
|
||||
<feather-icon
|
||||
icon="BookOpenIcon"
|
||||
size="16"
|
||||
/>
|
||||
<span class="align-middle ml-50">Address Book</span>
|
||||
<span class="align-middle ml-50">My Delegations</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item :to="{ name: 'setting' }">
|
||||
<b-dropdown-item :to="`/${selected_chain.chain_name}/uptime/my`">
|
||||
<feather-icon
|
||||
icon="SettingsIcon"
|
||||
size="16"
|
||||
/>
|
||||
<span class="align-middle ml-50">Setting</span>
|
||||
<span class="align-middle ml-50">My Validators</span>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown> -->
|
||||
</b-dropdown>
|
||||
</b-navbar-nav>
|
||||
</div>
|
||||
</template>
|
||||
@ -128,6 +123,7 @@
|
||||
<script>
|
||||
import {
|
||||
BLink, BNavbarNav, BMedia, BMediaAside, BAvatar, BMediaBody, VBTooltip, BButton,
|
||||
BDropdown, BDropdownItem,
|
||||
} from 'bootstrap-vue'
|
||||
import Ripple from 'vue-ripple-directive'
|
||||
import DarkToggler from '@core/layouts/components/app-navbar/components/DarkToggler.vue'
|
||||
@ -147,6 +143,8 @@ export default {
|
||||
BMediaAside,
|
||||
BMediaBody,
|
||||
BButton,
|
||||
BDropdown,
|
||||
BDropdownItem,
|
||||
|
||||
// Navbar Components
|
||||
DarkToggler,
|
||||
|
||||
@ -97,6 +97,38 @@ const router = new VueRouter({
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/wallet/delegations',
|
||||
name: 'delegations',
|
||||
component: () => import('@/views/WalletDelegations.vue'),
|
||||
meta: {
|
||||
pageTitle: 'My Delegations',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Wallet',
|
||||
},
|
||||
{
|
||||
text: 'My Delegations',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/wallet/helping',
|
||||
name: 'helping',
|
||||
component: () => import('@/views/WalletHelping.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Help Ping.pub',
|
||||
breadcrumb: [
|
||||
{
|
||||
text: 'Wallet',
|
||||
},
|
||||
{
|
||||
text: 'Help Ping.pub',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
// chain modules
|
||||
{
|
||||
path: '/:chain/',
|
||||
@ -129,7 +161,7 @@ const router = new VueRouter({
|
||||
},
|
||||
{
|
||||
path: '/:chain/uptime/my',
|
||||
name: 'uptime',
|
||||
name: 'myuptime',
|
||||
component: () => import('@/views/UptimeMyValidators.vue'),
|
||||
meta: {
|
||||
pageTitle: 'Uptime',
|
||||
|
||||
143
src/views/WalletDelegations.vue
Normal file
143
src/views/WalletDelegations.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card>
|
||||
<b-table
|
||||
:items="formatedDelegations(delegations)"
|
||||
stacked="sm"
|
||||
>
|
||||
|
||||
<template #cell(validator)="data">
|
||||
<router-link :to="`/${data.item.validator.chain}/staking/${data.item.validator.validator}`">
|
||||
<b-avatar
|
||||
:src="data.item.validator.logo"
|
||||
size="18"
|
||||
variant="light-primary"
|
||||
rounded=""
|
||||
/>
|
||||
{{ data.item.validator.moniker }}
|
||||
</router-link>
|
||||
</template>
|
||||
<template #cell(action)="data">
|
||||
<!-- size -->
|
||||
<b-button-group
|
||||
size="sm"
|
||||
>
|
||||
<b-button
|
||||
v-b-modal.delegate-window
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
v-b-tooltip.hover.top="'Delegate'"
|
||||
variant="outline-primary"
|
||||
@click="selectValue(data.value)"
|
||||
>
|
||||
<feather-icon icon="LogInIcon" />
|
||||
</b-button>
|
||||
<b-button
|
||||
v-b-modal.redelegate-window
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
v-b-tooltip.hover.top="'Redelegate'"
|
||||
variant="outline-primary"
|
||||
@click="selectValue(data.value)"
|
||||
>
|
||||
<feather-icon icon="ShuffleIcon" />
|
||||
</b-button>
|
||||
<b-button
|
||||
v-b-modal.unbond-window
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
v-b-tooltip.hover.top="'Unbond'"
|
||||
variant="outline-primary"
|
||||
@click="selectValue(data.value)"
|
||||
>
|
||||
<feather-icon icon="LogOutIcon" />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BButton, VBTooltip, BTable, BCard, BButtonGroup, BAvatar,
|
||||
} from 'bootstrap-vue'
|
||||
import Ripple from 'vue-ripple-directive'
|
||||
import {
|
||||
formatToken, getCachedValidators, getLocalAccounts, getLocalChains,
|
||||
} from '@/libs/data'
|
||||
import FeatherIcon from '@/@core/components/feather-icon/FeatherIcon.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BAvatar,
|
||||
BButton,
|
||||
BButtonGroup,
|
||||
BTable,
|
||||
BCard,
|
||||
FeatherIcon,
|
||||
},
|
||||
directives: {
|
||||
'b-tooltip': VBTooltip,
|
||||
Ripple,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
accounts: [],
|
||||
delegations: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
selectValue(v) {
|
||||
return v
|
||||
},
|
||||
formatedDelegations(v) {
|
||||
// console.log('v', v)
|
||||
return v.map(x => ({
|
||||
validator: {
|
||||
logo: x.chain.logo,
|
||||
validator: x.delegation.validator_address,
|
||||
moniker: this.findMoniker(x.chain.chain_name, x.delegation.validator_address),
|
||||
chain: x.chain.chain_name,
|
||||
},
|
||||
delegator: x.keyname,
|
||||
delegation: formatToken(x.balance),
|
||||
// action: '',
|
||||
}))
|
||||
},
|
||||
findMoniker(chain, addr) {
|
||||
const vals = JSON.parse(getCachedValidators(chain))
|
||||
const val = vals.find(x => x.operator_address === addr)
|
||||
if (val) {
|
||||
return val.description.moniker
|
||||
}
|
||||
return addr
|
||||
},
|
||||
init() {
|
||||
this.accounts = getLocalAccounts()
|
||||
const chains = getLocalChains()
|
||||
if (this.accounts) {
|
||||
Object.keys(this.accounts).forEach(acc => {
|
||||
this.accounts[acc].address.forEach(add => {
|
||||
this.$http.getStakingDelegations(add.addr, chains[add.chain]).then(res => {
|
||||
if (res.delegation_responses && res.delegation_responses.length > 0) {
|
||||
const delegation = res.delegation_responses.map(x => {
|
||||
const x2 = x
|
||||
x2.keyname = acc
|
||||
x2.chain = chains[add.chain]
|
||||
return x2
|
||||
})
|
||||
this.delegations = this.delegations.concat(delegation)
|
||||
}
|
||||
}).catch(() => {})
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
59
src/views/WalletHelping.vue
Normal file
59
src/views/WalletHelping.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-table
|
||||
:items="deleTable"
|
||||
stacked="sm"
|
||||
>
|
||||
<template #cell(action)="data">
|
||||
<!-- size -->
|
||||
<b-button-group
|
||||
size="sm"
|
||||
>
|
||||
<b-button
|
||||
v-b-modal.delegate-window
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
v-b-tooltip.hover.top="'Delegate'"
|
||||
variant="outline-primary"
|
||||
@click="selectValue(data.value)"
|
||||
>
|
||||
<feather-icon icon="LogInIcon" />
|
||||
</b-button>
|
||||
<b-button
|
||||
v-b-modal.redelegate-window
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
v-b-tooltip.hover.top="'Redelegate'"
|
||||
variant="outline-primary"
|
||||
@click="selectValue(data.value)"
|
||||
>
|
||||
<feather-icon icon="ShuffleIcon" />
|
||||
</b-button>
|
||||
<b-button
|
||||
v-b-modal.unbond-window
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
v-b-tooltip.hover.top="'Unbond'"
|
||||
variant="outline-primary"
|
||||
@click="selectValue(data.value)"
|
||||
>
|
||||
<feather-icon icon="LogOutIcon" />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</template>
|
||||
</b-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BButton, VBTooltip, BTable,
|
||||
} from 'bootstrap-vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BButton,
|
||||
BTable,
|
||||
},
|
||||
directives: {
|
||||
'b-tooltip': VBTooltip,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user