feat: implement wasm feature from config

CHANGELOG.md

@@ -65,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#369](https://github.com/alleslabs/celatone-frontend/pull/369) Implement Wasm feature from config
 - [#336](https://github.com/alleslabs/celatone-frontend/pull/336) Get address type length from example addresses instead of hardcode
 - [#354](https://github.com/alleslabs/celatone-frontend/pull/354) Remove useChainId and use currentChainId from config
 - [#338](https://github.com/alleslabs/celatone-frontend/pull/338) Use gas from chain config

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

@@ -1,11 +1,17 @@
 import { useCelatoneApp } from "../contexts";
 
-export const useWasmConfig = () => {
+import { useInternalNavigate } from "./useInternalNavigate";
+
+export const useWasmConfig = (shouldRedirect: { shouldRedirect: boolean }) => {
   const {
     chainConfig: {
       features: { wasm },
     },
   } = useCelatoneApp();
+  const navigate = useInternalNavigate();
+
+  if (!wasm.enabled && shouldRedirect)
+    navigate({ pathname: "/", replace: true });
 
   return wasm;
 };

src/lib/app-provider/tx/clearAdmin.ts

@@ -14,7 +14,7 @@ export const useClearAdminTx = (contractAddress: ContractAddr) => {
   const { address, getCosmWasmClient } = useWallet();
   const queryClient = useQueryClient();
   const fabricateFee = useFabricateFee();
-  const wasm = useWasmConfig();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   return useCallback(
     async ({ onTxSucceed }: ClearAdminStreamParams) => {

src/lib/components/dropzone/index.tsx

@@ -4,14 +4,16 @@ import { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
 
 import { UploadIcon } from "../icon";
-import { MAX_FILE_SIZE } from "lib/data";
+import { useWasmConfig } from "lib/app-provider";
 
 interface DropZoneProps
   extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   setFile: (file: File) => void;
 }
 
 export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const onDrop = useCallback(
     (file: File[]) => {
       setFile(file[0]);
@@ -25,7 +27,8 @@ export function DropZone({ setFile, ...componentProps }: DropZoneProps) {
     accept: {
       "application/wasm": [".wasm"],
     },
-    maxSize: MAX_FILE_SIZE,
+    // Throwing error when wasm is disabled will cause the page to not redirect, so default value is assigned instead
+    maxSize: wasm.enabled ? wasm.storeCodeMaxFileSize : 0,
   });
 
   return (

src/lib/data/chain.ts

@@ -80,27 +80,3 @@ export const getNetworkByChainName = (chainName: string): Network => {
 
   return network;
 };
-
-interface ChainConfig {
-  isWasm: boolean;
-}
-
-const CHAIN_CONFIG: Record<SupportedChain, ChainConfig> = {
-  osmosis: {
-    isWasm: true,
-  },
-  terra: {
-    isWasm: true,
-  },
-  mitosis: {
-    isWasm: false,
-  },
-};
-
-export const getChainConfig = () => {
-  if (!SELECTED_CHAIN)
-    throw new Error(`${SELECTED_CHAIN} - environment variable not found`);
-  if (!CHAIN_CONFIG[SELECTED_CHAIN])
-    throw new Error(`Chain not found in chain config`);
-  return CHAIN_CONFIG[SELECTED_CHAIN];
-};

src/lib/data/constant.ts

@@ -63,8 +63,6 @@ export const DEFAULT_LIST: LVPair[] = [
 
 export const DEFAULT_ADDRESS = "default-address";
 
-export const MAX_FILE_SIZE = 800_000;
-
 export const MICRO = 1_000_000;
 
 export const typeUrlDict = {

src/lib/layout/index.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 import { useState, useEffect } from "react";
 
-import { useMobile } from "lib/app-provider";
-import { getChainConfig } from "lib/data";
+import { useMobile, useWasmConfig } from "lib/app-provider";
 import { scrollToTop } from "lib/utils";
 
 import Footer from "./Footer";
@@ -19,9 +18,9 @@ type LayoutProps = {
 const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const isMobile = useMobile();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   const [isExpand, setIsExpand] = useState(!isMobile);
-  const chainConfig = getChainConfig();
 
   const lightMode = {
     templateAreas: `"header""nav""main"`,
@@ -36,7 +35,7 @@ const Layout = ({ children }: LayoutProps) => {
     navBar: <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />,
   };
 
-  const mode = chainConfig.isWasm ? fullMode : lightMode;
+  const mode = wasm.enabled ? fullMode : lightMode;
 
   useEffect(() => {
     scrollToTop();

src/lib/pages/admin/index.tsx

@@ -14,6 +14,7 @@ import {
   useLCDEndpoint,
   useGetAddressType,
   useValidateAddress,
+  useWasmConfig,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -34,6 +35,7 @@ import { MsgType } from "lib/types";
 import { composeMsg, getFirstQueryParam } from "lib/utils";
 
 const UpdateAdmin = () => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const { address } = useWallet();
   const { validateContractAddress, validateUserAddress } = useValidateAddress();

src/lib/pages/code-details/index.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
@@ -123,13 +124,15 @@ const CodeDetailsBody = observer(
 );
 
 const CodeDetails = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
+  const navigate = useInternalNavigate();
   const codeIdParam = getFirstQueryParam(router.query.codeId);
   const data = useCodeData(codeIdParam);
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_CODE_DETAIL);
-  }, [router.isReady]);
+  }, [navigate, router.isReady]);
 
   if (data.isLoading) return <Loading />;
   return (

src/lib/pages/codes/index.tsx

@@ -12,7 +12,7 @@ import type { ChangeEvent } from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { CustomTab } from "lib/components/CustomTab";
 import { FilterByPermission } from "lib/components/forms";
 import InputWithIcon from "lib/components/InputWithIcon";
@@ -30,6 +30,7 @@ interface CodeFilterState {
 }
 
 const Codes = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
@@ -60,7 +61,7 @@ const Codes = observer(() => {
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_MY_CODES);
-  }, [router.isReady]);
+  }, [navigate, router.isReady]);
 
   return (
     <PageContainer>

src/lib/pages/contract-details/index.tsx

@@ -10,7 +10,11 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useValidateAddress } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useValidateAddress,
+  useWasmConfig,
+} from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
@@ -135,7 +139,9 @@ const ContractDetailsBody = observer(
 );
 
 const ContractDetails = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
+  const navigate = useInternalNavigate();
   const { validateContractAddress } = useValidateAddress();
   const contractAddressParam = getFirstQueryParam(
     router.query.contractAddress
@@ -144,7 +150,7 @@ const ContractDetails = observer(() => {
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_CONTRACT_DETAIL);
-  }, [router.isReady]);
+  }, [navigate, router.isReady]);
 
   if (isLoading) return <Loading />;
   return (

src/lib/pages/contract-list/index.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { CreateNewListModal } from "lib/components/modal";
 import PageContainer from "lib/components/PageContainer";
@@ -13,6 +13,7 @@ import { useContractStore } from "lib/providers/store";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 const AllContractListsPage = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const { getContractLists } = useContractStore();
@@ -24,7 +25,7 @@ const AllContractListsPage = observer(() => {
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_ALL_LISTS);
-  }, [router.isReady]);
+  }, [navigate, router.isReady]);
 
   return (
     <PageContainer>

src/lib/pages/contract-list/slug.tsx

@@ -13,7 +13,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import { CustomIcon } from "lib/components/icon";
 import {
@@ -30,7 +30,9 @@ import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import type { ContractAddr } from "lib/types";
 import { formatSlugName, getFirstQueryParam } from "lib/utils";
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 const ContractsByList = observer(() => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const listSlug = getFirstQueryParam(router.query.slug);

src/lib/pages/deploy/index.tsx

@@ -13,6 +13,7 @@ import {
   useInternalNavigate,
   useSelectChain,
   useCurrentNetwork,
+  useWasmConfig,
 } from "lib/app-provider";
 import { ButtonCard } from "lib/components/ButtonCard";
 import { CustomIcon } from "lib/components/icon";
@@ -26,10 +27,11 @@ const Deploy = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
   const selectChain = useSelectChain();
+  useWasmConfig({ shouldRedirect: true });
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_DEPLOY);
-  }, [router.isReady]);
+  }, [navigate, router.isReady]);
 
   return (
     <WasmPageContainer>

src/lib/pages/execute/index.tsx

@@ -3,7 +3,7 @@ import type { Coin } from "@cosmjs/stargate";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
-import { useInternalNavigate } from "lib/app-provider";
+import { useInternalNavigate, useWasmConfig } from "lib/app-provider";
 import { BackButton } from "lib/components/button";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -23,6 +23,7 @@ import {
 import { ExecuteArea } from "./components/ExecuteArea";
 
 const Execute = () => {
+  useWasmConfig({ shouldRedirect: true });
   const router = useRouter();
   const navigate = useInternalNavigate();
   const [initialMsg, setInitialMsg] = useState("");

src/lib/pages/faucet/index.tsx

@@ -79,7 +79,7 @@ const Faucet = () => {
 
   useEffect(() => {
     if (!faucet.enabled) navigate({ pathname: "/", replace: true });
-    else if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);
+    if (router.isReady) AmpTrack(AmpEvent.TO_FAUCET);
   }, [faucet, navigate, router]);
 
   useEffect(() => {

src/lib/pages/home/index.tsx

@@ -3,21 +3,21 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import NetworkOverview from "../network-overview";
-import { getChainConfig } from "lib/data";
+import { useWasmConfig } from "lib/app-provider";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 
 import { QuickMenu } from "./components/QuickMenu";
 import { RecentActivities } from "./components/RecentActivities";
 
 const Home = () => {
   const router = useRouter();
-  const chainConfig = getChainConfig();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   useEffect(() => {
     if (router.isReady) AmpTrack(AmpEvent.TO_OVERVIEW);
   }, [router.isReady]);
 
-  return chainConfig.isWasm ? (
+  return wasm.enabled ? (
     <Box mx="1">
       <QuickMenu />
       <RecentActivities />

src/lib/pages/instantiate/index.tsx

@@ -1,6 +1,7 @@
 import type { InstantiateResult } from "@cosmjs/cosmwasm-stargate";
 import { useEffect, useState } from "react";
 
+import { useWasmConfig } from "lib/app-provider";
 import { scrollToTop } from "lib/utils";
 
 import CompletedPage from "./completed";
@@ -11,6 +12,7 @@ export interface InstantiateTxInfo extends InstantiateResult {
 }
 
 const Index = () => {
+  useWasmConfig({ shouldRedirect: true });
   const [completed, setCompleted] = useState(false);
   const [txInfo, setTxInfo] = useState<InstantiateTxInfo>({
     contractAddress: "",

src/lib/pages/migrate/index.tsx

@@ -9,6 +9,7 @@ import {
   useCelatoneApp,
   useInternalNavigate,
   useLCDEndpoint,
+  useWasmConfig,
 } from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
@@ -32,6 +33,7 @@ const defaultValues: MigratePageState = {
 };
 
 const Migrate = () => {
+  useWasmConfig({ shouldRedirect: true });
   const { indexerGraphClient } = useCelatoneApp();
   const router = useRouter();
   const navigate = useInternalNavigate();
@@ -43,6 +45,7 @@ const Migrate = () => {
     mode: "all",
     defaultValues,
   });
+
   const { migrateStep, contractAddress, admin, codeId } = watch();
 
   const firstStep = migrateStep !== "migrate_contract";