From 21516c64a49293433937e67992417e443c58f052 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 18 Jan 2024 17:49:35 +0700
Subject: [PATCH 1/8] fix(components): fix nft related bugs

---
 src/lib/components/action-msg/SingleMsg.tsx   |  6 ++-
 .../components/button/InstantiateButton.tsx   | 14 +++----
 src/lib/components/icon/CustomIcon.tsx        |  2 +-
 .../json-schema/EditSchemaButtons.tsx         |  3 +-
 src/lib/components/nft/NftCard.tsx            |  1 +
 .../table/modules/ModulePathLink.tsx          |  2 +-
 .../MutateEventsTableMobileCard.tsx           |  8 +++-
 .../mutate-events/MutateEventsTableRow.tsx    | 12 +++++-
 src/lib/layout/mobile/NavDrawer.tsx           | 11 +++++
 .../components/nfts/FilterItem.tsx            | 25 +++++++----
 .../components/nfts/NftsSection.tsx           |  1 +
 .../module-details/components/ModuleTop.tsx   |  1 +
 src/lib/pages/nft-collection-details/data.ts  |  2 +-
 .../pages/nft-collection-details/index.tsx    | 42 +++++++++++--------
 .../components/CollectionCard.tsx             | 40 +++++++++---------
 .../components/CollectionList.tsx             |  2 +-
 .../nft-details/components/NftInfoItem.tsx    |  5 ++-
 src/lib/pages/nft-details/index.tsx           | 37 +++++++++++-----
 .../public-project/components/AllProject.tsx  |  3 +-
 .../components/tx-message/TxMsgExpand.tsx     |  4 +-
 src/lib/styles/theme/components/tag.ts        |  5 +--
 21 files changed, 141 insertions(+), 85 deletions(-)

diff --git a/src/lib/components/action-msg/SingleMsg.tsx b/src/lib/components/action-msg/SingleMsg.tsx
index 5518fab98..9841fc69a 100644
--- a/src/lib/components/action-msg/SingleMsg.tsx
+++ b/src/lib/components/action-msg/SingleMsg.tsx
@@ -54,6 +54,8 @@ export const SingleMsg = ({
         <Tag
           variant="gray"
           size="sm"
+          wordBreak="break-word"
+          textAlign="left"
           key={index.toString() + tag}
           color={tag ? "text.main" : "text.disabled"}
         >
@@ -62,13 +64,13 @@ export const SingleMsg = ({
       ))}
       {/* Tag left over */}
       {tags && length && length - tags.length > 0 && (
-        <Tag variant="gray" size="sm">
+        <Tag variant="gray" size="sm" wordBreak="break-word" textAlign="left">
           +{length - tags.length}
         </Tag>
       )}
       {/* Length  */}
       {!tags && length && (
-        <Tag variant="gray" size="sm">
+        <Tag variant="gray" size="sm" wordBreak="break-word" textAlign="left">
           {length}
         </Tag>
       )}
diff --git a/src/lib/components/button/InstantiateButton.tsx b/src/lib/components/button/InstantiateButton.tsx
index bcba9ccbf..80a835541 100644
--- a/src/lib/components/button/InstantiateButton.tsx
+++ b/src/lib/components/button/InstantiateButton.tsx
@@ -23,10 +23,11 @@ const getInstantiateButtonProps = (
   variant: string;
   icon: JSX.Element | undefined;
 } => {
+  const buttonDisabledState = "outline-gray";
   if (isUnknown) {
     return {
       tooltipLabel: "",
-      variant: "outline-gray",
+      variant: buttonDisabledState,
       icon: undefined,
     };
   }
@@ -35,20 +36,15 @@ const getInstantiateButtonProps = (
       tooltipLabel: isWalletConnected
         ? "You can instantiate without opening proposal"
         : "You need to connect wallet to instantiate contract",
-      variant: "outline-primary",
-      icon: (
-        <CustomIcon
-          name="instantiate"
-          color={isWalletConnected ? "primary.light" : "gray.600"}
-        />
-      ),
+      variant: isWalletConnected ? "outline-primary" : buttonDisabledState,
+      icon: <CustomIcon name="instantiate" />,
     };
   }
   return {
     tooltipLabel: isWalletConnected
       ? "Instantiate through proposal only (Coming Soon)"
       : "You need to connect wallet to open instantiate proposal",
-    variant: "outline-gray",
+    variant: buttonDisabledState,
     icon: <CustomIcon name="vote" />,
   };
 };
diff --git a/src/lib/components/icon/CustomIcon.tsx b/src/lib/components/icon/CustomIcon.tsx
index 25350fcbb..0e204cc11 100644
--- a/src/lib/components/icon/CustomIcon.tsx
+++ b/src/lib/components/icon/CustomIcon.tsx
@@ -1539,7 +1539,7 @@ export const ICONS = {
         />
       </>
     ),
-    viewBox: viewboxDefault,
+    viewBox: "0 0 16 14",
   },
 };
 
diff --git a/src/lib/components/json-schema/EditSchemaButtons.tsx b/src/lib/components/json-schema/EditSchemaButtons.tsx
index 4756c8cc5..c33837a30 100644
--- a/src/lib/components/json-schema/EditSchemaButtons.tsx
+++ b/src/lib/components/json-schema/EditSchemaButtons.tsx
@@ -26,10 +26,9 @@ export const EditSchemaButtons = ({
     <Flex gap={1}>
       <Tooltip label="Reattach JSON schema">
         <IconButton
-          variant="ghost-gray"
+          variant="ghost-gray-icon"
           size="sm"
           onClick={handleReattach}
-          color="gray.600"
           icon={<CustomIcon name="edit" boxSize={4} />}
           aria-label="reattach schema"
         />
diff --git a/src/lib/components/nft/NftCard.tsx b/src/lib/components/nft/NftCard.tsx
index 3d4421da9..d0f01794e 100644
--- a/src/lib/components/nft/NftCard.tsx
+++ b/src/lib/components/nft/NftCard.tsx
@@ -39,6 +39,7 @@ export const NftCard = ({
             width="100%"
             height="100%"
             objectFit="cover"
+            backgroundPosition="center"
             borderRadius="8px"
             src={metadata?.image ? metadata.image : NFT_IMAGE_PLACEHOLDER}
           />
diff --git a/src/lib/components/table/modules/ModulePathLink.tsx b/src/lib/components/table/modules/ModulePathLink.tsx
index 7b226c704..4e7866877 100644
--- a/src/lib/components/table/modules/ModulePathLink.tsx
+++ b/src/lib/components/table/modules/ModulePathLink.tsx
@@ -22,7 +22,7 @@ export const ModulePathLink = ({
       className="copier-wrapper"
       display={{ base: "inline-flex", md: "flex" }}
       align="center"
-      h="24px"
+      h={{ base: "auto", md: "24px" }}
     >
       <AppLink
         href={`/modules/${hexAddr}/${moduleName}`}
diff --git a/src/lib/components/table/mutate-events/MutateEventsTableMobileCard.tsx b/src/lib/components/table/mutate-events/MutateEventsTableMobileCard.tsx
index 3cde9b345..525b74d62 100644
--- a/src/lib/components/table/mutate-events/MutateEventsTableMobileCard.tsx
+++ b/src/lib/components/table/mutate-events/MutateEventsTableMobileCard.tsx
@@ -25,12 +25,16 @@ export const MutateEventsTableMobileCard = ({
       <Stack spacing="12px">
         <Flex direction="column">
           <MobileLabel label="Old Value" />
-          <Text variant="body2">{oldValue}</Text>
+          <Text variant="body2" wordBreak="break-word">
+            {oldValue}
+          </Text>
         </Flex>
         <CustomIcon name="arrow-down" color="gray.600" />
         <Flex direction="column">
           <MobileLabel label="New Value" />
-          <Text variant="body2">{newValue}</Text>
+          <Text variant="body2" wordBreak="break-word">
+            {newValue}
+          </Text>
         </Flex>
       </Stack>
     }
diff --git a/src/lib/components/table/mutate-events/MutateEventsTableRow.tsx b/src/lib/components/table/mutate-events/MutateEventsTableRow.tsx
index c409c8fd4..e594b9183 100644
--- a/src/lib/components/table/mutate-events/MutateEventsTableRow.tsx
+++ b/src/lib/components/table/mutate-events/MutateEventsTableRow.tsx
@@ -28,11 +28,19 @@ export const MutateEventsTableRow = ({
       <TableRow pr={1}>
         <Badge>{mutatedFieldName}</Badge>
       </TableRow>
-      <TableRow>{oldValue}</TableRow>
+      <TableRow>
+        <Text display="inline" wordBreak="break-word">
+          {oldValue}
+        </Text>
+      </TableRow>
       <TableRow px={10}>
         <CustomIcon name="arrow-right" color="gray.600" />
       </TableRow>
-      <TableRow>{newValue}</TableRow>
+      <TableRow>
+        <Text display="inline" wordBreak="break-word">
+          {newValue}
+        </Text>
+      </TableRow>
       <TableRow>
         <Flex direction="column" gap={1}>
           <Text variant="body3">{formatUTC(timestamp)}</Text>
diff --git a/src/lib/layout/mobile/NavDrawer.tsx b/src/lib/layout/mobile/NavDrawer.tsx
index 5b3995d40..711ac3782 100644
--- a/src/lib/layout/mobile/NavDrawer.tsx
+++ b/src/lib/layout/mobile/NavDrawer.tsx
@@ -18,6 +18,7 @@ import { NetworkMenu } from "../NetworkMenu";
 import { AmpEvent, track } from "lib/amplitude";
 import {
   useMoveConfig,
+  useNftConfig,
   usePublicProjectConfig,
   useWasmConfig,
 } from "lib/app-provider";
@@ -33,6 +34,7 @@ export const NavDrawer = () => {
   const { getSavedPublicProjects } = usePublicProjectStore();
   const wasm = useWasmConfig({ shouldRedirect: false });
   const move = useMoveConfig({ shouldRedirect: false });
+  const nft = useNftConfig({ shouldRedirect: false });
   const publicProject = usePublicProjectConfig({ shouldRedirect: false });
 
   const mobileMenu: MenuInfo[] = [
@@ -84,6 +86,15 @@ export const NavDrawer = () => {
               },
             ]
           : []),
+        ...(nft.enabled
+          ? [
+              {
+                name: "NFT Collections",
+                slug: "/nft-collections",
+                icon: "group" as IconKeys,
+              },
+            ]
+          : []),
       ],
     },
   ];
diff --git a/src/lib/pages/account-details/components/nfts/FilterItem.tsx b/src/lib/pages/account-details/components/nfts/FilterItem.tsx
index 875e2d904..08d845ea9 100644
--- a/src/lib/pages/account-details/components/nfts/FilterItem.tsx
+++ b/src/lib/pages/account-details/components/nfts/FilterItem.tsx
@@ -1,7 +1,8 @@
-import { Badge, Box, Flex, Image, Text } from "@chakra-ui/react";
+import { Badge, Flex, Image, Text } from "@chakra-ui/react";
 
 import { AmpEvent, track } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
+import { NFT_IMAGE_PLACEHOLDER } from "lib/data";
 import { useMetadata } from "lib/services/nft";
 
 interface FilterItemProps {
@@ -10,6 +11,7 @@ interface FilterItemProps {
   onClick: () => void;
   uri?: string;
   isActive?: boolean;
+  isDefault?: boolean;
 }
 
 export const FilterItem = ({
@@ -18,6 +20,7 @@ export const FilterItem = ({
   onClick,
   uri,
   isActive,
+  isDefault = false,
 }: FilterItemProps) => {
   const { data: metadata } = useMetadata(uri ?? "");
 
@@ -39,17 +42,23 @@ export const FilterItem = ({
       justify="space-between"
     >
       <Flex gap="8px" align="center">
-        {metadata && uri ? (
+        {isDefault ? (
+          <Flex
+            width="32px"
+            height="32px"
+            p={1}
+            background="gray.800"
+            borderRadius="4px"
+          >
+            <CustomIcon name="group" />
+          </Flex>
+        ) : (
           <Image
             width="32px"
             height="32px"
-            borderRadius="8px"
-            src={metadata?.image}
+            borderRadius="4px"
+            src={metadata?.image ? metadata?.image : NFT_IMAGE_PLACEHOLDER}
           />
-        ) : (
-          <Box width="32px">
-            <CustomIcon name="group" />
-          </Box>
         )}
         <Text fontSize="14px" width="150px" className="ellipsis">
           {collectionName}
diff --git a/src/lib/pages/account-details/components/nfts/NftsSection.tsx b/src/lib/pages/account-details/components/nfts/NftsSection.tsx
index 47a4569dc..f53aa730d 100644
--- a/src/lib/pages/account-details/components/nfts/NftsSection.tsx
+++ b/src/lib/pages/account-details/components/nfts/NftsSection.tsx
@@ -57,6 +57,7 @@ export const NftsSection = ({ address, totalData = 0 }: NftsSectionProps) => {
             onClick={() => handleOnClick(undefined)}
             isActive={selectedCollection === undefined}
             count={totalData}
+            isDefault
           />
           {collections.map((item) => (
             <FilterItem
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 305fafb24..bbe8d17a0 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -157,6 +157,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
               textFormat="normal"
               maxWidth="fit-content"
               type="user_address"
+              fixedHeight={false}
             />
           </Flex>
           <Flex
diff --git a/src/lib/pages/nft-collection-details/data.ts b/src/lib/pages/nft-collection-details/data.ts
index 4a3d20e45..7284c1c4c 100644
--- a/src/lib/pages/nft-collection-details/data.ts
+++ b/src/lib/pages/nft-collection-details/data.ts
@@ -59,7 +59,7 @@ export const useCollectionInfos = (
           ? Number(supplyData.max_supply)
           : undefined,
       },
-      royalty: Number(royaltyData?.royalty ?? 0),
+      royalty: Number(royaltyData?.royalty ?? 0) * 100,
     },
     isLoading: isFetching,
   };
diff --git a/src/lib/pages/nft-collection-details/index.tsx b/src/lib/pages/nft-collection-details/index.tsx
index 9e278eab4..8f02497dc 100644
--- a/src/lib/pages/nft-collection-details/index.tsx
+++ b/src/lib/pages/nft-collection-details/index.tsx
@@ -14,7 +14,6 @@ import { useCallback, useEffect } from "react";
 
 import { AmpEvent, track, trackUseTab } from "lib/amplitude";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
-import { AppLink } from "lib/components/AppLink";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomTab } from "lib/components/CustomTab";
 import { ExplorerLink } from "lib/components/ExplorerLink";
@@ -123,7 +122,9 @@ const CollectionDetailsBody = ({
           direction="column"
           my={6}
           gap={1}
-          maxW={{ base: "full", md: "800px" }}
+          overflow="hidden"
+          minW={{ md: "680px" }}
+          maxW="full"
         >
           <Heading as="h5" variant="h5" mb={1} className="ellipsis">
             {name}
@@ -159,22 +160,27 @@ const CollectionDetailsBody = ({
             </Badge>
           </Flex>
         </Flex>
-        <AppLink href={`/accounts/${collectionAddress}/resources`}>
-          <Button
-            variant="outline-primary"
-            minW="140px !important"
-            w={{ base: "full", md: "auto" }}
-            size={{ base: "sm", md: "md" }}
-            mb={{ base: 4, md: 0 }}
-            onClick={() =>
-              track(AmpEvent.USE_NFT_VIEW_RESOURCE_CTA, {
-                amptrackSection: "nft-collection-details",
-              })
-            }
-          >
-            View Resource
-          </Button>
-        </AppLink>
+        <Button
+          variant="outline-primary"
+          minW="140px !important"
+          w={{ base: "full", md: "auto" }}
+          size={{ base: "sm", md: "md" }}
+          mb={{ base: 4, md: 0 }}
+          onClick={() => {
+            track(AmpEvent.USE_NFT_VIEW_RESOURCE_CTA, {
+              amptrackSection: "nft-collection-details",
+            });
+            navigate({
+              pathname: "/accounts/[accountAddress]/[tab]",
+              query: {
+                accountAddress: collectionAddress,
+                tab: "resources",
+              },
+            });
+          }}
+        >
+          View Resource
+        </Button>
       </Flex>
       <Tabs
         index={Object.values(TabIndex).indexOf(tab)}
diff --git a/src/lib/pages/nft-collections/components/CollectionCard.tsx b/src/lib/pages/nft-collections/components/CollectionCard.tsx
index e8a8198bc..8b2ff26db 100644
--- a/src/lib/pages/nft-collections/components/CollectionCard.tsx
+++ b/src/lib/pages/nft-collections/components/CollectionCard.tsx
@@ -22,32 +22,34 @@ export const CollectionCard = ({ collectionInfo }: CollectionCardProps) => {
         bg: "gray.800",
       }}
     >
-      <Flex gap="24px" alignItems="center" maxW="full" w="full">
-        {metadata?.image ? (
-          <Image
-            minW="150px"
-            h="150px"
-            borderRadius="8px"
-            src={metadata?.image}
-          />
-        ) : (
-          <Image
-            minW="150px"
-            h="150px"
-            borderRadius="8px"
-            src={NFT_IMAGE_PLACEHOLDER}
-          />
-        )}
-        <Flex direction="column" gap={2} overflowX="hidden">
-          <Heading as="h6" variant="h6" fontWeight={600} className="ellipsis">
+      <Flex
+        gap="24px"
+        alignItems="center"
+        maxW="full"
+        w="full"
+        overflow="hidden"
+      >
+        <Image
+          minW={{ base: 28, md: 40 }}
+          w={{ base: 28, md: 40 }}
+          h={{ base: 28, md: 40 }}
+          objectFit="cover"
+          backgroundPosition="center"
+          borderRadius="8px"
+          src={metadata?.image ? metadata?.image : NFT_IMAGE_PLACEHOLDER}
+        />
+        <Flex direction="column" gap={2} overflow="hidden" w="full">
+          <Heading as="h6" variant="h6" fontWeight={600}>
             {name}
           </Heading>
           <Text
             color="text.dark"
-            variant="body2"
+            variant={{ base: "body3", md: "body2" }}
             fontWeight={400}
             overflow="hidden"
+            wordBreak="break-word"
             textOverflow="ellipsis"
+            lineHeight="125%"
             sx={{
               display: "-webkit-box",
               WebkitLineClamp: 3,
diff --git a/src/lib/pages/nft-collections/components/CollectionList.tsx b/src/lib/pages/nft-collections/components/CollectionList.tsx
index d4240ca6b..349832585 100644
--- a/src/lib/pages/nft-collections/components/CollectionList.tsx
+++ b/src/lib/pages/nft-collections/components/CollectionList.tsx
@@ -29,7 +29,7 @@ export const CollectionList = ({
     );
 
   return (
-    <SimpleGrid columns={{ xl: 2, sm: 1 }} spacing={8}>
+    <SimpleGrid columns={{ base: 1, xl: 2 }} spacing={{ base: 4, xl: 8 }}>
       {collections.map((collection) => (
         <GridItem key={collection.collectionAddress}>
           <AppLink href={`/nft-collections/${collection.collectionAddress}`}>
diff --git a/src/lib/pages/nft-details/components/NftInfoItem.tsx b/src/lib/pages/nft-details/components/NftInfoItem.tsx
index d1e7bc9f1..89ab1a555 100644
--- a/src/lib/pages/nft-details/components/NftInfoItem.tsx
+++ b/src/lib/pages/nft-details/components/NftInfoItem.tsx
@@ -13,7 +13,7 @@ export const NftInfoItem = ({
   isCentered = true,
 }: NftInfoItemProps) => (
   <Flex
-    gap={{ base: 1, md: 2 }}
+    gap={{ base: 0, md: 2 }}
     mb={{ base: 2, md: 0 }}
     direction={{ base: "column", md: "row" }}
     align={{ base: "start", md: isCentered ? "center" : "start" }}
@@ -25,8 +25,9 @@ export const NftInfoItem = ({
       fontWeight={500}
       mt={isCentered ? 0 : 0.5}
       whiteSpace="nowrap"
+      minW={24}
     >
-      {label}:
+      {label}
     </Text>
     {children}
   </Flex>
diff --git a/src/lib/pages/nft-details/index.tsx b/src/lib/pages/nft-details/index.tsx
index 56fb3cf7f..2618e5a46 100644
--- a/src/lib/pages/nft-details/index.tsx
+++ b/src/lib/pages/nft-details/index.tsx
@@ -45,8 +45,6 @@ import {
 import type { NftDetailQueryParams } from "./types";
 import { zNftDetailQueryParams } from "./types";
 
-const IMAGE_SIZE = "360px";
-
 const InvalidNft = () => <InvalidState title="NFT does not exist" />;
 
 const NftDetailsBody = ({
@@ -103,14 +101,31 @@ const NftDetailsBody = ({
                 tokenId={tokenId}
               />
             )}
-            <Image
-              minW={IMAGE_SIZE}
-              minH={IMAGE_SIZE}
-              borderRadius="8px"
-              src={metadata?.image}
-              fallbackSrc={NFT_IMAGE_PLACEHOLDER}
-              fallbackStrategy="beforeLoadOrError"
-            />
+            <div
+              style={{
+                width: "100%",
+                height: "0",
+                paddingTop: "100%",
+                position: "relative",
+              }}
+            >
+              <Image
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "8px",
+                  objectFit: "cover",
+                  backgroundPosition: "center",
+                }}
+                borderRadius="8px"
+                src={metadata?.image}
+                fallbackSrc={NFT_IMAGE_PLACEHOLDER}
+                fallbackStrategy="beforeLoadOrError"
+              />
+            </div>
             {!isMobile && (
               <>
                 <DescriptionBox description={description} />
@@ -157,6 +172,7 @@ const NftDetailsBody = ({
                         textFormat="normal"
                         maxWidth="full"
                         ampCopierSection="nft-address-nft-detail-top"
+                        fixedHeight={false}
                       />
                     </Flex>
                   </Tooltip>
@@ -168,6 +184,7 @@ const NftDetailsBody = ({
                     textFormat="normal"
                     maxWidth="full"
                     ampCopierSection="holder-address-nft-detail-top"
+                    fixedHeight={false}
                   />
                 </NftInfoItem>
                 <NftInfoItem label="Token URI" isCentered={false}>
diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index c6d8dfce8..9fc745dd8 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -63,7 +63,7 @@ export const AllProject = observer(() => {
         p={12}
       >
         <StateImage imageVariant="empty" />
-        <Heading as="h6" variant="h6" mt={2}>
+        <Heading as="h6" variant="h6" mt={2} textAlign="center">
           Gathering Public Projects...
         </Heading>
         <Text
@@ -72,6 +72,7 @@ export const AllProject = observer(() => {
           color="text.dark"
           textAlign="center"
           whiteSpace="pre-wrap"
+          variant="body2"
         >
           We are currently gathering public projects to feature here.
           <br /> To share yours with the community, please submit your request.
diff --git a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
index 4f9566138..2e3216b5d 100644
--- a/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
+++ b/src/lib/pages/tx-details/components/tx-message/TxMsgExpand.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable complexity */
-import { Flex, Tag } from "@chakra-ui/react";
+import { Flex, Tag, Text } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
 import { findAttribute } from "@cosmjs/stargate/build/logs";
 import type { ReactNode } from "react";
@@ -341,7 +341,7 @@ export const TxMsgExpand = ({
           m={0}
           mt={{ base: 1, md: 0 }}
         />
-        {content}
+        <Text wordBreak="break-all">{content}</Text>
         {!isMobile && isIBC && (
           <Tag mx={2} variant="accent-dark" size="md" minW="hug-content">
             IBC
diff --git a/src/lib/styles/theme/components/tag.ts b/src/lib/styles/theme/components/tag.ts
index 143ef1d3b..a82eafe2d 100644
--- a/src/lib/styles/theme/components/tag.ts
+++ b/src/lib/styles/theme/components/tag.ts
@@ -43,7 +43,7 @@ export const Tag = defineMultiStyleConfig({
   baseStyle: {
     container: {
       px: 2,
-      py: 0,
+      py: 1,
       borderRadius: "full",
       lineHeight: "100%",
       textAlign: "center",
@@ -52,20 +52,17 @@ export const Tag = defineMultiStyleConfig({
   sizes: {
     xs: {
       container: {
-        maxH: "18px",
         height: "18px",
         fontSize: "12px",
       },
     },
     sm: {
       container: {
-        maxH: "20px",
         fontSize: "12px",
       },
     },
     md: {
       container: {
-        maxH: "24px",
         fontSize: "12px",
       },
     },

From 9c1263a9cc1dfe56c7791f8e24958365a8a048b6 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 18 Jan 2024 18:51:58 +0700
Subject: [PATCH 2/8] fix(components): fix nft related bugs

---
 CHANGELOG.md                                  |  1 +
 .../components/CollectionSuppliesOverview.tsx | 37 +++++++++----
 .../pages/nft-collection-details/index.tsx    |  2 +-
 .../pages/nft-details/components/Title.tsx    | 53 ++++++++++++++-----
 .../components/ViewResourceButton.tsx         |  1 +
 src/lib/pages/nft-details/index.tsx           | 48 ++++++++++-------
 src/lib/query/collection.ts                   |  5 +-
 src/lib/query/nft.ts                          | 15 ++++--
 src/lib/services/nft/collection.ts            |  4 +-
 src/lib/services/nft/nft.ts                   |  4 +-
 10 files changed, 120 insertions(+), 50 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9031e997d..75df71cb7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -60,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#735](https://github.com/alleslabs/celatone-frontend/pull/735) Fix nfts related bugs
 - [#732](https://github.com/alleslabs/celatone-frontend/pull/732) Fix custom tab incorrect variant and recent modules text
 - [#722](https://github.com/alleslabs/celatone-frontend/pull/722) Fix flicker query page
 
diff --git a/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx b/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx
index 7d6a2ed00..2b5971241 100644
--- a/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx
+++ b/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx
@@ -21,7 +21,7 @@ interface CollectionSuppliesOverviewProps {
   onViewMore: () => void;
 }
 
-export const CollectionSuppliesOverview = ({
+export const CollectionSuppliesOverviewBody = ({
   totalCount,
   nfts,
   isLoading,
@@ -41,16 +41,9 @@ export const CollectionSuppliesOverview = ({
     return (
       <EmptyState imageVariant="empty" message="NFTs not found." withBorder />
     );
-
   return (
-    <Flex direction="column" gap={8}>
-      <Flex align="center" gap={2}>
-        <Heading as="h6" variant="h6" fontWeight={600}>
-          NFTs in this collection
-        </Heading>
-        <Badge>{totalCount}</Badge>
-      </Flex>
-      <SimpleGrid gap={6} columns={{ base: 2, lg: 4, xl: 5, "2xl": 6 }}>
+    <>
+      <SimpleGrid gap={6} columns={{ base: 2, lg: 4, xl: 5, "2xl": 6 }} my={8}>
         {nftsInfo.map((nft) => (
           <GridItem key={nft.tokenId + nft.uri}>
             <NftCard {...nft} />
@@ -58,6 +51,30 @@ export const CollectionSuppliesOverview = ({
         ))}
       </SimpleGrid>
       {totalCount > displayedNftCount && <ViewMore onClick={onViewMore} />}
+    </>
+  );
+};
+
+export const CollectionSuppliesOverview = ({
+  totalCount,
+  nfts,
+  isLoading,
+  onViewMore,
+}: CollectionSuppliesOverviewProps) => {
+  return (
+    <Flex direction="column">
+      <Flex align="center" gap={2}>
+        <Heading as="h6" variant="h6" fontWeight={600}>
+          NFTs in this collection
+        </Heading>
+        <Badge>{totalCount}</Badge>
+      </Flex>
+      <CollectionSuppliesOverviewBody
+        totalCount={totalCount}
+        nfts={nfts}
+        isLoading={isLoading}
+        onViewMore={onViewMore}
+      />
     </Flex>
   );
 };
diff --git a/src/lib/pages/nft-collection-details/index.tsx b/src/lib/pages/nft-collection-details/index.tsx
index 8f02497dc..2ac301758 100644
--- a/src/lib/pages/nft-collection-details/index.tsx
+++ b/src/lib/pages/nft-collection-details/index.tsx
@@ -228,8 +228,8 @@ const CollectionDetailsBody = ({
                 maxSupply={maxSupply}
               />
               <CollectionSuppliesOverview
-                nfts={nfts}
                 totalCount={currentSupply}
+                nfts={nfts}
                 isLoading={isNftLoading}
                 onViewMore={handleTabChange(TabIndex.Supplies)}
               />
diff --git a/src/lib/pages/nft-details/components/Title.tsx b/src/lib/pages/nft-details/components/Title.tsx
index 0b6138b7d..470f9d0f3 100644
--- a/src/lib/pages/nft-details/components/Title.tsx
+++ b/src/lib/pages/nft-details/components/Title.tsx
@@ -1,27 +1,54 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
+import { Alert, Flex, Heading, Text } from "@chakra-ui/react";
 
+import { useMobile } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import type { HexAddr32 } from "lib/types";
 
+import { ViewResourceButton } from "./ViewResourceButton";
+
 interface TitleProps {
   collectionAddress: HexAddr32;
+  nftAddress: HexAddr32;
   displayCollectionName: string;
   tokenId: string;
+  isBurned?: boolean;
 }
 
 export const Title = ({
   collectionAddress,
   displayCollectionName,
   tokenId,
-}: TitleProps) => (
-  <Flex direction="column">
-    <AppLink href={`/nft-collections/${collectionAddress}`}>
-      <Text color="secondary.main" fontSize="16px" fontWeight={700}>
-        {displayCollectionName}
-      </Text>
-    </AppLink>
-    <Heading variant="h5" as="h5">
-      {tokenId}
-    </Heading>
-  </Flex>
-);
+  nftAddress,
+  isBurned,
+}: TitleProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex direction="column" w="full">
+      {isBurned && (
+        <Alert variant="warning" px={2} py={1} borderRadius="4px" mb={4}>
+          <Text variant="body2" color="warning.main">
+            This NFT is already burned
+          </Text>
+        </Alert>
+      )}
+      <Flex w="full" justifyContent="space-between" gap={8}>
+        <Flex direction="column" overflow="hidden">
+          <AppLink href={`/nft-collections/${collectionAddress}`}>
+            <Text color="secondary.main" fontSize="16px" fontWeight={700}>
+              {displayCollectionName}
+            </Text>
+          </AppLink>
+          <Heading
+            variant={{ base: "h6", md: "h5" }}
+            as="h5"
+            className="ellipsis"
+            wordBreak="break-word"
+          >
+            {tokenId}
+          </Heading>
+        </Flex>
+        {!isMobile && <ViewResourceButton nftAddress={nftAddress} />}
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/nft-details/components/ViewResourceButton.tsx b/src/lib/pages/nft-details/components/ViewResourceButton.tsx
index ecbab95c7..a052c1e7f 100644
--- a/src/lib/pages/nft-details/components/ViewResourceButton.tsx
+++ b/src/lib/pages/nft-details/components/ViewResourceButton.tsx
@@ -15,6 +15,7 @@ export const ViewResourceButton = ({ nftAddress }: ViewResourceButtonProps) => {
     <Button
       variant="outline-primary"
       w={{ base: "full", md: "auto" }}
+      minW="140px !important"
       size={{ base: "sm", md: "md" }}
       mb={{ base: 4, md: 0 }}
       onClick={() => {
diff --git a/src/lib/pages/nft-details/index.tsx b/src/lib/pages/nft-details/index.tsx
index 2618e5a46..c0d67b16a 100644
--- a/src/lib/pages/nft-details/index.tsx
+++ b/src/lib/pages/nft-details/index.tsx
@@ -68,7 +68,7 @@ const NftDetailsBody = ({
   if (!collection.data || !nft.data) return <InvalidNft />;
 
   const { name: collectionName, description: collectionDesc } = collection.data;
-  const { tokenId, description, uri, ownerAddress } = nft.data;
+  const { tokenId, description, uri, ownerAddress, isBurned } = nft.data;
 
   const displayCollectionName =
     collectionName.length > 20
@@ -99,6 +99,8 @@ const NftDetailsBody = ({
                 collectionAddress={collectionAddress}
                 displayCollectionName={displayCollectionName}
                 tokenId={tokenId}
+                nftAddress={nftAddress}
+                isBurned={isBurned}
               />
             )}
             <div
@@ -137,7 +139,12 @@ const NftDetailsBody = ({
               </>
             )}
           </Flex>
-          <Flex direction="column" gap={{ base: 6, md: 12 }} w="full">
+          <Flex
+            direction="column"
+            gap={{ base: 6, md: 12 }}
+            w="full"
+            overflow="hidden"
+          >
             <Flex direction="column" gap={4}>
               <Flex
                 justifyContent="space-between"
@@ -145,14 +152,13 @@ const NftDetailsBody = ({
                 direction={{ base: "column", md: "row" }}
               >
                 {!isMobile && (
-                  <>
-                    <Title
-                      collectionAddress={collectionAddress}
-                      displayCollectionName={displayCollectionName}
-                      tokenId={tokenId}
-                    />
-                    <ViewResourceButton nftAddress={nftAddress} />
-                  </>
+                  <Title
+                    collectionAddress={collectionAddress}
+                    displayCollectionName={displayCollectionName}
+                    tokenId={tokenId}
+                    nftAddress={nftAddress}
+                    isBurned={isBurned}
+                  />
                 )}
               </Flex>
               <Flex direction="column" gap={1} w="full">
@@ -177,16 +183,18 @@ const NftDetailsBody = ({
                     </Flex>
                   </Tooltip>
                 </NftInfoItem>
-                <NftInfoItem label="Holder">
-                  <ExplorerLink
-                    value={ownerAddress}
-                    type="user_address"
-                    textFormat="normal"
-                    maxWidth="full"
-                    ampCopierSection="holder-address-nft-detail-top"
-                    fixedHeight={false}
-                  />
-                </NftInfoItem>
+                {!isBurned && (
+                  <NftInfoItem label="Holder">
+                    <ExplorerLink
+                      value={ownerAddress}
+                      type="user_address"
+                      textFormat="normal"
+                      maxWidth="full"
+                      ampCopierSection="holder-address-nft-detail-top"
+                      fixedHeight={false}
+                    />
+                  </NftInfoItem>
+                )}
                 <NftInfoItem label="Token URI" isCentered={false}>
                   <JsonLink uri={uri} type="token_uri" />
                 </NftInfoItem>
diff --git a/src/lib/query/collection.ts b/src/lib/query/collection.ts
index 867c8118f..84a6910b2 100644
--- a/src/lib/query/collection.ts
+++ b/src/lib/query/collection.ts
@@ -200,7 +200,10 @@ export const getCollectionsByAccountQuery = gql`
         vm_address
       }
       nfts_aggregate(
-        where: { vmAddressByOwner: { vm_address: { _eq: $accountAddress } } }
+        where: {
+          vmAddressByOwner: { vm_address: { _eq: $accountAddress } }
+          is_burned: { _eq: false }
+        }
       ) {
         aggregate {
           count
diff --git a/src/lib/query/nft.ts b/src/lib/query/nft.ts
index 420ca1b30..37fcc2fa4 100644
--- a/src/lib/query/nft.ts
+++ b/src/lib/query/nft.ts
@@ -13,6 +13,7 @@ export const getNftQuery = gql`
       token_id
       uri
       description
+      is_burned
       vmAddressByOwner {
         vm_address
       }
@@ -62,12 +63,14 @@ export const getNftsQuery = gql`
         collectionByCollection: {
           vm_address: { vm_address: { _eq: $collectionAddress } }
         }
-        _and: { token_id: { _ilike: $search } }
+        token_id: { _ilike: $search }
+        is_burned: { _eq: false }
       }
     ) {
       token_id
       uri
       description
+      is_burned
       vmAddressByOwner {
         vm_address
       }
@@ -182,6 +185,7 @@ export const getNftsByAccountQuery = gql`
     ) {
       token_id
       uri
+      is_burned
       collectionByCollection {
         vm_address {
           vm_address
@@ -201,7 +205,10 @@ export const getNftsByAccountQuery = gql`
 export const getNftsCountByAccountQuery = gql`
   query getNftsCountByAccountQuery($accountAddress: String!) {
     nfts_aggregate(
-      where: { vmAddressByOwner: { vm_address: { _eq: $accountAddress } } }
+      where: {
+        vmAddressByOwner: { vm_address: { _eq: $accountAddress } }
+        is_burned: { _eq: false }
+      }
     ) {
       aggregate {
         count
@@ -227,12 +234,14 @@ export const getAccountNftListByCollectionQuery = gql`
           vm_address: { vm_address: { _eq: $collectionAddress } }
         }
         vmAddressByOwner: { vm_address: { _eq: $accountAddress } }
-        _and: { token_id: { _iregex: $search } }
+        token_id: { _iregex: $search }
+        is_burned: { _eq: false }
       }
     ) {
       token_id
       uri
       description
+      is_burned
       vmAddressByOwner {
         vm_address
       }
diff --git a/src/lib/services/nft/collection.ts b/src/lib/services/nft/collection.ts
index f16aa336c..6c2c4c861 100644
--- a/src/lib/services/nft/collection.ts
+++ b/src/lib/services/nft/collection.ts
@@ -343,5 +343,7 @@ export const getCollectionsByAccount = async (
       variables: { accountAddress },
     })
     .then(({ data: res }) =>
-      zCollectionsByAccountResponse.parse(res.data.collections)
+      zCollectionsByAccountResponse
+        .parse(res.data.collections)
+        .filter((collection) => collection.hold > 0)
     );
diff --git a/src/lib/services/nft/nft.ts b/src/lib/services/nft/nft.ts
index b1377ac6f..beb754cd1 100644
--- a/src/lib/services/nft/nft.ts
+++ b/src/lib/services/nft/nft.ts
@@ -22,6 +22,7 @@ const zNft = z
     uri: z.string(),
     token_id: z.string(),
     description: z.string().optional(),
+    is_burned: z.boolean(),
     vmAddressByOwner: z.object({ vm_address: zHexAddr }),
     vm_address: z.object({ vm_address: zHexAddr32 }).optional(),
     collectionByCollection: z.object({
@@ -30,9 +31,10 @@ const zNft = z
     }),
   })
   .transform((val) => ({
-    description: val.description,
     uri: val.uri,
     tokenId: val.token_id,
+    description: val.description,
+    isBurned: val.is_burned,
     ownerAddress: val.vmAddressByOwner?.vm_address,
     nftAddress: val.vm_address?.vm_address,
     collectionAddress: val.collectionByCollection.vm_address.vm_address,

From b2e99d087391ceaa6ba707191d3c2547027ab83e Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 18 Jan 2024 22:01:37 +0700
Subject: [PATCH 3/8] fix: search burned nft

---
 .../components/nfts/NftsByCollection.tsx      | 16 ++++++-----
 .../components/nfts/NftsOverview.tsx          |  4 +--
 .../components/nfts/NftsSection.tsx           |  1 -
 src/lib/query/nft.ts                          | 28 ++++++++++++++++++-
 src/lib/services/nft/nft.ts                   | 19 +++++++++++--
 src/lib/services/nft/nftService.ts            |  5 ++--
 6 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx b/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx
index c304946be..b6a8c1c3f 100644
--- a/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx
+++ b/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx
@@ -11,33 +11,31 @@ import type { HexAddr, HexAddr32 } from "lib/types";
 
 interface NftsByCollectionProps {
   accountAddress: HexAddr;
-  totalData: number;
   collectionAddress?: HexAddr32;
 }
 
 export const NftsByCollection = ({
   accountAddress,
-  totalData,
   collectionAddress,
 }: NftsByCollectionProps) => {
   const [searchKeyword, setSearchKeyword] = useState("");
 
   const {
     pagesQuantity,
+    setTotalData,
     currentPage,
     setCurrentPage,
     pageSize,
     setPageSize,
     offset,
   } = usePaginator({
-    total: totalData,
     initialState: {
       pageSize: 10,
       currentPage: 1,
       isDisabled: false,
     },
   });
-  const { data: nfts, isLoading } = useAccountNfts(
+  const { data, isLoading } = useAccountNfts(
     accountAddress,
     pageSize,
     offset,
@@ -51,6 +49,10 @@ export const NftsByCollection = ({
     setSearchKeyword("");
   }, [collectionAddress, setPageSize, setCurrentPage]);
 
+  useEffect(() => {
+    if (data?.total) setTotalData(data.total);
+  }, [data?.total, setTotalData]);
+
   return (
     <Stack spacing="24px" w="full">
       <InputWithIcon
@@ -62,7 +64,7 @@ export const NftsByCollection = ({
         amptrackSection="nft-account-detail-tokenid-search"
       />
       <NftList
-        nfts={nfts}
+        nfts={data?.nfts}
         isLoading={isLoading}
         emptyState={
           <EmptyState
@@ -77,12 +79,12 @@ export const NftsByCollection = ({
         }
         showCollection
       />
-      {totalData > 10 && (
+      {data && data.total > 10 && (
         <Pagination
           currentPage={currentPage}
           pagesQuantity={pagesQuantity}
           offset={offset}
-          totalData={totalData}
+          totalData={data.total}
           pageSize={pageSize}
           onPageChange={setCurrentPage}
           onPageSizeChange={(e) => {
diff --git a/src/lib/pages/account-details/components/nfts/NftsOverview.tsx b/src/lib/pages/account-details/components/nfts/NftsOverview.tsx
index a30e27e51..b2e9749c9 100644
--- a/src/lib/pages/account-details/components/nfts/NftsOverview.tsx
+++ b/src/lib/pages/account-details/components/nfts/NftsOverview.tsx
@@ -19,7 +19,7 @@ export const NftsOverview = ({
   onViewMore,
 }: NftsOverviewProps) => {
   const isMobile = useMobile();
-  const { data: nfts, isFetching } = useNftsByAccount(userAddress, 5, 0);
+  const { data, isFetching } = useNftsByAccount(userAddress, 5, 0);
 
   return (
     <Box mt={{ base: 4, md: 8 }} mb={{ base: 0, md: 8 }}>
@@ -29,7 +29,7 @@ export const NftsOverview = ({
         <>
           <TableTitle title="NFTs" showCount count={totalCount} />
           <NftList
-            nfts={nfts}
+            nfts={data?.nfts}
             isLoading={isFetching}
             emptyState={
               <EmptyState
diff --git a/src/lib/pages/account-details/components/nfts/NftsSection.tsx b/src/lib/pages/account-details/components/nfts/NftsSection.tsx
index f53aa730d..18bc1e395 100644
--- a/src/lib/pages/account-details/components/nfts/NftsSection.tsx
+++ b/src/lib/pages/account-details/components/nfts/NftsSection.tsx
@@ -79,7 +79,6 @@ export const NftsSection = ({ address, totalData = 0 }: NftsSectionProps) => {
         </Stack>
         <NftsByCollection
           accountAddress={address}
-          totalData={selectedCollection?.nftsCount ?? totalData}
           collectionAddress={selectedCollection?.collectionAddress}
         />
       </Flex>
diff --git a/src/lib/query/nft.ts b/src/lib/query/nft.ts
index 37fcc2fa4..f31de2a2a 100644
--- a/src/lib/query/nft.ts
+++ b/src/lib/query/nft.ts
@@ -177,7 +177,8 @@ export const getNftsByAccountQuery = gql`
     nfts(
       where: {
         vmAddressByOwner: { vm_address: { _eq: $accountAddress } }
-        _and: { token_id: { _iregex: $search } }
+        token_id: { _iregex: $search }
+        is_burned: { _eq: false }
       }
       order_by: { token_id: asc }
       offset: $offset
@@ -199,6 +200,17 @@ export const getNftsByAccountQuery = gql`
         vm_address
       }
     }
+    nfts_aggregate(
+      where: {
+        vmAddressByOwner: { vm_address: { _eq: $accountAddress } }
+        token_id: { _iregex: $search }
+        is_burned: { _eq: false }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
   }
 `;
 
@@ -255,5 +267,19 @@ export const getAccountNftListByCollectionQuery = gql`
         name
       }
     }
+    nfts_aggregate(
+      where: {
+        collectionByCollection: {
+          vm_address: { vm_address: { _eq: $collectionAddress } }
+        }
+        vmAddressByOwner: { vm_address: { _eq: $accountAddress } }
+        token_id: { _iregex: $search }
+        is_burned: { _eq: false }
+      }
+    ) {
+      aggregate {
+        count
+      }
+    }
   }
 `;
diff --git a/src/lib/services/nft/nft.ts b/src/lib/services/nft/nft.ts
index beb754cd1..416851a11 100644
--- a/src/lib/services/nft/nft.ts
+++ b/src/lib/services/nft/nft.ts
@@ -61,6 +61,21 @@ export const getNfts = async (
     })
     .then(({ data: res }) => zNft.array().parse(res.data.nfts));
 
+const zNftsByAccountResponse = z
+  .object({
+    nfts: zNft.array(),
+    nfts_aggregate: z.object({
+      aggregate: z.object({
+        count: z.number(),
+      }),
+    }),
+  })
+  .transform((val) => ({
+    nfts: val.nfts,
+    total: val.nfts_aggregate.aggregate.count,
+  }));
+export type NftsByAccountResponse = z.infer<typeof zNftsByAccountResponse>;
+
 export const getNftsByAccount = async (
   indexer: string,
   accountAddress: HexAddr,
@@ -73,7 +88,7 @@ export const getNftsByAccount = async (
       query: getNftsByAccountQuery,
       variables: { accountAddress, pageSize, offset, search: search ?? "" },
     })
-    .then(({ data: res }) => zNft.array().parse(res.data.nfts));
+    .then(({ data: res }) => zNftsByAccountResponse.parse(res.data));
 
 export const getNftsCountByAccount = async (
   indexer: string,
@@ -261,4 +276,4 @@ export const getAccountNftsByCollection = async (
         search,
       },
     })
-    .then(({ data: res }) => zNft.array().parse(res.data.nfts));
+    .then(({ data: res }) => zNftsByAccountResponse.parse(res.data));
diff --git a/src/lib/services/nft/nftService.ts b/src/lib/services/nft/nftService.ts
index 41ac53184..08b1c680f 100644
--- a/src/lib/services/nft/nftService.ts
+++ b/src/lib/services/nft/nftService.ts
@@ -13,6 +13,7 @@ import type {
   NftMintInfo,
   Nft,
   NftByNftAddressResponse,
+  NftsByAccountResponse,
 } from "./nft";
 import {
   getNfts,
@@ -183,7 +184,7 @@ export const useNftsByAccount = (
   search = ""
 ) => {
   const { chainConfig } = useCelatoneApp();
-  return useQuery<Nft[]>(
+  return useQuery<NftsByAccountResponse>(
     [
       CELATONE_QUERY_KEYS.NFTS_BY_ACCOUNT,
       chainConfig.indexer,
@@ -234,7 +235,7 @@ export const useAccountNftsByCollection = (
   collectionAddress?: HexAddr32
 ) => {
   const { chainConfig } = useCelatoneApp();
-  return useQuery<Nft[]>(
+  return useQuery<NftsByAccountResponse>(
     [
       CELATONE_QUERY_KEYS.NFTS_BY_ACCOUNT_BY_COLLECTION,
       chainConfig.indexer,

From f19870ad09908d1bda1a2d5d34c275293069d313 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Thu, 18 Jan 2024 22:06:59 +0700
Subject: [PATCH 4/8] fix(components): fix collection catd

---
 .../nft-collections/components/CollectionCard.tsx    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/pages/nft-collections/components/CollectionCard.tsx b/src/lib/pages/nft-collections/components/CollectionCard.tsx
index 8b2ff26db..7d0571d04 100644
--- a/src/lib/pages/nft-collections/components/CollectionCard.tsx
+++ b/src/lib/pages/nft-collections/components/CollectionCard.tsx
@@ -39,7 +39,17 @@ export const CollectionCard = ({ collectionInfo }: CollectionCardProps) => {
           src={metadata?.image ? metadata?.image : NFT_IMAGE_PLACEHOLDER}
         />
         <Flex direction="column" gap={2} overflow="hidden" w="full">
-          <Heading as="h6" variant="h6" fontWeight={600}>
+          <Heading
+            as="h6"
+            variant="h6"
+            overflow="hidden"
+            fontWeight={600}
+            sx={{
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+            }}
+          >
             {name}
           </Heading>
           <Text

From 48c324aa6f2f090b5b7ae3a8772795570a513614 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Thu, 18 Jan 2024 22:22:28 +0700
Subject: [PATCH 5/8] fix: refactor

---
 .../components/CollectionSuppliesOverview.tsx | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx b/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx
index 2b5971241..c2b461150 100644
--- a/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx
+++ b/src/lib/pages/nft-collection-details/components/CollectionSuppliesOverview.tsx
@@ -60,21 +60,19 @@ export const CollectionSuppliesOverview = ({
   nfts,
   isLoading,
   onViewMore,
-}: CollectionSuppliesOverviewProps) => {
-  return (
-    <Flex direction="column">
-      <Flex align="center" gap={2}>
-        <Heading as="h6" variant="h6" fontWeight={600}>
-          NFTs in this collection
-        </Heading>
-        <Badge>{totalCount}</Badge>
-      </Flex>
-      <CollectionSuppliesOverviewBody
-        totalCount={totalCount}
-        nfts={nfts}
-        isLoading={isLoading}
-        onViewMore={onViewMore}
-      />
+}: CollectionSuppliesOverviewProps) => (
+  <Flex direction="column">
+    <Flex align="center" gap={2}>
+      <Heading as="h6" variant="h6" fontWeight={600}>
+        NFTs in this collection
+      </Heading>
+      <Badge>{totalCount}</Badge>
     </Flex>
-  );
-};
+    <CollectionSuppliesOverviewBody
+      totalCount={totalCount}
+      nfts={nfts}
+      isLoading={isLoading}
+      onViewMore={onViewMore}
+    />
+  </Flex>
+);

From c21ed67b2b38ba19bfb1ea266cb37ad9c29b129f Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Fri, 19 Jan 2024 10:16:04 +0700
Subject: [PATCH 6/8] fix(components): fix as comment

---
 src/lib/components/nft/NftCard.tsx                           | 4 +++-
 src/lib/pages/account-details/components/nfts/FilterItem.tsx | 4 +++-
 src/lib/pages/nft-collections/components/CollectionCard.tsx  | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/nft/NftCard.tsx b/src/lib/components/nft/NftCard.tsx
index d0f01794e..bbcada94c 100644
--- a/src/lib/components/nft/NftCard.tsx
+++ b/src/lib/components/nft/NftCard.tsx
@@ -41,7 +41,9 @@ export const NftCard = ({
             objectFit="cover"
             backgroundPosition="center"
             borderRadius="8px"
-            src={metadata?.image ? metadata.image : NFT_IMAGE_PLACEHOLDER}
+            src={metadata?.image}
+            fallbackSrc={NFT_IMAGE_PLACEHOLDER}
+            fallbackStrategy="beforeLoadOrError"
           />
         </Box>
         <Box>
diff --git a/src/lib/pages/account-details/components/nfts/FilterItem.tsx b/src/lib/pages/account-details/components/nfts/FilterItem.tsx
index 08d845ea9..cc51f6524 100644
--- a/src/lib/pages/account-details/components/nfts/FilterItem.tsx
+++ b/src/lib/pages/account-details/components/nfts/FilterItem.tsx
@@ -57,7 +57,9 @@ export const FilterItem = ({
             width="32px"
             height="32px"
             borderRadius="4px"
-            src={metadata?.image ? metadata?.image : NFT_IMAGE_PLACEHOLDER}
+            src={metadata?.image}
+            fallbackSrc={NFT_IMAGE_PLACEHOLDER}
+            fallbackStrategy="beforeLoadOrError"
           />
         )}
         <Text fontSize="14px" width="150px" className="ellipsis">
diff --git a/src/lib/pages/nft-collections/components/CollectionCard.tsx b/src/lib/pages/nft-collections/components/CollectionCard.tsx
index 7d0571d04..bc07f2150 100644
--- a/src/lib/pages/nft-collections/components/CollectionCard.tsx
+++ b/src/lib/pages/nft-collections/components/CollectionCard.tsx
@@ -36,7 +36,9 @@ export const CollectionCard = ({ collectionInfo }: CollectionCardProps) => {
           objectFit="cover"
           backgroundPosition="center"
           borderRadius="8px"
-          src={metadata?.image ? metadata?.image : NFT_IMAGE_PLACEHOLDER}
+          src={metadata?.image}
+          fallbackSrc={NFT_IMAGE_PLACEHOLDER}
+          fallbackStrategy="beforeLoadOrError"
         />
         <Flex direction="column" gap={2} overflow="hidden" w="full">
           <Heading

From 0346bb5ab6c32afff57b87df0102052728ee975d Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 Jan 2024 10:47:16 +0700
Subject: [PATCH 7/8] fix: refactor useNftsByAccount

---
 src/lib/app-provider/env.ts                   |  1 -
 .../components/nfts/NftsByCollection.tsx      | 13 ++--
 .../components/nfts/NftsOverview.tsx          |  4 +-
 src/lib/pages/account-details/data.ts         | 27 -------
 src/lib/services/nft/nft.ts                   | 60 ++++++++--------
 src/lib/services/nft/nftService.ts            | 71 +++++++------------
 6 files changed, 62 insertions(+), 114 deletions(-)

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
index e8b08ff80..faf280141 100644
--- a/src/lib/app-provider/env.ts
+++ b/src/lib/app-provider/env.ts
@@ -118,7 +118,6 @@ export enum CELATONE_QUERY_KEYS {
   NFT_TRANSACTIONS_COUNT = "CELATONE_QUERY_NFT_TRANSACTIONS_COUNT",
   NFT_MUTATE_EVENTS = "CELATONE_QUERY_NFT_MUTATE_EVENTS",
   NFT_MUTATE_EVENTS_COUNT = "CELATONE_QUERY_NFT_MUTATE_EVENTS_COUNT",
-  NFTS_BY_ACCOUNT = "CELATONE_QUERY_NFTS_BY_ACCOUNT",
   NFTS_COUNT_BY_ACCOUNT = "CELATONE_QUERY_NFTS_COUNT_BY_ACCOUNT",
   NFTS_BY_ACCOUNT_BY_COLLECTION = "CELATONE_QUERY_NFTS_BY_ACCOUNT_BY_COLLECTION",
 }
diff --git a/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx b/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx
index d87392033..b63a7b4f5 100644
--- a/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx
+++ b/src/lib/pages/account-details/components/nfts/NftsByCollection.tsx
@@ -1,13 +1,13 @@
 import { Stack } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
-import { useAccountNfts } from "../../data";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { NftList } from "lib/components/nft";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { EmptyState } from "lib/components/state";
 import { useDebounce } from "lib/hooks";
+import { useNftsByAccountByCollection } from "lib/services/nft";
 import type { HexAddr, HexAddr32 } from "lib/types";
 
 interface NftsByCollectionProps {
@@ -37,12 +37,15 @@ export const NftsByCollection = ({
       isDisabled: false,
     },
   });
-  const { data, isLoading } = useAccountNfts(
+  const { data, isLoading } = useNftsByAccountByCollection(
     accountAddress,
     pageSize,
     offset,
     debouncedSearch,
-    collectionAddress
+    collectionAddress,
+    {
+      onSuccess: ({ total }) => setTotalData(total),
+    }
   );
 
   useEffect(() => {
@@ -51,10 +54,6 @@ export const NftsByCollection = ({
     setSearchKeyword("");
   }, [collectionAddress, setPageSize, setCurrentPage]);
 
-  useEffect(() => {
-    if (data?.total) setTotalData(data.total);
-  }, [data?.total, setTotalData]);
-
   return (
     <Stack spacing="24px" w="full">
       <InputWithIcon
diff --git a/src/lib/pages/account-details/components/nfts/NftsOverview.tsx b/src/lib/pages/account-details/components/nfts/NftsOverview.tsx
index b2e9749c9..f1d5d4911 100644
--- a/src/lib/pages/account-details/components/nfts/NftsOverview.tsx
+++ b/src/lib/pages/account-details/components/nfts/NftsOverview.tsx
@@ -4,7 +4,7 @@ import { useMobile } from "lib/app-provider";
 import { NftList } from "lib/components/nft";
 import { EmptyState } from "lib/components/state";
 import { MobileTitle, TableTitle, ViewMore } from "lib/components/table";
-import { useNftsByAccount } from "lib/services/nft";
+import { useNftsByAccountByCollection } from "lib/services/nft";
 import type { HexAddr } from "lib/types";
 
 interface NftsOverviewProps {
@@ -19,7 +19,7 @@ export const NftsOverview = ({
   onViewMore,
 }: NftsOverviewProps) => {
   const isMobile = useMobile();
-  const { data, isFetching } = useNftsByAccount(userAddress, 5, 0);
+  const { data, isFetching } = useNftsByAccountByCollection(userAddress, 5, 0);
 
   return (
     <Box mt={{ base: 4, md: 8 }} mb={{ base: 0, md: 8 }}>
diff --git a/src/lib/pages/account-details/data.ts b/src/lib/pages/account-details/data.ts
index 7f621b7f6..351f239e4 100644
--- a/src/lib/pages/account-details/data.ts
+++ b/src/lib/pages/account-details/data.ts
@@ -6,13 +6,10 @@ import {
   useAdminContractsByAddress,
   useInstantiatedContractsByAddress,
 } from "lib/services/contractService";
-import { useAccountNftsByCollection, useNftsByAccount } from "lib/services/nft";
 import type {
   BechAddr,
   CodeInfo,
   ContractInfo,
-  HexAddr,
-  HexAddr32,
   Nullish,
   Option,
 } from "lib/types";
@@ -154,27 +151,3 @@ export const useAccountCodes = (
     isLoading,
   };
 };
-
-export const useAccountNfts = (
-  accountAddress: HexAddr,
-  pageSize: number,
-  offset: number,
-  search: string,
-  collectionAddress?: HexAddr32
-) => {
-  const allNftsResult = useNftsByAccount(
-    accountAddress,
-    pageSize,
-    offset,
-    search
-  );
-  const collectionNftsResult = useAccountNftsByCollection(
-    accountAddress,
-    pageSize,
-    offset,
-    search,
-    collectionAddress
-  );
-
-  return collectionAddress ? collectionNftsResult : allNftsResult;
-};
diff --git a/src/lib/services/nft/nft.ts b/src/lib/services/nft/nft.ts
index 416851a11..39ed958a9 100644
--- a/src/lib/services/nft/nft.ts
+++ b/src/lib/services/nft/nft.ts
@@ -61,35 +61,6 @@ export const getNfts = async (
     })
     .then(({ data: res }) => zNft.array().parse(res.data.nfts));
 
-const zNftsByAccountResponse = z
-  .object({
-    nfts: zNft.array(),
-    nfts_aggregate: z.object({
-      aggregate: z.object({
-        count: z.number(),
-      }),
-    }),
-  })
-  .transform((val) => ({
-    nfts: val.nfts,
-    total: val.nfts_aggregate.aggregate.count,
-  }));
-export type NftsByAccountResponse = z.infer<typeof zNftsByAccountResponse>;
-
-export const getNftsByAccount = async (
-  indexer: string,
-  accountAddress: HexAddr,
-  pageSize: number,
-  offset: number,
-  search: string
-) =>
-  axios
-    .post(indexer, {
-      query: getNftsByAccountQuery,
-      variables: { accountAddress, pageSize, offset, search: search ?? "" },
-    })
-    .then(({ data: res }) => zNftsByAccountResponse.parse(res.data));
-
 export const getNftsCountByAccount = async (
   indexer: string,
   accountAddress: HexAddr
@@ -257,7 +228,36 @@ export const getNftMutateEventsCount = async (
       ({ data }) => data.data.nft_mutation_events_aggregate.aggregate.count
     );
 
-export const getAccountNftsByCollection = async (
+const zNftsByAccountResponse = z
+  .object({
+    nfts: zNft.array(),
+    nfts_aggregate: z.object({
+      aggregate: z.object({
+        count: z.number(),
+      }),
+    }),
+  })
+  .transform((val) => ({
+    nfts: val.nfts,
+    total: val.nfts_aggregate.aggregate.count,
+  }));
+export type NftsByAccountResponse = z.infer<typeof zNftsByAccountResponse>;
+
+export const getNftsByAccount = async (
+  indexer: string,
+  accountAddress: HexAddr,
+  pageSize: number,
+  offset: number,
+  search: string
+) =>
+  axios
+    .post(indexer, {
+      query: getNftsByAccountQuery,
+      variables: { accountAddress, pageSize, offset, search: search ?? "" },
+    })
+    .then(({ data: res }) => zNftsByAccountResponse.parse(res.data));
+
+export const getNftsByAccountByCollection = async (
   indexer: string,
   accountAddress: HexAddr,
   pageSize: number,
diff --git a/src/lib/services/nft/nftService.ts b/src/lib/services/nft/nftService.ts
index 08b1c680f..79b045a8a 100644
--- a/src/lib/services/nft/nftService.ts
+++ b/src/lib/services/nft/nftService.ts
@@ -1,3 +1,4 @@
+import type { UseQueryOptions } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 
 import {
@@ -26,7 +27,7 @@ import {
   getNftMutateEventsCount,
   getNftsByAccount,
   getNftsCountByAccount,
-  getAccountNftsByCollection,
+  getNftsByAccountByCollection,
 } from "./nft";
 
 export const useNfts = (
@@ -177,37 +178,6 @@ export const useNftMutateEventsCount = (nftAddress: HexAddr32) => {
   );
 };
 
-export const useNftsByAccount = (
-  accountAddress: HexAddr,
-  pageSize: number,
-  offset: number,
-  search = ""
-) => {
-  const { chainConfig } = useCelatoneApp();
-  return useQuery<NftsByAccountResponse>(
-    [
-      CELATONE_QUERY_KEYS.NFTS_BY_ACCOUNT,
-      chainConfig.indexer,
-      accountAddress,
-      pageSize,
-      offset,
-      search,
-    ],
-    async () =>
-      getNftsByAccount(
-        chainConfig.indexer,
-        accountAddress,
-        pageSize,
-        offset,
-        search
-      ),
-    {
-      retry: 1,
-      refetchOnWindowFocus: false,
-    }
-  );
-};
-
 export const useNftsCountByAccount = (accountAddress: HexAddr) => {
   const { chainConfig } = useCelatoneApp();
   const { enabled } = useNftConfig({ shouldRedirect: false });
@@ -227,12 +197,13 @@ export const useNftsCountByAccount = (accountAddress: HexAddr) => {
   );
 };
 
-export const useAccountNftsByCollection = (
+export const useNftsByAccountByCollection = (
   accountAddress: HexAddr,
   pageSize: number,
   offset: number,
-  search: string,
-  collectionAddress?: HexAddr32
+  search = "",
+  collectionAddress?: HexAddr32,
+  options: Pick<UseQueryOptions<NftsByAccountResponse>, "onSuccess"> = {}
 ) => {
   const { chainConfig } = useCelatoneApp();
   return useQuery<NftsByAccountResponse>(
@@ -245,22 +216,28 @@ export const useAccountNftsByCollection = (
       search,
       collectionAddress,
     ],
-    async () => {
-      if (!collectionAddress)
-        throw new Error("collection address is undefined");
-      return getAccountNftsByCollection(
-        chainConfig.indexer,
-        accountAddress,
-        pageSize,
-        offset,
-        search,
-        collectionAddress
-      );
-    },
+    async () =>
+      !collectionAddress
+        ? getNftsByAccount(
+            chainConfig.indexer,
+            accountAddress,
+            pageSize,
+            offset,
+            search
+          )
+        : getNftsByAccountByCollection(
+            chainConfig.indexer,
+            accountAddress,
+            pageSize,
+            offset,
+            search,
+            collectionAddress
+          ),
     {
       retry: 1,
       refetchOnWindowFocus: false,
       enabled: !!collectionAddress,
+      ...options,
     }
   );
 };

From e9dc9ab07f559935d272b8fab184c93e02934d28 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Fri, 19 Jan 2024 10:55:43 +0700
Subject: [PATCH 8/8] fix: remove enabled

---
 src/lib/services/nft/nft.ts        | 2 +-
 src/lib/services/nft/nftService.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/services/nft/nft.ts b/src/lib/services/nft/nft.ts
index 39ed958a9..978c7a694 100644
--- a/src/lib/services/nft/nft.ts
+++ b/src/lib/services/nft/nft.ts
@@ -253,7 +253,7 @@ export const getNftsByAccount = async (
   axios
     .post(indexer, {
       query: getNftsByAccountQuery,
-      variables: { accountAddress, pageSize, offset, search: search ?? "" },
+      variables: { accountAddress, pageSize, offset, search },
     })
     .then(({ data: res }) => zNftsByAccountResponse.parse(res.data));
 
diff --git a/src/lib/services/nft/nftService.ts b/src/lib/services/nft/nftService.ts
index 79b045a8a..481deda28 100644
--- a/src/lib/services/nft/nftService.ts
+++ b/src/lib/services/nft/nftService.ts
@@ -236,7 +236,6 @@ export const useNftsByAccountByCollection = (
     {
       retry: 1,
       refetchOnWindowFocus: false,
-      enabled: !!collectionAddress,
       ...options,
     }
   );