feat: interaction query param

CHANGELOG.md

@@ -76,6 +76,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#548](https://github.com/alleslabs/celatone-frontend/pull/548) Handle interaction page query param and refactor page
 - [#546](https://github.com/alleslabs/celatone-frontend/pull/546) Handle 404 on the current selected chain
 - [#540](https://github.com/alleslabs/celatone-frontend/pull/540) Add open proposal configuration
 - [#532](https://github.com/alleslabs/celatone-frontend/pull/532) Implement new Amplitude structure

src/lib/layout/navbar/index.tsx

@@ -95,7 +95,7 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
                 },
                 {
                   name: "View / Execute",
-                  slug: "/interaction",
+                  slug: "/interact",
                   icon: "execute" as IconKeys,
                 },
                 {

src/lib/pages/interaction/component/main/body.tsx → src/lib/pages/interact/component/FunctionSelectBody.tsx

@@ -1,12 +1,12 @@
 import { Button, Flex } from "@chakra-ui/react";
 
-import { ModuleContainer } from "../common";
-import { ExecuteArea, ViewArea } from "../form";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction, HexAddr, Option } from "lib/types";
 
+import { ModuleContainer } from "./common";
+import { ExecuteArea, ViewArea } from "./form";
 import { SelectedFunctionCard } from "./SelectedFunctionCard";
 
 interface FunctionSelectBodyProps {

src/lib/pages/interaction/component/main/panel.tsx → src/lib/pages/interact/component/FunctionSelectPanel.tsx

@@ -2,19 +2,20 @@ import { Accordion, Flex } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useMemo, useState } from "react";
 
-import {
-  NoImageEmptyState,
-  ModuleContainer,
-  InteractionTabs,
-  InteractionTypeSwitch,
-} from "../common";
-import { FunctionAccordion } from "../common/FunctionAccordion";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
 import type { ExposedFunction, Option } from "lib/types";
 import { checkAvailability } from "lib/utils";
 
+import {
+  NoImageEmptyState,
+  ModuleContainer,
+  InteractionTabs,
+  InteractionTypeSwitch,
+  FunctionAccordion,
+} from "./common";
+
 const EmptyStateRender = ({ desc }: { desc: string }) => (
   <ModuleContainer h="full">
     <EmptyState
@@ -40,7 +41,7 @@ const RenderFunctions = ({
 }: {
   states: FunctionStates;
   selectedFn: Option<ExposedFunction>;
-  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+  setSelectedFn: (fn: ExposedFunction) => void;
 }) => {
   if (!states.filteredFunctions)
     return (
@@ -75,16 +76,19 @@ const RenderFunctions = ({
 
 interface FunctionSelectPanelProps {
   module: Option<IndexedModule>;
+  tab: InteractionTabs;
+  setTab: Dispatch<SetStateAction<InteractionTabs>>;
   selectedFn: Option<ExposedFunction>;
-  setSelectedFn: Dispatch<SetStateAction<Option<ExposedFunction>>>;
+  setSelectedFn: (fn: ExposedFunction) => void;
 }
 
 export const FunctionSelectPanel = ({
   module,
+  tab,
+  setTab,
   selectedFn,
   setSelectedFn,
 }: FunctionSelectPanelProps) => {
-  const [tab, setTab] = useState(InteractionTabs.VIEW_MODULE);
   const [keyword, setKeyword] = useState("");
 
   const functionStates = useMemo<FunctionStates>(() => {
@@ -104,9 +108,8 @@ export const FunctionSelectPanel = ({
     };
   }, [keyword, tab, module?.executeFunctions, module?.viewFunctions]);
 
-  // TODO: find a better way to handle height
   return (
-    <Flex direction="column" maxH="calc(100vh - 364px)" overflow="scroll">
+    <div>
       <InputWithIcon
         iconPosition="start"
         value={keyword}
@@ -119,11 +122,14 @@ export const FunctionSelectPanel = ({
         my={3}
         counts={[module?.viewFunctions.length, module?.executeFunctions.length]}
       />
-      <RenderFunctions
-        states={functionStates}
-        selectedFn={selectedFn}
-        setSelectedFn={setSelectedFn}
-      />
-    </Flex>
+      {/* TODO: find a better way to handle height */}
+      <Flex direction="column" maxH="calc(100vh - 400px)" overflow="scroll">
+        <RenderFunctions
+          states={functionStates}
+          selectedFn={selectedFn}
+          setSelectedFn={setSelectedFn}
+        />
+      </Flex>
+    </div>
   );
 };

src/lib/pages/interact/component/common/FunctionAccordion.tsx

@@ -0,0 +1,61 @@
+import {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+
+import { CountBadge, FunctionCard } from "lib/components/module";
+import type { ExposedFunction, Option } from "lib/types";
+
+import { NoImageEmptyState } from "./EmptyState";
+
+interface FunctionAccordionProps {
+  filteredFns: ExposedFunction[];
+  isEmpty: boolean;
+  triggerText: string;
+  selectedFn: Option<ExposedFunction>;
+  setSelectedFn: (fn: ExposedFunction) => void;
+}
+
+export const FunctionAccordion = ({
+  filteredFns,
+  isEmpty,
+  triggerText,
+  selectedFn,
+  setSelectedFn,
+}: FunctionAccordionProps) => (
+  <AccordionItem bg="background.main" py={1}>
+    <h6>
+      <AccordionButton>
+        <Flex align="center" justify="space-between" gap={2}>
+          <Text variant="body2" color="text.dark">
+            {triggerText}
+          </Text>
+          <CountBadge count={filteredFns.length} variant="common" />
+        </Flex>
+        <AccordionIcon color="gray.600" ml="auto" />
+      </AccordionButton>
+    </h6>
+    <AccordionPanel py={3} px={0}>
+      <Flex flexDirection="column" gap={1}>
+        {filteredFns.length ? (
+          filteredFns.map((fn) => (
+            <FunctionCard
+              key={fn.name}
+              variant={selectedFn?.name === fn.name ? "selected" : "common"}
+              exposedFn={fn}
+              onFunctionSelect={setSelectedFn}
+            />
+          ))
+        ) : (
+          <NoImageEmptyState
+            desc={isEmpty ? "No function" : "No matching function found"}
+          />
+        )}
+      </Flex>
+    </AccordionPanel>
+  </AccordionItem>
+);

src/lib/pages/interaction/component/common/index.ts → src/lib/pages/interact/component/common/index.ts

@@ -1,3 +1,4 @@
 export * from "./EmptyState";
+export * from "./FunctionAccordion";
 export * from "./InteractionTypeSwitch";
 export * from "./ModuleContainer";

src/lib/pages/interaction/component/drawer/drawer.tsx → src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx

@@ -8,12 +8,16 @@ import {
   DrawerBody,
   Flex,
 } from "@chakra-ui/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { ModuleEmptyState } from "../common";
+import { useConvertHexAddress } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import type { IndexedModule } from "lib/services/moduleService";
-import type { HexAddr, HumanAddr } from "lib/types";
+import {
+  useAccountModules,
+  type IndexedModule,
+} from "lib/services/moduleService";
+import type { HexAddr, HumanAddr, MoveAccountAddr, Option } from "lib/types";
 
 import { ModuleSelectMainBody } from "./body";
 import { ModuleSelector } from "./selector";
@@ -23,23 +27,62 @@ import type {
   ModuleSelectFunction,
 } from "./types";
 
-interface ModuleSelectDrawerTriggerProps {
+interface ModuleSelectDrawerProps {
   isOpen: boolean;
   onClose: () => void;
+  hexAddress: Option<HexAddr>;
   handleModuleSelect: ModuleSelectFunction;
 }
 
 export const ModuleSelectDrawer = ({
   isOpen,
   onClose,
+  hexAddress,
   handleModuleSelect,
-}: ModuleSelectDrawerTriggerProps) => {
-  const [modules, setModules] = useState<IndexedModule[]>();
+}: ModuleSelectDrawerProps) => {
+  const convertHexAddr = useConvertHexAddress();
+
   const [mode, setMode] = useState<DisplayMode>("input");
   const [selectedAddress, setSelectedAddress] = useState<SelectedAddress>({
     address: "" as HumanAddr,
     hex: "" as HexAddr,
   });
+  const [modules, setModules] = useState<IndexedModule[]>();
+
+  const { refetch } = useAccountModules({
+    address: selectedAddress.hex as MoveAccountAddr,
+    moduleName: undefined,
+    functionName: undefined,
+    options: {
+      refetchOnWindowFocus: false,
+      enabled: false,
+      retry: false,
+      onSuccess: (data) => {
+        if (Array.isArray(data)) setModules(data);
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (hexAddress) {
+      setMode("display");
+      setSelectedAddress({
+        address: convertHexAddr(hexAddress),
+        hex: hexAddress,
+      });
+    } else {
+      setMode("input");
+      setSelectedAddress({
+        address: "" as HumanAddr,
+        hex: "" as HexAddr,
+      });
+      setModules(undefined);
+    }
+  }, [convertHexAddr, hexAddress]);
+
+  useEffect(() => {
+    if (isOpen && selectedAddress.hex) refetch();
+  }, [isOpen, refetch, selectedAddress.hex]);
 
   return (
     <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
@@ -58,9 +101,9 @@ export const ModuleSelectDrawer = ({
               mode={mode}
               selectedAddress={selectedAddress}
               setSelectedAddress={setSelectedAddress}
+              setModules={setModules}
               setMode={setMode}
               handleModuleSelect={handleModuleSelect}
-              setModules={setModules}
               closeModal={onClose}
             />
             {modules ? (

src/lib/pages/interact/component/drawer/index.ts

@@ -0,0 +1,2 @@
+export * from "./ModuleSelectDrawer";
+export * from "./ModuleSelectDrawerTrigger";

src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx → src/lib/pages/interact/component/drawer/selector/SelectorInput.tsx

@@ -13,7 +13,7 @@ import {
   useExampleAddresses,
 } from "lib/app-provider";
 import { TextInput } from "lib/components/forms";
-import { useValidateModuleInput } from "lib/pages/interaction/hooks/useValidateModuleInput";
+import { useValidateModuleInput } from "lib/pages/interact/hooks/useValidateModuleInput";
 import type { IndexedModule } from "lib/services/moduleService";
 import { useAccountModules } from "lib/services/moduleService";
 import type { MoveAccountAddr, HexAddr, HumanAddr, Option } from "lib/types";
@@ -36,7 +36,7 @@ export const ModuleSelectorInput = ({
   setMode,
   closeModal,
 }: ModuleSelectorInputProps) => {
-  const [keyword, setKeyword] = useState(selectedAddress.address as string);
+  const [keyword, setKeyword] = useState(selectedAddress.hex as string);
   const [error, setError] = useState("");
   const [addr, moduleName, functionName] = useMemo(
     () => splitModule(keyword),
@@ -54,7 +54,6 @@ export const ModuleSelectorInput = ({
     options: {
       refetchOnWindowFocus: false,
       enabled: false,
-      refetchOnMount: true,
       retry: false,
       onSuccess: (data) => {
         setError("");

src/lib/pages/interaction/component/form/ExecuteArea.tsx → src/lib/pages/interact/component/form/ExecuteArea.tsx

@@ -121,10 +121,26 @@ export const ExecuteArea = ({
 
   return (
     <Flex direction="column">
-      <ConnectWalletAlert
-        subtitle="You need to connect your wallet to perform this action"
-        mb={8}
-      />
+      {fn.is_entry ? (
+        <ConnectWalletAlert
+          subtitle="You need to connect your wallet to perform this action"
+          mb={8}
+        />
+      ) : (
+        <Alert variant="warning" mb={8} alignItems="center" gap={4}>
+          <CustomIcon
+            name="alert-circle-solid"
+            boxSize={4}
+            color="warning.main"
+          />
+          <AlertDescription wordBreak="break-word">
+            Title This function cannot be executed through this page. Only
+            execute functions with “is_entry: true” and visibility is “public”
+            or “friend” are able to interacted through Celatone’s module
+            interactions.
+          </AlertDescription>
+        </Alert>
+      )}
       <AbiForm
         fn={executeFn}
         initialData={data}
@@ -138,8 +154,8 @@ export const ExecuteArea = ({
           </AlertDescription>
         </Alert>
       )}
-      <Flex alignItems="center" justify="space-between" mt={6}>
-        <Button>TODO: CodeSnippet</Button>
+      <Flex alignItems="center" justify="end" mt={6}>
+        {/* <Button>TODO: CodeSnippet</Button> */}
         <Flex direction="row" align="center" gap={2}>
           <Flex fontSize="14px" color="text.dark" alignItems="center">
             Transaction Fee:{" "}

src/lib/pages/interaction/component/form/ViewArea.tsx → src/lib/pages/interact/component/form/ViewArea.tsx

@@ -71,8 +71,8 @@ export const ViewArea = ({
           propsOnChange={setAbiData}
           propsOnErrors={setAbiErrors}
         />
-        <Flex justify="space-between" mt={4}>
-          <Button>TODO: CodeSnippet</Button>
+        <Flex justify="end" mt={4}>
+          {/* <Button>TODO: CodeSnippet</Button> */}
           <Button
             variant="primary"
             fontSize="14px"

src/lib/pages/interact/component/index.ts

@@ -0,0 +1,5 @@
+export * from "./common";
+export * from "./drawer";
+export * from "./form";
+export * from "./FunctionSelectBody";
+export * from "./FunctionSelectPanel";