cosmos-explorer/src/views/StakingAddressComponent.vue
2021-08-03 00:13:53 +08:00

145 lines
2.7 KiB
Vue

<template>
<b-card
title="Address"
class="align-items-stretch "
>
<!-- address media -->
<b-media
class="mb-1"
no-body
>
<b-media-aside class="mr-1">
<b-avatar
rounded
variant="light-primary"
size="34"
>
<feather-icon
icon="UserIcon"
size="18"
/>
</b-avatar>
</b-media-aside>
<b-media-body>
<h6 class="mb-0">
Account Address
</h6>
<small>{{ accountAddress }}</small>
</b-media-body>
</b-media>
<b-media
class="mb-1"
no-body
>
<b-media-aside class="mr-1">
<b-avatar
rounded
variant="light-primary"
size="34"
>
<feather-icon
icon="Link2Icon"
size="18"
/>
</b-avatar>
</b-media-aside>
<b-media-body>
<h6 class="mb-0">
Validator Address
</h6>
<small>{{ operatorAddress }}</small>
</b-media-body>
</b-media>
<b-media
class="mb-1"
no-body
>
<b-media-aside class="mr-1">
<b-avatar
rounded
variant="light-primary"
size="34"
>
<feather-icon
icon="KeyIcon"
size="18"
/>
</b-avatar>
</b-media-aside>
<b-media-body>
<h6 class="mb-0">
Consensus Public Address
</h6>
<small>{{ consensusPubkey }}</small>
</b-media-body>
</b-media>
<b-media
class="mb-1"
no-body
>
<b-media-aside class="mr-1">
<b-avatar
rounded
variant="light-primary"
size="34"
>
<feather-icon
icon="HashIcon"
size="18"
/>
</b-avatar>
</b-media-aside>
<b-media-body>
<h6 class="mb-0">
Hex Address
</h6>
<small>{{ hexAddress }}</small>
</b-media-body>
</b-media>
</b-card>
</template>
<script>
import {
BCard, BAvatar, BMedia, BMediaAside, BMediaBody, VBTooltip,
} from 'bootstrap-vue'
export default {
components: {
BCard,
BAvatar,
BMedia,
BMediaAside,
BMediaBody,
},
directives: {
'b-tooltip': VBTooltip,
},
props: {
operatorAddress: {
type: String,
default: '-',
},
accountAddress: {
type: String,
default: '-',
},
consensusPubkey: {
type: [Object, String],
required: true,
},
hexAddress: {
type: String,
default: '-',
},
},
}
</script>
<style scoped>
.media small {
white-space:nowrap;
overflow: hidden;
}
</style>