Skip to content

Commit

Permalink
update: display validator and amount (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ninhxuanhuan
ninhxuanhuan authored Nov 7, 2024
1 parent e28be0c commit 00d8683
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 181 deletions.
154 changes: 37 additions & 117 deletions lib/components/TxDialog/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ async function initData() {
metadatas.value = {};
view.value = 'input';
p.value = JSON.parse(props.params || '{}');
memo.value = props.type?.toLowerCase() === 'send' ? '' : 'Oraichain';
memo.value = props.type?.toLowerCase() === 'send' ? '' : 'scanium.io';
feeAmount.value = Number(p.value?.fees?.amount || 2000);
try {
Expand Down Expand Up @@ -316,26 +316,12 @@ function fetchTx(tx: string) {
<template>
<div class="text-gray-600">
<!-- Put this part before </body> tag -->
<input
v-model="open"
type="checkbox"
:id="type"
class="modal-toggle"
@change="initData()"
/>
<input v-model="open" type="checkbox" :id="type" class="modal-toggle" @change="initData()" />
<label :for="type" class="modal cursor-pointer">
<label
class="modal-box relative p-5"
:class="{
<label class="modal-box relative p-5" :class="{
'!w-11/12 !max-w-5xl': String(type).startsWith('wasm'),
}"
for=""
>
<label
:for="type"
class="btn btn-sm btn-circle absolute right-4 top-4"
>✕</label
>
}" for="">
<label :for="type" class="btn btn-sm btn-circle absolute right-4 top-4">✕</label>
<h3 class="text-lg font-bold capitalize dark:text-gray-300">
{{ showTitle() }}
</h3>
Expand All @@ -346,34 +332,19 @@ function fetchTx(tx: string) {

<div v-if="sender">
<div v-if="view === 'input'">
<component
:is="msgType"
ref="msgBox"
:endpoint="endpoint"
:sender="sender"
:balances="balance"
:metadata="metadatas"
:params="props.params"
/>
<component :is="msgType" ref="msgBox" :endpoint="endpoint" :sender="sender" :balances="balance"
:metadata="metadatas" :params="props.params" />
<form class="space-y-6" action="#" method="POST">
<div :class="advance ? '' : 'hidden'">
<div class="form-control">
<label class="label">
<span class="label-text">Fees</span>
</label>
<label
class="input-group flex items-center"
>
<input
v-model="feeAmount"
type="text"
placeholder="0.001"
class="input border border-gray-300 dark:border-gray-600 flex-1 w-0 dark:text-gray-300"
/>
<select
v-model="feeDenom"
class="select input border border-gray-300 dark:border-gray-600 w-[200px]"
>
<label class="input-group flex items-center">
<input v-model="feeAmount" type="text" placeholder="0.001"
class="input border border-gray-300 dark:border-gray-600 flex-1 w-0 dark:text-gray-300" />
<select v-model="feeDenom"
class="select input border border-gray-300 dark:border-gray-600 w-[200px]">
<option disabled selected>
Select Fee Token
</option>
Expand All @@ -387,123 +358,72 @@ function fetchTx(tx: string) {
<label class="label">
<span class="label-text">Gas</span>
</label>
<input
v-model="gasInfo"
type="number"
placeholder="2000000"
class="input border border-gray-300 dark:border-gray-600 dark:text-gray-300"
/>
<input v-model="gasInfo" type="number" placeholder="2000000"
class="input border border-gray-300 dark:border-gray-600 dark:text-gray-300" />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Memo</span>
</label>
<input
v-model="memo"
type="text"
placeholder="Memo"
class="input border border-gray-300 dark:border-gray-600 dark:text-gray-300"
/>
<input v-model="memo" type="text" placeholder="Memo"
class="input border border-gray-300 dark:border-gray-600 dark:text-gray-300" />
</div>
</div>
</form>

<div
v-show="error"
class="mt-5 alert alert-error shadow-lg"
@click="error = ''"
>
<div v-show="error" class="mt-5 alert alert-error shadow-lg" @click="error = ''">
<div class="flex">
<svg
xmlns="http://www.w3.org/2000/svg"
class="stroke-current flex-shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6"
fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{{ error }}.</span>
</div>
</div>

<div
class="modal-action flex justify-between items-center"
>
<div class="modal-action flex justify-between items-center">
<div class="flex items-center cursor-pointer">
<input
v-model="advance"
type="checkbox"
:id="`${type}-advance`"
class="checkbox checkbox-sm checkbox-primary mr-2"
/><label
:for="`${type}-advance`"
class="cursor-pointer dark:text-gray-400"
>Advance</label
>
<input v-model="advance" type="checkbox" :id="`${type}-advance`"
class="checkbox checkbox-sm checkbox-primary mr-2" /><label :for="`${type}-advance`"
class="cursor-pointer dark:text-gray-400">Advance</label>
</div>
<button
class="btn btn-primary"
@click="sendTx()"
:disabled="sending"
>
<span
v-if="sending"
class="loading loading-spinner"
></span>
<button class="btn btn-primary" @click="sendTx()" :disabled="sending">
<span v-if="sending" class="loading loading-spinner"></span>
Send
</button>
</div>
</div>

<div v-if="view === 'submitting'">
<div class="my-10">
<div
v-if="error"
class="my-5 text-center text-red-500"
>
<div v-if="error" class="my-5 text-center text-red-500">
{{ error }}
</div>
<div
v-else
class="my-5 text-center text-lg text-green-500"
>
<div v-else class="my-5 text-center text-lg text-green-500">
{{ msg }}
</div>
<div
class="overflow-hidden h-5 mb-2 text-xs flex rounded bg-green-100"
>
<div
:style="`width: ${step}%`"
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-400"
></div>
<div class="overflow-hidden h-5 mb-2 text-xs flex rounded bg-green-100">
<div :style="`width: ${step}%`"
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-400">
</div>
</div>
<div class="flex items-center justify-between">
<div>
<span
class="text-xs font-semibold inline-block py-1 px-2 rounded text-gray-600 dark:text-white"
>
class="text-xs font-semibold inline-block py-1 px-2 rounded text-gray-600 dark:text-white">
Submitted
</span>
</div>
<div class="text-right">
<span
class="text-xs font-semibold inline-block text-gray-600 dark:text-white"
>
<span class="text-xs font-semibold inline-block text-gray-600 dark:text-white">
{{ step }}%
</span>
</div>
</div>
</div>
<label
class="mt-10 flex justify-center text-sm"
@click="viewTransaction"
>
<span>View Transaction</span>
<label class="mt-10 flex justify-center text-sm btn" @click="viewTransaction">
<span class="text-white">View Transaction</span>
</label>
</div>
</div>
Expand Down
42 changes: 17 additions & 25 deletions lib/components/TxDialog/messages/Delegate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,28 +130,22 @@ defineExpose({ msgs, isValid, initial });
<label class="label">
<span class="label-text">Sender</span>
</label>
<input
:value="sender"
type="text"
class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600"
/>
<input :value="sender" type="text"
class="text-gray-600 dark:text-white input border !border-gray-300 dark:!border-gray-600" />
</div>
<div class="form-control">
<label class="label">
<span class="label-text">Validator</span>
<a class="label-text" @click="loadInactiveValidators()"
>Show Inactive</a
>
<a class="label-text" @click="loadInactiveValidators()">Show Inactive</a>
</label>
<select v-model="validator" class="select select-bordered">
<select v-model="validator" class="select select-bordered text-white">
<option value="">Select a validator</option>
<option v-for="v in list" :value="v.operatorAddress">
{{ v.description.moniker }} ({{
decimal2percent(v.commission.commissionRates.rate)
{{ v.description.moniker }}
({{
Number(decimal2percent(v.commission.commissionRates.rate)) / 1e18
}}%)
<span v-if="v.status !== BondStatus.BOND_STATUS_BONDED"
>x</span
>
<span v-if="v.status !== BondStatus.BOND_STATUS_BONDED">x</span>
</option>
</select>
</div>
Expand All @@ -164,17 +158,15 @@ defineExpose({ msgs, isValid, initial });
</span>
</label>
<label class="join">
<input
v-model="amount"
type="number"
:placeholder="`Available: ${available?.display.amount}`"
class="input border border-gray-300 dark:border-gray-600 w-full join-item"
/>
<select
v-model="amountDenom"
class="select select-bordered join-item"
>
<option v-for="u in units">{{ u.denom }}</option>
<div class="w-full relative flex justify-center items-center">
<input v-model="amount" type="number" :placeholder="`Available: ${available?.display.amount}`"
class="input border border-gray-300 dark:border-gray-600 w-full join-item text-white" />
<button
class="absolute right-2 p-1 z-10 bg-[rgb(46,46,51)] text-white hover:bg-[hsl(222,6%,43%)] text-sm"
@click="amount = available?.display.amount">Max</button>
</div>
<select v-model="amountDenom" class="select select-bordered join-item text-white">
<option v-for="u in units" class="text-white">{{ u.denom }}</option>
</select>
</label>
</div>
Expand Down
Loading

0 comments on commit 00d8683

Please sign in to comment.