Skip to content

Commit

Permalink
refactor: push breakdown in modal and facto wrapper (#79)
Browse files Browse the repository at this point in the history 
* refactor: push breakdown in modal and facto wrapper

* chore: fix typo

* fix: addressOnly btn condition
  • Loading branch information
@alexiscolin
alexiscolin authored May 1, 2024
1 parent 054a0dc commit 9c30c8c
Show file tree
Hide file tree
Showing 6 changed files with 305 additions and 348 deletions.
72 changes: 0 additions & 72 deletions src/components/common/ModalBox.vue
View file

This file was deleted.

6 changes: 2 additions & 4 deletions src/components/common/ModalWrap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,8 @@ const tl = (dir = true, cb: () => void) => {
<Transition :css="false" @enter="(_, done) => tl(true, done)" @leave="(_, done) => tl(false, done)">
<div v-show="props.visible" ref="frame" class="fixed z-max origin-center w-screen h-screen top-0 left-0">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div class="bg-grey-400 w-full rounded-md max-h-screen overflow-auto">
<div ref="content" class="opacity-0">
<slot></slot>
</div>
<div ref="content" class="opacity-0">
<slot></slot>
</div>
</div>
</div>
Expand Down
20 changes: 20 additions & 0 deletions src/components/popups/PopupBox.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script setup lang="ts">
import ModalWrap from "@/components/common/ModalWrap.vue";
const props = defineProps<{ title?: string }>();
const visible = defineModel<boolean>();
const emits = defineEmits<{ (e: "close"): void }>();
</script>
<template>
<ModalWrap :visible="visible" :is-empty="true" @back="emits('close')">
<div class="bg-grey-200 w-[90vw] md:max-w-[75vw] rounded-md">
<div class="flex flex-row w-full bg-grey-400 p-6 rounded-tl-md rounded-tr-md justify-between items-center">
<span>{{ props.title ?? "Popup" }}</span>
<Icon icon="close" class="text-400 hover:opacity-50 cursor-pointer" @click="emits('close')" />
</div>
<div ref="content" class="max-h-[75vh] overflow-y-auto w-full overflow-x-hidden">
<slot></slot>
</div>
</div>
</ModalWrap>
</template>
182 changes: 93 additions & 89 deletions src/components/popups/ProposalDeposit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,117 +104,121 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
</div>

<ModalWrap :visible="isOpen" :is-empty="true" @back="isOpen = false">
<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.ProposalDeposit.cta")
}}</span>
<div class="flex flex-col gap-10">
<div>
<div class="flex flex-col gap-10">
<p class="text-grey-100 text-center text-200">
{{ formatAmount(totalDeposit, depositDenomDecimals) }} /
{{ formatAmount(minDeposit, depositDenomDecimals) }} {{ $t("components.ProposalDeposit.act") }}
</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"
/>
</form>
<div class="bg-grey-400 w-full rounded-md max-h-screen overflow-auto">
<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.ProposalDeposit.cta")
}}</span>
<div class="flex flex-col gap-10">
<div>
<div class="flex flex-col gap-10">
<p class="text-grey-100 text-center text-200">
{{ formatAmount(totalDeposit, depositDenomDecimals) }} /
{{ formatAmount(minDeposit, depositDenomDecimals) }} {{ $t("components.ProposalDeposit.act") }}
</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"
/>
</form>
</div>
</div>
</div>

<div 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)"
>
{{ $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"
>
{{ $t("ui.actions.signTxSecurely") }}
</a>
<div 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)"
>
{{ $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"
>
{{ $t("ui.actions.signTxSecurely") }}
</a>
<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="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="signDeposit()"
v-if="used != Wallets.addressOnly"
@click="toggleModal(false)"
>
{{ $t("ui.actions.confirm") }}
{{ $t("ui.actions.cancel") }}
</button>
</div>
</div>
</div>
<div v-show="displayState === 'CLI'" class="flex flex-col gap-10">
<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 class="text-grey-100">{{ $t("ui.actions.clicta") }}</span>
</div>
<div class="relative">
<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)"
v-if="isClipboardSupported"
class="absolute top-4 right-4 text-200 hover:text-grey-50 duration-200"
@click="copy(cliDepositInput)"
>
{{ $t("ui.actions.cancel") }}
<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>
</div>
</div>
</div>
<div v-show="displayState === 'CLI'" class="flex flex-col gap-10">
<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 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)"
>
<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>
<div class="flex gap-x-4 items-stretch">
<CommonButton class="w-full" @click="() => (displayState = 'pending')">{{
$t("ui.actions.back")
}}</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)"
>
{{ $t("ui.actions.done") }}
</button>
</div>
</div>
<div v-show="displayState === 'deposited'">
<UiInfo :title="$t('components.ProposalDeposit.deposited')">
<div class="text-500 text-center font-semibold mb-8 w-full">
{{ depositAmount }} {{ depositDenomDisplay }}
</div>
</UiInfo>
<div class="flex gap-x-4 items-stretch">
<CommonButton class="w-full" @click="() => (displayState = 'pending')">{{
$t("ui.actions.back")
}}</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"
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)"
>
{{ $t("ui.actions.done") }}
</button>
</div>
</div>
<div v-show="displayState === 'deposited'">
<UiInfo :title="$t('components.ProposalDeposit.deposited')">
<div class="text-500 text-center font-semibold mb-8 w-full">
{{ depositAmount }} {{ depositDenomDisplay }}
</div>
</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)"
>
{{ $t("ui.actions.done") }}
</button>
</div>
</div>
</ModalWrap>
</div>
Expand Down
Loading

0 comments on commit 9c30c8c

Please sign in to comment.