Fix/bug bash related to NFT and miscellaneous

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
 - [#734](https://github.com/alleslabs/celatone-frontend/pull/734) Fix search spamming by using debounce
 - [#733](https://github.com/alleslabs/celatone-frontend/pull/733) Fix contract list nullable fields
 - [#732](https://github.com/alleslabs/celatone-frontend/pull/732) Fix custom tab incorrect variant and recent modules text

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",
 }

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>
       )}

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" />,
   };
 };

src/lib/components/icon/CustomIcon.tsx

@@ -1539,7 +1539,7 @@ export const ICONS = {
         />
       </>
     ),
-    viewBox: viewboxDefault,
+    viewBox: "0 0 16 14",
   },
 };
 

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"
         />

src/lib/components/nft/NftCard.tsx

@@ -39,8 +39,11 @@ export const NftCard = ({
             width="100%"
             height="100%"
             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>

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}`}

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>
     }

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>

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,
+              },
+            ]
+          : []),
       ],
     },
   ];

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,25 @@ 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"
+            borderRadius="4px"
             src={metadata?.image}
+            fallbackSrc={NFT_IMAGE_PLACEHOLDER}
+            fallbackStrategy="beforeLoadOrError"
           />
-        ) : (
-          <Box width="32px">
-            <CustomIcon name="group" />
-          </Box>
         )}
         <Text fontSize="14px" width="150px" className="ellipsis">
           {collectionName}

src/lib/pages/account-details/components/nfts/NftsByCollection.tsx

@@ -1,50 +1,51 @@
 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 {
   accountAddress: HexAddr;
-  totalData: number;
   collectionAddress?: HexAddr32;
 }
 
 export const NftsByCollection = ({
   accountAddress,
-  totalData,
   collectionAddress,
 }: NftsByCollectionProps) => {
   const [searchKeyword, setSearchKeyword] = useState("");
   const debouncedSearch = useDebounce(searchKeyword);
 
   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 } = useNftsByAccountByCollection(
     accountAddress,
     pageSize,
     offset,
     debouncedSearch,
-    collectionAddress
+    collectionAddress,
+    {
+      onSuccess: ({ total }) => setTotalData(total),
+    }
   );
 
   useEffect(() => {
@@ -64,7 +65,7 @@ export const NftsByCollection = ({
         amptrackSection="nft-account-detail-tokenid-search"
       />
       <NftList
-        nfts={nfts}
+        nfts={data?.nfts}
         isLoading={isLoading}
         emptyState={
           <EmptyState
@@ -79,12 +80,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) => {

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: nfts, isFetching } = useNftsByAccount(userAddress, 5, 0);
+  const { data, isFetching } = useNftsByAccountByCollection(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

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
@@ -78,7 +79,6 @@ export const NftsSection = ({ address, totalData = 0 }: NftsSectionProps) => {
         </Stack>
         <NftsByCollection
           accountAddress={address}
-          totalData={selectedCollection?.nftsCount ?? totalData}
           collectionAddress={selectedCollection?.collectionAddress}
         />
       </Flex>