Merge pull request #617 from alleslabs/fix/bug-overall

fix: bug overall

CHANGELOG.md

@@ -88,6 +88,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#617](https://github.com/alleslabs/celatone-frontend/pull/617) Fix textwrap module path on module detail, framer motion incorrect transition prop, loadingoverlay not centered
 - [#610](https://github.com/alleslabs/celatone-frontend/pull/610) Remove `.at()` from code
 - [#615](https://github.com/alleslabs/celatone-frontend/pull/615) Fix useEffect on pool page
 - [#612](https://github.com/alleslabs/celatone-frontend/pull/612) Add saved accounts page

src/lib/components/LoadingOverlay.tsx

@@ -9,7 +9,7 @@ export const LoadingOverlay = () => (
     direction="column"
     gap={3}
     bgColor="background.overlay"
-    position="absolute"
+    position="fixed"
     top={0}
     left={0}
     zIndex="overlay"

src/lib/pages/account-details/components/modules/ModuleLists.tsx

@@ -1,8 +1,10 @@
 import { Flex } from "@chakra-ui/react";
+import { useState } from "react";
 
 import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import { TableTitle } from "lib/components/table";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { TableTitle, ViewMore } from "lib/components/table";
 import { type IndexedModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
 
@@ -23,41 +25,52 @@ export const ModuleLists = ({
   isLoading,
   onViewMore,
 }: ModuleListsProps) => {
+  const [keyword, setKeyword] = useState("");
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
-  return (
+  return isMobileOverview ? (
+    <Flex
+      justify="space-between"
+      w="full"
+      bg="gray.900"
+      borderRadius="8px"
+      p={4}
+      onClick={onViewMore}
+    >
+      <TableTitle title="Modules" count={totalCount} mb={0} />
+      <CustomIcon name="chevron-right" color="gray.600" />
+    </Flex>
+  ) : (
     <Flex
       direction="column"
       mt={{ base: 4, md: 8 }}
       mb={{ base: 0, md: 8 }}
       width="full"
+      gap={6}
     >
-      {isMobileOverview ? (
-        <Flex
-          justify="space-between"
-          w="full"
-          bg="gray.900"
-          borderRadius="8px"
-          p={4}
-          onClick={onViewMore}
-        >
-          <TableTitle title="Modules" count={totalCount} mb={0} />
-          <CustomIcon name="chevron-right" color="gray.600" />
-        </Flex>
-      ) : (
-        <>
-          <TableTitle
-            title="Module Instances"
-            helperText="Modules are ‘smart contracts’ deployed by this account"
-            count={totalCount}
-          />
-          <ModuleListsBody
-            selectedAddress={selectedAddress}
-            modules={modules}
-            isLoading={isLoading}
-            onViewMore={onViewMore}
-          />
-        </>
+      <TableTitle
+        title="Module Instances"
+        helperText="Modules are ‘smart contracts’ deployed by this account"
+        count={totalCount}
+        mb={0}
+      />
+      {!onViewMore && (
+        <InputWithIcon
+          placeholder="Search with Module Name..."
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          action="execute-message-search"
+        />
+      )}
+      <ModuleListsBody
+        selectedAddress={selectedAddress}
+        keyword={keyword}
+        modules={modules}
+        isLoading={isLoading}
+        onViewMore={onViewMore}
+      />
+      {onViewMore && totalCount && totalCount > 9 && (
+        <ViewMore onClick={onViewMore} />
       )}
     </Flex>
   );

src/lib/pages/account-details/components/modules/ModuleListsBody.tsx

@@ -1,31 +1,30 @@
-import { Flex, SimpleGrid } from "@chakra-ui/react";
-import { useMemo, useState } from "react";
+import { SimpleGrid } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
-import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
 import { ModuleCard } from "lib/components/module";
 import { EmptyState } from "lib/components/state";
-import { ViewMore } from "lib/components/table";
 import type { IndexedModule } from "lib/services/move/moduleService";
 import type { MoveAccountAddr, Option } from "lib/types";
 
 interface ModuleListsBodyProps {
   selectedAddress: MoveAccountAddr;
+  keyword: string;
   modules: Option<IndexedModule[]>;
   isLoading: boolean;
   onViewMore?: () => void;
 }
 
 export const ModuleListsBody = ({
   selectedAddress,
+  keyword,
   modules,
   isLoading,
   onViewMore,
 }: ModuleListsBodyProps) => {
   const navigate = useInternalNavigate();
-  const [keyword, setKeyword] = useState("");
 
   const filteredModules = useMemo(() => {
     if (!keyword) return modules;
@@ -58,31 +57,18 @@ export const ModuleListsBody = ({
       />
     );
   return (
-    <Flex direction="column" gap={8}>
-      {!onViewMore && (
-        <InputWithIcon
-          placeholder="Search with Module Name..."
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          action="execute-message-search"
-        />
+    <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4}>
+      {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
+        (item) => (
+          <ModuleCard
+            key={item.moduleName}
+            selectedAddress={selectedAddress}
+            module={item}
+            selectedModule={undefined}
+            setSelectedModule={handleOnSelect}
+          />
+        )
       )}
-      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing={4} mb={6}>
-        {(onViewMore ? filteredModules.slice(0, 9) : filteredModules).map(
-          (item) => (
-            <ModuleCard
-              key={item.moduleName}
-              selectedAddress={selectedAddress}
-              module={item}
-              selectedModule={undefined}
-              setSelectedModule={handleOnSelect}
-            />
-          )
-        )}
-      </SimpleGrid>
-      {onViewMore && filteredModules.length > 9 && (
-        <ViewMore onClick={onViewMore} />
-      )}
-    </Flex>
+    </SimpleGrid>
   );
 };

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

@@ -404,8 +404,8 @@ const AccountDetailsBody = ({
           </TabPanel>
           <TabPanel p={0}>
             <ModuleLists
-              selectedAddress={accountAddress}
               totalCount={modulesData?.length}
+              selectedAddress={accountAddress}
               modules={modulesData}
               isLoading={isModulesLoading}
             />

src/lib/pages/module-details/components/ModuleTop.tsx

@@ -90,7 +90,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             <Text {...baseTextStyle} color="text.main">
               Module Path:
             </Text>
-            <Text {...baseTextStyle}>
+            <Text {...baseTextStyle} whiteSpace="normal">
               {moduleData.parsedAbi.address}::{moduleData.parsedAbi.name}
             </Text>
           </Flex>

src/lib/pages/tx-details/components/tx-message/EventBox.tsx

@@ -1,6 +1,5 @@
-import { Box, Flex, chakra, shouldForwardProp } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import type { Event } from "@cosmjs/stargate";
-import { isValidMotionProp, motion } from "framer-motion";
 import type { ReactNode } from "react";
 import { useState } from "react";
 
@@ -10,15 +9,11 @@ import type { LinkType } from "lib/components/ExplorerLink";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { MotionBox } from "lib/components/MotionBox";
 import { TxReceiptRender } from "lib/components/tx";
 import type { TxReceipt } from "lib/types";
 import { jsonPrettify, jsonValidate } from "lib/utils";
 
-const MotionBox = chakra(motion.div, {
-  shouldForwardProp: (prop) =>
-    isValidMotionProp(prop) || shouldForwardProp(prop),
-});
-
 interface EventBoxProps {
   event: Event;
   msgIndex: number;
@@ -145,7 +140,10 @@ export const EventBox = ({ event, msgIndex }: EventBoxProps) => {
         overflow="hidden"
         initial="collapsed"
         animate={expand ? "expanded" : "collapsed"}
-        transition="all 0.25s ease-in-out"
+        transition={{
+          duration: "0.25",
+          ease: "easeInOut",
+        }}
       >
         <Box borderTop="1px solid var(--chakra-colors-gray-700)" mx={4} />
         <TxReceiptRender

src/lib/styles/theme/components/form.ts

@@ -10,7 +10,7 @@ const errorMain = "error.main";
 const labelStyles = {
   top: 0,
   left: 0,
-  zIndex: 2,
+  zIndex: 1,
   position: "absolute",
   pointerEvents: "none",
   mx: 3,

src/lib/utils/abi.ts

@@ -55,16 +55,15 @@ export const getAbiInitialData = (length: number) =>
 // ------------------------------------------//
 // -----------------MOVE ARGS----------------//
 // ------------------------------------------//
-export const getArgType = (argType: string) => {
-  if (argType === "0x1::string::String") return BCS.STRING;
-  if (argType.startsWith("0x1::option::Option")) return BCS.OPTION;
-  if (argType.startsWith("0x1::object::Object")) return BCS.OBJECT;
-  if (argType === "0x1::fixed_point32::FixedPoint32") return BCS.FIXED_POINT32;
-  if (argType === "0x1::fixed_point64::FixedPoint64") return BCS.FIXED_POINT64;
-  if (argType === "0x1::decimal128::Decimal128") return BCS.DECIMAL128;
-  if (argType === "0x1::decimal256::Decimal256") return BCS.DECIMAL256;
-  return argType;
-};
+export const getArgType = (argType: string) =>
+  argType
+    .replace("0x1::string::String", BCS.STRING)
+    .replace("0x1::option::Option", BCS.OPTION)
+    .replace("0x1::object::Object", BCS.OBJECT)
+    .replace("0x1::fixed_point32::FixedPoint32", BCS.FIXED_POINT32)
+    .replace("0x1::fixed_point64::FixedPoint64", BCS.FIXED_POINT64)
+    .replace("0x1::decimal128::Decimal128", BCS.DECIMAL128)
+    .replace("0x1::decimal256::Decimal256", BCS.DECIMAL256);
 
 const getArgValue = ({
   type,