From 735affa84e28460dfaedcb8df6074cdb99964802 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Mon, 27 Nov 2023 18:21:46 +0700
Subject: [PATCH 01/11] fix(components): add search resource

---
 src/lib/components/table/MobileTitle.tsx      |  10 +-
 src/lib/components/table/TableTitle.tsx       |  10 +-
 .../components/modules/ModuleLists.tsx        |   2 +-
 .../components/resources/ResourceOverview.tsx |   4 +-
 .../components/resources/ResourceSection.tsx  |   3 +-
 .../resources/ResourceSectionBody.tsx         | 152 +++++++++++-------
 src/lib/pages/account-details/index.tsx       |   5 +-
 src/lib/services/move/resourceService.ts      |  12 +-
 src/lib/types/move/resource.ts                |   2 +-
 9 files changed, 123 insertions(+), 77 deletions(-)

diff --git a/src/lib/components/table/MobileTitle.tsx b/src/lib/components/table/MobileTitle.tsx
index 0526769d9..276b714be 100644
--- a/src/lib/components/table/MobileTitle.tsx
+++ b/src/lib/components/table/MobileTitle.tsx
@@ -9,6 +9,7 @@ interface MobileTitleProps {
   title: string;
   count: Option<number>;
   onViewMore?: () => void;
+  showCount?: boolean;
 }
 const cardProps = {
   width: "100%",
@@ -17,14 +18,19 @@ const cardProps = {
   borderRadius: "8px",
 };
 
-export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => (
+export const MobileTitle = ({
+  onViewMore,
+  title,
+  count,
+  showCount = true,
+}: MobileTitleProps) => (
   <Flex
     style={cardProps}
     onClick={!count ? undefined : onViewMore}
     opacity={!count ? 0.5 : 1}
     bg="gray.900"
   >
-    <TableTitle title={title} count={count} mb={0} />
+    <TableTitle title={title} count={count} mb={0} showCount={showCount} />
     <CustomIcon name="chevron-right" color="gray.600" />
   </Flex>
 );
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index de64e5c33..3650f029a 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -7,6 +7,7 @@ interface TableTitleProps extends BoxProps {
   title: string;
   count: Option<number>;
   helperText?: string;
+  showCount?: boolean;
 }
 
 export const TableTitle = ({
@@ -14,6 +15,7 @@ export const TableTitle = ({
   count,
   helperText,
   mb = 6,
+  showCount = true,
   ...props
 }: TableTitleProps) => (
   <Box mb={mb} {...props}>
@@ -21,9 +23,11 @@ export const TableTitle = ({
       <Heading as="h6" variant="h6">
         {title}
       </Heading>
-      <Badge textColor={count ? "text.main" : "text.disabled"}>
-        {count ?? "N/A"}
-      </Badge>
+      {showCount && (
+        <Badge textColor={count ? "text.main" : "text.disabled"}>
+          {count ?? "N/A"}
+        </Badge>
+      )}
     </Flex>
     <Text variant="body2" textColor="text.dark" fontWeight={600}>
       {helperText}
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 60f60b511..22fc6a142 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -28,7 +28,7 @@ export const ModuleLists = ({
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
   return (
-    <Box mt={{ base: 4, md: 8 }}>
+    <Box mt={{ base: 4, md: 16 }}>
       {isMobileOverview ? (
         <MobileTitle
           title="Modules"
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index df631caee..422c965d3 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -30,13 +30,15 @@ export const ResourceOverview = ({
           title="Resources"
           count={totalCount}
           onViewMore={onViewMore}
+          showCount={false}
         />
       ) : (
         <>
           <TableTitle
             title="Resources"
             helperText="Resources stored in this account"
-            count={totalCount}
+            count={undefined}
+            showCount={false}
           />
           <ResourceOverviewBody
             address={address}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 76c5b2cf0..7884d6167 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -20,7 +20,8 @@ export const ResourceSection = ({
     <TableTitle
       helperText="Resources stored in this account"
       title="Resources"
-      count={resourcesByOwner?.length}
+      count={undefined}
+      showCount={false}
     />
     <Flex
       gap={6}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index 2214cec20..69e1b50b1 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -12,11 +12,12 @@ import {
 } from "@chakra-ui/react";
 import { truncate } from "lodash";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
 import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
+import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
 import { ResourceCard, ResourceDetailCard } from "lib/components/resource";
 import { EmptyState } from "lib/components/state";
@@ -41,6 +42,7 @@ export const ResourceSectionBody = ({
 }: ResourceSectionBodyProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
+  const [keyword, setKeyword] = useState("");
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
   const selectedAccountParam = getFirstQueryParam(router.query.account);
@@ -74,9 +76,10 @@ export const ResourceSectionBody = ({
     setExpandedIndexes(indexes);
 
   useEffect(() => {
-    const resourcesLength = resourcesByOwner?.find(
-      (resource) => resource.owner === selectedAccountParam
-    )?.resources?.[selectedNameParam].items.length;
+    const resourcesLength = resourcesByOwner
+      ?.find((resource) => resource.owner === selectedAccountParam)
+      ?.resources?.find((resource) => resource.group === selectedNameParam)
+      ?.items.length;
 
     if (resourcesLength === 1) {
       setExpandedIndexes([0]);
@@ -85,24 +88,51 @@ export const ResourceSectionBody = ({
     }
   }, [resourcesByOwner, selectedNameParam, selectedAccountParam]);
 
+  const filteredResourcesByOwner = useMemo(() => {
+    if (!keyword) return resourcesByOwner;
+
+    return resourcesByOwner?.map((each) => {
+      return {
+        ...each,
+        resources: each.resources.filter((resource) =>
+          resource.group
+            .toLowerCase()
+            .includes(keyword.trim().toLocaleLowerCase())
+        ),
+      };
+    });
+  }, [keyword, resourcesByOwner]);
+
   if (isLoading) return <Loading />;
-  if (!resourcesByOwner) return <ErrorFetching />;
-  if (!resourcesByOwner.length)
+  if (!filteredResourcesByOwner) return <ErrorFetching />;
+  if (!filteredResourcesByOwner.length)
     return <EmptyState imageVariant="empty" message="No resources found" />;
 
   const selectedIndex = !selectedAccountParam
     ? 0
-    : resourcesByOwner.findIndex((item) => item.owner === selectedAccountParam);
-  const selectedGroup = resourcesByOwner[selectedIndex];
-  const selectedGroupArray = Object.values(selectedGroup.resources);
-  const selectedResources =
-    selectedGroupArray.find((item) => item.group === selectedNameParam) ??
-    selectedGroupArray[0];
+    : filteredResourcesByOwner.findIndex(
+        (item) => item.owner === selectedAccountParam
+      );
+  const selectedGroup = filteredResourcesByOwner[selectedIndex];
+  const selectedResources = selectedGroup.resources.find(
+    (item) => item.group === selectedNameParam
+  );
   return (
     <>
-      <Flex minW={{ base: "full", md: 80 }}>
-        <Accordion allowMultiple defaultIndex={[selectedIndex]} width="full">
-          {resourcesByOwner.map((item) => (
+      <Flex minW={{ base: "full", md: 80 }} direction="column">
+        <InputWithIcon
+          placeholder="Search with struct tag Name..."
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          action="execute-message-search"
+        />
+        <Accordion
+          allowMultiple
+          defaultIndex={[selectedIndex]}
+          width="full"
+          mt={4}
+        >
+          {filteredResourcesByOwner.map((item) => (
             <AccordionItem mb={4} key={item.owner}>
               <AccordionButton>
                 <Flex p={4} justifyContent="space-between" w="full">
@@ -119,7 +149,7 @@ export const ResourceSectionBody = ({
                       key={subitem.group}
                       name={subitem.group}
                       amount={subitem.items.length}
-                      isSelected={selectedResources.group === subitem.group}
+                      isSelected={selectedResources?.group === subitem.group}
                       onClick={() =>
                         handleSelectResource(item.owner, subitem.group)
                       }
@@ -132,53 +162,55 @@ export const ResourceSectionBody = ({
           ))}
         </Accordion>
       </Flex>
-      <Flex direction="column" w="full">
-        <Flex
-          justifyContent="space-between"
-          alignItems="center"
-          pb={6}
-          gap={12}
-        >
-          <Flex alignItems="center">
-            <Heading as="h6" variant="h6" wordBreak="break-word">
-              {selectedGroup.owner}::{selectedResources.group}
-            </Heading>
-            <Badge variant="primary" ml={2}>
-              {selectedResources.items.length}
-            </Badge>
+      {selectedResources && (
+        <Flex direction="column" w="full">
+          <Flex
+            justifyContent="space-between"
+            alignItems="center"
+            pb={6}
+            gap={12}
+          >
+            <Flex alignItems="center">
+              <Heading as="h6" variant="h6" wordBreak="break-word">
+                {selectedGroup.owner}::{selectedResources.group}
+              </Heading>
+              <Badge variant="primary" ml={2}>
+                {selectedResources.items.length}
+              </Badge>
+            </Flex>
+            <Button
+              variant="outline-primary"
+              minW={28}
+              size="sm"
+              rightIcon={
+                <CustomIcon
+                  name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+                  boxSize={3}
+                />
+              }
+              onClick={() => {
+                setExpandedIndexes((prev) =>
+                  !prev.length
+                    ? Array.from(Array(selectedResources.items.length).keys())
+                    : []
+                );
+              }}
+            >
+              {expandedIndexes.length ? "Collapse All" : "Expand All"}
+            </Button>
           </Flex>
-          <Button
-            variant="outline-primary"
-            minW={28}
-            size="sm"
-            rightIcon={
-              <CustomIcon
-                name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
-                boxSize={3}
-              />
-            }
-            onClick={() => {
-              setExpandedIndexes((prev) =>
-                !prev.length
-                  ? Array.from(Array(selectedResources.items.length).keys())
-                  : []
-              );
-            }}
+          <Accordion
+            allowMultiple
+            width="full"
+            index={expandedIndexes}
+            onChange={updateExpandedIndexes}
           >
-            {expandedIndexes.length ? "Collapse All" : "Expand All"}
-          </Button>
+            {selectedResources.items.map((item) => (
+              <ResourceDetailCard resourceData={item} key={item.structTag} />
+            ))}
+          </Accordion>
         </Flex>
-        <Accordion
-          allowMultiple
-          width="full"
-          index={expandedIndexes}
-          onChange={updateExpandedIndexes}
-        >
-          {selectedResources.items.map((item) => (
-            <ResourceDetailCard resourceData={item} key={item.structTag} />
-          ))}
-        </Accordion>
-      </Flex>
+      )}
     </>
   );
 };
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 62ea0aa1c..c661b2f09 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -251,7 +251,6 @@ const AccountDetailsBody = ({
             Admins
           </CustomTab>
           <CustomTab
-            count={resourcesData?.totalCount}
             isDisabled={!resourcesData?.totalCount}
             onClick={handleTabChange(TabIndex.Resources)}
             hidden={!move.enabled}
@@ -279,7 +278,7 @@ const AccountDetailsBody = ({
             <Flex
               direction={{ base: "column", md: "row" }}
               gap={{ base: 4, md: 6 }}
-              my={{ base: 0, md: 8 }}
+              mt={{ base: 0, md: 8 }}
             >
               {publicInfo?.description && (
                 <Flex
@@ -306,7 +305,7 @@ const AccountDetailsBody = ({
             </Flex>
             <Flex
               borderBottom={{ base: "0px", md: "1px solid" }}
-              borderBottomColor="gray.700"
+              borderBottomColor={{ base: "transparent", md: "gray.700" }}
             >
               <AssetsSection
                 walletAddress={accountAddress}
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index 1706f1e80..2fe79cee8 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -30,8 +30,10 @@ export const useAccountResources = ({
       >((acc, resource) => {
         const [ownerName, groupName] = resource.structTag.split("::");
 
-        const ownerResources = acc[ownerName]?.resources ?? {};
-        const groupResources = ownerResources[groupName] ?? {};
+        const ownerResources = acc[ownerName]?.resources ?? [];
+        const groupResources = ownerResources.find(
+          (ownerResource) => ownerResource.group === groupName
+        );
         const items = groupResources?.items ?? [];
 
         items.push(resource);
@@ -40,15 +42,15 @@ export const useAccountResources = ({
           ...acc,
           [ownerName]: {
             owner: ownerName as MoveAccountAddr,
-            resources: {
+            resources: [
               ...ownerResources,
-              [groupName]: {
+              {
                 group: groupName,
                 account: ownerName as MoveAccountAddr,
                 displayName: `${truncate(ownerName)}::${groupName}`,
                 items,
               },
-            },
+            ],
           },
         };
       }, {});
diff --git a/src/lib/types/move/resource.ts b/src/lib/types/move/resource.ts
index 825d3ef3f..8f328531e 100644
--- a/src/lib/types/move/resource.ts
+++ b/src/lib/types/move/resource.ts
@@ -25,5 +25,5 @@ export interface ResourceGroup {
 
 export interface ResourceGroupByAccount {
   owner: MoveAccountAddr;
-  resources: Record<string, ResourceGroup>;
+  resources: ResourceGroup[];
 }

From 25a88903db584ce4975aa90b6810a0457dc865e7 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 30 Nov 2023 14:52:32 +0700
Subject: [PATCH 02/11] fix(components): move research left panel to other file

---
 .../resources/ResourceLeftPanel.tsx           | 162 ++++++++++++++++++
 .../resources/ResourceSectionBody.tsx         | 153 +++--------------
 2 files changed, 187 insertions(+), 128 deletions(-)
 create mode 100644 src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx

diff --git a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
new file mode 100644
index 000000000..09593f156
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
@@ -0,0 +1,162 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useCallback, useMemo, useState } 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 { ResourceCard } from "lib/components/resource";
+import { EmptyState } from "lib/components/state";
+import type {
+  HumanAddr,
+  ResourceGroup,
+  ResourceGroupByAccount,
+  Option,
+} from "lib/types";
+import { getFirstQueryParam, truncate } from "lib/utils";
+
+interface ResourceSectionBodyProps {
+  address: HumanAddr;
+  resourcesByOwner: Option<ResourceGroupByAccount[]>;
+  isLoading: boolean;
+}
+
+export const ResourceLeftPanel = ({
+  address,
+  resourcesByOwner,
+  isLoading,
+}: ResourceSectionBodyProps) => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+  const [keyword, setKeyword] = useState("");
+
+  const selectedAccountParam = getFirstQueryParam(router.query.account);
+  const selectedNameParam = getFirstQueryParam(router.query.selected);
+
+  const handleSelectResource = useCallback(
+    (
+      account: ResourceGroupByAccount["owner"],
+      resource: ResourceGroup["group"]
+    ) => {
+      if (account === selectedAccountParam && resource === selectedNameParam)
+        return;
+      navigate({
+        pathname: `/accounts/[accountAddress]/[tab]`,
+        query: {
+          accountAddress: address,
+          tab: "resources",
+          account,
+          selected: resource,
+        },
+        replace: true,
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [selectedNameParam, selectedAccountParam, address, navigate]
+  );
+
+  const filteredResourcesByOwner = useMemo(() => {
+    if (!keyword) return resourcesByOwner;
+
+    return resourcesByOwner?.map((each) => {
+      return {
+        ...each,
+        resources: each.resources.filter((resource) =>
+          resource.group
+            .toLowerCase()
+            .includes(keyword.trim().toLocaleLowerCase())
+        ),
+      };
+    });
+  }, [keyword, resourcesByOwner]);
+
+  if (isLoading) return <Loading />;
+  if (!filteredResourcesByOwner) return <ErrorFetching />;
+  if (!filteredResourcesByOwner.length)
+    return <EmptyState imageVariant="empty" message="No resources found" />;
+
+  const selectedIndex = !selectedAccountParam
+    ? 0
+    : filteredResourcesByOwner.findIndex(
+        (item) => item.owner === selectedAccountParam
+      );
+  const selectedGroup = filteredResourcesByOwner[selectedIndex];
+  const selectedResources = selectedGroup.resources.find(
+    (item) => item.group === selectedNameParam
+  );
+
+  return (
+    <Flex minW={{ base: "full", md: 80 }} direction="column">
+      <InputWithIcon
+        placeholder="Search with struct tag Name..."
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        action="execute-message-search"
+      />
+      <Accordion
+        allowMultiple
+        defaultIndex={[selectedIndex]}
+        width="full"
+        mt={4}
+      >
+        {filteredResourcesByOwner.map((item) => (
+          <AccordionItem mb={4} key={item.owner}>
+            <AccordionButton>
+              <Flex p={4} justifyContent="space-between" w="full">
+                <Text variant="body1" fontWeight={600}>
+                  {truncate(item.owner)}
+                </Text>
+                <AccordionIcon color="gray.600" />
+              </Flex>
+            </AccordionButton>
+            <AccordionPanel>
+              {item.resources.length ? (
+                <Flex direction="column" gap={3} maxW={80}>
+                  {Object.values(item.resources).map((subitem) => (
+                    <ResourceCard
+                      key={subitem.displayName}
+                      name={subitem.group}
+                      amount={subitem.items.length}
+                      isSelected={selectedResources?.group === subitem.group}
+                      onClick={() =>
+                        handleSelectResource(item.owner, subitem.group)
+                      }
+                      hasBorder
+                    />
+                  ))}
+                </Flex>
+              ) : (
+                <Flex
+                  w="full"
+                  p={4}
+                  justifyContent="center"
+                  alignItems="center"
+                  border="1px solid"
+                  borderRadius="8px"
+                  borderColor="gray.700"
+                  direction="column"
+                  gap={4}
+                >
+                  <Text variant="body2" color="text.dark" textAlign="center">
+                    No matching resource found
+                  </Text>
+                </Flex>
+              )}
+            </AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index 69e1b50b1..89b0c6bf9 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -1,34 +1,15 @@
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Badge,
-  Button,
-  Flex,
-  Heading,
-  Text,
-} from "@chakra-ui/react";
-import { truncate } from "lodash";
+import { Accordion, Badge, Button, Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 
-import { ErrorFetching } from "../ErrorFetching";
-import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
-import InputWithIcon from "lib/components/InputWithIcon";
 import { Loading } from "lib/components/Loading";
-import { ResourceCard, ResourceDetailCard } from "lib/components/resource";
-import { EmptyState } from "lib/components/state";
-import type {
-  HumanAddr,
-  Option,
-  ResourceGroup,
-  ResourceGroupByAccount,
-} from "lib/types";
+import { ResourceDetailCard } from "lib/components/resource";
+import type { HumanAddr, Option, ResourceGroupByAccount } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
+import { ResourceLeftPanel } from "./ResourceLeftPanel";
+
 interface ResourceSectionBodyProps {
   address: HumanAddr;
   resourcesByOwner: Option<ResourceGroupByAccount[]>;
@@ -41,37 +22,12 @@ export const ResourceSectionBody = ({
   isLoading,
 }: ResourceSectionBodyProps) => {
   const router = useRouter();
-  const navigate = useInternalNavigate();
-  const [keyword, setKeyword] = useState("");
+
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
   const selectedAccountParam = getFirstQueryParam(router.query.account);
   const selectedNameParam = getFirstQueryParam(router.query.selected);
 
-  const handleSelectResource = useCallback(
-    (
-      account: ResourceGroupByAccount["owner"],
-      resource: ResourceGroup["group"]
-    ) => {
-      if (account === selectedAccountParam && resource === selectedNameParam)
-        return;
-      navigate({
-        pathname: `/accounts/[accountAddress]/[tab]`,
-        query: {
-          accountAddress: address,
-          tab: "resources",
-          account,
-          selected: resource,
-        },
-        replace: true,
-        options: {
-          shallow: true,
-        },
-      });
-    },
-    [selectedNameParam, selectedAccountParam, address, navigate]
-  );
-
   const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
 
@@ -88,81 +44,19 @@ export const ResourceSectionBody = ({
     }
   }, [resourcesByOwner, selectedNameParam, selectedAccountParam]);
 
-  const filteredResourcesByOwner = useMemo(() => {
-    if (!keyword) return resourcesByOwner;
-
-    return resourcesByOwner?.map((each) => {
-      return {
-        ...each,
-        resources: each.resources.filter((resource) =>
-          resource.group
-            .toLowerCase()
-            .includes(keyword.trim().toLocaleLowerCase())
-        ),
-      };
-    });
-  }, [keyword, resourcesByOwner]);
-
   if (isLoading) return <Loading />;
-  if (!filteredResourcesByOwner) return <ErrorFetching />;
-  if (!filteredResourcesByOwner.length)
-    return <EmptyState imageVariant="empty" message="No resources found" />;
 
-  const selectedIndex = !selectedAccountParam
-    ? 0
-    : filteredResourcesByOwner.findIndex(
-        (item) => item.owner === selectedAccountParam
-      );
-  const selectedGroup = filteredResourcesByOwner[selectedIndex];
-  const selectedResources = selectedGroup.resources.find(
-    (item) => item.group === selectedNameParam
-  );
+  const selectedResource = resourcesByOwner
+    ?.find((resource) => resource.owner === selectedAccountParam)
+    ?.resources?.find((resource) => resource.group === selectedNameParam);
   return (
     <>
-      <Flex minW={{ base: "full", md: 80 }} direction="column">
-        <InputWithIcon
-          placeholder="Search with struct tag Name..."
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          action="execute-message-search"
-        />
-        <Accordion
-          allowMultiple
-          defaultIndex={[selectedIndex]}
-          width="full"
-          mt={4}
-        >
-          {filteredResourcesByOwner.map((item) => (
-            <AccordionItem mb={4} key={item.owner}>
-              <AccordionButton>
-                <Flex p={4} justifyContent="space-between" w="full">
-                  <Text variant="body1" fontWeight={600}>
-                    {truncate(item.owner)}
-                  </Text>
-                  <AccordionIcon color="gray.600" />
-                </Flex>
-              </AccordionButton>
-              <AccordionPanel>
-                <Flex direction="column" gap={3} maxW={80}>
-                  {Object.values(item.resources).map((subitem) => (
-                    <ResourceCard
-                      key={subitem.group}
-                      name={subitem.group}
-                      amount={subitem.items.length}
-                      isSelected={selectedResources?.group === subitem.group}
-                      onClick={() =>
-                        handleSelectResource(item.owner, subitem.group)
-                      }
-                      hasBorder
-                    />
-                  ))}
-                </Flex>
-              </AccordionPanel>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </Flex>
-      {selectedResources && (
+      <ResourceLeftPanel
+        address={address}
+        resourcesByOwner={resourcesByOwner}
+        isLoading={isLoading}
+      />
+      {selectedResource && (
         <Flex direction="column" w="full">
           <Flex
             justifyContent="space-between"
@@ -172,15 +66,15 @@ export const ResourceSectionBody = ({
           >
             <Flex alignItems="center">
               <Heading as="h6" variant="h6" wordBreak="break-word">
-                {selectedGroup.owner}::{selectedResources.group}
+                {selectedResource.account}::{selectedResource.group}
               </Heading>
               <Badge variant="primary" ml={2}>
-                {selectedResources.items.length}
+                {selectedResource.items.length}
               </Badge>
             </Flex>
             <Button
               variant="outline-primary"
-              minW={28}
+              minW={32}
               size="sm"
               rightIcon={
                 <CustomIcon
@@ -191,7 +85,7 @@ export const ResourceSectionBody = ({
               onClick={() => {
                 setExpandedIndexes((prev) =>
                   !prev.length
-                    ? Array.from(Array(selectedResources.items.length).keys())
+                    ? Array.from(Array(selectedResource.items.length).keys())
                     : []
                 );
               }}
@@ -205,8 +99,11 @@ export const ResourceSectionBody = ({
             index={expandedIndexes}
             onChange={updateExpandedIndexes}
           >
-            {selectedResources.items.map((item) => (
-              <ResourceDetailCard resourceData={item} key={item.structTag} />
+            {selectedResource.items.map((item) => (
+              <ResourceDetailCard
+                resourceData={item}
+                key={`${item.structTag}`}
+              />
             ))}
           </Accordion>
         </Flex>

From f98de9dd7d13244790e392a58c669a548c58a8fa Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 30 Nov 2023 15:29:01 +0700
Subject: [PATCH 03/11] fix: duplicate and default select

---
 src/lib/components/state/EmptyState.tsx       | 38 ++++++++++---------
 .../components/ErrorFetching.tsx              |  6 ++-
 .../resources/ResourceLeftPanel.tsx           | 13 +------
 .../components/resources/ResourceSection.tsx  |  6 +--
 .../resources/ResourceSectionBody.tsx         | 16 ++++++--
 src/lib/services/move/resourceService.ts      | 23 +++++------
 6 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 83de71e6b..1c4096281 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -27,29 +27,31 @@ export const EmptyState = ({
   textVariant = "body1",
 }: EmptyStateProps) => (
   <Flex
+    alignItems="center"
+    flexDir="column"
+    gap={4}
+    width="full"
     py={py}
     my={my}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="gray.700"
   >
-    <Flex alignItems="center" flexDir="column" gap={4} width="full">
-      {imageVariant && (
-        <StateImage imageVariant={imageVariant} imageWidth={imageWidth} />
-      )}
-      {heading && (
-        <Heading as="h5" variant="h5">
-          {heading}
-        </Heading>
-      )}
-      <Text
-        color="text.dark"
-        textAlign="center"
-        whiteSpace="pre-wrap"
-        variant={textVariant}
-      >
-        {message}
-      </Text>
-    </Flex>
+    {imageVariant && (
+      <StateImage imageVariant={imageVariant} imageWidth={imageWidth} />
+    )}
+    {heading && (
+      <Heading as="h5" variant="h5">
+        {heading}
+      </Heading>
+    )}
+    <Text
+      color="text.dark"
+      textAlign="center"
+      whiteSpace="pre-wrap"
+      variant={textVariant}
+    >
+      {message}
+    </Text>
   </Flex>
 );
diff --git a/src/lib/pages/account-details/components/ErrorFetching.tsx b/src/lib/pages/account-details/components/ErrorFetching.tsx
index ce975f05e..ccaf1a3ef 100644
--- a/src/lib/pages/account-details/components/ErrorFetching.tsx
+++ b/src/lib/pages/account-details/components/ErrorFetching.tsx
@@ -1,8 +1,10 @@
+import { Flex } from "@chakra-ui/react";
+
 import { CustomIcon } from "lib/components/icon";
 
 export const ErrorFetching = () => (
-  <>
+  <Flex>
     <CustomIcon name="alert-circle-solid" color="gray.600" boxSize={4} mr={3} />
     <p>Error fetching data. Please try again later.</p>
-  </>
+  </Flex>
 );
diff --git a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
index 09593f156..047b1a98e 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
@@ -10,30 +10,24 @@ import {
 import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } 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 { ResourceCard } from "lib/components/resource";
-import { EmptyState } from "lib/components/state";
 import type {
   HumanAddr,
   ResourceGroup,
   ResourceGroupByAccount,
-  Option,
 } from "lib/types";
 import { getFirstQueryParam, truncate } from "lib/utils";
 
 interface ResourceSectionBodyProps {
   address: HumanAddr;
-  resourcesByOwner: Option<ResourceGroupByAccount[]>;
-  isLoading: boolean;
+  resourcesByOwner: ResourceGroupByAccount[];
 }
 
 export const ResourceLeftPanel = ({
   address,
   resourcesByOwner,
-  isLoading,
 }: ResourceSectionBodyProps) => {
   const router = useRouter();
   const navigate = useInternalNavigate();
@@ -81,11 +75,6 @@ export const ResourceLeftPanel = ({
     });
   }, [keyword, resourcesByOwner]);
 
-  if (isLoading) return <Loading />;
-  if (!filteredResourcesByOwner) return <ErrorFetching />;
-  if (!filteredResourcesByOwner.length)
-    return <EmptyState imageVariant="empty" message="No resources found" />;
-
   const selectedIndex = !selectedAccountParam
     ? 0
     : filteredResourcesByOwner.findIndex(
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 7884d6167..b8b859853 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -23,11 +23,7 @@ export const ResourceSection = ({
       count={undefined}
       showCount={false}
     />
-    <Flex
-      gap={6}
-      flexDirection={{ base: "column", md: "row" }}
-      position="relative"
-    >
+    <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
       <ResourceSectionBody
         address={address}
         resourcesByOwner={resourcesByOwner}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index 89b0c6bf9..e73eef705 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -2,9 +2,11 @@ import { Accordion, Badge, Button, Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import { ErrorFetching } from "../ErrorFetching";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { ResourceDetailCard } from "lib/components/resource";
+import { EmptyState } from "lib/components/state";
 import type { HumanAddr, Option, ResourceGroupByAccount } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
@@ -25,8 +27,14 @@ export const ResourceSectionBody = ({
 
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
-  const selectedAccountParam = getFirstQueryParam(router.query.account);
-  const selectedNameParam = getFirstQueryParam(router.query.selected);
+  const selectedAccountParam = getFirstQueryParam(
+    router.query.account,
+    resourcesByOwner?.[0]?.owner
+  );
+  const selectedNameParam = getFirstQueryParam(
+    router.query.selected,
+    resourcesByOwner?.[0]?.resources[0]?.group
+  );
 
   const updateExpandedIndexes = (indexes: number[]) =>
     setExpandedIndexes(indexes);
@@ -45,6 +53,9 @@ export const ResourceSectionBody = ({
   }, [resourcesByOwner, selectedNameParam, selectedAccountParam]);
 
   if (isLoading) return <Loading />;
+  if (!resourcesByOwner) return <ErrorFetching />;
+  if (!resourcesByOwner.length)
+    return <EmptyState imageVariant="empty" message="No resources found" />;
 
   const selectedResource = resourcesByOwner
     ?.find((resource) => resource.owner === selectedAccountParam)
@@ -54,7 +65,6 @@ export const ResourceSectionBody = ({
       <ResourceLeftPanel
         address={address}
         resourcesByOwner={resourcesByOwner}
-        isLoading={isLoading}
       />
       {selectedResource && (
         <Flex direction="column" w="full">
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index 2fe79cee8..e7b3e5c93 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -31,26 +31,23 @@ export const useAccountResources = ({
         const [ownerName, groupName] = resource.structTag.split("::");
 
         const ownerResources = acc[ownerName]?.resources ?? [];
-        const groupResources = ownerResources.find(
+        const groupResourcesIndex = ownerResources.findIndex(
           (ownerResource) => ownerResource.group === groupName
         );
-        const items = groupResources?.items ?? [];
-
-        items.push(resource);
+        if (groupResourcesIndex === -1)
+          ownerResources.push({
+            group: groupName,
+            account: ownerName as MoveAccountAddr,
+            displayName: `${truncate(ownerName)}::${groupName}`,
+            items: [resource],
+          });
+        else ownerResources[groupResourcesIndex].items.push(resource);
 
         return {
           ...acc,
           [ownerName]: {
             owner: ownerName as MoveAccountAddr,
-            resources: [
-              ...ownerResources,
-              {
-                group: groupName,
-                account: ownerName as MoveAccountAddr,
-                displayName: `${truncate(ownerName)}::${groupName}`,
-                items,
-              },
-            ],
+            resources: ownerResources,
           },
         };
       }, {});

From 49824fcd1953ac8b6b178678f3450a9662bd74ac Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 30 Nov 2023 17:20:49 +0700
Subject: [PATCH 04/11] fix(components): fix resource left panel in account
 detail

---
 .../resource/ResourceDetailCard.tsx           | 13 ++++++++++--
 .../resources/ResourceLeftPanel.tsx           | 21 +++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 4c6cba888..ea6d3bb30 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -91,8 +91,17 @@ export const ResourceDetailCard = ({
       >
         <Flex direction="column" gap={3}>
           {formattedArray.map((item) => (
-            <Flex key={item.key} gap={4}>
-              <Text variant="body2" color="text.dark" minW={40}>
+            <Flex
+              key={item.key}
+              gap={{ base: 1, md: 4 }}
+              direction={{ base: "column", md: "row" }}
+            >
+              <Text
+                variant="body2"
+                color="text.dark"
+                fontWeight="600"
+                minW={40}
+              >
                 {item.key}
               </Text>
               {typeof item.value === "object" ? (
diff --git a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
index 047b1a98e..e6b041ec9 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
@@ -33,8 +33,14 @@ export const ResourceLeftPanel = ({
   const navigate = useInternalNavigate();
   const [keyword, setKeyword] = useState("");
 
-  const selectedAccountParam = getFirstQueryParam(router.query.account);
-  const selectedNameParam = getFirstQueryParam(router.query.selected);
+  const selectedAccountParam = getFirstQueryParam(
+    router.query.account,
+    resourcesByOwner?.[0]?.owner
+  );
+  const selectedNameParam = getFirstQueryParam(
+    router.query.selected,
+    resourcesByOwner?.[0]?.resources[0]?.group
+  );
 
   const handleSelectResource = useCallback(
     (
@@ -86,7 +92,14 @@ export const ResourceLeftPanel = ({
   );
 
   return (
-    <Flex minW={{ base: "full", md: 80 }} direction="column">
+    <Flex
+      minW={{ base: "full", md: 80 }}
+      direction="column"
+      pb={{ base: 4, md: 0 }}
+      mb={{ base: 4, md: 0 }}
+      borderBottom={{ base: "1px solid", md: "none" }}
+      borderColor={{ base: "gray.700", md: "transparent" }}
+    >
       <InputWithIcon
         placeholder="Search with struct tag Name..."
         value={keyword}
@@ -111,7 +124,7 @@ export const ResourceLeftPanel = ({
             </AccordionButton>
             <AccordionPanel>
               {item.resources.length ? (
-                <Flex direction="column" gap={3} maxW={80}>
+                <Flex direction="column" gap={3}>
                   {Object.values(item.resources).map((subitem) => (
                     <ResourceCard
                       key={subitem.displayName}

From 3d91049ee4dcc14501f09e7d02ea2e17b1490961 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 30 Nov 2023 17:39:03 +0700
Subject: [PATCH 05/11] fix(components): add changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e96829b02..433acbed3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#645](https://github.com/alleslabs/celatone-frontend/pull/645) Add search for resource in account detail
 - [#634](https://github.com/alleslabs/celatone-frontend/pull/634) api v1 - move pool info
 - [#640](https://github.com/alleslabs/celatone-frontend/pull/640) api v1 - recent blocks list
 - [#632](https://github.com/alleslabs/celatone-frontend/pull/632) api v1 - assets info

From f0a6ab3825a35adf60d9d0dc1906aa953f9a815d Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 30 Nov 2023 17:59:41 +0700
Subject: [PATCH 06/11] fix(components): fix searchbar placeholder

---
 .../account-details/components/resources/ResourceLeftPanel.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
index e6b041ec9..ae7fd20ba 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
@@ -101,7 +101,7 @@ export const ResourceLeftPanel = ({
       borderColor={{ base: "gray.700", md: "transparent" }}
     >
       <InputWithIcon
-        placeholder="Search with struct tag Name..."
+        placeholder="Search with module name..."
         value={keyword}
         onChange={(e) => setKeyword(e.target.value)}
         action="execute-message-search"

From 3d4fa41bdc138dfa66d1028fa142471634b955f3 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Mon, 4 Dec 2023 18:06:04 +0700
Subject: [PATCH 07/11] fix: refactor

---
 .../resources/ResourceLeftPanel.tsx           | 44 ++++++++-----------
 .../resources/ResourceSectionBody.tsx         | 33 +++++---------
 2 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
index ae7fd20ba..5cb252a18 100644
--- a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
@@ -69,25 +69,21 @@ export const ResourceLeftPanel = ({
   const filteredResourcesByOwner = useMemo(() => {
     if (!keyword) return resourcesByOwner;
 
-    return resourcesByOwner?.map((each) => {
-      return {
-        ...each,
-        resources: each.resources.filter((resource) =>
-          resource.group
-            .toLowerCase()
-            .includes(keyword.trim().toLocaleLowerCase())
-        ),
-      };
-    });
+    return resourcesByOwner?.map((each) => ({
+      ...each,
+      resources: each.resources.filter((resource) =>
+        resource.group
+          .toLowerCase()
+          .includes(keyword.trim().toLocaleLowerCase())
+      ),
+    }));
   }, [keyword, resourcesByOwner]);
 
-  const selectedIndex = !selectedAccountParam
-    ? 0
-    : filteredResourcesByOwner.findIndex(
-        (item) => item.owner === selectedAccountParam
-      );
+  const selectedIndex = filteredResourcesByOwner.findIndex(
+    (item) => item.owner === selectedAccountParam
+  );
   const selectedGroup = filteredResourcesByOwner[selectedIndex];
-  const selectedResources = selectedGroup.resources.find(
+  const selectedResources = selectedGroup?.resources.find(
     (item) => item.group === selectedNameParam
   );
 
@@ -139,21 +135,17 @@ export const ResourceLeftPanel = ({
                   ))}
                 </Flex>
               ) : (
-                <Flex
-                  w="full"
+                <Text
+                  variant="body2"
+                  color="text.dark"
+                  textAlign="center"
                   p={4}
-                  justifyContent="center"
-                  alignItems="center"
                   border="1px solid"
                   borderRadius="8px"
                   borderColor="gray.700"
-                  direction="column"
-                  gap={4}
                 >
-                  <Text variant="body2" color="text.dark" textAlign="center">
-                    No matching resource found
-                  </Text>
-                </Flex>
+                  No matching resource found
+                </Text>
               )}
             </AccordionPanel>
           </AccordionItem>
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index e73eef705..578cfb4d3 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -1,4 +1,4 @@
-import { Accordion, Badge, Button, Flex, Heading } from "@chakra-ui/react";
+import { Accordion, Badge, Box, Button, Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
@@ -24,7 +24,6 @@ export const ResourceSectionBody = ({
   isLoading,
 }: ResourceSectionBodyProps) => {
   const router = useRouter();
-
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
   const selectedAccountParam = getFirstQueryParam(
@@ -36,30 +35,18 @@ export const ResourceSectionBody = ({
     resourcesByOwner?.[0]?.resources[0]?.group
   );
 
-  const updateExpandedIndexes = (indexes: number[]) =>
-    setExpandedIndexes(indexes);
-
+  const selectedResource = resourcesByOwner
+    ?.find((resource) => resource.owner === selectedAccountParam)
+    ?.resources?.find((resource) => resource.group === selectedNameParam);
   useEffect(() => {
-    const resourcesLength = resourcesByOwner
-      ?.find((resource) => resource.owner === selectedAccountParam)
-      ?.resources?.find((resource) => resource.group === selectedNameParam)
-      ?.items.length;
-
-    if (resourcesLength === 1) {
-      setExpandedIndexes([0]);
-    } else {
-      setExpandedIndexes([]);
-    }
-  }, [resourcesByOwner, selectedNameParam, selectedAccountParam]);
+    setExpandedIndexes(selectedResource?.items.length === 1 ? [0] : []);
+  }, [resourcesByOwner, selectedResource]);
 
   if (isLoading) return <Loading />;
   if (!resourcesByOwner) return <ErrorFetching />;
   if (!resourcesByOwner.length)
     return <EmptyState imageVariant="empty" message="No resources found" />;
 
-  const selectedResource = resourcesByOwner
-    ?.find((resource) => resource.owner === selectedAccountParam)
-    ?.resources?.find((resource) => resource.group === selectedNameParam);
   return (
     <>
       <ResourceLeftPanel
@@ -67,7 +54,7 @@ export const ResourceSectionBody = ({
         resourcesByOwner={resourcesByOwner}
       />
       {selectedResource && (
-        <Flex direction="column" w="full">
+        <Box w="full">
           <Flex
             justifyContent="space-between"
             alignItems="center"
@@ -107,16 +94,16 @@ export const ResourceSectionBody = ({
             allowMultiple
             width="full"
             index={expandedIndexes}
-            onChange={updateExpandedIndexes}
+            onChange={(indexes: number[]) => setExpandedIndexes(indexes)}
           >
             {selectedResource.items.map((item) => (
               <ResourceDetailCard
-                resourceData={item}
                 key={`${item.structTag}`}
+                resourceData={item}
               />
             ))}
           </Accordion>
-        </Flex>
+        </Box>
       )}
     </>
   );

From 13a603874d17b0780f06b88541e36270599cc084 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 8 Dec 2023 13:45:30 +0700
Subject: [PATCH 08/11] fix(components): revert count

---
 .../components/resources/ResourceOverview.tsx |  2 +-
 .../components/resources/ResourceSection.tsx  |  5 ++-
 src/lib/pages/account-details/index.tsx       |  2 +
 .../module-details/components/ModuleTop.tsx   | 40 +++++++++++++++++--
 src/lib/styles/theme/components/button.ts     | 11 +++--
 5 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index 422c965d3..3e99d9465 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -30,7 +30,7 @@ export const ResourceOverview = ({
           title="Resources"
           count={totalCount}
           onViewMore={onViewMore}
-          showCount={false}
+          showCount={!!isMobile}
         />
       ) : (
         <>
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index b8b859853..fbc447007 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -9,19 +9,20 @@ interface ResourceSectionProps {
   address: HumanAddr;
   resourcesByOwner: Option<ResourceGroupByAccount[]>;
   isLoading: boolean;
+  count: number | undefined;
 }
 
 export const ResourceSection = ({
   address,
   resourcesByOwner,
   isLoading,
+  count,
 }: ResourceSectionProps) => (
   <Flex direction="column" mt={8}>
     <TableTitle
       helperText="Resources stored in this account"
       title="Resources"
-      count={undefined}
-      showCount={false}
+      count={count}
     />
     <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
       <ResourceSectionBody
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index c661b2f09..9adfb5257 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -251,6 +251,7 @@ const AccountDetailsBody = ({
             Admins
           </CustomTab>
           <CustomTab
+            count={resourcesData?.totalCount}
             isDisabled={!resourcesData?.totalCount}
             onClick={handleTabChange(TabIndex.Resources)}
             hidden={!move.enabled}
@@ -415,6 +416,7 @@ const AccountDetailsBody = ({
           </TabPanel>
           <TabPanel p={0}>
             <ResourceSection
+              count={resourcesData?.totalCount}
               address={accountAddress}
               resourcesByOwner={resourcesData?.groupedByOwner}
               isLoading={isResourceLoading}
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 86eefb436..e2d364e50 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -2,7 +2,11 @@ import type { TextProps } from "@chakra-ui/react";
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 
 import { AmpEvent, track } from "lib/amplitude";
-import { useInternalNavigate, useMobile } from "lib/app-provider";
+import {
+  // useCurrentChain,
+  useInternalNavigate,
+  useMobile,
+} from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyButton } from "lib/components/copy";
 import { CopyLink } from "lib/components/CopyLink";
@@ -25,6 +29,14 @@ const baseTextStyle: TextProps = {
 export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
+  // const { address } = useCurrentChain();
+
+  // let canRepublish = false;
+  // if (address === moduleData.address) {
+  //   canRepublish = true;
+  // } else {
+  //   canRepublish = false;
+  // }
 
   return (
     <Flex direction="column">
@@ -146,7 +158,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             w={{ base: "full", md: "auto" }}
           >
             <Button
-              variant="outline-primary"
+              variant="outline-white"
               w={{ base: "full", md: "auto" }}
               leftIcon={<CustomIcon name="query" mr={0} />}
               size={{ base: "sm", md: "md" }}
@@ -165,7 +177,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
               View
             </Button>
             <Button
-              variant="outline-primary"
+              variant="outline-white"
               w={{ base: "full", md: "auto" }}
               leftIcon={<CustomIcon name="execute" mr={0} />}
               size={{ base: "sm", md: "md" }}
@@ -183,6 +195,28 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             >
               Execute
             </Button>
+            {/* <Tooltip
+              // isOpen={isHover || hasCopied}
+              variant="primary-light"
+              label="text"
+              closeOnClick={false}
+            > */}
+            <Button
+              // disabled
+              variant="outline-white"
+              w={{ base: "full", md: "auto" }}
+              leftIcon={<CustomIcon name="migrate" mr={0} />}
+              size={{ base: "sm", md: "md" }}
+              onClick={() => {
+                track(AmpEvent.USE_MAIN_CTA, { label: "View" });
+                navigate({
+                  pathname: "/publish-module",
+                });
+              }}
+            >
+              Republish
+            </Button>
+            {/* </Tooltip> */}
             <CopyButton
               amptrackSection="[Module Detail CTA] Copy ABI "
               value={moduleData.abi}
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index 46d645110..65916ff12 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -3,7 +3,6 @@ import { defineStyle } from "@chakra-ui/react";
 
 import { CURR_THEME } from "env";
 
-const gray100 = "gray.100";
 const gray400 = "gray.400";
 const gray500 = "gray.500";
 const gray600 = "gray.600";
@@ -204,7 +203,7 @@ export const Button: ComponentStyleConfig = {
     "outline-white": generateStyle({
       basic: {
         border: borderDefault,
-        borderColor: gray100,
+        borderColor: gray400,
         color: "text.main",
         "> svg": {
           color: "text.main",
@@ -212,13 +211,13 @@ export const Button: ComponentStyleConfig = {
       },
       disabled: {
         border: borderDefault,
-        borderColor: gray500,
-        color: gray500,
+        borderColor: gray600,
+        color: gray600,
         "> svg": {
-          color: gray500,
+          color: gray600,
         },
       },
-      hoverBg: gray400,
+      hoverBg: gray700,
       activeBg: "transparent",
     }),
     "outline-accent": generateStyle({

From 94347ddb2b21c905b2d6edd51bb563033d38c3db Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 8 Dec 2023 14:03:41 +0700
Subject: [PATCH 09/11] fix(components): remove minor comment

---
 .../module-details/components/ModuleTop.tsx   | 36 +------------------
 1 file changed, 1 insertion(+), 35 deletions(-)

diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index e2d364e50..45e8cef99 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -2,11 +2,7 @@ import type { TextProps } from "@chakra-ui/react";
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 
 import { AmpEvent, track } from "lib/amplitude";
-import {
-  // useCurrentChain,
-  useInternalNavigate,
-  useMobile,
-} from "lib/app-provider";
+import { useInternalNavigate, useMobile } from "lib/app-provider";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyButton } from "lib/components/copy";
 import { CopyLink } from "lib/components/CopyLink";
@@ -29,14 +25,6 @@ const baseTextStyle: TextProps = {
 export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
-  // const { address } = useCurrentChain();
-
-  // let canRepublish = false;
-  // if (address === moduleData.address) {
-  //   canRepublish = true;
-  // } else {
-  //   canRepublish = false;
-  // }
 
   return (
     <Flex direction="column">
@@ -195,28 +183,6 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             >
               Execute
             </Button>
-            {/* <Tooltip
-              // isOpen={isHover || hasCopied}
-              variant="primary-light"
-              label="text"
-              closeOnClick={false}
-            > */}
-            <Button
-              // disabled
-              variant="outline-white"
-              w={{ base: "full", md: "auto" }}
-              leftIcon={<CustomIcon name="migrate" mr={0} />}
-              size={{ base: "sm", md: "md" }}
-              onClick={() => {
-                track(AmpEvent.USE_MAIN_CTA, { label: "View" });
-                navigate({
-                  pathname: "/publish-module",
-                });
-              }}
-            >
-              Republish
-            </Button>
-            {/* </Tooltip> */}
             <CopyButton
               amptrackSection="[Module Detail CTA] Copy ABI "
               value={moduleData.abi}

From 9d9fa993de31dfa4565ee324d21371c4ab427241 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 8 Dec 2023 14:12:08 +0700
Subject: [PATCH 10/11] fix(components): remove comments

---
 .../account-details/components/resources/ResourceOverview.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index 3e99d9465..747148bdd 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -30,7 +30,6 @@ export const ResourceOverview = ({
           title="Resources"
           count={totalCount}
           onViewMore={onViewMore}
-          showCount={!!isMobile}
         />
       ) : (
         <>

From 857ff0596cd0b857704c77cc36206a42df94ba66 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 8 Dec 2023 14:21:00 +0700
Subject: [PATCH 11/11] fix: refactor

---
 src/lib/components/table/MobileTitle.tsx                  | 6 +++---
 src/lib/components/table/TableTitle.tsx                   | 8 +++-----
 .../components/resources/ResourceOverview.tsx             | 1 -
 .../components/resources/ResourceSection.tsx              | 6 +++---
 src/lib/pages/account-details/index.tsx                   | 2 +-
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/table/MobileTitle.tsx b/src/lib/components/table/MobileTitle.tsx
index 276b714be..f7c0e6ddc 100644
--- a/src/lib/components/table/MobileTitle.tsx
+++ b/src/lib/components/table/MobileTitle.tsx
@@ -8,8 +8,8 @@ import { TableTitle } from "./TableTitle";
 interface MobileTitleProps {
   title: string;
   count: Option<number>;
-  onViewMore?: () => void;
   showCount?: boolean;
+  onViewMore?: () => void;
 }
 const cardProps = {
   width: "100%",
@@ -19,10 +19,10 @@ const cardProps = {
 };
 
 export const MobileTitle = ({
-  onViewMore,
   title,
   count,
   showCount = true,
+  onViewMore,
 }: MobileTitleProps) => (
   <Flex
     style={cardProps}
@@ -30,7 +30,7 @@ export const MobileTitle = ({
     opacity={!count ? 0.5 : 1}
     bg="gray.900"
   >
-    <TableTitle title={title} count={count} mb={0} showCount={showCount} />
+    <TableTitle title={title} count={count} showCount={showCount} mb={0} />
     <CustomIcon name="chevron-right" color="gray.600" />
   </Flex>
 );
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index 3650f029a..bf9e02715 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -1,21 +1,19 @@
 import type { BoxProps } from "@chakra-ui/react";
 import { Badge, Box, Flex, Heading, Text } from "@chakra-ui/react";
 
-import type { Option } from "lib/types";
-
 interface TableTitleProps extends BoxProps {
   title: string;
-  count: Option<number>;
-  helperText?: string;
+  count?: number;
   showCount?: boolean;
+  helperText?: string;
 }
 
 export const TableTitle = ({
   title,
   count,
+  showCount = true,
   helperText,
   mb = 6,
-  showCount = true,
   ...props
 }: TableTitleProps) => (
   <Box mb={mb} {...props}>
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index 747148bdd..11eb9d18a 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -36,7 +36,6 @@ export const ResourceOverview = ({
           <TableTitle
             title="Resources"
             helperText="Resources stored in this account"
-            count={undefined}
             showCount={false}
           />
           <ResourceOverviewBody
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index fbc447007..31e52d928 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -7,22 +7,22 @@ import { ResourceSectionBody } from "./ResourceSectionBody";
 
 interface ResourceSectionProps {
   address: HumanAddr;
+  totalCount: Option<number>;
   resourcesByOwner: Option<ResourceGroupByAccount[]>;
   isLoading: boolean;
-  count: number | undefined;
 }
 
 export const ResourceSection = ({
   address,
+  totalCount,
   resourcesByOwner,
   isLoading,
-  count,
 }: ResourceSectionProps) => (
   <Flex direction="column" mt={8}>
     <TableTitle
       helperText="Resources stored in this account"
       title="Resources"
-      count={count}
+      count={totalCount}
     />
     <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
       <ResourceSectionBody
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index e105a789e..189dff3f6 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -384,8 +384,8 @@ const AccountDetailsBody = ({
           </TabPanel>
           <TabPanel p={0}>
             <ResourceSection
-              count={resourcesData?.totalCount}
               address={accountAddress}
+              totalCount={resourcesData?.totalCount}
               resourcesByOwner={resourcesData?.groupedByOwner}
               isLoading={isResourceLoading}
             />