From 6757fe554a05096de7ac98f2ed2e5002dfb5119c Mon Sep 17 00:00:00 2001 From: Corantin Date: Tue, 17 Sep 2024 19:40:31 -0400 Subject: [PATCH 1/4] Make sure all chain request is toward the chainId from path rather than wallet network --- .../[garden]/[community]/[poolId]/[proposalId]/page.tsx | 1 + .../gardens/[chain]/[garden]/[community]/[poolId]/page.tsx | 1 + apps/web/components/CancelButton.tsx | 7 ++++--- apps/web/components/Forms/PoolForm.tsx | 1 + apps/web/components/Forms/ProposalForm.tsx | 1 + apps/web/components/IncreasePower.tsx | 2 +- apps/web/components/WalletBalance.tsx | 3 +++ 7 files changed, 12 insertions(+), 4 deletions(-) diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx index 0e6a88dc0..6e4a0a92d 100644 --- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx +++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx @@ -80,6 +80,7 @@ export default function Page({ const { data: poolToken } = useToken({ address: poolTokenAddr, enabled: !!poolTokenAddr, + chainId, }); const { data: ipfsResult } = useMetadataIpfsFetch({ hash: proposalData?.metadataHash, diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx index 267741218..ab0e4c138 100644 --- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx +++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx @@ -49,6 +49,7 @@ export default function Page({ const { data: poolToken } = useToken({ address: poolTokenAddr, enabled: !!poolTokenAddr, + chainId: +chain, }); useEffect(() => { diff --git a/apps/web/components/CancelButton.tsx b/apps/web/components/CancelButton.tsx index d0aa51398..a14e17dcc 100644 --- a/apps/web/components/CancelButton.tsx +++ b/apps/web/components/CancelButton.tsx @@ -1,10 +1,11 @@ import React, { useState } from "react"; import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; -import { Address, useChainId } from "wagmi"; +import { Address } from "wagmi"; import { CVProposal, CVStrategy, Maybe } from "#/subgraph/.graphclient"; import { Button } from "./Button"; import { Modal } from "./Modal"; import { usePubSubContext } from "@/contexts/pubsub.context"; +import { useChainIdFromPath } from "@/hooks/useChainIdFromPath"; import { useContractWriteWithConfirmations } from "@/hooks/useContractWriteWithConfirmations"; import { MetadataV1 } from "@/hooks/useIpfsFetch"; import { cvStrategyABI } from "@/src/generated"; @@ -21,7 +22,7 @@ type Props = { function CancelButton({ proposalData }: Props) { const [isModalOpen, setIsModalOpen] = useState(false); - const chainId = useChainId(); + const chainId = useChainIdFromPath(); const { publish } = usePubSubContext(); const { strategy } = proposalData; const [strategyId, proposalNumber] = proposalData.id.split("-"); @@ -39,7 +40,7 @@ function CancelButton({ proposalData }: Props) { function: "cancelProposal", id: +proposalNumber, containerId: strategyId, - chainId, + chainId: chainId, }); }, }); diff --git a/apps/web/components/Forms/PoolForm.tsx b/apps/web/components/Forms/PoolForm.tsx index 01d58796e..d476ebed9 100644 --- a/apps/web/components/Forms/PoolForm.tsx +++ b/apps/web/components/Forms/PoolForm.tsx @@ -174,6 +174,7 @@ export function PoolForm({ token, communityAddr }: Props) { const watchedAddress = watch("poolTokenAddress").toLowerCase() as Address; const { data: customTokenData } = useToken({ address: watchedAddress ?? "0x", + chainId: +chain, }); const pointSystemType = watch("pointSystemType"); const strategyType = watch("strategyType"); diff --git a/apps/web/components/Forms/ProposalForm.tsx b/apps/web/components/Forms/ProposalForm.tsx index 1fe0d6e48..adef8f26b 100644 --- a/apps/web/components/Forms/ProposalForm.tsx +++ b/apps/web/components/Forms/ProposalForm.tsx @@ -233,6 +233,7 @@ export const ProposalForm = ({ const { data: poolToken } = useToken({ address: poolTokenAddr, enabled: !!poolTokenAddr, + chainId, }); const INPUT_TOKEN_MIN_VALUE = 1 / 10 ** (poolToken?.decimals ?? 0); diff --git a/apps/web/components/IncreasePower.tsx b/apps/web/components/IncreasePower.tsx index 44aaefd8c..a4ef1be89 100644 --- a/apps/web/components/IncreasePower.tsx +++ b/apps/web/components/IncreasePower.tsx @@ -77,7 +77,7 @@ export const IncreasePower = ({ const { data: accountTokenBalance } = useBalance({ address: accountAddress, token: registerToken as Address, - chainId: urlChainId ?? 0, + chainId: urlChainId, }); const registryContractCallConfig = { diff --git a/apps/web/components/WalletBalance.tsx b/apps/web/components/WalletBalance.tsx index 09708217b..926aac8c7 100644 --- a/apps/web/components/WalletBalance.tsx +++ b/apps/web/components/WalletBalance.tsx @@ -3,6 +3,7 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline"; import { formatEther } from "viem"; import { Address, useAccount, useBalance } from "wagmi"; import { DisplayNumber } from "./DisplayNumber"; +import { useChainIdFromPath } from "@/hooks/useChainIdFromPath"; type Props = { label: string; @@ -29,12 +30,14 @@ export const WalletBalance: FC = ({ }) => { const { address, isDisconnected } = useAccount(); const isEnoughBalanceRef = useRef(false); + const chainId = useChainIdFromPath(); const { data } = useBalance({ address, formatUnits: "ether", token: token === "native" ? undefined : (token as Address), watch: true, + chainId, }); const balance = data && data.value; From 742b470005157c51ef1d791e57bcef09bd8ee6d4 Mon Sep 17 00:00:00 2001 From: Corantin Date: Wed, 18 Sep 2024 00:14:27 -0400 Subject: [PATCH 2/4] Tooltip on modal visible + mobile responsive --- .../[community]/[poolId]/[proposalId]/page.tsx | 2 +- .../gardens/[chain]/[garden]/[community]/page.tsx | 4 ++-- .../app/(app)/gardens/[chain]/[garden]/page.tsx | 5 +++-- apps/web/app/(app)/gardens/page.tsx | 2 +- apps/web/components/Badge.tsx | 6 +++--- apps/web/components/Button.tsx | 2 +- apps/web/components/Card.tsx | 2 +- apps/web/components/Charts/ChartWrapper.tsx | 2 +- apps/web/components/CommunityCard.tsx | 2 +- apps/web/components/DisputeButton.tsx | 11 +++++------ apps/web/components/Forms/PoolEditForm.tsx | 2 +- apps/web/components/Forms/PoolForm.tsx | 4 ++-- apps/web/components/Forms/ProposalForm.tsx | 2 +- apps/web/components/IncreasePower.tsx | 4 ++-- apps/web/components/InfoBox.tsx | 6 +++--- apps/web/components/InfoWrapper.tsx | 6 +++--- apps/web/components/Modal.tsx | 2 +- apps/web/components/PoolCard.tsx | 2 +- apps/web/components/PoolGovernance.tsx | 8 ++++---- apps/web/components/PoolHeader.tsx | 8 ++++---- apps/web/components/PoolMetrics.tsx | 4 ++-- apps/web/components/ProposalCard.tsx | 14 ++++++++------ apps/web/components/ProposalTimeline.tsx | 6 +++--- apps/web/components/Proposals.tsx | 2 +- apps/web/components/TokenLabel.tsx | 6 +++--- apps/web/styles/globals.css | 2 +- 26 files changed, 59 insertions(+), 57 deletions(-) diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx index 0e6a88dc0..03dbdb1ff 100644 --- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx +++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx @@ -192,7 +192,7 @@ export default function Page({ {metadata?.description ?? "No description found"} -
+
{!isSignalingType && ( <> diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx index 13efe5a67..96f94453d 100644 --- a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx +++ b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx @@ -219,7 +219,7 @@ export default function Page({ return (
-
+
-
+

{tokenGarden?.name}

{" "} - +
diff --git a/apps/web/app/(app)/gardens/page.tsx b/apps/web/app/(app)/gardens/page.tsx index 20a20fdef..ccea2d846 100644 --- a/apps/web/app/(app)/gardens/page.tsx +++ b/apps/web/app/(app)/gardens/page.tsx @@ -103,7 +103,7 @@ export default function Page() {
-
+
{GardenList}
diff --git a/apps/web/components/Badge.tsx b/apps/web/components/Badge.tsx index f4ba13a97..ed4d5761e 100644 --- a/apps/web/components/Badge.tsx +++ b/apps/web/components/Badge.tsx @@ -9,7 +9,7 @@ type BadgeProps = { type?: number; status?: number; label?: string; - classNames?: string; + className?: string; icon?: React.ReactNode; isCapitalize?: boolean; }; @@ -37,7 +37,7 @@ export function Badge({ type, status, label, - classNames, + className, icon, }: BadgeProps): JSX.Element { const isStatusBadge = status !== undefined; @@ -69,7 +69,7 @@ export function Badge({ return (
{iconIncluded && (
{iconIncluded}
diff --git a/apps/web/components/Button.tsx b/apps/web/components/Button.tsx index b0513687f..3e024d7d3 100644 --- a/apps/web/components/Button.tsx +++ b/apps/web/components/Button.tsx @@ -83,7 +83,7 @@ export function Button({
-
+

Pool settings

-
+
{Object.entries(poolSettingValues).map( ([key, { label, description }]) => { return ( diff --git a/apps/web/components/Forms/ProposalForm.tsx b/apps/web/components/Forms/ProposalForm.tsx index 1fe0d6e48..7dcb9922e 100644 --- a/apps/web/components/Forms/ProposalForm.tsx +++ b/apps/web/components/Forms/ProposalForm.tsx @@ -406,7 +406,7 @@ export const ProposalForm = ({
} -
+
{arbitrableConfig && ( -
+
@@ -253,7 +253,7 @@ export const IncreasePower = ({
diff --git a/apps/web/components/InfoBox.tsx b/apps/web/components/InfoBox.tsx index 709e47160..9646bec58 100644 --- a/apps/web/components/InfoBox.tsx +++ b/apps/web/components/InfoBox.tsx @@ -7,7 +7,7 @@ type InfoBoxProps = { infoBoxType: InfoBoxStyles; content?: string; contentStyle?: string; - classNames?: string; + className?: string; icon?: React.ReactNode; hideIcon?: boolean; children?: React.ReactNode; @@ -28,14 +28,14 @@ export function InfoBox({ infoBoxType, content, contentStyle, - classNames, + className, icon, hideIcon, children, }: InfoBoxProps): JSX.Element { return (
{!hideIcon && (
diff --git a/apps/web/components/InfoWrapper.tsx b/apps/web/components/InfoWrapper.tsx index 37d7dddf5..293ee2492 100644 --- a/apps/web/components/InfoWrapper.tsx +++ b/apps/web/components/InfoWrapper.tsx @@ -4,7 +4,7 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline"; type InfoWrapperProps = { tooltip: string; children?: React.ReactNode; - classNames?: string; + className?: string; customIcon?: React.ReactNode; size?: "sm" | "md" | "lg"; }; @@ -18,7 +18,7 @@ const sizeMap = { export function InfoWrapper({ tooltip, children, - classNames, + className, customIcon, size = "md", }: InfoWrapperProps): JSX.Element { @@ -26,7 +26,7 @@ export function InfoWrapper({ return (
svg]:text-primary-content max-w-sm [&>svg]:stroke-2 ${classNames}`} + className={`tooltip flex gap-2 cursor-pointer items-center [&>svg]:text-primary-content max-w-sm [&>svg]:stroke-2 ${className}`} data-tip={tooltip} > {children} diff --git a/apps/web/components/Modal.tsx b/apps/web/components/Modal.tsx index 98c963ee8..0cd5cc53b 100644 --- a/apps/web/components/Modal.tsx +++ b/apps/web/components/Modal.tsx @@ -53,7 +53,7 @@ export function Modal({ className={`modal max-sm:modal-bottom ${className}`} ref={dialogRef} > -
+
{icon && ( diff --git a/apps/web/components/PoolCard.tsx b/apps/web/components/PoolCard.tsx index a4b6ffafa..8a602d375 100644 --- a/apps/web/components/PoolCard.tsx +++ b/apps/web/components/PoolCard.tsx @@ -76,7 +76,7 @@ export function PoolCard({ pool, tokenGarden }: Props) {
{!isEnabled ? -
+
Waiting for approval
diff --git a/apps/web/components/PoolGovernance.tsx b/apps/web/components/PoolGovernance.tsx index f2992bee8..a2b5835ce 100644 --- a/apps/web/components/PoolGovernance.tsx +++ b/apps/web/components/PoolGovernance.tsx @@ -44,7 +44,7 @@ export const PoolGovernance: React.FC = ({ return (
-
+

Pool Governance

= ({
{address && (
-
+
-
+

Your stake in the community:

= ({
diff --git a/apps/web/components/PoolHeader.tsx b/apps/web/components/PoolHeader.tsx index 1e86a73a9..672e58bcc 100644 --- a/apps/web/components/PoolHeader.tsx +++ b/apps/web/components/PoolHeader.tsx @@ -234,9 +234,9 @@ export default function PoolHeader({ ); return ( -
+
-
+

{ipfsResult?.title} #{poolId}

@@ -312,7 +312,7 @@ export default function PoolHeader({ {ipfsResult?.description ?? "No description found"} -
+
@@ -330,7 +330,7 @@ export default function PoolHeader({
} /> } /> diff --git a/apps/web/components/PoolMetrics.tsx b/apps/web/components/PoolMetrics.tsx index 802046e31..f363cd8fa 100644 --- a/apps/web/components/PoolMetrics.tsx +++ b/apps/web/components/PoolMetrics.tsx @@ -116,7 +116,7 @@ export const PoolMetrics: FC = ({

Pool Funds

-
+

Funds available:

= ({ />
{ e.preventDefault(); handleFundPool(); diff --git a/apps/web/components/ProposalCard.tsx b/apps/web/components/ProposalCard.tsx index 51f8cbfd1..669a6dfd7 100644 --- a/apps/web/components/ProposalCard.tsx +++ b/apps/web/components/ProposalCard.tsx @@ -87,14 +87,16 @@ export function ProposalCard({ const proposalCardContent = ( <>
- +
+ +
-

+

{metadata.title}

ID {proposalNumber}
@@ -102,7 +104,7 @@ export function ProposalCard({
{isAllocationView ?
@@ -163,7 +165,7 @@ export function ProposalCard({
: <> -
+
{stakedFilter && (stakedFilter?.value > 0 ?

= ({

@@ -135,7 +135,7 @@ export const ProposalTimeline: FC = ({ "Pool default ruling on timeout is to Approve" : "The proposal will be closed as rejected." } - classNames={`[&>svg]:text-error-content [&:before]:ml-[-26px] ${isTimeout && defaultRuling === "approved" && "[&>svg]:opacity-50"}`} + className={`[&>svg]:text-error-content [&:before]:ml-[-26px] ${isTimeout && defaultRuling === "approved" && "[&>svg]:opacity-50"}`} > = ({ "Pool default ruling on timeout is to Reject" : "The proposal will keep the accumulated conviction growth and be back to active." } - classNames={`${isTimeout && defaultRuling === "rejected" && "[&>svg]:opacity-50 [&:before]:ml-[-38px]"}`} + className={`${isTimeout && defaultRuling === "rejected" && "[&>svg]:opacity-50 [&:before]:ml-[-38px]"}`} >
-
+

Proposals

{!!proposals && (proposals.length === 0 ? diff --git a/apps/web/components/TokenLabel.tsx b/apps/web/components/TokenLabel.tsx index abd669c3f..ade971b8e 100644 --- a/apps/web/components/TokenLabel.tsx +++ b/apps/web/components/TokenLabel.tsx @@ -4,19 +4,19 @@ import { ChainIcon, getChain } from "@/configs/chains"; type TokenLabelProps = { chainId: string | number; noSymbol?: boolean; - classNames?: string; + className?: string; iconSize?: number; }; export function TokenLabel({ chainId, noSymbol = false, - classNames, + className, iconSize = 24, }: TokenLabelProps) { return (
{/* TODO: change Icon library */} diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css index 18d30dbe7..c2e997542 100644 --- a/apps/web/styles/globals.css +++ b/apps/web/styles/globals.css @@ -169,7 +169,7 @@ caption { } .page-layout { - @apply flex w-full max-w-6xl flex-col gap-10 p-8; + @apply flex w-full max-w-6xl flex-col gap-10 p-4 md:p-8; } .tooltip { From f770e7bf6984b3ffcf772b327ee908549d795ad5 Mon Sep 17 00:00:00 2001 From: Corantin Date: Wed, 18 Sep 2024 00:37:44 -0400 Subject: [PATCH 3/4] Touchup cleanup --- apps/web/components/ProposalCard.tsx | 207 ++++++++++++++------------- 1 file changed, 105 insertions(+), 102 deletions(-) diff --git a/apps/web/components/ProposalCard.tsx b/apps/web/components/ProposalCard.tsx index 669a6dfd7..24ba2181f 100644 --- a/apps/web/components/ProposalCard.tsx +++ b/apps/web/components/ProposalCard.tsx @@ -96,122 +96,125 @@ export function ProposalCard({
-

+

{metadata.title}

ID {proposalNumber}
- - {isAllocationView ? -
-
-
-
- - inputHandler(index, Number(e.target.value)) - } - /> -
- {[...Array(21)].map((_, i) => ( - // eslint-disable-next-line react/no-array-index-key - - | - - ))} +
+ + {isAllocationView ? +
+
+
+
+ + inputHandler(index, Number(e.target.value)) + } + /> +
+ {[...Array(21)].map((_, i) => ( + // eslint-disable-next-line react/no-array-index-key + + | + + ))} +
-
-
- {Number(inputValue) > 0 ? - <> -
-
-

- - {inputValue} - - /100% -

-

- Total allocated -

-
-
-

- - {poolWeightAllocatedInProposal} - - /{memberPoolWeight}% -

-

Pool weight

+
+ {Number(inputValue) > 0 ? + <> +
+
+

+ + {inputValue} + + /100% +

+

+ Total allocated +

+
+
+

+ + {poolWeightAllocatedInProposal} + + /{memberPoolWeight}% +

+

Pool weight

+
-
- - :

No allocation

} + + :

No allocation

+ } +
-
- : <> -
- {stakedFilter && - (stakedFilter?.value > 0 ? -

+ {stakedFilter && + (stakedFilter?.value > 0 ? +

- Total allocated{" "} - - {`${allocatedInProposal.toString()}%`} - -

- :

- No allocation yet -

)} -
-
- {currentConvictionPct != null && - thresholdPct != null && - totalSupportPct != null && ( -
- + Total allocated{" "} + + {`${allocatedInProposal.toString()}%`} + +

+ :

+ No allocation yet +

)} +
+
+ {currentConvictionPct != null && + thresholdPct != null && + totalSupportPct != null && ( +
+ +
+ )} + {!isSignalingType && ( +
+

+ Requested amount:{" "} +

+
)} - {!isSignalingType && ( -
-

- Requested amount:{" "} -

- -
- )} -
- - } +
+ + } +
); From ecd703a655bf59bd547d7ba231be6aa08b07ce9d Mon Sep 17 00:00:00 2001 From: Corantin Date: Wed, 18 Sep 2024 12:13:24 -0400 Subject: [PATCH 4/4] Fix rule button responsivness --- apps/web/components/DisputeButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/components/DisputeButton.tsx b/apps/web/components/DisputeButton.tsx index 910cd347f..2173f2eb1 100644 --- a/apps/web/components/DisputeButton.tsx +++ b/apps/web/components/DisputeButton.tsx @@ -300,7 +300,7 @@ export const DisputeButton: FC = ({ proposalData }) => { const buttons = (
{isDisputed ? -
+
{( DisputeStatus[lastDispute.status] === "waiting" && ((isTribunalMember ?? isTribunalSafe) || isTimeout)