From 259b2ae8a6050f95dac51f2b74263db1c9e8c7dd 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 | 21 ++++--- packages/interface/src/components/Header.tsx | 2 +- packages/interface/src/components/Info.tsx | 4 +- .../src/components/SingleRoundHome.tsx | 50 +++++++++++++++++ packages/interface/src/hooks/useIsMobile.ts | 15 +++++ packages/interface/src/pages/index.tsx | 56 +++++++++++-------- packages/interface/src/utils/types.ts | 7 +++ packages/subgraph/package.json | 2 +- 8 files changed, 122 insertions(+), 35 deletions(-) create mode 100644 packages/interface/src/components/SingleRoundHome.tsx create mode 100644 packages/interface/src/hooks/useIsMobile.ts diff --git a/packages/interface/src/components/ConnectButton.tsx b/packages/interface/src/components/ConnectButton.tsx index ae08d3f8..3129e81f 100644 --- a/packages/interface/src/components/ConnectButton.tsx +++ b/packages/interface/src/components/ConnectButton.tsx @@ -1,14 +1,13 @@ import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit"; import Image from "next/image"; -import { createBreakpoint } from "react-use"; +import { useMemo } from "react"; import { config } from "~/config"; +import { useIsMobile } from "~/hooks/useIsMobile"; 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,9 +30,14 @@ const ConnectedDetails = ({ openAccountModal, account, isMobile }: IConnectedDet ); }; -export const ConnectButton = (): JSX.Element => { - const breakpoint = useBreakpoint(); - const isMobile = breakpoint === "S"; +interface IConnectButtonProps { + showMobile: boolean; +} + +export const ConnectButton = ({ showMobile }: IConnectButtonProps): JSX.Element => { + const isMobile = useIsMobile(); + + const isShow = useMemo(() => showMobile === isMobile, [isMobile, showMobile]); return ( @@ -44,6 +48,7 @@ export const ConnectButton = (): JSX.Element => { return (
{ if (!connected) { return ( ); } @@ -70,7 +75,7 @@ export const ConnectButton = (): JSX.Element => { ); } - return ; + return ; })()}
); diff --git a/packages/interface/src/components/Header.tsx b/packages/interface/src/components/Header.tsx index 0a75ac80..67e96653 100644 --- a/packages/interface/src/components/Header.tsx +++ b/packages/interface/src/components/Header.tsx @@ -122,7 +122,7 @@ const Header = ({ navLinks, pollId = "" }: IHeaderProps) => { onClick={handleChangeTheme} /> - + diff --git a/packages/interface/src/components/Info.tsx b/packages/interface/src/components/Info.tsx index 5bb7f622..78ad4db8 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 xl:flex-row xl: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..a5450db9 --- /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 ISingleRoundHomeProps { + round: IRoundData; +} + +export const SingleRoundHome = ({ round }: ISingleRoundHomeProps): 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.

} + + {(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..5e102ac2 --- /dev/null +++ b/packages/interface/src/hooks/useIsMobile.ts @@ -0,0 +1,15 @@ +import { createBreakpoint } from "react-use"; + +import { EBreakpointSizes } from "~/utils/types"; + +export function useIsMobile(): boolean { + const useBreakpoint = createBreakpoint({ + XL: EBreakpointSizes.XL, + L: EBreakpointSizes.L, + M: EBreakpointSizes.M, + S: EBreakpointSizes.S, + }); + const breakpoint = useBreakpoint(); + + return breakpoint === "S"; +} diff --git a/packages/interface/src/pages/index.tsx b/packages/interface/src/pages/index.tsx index 29287af3..453598fa 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"; @@ -16,38 +19,45 @@ const HomePage = (): JSX.Element => { const { isRegistered } = useMaci(); const isAdmin = useIsAdmin(); const { rounds } = useRound(); + const singleRound = useMemo(() => rounds?.[0], [rounds]); return ( - -
- - {config.eventName} - + + {singleRound && } - - {config.eventDescription} - + {!singleRound && ( +
+ + {config.eventName} + - {!isConnected &&

Connect your wallet to get started.

} + + {config.eventDescription} + - {isConnected && !isRegistered && } + {!isConnected &&

Connect your wallet to get started.

} - {isConnected && isAdmin && ( -
-

Configure and deploy your contracts to get started.

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

There are no rounds deployed.

- )} + {isConnected && isAdmin && ( +
+

Configure and deploy your contracts to get started.

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

There are no rounds deployed.

+ )} + + {rounds && rounds.length > 1 && } +
+ )} diff --git a/packages/interface/src/utils/types.ts b/packages/interface/src/utils/types.ts index 801f0d91..ab9a9a36 100644 --- a/packages/interface/src/utils/types.ts +++ b/packages/interface/src/utils/types.ts @@ -16,6 +16,13 @@ export enum EInfoCardState { UPCOMING = "UPCOMING", } +export enum EBreakpointSizes { + S = 320, + M = 480, + L = 768, + XL = 1280, +} + export interface AttestationWithMetadata { id: string; refUID: string; diff --git a/packages/subgraph/package.json b/packages/subgraph/package.json index 22fce076..5a6d8a50 100644 --- a/packages/subgraph/package.json +++ b/packages/subgraph/package.json @@ -18,7 +18,7 @@ "generate:schema": "cp ./schemas/schema.${VERSION:-v1}.graphql schema.graphql", "prebuild": "pnpm codegen", "build": "graph build", - "deploy": "graph deploy --node https://api.studio.thegraph.com/deploy/ maci", + "deploy": "graph deploy --node https://api.studio.thegraph.com/deploy/ maci-subgraph", "create-local": "graph create --node http://localhost:8020/ maci-subgraph", "remove-local": "graph remove --node http://localhost:8020/ maci-subgraph", "deploy-local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 maci-subgraph --network localhost",