Skip to content

Commit

Permalink
fix: popup display
Browse files Browse the repository at this point in the history
  • Loading branch information
@clockworkgr
clockworkgr committed Sep 22, 2024
1 parent fd91e95 commit 72c8270
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 125 deletions.
80 changes: 25 additions & 55 deletions src/components/popups/ProposalDeposit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const signDeposit = async (isCLI = false) => {
try {
transacting.value = true;
const depot = await depositProposal(depositOptions, isCLI);
if ((depot as DeliverTxResponse).code !== 0) {
if ((depot as DeliverTxResponse).code !== 0 && !isCLI) {
errorMsg.value = (depot as DeliverTxResponse).rawLog ?? toPlainObjectString(depot);
displayState.value = "error";
} else {
Expand All @@ -104,10 +104,8 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<template>
<div class="relative">
<div>
<div
class="justify-center px-6 py-4 rounded link-gradient text-dark text-300 text-center cursor-pointer"
@click="() => (logEvent('Click Popup ProposalDeposit'), toggleModal(true))"
>
<div class="justify-center px-6 py-4 rounded link-gradient text-dark text-300 text-center cursor-pointer"

Check failure on line 107 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Insert `⏎·······`

Check warning on line 107 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
@click="() => (logEvent('Click Popup ProposalDeposit'), toggleModal(true))">

Check failure on line 108 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Insert `⏎······`
{{ $t("components.ProposalDeposit.cta") }}
</div>
</div>
Expand All @@ -118,7 +116,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<div v-show="displayState === 'pending'" class="flex flex-col gap-6 relative">
<span class="text-gradient font-termina text-700 text-center">{{
$t("components.ProposalDeposit.cta")
}}</span>
}}</span>

Check failure on line 119 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Delete `··`
<div class="flex flex-col gap-10">
<div>
<div class="flex flex-col gap-10">
Expand All @@ -128,47 +126,33 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
</p>

<form class="flex flex-col items-center gap-2">
<UiInput
v-model="depositAmount"
type="number"
placeholder="e.g. 50"
:label="$t('components.ProposalDeposit.instructions')"
:min="0"
:max="Infinity"
class="w-full justify-end"
/>
<UiInput v-model="depositAmount" type="number" placeholder="e.g. 50"

Check failure on line 129 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Replace `·v-model="depositAmount"·type="number"` with `⏎······················v-model="depositAmount"⏎······················type="number"⏎·····················`

Check warning on line 129 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
:label="$t('components.ProposalDeposit.instructions')" :min="0" :max="Infinity"

Check failure on line 130 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Replace `·:min="0"` with `⏎······················:min="0"⏎·····················`
class="w-full justify-end" />

Check failure on line 131 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Insert `⏎···················`
</form>
</div>
</div>

<div v-if="!transacting" class="flex flex-col gap-4">
<div v-show="(depositAmount ?? -1) > 0" class="flex flex-col gap-4">
<button
class="px-6 py-4 rounded link-gradient text-dark text-300 text-center w-full"
@click="signDeposit(true)"
>
<button class="px-6 py-4 rounded link-gradient text-dark text-300 text-center w-full"

Check failure on line 138 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Insert `⏎···················`

Check warning on line 138 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
@click="signDeposit(true)">

Check failure on line 139 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Insert `⏎··················`
{{ $t("ui.actions.cli") }}
</button>
<a
href="https://github.com/atomone-hub/govgen-proposals/blob/main/submit-tx-securely.md"
target="_blank"
class="text-center text-100 text-grey-100 underline"
>
<a href="https://github.com/atomone-hub/govgen-proposals/blob/main/submit-tx-securely.md"

Check failure on line 142 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Insert `⏎···················`

Check warning on line 142 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
target="_blank" class="text-center text-100 text-grey-100 underline">

Check failure on line 143 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Replace `·class="text-center·text-100·text-grey-100·underline"` with `⏎····················class="text-center·text-100·text-grey-100·underline"⏎··················`
{{ $t("ui.actions.signTxSecurely") }}
</a>
<button
v-if="used != Wallets.addressOnly"
<button v-if="used != Wallets.addressOnly"

Check warning on line 146 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
@click="signDeposit()"
>
@click="signDeposit()">
{{ $t("ui.actions.confirm") }}
</button>
</div>
<button
class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.cancel") }}
</button>
</div>
Expand All @@ -184,37 +168,29 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<div class="flex flex-col items-center gap-4">
<span class="text-gradient font-termina text-700 text-center">{{
$t("components.ProposalVote.cta")
}}</span>
}}</span>
<span class="text-grey-100">{{ $t("ui.actions.clicta") }}</span>
</div>
<div class="relative">
<button
v-if="isClipboardSupported"
class="absolute top-4 right-4 text-200 hover:text-grey-50 duration-200"
@click="copy(cliDepositInput)"
>
<button v-if="isClipboardSupported"

Check warning on line 176 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
class="absolute top-4 right-4 text-200 hover:text-grey-50 duration-200" @click="copy(cliDepositInput)">
<span v-show="copied">{{ $t("uit.actions.copied") }}</span>
<span v-show="!copied" class="flex gap-1">
<Icon icon="copy" /><span>{{ $t("ui.actions.copy") }}</span>
</span>
</button>
<textarea
ref="CLIVote"
v-model="cliDepositInput"
readonly
class="w-full h-64 px-4 pb-4 pt-12 bg-grey-200 text-grey-50 rounded outline-none resize-none"
></textarea>
<textarea ref="CLIVote" v-model="cliDepositInput" readonly

Check warning on line 183 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
class="w-full h-64 px-4 pb-4 pt-12 bg-grey-200 text-grey-50 rounded outline-none resize-none"></textarea>
</div>
<div class="flex gap-x-4 items-stretch">
<CommonButton class="w-full" @click="() => (displayState = 'pending')">{{
$t("ui.actions.back")
}}</CommonButton>
}}</CommonButton>
<button
class="w-full text-light bg-grey-200 hover:bg-light hover:text-dark roudned transition-colors duration-200 rounded py-4 px-6"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.done") }}
</button>
</div>
Expand All @@ -228,25 +204,19 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<button
class="px-6 py-4 rounded text-light text-300 text-center bg-grey-200 w-full hover:opacity-50 duration-150 ease-in-out"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.done") }}
</button>
</div>
<div v-show="displayState === 'error'">
<UiInfo :title="$t('components.ProposalDeposit.error')" type="warning" :circled="true">
<textarea
ref="error"
v-model="errorMsg"
readonly
class="w-full h-32 my-4 px-4 pb-4 pt-4 bg-grey-200 text-grey-50 rounded outline-none resize-none"
></textarea>
<textarea ref="error" v-model="errorMsg" readonly

Check warning on line 213 in src/components/popups/ProposalDeposit.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
class="w-full h-32 my-4 px-4 pb-4 pt-4 bg-grey-200 text-grey-50 rounded outline-none resize-none"></textarea>
</UiInfo>
<button
class="px-6 py-4 rounded text-light text-300 text-center bg-grey-200 w-full hover:opacity-50 duration-150 ease-in-out"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.done") }}
</button>
</div>
Expand Down
98 changes: 28 additions & 70 deletions src/components/popups/ProposalVote.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const signVote = async (isCLI = false) => {
try {
transacting.value = true;
const vote = await (voteOptions && voteProposalFunc(voteOptions, isCLI));
if ((vote as DeliverTxResponse).code !== 0) {
if ((vote as DeliverTxResponse).code !== 0 && !isCLI) {
errorMsg.value = (vote as DeliverTxResponse).rawLog ?? toPlainObjectString(vote);
displayState.value = "error";
} else {
Expand All @@ -148,10 +148,8 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<template>
<div class="relative">
<div>
<div
class="justify-center px-6 py-4 rounded link-gradient hover: text-dark text-300 text-center cursor-pointer"
@click="() => (logEvent('Click Popup ProposalVote'), toggleModal(true))"
>
<div class="justify-center px-6 py-4 rounded link-gradient hover: text-dark text-300 text-center cursor-pointer"

Check warning on line 151 in src/components/popups/ProposalVote.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
@click="() => (logEvent('Click Popup ProposalVote'), toggleModal(true))">
{{ $t("components.ProposalVote.cta") }}
</div>
</div>
Expand All @@ -161,26 +159,15 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<div class="px-10 py-12 bg-grey-400 rounded w-screen max-w-[25rem]">
<div v-show="displayState === 'pending'" class="flex flex-col gap-6 relative">
<span class="text-gradient font-termina text-700 text-center">{{ $t("components.ProposalVote.cta") }}</span>
<UiSwitch
id="voteType"
v-model="tab"
:options="tabOptions"
class="flex w-2/3 mx-auto"
@click="resetVote()"
/>
<UiSwitch id="voteType" v-model="tab" :options="tabOptions" class="flex w-2/3 mx-auto"

Check warning on line 162 in src/components/popups/ProposalVote.vue

View workflow job for this annotation

GitHub Actions / Linting 

Expected a linebreak before this attribute
@click="resetVote()" />
<div class="flex flex-col gap-10">
<div>
<Transition mode="out-in">
<div v-if="tab === 'Straight'" class="flex flex-col px-4">
<span v-for="(vote, name, id) in voteList" :key="id" class="w-full">
<UiState
v-if="vote"
v-model="voteStraight"
type="radio"
:value="name"
:label="`Vote “${vote.label.toLocaleUpperCase()}”`"
class="w-full"
/>
<UiState v-if="vote" v-model="voteStraight" type="radio" :value="name"
:label="`Vote “${vote.label.toLocaleUpperCase()}”`" class="w-full" />
</span>
</div>

Expand All @@ -191,17 +178,9 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();

<form class="flex flex-col items-center gap-2">
<span v-for="(vote, key, id) in voteWeighted" :key="id" class="w-full">
<UiInput
v-if="vote"
v-model="vote.value"
type="number"
placeholder="e.g. 0.25"
:label="`Votes “${voteList[key]?.label}”`"
variant="row"
:min="0"
:max="1"
class="w-full justify-end"
/>
<UiInput v-if="vote" v-model="vote.value" type="number" placeholder="e.g. 0.25"
:label="`Votes “${voteList[key]?.label}”`" variant="row" :min="0" :max="1"
class="w-full justify-end" />
</span>
</form>
</div>
Expand All @@ -210,32 +189,24 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<div v-if="!transacting" class="flex flex-col gap-4">
<div v-show="voteStraight || checkVoteWeighted" class="flex flex-col gap-4">
<button
class="px-6 py-4 rounded link-gradient text-dark text-300 text-center w-full"
@click="signVote(true)"
>
<button class="px-6 py-4 rounded link-gradient text-dark text-300 text-center w-full"
@click="signVote(true)">
{{ $t("ui.actions.cli") }}
</button>
<a
href="https://github.com/atomone-hub/govgen-proposals/blob/main/submit-tx-securely.md"
target="_blank"
class="text-center text-100 text-grey-100 underline"
>
<a href="https://github.com/atomone-hub/govgen-proposals/blob/main/submit-tx-securely.md"
target="_blank" class="text-center text-100 text-grey-100 underline">
{{ $t("ui.actions.signTxSecurely") }}
</a>
<button
v-if="used != Wallets.addressOnly"
<button v-if="used != Wallets.addressOnly"
class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
@click="signVote()"
>
@click="signVote()">
{{ $t("ui.actions.confirm") }}
</button>
</div>
<button
class="px-6 py-4 rounded text-light text-300 text-center w-full hover:opacity-50 duration-150 ease-in-out"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.cancel") }}
</button>
</div>
Expand All @@ -252,37 +223,30 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<div class="flex flex-col items-center gap-4">
<span class="text-gradient font-termina text-700 text-center">{{
$t("components.ProposalVote.cta")
}}</span>
}}</span>
<span class="text-grey-100">{{ $t("ui.actions.clicta") }}</span>
</div>
<div class="relative">
<button
v-if="isClipboardSupported"
<button v-if="isClipboardSupported"
class="absolute top-4 right-4 text-200 flex gap-1 hover:text-grey-50 duration-200"
@click="copy(cliVoteInput)"
>
@click="copy(cliVoteInput)">
<span v-show="copied">{{ $t("ui.actions.copied") }}</span>
<span v-show="!copied" class="flex gap-1">
<Icon icon="copy" /><span>{{ $t("ui.actions.copy") }}</span>
</span>
</button>
<textarea
ref="CLIVote"
v-model="cliVoteInput"
readonly
class="w-full h-64 px-4 pb-4 pt-12 bg-grey-200 text-grey-50 rounded outline-none resize-none"
></textarea>
<textarea ref="CLIVote" v-model="cliVoteInput" readonly
class="w-full h-64 px-4 pb-4 pt-12 bg-grey-200 text-grey-50 rounded outline-none resize-none"></textarea>
</div>
<div class="flex gap-x-4 items-stretch">
<CommonButton class="w-full" @click="() => (displayState = 'pending')">{{
$t("ui.actions.back")
}}</CommonButton>
}}</CommonButton>
<button
class="w-full text-light bg-grey-200 hover:bg-light hover:text-dark roudned transition-colors duration-200 rounded py-4 px-6"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.done") }}
</button>
</div>
Expand All @@ -304,26 +268,20 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
<button
class="px-6 py-4 rounded text-light text-300 text-center bg-grey-200 w-full hover:opacity-50 duration-150 ease-in-out"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.done") }}
</button>
</div>
<div v-show="displayState === 'error'">
<UiInfo :title="$t('components.ProposalVote.error')" type="warning" :circled="true">
<textarea
ref="error"
v-model="errorMsg"
readonly
class="w-full h-32 my-4 px-4 pb-4 pt-4 bg-grey-200 text-grey-50 rounded outline-none resize-none"
></textarea>
<textarea ref="error" v-model="errorMsg" readonly
class="w-full h-32 my-4 px-4 pb-4 pt-4 bg-grey-200 text-grey-50 rounded outline-none resize-none"></textarea>
</UiInfo>
<button
class="px-6 py-4 rounded text-light text-300 text-center bg-grey-200 w-full hover:opacity-50 duration-150 ease-in-out"
@click="toggleModal(false)"
>
@click="toggleModal(false)">
{{ $t("ui.actions.done") }}
</button>
</div>
Expand Down

0 comments on commit 72c8270

Please sign in to comment.