Switch to schema tab when available and add msg scrolling

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#486](https://github.com/alleslabs/celatone-frontend/pull/486) Switch to schema tab when available and prefill,expand,and scroll to the prefill msg
 - [#482](https://github.com/alleslabs/celatone-frontend/pull/482) Add json schema functionality to query page
 - [#477](https://github.com/alleslabs/celatone-frontend/pull/477) Add json schema section on code detail page
 - [#475](https://github.com/alleslabs/celatone-frontend/pull/475) Add json schema functionality to instantiate contract

src/lib/app-provider/contexts/app.tsx

@@ -1,7 +1,7 @@
 import { useModalTheme } from "@cosmos-kit/react";
 import { GraphQLClient } from "graphql-request";
 import { observer } from "mobx-react-lite";
-import type { Dispatch, ReactNode, SetStateAction } from "react";
+import type { ReactNode } from "react";
 import {
   useCallback,
   useState,
@@ -21,13 +21,11 @@ import { SUPPORTED_CHAIN_IDS } from "env";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
 import { NetworkErrorState } from "lib/components/state/NetworkErrorState";
 import { DEFAULT_ADDRESS } from "lib/data";
-import { useLocalStorage } from "lib/hooks/useLocalStorage";
 import {
   useCodeStore,
   useContractStore,
   usePublicProjectStore,
 } from "lib/providers/store";
-import type { Option } from "lib/types";
 import { formatUserKey } from "lib/utils";
 
 interface AppProviderProps {
@@ -40,10 +38,6 @@ interface AppContextInterface {
   chainConfig: ChainConfig;
   indexerGraphClient: GraphQLClient;
   constants: ProjectConstants;
-  isExpand: boolean;
-  isDevMode: Option<boolean>;
-  setIsExpand: Dispatch<SetStateAction<boolean>>;
-  setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
 }
 
 const AppContext = createContext<AppContextInterface>({
@@ -52,10 +46,6 @@ const AppContext = createContext<AppContextInterface>({
   chainConfig: DEFAULT_CHAIN_CONFIG,
   indexerGraphClient: new GraphQLClient(DEFAULT_CHAIN_CONFIG.indexer),
   constants: PROJECT_CONSTANTS,
-  isExpand: false,
-  isDevMode: undefined,
-  setIsExpand: () => {},
-  setIsDevMode: () => {},
 });
 
 export const AppProvider = observer(({ children }: AppProviderProps) => {
@@ -67,13 +57,6 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
   const [currentChainName, setCurrentChainName] = useState<string>();
   const [currentChainId, setCurrentChainId] = useState("");
 
-  // TODO - Revisit localstorage
-  const [isDevMode, setIsDevMode] = useLocalStorage<Option<boolean>>(
-    "devMode",
-    undefined
-  );
-  const [isExpand, setIsExpand] = useLocalStorage("navbar", false);
-
   // Remark: this function is only used in useSelectChain. Do not use in other places.
   const handleOnChainIdChange = useCallback((newChainId: string) => {
     const config = CHAIN_CONFIGS[newChainId];
@@ -90,12 +73,8 @@ export const AppProvider = observer(({ children }: AppProviderProps) => {
       chainConfig,
       indexerGraphClient: new GraphQLClient(chainConfig.indexer),
       constants: PROJECT_CONSTANTS,
-      isDevMode,
-      isExpand,
-      setIsDevMode,
-      setIsExpand,
     };
-  }, [currentChainId, isDevMode, isExpand, setIsDevMode, setIsExpand]);
+  }, [currentChainId]);
 
   useEffect(() => {
     if (currentChainName) {

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

@@ -1 +1,2 @@
 export * from "./app";
+export * from "./nav";

src/lib/app-provider/contexts/nav.tsx

@@ -0,0 +1,42 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import { useContext, createContext, useMemo } from "react";
+
+import { useLocalStorage } from "lib/hooks/useLocalStorage";
+import type { Option } from "lib/types";
+
+interface NavContextInterface {
+  isExpand: boolean;
+  isDevMode: Option<boolean>;
+  setIsExpand: Dispatch<SetStateAction<boolean>>;
+  setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
+}
+const NavContext = createContext<NavContextInterface>({
+  isExpand: false,
+  isDevMode: undefined,
+  setIsExpand: () => {},
+  setIsDevMode: () => {},
+});
+
+export const NavProvider = ({ children }: { children: ReactNode }) => {
+  const [isDevMode, setIsDevMode] = useLocalStorage<Option<boolean>>(
+    "devMode",
+    undefined
+  );
+  const [isExpand, setIsExpand] = useLocalStorage("navbar", false);
+
+  const states = useMemo<NavContextInterface>(
+    () => ({
+      isDevMode,
+      isExpand,
+      setIsDevMode,
+      setIsExpand,
+    }),
+    [isDevMode, isExpand, setIsDevMode, setIsExpand]
+  );
+
+  return <NavContext.Provider value={states}>{children}</NavContext.Provider>;
+};
+
+export const useNavContext = (): NavContextInterface => {
+  return useContext(NavContext);
+};

src/lib/components/ContractSelectSection.tsx

@@ -12,6 +12,7 @@ import type { Addr, ContractAddr, Option } from "lib/types";
 
 import { ExplorerLink } from "./ExplorerLink";
 import { CustomIcon } from "./icon";
+import { LoadingOverlay } from "./LoadingOverlay";
 import { EditContractDetailsModal, SaveContractDetailsModal } from "./modal";
 import {
   SelectContractAdmin,
@@ -156,7 +157,7 @@ export const ContractSelectSection = observer(
       mode: "all",
     });
 
-    const { refetch } = useContractDetailByContractAddress(
+    const { refetch, isFetching } = useContractDetailByContractAddress(
       contractAddress,
       (data) => {
         successCallback?.(data);
@@ -188,77 +189,80 @@ export const ContractSelectSection = observer(
     const style = modeStyle(mode);
 
     return (
-      <Flex
-        mb={style.container}
-        borderWidth="thin"
-        borderColor="gray.800"
-        p={4}
-        borderRadius="8px"
-        fontSize="12px"
-        justify="space-between"
-        align="center"
-        width="full"
-      >
-        <Flex gap={4} width="100%" direction={{ base: "column", md: "row" }}>
-          <Flex
-            direction="column"
-            width={{ base: "auto", md: style.contractAddrContainer }}
-          >
-            Contract Address
-            {!notSelected ? (
-              <ExplorerLink
-                value={contractAddress}
-                type="contract_address"
-                showCopyOnHover
-                // TODO - Revisit not necessary if disable UI for mobile is implemented
-                textFormat={
-                  isMobile || mode === "only-admin" ? "truncate" : "normal"
-                }
-                maxWidth="none"
-                minWidth={style.contractAddrW}
-                wordBreak="break-all"
-              />
-            ) : (
-              <Text color="text.disabled" variant="body2">
-                Not Selected
-              </Text>
-            )}
-          </Flex>
-          <Flex
-            direction="column"
-            width={{ base: "auto", md: style.contractNameContainer }}
-          >
-            Contract Name
-            <DisplayName
-              notSelected={notSelected}
-              isValid={contractState.isValid}
-              name={contractLocalInfo?.name}
-              label={contractState.label}
-            />
-          </Flex>
-          <Flex gap={2} alignItems="center">
-            {mode === "all-lists" && contractState.isValid && (
-              <ContractDetailsButton
-                contractAddress={contractAddress}
-                contractLocalInfo={contractLocalInfo}
-                instantiator={contractState.instantiator as Addr}
-                label={contractState.label}
-              />
-            )}
-            {mode === "all-lists" ? (
-              <SelectContractInstantiator
-                notSelected={notSelected}
-                onContractSelect={onContractSelect}
-              />
-            ) : (
-              <SelectContractAdmin
+      <>
+        {isFetching && <LoadingOverlay />}
+        <Flex
+          mb={style.container}
+          borderWidth="thin"
+          borderColor="gray.800"
+          p={4}
+          borderRadius="8px"
+          fontSize="12px"
+          justify="space-between"
+          align="center"
+          width="full"
+        >
+          <Flex gap={4} width="100%" direction={{ base: "column", md: "row" }}>
+            <Flex
+              direction="column"
+              width={{ base: "auto", md: style.contractAddrContainer }}
+            >
+              Contract Address
+              {!notSelected ? (
+                <ExplorerLink
+                  value={contractAddress}
+                  type="contract_address"
+                  showCopyOnHover
+                  // TODO - Revisit not necessary if disable UI for mobile is implemented
+                  textFormat={
+                    isMobile || mode === "only-admin" ? "truncate" : "normal"
+                  }
+                  maxWidth="none"
+                  minWidth={style.contractAddrW}
+                  wordBreak="break-all"
+                />
+              ) : (
+                <Text color="text.disabled" variant="body2">
+                  Not Selected
+                </Text>
+              )}
+            </Flex>
+            <Flex
+              direction="column"
+              width={{ base: "auto", md: style.contractNameContainer }}
+            >
+              Contract Name
+              <DisplayName
                 notSelected={notSelected}
-                onContractSelect={onContractSelect}
+                isValid={contractState.isValid}
+                name={contractLocalInfo?.name}
+                label={contractState.label}
               />
-            )}
+            </Flex>
+            <Flex gap={2} alignItems="center">
+              {mode === "all-lists" && contractState.isValid && (
+                <ContractDetailsButton
+                  contractAddress={contractAddress}
+                  contractLocalInfo={contractLocalInfo}
+                  instantiator={contractState.instantiator as Addr}
+                  label={contractState.label}
+                />
+              )}
+              {mode === "all-lists" ? (
+                <SelectContractInstantiator
+                  notSelected={notSelected}
+                  onContractSelect={onContractSelect}
+                />
+              ) : (
+                <SelectContractAdmin
+                  notSelected={notSelected}
+                  onContractSelect={onContractSelect}
+                />
+              )}
+            </Flex>
           </Flex>
         </Flex>
-      </Flex>
+      </>
     );
   }
 );

src/lib/layout/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import type { ReactNode } from "react";
 import { useEffect, useMemo } from "react";
 
-import { useCelatoneApp, useMobile } from "lib/app-provider";
+import { useMobile, useNavContext } from "lib/app-provider";
 import { scrollToTop } from "lib/utils";
 
 import Footer from "./Footer";
@@ -19,7 +19,7 @@ type LayoutProps = {
 const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const isMobile = useMobile();
-  const { isExpand, isDevMode, setIsExpand, setIsDevMode } = useCelatoneApp();
+  const { isExpand, isDevMode, setIsExpand, setIsDevMode } = useNavContext();
 
   const defaultRow = "70px 48px 1fr";
   const mode = useMemo(() => {

src/lib/pages/home/index.tsx

@@ -4,7 +4,11 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { CURR_THEME } from "env";
-import { useCelatoneApp, useInternalNavigate } from "lib/app-provider";
+import {
+  useCelatoneApp,
+  useInternalNavigate,
+  useNavContext,
+} from "lib/app-provider";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { CustomIcon } from "lib/components/icon";
 import PageContainer from "lib/components/PageContainer";
@@ -108,7 +112,7 @@ const calculateAverageBlockTime = (
 const Home = () => {
   const router = useRouter();
   const navigate = useInternalNavigate();
-  const { isDevMode } = useCelatoneApp();
+  const { isDevMode } = useNavContext();
 
   const {
     chainConfig: { prettyName },

src/lib/pages/query/components/QueryArea.tsx

@@ -32,6 +32,9 @@ export const QueryArea = ({
 
   useEffect(() => {
     if (!schema) setTab(MessageTabs.JSON_INPUT);
+    else {
+      setTab(MessageTabs.YOUR_SCHEMA);
+    }
   }, [schema]);
 
   return (
@@ -61,7 +64,11 @@ export const QueryArea = ({
         }
         schemaContent={
           codeHash ? (
-            <SchemaQuery schema={schema} contractAddress={contractAddress} />
+            <SchemaQuery
+              schema={schema}
+              contractAddress={contractAddress}
+              initialMsg={initialMsg}
+            />
           ) : (
             <EmptyState
               imageVariant="not-found"