feat(components): add proposal detail page structure

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#731](https://github.com/alleslabs/celatone-frontend/pull/731) Add proposal detail page structure
 - [#749](https://github.com/alleslabs/celatone-frontend/pull/749) Add multi-type proposals
 
 ### Improvements

src/lib/components/MobileGuard.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 
-import { useCelatoneApp, useMobile } from "lib/app-provider";
+import { useMobile } from "lib/app-provider";
 
 import { NoMobile } from "./modal";
 
@@ -12,26 +12,20 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
   const router = useRouter();
   const pathName = router.asPath;
   const isMobile = useMobile();
-  const { currentChainId } = useCelatoneApp();
   const isResponsive =
-    pathName.includes(`/account`) ||
+    pathName.includes(`/accounts`) ||
     pathName.includes(`/txs`) ||
     pathName.includes(`/blocks`) ||
     pathName.includes(`/projects`) ||
-    pathName.includes(`/code`) ||
-    pathName.includes(`/nft-collections`) ||
     pathName.includes(`/query`) ||
-    pathName.includes(`/network-overview`) ||
-    pathName.includes(`/dev-home`) ||
     pathName.includes(`/404`) ||
     pathName.includes(`/proposals`) ||
+    pathName.includes(`/nft-collections`) ||
     // wasm
-    pathName.includes(`/contracts/`) ||
-    pathName === `/${currentChainId}/contracts` ||
+    pathName.includes(`/contracts`) ||
+    pathName.includes(`/codes`) ||
     // move
-    pathName.includes(`/modules/`) ||
-    pathName === `/${currentChainId}/modules` ||
-    pathName === `/${currentChainId}`;
+    pathName.includes(`/modules`);
 
   if (isResponsive && isMobile) return <>{children}</>;
   if (!isResponsive && isMobile) return <NoMobile />;

src/lib/pages/proposal-details/components/AllVotesTable.tsx

@@ -0,0 +1,39 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { TableTitle } from "lib/components/table";
+
+interface AllVotesTableProps extends FlexProps {
+  onBack: () => void;
+}
+
+export const AllVotesTable = ({ onBack, ...props }: AllVotesTableProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      {...props}
+      direction="column"
+      background={isMobile ? "transparent" : "gray.900"}
+      border="1px solid"
+      borderColor={isMobile ? "transparent" : "gray.700"}
+      borderRadius="8px"
+      p={isMobile ? 0 : 6}
+      gap={4}
+    >
+      <Flex
+        gap={3}
+        alignItems={{ base: "start", md: "center" }}
+        direction={{ base: "column", md: "row" }}
+      >
+        <Flex gap={2}>
+          <Button variant="ghost-gray" size="sm" p={0} onClick={onBack}>
+            <CustomIcon name="chevron-left" boxSize={4} />
+          </Button>
+          <TableTitle title="All Votes" />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};

src/lib/pages/proposal-details/components/DepositPeriodSection.tsx

@@ -0,0 +1,46 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { TableTitle } from "lib/components/table";
+import { Tooltip } from "lib/components/Tooltip";
+
+export const DepositPeriodSection = () => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      direction="column"
+      background={isMobile ? "transparent" : "gray.900"}
+      border="1px solid"
+      borderColor={isMobile ? "transparent" : "gray.700"}
+      borderRadius="8px"
+      p={isMobile ? 0 : 6}
+      gap={4}
+    >
+      {!isMobile && (
+        <Flex alignItems="center" justifyContent="space-between">
+          <TableTitle title="Depositors" mb={0} />
+          <Tooltip
+            label="After reaching the total deposit amount, the proposal proceeds to the voting period."
+            closeOnClick={false}
+          >
+            <Flex alignItems="center" gap={1}>
+              <Text variant="body2" color="text.dark">
+                Total Deposited
+                <CustomIcon
+                  name="info-circle-solid"
+                  color="gray.600"
+                  boxSize={3}
+                />
+              </Text>
+            </Flex>
+          </Tooltip>
+        </Flex>
+      )}
+      Depositor Tables Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      Porro, soluta in molestias saepe vero possimus ullam tempora eum vitae
+      provident corporis ab eligendi non facilis quae consequatur beatae quo.
+      Nostrum!
+    </Flex>
+  );
+};

src/lib/pages/proposal-details/components/ProposalOverview.tsx

@@ -0,0 +1,83 @@
+import { Flex, Grid, GridItem, Heading, Text } from "@chakra-ui/react";
+
+const ProposalStatus = () => {
+  return (
+    <Flex
+      borderRadius="8px"
+      border="1px solid"
+      borderColor="gray.700"
+      background="gray.900"
+      p={4}
+    >
+      Current Status component
+    </Flex>
+  );
+};
+export const ProposalOverview = () => {
+  return (
+    <Grid
+      gridTemplateColumns={{ base: "1fr", xl: "2fr 1fr" }}
+      gridGap={16}
+      mt={8}
+    >
+      <GridItem>
+        <Flex direction="column" gap={8}>
+          <ProposalStatus />
+          <Flex direction="column" gap={4}>
+            <Heading as="h6" variant="h6">
+              Proposal Description
+            </Heading>
+            <Text variant="body1" wordBreak="break-word">
+              This is a proposal to give the address
+              osmo1raa4kyx5ypz75qqk3566c6slx2mw3qzsu6rymw permission to upload
+              CosmWasm contracts to Osmosis without seeking governance approval
+              for subsequent uploads. Deploying this contract will allow Skip to
+              leverage Osmosis swap hooks to build a service that simplifies
+              cross-chain transfers, swaps, and fee management. Skip will
+              provide this functionality via our free API, which enables
+              applications anywhere in Cosmos to seamlessly draw on Osmosis
+              liquidity. While this proposal gives authority for
+              osmo1raa4kyx5ypz75qqk3566c6slx2mw3qzsu6rymw to permissionlessly
+              upload CosmWasm contracts to Osmosis, governance only signals
+              approval for contracts relating to the function of Skip API
+              service. Details can be seen in the Commonwealth thread:
+              https://gov.osmosis.zone/discussion/11973-skip-api-contract-upload
+            </Text>
+          </Flex>
+          <Flex
+            direction="column"
+            gap={4}
+            pt={8}
+            borderTop="1px solid"
+            borderColor="gray.700"
+          >
+            <Heading as="h6" variant="h6">
+              Proposal Messages
+            </Heading>
+            <Flex
+              background="gray.900"
+              minH={64}
+              alignItems="center"
+              justifyContent="center"
+            >
+              Proposal message content
+            </Flex>
+          </Flex>
+        </Flex>
+      </GridItem>
+      <GridItem>
+        <Heading as="h6" variant="h6" mb={4}>
+          Proposal Period
+        </Heading>
+        <Flex
+          background="gray.900"
+          minH={64}
+          alignItems="center"
+          justifyContent="center"
+        >
+          Proposal period content
+        </Flex>
+      </GridItem>
+    </Grid>
+  );
+};

src/lib/pages/proposal-details/components/ProposalStepper.tsx

@@ -0,0 +1,86 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+
+interface ProposalStepperProps {
+  title: string;
+  description: string;
+  step: number;
+}
+
+export const ProposalStepper = ({
+  title,
+  description,
+  step,
+}: ProposalStepperProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      justifyContent="space-between"
+      w="full"
+      alignItems="flex-start"
+      direction={{ base: "column", md: "row" }}
+    >
+      <Flex
+        alignItems={{ base: "center", md: "flex-start" }}
+        justifyContent="space-between"
+        w="full"
+      >
+        <Flex gap={2}>
+          {/* TODO: Color changes when state changes */}
+          <Flex
+            borderRadius="32px"
+            w={{ base: 5, md: 6 }}
+            minW={{ base: 5, md: 6 }}
+            h={{ base: 5, md: 6 }}
+            minH={{ base: 5, md: 6 }}
+            alignItems="center"
+            justifyContent="center"
+            background="gray.500"
+            color="background.main"
+            fontWeight={400}
+          >
+            {step}
+          </Flex>
+          <Flex
+            direction="column"
+            alignItems={{ base: "center", md: "flex-start" }}
+          >
+            <Text variant="body1" color="text.main" fontWeight={600}>
+              {title}
+            </Text>
+            {!isMobile && (
+              <Text variant="body3" color="text.dark" textAlign="left">
+                {description}
+              </Text>
+            )}
+          </Flex>
+        </Flex>
+        <Flex
+          alignItems="center"
+          gap={2}
+          background="gray.900"
+          borderRadius="8px"
+          px={2}
+        >
+          <Flex
+            h={3}
+            minH={3}
+            w={3}
+            minW={3}
+            background="gray.600"
+            borderRadius="24px"
+          />
+          <Text variant="body3" color="text.main">
+            Waiting For Deposit
+          </Text>
+        </Flex>
+      </Flex>
+      {isMobile && (
+        <Text variant="body3" color="text.dark" textAlign="left" mt={1}>
+          {description}
+        </Text>
+      )}
+    </Flex>
+  );
+};

src/lib/pages/proposal-details/components/ProposalTop.tsx

@@ -0,0 +1,5 @@
+import { Flex } from "@chakra-ui/react";
+
+export const ProposalTop = ({ id }: { id: number }) => {
+  return <Flex> {id} proposal top</Flex>;
+};

src/lib/pages/proposal-details/components/ValidatorVotesTable.tsx

@@ -0,0 +1,42 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Button, Flex } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { TableTitle } from "lib/components/table";
+
+interface ValidatorVotesTableProps extends FlexProps {
+  onBack: () => void;
+}
+
+export const ValidatorVotesTable = ({
+  onBack,
+  ...props
+}: ValidatorVotesTableProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      {...props}
+      direction="column"
+      background={isMobile ? "transparent" : "gray.900"}
+      border="1px solid"
+      borderColor={isMobile ? "transparent" : "gray.700"}
+      borderRadius="8px"
+      p={isMobile ? 0 : 6}
+      gap={4}
+    >
+      <Flex
+        gap={3}
+        alignItems={{ base: "start", md: "center" }}
+        direction={{ base: "column", md: "row" }}
+      >
+        <Flex gap={2}>
+          <Button variant="ghost-gray" size="sm" p={0} onClick={onBack}>
+            <CustomIcon name="chevron-left" boxSize={4} />
+          </Button>
+          <TableTitle title="Validator Votes" />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};