fix: disable wasm on account detail

CHANGELOG.md

@@ -75,6 +75,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#395](https://github.com/alleslabs/celatone-frontend/pull/395) Disable wasm related tabs on the account detail page
 - [#392](https://github.com/alleslabs/celatone-frontend/pull/392) Fix format denom function
 - [#390](https://github.com/alleslabs/celatone-frontend/pull/390) Fix minor styling
 - [#391](https://github.com/alleslabs/celatone-frontend/pull/391) Fix incorrect empty state for past txs table

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

@@ -11,7 +11,7 @@ import {
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import { useValidateAddress } from "lib/app-provider";
+import { useValidateAddress, useWasmConfig } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
@@ -63,6 +63,8 @@ interface AccountDetailsBodyProps {
 const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 
 const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const [tabIndex, setTabIndex] = useState(TabIndex.Overview);
   const tableHeaderId = "accountDetailsTab";
   const { data: publicInfo } = usePublicProjectByAccountAddress(accountAddress);
@@ -156,7 +158,7 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
         </Flex>
       )}
 
-      <Tabs index={tabIndex}>
+      <Tabs index={tabIndex} isLazy lazyBehavior="keepMounted">
         <TabList
           borderBottom="1px solid"
           borderColor="gray.700"
@@ -187,20 +189,23 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
             count={tableCounts.codesCount}
             isDisabled={!tableCounts.codesCount}
             onClick={() => handleTabChange(TabIndex.Codes)}
+            hidden={!wasm.enabled}
           >
             Codes
           </CustomTab>
           <CustomTab
             count={tableCounts.contractsCount}
             isDisabled={!tableCounts.contractsCount}
             onClick={() => handleTabChange(TabIndex.Contracts)}
+            hidden={!wasm.enabled}
           >
             Contracts
           </CustomTab>
           <CustomTab
             count={tableCounts.contractsAdminCount}
             isDisabled={!tableCounts.contractsAdminCount}
             onClick={() => handleTabChange(TabIndex.Admins)}
+            hidden={!wasm.enabled}
           >
             Admins
           </CustomTab>
@@ -258,27 +263,31 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
               scrollComponentId={tableHeaderId}
               onViewMore={() => handleTabChange(TabIndex.Txs)}
             />
-            <StoredCodesTable
-              walletAddress={accountAddress}
-              scrollComponentId={tableHeaderId}
-              totalData={tableCounts.codesCount}
-              refetchCount={refetchCodesCount}
-              onViewMore={() => handleTabChange(TabIndex.Codes)}
-            />
-            <InstantiatedContractsTable
-              walletAddress={accountAddress}
-              scrollComponentId={tableHeaderId}
-              totalData={tableCounts.contractsCount}
-              refetchCount={refetchContractsCount}
-              onViewMore={() => handleTabChange(TabIndex.Contracts)}
-            />
-            <AdminContractsTable
-              walletAddress={accountAddress}
-              scrollComponentId={tableHeaderId}
-              totalData={tableCounts.contractsAdminCount}
-              refetchCount={refetchContractsAdminCount}
-              onViewMore={() => handleTabChange(TabIndex.Admins)}
-            />
+            {wasm.enabled && (
+              <>
+                <StoredCodesTable
+                  walletAddress={accountAddress}
+                  scrollComponentId={tableHeaderId}
+                  totalData={tableCounts.codesCount}
+                  refetchCount={refetchCodesCount}
+                  onViewMore={() => handleTabChange(TabIndex.Codes)}
+                />
+                <InstantiatedContractsTable
+                  walletAddress={accountAddress}
+                  scrollComponentId={tableHeaderId}
+                  totalData={tableCounts.contractsCount}
+                  refetchCount={refetchContractsCount}
+                  onViewMore={() => handleTabChange(TabIndex.Contracts)}
+                />
+                <AdminContractsTable
+                  walletAddress={accountAddress}
+                  scrollComponentId={tableHeaderId}
+                  totalData={tableCounts.contractsAdminCount}
+                  refetchCount={refetchContractsAdminCount}
+                  onViewMore={() => handleTabChange(TabIndex.Admins)}
+                />
+              </>
+            )}
             <OpenedProposalsTable
               walletAddress={accountAddress}
               scrollComponentId={tableHeaderId}

src/lib/services/codeService.ts

@@ -3,7 +3,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useWasmConfig } from "lib/app-provider";
 import {
   getCodeDataByCodeId,
   getCodeListByIDsQueryDocument,
@@ -167,6 +167,8 @@ export const useCodeListByWalletAddressPagination = (
   pageSize: number
 ): UseQueryResult<CodeInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -202,14 +204,20 @@ export const useCodeListByWalletAddressPagination = (
       walletAddress,
     ],
     createQueryFnWithTimeout(queryFn),
-    { enabled: !!walletAddress, retry: 1, refetchOnWindowFocus: false }
+    {
+      enabled: wasm.enabled && !!walletAddress,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
   );
 };
 
 export const useCodeListCountByWalletAddress = (
   walletAddress: Option<HumanAddr>
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -228,7 +236,7 @@ export const useCodeListCountByWalletAddress = (
     queryFn,
     {
       keepPreviousData: true,
-      enabled: !!walletAddress,
+      enabled: wasm.enabled && !!walletAddress,
     }
   );
 };

src/lib/services/contractService.ts

@@ -2,7 +2,7 @@ import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 
-import { useCelatoneApp } from "lib/app-provider";
+import { useCelatoneApp, useWasmConfig } from "lib/app-provider";
 import {
   getAdminByContractAddressesQueryDocument,
   getContractListByAdmin,
@@ -70,6 +70,7 @@ export const useInstantiatedCountByUserQuery = (
   walletAddr: Option<HumanAddr>
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
 
   const queryFn = useCallback(async () => {
     if (!walletAddr)
@@ -89,7 +90,7 @@ export const useInstantiatedCountByUserQuery = (
     queryFn,
     {
       keepPreviousData: true,
-      enabled: !!walletAddr,
+      enabled: wasm.enabled && !!walletAddr,
     }
   );
 };
@@ -369,6 +370,8 @@ export const useContractListByWalletAddressPagination = (
   pageSize: number
 ): UseQueryResult<ContractInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -406,7 +409,11 @@ export const useContractListByWalletAddressPagination = (
       walletAddress,
     ],
     createQueryFnWithTimeout(queryFn),
-    { enabled: !!walletAddress, retry: 1, refetchOnWindowFocus: false }
+    {
+      enabled: wasm.enabled && !!walletAddress,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
   );
 };
 
@@ -416,6 +423,8 @@ export const useContractListByAdminPagination = (
   pageSize: number
 ): UseQueryResult<ContractInfo[]> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error(
@@ -452,14 +461,20 @@ export const useContractListByAdminPagination = (
       walletAddress,
     ],
     createQueryFnWithTimeout(queryFn),
-    { enabled: !!walletAddress, retry: 1, refetchOnWindowFocus: false }
+    {
+      enabled: wasm.enabled && !!walletAddress,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    }
   );
 };
 
 export const useContractListCountByAdmin = (
   walletAddress: Option<HumanAddr>
 ): UseQueryResult<Option<number>> => {
   const { indexerGraphClient } = useCelatoneApp();
+  const wasm = useWasmConfig({ shouldRedirect: false });
+
   const queryFn = useCallback(async () => {
     if (!walletAddress)
       throw new Error("Wallet address not found (useContractListCountByAdmin)");
@@ -476,7 +491,7 @@ export const useContractListCountByAdmin = (
     createQueryFnWithTimeout(queryFn),
     {
       keepPreviousData: true,
-      enabled: !!walletAddress,
+      enabled: wasm.enabled && !!walletAddress,
     }
   );
 };