cerc-io/cosmos-explorer
10
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: staking page UI refactor

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-10 13:15:12 +08:00
parent 270c8f5093
commit 7a494e7b59
2 changed files with 124 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/modules/[chain]/ibc/[connection_id].vue
View File

@ -136,7 +136,16 @@ function color(v: string) {
<td>{{ v.version }}</td> <td>{{ v.version }}</td>
<td>{{ v.ordering }}</td> <td>{{ v.ordering }}</td>
<td> <td>
<VChip :color="color(v.state)">{{ v.state }}</VChip> <div
class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
:class="`text-${color(v.state)}`"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute"
:class="`bg-${color(v.state)}`"
></span>
{{ v.state }}
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

212
src/modules/[chain]/staking/index.vue
View File

@ -163,112 +163,128 @@ const rank = function (position: number) {
{{ list.length }}/{{ staking.params.max_validators }} {{ list.length }}/{{ staking.params.max_validators }}
</div> </div>
</div> </div>
<div>
<VCard>
<VTable class="text-no-wrap table-header-bg rounded-0">
<thead>
<tr>
<th scope="col" style="width: 3rem">#</th>
<th scope="col">VALIDATOR</th>
<th scope="col" class="text-right">VOTING POWER</th>
<th scope="col" class="text-right">24h CHANGES</th>
<th scope="col" class="text-right">COMMISSION</th>
<th scope="col">ACTIONS</th>
</tr>
</thead>
<tbody>
<tr v-for="(v, i) in list" :key="v.operator_address">
<!-- 👉 rank -->
<td>
<VChip label :color="rank(i)">
{{ i + 1 }}
</VChip>
</td>
<!-- 👉 Validator --> <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<td> <div class="overflow-x-auto">
<div <table class="table w-full">
class="d-flex align-center overflow-hidden" <thead>
style="max-width: 400px" <tr>
> <th scope="col" style="width: 3rem;position: relative;">#</th>
<VAvatar <th scope="col">VALIDATOR</th>
variant="tonal" <th scope="col" class="text-right">VOTING POWER</th>
class="me-3" <th scope="col" class="text-right">24h CHANGES</th>
size="34" <th scope="col" class="text-right">COMMISSION</th>
icon="mdi-help-circle-outline" <th scope="col">ACTIONS</th>
:image="logo(v.description?.identity)" </tr>
/> </thead>
<div class="d-flex flex-column"> <tbody>
<h6 class="text-sm text-primary"> <tr v-for="(v, i) in list" :key="v.operator_address">
<RouterLink <!-- 👉 rank -->
:to="{ <td>
name: 'chain-staking-validator', <VChip label :color="rank(i)">
params: { validator: v.operator_address }, {{ i + 1 }}
}" </VChip>
class="font-weight-medium user-list-name" </td>
>
{{ v.description?.moniker }}
</RouterLink>
</h6>
<span class="text-xs">{{
v.description?.website || v.description?.identity || '-'
}}</span>
</div>
</div>
</td>
<!-- 👉 Voting Power --> <!-- 👉 Validator -->
<td class="text-right"> <td>
<div
class="d-flex align-center overflow-hidden"
style="max-width: 400px"
>
<VAvatar
variant="tonal"
class="me-3"
size="34"
icon="mdi-help-circle-outline"
:image="logo(v.description?.identity)"
/>
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<h6 class="text-sm font-weight-medium"> <h6 class="text-sm text-primary">
{{ <RouterLink
format.formatToken( :to="{
{ name: 'chain-staking-validator',
amount: parseInt(v.tokens).toString(), params: { validator: v.operator_address },
denom: staking.params.bond_denom, }"
}, class="font-weight-medium user-list-name"
true, >
'0,0' {{ v.description?.moniker }}
) </RouterLink>
}}
</h6> </h6>
<span class="text-xs">{{ <span class="text-xs">{{
format.calculatePercent( v.description?.website || v.description?.identity || '-'
v.delegator_shares,
staking.totalPower
)
}}</span> }}</span>
</div> </div>
</td> </div>
<!-- 👉 24h Changes --> </td>
<td
class="text-right text-xs" <!-- 👉 Voting Power -->
:class="change24Color(v.consensus_pubkey)" <td class="text-right">
> <div class="d-flex flex-column">
{{ change24Text(v.consensus_pubkey) }} <h6 class="text-sm font-weight-medium">
<VChip label v-if="v.jailed" color="error">Jailed</VChip> {{
</td> format.formatToken(
<!-- 👉 commission --> {
<td class="text-right"> amount: parseInt(v.tokens).toString(),
{{ denom: staking.params.bond_denom,
format.formatCommissionRate( },
v.commission?.commission_rates?.rate true,
'0,0'
)
}}
</h6>
<span class="text-xs">{{
format.calculatePercent(
v.delegator_shares,
staking.totalPower
) )
}} }}</span>
</td> </div>
<!-- 👉 Action --> </td>
<td> <!-- 👉 24h Changes -->
{{ 2 }} <td
</td> class="text-right text-xs"
</tr> :class="change24Color(v.consensus_pubkey)"
</tbody> >
</VTable> {{ change24Text(v.consensus_pubkey) }}
<VDivider /> <VChip label v-if="v.jailed" color="error">Jailed</VChip>
<VCardActions class="py-2"> </td>
<VChip label color="error">Top 33%</VChip> <!-- 👉 commission -->
<VChip label color="warning" class="mx-2">Top 67%</VChip> <td class="text-right">
</VCardActions> {{
</VCard> format.formatCommissionRate(
v.commission?.commission_rates?.rate
)
}}
</td>
<!-- 👉 Action -->
<td>
{{ 2 }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<div class="flex flex-row">
<div
class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
></span>
Top 33%
</div>
<div
class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-warning"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-warning"
></span>
Top 67%
</div>
</div>
</div> </div>
</div> </div>
</template> </template>