Merge pull request #1038 from alleslabs/feature/cfe-580-custom-networ…

…ks-options

[CFE-580] Feature: custom networks options

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1052](https://github.com/alleslabs/celatone-frontend/pull/1052) Add entry point to add custom minitias network in network selector
+- [#1038](https://github.com/alleslabs/celatone-frontend/pull/1038) Add custom networks options page to navigate between manual and upload json
 - [#1054](https://github.com/alleslabs/celatone-frontend/pull/1054) Add chain config store, useChainConfig hook, and apply it all places
 
 ### Improvements

src/lib/layout/network-menu/NetworkMenuBody.tsx

@@ -1,6 +1,8 @@
-import { Accordion, Divider, Flex } from "@chakra-ui/react";
+import { Accordion, Button, Divider, Flex } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 
+import { AppLink } from "lib/components/AppLink";
+import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
 import type { Option } from "lib/types";
 
@@ -59,6 +61,19 @@ export const NetworkMenuBody = observer(
             }
             onClose={onClose}
           />
+          <Divider borderColor="gray.700" />
+          <AppLink href="/add-network">
+            <Button
+              variant="outline-gray"
+              justifyContent="flex-start"
+              leftIcon={<CustomIcon name="plus" boxSize={4} color="gray.600" />}
+              onClick={onClose}
+              w="full"
+              h={12}
+            >
+              Add custom Minitia
+            </Button>
+          </AppLink>
         </Flex>
       </Accordion>
       {filteredPinnedChains.length +

src/lib/layout/network-menu/NetworkMenuTop.tsx

@@ -1,19 +1,22 @@
-import { Flex, Heading, Kbd, Text } from "@chakra-ui/react";
+import { Box, Flex, Heading, Kbd, Text } from "@chakra-ui/react";
 import type { KeyboardEvent as ReactKeyboardEvent } from "react";
 
 import { useIsMac, useMobile } from "lib/app-provider";
+import { AppLink } from "lib/components/AppLink";
 import InputWithIcon from "lib/components/InputWithIcon";
 
 interface NetworkMenuTopProps {
   keyword: string;
   setKeyword: (value: string) => void;
   handleOnKeyDown: (e: ReactKeyboardEvent<HTMLDivElement>) => void;
+  onClose: () => void;
 }
 
 export const NetworkMenuTop = ({
   keyword,
   setKeyword,
   handleOnKeyDown,
+  onClose,
 }: NetworkMenuTopProps) => {
   const isMobile = useMobile();
   const isMac = useIsMac();
@@ -40,6 +43,21 @@ export const NetworkMenuTop = ({
             </Flex>
           )}
         </Flex>
+        <Box>
+          <Text as="span" variant="body3" color="text.dark">
+            Want to add your network?
+          </Text>{" "}
+          <AppLink href="/add-network" onClick={onClose}>
+            <Text
+              as="span"
+              variant="body3"
+              color="secondary.main"
+              _hover={{ textDecoration: "underline" }}
+            >
+              Add a custom chain.
+            </Text>
+          </AppLink>
+        </Box>
       </Flex>
       <InputWithIcon
         placeholder="Search by Name or Chain ID"

src/lib/layout/network-menu/index.tsx

@@ -62,6 +62,7 @@ export const NetworkMenu = observer(() => {
               keyword={keyword}
               setKeyword={setKeyword}
               handleOnKeyDown={handleOnKeyDown}
+              onClose={onClose}
             />
           </DrawerHeader>
           <DrawerCloseButton color="text.dark" />

src/lib/pages/add-network-manual/index.tsx

@@ -0,0 +1,69 @@
+import { Flex } from "@chakra-ui/react";
+import { useState } from "react";
+
+import ActionPageContainer from "lib/components/ActionPageContainer";
+import { CustomNetworkFooterCta } from "lib/components/custom-network";
+import { CustomIcon } from "lib/components/icon";
+import { CelatoneSeo } from "lib/components/Seo";
+
+import { AddNetworkStepper } from "./components/AddNetworkStepper";
+import GasFeeDetails from "./components/GasFeeDetails";
+import NetworkDetails from "./components/NetworkDetails";
+import SupportedFeatures from "./components/SupportedFeatures";
+import WalletRegistry from "./components/WalletRegistry";
+
+export const AddNetworkManual = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const steps = [
+    <NetworkDetails key="network-details" />,
+    <SupportedFeatures key="supported-features" />,
+    <GasFeeDetails key="gas-fee-details" />,
+    <WalletRegistry key="wallet-registry" />,
+  ];
+
+  const nextStep = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const leftButtonProps = {
+    label: "Previous",
+    action: prevStep,
+    variant: "outline-secondary",
+    isDisabled: currentStep === 0,
+  };
+
+  const rightButtonProps = {
+    label: "Next",
+    action: nextStep,
+    variant: "primary",
+    isDisabled: currentStep === steps.length - 1,
+    rightIcon: <CustomIcon name="chevron-right" />,
+  };
+
+  return (
+    <>
+      <CelatoneSeo pageName="Add Minitias" />
+      <Flex direction="column" position="relative" w="full">
+        <Flex position="sticky" top={0} left={0} w="full" zIndex={2}>
+          <AddNetworkStepper currentStep={currentStep} />
+        </Flex>
+        <ActionPageContainer width={640}>
+          {steps[currentStep]}
+        </ActionPageContainer>
+        <CustomNetworkFooterCta
+          leftButtonProps={leftButtonProps}
+          rightButtonProps={rightButtonProps}
+        />
+      </Flex>
+    </>
+  );
+};

src/lib/pages/add-network/index.tsx

@@ -1,69 +1,44 @@
-import { Flex } from "@chakra-ui/react";
-import { useState } from "react";
+import { Alert, AlertDescription, Flex, Heading, Text } from "@chakra-ui/react";
 
+import { useInternalNavigate } from "lib/app-provider";
 import ActionPageContainer from "lib/components/ActionPageContainer";
-import { CustomNetworkFooterCta } from "lib/components/custom-network";
-import { CustomIcon } from "lib/components/icon";
+import { ButtonCard } from "lib/components/ButtonCard";
 import { CelatoneSeo } from "lib/components/Seo";
 
-import { AddNetworkStepper } from "./components/AddNetworkStepper";
-import GasFeeDetails from "./components/GasFeeDetails";
-import NetworkDetails from "./components/NetworkDetails";
-import SupportedFeatures from "./components/SupportedFeatures";
-import WalletRegistry from "./components/WalletRegistry";
-
 export const AddNetwork = () => {
-  const [currentStep, setCurrentStep] = useState(0);
-
-  const steps = [
-    <NetworkDetails key="network-details" />,
-    <SupportedFeatures key="supported-features" />,
-    <GasFeeDetails key="gas-fee-details" />,
-    <WalletRegistry key="wallet-registry" />,
-  ];
-
-  const nextStep = () => {
-    if (currentStep < steps.length - 1) {
-      setCurrentStep(currentStep + 1);
-    }
-  };
-
-  const prevStep = () => {
-    if (currentStep > 0) {
-      setCurrentStep(currentStep - 1);
-    }
-  };
-
-  const leftButtonProps = {
-    label: "Previous",
-    action: prevStep,
-    variant: "outline-secondary",
-    isDisabled: currentStep === 0,
-  };
-
-  const rightButtonProps = {
-    label: "Next",
-    action: nextStep,
-    variant: "primary",
-    isDisabled: currentStep === steps.length - 1,
-    rightIcon: <CustomIcon name="chevron-right" />,
-  };
+  const navigate = useInternalNavigate();
 
   return (
-    <>
+    <ActionPageContainer>
       <CelatoneSeo pageName="Add Minitias" />
-      <Flex direction="column" position="relative" w="full">
-        <Flex position="sticky" top={0} left={0} w="full" zIndex={2}>
-          <AddNetworkStepper currentStep={currentStep} />
+      <Flex direction="column" gap={12}>
+        <Flex direction="column" gap={4} textAlign="center">
+          <Heading as="h4" variant="h4">
+            Add Custom Minitia
+          </Heading>
+          <Alert my={4} p={3} variant="info">
+            <AlertDescription>
+              <Text color="text.dark" textAlign="center" lineHeight="normal">
+                Please note that the custom Minitia you add on our website will
+                only be stored locally on your device.
+              </Text>
+            </AlertDescription>
+          </Alert>
+        </Flex>
+        <Flex direction="column" gap={4}>
+          <ButtonCard
+            title="Fill in Network Details Manually"
+            description="Add new Minitia through fill in each configuration manually"
+            onClick={() => navigate({ pathname: "/add-network/manual" })}
+          />
+          {/* // TODO: Open this code to enable import JSON option entry point */}
+          {/* <ButtonCard
+            title="Import JSON"
+            description="Import available JSON that contains all the configuration"
+            onClick={() => navigate({ pathname: "/add-network/json" })}
+          /> */}
         </Flex>
-        <ActionPageContainer width={640}>
-          {steps[currentStep]}
-        </ActionPageContainer>
-        <CustomNetworkFooterCta
-          leftButtonProps={leftButtonProps}
-          rightButtonProps={rightButtonProps}
-        />
       </Flex>
-    </>
+    </ActionPageContainer>
   );
 };

src/pages/[network]/add-network/manual.tsx

@@ -0,0 +1,3 @@
+import { AddNetworkManual } from "lib/pages/add-network-manual";
+
+export default AddNetworkManual;

src/pages/add-network/manual.tsx

@@ -0,0 +1,3 @@
+import { AddNetworkManual } from "lib/pages/add-network-manual";
+
+export default AddNetworkManual;