diff --git a/CHANGELOG.md b/CHANGELOG.md index b4ceed83c..c8872fbaa 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/lib/layout/navbar/index.tsx b/src/lib/layout/navbar/index.tsx index 3ced0e782..a59649b38 100644 --- a/src/lib/layout/navbar/index.tsx +++ b/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, }, { diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interact/component/FunctionSelectBody.tsx similarity index 96% rename from src/lib/pages/interaction/component/main/body.tsx rename to src/lib/pages/interact/component/FunctionSelectBody.tsx index a7d9c4eb4..389522e47 100644 --- a/src/lib/pages/interaction/component/main/body.tsx +++ b/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 { diff --git a/src/lib/pages/interaction/component/main/panel.tsx b/src/lib/pages/interact/component/FunctionSelectPanel.tsx similarity index 85% rename from src/lib/pages/interaction/component/main/panel.tsx rename to src/lib/pages/interact/component/FunctionSelectPanel.tsx index 9bbf701db..60bd72b1c 100644 --- a/src/lib/pages/interaction/component/main/panel.tsx +++ b/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 }) => ( ; - setSelectedFn: Dispatch>>; + setSelectedFn: (fn: ExposedFunction) => void; }) => { if (!states.filteredFunctions) return ( @@ -75,16 +76,19 @@ const RenderFunctions = ({ interface FunctionSelectPanelProps { module: Option; + tab: InteractionTabs; + setTab: Dispatch>; selectedFn: Option; - setSelectedFn: Dispatch>>; + 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(() => { @@ -104,9 +108,8 @@ export const FunctionSelectPanel = ({ }; }, [keyword, tab, module?.executeFunctions, module?.viewFunctions]); - // TODO: find a better way to handle height return ( - +
- - + {/* TODO: find a better way to handle height */} + + + +
); }; diff --git a/src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx b/src/lib/pages/interact/component/SelectedFunctionCard.tsx similarity index 100% rename from src/lib/pages/interaction/component/main/SelectedFunctionCard.tsx rename to src/lib/pages/interact/component/SelectedFunctionCard.tsx diff --git a/src/lib/pages/interaction/component/common/EmptyState.tsx b/src/lib/pages/interact/component/common/EmptyState.tsx similarity index 100% rename from src/lib/pages/interaction/component/common/EmptyState.tsx rename to src/lib/pages/interact/component/common/EmptyState.tsx diff --git a/src/lib/pages/interact/component/common/FunctionAccordion.tsx b/src/lib/pages/interact/component/common/FunctionAccordion.tsx new file mode 100644 index 000000000..9d1095e21 --- /dev/null +++ b/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; + setSelectedFn: (fn: ExposedFunction) => void; +} + +export const FunctionAccordion = ({ + filteredFns, + isEmpty, + triggerText, + selectedFn, + setSelectedFn, +}: FunctionAccordionProps) => ( + +
+ + + + {triggerText} + + + + + +
+ + + {filteredFns.length ? ( + filteredFns.map((fn) => ( + + )) + ) : ( + + )} + + + +); diff --git a/src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx b/src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx similarity index 100% rename from src/lib/pages/interaction/component/common/InteractionTypeSwitch.tsx rename to src/lib/pages/interact/component/common/InteractionTypeSwitch.tsx diff --git a/src/lib/pages/interaction/component/common/ModuleContainer.tsx b/src/lib/pages/interact/component/common/ModuleContainer.tsx similarity index 100% rename from src/lib/pages/interaction/component/common/ModuleContainer.tsx rename to src/lib/pages/interact/component/common/ModuleContainer.tsx diff --git a/src/lib/pages/interaction/component/common/index.ts b/src/lib/pages/interact/component/common/index.ts similarity index 74% rename from src/lib/pages/interaction/component/common/index.ts rename to src/lib/pages/interact/component/common/index.ts index b1a205f52..067ae44cc 100644 --- a/src/lib/pages/interaction/component/common/index.ts +++ b/src/lib/pages/interact/component/common/index.ts @@ -1,3 +1,4 @@ export * from "./EmptyState"; +export * from "./FunctionAccordion"; export * from "./InteractionTypeSwitch"; export * from "./ModuleContainer"; diff --git a/src/lib/pages/interaction/component/drawer/drawer.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx similarity index 63% rename from src/lib/pages/interaction/component/drawer/drawer.tsx rename to src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx index 1827f158f..da3a7dda1 100644 --- a/src/lib/pages/interaction/component/drawer/drawer.tsx +++ b/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; handleModuleSelect: ModuleSelectFunction; } export const ModuleSelectDrawer = ({ isOpen, onClose, + hexAddress, handleModuleSelect, -}: ModuleSelectDrawerTriggerProps) => { - const [modules, setModules] = useState(); +}: ModuleSelectDrawerProps) => { + const convertHexAddr = useConvertHexAddress(); + const [mode, setMode] = useState("input"); const [selectedAddress, setSelectedAddress] = useState({ address: "" as HumanAddr, hex: "" as HexAddr, }); + const [modules, setModules] = useState(); + + 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 ( @@ -58,9 +101,9 @@ export const ModuleSelectDrawer = ({ mode={mode} selectedAddress={selectedAddress} setSelectedAddress={setSelectedAddress} + setModules={setModules} setMode={setMode} handleModuleSelect={handleModuleSelect} - setModules={setModules} closeModal={onClose} /> {modules ? ( diff --git a/src/lib/pages/interaction/component/drawer/trigger.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx similarity index 100% rename from src/lib/pages/interaction/component/drawer/trigger.tsx rename to src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx similarity index 100% rename from src/lib/pages/interaction/component/drawer/body/ModuleFunctionBody.tsx rename to src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx diff --git a/src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx similarity index 100% rename from src/lib/pages/interaction/component/drawer/body/ModuleSelectMainBody.tsx rename to src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx diff --git a/src/lib/pages/interaction/component/drawer/body/index.ts b/src/lib/pages/interact/component/drawer/body/index.ts similarity index 100% rename from src/lib/pages/interaction/component/drawer/body/index.ts rename to src/lib/pages/interact/component/drawer/body/index.ts diff --git a/src/lib/pages/interact/component/drawer/index.ts b/src/lib/pages/interact/component/drawer/index.ts new file mode 100644 index 000000000..fce144444 --- /dev/null +++ b/src/lib/pages/interact/component/drawer/index.ts @@ -0,0 +1,2 @@ +export * from "./ModuleSelectDrawer"; +export * from "./ModuleSelectDrawerTrigger"; diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx similarity index 100% rename from src/lib/pages/interaction/component/drawer/selector/SelectorDisplay.tsx rename to src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx similarity index 95% rename from src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx rename to src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx index b7aa97dbd..e51e61b6c 100644 --- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx +++ b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.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(""); diff --git a/src/lib/pages/interaction/component/drawer/selector/index.tsx b/src/lib/pages/interact/component/drawer/selector/index.tsx similarity index 79% rename from src/lib/pages/interaction/component/drawer/selector/index.tsx rename to src/lib/pages/interact/component/drawer/selector/index.tsx index bdd84a1bc..5a3184ea2 100644 --- a/src/lib/pages/interaction/component/drawer/selector/index.tsx +++ b/src/lib/pages/interact/component/drawer/selector/index.tsx @@ -1,8 +1,8 @@ import type { DisplayMode } from "../types"; -import { ModuleSelectorDisplay } from "./SelectorDisplay"; -import type { ModuleSelectorInputProps } from "./SelectorInput"; -import { ModuleSelectorInput } from "./SelectorInput"; +import { ModuleSelectorDisplay } from "./ModuleSelectorDisplay"; +import type { ModuleSelectorInputProps } from "./ModuleSelectorInput"; +import { ModuleSelectorInput } from "./ModuleSelectorInput"; interface ModuleSelectorProps extends ModuleSelectorInputProps { mode: DisplayMode; diff --git a/src/lib/pages/interaction/component/drawer/types.ts b/src/lib/pages/interact/component/drawer/types.ts similarity index 100% rename from src/lib/pages/interaction/component/drawer/types.ts rename to src/lib/pages/interact/component/drawer/types.ts diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interact/component/form/ExecuteArea.tsx similarity index 84% rename from src/lib/pages/interaction/component/form/ExecuteArea.tsx rename to src/lib/pages/interact/component/form/ExecuteArea.tsx index b8f7a276a..f2e8dea8b 100644 --- a/src/lib/pages/interaction/component/form/ExecuteArea.tsx +++ b/src/lib/pages/interact/component/form/ExecuteArea.tsx @@ -121,10 +121,26 @@ export const ExecuteArea = ({ return ( - + {fn.is_entry ? ( + + ) : ( + + + + 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. + + + )} )} - - + + {/* */} Transaction Fee:{" "} diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx similarity index 97% rename from src/lib/pages/interaction/component/form/ViewArea.tsx rename to src/lib/pages/interact/component/form/ViewArea.tsx index 790e9a079..579100ba8 100644 --- a/src/lib/pages/interaction/component/form/ViewArea.tsx +++ b/src/lib/pages/interact/component/form/ViewArea.tsx @@ -71,8 +71,8 @@ export const ViewArea = ({ propsOnChange={setAbiData} propsOnErrors={setAbiErrors} /> - - + + {/* */}