Feat/add user docs navigation

CHANGELOG.md

@@ -93,6 +93,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#843](https://github.com/alleslabs/celatone-frontend/pull/843) Add link to user document
 - [#845](https://github.com/alleslabs/celatone-frontend/pull/845) Edit error fetching message on the contract state
 - [#844](https://github.com/alleslabs/celatone-frontend/pull/844) Modify wording status for rejected proposals
 - [#841](https://github.com/alleslabs/celatone-frontend/pull/841) Bump cosmos-kit package fixing the installed wallet issue

src/lib/components/PageHeader.tsx

@@ -0,0 +1,37 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+
+import { useMobile } from "lib/app-provider";
+
+import { UserDocsLink } from "./UserDocsLink";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle: string;
+  docHref: string;
+}
+
+export const PageHeader = ({ title, subtitle, docHref }: PageHeaderProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex w="full" justifyContent="space-between" alignItems="center" mb={8}>
+      <div>
+        <Flex justifyContent="space-between">
+          <Heading
+            as="h5"
+            variant="h5"
+            color="text.main"
+            fontWeight={600}
+            minH="36px"
+          >
+            {title}
+          </Heading>
+          {isMobile && <UserDocsLink href={docHref} isButton />}
+        </Flex>
+        <Text variant="body2" color="text.dark" fontWeight={500}>
+          {subtitle}
+        </Text>
+      </div>
+      {!isMobile && <UserDocsLink href={docHref} isButton />}
+    </Flex>
+  );
+};

src/lib/components/UserDocsLink.tsx

@@ -0,0 +1,87 @@
+import { Button, Flex, Text } from "@chakra-ui/react";
+import Link from "next/link";
+
+import { trackWebsite } from "lib/amplitude";
+import { DOCS_LINK } from "lib/data";
+
+import { CustomIcon } from "./icon";
+
+interface UserDocsLinkProps {
+  href?: string;
+  title?: string;
+  cta?: string;
+  isButton?: boolean;
+  isSmall?: boolean;
+  mt?: number;
+}
+
+export const UserDocsLink = ({
+  title,
+  cta,
+  href,
+  isButton = false,
+  isSmall = true,
+  mt = 8,
+}: UserDocsLinkProps) =>
+  isButton ? (
+    <Link
+      href={`${DOCS_LINK}/${href}`}
+      onClick={(e) => {
+        trackWebsite(`${DOCS_LINK}/${href}`);
+        e.stopPropagation();
+      }}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Button
+        variant={{
+          base: "ghost-primary",
+          md: isSmall ? "ghost-primary" : "outline-primary",
+        }}
+        size={isSmall ? "sm" : "md"}
+        leftIcon={<CustomIcon name="document" boxSize={3} />}
+      >
+        View Doc
+      </Button>
+    </Link>
+  ) : (
+    <Flex
+      gap={{ base: 1, md: 2 }}
+      alignItems="center"
+      mt={mt}
+      direction={{ base: "column", md: "row" }}
+    >
+      {title && (
+        <Text color="text.main" variant="body2">
+          {title}
+        </Text>
+      )}
+      <Link
+        href={`${DOCS_LINK}/${href}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Flex
+          gap={1}
+          alignItems="center"
+          sx={{
+            cursor: "pointer",
+            "&:hover": {
+              "> *": {
+                color: "secondary.light",
+                textDecoration: "underline",
+                transition: "all",
+                transitionDuration: "0.25s",
+                transitionTimingFunction: "ease-in-out",
+              },
+            },
+          }}
+        >
+          <CustomIcon name="document" color="secondary.main" boxSize={3} />
+          <Text color="secondary.main" variant="body2">
+            {cta}
+          </Text>
+        </Flex>
+      </Link>
+    </Flex>
+  );

src/lib/data/constant.ts

@@ -12,6 +12,8 @@ import { MsgType } from "lib/types";
  */
 import { formatSlugName } from "lib/utils/format";
 
+export const DOCS_LINK = "https://docs.alleslabs.com/user-guide";
+
 export const INSTANTIATED_LIST_NAME = "Instantiated by me";
 
 export const SAVED_LIST_NAME = "Saved Contracts";

src/lib/layout/Footer.tsx

@@ -4,9 +4,12 @@ import Link from "next/link";
 
 import { CURR_THEME } from "env";
 import { AmpEvent, track, trackSocial } from "lib/amplitude";
+import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import type { IconKeys } from "lib/components/icon";
 
+import { InformationFooter } from "./InformationFooter";
+
 interface SocialMenuType {
   url: string;
   icon: IconKeys;
@@ -89,30 +92,6 @@ const SocialMenuRender = ({
   </>
 );
 
-const AllesFeedback = () => (
-  <Link
-    href="https://feedback.alleslabs.com"
-    target="_blank"
-    rel="noopener noreferrer"
-    onClick={() => track(AmpEvent.FEEDBACK)}
-  >
-    <Flex
-      gap={1}
-      pr={2}
-      pl={1}
-      borderRadius={8}
-      align="center"
-      _hover={{ background: "gray.800" }}
-      transition="all 0.25s ease-in-out"
-    >
-      <CustomIcon name="feedback" color="gray.600" />
-      <Text variant="body3" color="text.dark">
-        Feedback
-      </Text>
-    </Flex>
-  </Link>
-);
-
 const IconLink = ({
   href,
   icon,
@@ -162,8 +141,8 @@ const IconLink = ({
 );
 
 const Footer = () => {
-  const isThemed = CURR_THEME.footer;
-  return isThemed ? (
+  const isMobile = useMobile();
+  return CURR_THEME.footer ? (
     <Flex
       as="footer"
       direction={{ base: "column", md: "row" }}
@@ -181,7 +160,7 @@ const Footer = () => {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Image src={isThemed.logo} h={{ base: 6, md: 8 }} mr={2} />
+            <Image src={CURR_THEME.footer.logo} h={{ base: 6, md: 8 }} mr={2} />
           </Link>
           <Flex mt={{ base: 2, md: 0 }}>
             <SocialMenuRender isThemed iconSize={5} />
@@ -192,7 +171,7 @@ const Footer = () => {
           color="gray.400"
           textAlign={{ base: "center", md: "left" }}
         >
-          {isThemed.description}
+          {CURR_THEME.footer.description}
         </Text>
       </Flex>
       <Flex
@@ -211,10 +190,10 @@ const Footer = () => {
           />
         </Flex>
         <Flex gap={1}>
-          <AllesFeedback />
           <SocialMenuRender iconSize={4} />
         </Flex>
       </Flex>
+      {isMobile && <InformationFooter />}
     </Flex>
   ) : (
     <Flex
@@ -228,14 +207,14 @@ const Footer = () => {
     >
       <Flex direction="row" gap={1} align="center" mb={{ base: 2, md: 0 }}>
         <SocialMenuRender iconSize={5} />
-        <AllesFeedback />
       </Flex>
       <IconLink
         href="https://twitter.com/alleslabs"
         icon="alles"
         text1="Made by"
         text2="Alles Labs"
       />
+      {isMobile && <InformationFooter />}
     </Flex>
   );
 };

src/lib/layout/InformationFooter.tsx

@@ -0,0 +1,92 @@
+import { track } from "@amplitude/analytics-browser";
+import { Flex, Skeleton, Text } from "@chakra-ui/react";
+import Link from "next/link";
+
+import { AmpEvent, trackWebsite } from "lib/amplitude";
+import type { IconKeys } from "lib/components/icon";
+import { CustomIcon } from "lib/components/icon";
+import { DOCS_LINK } from "lib/data";
+import { useOverviewsStats } from "lib/services/overviewService";
+
+const FOOTER_BUTTONS = [
+  {
+    href: `${DOCS_LINK}/introduction/user-introduction`,
+    icon: "document" as IconKeys,
+    text: "View Doc",
+    onClick: () => trackWebsite(`${DOCS_LINK}/introduction/user-introduction`),
+  },
+  {
+    href: "https://feedback.alleslabs.com",
+    icon: "feedback" as IconKeys,
+    text: "Feedback",
+    onClick: () => track(AmpEvent.FEEDBACK),
+  },
+];
+
+export const InformationFooter = () => {
+  const { data: overviewsStats, isLoading } = useOverviewsStats();
+
+  return (
+    <Flex direction={{ base: "row", md: "column" }} mt={8} mb={2}>
+      {isLoading ? (
+        <Skeleton
+          ml={2}
+          h={4}
+          w={24}
+          borderRadius={8}
+          startColor="gray.500"
+          endColor="gray.700"
+        />
+      ) : (
+        <Flex gap={1} py={1} px={2} align="center">
+          <CustomIcon name="block" color="gray.600" boxSize={3} />
+          <Text variant="body3" color="text.dark">
+            {overviewsStats?.latestBlock ?? "N/A"}
+          </Text>
+          {overviewsStats && (
+            <Flex
+              w={2}
+              h={2}
+              bgColor="success.main"
+              borderRadius="16px"
+              sx={{
+                animation: `pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`,
+                "@keyframes pulse": {
+                  "0%, 100%": { opacity: 1 },
+                  "50%": { opacity: 0.5 },
+                },
+              }}
+            />
+          )}
+        </Flex>
+      )}
+      <Flex>
+        {FOOTER_BUTTONS.map(({ href, icon, text, onClick }) => (
+          <Link
+            key={text}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={onClick}
+          >
+            <Flex
+              gap={1}
+              py={1}
+              px={2}
+              borderRadius={4}
+              align="center"
+              cursor="pointer"
+              _hover={{ background: "gray.800" }}
+              transition="all 0.25s ease-in-out"
+            >
+              <CustomIcon name={icon} color="gray.600" boxSize={3} />
+              <Text variant="body3" color="text.dark">
+                {text}
+              </Text>
+            </Flex>
+          </Link>
+        ))}
+      </Flex>
+    </Flex>
+  );
+};