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/ProposalOverview.tsx b/src/features/governance/components/ProposalOverview.tsx index 270a214..e40837c 100644 --- a/src/features/governance/components/ProposalOverview.tsx +++ b/src/features/governance/components/ProposalOverview.tsx @@ -1,6 +1,7 @@ +import { useAbstraxionAccount } from "@burnt-labs/abstraxion"; 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,14 +16,18 @@ interface ProposalOverviewProps { status: ProposalStatus; submittedDate: string; title: string; - voteValue: undefined | VoteType; + voteValue: undefined | VoteOptionType; 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 ? ( + + ) : ( + + )} +
-
-); + ); +}; 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 = ({
= ({ @@ -32,28 +34,29 @@ const ProposalVoteModal: React.FC = ({ voteType, }) => { const [step, setStep] = useState(Step.Review); - const [isLoading, setIsLoading] = useState(false); - + const [error, setError] = useState(null); const readableVoteType = getReadableVoteType(voteType); // reset step when modal is closed useEffect(() => { if (!isOpen) { setStep(Step.Review); + setError(null); } }, [isOpen]); // handle confirm const handleConfirm = async () => { - setIsLoading(true); + setStep(Step.Submitting); + setError(null); try { await onConfirm(); setStep(Step.Completed); - } catch (error) { - console.error("Error submitting vote:", error); - } finally { - setIsLoading(false); + } catch (err) { + console.error("Error submitting vote:", err); + setError("Failed to submit vote. Please try again."); + setStep(Step.Review); } }; @@ -63,10 +66,10 @@ const ProposalVoteModal: React.FC = ({ setStep(Step.Review); }; - return ( - -
- {step === Step.Review ? ( + const renderContent = () => { + switch (step) { + case Step.Review: + return ( <>
@@ -76,16 +79,44 @@ const ProposalVoteModal: React.FC = ({ You are about to vote "{readableVoteType}" on this proposal. Press 'Confirm' to proceed. + {error &&
{error}
}
Vote Type {readableVoteType}
- + + + ); + + 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 1c16f46..24579b0 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 = ({ @@ -84,10 +88,9 @@ export const VoteWidget: React.FC = ({ proposalId, voter: address!, }); - - setShowModal(false); } catch (error) { console.error("Error submitting vote:", error); + throw error; } } }; @@ -95,7 +98,7 @@ export const VoteWidget: React.FC = ({ return (

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