Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: push breakdown in modal and facto wrapper #79

Merged
merged 4 commits into from
May 1, 2024
Merged

refactor: push breakdown in modal and facto wrapper #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0beb3f5
refactor: push breakdown in modal and facto wrapper
alexiscolin Apr 22, 2024
154633c
chore: fix typo
alexiscolin Apr 22, 2024
9f497fc
Merge branch 'main' into refactor/popup
alexiscolin Apr 30, 2024
9f2bbbc
fix: addressOnly btn condition
alexiscolin Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 0 additions & 72 deletions src/components/common/ModalBox.vue
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletions src/components/common/ModalWrap.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading