Merge pull request #1140 from alleslabs/feature/cfe-637-nft-graphql

feat(utils): nft graphql to api
alleslabs · Sep 18, 2024 · 195be75 · 195be75
2 parents 843398d + d6a0cd5
commit 195be75
Show file tree

Hide file tree

Showing 45 changed files with 687 additions and 2,348 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,6 +41,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1148](https://github.com/alleslabs/celatone-frontend/pull/1148) Update NFT collections to get data from API instead of GraphQL
+- [#1140](https://github.com/alleslabs/celatone-frontend/pull/1140) Update NFTs to get data from API instead of GraphQL
 - [#1135](https://github.com/alleslabs/celatone-frontend/pull/1135) Update txs to get data from API instead of GraphQL
 - [#1136](https://github.com/alleslabs/celatone-frontend/pull/1136) Update code to get data from API instead of GraphQL
 - [#1132](https://github.com/alleslabs/celatone-frontend/pull/1132) Update account type to get data from API instead of GraphQL

diff --git a/src/lib/app-provider/env.ts b/src/lib/app-provider/env.ts
@@ -155,24 +155,17 @@ export enum CELATONE_QUERY_KEYS {
   NFT_COLLECTION_TOTAL_BURNED = "CELATONE_QUERY_NFT_COLLECTION_TOTAL_BURNED",
   NFT_COLLECTION_CREATOR = "CELATONE_QUERY_NFT_COLLECTION_CREATOR",
   NFT_COLLECTION_ACTIVITIES = "CELATONE_QUERY_NFT_COLLECTION_ACTIVITIES",
-  NFT_COLLECTION_ACTIVITIES_COUNT = "CELATONE_QUERY_NFT_COLLECTION_ACTIVITIES_COUNT",
   NFT_COLLECTION_ACTIVITIES_SEQUENCER = "CELATONE_QUERY_NFT_COLLECTION_ACTIVITIES_SEQUENCER",
   NFT_COLLECTION_MUTATE_EVENTS = "CELATONE_QUERY_NFT_COLLECTION_MUTATE_EVENTS",
-  NFT_COLLECTION_MUTATE_EVENTS_COUNT = "CELATONE_QUERY_NFT_COLLECTION_MUTATE_EVENTS_COUNT",
-  NFT_COLLECTION_UNIQUE_HOLDERS_COUNT = "CELATONE_QUERY_NFT_COLLECTION_UNIQUE_HOLDERS_COUNT",
   NFT_COLLECTIONS_BY_ACCOUNT = "CELATONE_QUERY_NFT_COLLECTIONS_BY_ACCOUNT",
   NFTS = "CELATONE_QUERY_NFTS",
-  NFTS_SEQUENCER = "CELATONE_QUERY_NFTS_SEQUENCER",
   NFT_BY_NFT_ADDRESS = "CELATONE_QUERY_NFT_BY_NFT_ADDRESS",
   NFT_BY_NFT_ADDRESS_LCD = "CELATONE_QUERY_NFT_BY_NFT_ADDRESS_LCD",
   NFT_TOKEN_MINT_INFO = "CELATONE_QUERY_NFT_TOKEN_MINT_INFO",
   NFT_METADATA = "CELATONE_QUERY_NFT_METADATA",
   NFT_TRANSACTIONS = "CELATONE_QUERY_NFT_TRANSACTIONS",
   NFT_TRANSACTIONS_SEQUENCER = "CELATONE_QUERY_NFT_TRANSACTIONS_SEQUENCER",
-  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_COUNT_BY_ACCOUNT = "CELATONE_QUERY_NFTS_COUNT_BY_ACCOUNT",
   NFTS_BY_ACCOUNT_BY_COLLECTION = "CELATONE_QUERY_NFTS_BY_ACCOUNT_BY_COLLECTION",
   NFTS_BY_ACCOUNT_BY_COLLECTION_SEQUENCER = "CELATONE_QUERY_NFTS_BY_ACCOUNT_BY_COLLECTION_SEQUENCER",
   // VERIFICATION

diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -4,26 +4,28 @@ import { CELATONE_API_OVERRIDE as api } from "env";
 
 export const useBaseApiRoute = (
   type:
-    | "overviews"
-    | "txs"
     | "accounts"
     | "assets"
     | "blocks"
     | "codes"
     | "contracts"
-    | "proposals"
-    | "validators"
+    | "cosmwasm"
+    | "icns_address"
+    | "icns_names"
+    | "legacy.accounts"
+    | "modules"
+    | "move"
+    | "move_modules"
+    | "nfts"
+    | "nft_collections"
+    | "overviews"
     | "projects"
+    | "proposals"
     | "public_codes"
-    | "legacy.accounts"
     | "rest"
-    | "icns_names"
-    | "icns_address"
-    | "cosmwasm"
-    | "move_modules"
     | "staking"
-    | "move"
-    | "modules"
+    | "txs"
+    | "validators"
 ): string => {
   const {
     chainConfig: { chain },
@@ -36,10 +38,6 @@ export const useBaseApiRoute = (
     );
 
   switch (type) {
-    case "overviews":
-      return `${api}/v1/${chain}/${currentChainId}/overviews`;
-    case "txs":
-      return `${api}/v1/${chain}/${currentChainId}/txs`;
     case "accounts":
       return `${api}/v1/${chain}/${currentChainId}/accounts`;
     case "assets":
@@ -50,32 +48,40 @@ export const useBaseApiRoute = (
       return `${api}/v1/${chain}/${currentChainId}/wasm/codes`;
     case "contracts":
       return `${api}/v1/${chain}/${currentChainId}/wasm/contracts`;
-    case "proposals":
-      return `${api}/v1/${chain}/${currentChainId}/proposals`;
-    case "validators":
-      return `${api}/v1/${chain}/${currentChainId}/validators`;
+    case "cosmwasm":
+      return `${api}/cosmwasm/${chain}/${currentChainId}`;
+    case "icns_address":
+      return `${api}/icns/address`;
+    case "icns_names":
+      return `${api}/icns/names`;
+    case "legacy.accounts":
+      return `${api}/accounts/${chain}/${currentChainId}`;
+    case "modules":
+      return `${api}/v1/${chain}/${currentChainId}/move/modules`;
+    case "move":
+      return `${api}/v1/${chain}/${currentChainId}/move`;
+    case "move_modules":
+      return `${api}/${chain}/${currentChainId}/move_modules`;
+    case "nfts":
+      return `${api}/v1/${chain}/${currentChainId}/nfts`;
+    case "nft_collections":
+      return `${api}/v1/${chain}/${currentChainId}/nft-collections`;
+    case "overviews":
+      return `${api}/v1/${chain}/${currentChainId}/overviews`;
     case "projects":
       return `${api}/projects/${chain}/${currentChainId}`;
+    case "proposals":
+      return `${api}/v1/${chain}/${currentChainId}/proposals`;
     case "public_codes":
       return `${api}/codes/${chain}/${currentChainId}`;
-    case "legacy.accounts":
-      return `${api}/accounts/${chain}/${currentChainId}`;
     case "rest":
       return `${api}/rest/${chain}/${currentChainId}`;
-    case "icns_names":
-      return `${api}/icns/names`;
-    case "icns_address":
-      return `${api}/icns/address`;
-    case "cosmwasm":
-      return `${api}/cosmwasm/${chain}/${currentChainId}`;
-    case "move_modules":
-      return `${api}/${chain}/${currentChainId}/move_modules`;
     case "staking":
       return `${api}/${chain}/${currentChainId}/staking`;
-    case "move":
-      return `${api}/v1/${chain}/${currentChainId}/move`;
-    case "modules":
-      return `${api}/v1/${chain}/${currentChainId}/move/modules`;
+    case "txs":
+      return `${api}/v1/${chain}/${currentChainId}/txs`;
+    case "validators":
+      return `${api}/v1/${chain}/${currentChainId}/validators`;
     default:
       throw new Error(
         "Error retrieving chain, api, or currentChainId from chain config."

diff --git a/src/lib/components/nft/NftCard.tsx b/src/lib/components/nft/NftCard.tsx
@@ -4,12 +4,12 @@ import { AppLink } from "../AppLink";
 import { AmpEvent, track } from "lib/amplitude";
 import { NFT_IMAGE_PLACEHOLDER } from "lib/data";
 import { useMetadata } from "lib/services/nft";
-import type { HexAddr32, Nullable } from "lib/types";
+import type { HexAddr32, Nullable, Option } from "lib/types";
 
 interface NftCardProps {
   uri: string;
   tokenId: string;
-  collectionName: Nullable<string>;
+  collectionName: Option<string>;
   collectionAddress: HexAddr32;
   nftAddress: Nullable<HexAddr32>;
   showCollection?: boolean;

diff --git a/src/lib/components/nft/NftList.tsx b/src/lib/components/nft/NftList.tsx
@@ -21,19 +21,20 @@ export const NftList = ({
   showCollection,
 }: NftListProps) => {
   if (isLoading) return <Loading />;
-  if (!nfts)
-    return (
-      <ErrorFetching dataName="NFTs" withBorder my={2} hasBorderTop={false} />
-    );
+  if (!nfts) return <ErrorFetching dataName="NFTs" />;
   if (!nfts.length) return emptyState;
 
   return (
     <SimpleGrid gap={6} columns={{ base: 2, lg: 3, xl: 5 }} mt={4} mb={8}>
       {nfts.map((nft) => (
         <NftCard
           key={nft.tokenId + nft.uri}
-          {...nft}
           showCollection={showCollection}
+          uri={nft.uri}
+          tokenId={nft.tokenId}
+          collectionName={nft.collectionName}
+          collectionAddress={nft.collectionAddress}
+          nftAddress={nft.nftAddress}
         />
       ))}
     </SimpleGrid>

diff --git a/src/lib/pages/account-details/components/AccountDetailsEmptyState.tsx b/src/lib/pages/account-details/components/AccountDetailsEmptyState.tsx
@@ -1,16 +1,20 @@
-import type { FlexProps, TextProps } from "@chakra-ui/react";
+import type { FlexProps, StyleProps, TextProps } from "@chakra-ui/react";
 import { Flex, Text } from "@chakra-ui/react";
 
 export interface AccountDetailsEmptyStateProps {
   message: string;
   textVariant?: TextProps["variant"];
   pt?: FlexProps["pt"];
+  borderBottom?: StyleProps["borderBottom"];
+  borderColor?: StyleProps["borderColor"];
 }
 
 export const AccountDetailsEmptyState = ({
   message,
   textVariant = "body1",
   pt = 2,
+  borderBottom = "1px solid",
+  borderColor = "gray.700",
 }: AccountDetailsEmptyStateProps) => (
   <Flex
     alignItems="flex-start"
@@ -20,8 +24,8 @@ export const AccountDetailsEmptyState = ({
     pt={pt}
     pb={8}
     direction="column"
-    borderBottom="1px solid"
-    borderColor="gray.700"
+    borderBottom={borderBottom}
+    borderColor={borderColor}
   >
     <Text
       color="text.dark"

diff --git a/src/lib/pages/account-details/components/nfts/FilterItem.tsx b/src/lib/pages/account-details/components/nfts/FilterItem.tsx
@@ -4,10 +4,10 @@ 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";
-import type { Nullable } from "lib/types";
+import type { Option } from "lib/types";
 
 interface FilterItemProps {
-  collectionName: Nullable<string>;
+  collectionName: Option<string>;
   count: number;
   onClick: () => void;
   uri?: string;

diff --git a/src/lib/pages/account-details/components/nfts/NftsByCollectionFull.tsx b/src/lib/pages/account-details/components/nfts/NftsByCollectionFull.tsx
@@ -8,7 +8,7 @@ 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 { useNftsByAccountAddress } from "lib/services/nft";
 import type { HexAddr, HexAddr32 } from "lib/types";
 
 interface NftsByCollectionFullProps {
@@ -39,12 +39,12 @@ export const NftsByCollectionFull = ({
       isDisabled: false,
     },
   });
-  const { data, isLoading } = useNftsByAccountByCollection(
+  const { data, isLoading } = useNftsByAccountAddress(
     accountAddress,
     pageSize,
     offset,
-    debouncedSearch,
     collectionAddress,
+    debouncedSearch,
     {
       onSuccess: ({ total }) => setTotalData(total),
     }
@@ -69,7 +69,7 @@ export const NftsByCollectionFull = ({
         amptrackSection="nft-account-detail-tokenid-search"
       />
       <NftList
-        nfts={data?.nfts}
+        nfts={data?.items}
         isLoading={isLoading}
         emptyState={
           <EmptyState

diff --git a/src/lib/pages/account-details/components/nfts/NftsOverview.tsx b/src/lib/pages/account-details/components/nfts/NftsOverview.tsx
@@ -1,12 +1,12 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Divider, Flex } from "@chakra-ui/react";
 
 import { AccountDetailsEmptyState } from "../AccountDetailsEmptyState";
 import AccountSectionWrapper from "../AccountSectionWrapper";
 import { useMobile, useTierConfig } from "lib/app-provider";
 import { NftList } from "lib/components/nft";
 import { MobileTitle, ViewMore } from "lib/components/table";
 import {
-  useNftsByAccountByCollection,
+  useNftsByAccountAddress,
   useNftsByAccountByCollectionSequencer,
 } from "lib/services/nft";
 import type { HexAddr } from "lib/types";
@@ -25,7 +25,7 @@ export const NftsOverview = ({
   const isMobile = useMobile();
   const { isFullTier, isSequencerTier } = useTierConfig();
   const limit = 5;
-  const accountNftsFull = useNftsByAccountByCollection(
+  const accountNftsFull = useNftsByAccountAddress(
     userAddress,
     limit,
     0,
@@ -52,24 +52,22 @@ export const NftsOverview = ({
         <MobileTitle title="NFTs" count={totalCount} onViewMore={onViewMore} />
       ) : (
         <AccountSectionWrapper title="NFTs" totalData={totalCount}>
-          <Flex
-            direction="column"
-            borderBottom={data?.nfts?.length ? "1px solid" : "0px"}
-            borderBottomColor="gray.700"
-            mb={data?.nfts?.length ?? 12}
-            pb={data?.nfts?.length ?? 8}
-          >
+          <Flex direction="column">
             <NftList
-              nfts={data?.nfts.slice(0, limit)}
+              nfts={data?.items.slice(0, limit)}
               isLoading={isFetching}
               emptyState={
-                <AccountDetailsEmptyState message="No NFTs are held by this account." />
+                <AccountDetailsEmptyState
+                  message="No NFTs are held by this account."
+                  borderBottom={0}
+                />
               }
               showCollection
             />
             {onViewMore && !!totalCount && totalCount > 5 && (
               <ViewMore onClick={onViewMore} />
             )}
+            <Divider bg="gray.700" />
           </Flex>
         </AccountSectionWrapper>
       )}

diff --git a/src/lib/pages/account-details/components/nfts/NftsSectionFull.tsx b/src/lib/pages/account-details/components/nfts/NftsSectionFull.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState, ErrorFetching } from "lib/components/state";
-import { useCollectionsByAccount } from "lib/services/nft-collection";
+import { useNftCollectionsByAccountAddress } from "lib/services/nft-collection";
 import type { HexAddr, HexAddr32, Option } from "lib/types";
 
 import { FilterItem } from "./FilterItem";
@@ -25,14 +25,15 @@ export const NftsSectionFull = ({
   totalData = 0,
 }: NftsSectionFullProps) => {
   const isMobile = useMobile();
-  const { data: collections, isLoading } = useCollectionsByAccount(address);
+  const { data: collections, isLoading } =
+    useNftCollectionsByAccountAddress(address);
 
   const [selectedCollection, setSelectedCollection] =
     useState<SelectedCollection>();
 
   if (isLoading) return <Loading />;
   if (!collections) return <ErrorFetching dataName="collections" />;
-  if (!collections.length)
+  if (!collections.items.length)
     return (
       <EmptyState
         imageVariant="empty"
@@ -62,7 +63,7 @@ export const NftsSectionFull = ({
             count={totalData}
             isDefault
           />
-          {collections.map((item) => (
+          {collections.items.map((item) => (
             <FilterItem
               key={item.collectionAddress}
               collectionName={item.collectionName}

diff --git a/src/lib/pages/account-details/components/nfts/NftsSectionSequencer.tsx b/src/lib/pages/account-details/components/nfts/NftsSectionSequencer.tsx
@@ -29,7 +29,7 @@ export const NftsSectionSequencer = ({
   const { data: accountNfts, isLoading } =
     useNftsByAccountByCollectionSequencer(address, undefined, undefined);
 
-  const collections = groupBy(accountNfts?.nfts, "collectionAddress");
+  const collections = groupBy(accountNfts?.items, "collectionAddress");
 
   const [selectedCollection, setSelectedCollection] =
     useState<SelectedCollection>();