Skip to content

Commit

Permalink
feat: Loading states & display (#128)
Browse files Browse the repository at this point in the history 
* feat: better deposit popup state handling

* feat: better vote popup state loading

* fix: Display proposal messgaes in info

* chore: linting
  • Loading branch information
@clockworkgr
clockworkgr authored Sep 15, 2024
1 parent 96f3df1 commit a5ca532
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 22 deletions.
56 changes: 44 additions & 12 deletions src/components/popups/ProposalDeposit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import { useClipboard } from "@vueuse/core";
import { useProposals } from "@/composables/useProposals";
import { useTelemetry } from "@/composables/useTelemetry";
import { formatAmount } from "@/utility";
import { formatAmount, toPlainObjectString } from "@/utility";
import { DeliverTxResponse } from "@atomone/govgen-types/types";
interface Props {
proposalId?: number;
Expand All @@ -27,12 +28,12 @@ interface Props {
const props = defineProps<Props>();
const isOpen = ref(false);
const displayState = ref<"deposited" | "CLI" | "pending">("pending");
const displayState = ref<"deposited" | "CLI" | "pending" | "error">("pending");
const depositAmount = ref<number | null>(null);
const errorMsg = ref<string>("");
const cliDepositInput = ref("");
const transacting = ref<boolean>(false);
const depositDenomDecimals = computed(() => {
const currencies = chainConfig.currencies.filter((x) => x.coinMinimalDenom == props.depositDenom);
if (currencies.length <= 0) {
Expand Down Expand Up @@ -77,13 +78,21 @@ const signDeposit = async (isCLI = false) => {
},
],
};
const depot = await depositProposal(depositOptions, isCLI);
//TODO: handle error and get result from chain
cliDepositInput.value = (isCLI ? depot : "") as string;
displayState.value = isCLI ? "CLI" : "deposited";
try {
transacting.value = true;
const depot = await depositProposal(depositOptions, isCLI);
if ((depot as DeliverTxResponse).code !== 0) {
errorMsg.value = (depot as DeliverTxResponse).rawLog ?? toPlainObjectString(depot);
displayState.value = "error";
} else {
cliDepositInput.value = (isCLI ? depot : "") as string;
displayState.value = isCLI ? "CLI" : "deposited";
}
} catch (e) {
console.log(e);
errorMsg.value = "" + e;
displayState.value = "error";
}
logEvent("Sign Popup ProposalDeposit", {
signOption: isCLI ? "CLI" : "GUI",
});
Expand Down Expand Up @@ -132,7 +141,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
</div>
</div>

<div class="flex flex-col gap-4">
<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"
Expand Down Expand Up @@ -163,6 +172,12 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
{{ $t("ui.actions.cancel") }}
</button>
</div>

<div v-if="transacting" class="flex flex-col gap-4">
<div class="flex flex-col gap-4 items-center">
<Icon icon="loading" :size="2" />
</div>
</div>
</div>
</div>
<div v-show="displayState === 'CLI'" class="flex flex-col gap-10">
Expand Down Expand Up @@ -211,6 +226,23 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
</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 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>
</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)"
Expand Down
51 changes: 45 additions & 6 deletions src/components/popups/ProposalVote.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import { useWallet, Wallets } from "@/composables/useWallet";
import { useProposals } from "@/composables/useProposals";
import { useClipboard } from "@vueuse/core";
import { useTelemetry } from "@/composables/useTelemetry";
import { DeliverTxResponse } from "@atomone/govgen-types/types";
import { toPlainObjectString } from "@/utility";
interface Props {
proposalId?: number;
Expand All @@ -26,12 +28,14 @@ const props = defineProps<Props>();
const { t } = useI18n();
const isOpen = ref(false);
const displayState = ref<"voted" | "CLI" | "pending">("pending");
const displayState = ref<"voted" | "CLI" | "pending" | "error">("pending");
const tabOptions = reactive(["Straight", "Weighted"]);
const tab = ref(tabOptions[0]);
const errorMsg = ref<string>("");
const cliVoteInput = ref("");
const transacting = ref<boolean>(false);
// Votes info
const voteList: Partial<Record<VoteOption, { label: string; color: string }>> = {
Expand Down Expand Up @@ -118,11 +122,22 @@ const signVote = async (isCLI = false) => {
}
const voteProposalFunc = checkVoteWeighted.value ? voteWeightedProposal : voteProposal;
const vote = await (voteOptions && voteProposalFunc(voteOptions, isCLI));
//TODO: handle error and get result from chain
cliVoteInput.value = (isCLI ? vote : "") as string;
displayState.value = isCLI ? "CLI" : "voted";
try {
transacting.value = true;
const vote = await (voteOptions && voteProposalFunc(voteOptions, isCLI));
if ((vote as DeliverTxResponse).code !== 0) {
errorMsg.value = (vote as DeliverTxResponse).rawLog ?? toPlainObjectString(vote);
displayState.value = "error";
} else {
cliVoteInput.value = (isCLI ? vote : "") as string;
displayState.value = isCLI ? "CLI" : "voted";
}
} catch (e) {
console.log(e);
errorMsg.value = "" + e;
displayState.value = "error";
}
logEvent("Sign Popup ProposalVote", { signOption: isCLI ? "CLI" : "GUI" });
};
Expand Down Expand Up @@ -193,7 +208,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
</Transition>
</div>

<div class="flex flex-col gap-4">
<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"
Expand Down Expand Up @@ -224,6 +239,12 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
{{ $t("ui.actions.cancel") }}
</button>
</div>

<div v-if="transacting" class="flex flex-col gap-4">
<div class="flex flex-col gap-4 items-center">
<Icon icon="loading" :size="2" />
</div>
</div>
</div>
</div>

Expand Down Expand Up @@ -288,6 +309,24 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard();
{{ $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>
</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>
</div>
</ModalWrap>
Expand Down
6 changes: 3 additions & 3 deletions src/components/proposals/ProposalWrapper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -641,7 +641,7 @@ onMounted(() => (title.value = `GovGen — #${proposal.value?.proposal[0].id} ${
{{ $t("proposalpage.labels.messages") }}
</div>
<div
v-if="proposal?.proposal[0].content['@type'] == '/govgen.gov.v1beta1.TextProposal'"
v-if="proposal?.proposal[0].proposal_type == '/govgen.gov.v1beta1.TextProposal'"
class="flex w-full flex-wrap"
>
<div class="grow w-full md:w-1/2 mb-10">
Expand All @@ -662,7 +662,7 @@ onMounted(() => (title.value = `GovGen — #${proposal.value?.proposal[0].id} ${
</div>
</div>
<div
v-if="proposal?.proposal[0].content['@type'] == '/cosmos.params.v1beta1.ParameterChangeProposal'"
v-if="proposal?.proposal[0].proposal_type == '/cosmos.params.v1beta1.ParameterChangeProposal'"
class="flex w-full flex-wrap flex-col md:flex-row"
>
<div class="grow w-full md:w-1/2 mb-10 md:pr-3 pr-0">
Expand Down Expand Up @@ -693,7 +693,7 @@ onMounted(() => (title.value = `GovGen — #${proposal.value?.proposal[0].id} ${
</div>
</div>
<div
v-if="proposal?.proposal[0].content['@type'] == '/cosmos.upgrade.v1beta1.SoftwareUpgradeProposal'"
v-if="proposal?.proposal[0].proposal_type == '/cosmos.upgrade.v1beta1.SoftwareUpgradeProposal'"
class="flex w-full flex-wrap"
>
<div class="grow w-1/2 mb-10">
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/UiInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const isCircled = computed<boolean>(() => props.circled || props.type === "succe
<div class="text-center">
<div v-if="props.type !== 'content'" class="flex justify-center mb-8">
<div class="rounded-full flex justify-center p-4" :class="infoType">
<UiIcon :icon="ico" :size="isCircled ? 3.5 : 1" :gradient="type === 'warning'" />
<UiIcon :icon="ico" :size="isCircled ? 3.5 : 1" />
</div>
</div>
<h1 class="text-500 font-semibold">{{ title }}</h1>
Expand Down
2 changes: 2 additions & 0 deletions src/localization/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,12 +191,14 @@ export const messages = {
ProposalVote: {
cta: "Vote",
voted: "You voted",
error: "Error",
weightedInstructions: "Define weight for each of the voting options. The sum of weights must be equal to 1.",
},
ProposalDeposit: {
cta: "Deposit",
act: "deposited",
deposited: "You deposited",
error: "Error",
instructions: "Enter deposit amount",
},
VotePanel: {
Expand Down

0 comments on commit a5ca532

Please sign in to comment.