-
Notifications
You must be signed in to change notification settings - Fork 6
Fix/mobile layout issues #1805
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.
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
Open
brunod-e
wants to merge
15
commits into
dev
Choose a base branch
from
fix/mobile-layout-issues
base: dev
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Fix/mobile layout issues #1805
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
7719392
feat: add governance action modal and integrate queue/execute functio…
brunod-e 84bb9a5
fix: normalize proposal status to lowercase for consistent button vis…
brunod-e b8ece5f
Merge branch 'dev' into feat/add-execute-and-queue-buttons
brunod-e 5610671
refactor: update proposal type in GovernanceActionModal and handle op…
brunod-e 81b1614
Merge branch 'dev' into feat/add-execute-and-queue-buttons
pikonha 68fe14f
Merge branch 'dev' into feat/add-execute-and-queue-buttons
pikonha 3a59284
feat: add execute and queue buttons for proposal actions
brunod-e 93f0ac2
refactor: streamline submitAction logic for governance proposals
brunod-e 614155a
feat: implement mobile layout for governance and proposal pages
brunod-e ed2b88e
refactor: remove unused ButtonHeaderDAOSidebarMobile component
brunod-e dbbe980
Merge branch 'dev' into fix/mobile-layout-issues
brunod-e 381065d
refactor: simplify proposal components and improve mobile responsiveness
brunod-e 33ac60d
fix: resolve mobile layout issues and improve component responsiveness
brunod-e b248044
fix: adjust top positioning of tabs section for improved mobile layout
brunod-e ac10ff5
fix: increase z-index for dropdown in StickyPageHeader to improve vis…
brunod-e File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
199 changes: 199 additions & 0 deletions
199
apps/dashboard/features/governance/components/modals/GovernanceActionModal.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| "use client"; | ||
|
|
||
| import { Check, Hourglass, PenLine } from "lucide-react"; | ||
| import { useCallback, useEffect, useState } from "react"; | ||
| import { useAccount, useWalletClient } from "wagmi"; | ||
|
|
||
| import type { ProposalViewData } from "@/features/governance/types"; | ||
| import { showCustomToast } from "@/features/governance/utils/showCustomToast"; | ||
| import { | ||
| executeProposal, | ||
| queueProposal, | ||
| type GovernanceAction, | ||
| } from "@/features/governance/utils/submitGovernanceAction"; | ||
| import { Modal } from "@/shared/components/design-system/modal/Modal"; | ||
| import { SpinIcon } from "@/shared/components/icons/SpinIcon"; | ||
| import { DividerDefault } from "@/shared/components/design-system/divider/DividerDefault"; | ||
| import { cn } from "@/shared/utils/cn"; | ||
| import daoConfigByDaoId from "@/shared/dao-config"; | ||
| import type { DaoIdEnum } from "@/shared/types/daos"; | ||
|
|
||
| type ActionStep = "waiting-signature" | "pending-tx" | "success" | "error"; | ||
|
|
||
| interface GovernanceActionModalProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| action: GovernanceAction; | ||
| proposal: ProposalViewData; | ||
| daoId: DaoIdEnum; | ||
| } | ||
|
|
||
| export const GovernanceActionModal = ({ | ||
| isOpen, | ||
| onClose, | ||
| action, | ||
| proposal, | ||
| daoId, | ||
| }: GovernanceActionModalProps) => { | ||
| const [step, setStep] = useState<ActionStep>("waiting-signature"); | ||
| const [error, setError] = useState<string | null>(null); | ||
|
|
||
| const { address } = useAccount(); | ||
| const chain = daoConfigByDaoId[daoId].daoOverview.chain; | ||
| const { data: walletClient } = useWalletClient({ chainId: chain.id }); | ||
|
|
||
| const title = action === "queue" ? "Confirm Queue" : "Confirm Execution"; | ||
| const confirmLabel = | ||
| action === "queue" | ||
| ? "Confirm queuing in your wallet" | ||
| : "Confirm execution in your wallet"; | ||
|
|
||
| const handleAction = useCallback(async () => { | ||
| if (!address || !walletClient) return; | ||
| if (step === "pending-tx" || step === "success") return; | ||
|
|
||
| setError(null); | ||
| setStep("waiting-signature"); | ||
|
|
||
| try { | ||
| const handler = action === "queue" ? queueProposal : executeProposal; | ||
| await handler( | ||
| proposal.targets, | ||
| proposal.values, | ||
| proposal.calldatas ?? [], | ||
| proposal.description, | ||
| address, | ||
| daoId, | ||
| walletClient, | ||
| () => setStep("pending-tx"), | ||
| proposal.id, | ||
| ); | ||
| setStep("success"); | ||
| showCustomToast( | ||
| action === "queue" | ||
| ? "Proposal queued successfully!" | ||
| : "Proposal executed successfully!", | ||
| "success", | ||
| ); | ||
| onClose(); | ||
| setTimeout(() => window.location.reload(), 2000); | ||
| } catch (err) { | ||
| const message = err instanceof Error ? err.message : "Action failed."; | ||
| console.error("[GovernanceActionModal]", err); | ||
| let shortMessage: string; | ||
| if (message.includes("rejected") || message.includes("denied")) { | ||
| shortMessage = "Transaction rejected by user."; | ||
| } else if (message.includes("reverted")) { | ||
| shortMessage = | ||
| "Contract call reverted. The proposal may not be in the correct state."; | ||
| } else { | ||
| shortMessage = | ||
| message.split("\n")[0]?.slice(0, 100) ?? "Action failed."; | ||
| } | ||
| setError(shortMessage); | ||
| setStep("error"); | ||
| } | ||
| }, [address, walletClient, step, action, proposal, daoId, onClose, chain]); | ||
|
|
||
| useEffect(() => { | ||
| if (!isOpen || !walletClient || step !== "waiting-signature") return; | ||
| handleAction(); | ||
| }, [isOpen, walletClient, handleAction, step]); | ||
|
|
||
| const handleClose = () => { | ||
| setStep("waiting-signature"); | ||
| setError(null); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Modal | ||
| open={isOpen} | ||
| onOpenChange={(open) => !open && handleClose()} | ||
| title={title} | ||
| > | ||
| {/* Proposal info */} | ||
| <div className="flex flex-col gap-2 pb-4"> | ||
| <div className="flex items-start gap-2"> | ||
| <span className="text-secondary w-32 shrink-0 text-xs font-medium leading-5"> | ||
| Proposal ID | ||
| </span> | ||
| <span className="text-primary text-sm leading-5">{proposal.id}</span> | ||
| </div> | ||
| <div className="flex items-start gap-2"> | ||
| <span className="text-secondary w-32 shrink-0 text-xs font-medium leading-5"> | ||
| Proposal name | ||
| </span> | ||
| <span className="text-primary text-sm leading-5"> | ||
| {proposal.title} | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Stepper */} | ||
| <div className="border-border-default flex flex-col gap-1.5 border p-3"> | ||
| <StepRow | ||
| done={step === "success" || step === "pending-tx"} | ||
| active={step === "waiting-signature"} | ||
| icon={<PenLine className="text-primary size-3.5" />} | ||
| label={confirmLabel} | ||
| error={step === "error" ? error : undefined} | ||
| /> | ||
|
|
||
| <DividerDefault isVertical className="ml-3.5 h-6 w-0.5" /> | ||
|
|
||
| <StepRow | ||
| done={step === "success"} | ||
| active={step === "pending-tx"} | ||
| icon={<Hourglass className="text-primary size-3.5" />} | ||
| label="Wait for transaction to complete" | ||
| /> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| interface StepRowProps { | ||
| done: boolean; | ||
| active: boolean; | ||
| icon: React.ReactNode; | ||
| label: string; | ||
| error?: string | null; | ||
| } | ||
|
|
||
| const StepRow = ({ done, active, icon, label, error }: StepRowProps) => { | ||
| const getBackgroundColor = () => { | ||
| if (done) return "bg-surface-opacity-success"; | ||
| if (active) return "bg-primary"; | ||
| return "bg-border-default"; | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex w-full flex-col gap-1"> | ||
| <div className="flex w-full items-center gap-2"> | ||
| <div className="relative flex size-8 shrink-0 items-center justify-center"> | ||
| {active && ( | ||
| <SpinIcon className="text-warning absolute inset-0 size-8 animate-spin" /> | ||
| )} | ||
| <div | ||
| className={cn( | ||
| "flex size-6 shrink-0 items-center justify-center rounded-full", | ||
| getBackgroundColor(), | ||
| )} | ||
| > | ||
| <div className="border-border-default flex items-center justify-center rounded-full border p-1"> | ||
| {done ? <Check className="text-success size-3.5" /> : icon} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p className="text-primary text-sm leading-5">{label}</p> | ||
| </div> | ||
|
|
||
| {error && ( | ||
| <p className="text-error ml-11 break-words text-xs leading-4"> | ||
| {error} | ||
| </p> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The modal requests a wallet client pinned to
chain.id, but the action flow only auto-starts when that client exists; otherwise it silently stays on the “confirm in your wallet” step forever. In practice, users connected to the wrong network get no error or switch-network prompt and cannot queue/execute until they infer the issue themselves. Adding explicit chain-mismatch handling (e.g., show an error/CTA) avoids this dead-end.Useful? React with 👍 / 👎.