fix(components): add transition and fix ux writing on dev features

CHANGELOG.md

@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#529](https://github.com/alleslabs/celatone-frontend/pull/529) Improve developer features ux writing and transition
 - [#528](https://github.com/alleslabs/celatone-frontend/pull/528) Improve developer features toggle for a smoother ux
 - [#519](https://github.com/alleslabs/celatone-frontend/pull/519) Validate schema input when initialFormData has changed
 - [#513](https://github.com/alleslabs/celatone-frontend/pull/513) Disable simulating fee when JSON input is invalid

src/lib/layout/SubHeader.tsx

@@ -7,13 +7,15 @@ import {
   Button,
   Heading,
 } from "@chakra-ui/react";
+import { AnimatePresence } from "framer-motion";
 import type { CSSProperties, Dispatch, SetStateAction } from "react";
 import { useEffect, useRef } from "react";
 
 import { usePoolConfig, useGovConfig, useWasmConfig } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
+import { MotionBox } from "lib/components/MotionBox";
 import { Tooltip } from "lib/components/Tooltip";
 import { useIsCurrentPage } from "lib/hooks";
 import type { Option } from "lib/types";
@@ -30,41 +32,57 @@ const FirstLandPrompt = ({
 }: {
   setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
 }) => (
-  <Flex
-    position="absolute"
-    right="24px"
-    mt={1}
-    gap={2}
-    p={6}
-    direction="column"
-    bg="gray.800"
-    w="430px"
-    borderRadius={4}
-    boxShadow={boxShadow}
-    zIndex="popover"
-  >
-    <Flex>
-      <Heading as="h6" variant="h6" fontWeight={600}>
-        Want to
-        <Text as="span" color="accent.main" pl={1}>
-          Deploy, Query, or Execute?
+  <AnimatePresence>
+    <MotionBox
+      key="modal"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{
+        delay: "1",
+        duration: "0.5",
+        ease: "easeInOut",
+      }}
+      position="absolute"
+      right="24px"
+      mt={1}
+      gap={2}
+      p={6}
+      display="flex"
+      flexDirection="column"
+      bg="gray.800"
+      w="430px"
+      borderRadius={4}
+      boxShadow={boxShadow}
+      zIndex="popover"
+    >
+      <Flex>
+        <Heading as="h6" variant="h6" fontWeight={600}>
+          Want to
+          <Text as="span" color="accent.main" pl={1}>
+            Deploy, Query, or Execute?
+          </Text>
+        </Heading>
+      </Flex>
+      <Text variant="body2" color="text.main" my={1}>
+        Turn on Dev Features to get full access to our deploy, query, execute
+        and other developer features through{" "}
+        <Text as="span" fontWeight={600}>
+          sidebar navigation
         </Text>
-      </Heading>
-    </Flex>
-    <Text variant="body2" color="text.main" my={1}>
-      Turn on Dev Features to access to our deploy, query, execute and other
-      developer features through side bar navigation.
-    </Text>
-    <Flex direction="column" gap={2}>
-      <Button onClick={() => setIsDevMode(true)}>Turn on Dev Feature!</Button>
-      <Button variant="outline-primary" onClick={() => setIsDevMode(false)}>
-        Use Celatone as Explorer
-      </Button>
-      <Text variant="body2" textAlign="center" color="text.dark">
-        You can change it back anytime
+        .
       </Text>
-    </Flex>
-  </Flex>
+      <Flex direction="column" gap={2}>
+        <Button onClick={() => setIsDevMode(true)}>Turn on Dev Feature!</Button>
+        <Button variant="outline-primary" onClick={() => setIsDevMode(false)}>
+          Use Celatone as Explorer
+        </Button>
+        <Text variant="body3" textAlign="center" color="text.dark">
+          You can change it back anytime
+        </Text>
+      </Flex>
+    </MotionBox>
+  </AnimatePresence>
 );
 
 interface SubHeaderProps {
@@ -162,31 +180,31 @@ const SubHeader = ({
             </AppLink>
           ))}
         </Flex>
-        <FormControl
-          display="flex"
-          alignItems="center"
-          width="fit-content"
-          style={isDevMode === undefined ? switchHighlight : undefined}
+        <Tooltip
+          label="Enable to access to our deploy, query, execute, and other developer features."
+          placement="bottom"
+          isDisabled={isDevMode === undefined}
         >
-          <FormLabel mb={0} cursor="pointer" mr={2}>
-            <Tooltip
-              label="Toggle to enable or disable access to our deploy, query, execute, and other developer features."
-              placement="bottom"
-              isDisabled={isDevMode === undefined}
-            >
+          <FormControl
+            display="flex"
+            alignItems="center"
+            width="fit-content"
+            style={isDevMode === undefined ? switchHighlight : undefined}
+          >
+            <FormLabel mb={0} cursor="pointer" mr={2}>
               <Text variant="body2" color="text.dark" fontWeight={600}>
                 Dev Features
               </Text>
-            </Tooltip>
-          </FormLabel>
-          <Switch
-            size="md"
-            isChecked={isDevMode}
-            onChange={(e) => {
-              setIsDevMode(e.target.checked);
-            }}
-          />
-        </FormControl>
+            </FormLabel>
+            <Switch
+              size="md"
+              isChecked={isDevMode}
+              onChange={(e) => {
+                setIsDevMode(e.target.checked);
+              }}
+            />
+          </FormControl>
+        </Tooltip>
       </Flex>
       {isDevMode === undefined && (
         <FirstLandPrompt setIsDevMode={setIsDevMode} />

src/lib/layout/navbar/index.tsx

@@ -69,7 +69,7 @@ const Navbar = ({ isExpand, isDevMode, setIsExpand }: NavbarProps) => {
     ...(isDevMode && wasm.enabled
       ? [
           {
-            category: "Quick Actions",
+            category: "Dev Features",
             submenu: [
               {
                 name: "Deploy Contract",

src/lib/pages/home/index.tsx

@@ -225,9 +225,6 @@ const Home = () => {
       {!isMobile && (
         <section style={{ marginBottom: "48px" }}>
           <Flex gap={4} direction="column">
-            <Heading as="h5" variant="h5">
-              Dev Shortcuts
-            </Heading>
             <ConnectWalletAlert
               title={`Connect wallet to start using ${CURR_THEME.branding.seo.appName}`}
               subtitle="Specific use cases such as deploying new contract or sending execute messages require a wallet connection."