Release v3.4.0

.eslintrc.gql.js

@@ -1,10 +1,6 @@
 module.exports = {
   root: true,
   parser: '@graphql-eslint/eslint-plugin',
-  parserOptions: {
-    schema: 'node_modules/@nft/api-graphql/schema.graphql',
-    operations: '**/*.gql',
-  },
   plugins: ['@graphql-eslint/eslint-plugin'],
   extends: ['plugin:@graphql-eslint/operations-recommended'],
   rules: {

.graphqlrc.yml

@@ -0,0 +1,2 @@
+schema: './node_modules/@nft/api-graphql/schema.graphql'
+documents: '{components,hooks,pages}/**/*.{graphql,gql}'

components/Cart/CartDrawerListItem.tsx

@@ -23,7 +23,9 @@ type Props = {
       symbol: string
     }
     asset: {
-      id: string
+      chainId: number
+      collectionAddress: string
+      tokenId: string
       image: string
       name: string
       collection: {
@@ -47,7 +49,9 @@ const CartDrawerListItem: FC<Props> = ({ offer }) => {
   return (
     <ListItem
       image={
-        <Link href={`/tokens/${offer.asset.id}`}>
+        <Link
+          href={`/tokens/${offer.asset.chainId}-${offer.asset.collectionAddress}-${offer.asset.tokenId}`}
+        >
           <Image
             src={offer.asset.image}
             alt={offer.asset.name}
@@ -62,7 +66,7 @@ const CartDrawerListItem: FC<Props> = ({ offer }) => {
       label={
         <Text
           as={Link}
-          href={`/tokens/${offer.asset.id}`}
+          href={`/tokens/${offer.asset.chainId}-${offer.asset.collectionAddress}-${offer.asset.tokenId}`}
           variant="subtitle2"
           color="gray.800"
           title={offer.asset.name}

components/Cart/Step/Selection.gql

@@ -21,7 +21,6 @@ query FetchCartItems($offerIds: [UUID!]!) {
         symbol
       }
       asset {
-        id
         chainId
         collectionAddress
         tokenId
@@ -34,10 +33,6 @@ query FetchCartItems($offerIds: [UUID!]!) {
         name
         image
         imageMimetype
-        unlockedContent {
-          url
-          mimetype
-        }
         animationUrl
         animationMimetype
       }

components/Cart/Step/Transaction.tsx

@@ -32,7 +32,7 @@ import useSigner from '../../../hooks/useSigner'
 import ConnectButtonWithNetworkSwitch from '../../Button/ConnectWithNetworkSwitch'
 import List, { ListItem } from '../../List/List'
 import BatchPurchaseModal from '../../Modal/BatchPurchase'
-import Price, { formatPrice } from '../../Price/Price'
+import Price from '../../Price/Price'
 import CartItemSummary from '../ItemSummary'
 
 type Props = {
@@ -190,7 +190,7 @@ const CartStepTransaction: FC<Props> = ({
                       isLoading={approvalLoading[item.currency.id] || false}
                     >
                       {t('cart.step.transaction.button.approve', {
-                        value: formatPrice(item.amount, item.currency),
+                        value: item.currency.symbol,
                       })}
                     </ConnectButtonWithNetworkSwitch>
                   ) : balances[item.currency.id] &&

components/Drop/DropCard.tsx

@@ -9,7 +9,6 @@ import {
   Stack,
   Text,
 } from '@chakra-ui/react'
-import { BigNumber } from '@ethersproject/bignumber'
 import { HiArrowNarrowRight } from '@react-icons/all-files/hi/HiArrowNarrowRight'
 import { HiBadgeCheck } from '@react-icons/all-files/hi/HiBadgeCheck'
 import Trans from 'next-translate/Trans'
@@ -25,21 +24,21 @@ import Link from '../Link/Link'
 import Price from '../Price/Price'
 
 type Props = {
-  collection: {
-    address: string
-    chainId: number
-    cover: string | null
-    image: string | null
-    name: string
-    deployer: {
+  drop: {
+    collection: {
       address: string
-      name: string | null
-      verification: {
-        status: AccountVerificationStatus
-      } | null
+      chainId: number
+      cover: string | null
+      image: string | null
+      name: string
+      deployer: {
+        address: string
+        name: string | null
+        verification: {
+          status: AccountVerificationStatus
+        } | null
+      }
     }
-  }
-  drop: {
     startDate: Date
     endDate: Date
     unitPrice: string
@@ -48,17 +47,12 @@ type Props = {
       symbol: string
       image: string
     }
+    supply: string | null
   }
-  totalSupply: BigNumber | null
   onCountdownEnd?: () => void
 }
 
-export default function DropCard({
-  collection,
-  drop,
-  totalSupply,
-  onCountdownEnd,
-}: Props) {
+export default function DropCard({ drop, onCountdownEnd }: Props) {
   const { t } = useTranslation('components')
   const status = useTimeStatus(drop)
 
@@ -71,7 +65,7 @@ export default function DropCard({
   return (
     <Box
       as={Link}
-      href={`/collection/${collection.chainId}/${collection.address}/drop`}
+      href={`/collection/${drop.collection.chainId}/${drop.collection.address}/drop`}
       borderWidth="1px"
       borderRadius="2xl"
       w="full"
@@ -90,10 +84,10 @@ export default function DropCard({
         }}
         bg="gray.100"
       >
-        {collection.cover && (
+        {drop.collection.cover && (
           <Image
-            src={collection.cover}
-            alt={collection.name}
+            src={drop.collection.cover}
+            alt={drop.collection.name}
             fill
             sizes="(min-width: 62em) 600px, 100vw"
             objectFit="cover"
@@ -140,10 +134,10 @@ export default function DropCard({
         mb={4}
         bg="gray.200"
       >
-        {collection.image && (
+        {drop.collection.image && (
           <Image
-            src={collection.image}
-            alt={collection.name}
+            src={drop.collection.image}
+            alt={drop.collection.name}
             fill
             sizes="72px"
             objectFit="cover"
@@ -154,34 +148,34 @@ export default function DropCard({
       <Flex position="relative" justifyContent="space-between" gap={4} w="full">
         <Flex flexDir="column" gap={1}>
           <Heading variant="heading2" color="white" isTruncated>
-            {collection.name}
+            {drop.collection.name}
           </Heading>
 
           <Flex alignItems="center" gap={1.5}>
             <Text variant="button2" color="white">
               {t('drop.by', {
                 address:
-                  collection.deployer.name ||
-                  formatAddress(collection.deployer.address, 10),
+                  drop.collection.deployer.name ||
+                  formatAddress(drop.collection.deployer.address, 10),
               })}
             </Text>
-            {collection.deployer.verification?.status === 'VALIDATED' && (
+            {drop.collection.deployer.verification?.status === 'VALIDATED' && (
               <Icon as={HiBadgeCheck} color="brand.500" h={4} w={4} />
             )}
           </Flex>
 
           <Flex alignItems="center" gap={2}>
-            {totalSupply ? (
+            {drop.supply ? (
               <Text variant="caption" color="white">
                 <Trans
                   ns="components"
                   i18nKey="drop.supply.available"
                   values={{
-                    count: totalSupply.toNumber(),
+                    count: parseInt(drop.supply, 10),
                   }}
                   components={[
                     <>
-                      {numbro(totalSupply).format({
+                      {numbro(drop.supply).format({
                         thousandSeparated: true,
                       })}
                     </>,

components/Filter/FilterBy/Trait.tsx

@@ -65,8 +65,8 @@ const FilterByTrait: FC<Props> = ({
     notifyOnNetworkStatusChange: true,
   })
 
-  const traitsData = data?.collection?.traitsOfCollection.nodes
-  const hasNextPage = data?.collection?.traitsOfCollection.pageInfo.hasNextPage
+  const traitsData = data?.collectionTraits?.nodes
+  const hasNextPage = data?.collectionTraits?.pageInfo.hasNextPage
 
   const loadMore = useCallback(async () => {
     const newOffset = offset + PAGINATION_LIMIT
@@ -76,22 +76,16 @@ const FilterByTrait: FC<Props> = ({
         // Cannot use concatToQuery function because of nested cache
         // Nested cache comes from the shape of FetchCollectionTraits query above
         updateQuery: (prevResult, { fetchMoreResult }) => {
-          if (
-            !fetchMoreResult ||
-            !fetchMoreResult.collection?.traitsOfCollection
-          )
+          if (!fetchMoreResult || !fetchMoreResult.collectionTraits)
             return prevResult
           return {
             ...fetchMoreResult,
-            collection: {
-              ...fetchMoreResult.collection,
-              traitsOfCollection: {
-                ...fetchMoreResult.collection.traitsOfCollection,
-                nodes: [
-                  ...(prevResult?.collection?.traitsOfCollection.nodes || []),
-                  ...fetchMoreResult.collection.traitsOfCollection.nodes,
-                ],
-              },
+            collectionTraits: {
+              ...fetchMoreResult.collectionTraits,
+              nodes: [
+                ...(prevResult?.collectionTraits?.nodes || []),
+                ...fetchMoreResult.collectionTraits.nodes,
+              ],
             },
           }
         },

components/History/HistoryList.gql

@@ -6,55 +6,51 @@ query FetchAssetHistory(
   $offset: Int!
   $filter: [AssetHistoryAction!]
 ) {
-  asset(
-    chainId: $chainId
-    collectionAddress: $collectionAddress
-    tokenId: $tokenId
+  assetHistories(
+    filter: {
+      chainId: { equalTo: $chainId }
+      collectionAddress: { equalTo: $collectionAddress }
+      tokenId: { equalTo: $tokenId }
+      action: { in: $filter }
+    }
+    orderBy: DATE_DESC
+    first: $limit
+    offset: $offset
+    includeWhenAssetDeleted: YES
+    includeWhenCurrencyDeleted: YES
   ) {
-    chainId
-    collectionAddress
-    tokenId
-    histories(
-      filter: { action: { in: $filter } }
-      orderBy: DATE_DESC
-      first: $limit
-      offset: $offset
-      includeWhenAssetDeleted: YES
-      includeWhenCurrencyDeleted: YES
-    ) {
-      pageInfo {
-        hasNextPage
-        hasPreviousPage
-      }
-      nodes {
-        action
-        date
-        unitPrice
-        quantity
-        fromAddress
-        from {
-          address
-          name
-          image
-          verification {
-            status
-          }
-        }
-        toAddress
-        to {
-          address
-          name
-          image
-          verification {
-            status
-          }
+    pageInfo {
+      hasNextPage
+      hasPreviousPage
+    }
+    nodes {
+      action
+      date
+      unitPrice
+      quantity
+      fromAddress
+      from {
+        address
+        name
+        image
+        verification {
+          status
         }
-        transactionHash
-        currency {
-          decimals
-          symbol
+      }
+      toAddress
+      to {
+        address
+        name
+        image
+        verification {
+          status
         }
       }
+      transactionHash
+      currency {
+        decimals
+        symbol
+      }
     }
   }
 }

components/History/HistoryList.tsx

@@ -57,12 +57,10 @@ const HistoryList: FC<IProps> = ({ chainId, collectionAddress, tokenId }) => {
       filter,
     },
   })
-  const histories = historyData?.asset?.histories.nodes
+  const histories = historyData?.assetHistories?.nodes
 
   const ListItem = (
-    history: NonNullable<
-      FetchAssetHistoryQuery['asset']
-    >['histories']['nodes'][0],
+    history: NonNullable<FetchAssetHistoryQuery['assetHistories']>['nodes'][0],
     i: number,
   ) => {
     switch (history.action) {
@@ -140,9 +138,9 @@ const HistoryList: FC<IProps> = ({ chainId, collectionAddress, tokenId }) => {
         <Pagination
           page={page}
           onPageChange={setPage}
-          hasNextPage={historyData?.asset?.histories.pageInfo.hasNextPage}
+          hasNextPage={historyData?.assetHistories?.pageInfo.hasNextPage}
           hasPreviousPage={
-            historyData?.asset?.histories.pageInfo.hasPreviousPage
+            historyData?.assetHistories?.pageInfo.hasPreviousPage
           }
           withoutLimit
           withoutNumbers