feat(components): add module interaction page empty state ui

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#490](https://github.com/alleslabs/celatone-frontend/pull/490) Add initia module interaction page
 - [#488](https://github.com/alleslabs/celatone-frontend/pull/488) Add initia navigation and sidebar
 - [#481](https://github.com/alleslabs/celatone-frontend/pull/481) Support Stargaze testnet
 - [#471](https://github.com/alleslabs/celatone-frontend/pull/471) Add proposal config, use Hasura admin secret

src/config/theme/initia.ts

@@ -100,14 +100,16 @@ export const INITIA_THEME: ThemeConfig = {
       color: "inherit",
     },
   },
-  //   button: {
-  //     primary: {
-  //       background: "#F5F5F5",
-  //       color: "#151617",
-  //       disabledBackground: "#A1A6AA",
-  //       disabledColor: "#151617",
-  //     },
-  //   },
+  button: {
+    primary: {
+      background: "#F5F5F5",
+      color: "#151617",
+      disabledBackground: "#A1A6AA",
+      disabledColor: "#151617",
+      hoverBackground: "#B7B7B7",
+      activeBackground: "#B7B7B7",
+    },
+  },
   borderRadius: {
     default: "4px",
     iconButton: "36px",

src/config/theme/sei.ts

@@ -106,6 +106,8 @@ export const SEI_THEME: ThemeConfig = {
       color: "#0C1C23",
       disabledBackground: "#787971",
       disabledColor: "#0C1C23",
+      hoverBackground: "FAF6EF",
+      activeBackground: "FAF6EF",
     },
     outlinePrimary: {
       borderColor: "#787971",

src/config/theme/types.ts

@@ -103,6 +103,8 @@ export type ThemeConfig = {
       color: string;
       disabledBackground: string;
       disabledColor: string;
+      hoverBackground: string;
+      activeBackground: string;
     };
     outlinePrimary?: {
       borderColor: string;

src/lib/components/MotionBox.tsx

@@ -0,0 +1,7 @@
+import { chakra, shouldForwardProp } from "@chakra-ui/react";
+import { motion, isValidMotionProp } from "framer-motion";
+
+export const MotionBox = chakra(motion.div, {
+  shouldForwardProp: (prop) =>
+    isValidMotionProp(prop) || shouldForwardProp(prop),
+});

src/lib/components/state/StateImage.tsx

@@ -12,12 +12,16 @@ const imageSourceMap: Record<ImageVariant, string> = {
 
 interface StateImageProps {
   imageVariant: ImageVariant;
+  width?: string;
 }
 
-export const StateImage = ({ imageVariant }: StateImageProps) => (
+export const StateImage = ({
+  imageVariant,
+  width = "200px",
+}: StateImageProps) => (
   <Image
     src={imageSourceMap[imageVariant]}
     alt="result not found"
-    width="200px"
+    width={width}
   />
 );

src/lib/pages/interaction/component/InteractionTypeSwitch.tsx

@@ -0,0 +1,80 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+import { useRef } from "react";
+
+import { MotionBox } from "lib/components/MotionBox";
+import type { Option } from "lib/types";
+
+export enum MessageTabs {
+  VIEW_MODULE = "View",
+  EXECUTE_MODULE = "Execute",
+}
+
+interface InteractionTypeSwitchProps {
+  currentTab: Option<MessageTabs>;
+  disabled?: boolean;
+  onTabChange: Dispatch<SetStateAction<Option<MessageTabs>>>;
+}
+
+const tabs = Object.values(MessageTabs);
+
+export const InteractionTypeSwitch = ({
+  currentTab,
+  disabled = false,
+  onTabChange,
+}: InteractionTypeSwitchProps) => {
+  const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
+
+  return (
+    <Flex
+      border="1px solid var(--chakra-colors-gray-700)"
+      borderRadius="4px"
+      p={1}
+      direction="row"
+      align="center"
+      position="relative"
+      sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
+    >
+      {tabs.map((tab, idx) => (
+        <MotionBox
+          key={tab}
+          w="full"
+          ref={(el) => {
+            tabRefs.current[idx] = el;
+          }}
+          cursor="pointer"
+          p="2px 10px"
+          variants={{
+            active: { color: "var(--chakra-colors-text-main)" },
+            inactive: {
+              color: "var(--chakra-colors-primary-light)",
+            },
+          }}
+          initial="inactive"
+          animate={currentTab === tab ? "active" : "inactive"}
+          onClick={() => onTabChange(tab)}
+          zIndex={1}
+          textAlign="center"
+        >
+          <Heading as="h6" variant="h6" fontSize="14px">
+            {tab}
+          </Heading>
+        </MotionBox>
+      ))}
+      <MotionBox
+        h={tabRefs.current[activeIndex]?.clientHeight}
+        w={tabRefs.current[activeIndex]?.clientWidth}
+        position="absolute"
+        borderRadius="2px"
+        backgroundColor="primary.dark"
+        animate={{ left: `${tabRefs.current[activeIndex]?.offsetLeft ?? 0}px` }}
+        transition={{
+          type: "spring",
+          stiffness: "250",
+          damping: "30",
+        }}
+      />
+    </Flex>
+  );
+};

src/lib/pages/interaction/index.tsx

@@ -1,19 +1,94 @@
-import { Flex, Text } from "@chakra-ui/react";
+import { Badge, Button, Flex, Heading, Text, Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import PageContainer from "lib/components/PageContainer";
+import { StateImage } from "lib/components/state";
+
+import {
+  InteractionTypeSwitch,
+  MessageTabs,
+} from "./component/InteractionTypeSwitch";
 
 export const Interaction = () => {
-  const { query } = useRouter();
+  const { query, isReady } = useRouter();
+  const [tab, setTab] = useState<MessageTabs>();
+
+  useEffect(() => {
+    if (isReady) {
+      setTab(
+        query.type === "execute"
+          ? MessageTabs.EXECUTE_MODULE
+          : MessageTabs.VIEW_MODULE
+      );
+    }
+  }, [isReady, query.type]);
 
   return (
-    <Flex>
-      <h1>{query.type}</h1>
-      <br />
-      <Text>
-        Interaction: Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        Aliquam voluptas hic aperiam ad sint unde sapiente cupiditate! Quo et
-        cupiditate iure, sequi deserunt tempora corrupti eum. Error facere
-        placeat repellendus?
-      </Text>
-    </Flex>
+    <PageContainer>
+      <Heading as="h5" variant="h5">
+        Module Interactions
+      </Heading>
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        bgColor="gray.900"
+        p={4}
+        borderRadius={4}
+        my={8}
+      >
+        <Text>Select module to interact with ...</Text>
+        <Button variant="primary">Select Module</Button>
+      </Flex>
+      <Flex borderTop="1px solid" borderColor="gray.700" py={8} gap={8}>
+        <Flex flexDirection="column" flex={1}>
+          <Flex alignItems="center" gap={2}>
+            <Text variant="body2" fontWeight={600}>
+              Available functions
+            </Text>
+            <Badge variant="gray" color="text.main" textColor="text.main">
+              <s>0</s>
+            </Badge>
+          </Flex>
+          <Box my={3}>
+            <InteractionTypeSwitch currentTab={tab} onTabChange={setTab} />
+          </Box>
+          <Flex
+            flexDirection="column"
+            bgColor="gray.900"
+            alignItems="center"
+            justifyContent="center"
+            borderRadius={8}
+            p={4}
+            gap={4}
+            height="full"
+          >
+            <StateImage imageVariant="empty" width="80px" />
+            <Text variant="body2" color="text.dark" textAlign="center">
+              Available functions for selected modules will display here
+            </Text>
+          </Flex>
+        </Flex>
+        <Flex
+          flex={4}
+          flexDirection="column"
+          bgColor="gray.900"
+          alignItems="center"
+          justifyContent="center"
+          borderRadius={8}
+          py={24}
+          gap={4}
+        >
+          <StateImage imageVariant="empty" width="80px" />
+          <Text variant="body2" color="text.dark">
+            Initiate your Module interactions by choosing a module and its
+            associated function.
+            <br /> This section will showcase the input or response type
+            required for the functions.
+          </Text>
+          <Button variant="primary">Select Module</Button>
+        </Flex>
+      </Flex>
+    </PageContainer>
   );
 };

src/lib/styles/theme/components/button.ts

@@ -88,8 +88,8 @@ export const Button: ComponentStyleConfig = {
               color: CURR_THEME.button.primary.disabledColor,
             },
           },
-          hoverBg: primaryDark,
-          activeBg: primaryLight,
+          hoverBg: CURR_THEME.button.primary.hoverBackground,
+          activeBg: CURR_THEME.button.primary.activeBackground,
         })
       : generateStyle({
           basic: {

src/pages/[network]/interaction/index.tsx

@@ -0,0 +1,3 @@
+import { Interaction } from "lib/pages/interaction";
+
+export default Interaction;

src/pages/interaction/index.tsx

@@ -0,0 +1,3 @@
+import { Interaction } from "lib/pages/interaction";
+
+export default Interaction;