feat: disabled mainnet store code and show alert, refactor select cha…

CHANGELOG.md

@@ -115,6 +115,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#182](https://github.com/alleslabs/celatone-frontend/pull/182) Disable mainnet store code and show alert, refactor select chain hook and alert variants
 - [#181](https://github.com/alleslabs/celatone-frontend/pull/181) Refactor funds filtering logic and sort by denom, enable clicking the whole row of contract list when its readOnly
 - [#171](https://github.com/alleslabs/celatone-frontend/pull/171) Change gql query for better speed, remove unwrap and default values, and better handle data rendering
 - [#177](https://github.com/alleslabs/celatone-frontend/pull/177) Handle instantiate render: tx hash, proposal, genesis, and data not available case

src/lib/app-provider/hooks/index.ts

@@ -7,3 +7,5 @@ export * from "./useExecuteCmds";
 export * from "./useTokensInfo";
 export * from "./useInternalNavigate";
 export * from "./useNetworkChange";
+export * from "./useSelectChain";
+export * from "./useCurrentNetwork";

src/lib/app-provider/hooks/useCurrentNetwork.ts

@@ -0,0 +1,29 @@
+import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+
+import type { Network } from "lib/data";
+import { getNetworkByChainName } from "lib/data";
+import { getFirstQueryParam } from "lib/utils";
+
+export const useCurrentNetwork = (): Network => {
+  const { currentChainName } = useWallet();
+  const router = useRouter();
+
+  return useMemo(() => {
+    if (router.isReady && router.query.network) {
+      let networkRoute = getFirstQueryParam(router.query.network);
+
+      if (
+        networkRoute !== "mainnet" &&
+        networkRoute !== "testnet" &&
+        networkRoute !== "localnet"
+      )
+        networkRoute = "mainnet";
+
+      return networkRoute as Network;
+    }
+
+    return getNetworkByChainName(currentChainName);
+  }, [currentChainName, router]);
+};

src/lib/app-provider/hooks/useSelectChain.ts

@@ -0,0 +1,27 @@
+import { useWallet } from "@cosmos-kit/react";
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+
+import { useInternalNavigate } from "lib/app-provider/hooks/useInternalNavigate";
+import { getNetworkByChainName } from "lib/data";
+
+export const useSelectChain = () => {
+  const router = useRouter();
+  const { currentChainName, setCurrentChain } = useWallet();
+  const navigate = useInternalNavigate();
+
+  return useCallback(
+    (chainName: string) => {
+      if (chainName === currentChainName) return;
+      setCurrentChain(chainName);
+      navigate({
+        pathname: router.pathname.replace("/[network]", ""),
+        query: {
+          ...router.query,
+          network: getNetworkByChainName(chainName),
+        },
+      });
+    },
+    [currentChainName, setCurrentChain, navigate, router]
+  );
+};

src/lib/components/ButtonCard.tsx

@@ -1,10 +1,11 @@
 import type { FlexProps } from "@chakra-ui/react";
 import { Flex, Heading, Icon, Stack, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
 import { MdChevronRight } from "react-icons/md";
 
 interface ButtonCardProps extends FlexProps {
   title: string;
-  description: string;
+  description: ReactNode;
   onClick: () => void;
   disabled?: boolean;
 }
@@ -29,7 +30,7 @@ export const ButtonCard = ({
     _hover={{ bgColor: "pebble.700" }}
     transition="all .25s ease-in-out"
     _disabled={{
-      bgColor: "pebble.800",
+      bgColor: "pebble.900",
       cursor: "not-allowed",
     }}
     {...componentProps}
@@ -42,9 +43,13 @@ export const ButtonCard = ({
       >
         {title}
       </Heading>
-      <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
-        {description}
-      </Text>
+      {typeof description === "string" ? (
+        <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
+          {description}
+        </Text>
+      ) : (
+        description
+      )}
     </Stack>
     <Icon as={MdChevronRight} color="pebble.600" fontSize="28px" />
   </Flex>

src/lib/components/ConnectWalletAlert.tsx

@@ -42,16 +42,8 @@ export const ConnectWalletAlert = ({
       <Flex>
         <AlertIcon />
         <Box>
-          <AlertTitle>
-            <Text variant="body1" fontWeight="600" color="honeydew.main">
-              {title}
-            </Text>
-          </AlertTitle>
-          <AlertDescription>
-            <Text variant="body2" color="honeydew.main">
-              {subtitle}
-            </Text>
-          </AlertDescription>
+          <AlertTitle>{title}</AlertTitle>
+          <AlertDescription>{subtitle}</AlertDescription>
         </Box>
       </Flex>
       <Button variant="ghost-info" gap={2} onClick={onClickConnect}>

src/lib/data/chain.ts

@@ -47,17 +47,17 @@ export const getChainNameByNetwork = (network: Network): string => {
   }
 };
 
-export const getNetworkByChainName = (chainName: string): string => {
-  let network: Option<string>;
+export const getNetworkByChainName = (chainName: string): Network => {
+  let network: Option<Network>;
 
   switch (SELECTED_CHAIN) {
     case "terra":
-      network = Object.keys(TERRA_CHAINS).find(
+      network = (Object.keys(TERRA_CHAINS) as Network[]).find(
         (each) => TERRA_CHAINS[each as keyof Chain] === chainName
       );
       break;
     case "osmosis":
-      network = Object.keys(OSMOSIS_CHAINS).find(
+      network = (Object.keys(OSMOSIS_CHAINS) as Network[]).find(
         (each) => OSMOSIS_CHAINS[each as keyof Chain] === chainName
       );
       break;

src/lib/layout/Header.tsx

@@ -9,44 +9,18 @@ import {
   Image,
 } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
-import { useRouter } from "next/router";
-import { useCallback } from "react";
 import { FiChevronDown } from "react-icons/fi";
 import { MdCheck } from "react-icons/md";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useSelectChain } from "lib/app-provider";
 import { WalletSection } from "lib/components/Wallet";
-import { getNetworkByChainName, getSupportedChainNames } from "lib/data";
+import { getSupportedChainNames } from "lib/data";
 
 import Searchbar from "./Searchbar";
 
 const Header = () => {
-  const router = useRouter();
-  const navigate = useInternalNavigate();
-  const {
-    currentChainRecord,
-    currentChainName,
-    setCurrentChain,
-    getChainRecord,
-  } = useWallet();
-
-  const handleChainSelect = useCallback(
-    (chainName: string) => {
-      if (chainName === currentChainName) return;
-      setCurrentChain(chainName);
-      navigate({
-        pathname: router.pathname.replace("/[network]", ""),
-        query: {
-          /**
-           * @remarks Condition checking varies by chain
-           */
-          ...router.query,
-          network: getNetworkByChainName(chainName),
-        },
-      });
-    },
-    [currentChainName, setCurrentChain, navigate, router]
-  );
+  const { currentChainRecord, currentChainName, getChainRecord } = useWallet();
+  const selectChain = useSelectChain();
 
   return (
     <Flex
@@ -105,7 +79,7 @@ const Header = () => {
               <MenuItem
                 key={chainName}
                 onClick={() => {
-                  handleChainSelect(chainName);
+                  selectChain(chainName);
                 }}
                 flexDirection="column"
                 alignItems="flex-start"

src/lib/pages/deploy/index.tsx

@@ -1,12 +1,28 @@
-import { Heading, Text } from "@chakra-ui/react";
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  Flex,
+  Heading,
+  Text,
+} from "@chakra-ui/react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import {
+  useCurrentNetwork,
+  useInternalNavigate,
+  useSelectChain,
+} from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { Stepper } from "lib/components/stepper";
 import WasmPageContainer from "lib/components/WasmPageContainer";
+import { getChainNameByNetwork } from "lib/data";
 
 const Deploy = () => {
+  const network = useCurrentNetwork();
   const navigate = useInternalNavigate();
+  const selectChain = useSelectChain();
+
+  const isMainnet = network === "mainnet";
   return (
     <WasmPageContainer>
       <Text variant="body1" color="text.dark" mb={3} fontWeight={700}>
@@ -16,9 +32,38 @@ const Deploy = () => {
       <Heading as="h4" variant="h4" my="48px">
         Select Deploy Option
       </Heading>
+      {isMainnet && (
+        <Alert variant="violet" mb="16px" alignItems="flex-start">
+          <AlertIcon mt={2} />
+          <AlertDescription>
+            Uploading new Wasm files on permissioned chains is coming soon to
+            Celatone. Currently, you can upload codes and instantiate contracts
+            without permission on testnet.
+          </AlertDescription>
+        </Alert>
+      )}
       <ButtonCard
         title="Upload new WASM File"
-        description="Store a new Wasm file on-chain"
+        description={
+          isMainnet ? (
+            <Flex fontSize="14px" gap={1}>
+              <Text color="text.disabled">
+                Currently available on testnet only.
+              </Text>
+              <Text
+                color="honeydew.main"
+                _hover={{ textDecoration: "underline" }}
+                cursor="pointer"
+                onClick={() => selectChain(getChainNameByNetwork("testnet"))}
+              >
+                Switch to testnet
+              </Text>
+            </Flex>
+          ) : (
+            "Store a new Wasm file on-chain"
+          )
+        }
+        disabled={isMainnet}
         onClick={() => navigate({ pathname: "/upload" })}
         mb="16px"
       />

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

@@ -1,33 +1,59 @@
-import type { ComponentStyleConfig } from "@chakra-ui/react";
+import type { ColorProps, ComponentStyleConfig } from "@chakra-ui/react";
+
+const dupStyleKeys = ["title", "container", "description"];
+
+const generateVariantStyle = (variant: "honeydew" | "violet") => {
+  let mainColor: ColorProps["color"];
+  let bgColor: ColorProps["color"];
+  let borderColor: ColorProps["color"];
+
+  switch (variant) {
+    case "violet":
+      mainColor = `${variant}.light`;
+      bgColor = "black";
+      borderColor = `${variant}.dark`;
+      break;
+    case "honeydew":
+    default:
+      mainColor = `${variant}.main`;
+      bgColor = `${variant}.background`;
+      break;
+  }
+  return Object.fromEntries(
+    dupStyleKeys.map((key) => [
+      key,
+      {
+        color: mainColor,
+        ...(key === "container" && {
+          bg: bgColor,
+          borderColor: borderColor || mainColor,
+        }),
+      },
+    ])
+  );
+};
 
 export const Alert: ComponentStyleConfig = {
   baseStyle: {
     title: {
       color: "white",
+      fontSize: "16px",
+      fontWeight: 600,
+      letterSpacing: "0.4px",
     },
     container: {
       bg: "pebble.800",
+      border: "1px solid",
+      borderRadius: "8px",
+    },
+    description: {
+      fontSize: "14px",
+      fontWeight: 400,
+      letterSpacing: "0.1px",
     },
   },
   variants: {
-    honeydew: {
-      title: {
-        fontSize: "16px",
-        fontWeight: 600,
-        letterSpacing: "0.4px",
-      },
-      container: {
-        bg: "honeydew.background",
-        border: "1px solid",
-        borderColor: "honeydew.main",
-        borderRadius: "8px",
-        color: "honeydew.main",
-      },
-      description: {
-        fontSize: "12px",
-        fontWeight: 400,
-        letterSpacing: "0.1px",
-      },
-    },
+    honeydew: generateVariantStyle("honeydew"),
+    violet: generateVariantStyle("violet"),
   },
 };