From cede194995cb2146c308510d9b32bb188c4320ae Mon Sep 17 00:00:00 2001 From: Sun Burnt Date: Wed, 20 Nov 2024 10:59:01 -0500 Subject: [PATCH 1/5] feat: properly display user vote value --- .../components/ProposalOverview.tsx | 4 +-- .../components/ProposalVoteWidget.tsx | 12 ++++++-- src/features/governance/lib/types.ts | 29 +++++++++++++++++-- 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/features/governance/components/ProposalOverview.tsx b/src/features/governance/components/ProposalOverview.tsx index 270a214..0f0f8a8 100644 --- a/src/features/governance/components/ProposalOverview.tsx +++ b/src/features/governance/components/ProposalOverview.tsx @@ -1,6 +1,6 @@ import React from "react"; -import type { VoteType } from "../lib/types"; +import type { VoteOptionType } from "../lib/types"; import { ProposalStatus } from "../lib/types"; import { formatProposalDate } from "../lib/utils"; import { ProposalStatusPill } from "./ProposalStatusPill"; @@ -15,7 +15,7 @@ interface ProposalOverviewProps { status: ProposalStatus; submittedDate: string; title: string; - voteValue: undefined | VoteType; + voteValue: undefined | VoteOptionType; yesPercentage: number; } diff --git a/src/features/governance/components/ProposalVoteWidget.tsx b/src/features/governance/components/ProposalVoteWidget.tsx index 1c16f46..99483e3 100644 --- a/src/features/governance/components/ProposalVoteWidget.tsx +++ b/src/features/governance/components/ProposalVoteWidget.tsx @@ -1,7 +1,11 @@ import React, { useEffect, useRef, useState } from "react"; import { useGovernanceTx } from "../context/hooks"; -import { VoteType } from "../lib/types"; +import { + type VoteOptionType, + VoteType, + getReadableVoteOption, +} from "../lib/types"; import ProposalVoteModal from "./ProposalVoteModal"; const VotePopover: React.FC<{ @@ -28,7 +32,7 @@ const VotePopover: React.FC<{ interface VoteWidgetProps { proposalId: string; - userVote: undefined | VoteType; + userVote: undefined | VoteOptionType; } export const VoteWidget: React.FC = ({ @@ -85,6 +89,8 @@ export const VoteWidget: React.FC = ({ voter: address!, }); + await new Promise((resolve) => setTimeout(resolve, 1000)); + setShowModal(false); } catch (error) { console.error("Error submitting vote:", error); @@ -95,7 +101,7 @@ export const VoteWidget: React.FC = ({ return (

- {userVote ? `You voted {voteValue}` : `Vote for`} + {userVote ? `You Voted ${getReadableVoteOption(userVote)}` : `Vote For`}

+ + + ); + + case Step.Submitting: + return ( + <> +
+
+ SUBMITTING +
+ + Please wait while your vote is being submitted... + +
+
+
+ +
+
+ Vote Type + {readableVoteType} +
+
- ) : ( + ); + + case Step.Completed: + return ( <>
@@ -102,8 +133,13 @@ const ProposalVoteModal: React.FC = ({
- )} -
+ ); + } + }; + + return ( + +
{renderContent()}
 ); }; diff --git a/src/features/governance/components/ProposalVoteWidget.tsx b/src/features/governance/components/ProposalVoteWidget.tsx index 682c079..24579b0 100644 --- a/src/features/governance/components/ProposalVoteWidget.tsx +++ b/src/features/governance/components/ProposalVoteWidget.tsx @@ -88,10 +88,9 @@ export const VoteWidget: React.FC = ({ proposalId, voter: address!, }); - - setShowModal(false); } catch (error) { console.error("Error submitting vote:", error); + throw error; } } }; diff --git a/src/features/governance/context/hooks.ts b/src/features/governance/context/hooks.ts index 2a29b77..d53d082 100644 --- a/src/features/governance/context/hooks.ts +++ b/src/features/governance/context/hooks.ts @@ -284,12 +284,15 @@ export const useGovernanceTx = () => { const address = account?.bech32Address; const voteMutation = useMutation({ - mutationFn: (params: ExecuteVoteParams) => - submitVote({ + mutationFn: async (params: ExecuteVoteParams) => { + const result = await submitVote({ ...params, client: client!, voter: address!, - }), + }); + + return result; + }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["vote"] }); queryClient.invalidateQueries({ queryKey: ["tally"] }); @@ -302,7 +305,7 @@ export const useGovernanceTx = () => { client: isConnected ? client : undefined, isConnected, isVoting: voteMutation.isLoading, - submitVote: voteMutation.mutate, + submitVote: voteMutation.mutateAsync, voteError: voteMutation.error, }; }; diff --git a/src/features/governance/lib/utils.ts b/src/features/governance/lib/utils.ts index fdb5fbb..71f43b6 100644 --- a/src/features/governance/lib/utils.ts +++ b/src/features/governance/lib/utils.ts @@ -99,7 +99,7 @@ export const getReadableVoteType = (voteType: VoteType): string => { case VoteType.No: return "No"; case VoteType.NoWithVeto: - return "No with veto"; + return "No With Veto"; case VoteType.Abstain: return "Abstain"; default: From 1ab26eff59267b350ae806c8c2dc4f356939f109 Mon Sep 17 00:00:00 2001 From: Sun Burnt Date: Wed, 20 Nov 2024 11:42:56 -0500 Subject: [PATCH 4/5] fix: disable voting widget if user is not logged in. --- .../components/ProposalOverview.tsx | 74 +++++++++++-------- 1 file changed, 43 insertions(+), 31 deletions(-) diff --git a/src/features/governance/components/ProposalOverview.tsx b/src/features/governance/components/ProposalOverview.tsx index 0f0f8a8..e40837c 100644 --- a/src/features/governance/components/ProposalOverview.tsx +++ b/src/features/governance/components/ProposalOverview.tsx @@ -1,3 +1,4 @@ +import { useAbstraxionAccount } from "@burnt-labs/abstraxion"; import React from "react"; import type { VoteOptionType } from "../lib/types"; @@ -19,10 +20,14 @@ interface ProposalOverviewProps { yesPercentage: number; } -const VoteEmptyState = () => ( +interface VoteEmptyStateProps { + reason: "not_connected" | "voting_ended"; +} + +const VoteEmptyState: React.FC = ({ reason }) => (
- Voting Period Ended + {reason === "not_connected" ? "Log In to Vote" : "Voting Period Ended"}
@@ -59,37 +64,44 @@ export const ProposalOverview: React.FC = ({ title, voteValue, yesPercentage, -}) => ( -
-
-
-
- -

- {title} -

-

- Proposed {formatProposalDate(submittedDate)} -

-
+}) => { + const { isConnected } = useAbstraxionAccount(); + + return ( +
+
+
+
+ +

+ {title} +

+

+ Proposed {formatProposalDate(submittedDate)} +

+
-
- +
+ +
-
-
- {status === ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD ? ( - - ) : ( - - )} +
+ {status === ProposalStatus.PROPOSAL_STATUS_VOTING_PERIOD && + isConnected ? ( + + ) : ( + + )} +
-
-); + ); +}; From 67f692f962d662798a33ca759ba69a22dda94c3d Mon Sep 17 00:00:00 2001 From: Sun Burnt Date: Wed, 20 Nov 2024 12:20:39 -0500 Subject: [PATCH 5/5] fix: improve quorum feedback --- src/features/core/components/TooltipPopover.tsx | 2 +- .../governance/components/ProposalTallyingStatus.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/features/core/components/TooltipPopover.tsx b/src/features/core/components/TooltipPopover.tsx index 919f7f2..0c2cea2 100644 --- a/src/features/core/components/TooltipPopover.tsx +++ b/src/features/core/components/TooltipPopover.tsx @@ -42,7 +42,7 @@ export const TooltipPopover: React.FC = ({ {showTooltip && (
-

{content}

+

{content}

)} diff --git a/src/features/governance/components/ProposalTallyingStatus.tsx b/src/features/governance/components/ProposalTallyingStatus.tsx index eeea5a7..74db55b 100644 --- a/src/features/governance/components/ProposalTallyingStatus.tsx +++ b/src/features/governance/components/ProposalTallyingStatus.tsx @@ -14,8 +14,8 @@ const QuorumBar = ({ percentage, quorum, }: { - percentage: number; - quorum: number; + percentage: number; // percent achieved + quorum: number; // percent required }) => (
{/* top line */} @@ -40,7 +40,7 @@ const QuorumBar = ({ className="absolute h-full bg-[#434040]" style={{ left: `${percentage}%`, - width: `${Math.min(quorum - percentage, 100 - percentage)}%`, + width: `${percentage}%`, }} /> )} @@ -183,7 +183,7 @@ export const ProposalTallyingStatus = ({