From a9f12602f8f676867d77b548ffc27aa4c9878b71 Mon Sep 17 00:00:00 2001 From: yu-zhen Date: Thu, 28 Nov 2024 20:21:49 +0900 Subject: [PATCH] feat: update single round UI and slightly update the mobile UI --- .../src/components/ConnectButton.tsx | 86 +++++++++---------- packages/interface/src/components/Header.tsx | 5 +- packages/interface/src/components/Info.tsx | 4 +- .../src/components/SingleRoundHome.tsx | 50 +++++++++++ packages/interface/src/hooks/useIsMobile.ts | 8 ++ packages/interface/src/pages/index.tsx | 63 +++++++++----- packages/subgraph/config/network.json | 7 -- 7 files changed, 144 insertions(+), 79 deletions(-) create mode 100644 packages/interface/src/components/SingleRoundHome.tsx create mode 100644 packages/interface/src/hooks/useIsMobile.ts delete mode 100644 packages/subgraph/config/network.json diff --git a/packages/interface/src/components/ConnectButton.tsx b/packages/interface/src/components/ConnectButton.tsx index ae08d3f8..4d228542 100644 --- a/packages/interface/src/components/ConnectButton.tsx +++ b/packages/interface/src/components/ConnectButton.tsx @@ -1,14 +1,11 @@ import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit"; import Image from "next/image"; -import { createBreakpoint } from "react-use"; import { config } from "~/config"; import { Button } from "./ui/Button"; import { Chip } from "./ui/Chip"; -const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 }); - interface IConnectedDetailsProps { account: { address: string; displayName: string; ensName?: string }; openAccountModal: () => void; @@ -31,50 +28,45 @@ const ConnectedDetails = ({ openAccountModal, account, isMobile }: IConnectedDet ); }; -export const ConnectButton = (): JSX.Element => { - const breakpoint = useBreakpoint(); - const isMobile = breakpoint === "S"; - - return ( - - {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted, authenticationStatus }) => { - const ready = mounted && authenticationStatus !== "loading"; - const connected = - ready && account && chain && (!authenticationStatus || authenticationStatus === "authenticated"); +export const ConnectButton = (): JSX.Element => ( + + {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted, authenticationStatus }) => { + const ready = mounted && authenticationStatus !== "loading"; + const connected = + ready && account && chain && (!authenticationStatus || authenticationStatus === "authenticated"); - return ( -
- {(() => { - if (!connected) { - return ( - - ); - } + return ( +
+ {(() => { + if (!connected) { + return ( + + ); + } - if (chain.unsupported ?? ![Number(config.network.id)].includes(chain.id)) { - return ( - - Wrong network - - ); - } + if (chain.unsupported ?? ![Number(config.network.id)].includes(chain.id)) { + return ( + + Wrong network + + ); + } - return ; - })()} -
- ); - }} - - ); -}; + return ; + })()} +
+ ); + }} + +); diff --git a/packages/interface/src/components/Header.tsx b/packages/interface/src/components/Header.tsx index 0a75ac80..d6246fbd 100644 --- a/packages/interface/src/components/Header.tsx +++ b/packages/interface/src/components/Header.tsx @@ -7,6 +7,7 @@ import { useTheme } from "next-themes"; import { type ComponentPropsWithRef, useState, useCallback, useMemo } from "react"; import { useBallot } from "~/contexts/Ballot"; +import { useIsMobile } from "~/hooks/useIsMobile"; import { useRoundState } from "~/utils/state"; import { ERoundState } from "~/utils/types"; @@ -68,6 +69,8 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => { const ballot = useMemo(() => getBallot(pollId), [pollId, getBallot]); + const isMobile = useIsMobile(); + const handleChangeTheme = useCallback(() => { setTheme(theme === "light" ? "dark" : "light"); }, [theme, setTheme]); @@ -122,7 +125,7 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => { onClick={handleChangeTheme} /> - + {!isMobile && } diff --git a/packages/interface/src/components/Info.tsx b/packages/interface/src/components/Info.tsx index 5bb7f622..c852585a 100644 --- a/packages/interface/src/components/Info.tsx +++ b/packages/interface/src/components/Info.tsx @@ -18,7 +18,7 @@ const InfoContainer = createComponent( variants: { size: { sm: "flex-col", - default: "flex-col max-lg:w-full lg:flex-row", + default: "flex-col max-lg:w-full lg:flex-row lg:w-fit", }, }, }), @@ -73,7 +73,7 @@ export const Info = ({ ]; return ( -
+
{showRoundInfo && } diff --git a/packages/interface/src/components/SingleRoundHome.tsx b/packages/interface/src/components/SingleRoundHome.tsx new file mode 100644 index 00000000..a4753631 --- /dev/null +++ b/packages/interface/src/components/SingleRoundHome.tsx @@ -0,0 +1,50 @@ +import { useAccount } from "wagmi"; + +import { ConnectButton } from "~/components/ConnectButton"; +import { Info } from "~/components/Info"; +import { JoinButton } from "~/components/JoinButton"; +import { Button } from "~/components/ui/Button"; +import { Heading } from "~/components/ui/Heading"; +import { useMaci } from "~/contexts/Maci"; +import { useIsMobile } from "~/hooks/useIsMobile"; +import { useRoundState } from "~/utils/state"; +import { ERoundState, type IRoundData } from "~/utils/types"; + +interface ISingleRoundHome { + round: IRoundData; +} + +export const SingleRoundHome = ({ round }: ISingleRoundHome): JSX.Element => { + const { isConnected } = useAccount(); + const { isRegistered } = useMaci(); + const isMobile = useIsMobile(); + const roundState = useRoundState({ pollId: round.pollId }); + + return ( +
+ + {round.roundId} + + +

{round.description}

+ + + + {roundState === ERoundState.RESULTS && ( + + )} + + {!isConnected && !isMobile &&

Connect your wallet to get started.

} + + {isMobile && (roundState === ERoundState.APPLICATION || roundState === ERoundState.VOTING) && } + + {isConnected && !isRegistered && } + + +
+ ); +}; diff --git a/packages/interface/src/hooks/useIsMobile.ts b/packages/interface/src/hooks/useIsMobile.ts new file mode 100644 index 00000000..c017eadd --- /dev/null +++ b/packages/interface/src/hooks/useIsMobile.ts @@ -0,0 +1,8 @@ +import { createBreakpoint } from "react-use"; + +export function useIsMobile(): boolean { + const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 }); + const breakpoint = useBreakpoint(); + + return breakpoint === "S"; +} diff --git a/packages/interface/src/pages/index.tsx b/packages/interface/src/pages/index.tsx index 29287af3..cb7af2d7 100644 --- a/packages/interface/src/pages/index.tsx +++ b/packages/interface/src/pages/index.tsx @@ -1,6 +1,9 @@ +import { useMemo } from "react"; import { useAccount } from "wagmi"; +import { ConnectButton } from "~/components/ConnectButton"; import { JoinButton } from "~/components/JoinButton"; +import { SingleRoundHome } from "~/components/SingleRoundHome"; import { Button } from "~/components/ui/Button"; import { Heading } from "~/components/ui/Heading"; import { config } from "~/config"; @@ -9,6 +12,7 @@ import { useRound } from "~/contexts/Round"; import { FAQList } from "~/features/home/components/FaqList"; import { RoundsList } from "~/features/rounds/components/RoundsList"; import { useIsAdmin } from "~/hooks/useIsAdmin"; +import { useIsMobile } from "~/hooks/useIsMobile"; import { Layout } from "~/layouts/DefaultLayout"; const HomePage = (): JSX.Element => { @@ -16,38 +20,53 @@ const HomePage = (): JSX.Element => { const { isRegistered } = useMaci(); const isAdmin = useIsAdmin(); const { rounds } = useRound(); + const singleRound = useMemo(() => { + if (rounds && rounds.length === 1) { + return rounds[0]; + } + + return undefined; + }, [rounds]); + + const isMobile = useIsMobile(); return ( -
- - {config.eventName} - + {singleRound && } + + {!singleRound && ( +
+ + {config.eventName} + + + + {config.eventDescription} + - - {config.eventDescription} - + {!isConnected && !isMobile &&

Connect your wallet to get started.

} - {!isConnected &&

Connect your wallet to get started.

} + {isMobile && } - {isConnected && !isRegistered && } + {isConnected && !isRegistered && } - {isConnected && isAdmin && ( -
-

Configure and deploy your contracts to get started.

+ {isConnected && isAdmin && ( +
+

Configure and deploy your contracts to get started.

- -
- )} + +
+ )} - {isConnected && !isAdmin && rounds && rounds.length === 0 && ( -

There are no rounds deployed.

- )} + {isConnected && !isAdmin && rounds && rounds.length === 0 && ( +

There are no rounds deployed.

+ )} - {rounds && rounds.length > 0 && } -
+ {rounds && rounds.length > 1 && } +
+ )} diff --git a/packages/subgraph/config/network.json b/packages/subgraph/config/network.json deleted file mode 100644 index 735f9d2e..00000000 --- a/packages/subgraph/config/network.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "network": "optimism-sepolia", - "maciContractAddress": "0xca941B064D28276D7f125324ad2a41ec4c7F784e", - "maciContractStartBlock": 19755066, - "registryManagerContractAddress": "0xBc014791f00621AD08733043F788AB4ecAe3BAAd", - "registryManagerContractStartBlock": 19755080 -}