feat: input border
This commit is contained in:
Alisa | Side.one
parent
2f93b4c10c
commit
f10e4983b4
@ -35,7 +35,7 @@
|
||||
"md-editor-v3": "^2.8.1",
|
||||
"numeral": "^2.0.6",
|
||||
"osmojs": "^14.0.0-rc.0",
|
||||
"ping-widget": "^0.0.28",
|
||||
"ping-widget": "^0.0.29",
|
||||
"pinia": "^2.0.28",
|
||||
"postcss": "^8.4.23",
|
||||
"qrcode": "^1.5.3",
|
||||
|
||||
@ -3,7 +3,7 @@ import {
|
||||
useBlockchain,
|
||||
useFormatter,
|
||||
useStakingStore,
|
||||
useTxDialog
|
||||
useTxDialog,
|
||||
} from '@/stores';
|
||||
import { select } from '@/components/dynamic/index';
|
||||
import type { PaginatedProposals } from '@/types';
|
||||
@ -45,55 +45,94 @@ const proposalInfo = ref();
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in proposals?.proposals" :key="index">
|
||||
<td class="px-4 w-20">
|
||||
<label for="proposal-detail-modal" class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item">
|
||||
#{{ item?.proposal_id }}</label>
|
||||
<label
|
||||
for="proposal-detail-modal"
|
||||
class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item"
|
||||
>
|
||||
#{{ item?.proposal_id }}</label
|
||||
>
|
||||
</td>
|
||||
<td class="w-full">
|
||||
<div>
|
||||
<RouterLink :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
class="text-main text-base mb-1 block hover:text-indigo-400 truncate">
|
||||
<RouterLink
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
|
||||
>
|
||||
{{ item?.content?.title }}
|
||||
</RouterLink>
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1">
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
|
||||
>
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-60">
|
||||
<ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
|
||||
<ProposalProcess
|
||||
:pool="staking.pool"
|
||||
:tally="item.final_tally_result"
|
||||
></ProposalProcess>
|
||||
</td>
|
||||
<td class="w-36">
|
||||
<div class="pl-4">
|
||||
<div class="flex items-center" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
<div
|
||||
class="flex items-center"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'text-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
: statusMap?.[item?.status] ===
|
||||
'REJECTED'
|
||||
? 'text-no'
|
||||
: 'text-info'
|
||||
">
|
||||
<div class="w-1 h-1 rounded-full mr-2" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="w-1 h-1 rounded-full mr-2"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'bg-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
: statusMap?.[item?.status] ===
|
||||
'REJECTED'
|
||||
? 'bg-no'
|
||||
: 'bg-info'
|
||||
"></div>
|
||||
"
|
||||
></div>
|
||||
<div class="text-xs">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
{{
|
||||
statusMap?.[item?.status] ||
|
||||
item?.status
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start">
|
||||
class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
|
||||
>
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td v-if="statusMap?.[item?.status] === 'VOTING'" class="w-40">
|
||||
<td
|
||||
v-if="statusMap?.[item?.status] === 'VOTING'"
|
||||
class="w-40"
|
||||
>
|
||||
<div class="">
|
||||
<label for="vote" class="btn btn-xs btn-primary rounded"
|
||||
@click="dialog.open('vote', { proposal_id: item?.proposal_id })">
|
||||
<span v-if="item?.voterStatus">{{ item?.voterStatus.replace("VOTE_OPTION_", "") }}</span>
|
||||
<label
|
||||
for="vote"
|
||||
class="btn btn-xs btn-primary rounded-sm"
|
||||
@click="
|
||||
dialog.open('vote', {
|
||||
proposal_id: item?.proposal_id,
|
||||
})
|
||||
"
|
||||
>
|
||||
<span v-if="item?.voterStatus">{{
|
||||
item?.voterStatus.replace(
|
||||
'VOTE_OPTION_',
|
||||
''
|
||||
)
|
||||
}}</span>
|
||||
<span v-else>Vote</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -103,56 +142,99 @@ const proposalInfo = ref();
|
||||
</table>
|
||||
|
||||
<div class="lg:!hidden">
|
||||
<div v-for="(item, index) in proposals?.proposals" :key="index" class="px-4 py-4">
|
||||
<div class="text-main text-base mb-1 flex justify-between hover:text-indigo-400">
|
||||
<RouterLink :to="`/${chain.chainName}/gov/${item?.proposal_id}`" class="flex-1 w-0 truncate mr-4">{{
|
||||
item?.content?.title }}</RouterLink>
|
||||
<label for="proposal-detail-modal" class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item">
|
||||
#{{ item?.proposal_id }}</label>
|
||||
<div
|
||||
v-for="(item, index) in proposals?.proposals"
|
||||
:key="index"
|
||||
class="px-4 py-4"
|
||||
>
|
||||
<div
|
||||
class="text-main text-base mb-1 flex justify-between hover:text-indigo-400"
|
||||
>
|
||||
<RouterLink
|
||||
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
|
||||
class="flex-1 w-0 truncate mr-4"
|
||||
>{{ item?.content?.title }}</RouterLink
|
||||
>
|
||||
<label
|
||||
for="proposal-detail-modal"
|
||||
class="text-main text-base hover:text-indigo-400 cursor-pointer"
|
||||
@click="proposalInfo = item"
|
||||
>
|
||||
#{{ item?.proposal_id }}</label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 mt-2 mb-2">
|
||||
<div class="col-span-2">
|
||||
<div
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1">
|
||||
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
|
||||
>
|
||||
{{ showType(item.content['@type']) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
<div
|
||||
class="flex items-center"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'text-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'text-no'
|
||||
: 'text-info'
|
||||
">
|
||||
<div class="w-1 h-1 rounded-full mr-2" :class="statusMap?.[item?.status] === 'PASSED'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="w-1 h-1 rounded-full mr-2"
|
||||
:class="
|
||||
statusMap?.[item?.status] === 'PASSED'
|
||||
? 'bg-yes'
|
||||
: statusMap?.[item?.status] === 'REJECTED'
|
||||
? 'bg-no'
|
||||
: 'bg-info'
|
||||
"></div>
|
||||
"
|
||||
></div>
|
||||
<div class="text-xs flex items-center">
|
||||
{{ statusMap?.[item?.status] || item?.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end">
|
||||
<div
|
||||
class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
|
||||
>
|
||||
{{ format.toDay(item.voting_end_time, 'from') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ProposalProcess :pool="staking.pool" :tally="item.final_tally_result"></ProposalProcess>
|
||||
<ProposalProcess
|
||||
:pool="staking.pool"
|
||||
:tally="item.final_tally_result"
|
||||
></ProposalProcess>
|
||||
</div>
|
||||
|
||||
<div class="mt-4" v-if="statusMap?.[item?.status] === 'VOTING'">
|
||||
<div class="" v-show="item?.voterStatus === 'No With Veto'">
|
||||
<label for="vote" class="btn btn-xs btn-primary rounded"
|
||||
@click="dialog.open('vote', { proposal_id: item?.proposal_id })">Vote</label>
|
||||
<div class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
|
||||
:class="`text-${voterStatusMap?.[item?.voterStatus]}`"
|
||||
v-show="item?.voterStatus !== 'No With Veto'">
|
||||
<span class="inset-x-0 inset-y-0 opacity-10 absolute"
|
||||
:class="`bg-${voterStatusMap?.[item?.voterStatus]}`"></span>
|
||||
<label
|
||||
for="vote"
|
||||
class="btn btn-xs btn-primary rounded-sm"
|
||||
@click="
|
||||
dialog.open('vote', {
|
||||
proposal_id: item?.proposal_id,
|
||||
})
|
||||
"
|
||||
>Vote</label
|
||||
>
|
||||
<div
|
||||
class="text-xs truncate relative py-1 px-3 rounded-full w-fit"
|
||||
:class="`text-${
|
||||
voterStatusMap?.[item?.voterStatus]
|
||||
}`"
|
||||
v-show="item?.voterStatus !== 'No With Veto'"
|
||||
>
|
||||
<span
|
||||
class="inset-x-0 inset-y-0 opacity-10 absolute"
|
||||
:class="`bg-${
|
||||
voterStatusMap?.[item?.voterStatus]
|
||||
}`"
|
||||
></span>
|
||||
{{ item?.voterStatus }}
|
||||
</div>
|
||||
</div>
|
||||
@ -160,15 +242,30 @@ const proposalInfo = ref();
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
|
||||
<input
|
||||
type="checkbox"
|
||||
id="proposal-detail-modal"
|
||||
class="modal-toggle"
|
||||
/>
|
||||
<label for="proposal-detail-modal" class="modal">
|
||||
<label class="modal-box w-11/12 max-w-5xl" for="">
|
||||
<label for="proposal-detail-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
|
||||
<label
|
||||
for="proposal-detail-modal"
|
||||
class="btn btn-sm btn-circle absolute right-2 top-2"
|
||||
>✕</label
|
||||
>
|
||||
<h3 class="font-bold text-lg">Description</h3>
|
||||
<p class="py-4">
|
||||
<Component v-if="proposalInfo?.content?.description"
|
||||
:is="select(proposalInfo?.content?.description, 'horizontal')"
|
||||
:value="proposalInfo?.content?.description">
|
||||
<Component
|
||||
v-if="proposalInfo?.content?.description"
|
||||
:is="
|
||||
select(
|
||||
proposalInfo?.content?.description,
|
||||
'horizontal'
|
||||
)
|
||||
"
|
||||
:value="proposalInfo?.content?.description"
|
||||
>
|
||||
</Component>
|
||||
</p>
|
||||
</label>
|
||||
|
||||
@ -106,7 +106,9 @@ const loadAvatars = () => {
|
||||
if (identity && !avatars.value[identity]) {
|
||||
staking.keybase(identity).then((d) => {
|
||||
if (Array.isArray(d.them) && d.them.length > 0) {
|
||||
const uri = String(d.them[0]?.pictures?.primary?.url).replace(
|
||||
const uri = String(
|
||||
d.them[0]?.pictures?.primary?.url
|
||||
).replace(
|
||||
'https://s3.amazonaws.com/keybase_processed_uploads/',
|
||||
''
|
||||
);
|
||||
@ -154,7 +156,6 @@ const rank = function (position: number) {
|
||||
|
||||
fetchChange();
|
||||
loadAvatars();
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
@ -184,7 +185,12 @@ loadAvatars();
|
||||
<table class="table staking-table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="width: 3rem; position: relative">#</th>
|
||||
<th
|
||||
scope="col"
|
||||
style="width: 3rem; position: relative"
|
||||
>
|
||||
#
|
||||
</th>
|
||||
<th scope="col">VALIDATOR</th>
|
||||
<th scope="col" class="text-right">VOTING POWER</th>
|
||||
<th scope="col" class="text-right">24h CHANGES</th>
|
||||
@ -226,7 +232,11 @@ loadAvatars();
|
||||
<div class="w-8 h-8 rounded-full">
|
||||
<img
|
||||
v-if="v.description?.identity"
|
||||
v-lazy="logo(v.description?.identity)"
|
||||
v-lazy="
|
||||
logo(
|
||||
v.description?.identity
|
||||
)
|
||||
"
|
||||
class="object-contain"
|
||||
/>
|
||||
<Icon
|
||||
@ -242,7 +252,10 @@ loadAvatars();
|
||||
<RouterLink
|
||||
:to="{
|
||||
name: 'chain-staking-validator',
|
||||
params: { validator: v.operator_address },
|
||||
params: {
|
||||
validator:
|
||||
v.operator_address,
|
||||
},
|
||||
}"
|
||||
class="font-weight-medium user-list-name"
|
||||
>
|
||||
@ -250,7 +263,9 @@ loadAvatars();
|
||||
</RouterLink>
|
||||
</h6>
|
||||
<span class="text-xs">{{
|
||||
v.description?.website || v.description?.identity || '-'
|
||||
v.description?.website ||
|
||||
v.description?.identity ||
|
||||
'-'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -263,8 +278,11 @@ loadAvatars();
|
||||
{{
|
||||
format.formatToken(
|
||||
{
|
||||
amount: parseInt(v.tokens).toString(),
|
||||
denom: staking.params.bond_denom,
|
||||
amount: parseInt(
|
||||
v.tokens
|
||||
).toString(),
|
||||
denom: staking.params
|
||||
.bond_denom,
|
||||
},
|
||||
true,
|
||||
'0,0'
|
||||
@ -296,7 +314,10 @@ loadAvatars();
|
||||
</td>
|
||||
<!-- 👉 Action -->
|
||||
<td class="text-center">
|
||||
<div v-if="v.jailed" class="badge badge-error gap-2 text-white">
|
||||
<div
|
||||
v-if="v.jailed"
|
||||
class="badge badge-error gap-2 text-white"
|
||||
>
|
||||
Jailed
|
||||
</div>
|
||||
<label
|
||||
@ -305,11 +326,12 @@ loadAvatars();
|
||||
class="btn btn-xs btn-primary rounded-sm capitalize"
|
||||
@click="
|
||||
dialog.open('delegate', {
|
||||
validator_address: v.operator_address,
|
||||
validator_address:
|
||||
v.operator_address,
|
||||
})
|
||||
"
|
||||
>Delegate</label>
|
||||
|
||||
>Delegate</label
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -321,7 +343,9 @@ loadAvatars();
|
||||
<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>
|
||||
<span
|
||||
class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
|
||||
></span>
|
||||
Top 33%
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -5476,10 +5476,10 @@ pify@^3.0.0:
|
||||
resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz"
|
||||
integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
|
||||
|
||||
ping-widget@^0.0.28:
|
||||
version "0.0.28"
|
||||
resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.28.tgz#f232284556c3527e874b8d410f5e7fede8845c11"
|
||||
integrity sha512-iCitfqYSfT/BqP83UpMr9qQrd/ukwMfJDVtIaupj9e5l+BhSc9XHhzg5URpH4wRlNvhr3jqmAVuq0KZASX6Hsw==
|
||||
ping-widget@^0.0.29:
|
||||
version "0.0.29"
|
||||
resolved "https://registry.yarnpkg.com/ping-widget/-/ping-widget-0.0.29.tgz#c1b251e381677360c517fc71a9f3b78b1444c417"
|
||||
integrity sha512-gqKQuqPpo1cKkqE4EOlVleW9LKefjwtYr7nl/uQdiLjwAlRvJt7dA5fddfyEQaTk1CrdARS9aj+VrHiZx+SxkA==
|
||||
dependencies:
|
||||
"@cosmjs/amino" "^0.30.1"
|
||||
"@cosmjs/cosmwasm-stargate" "^0.30.1"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user