Merge pull request #102 from liteflow-labs/feature/use-new-create-ass…

…et-api update useCreateNFT to use new APIs
liteflow-labs · Dec 23, 2022 · e7e94c4 · e7e94c4
2 parents 3a04c43 + b97d3bf
commit e7e94c4
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 79 deletions.
diff --git a/docs/pages/hooks/useCreateNFT.mdx b/docs/pages/hooks/useCreateNFT.mdx
@@ -20,14 +20,15 @@ export default function Component() {
 
   const handleClick = async () => {
     await createNFT({
-      standard: 'ERC721', // can be Standard.ERC721 or Standard.ERC1155
+      chainId: 1, // chainId of the network to mint on
+      collectionAddress: '0x0000', // address of the collection to use
       name: 'Azuki #1', // name of the NFT
       description: 'Take the red bean to join the garden.', // description of the NFT
       content: azukiImage, // content file uploaded by the user
       isAnimation: false, // set to true if content file is a video. Require to set preview
       isPrivate: false, // set to true if content is private. Require to set preview.
       // optional
-      amount: 1, // number of NFT to create. Require Standard.ERC1155
+      amount: 1, // number of NFT to create. Require ERC1155
       royalties: 10, // royalty amount in percentage
       preview: azukiImagePreview, // preview in the case of private or animation content uploaded by user
       traits: [
@@ -78,7 +79,8 @@ useCreateNFT(
 ```tsx
 [
   ({
-    standard: Standard
+    chainId: number
+    collectionAddress: string
     name: string
     description: string
     content: File
@@ -104,14 +106,15 @@ Arguments:
 
 ```tsx
 {
-  standard: Standard,                           // can be Standard.ERC721 or Standard.ERC1155
+  chainId: Number,                              // id of the chain to mint on
+  collectionAddress: string,                    // address of the collection to mint on
   name: string,                                 // name of the NFT
   description: string,                          // description of the NFT
   content: File,                                // content file uploaded by the user
   preview?: File,                               // preview in the case of private or animation content uploaded by user
   isAnimation: boolean,                         // set to true if content file is a video. Require to set preview
   isPrivate: boolean,                           // set to true if content is private. Require to set preview.
-  amount?: number,                              // number of NFT to create. Require Standard.ERC1155
+  amount?: number,                              // number of NFT to create. Require ERC1155
   royalties?: number,                           // royalty amount in percentage
   traits?: { type: string, value: string }[]    // Array of traits associated to the NFT
 }

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 #### Breaking Changes
 
+- The `useCreateNFT` function has been updated to accept `chainId` and `collectionAddress` as arguments, rather than the previous `standard` attribute. To migrate your application to this new version, you will need to pass the desired collection to `useCreateNFT` by either fetching it dynamically or hardcoding it in your code. [#102](https://github.com/liteflow-labs/liteflow-js/pull/102)
 - Removed parsePrice from package. [#106](https://github.com/liteflow-labs/liteflow-js/pull/106)
 
 #### Added
@@ -13,6 +14,7 @@
 #### Changed
 
 - Change react library from dependency to peerDependencies and accept react 18 [#97](https://github.com/liteflow-labs/liteflow-js/pull/97)
+- Updated `@nft/api-graphql` lib to `1.0.0-beta.9` (https://github.com/liteflow-labs/liteflow-js/pull/102)
 
 #### Deprecated
 

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -28,7 +28,7 @@
     "@graphql-codegen/typescript": "^1.23.0",
     "@graphql-codegen/typescript-graphql-request": "^4.5.5",
     "@graphql-codegen/typescript-operations": "^1.18.4",
-    "@nft/api-graphql": "^1.0.0-beta.7",
+    "@nft/api-graphql": "^1.0.0-beta.9",
     "@types/react": "^17.0.51",
     "eslint-plugin-react-hooks": "^4.2.0"
   },

diff --git a/packages/hooks/src/errorMessages.ts b/packages/hooks/src/errorMessages.ts
@@ -19,9 +19,7 @@ export enum ErrorMessages {
   MINT_SIGNATURE_GENERATION = 'Error while creating the lazy minted asset signature',
 
   ASSET_LAZY_MINT_CREATION_FAILED = 'Error while creating the lazy minted asset',
-  ASSET_CREATION_FAILED = 'Error while creating this asset',
-  ASSET_INVALID_STANDARD = 'Invalid token',
-  ASSET_NO_MINT = 'No transaction to mint',
+  ASSET_TRANSACTION_CREATION_FAILED = 'Error while creating the transaction for the asset',
 
   INVITATION_NOT_FOUND = 'Invitation not found',
   INVITATION_CREATION_FAILED = 'Invitation creation failed',

diff --git a/packages/hooks/src/useCreateNFT.ts b/packages/hooks/src/useCreateNFT.ts
@@ -4,60 +4,70 @@ import { useCallback, useContext, useState } from 'react'
 import invariant from 'ts-invariant'
 import { LiteflowContext } from './context'
 import { ErrorMessages } from './errorMessages'
-import { Standard } from './graphql'
+import { LazyMintedAssetSignatureInput } from './graphql'
 import useCheckOwnership from './useCheckOwnership'
 import useConfig from './useConfig'
 import useIPFSUploader from './useIPFSUploader'
 import { convertTx } from './utils/transaction'
 
 gql`
-  mutation CreateAsset(
-    $input: AssetInputBis!
+  mutation CreateAssetTransaction(
+    $chainId: Int!
+    $collectionAddress: Address!
+    $metadata: MetadataInput!
     $creatorAddress: Address!
-    $amount: Uint256!
     $royalties: Int
+    $supply: Uint256!
   ) {
-    createAsset(input: { asset: $input }) {
-      asset {
-        id
-        token {
-          __typename
-          ... on ERC721 {
-            mint(owner: $creatorAddress, royalties: $royalties) {
-              ...Transaction
-            }
-          }
-          ... on ERC1155 {
-            mint(
-              owner: $creatorAddress
-              amount: $amount
-              royalties: $royalties
-            ) {
-              ...Transaction
-            }
-          }
-        }
+    createAssetTransaction(
+      chainId: $chainId
+      collectionAddress: $collectionAddress
+      creatorAddress: $creatorAddress
+      metadata: $metadata
+      royalties: $royalties
+      supply: $supply
+    ) {
+      assetId
+      transaction {
+        ...Transaction
       }
     }
   }
 `
 
 gql`
   mutation CreateLazyMintedAssetSignature(
+    $chainId: Int!
+    $collectionAddress: Address!
     $asset: LazyMintedAssetSignatureInput!
   ) {
-    createLazyMintedAssetSignature(input: { asset: $asset }) {
+    createLazyMintedAssetSignature(
+      input: {
+        chainId: $chainId
+        collectionAddress: $collectionAddress
+        asset: $asset
+      }
+    ) {
       eip712Data
     }
   }
 `
 
 gql`
   mutation CreateLazyMintedAsset(
+    $chainId: Int!
+    $collectionAddress: Address!
     $asset: LazyMintedAssetInput!
     $signature: String!
   ) {
-    createLazyMintedAsset(input: { asset: $asset, signature: $signature }) {
+    createLazyMintedAsset(
+      input: {
+        chainId: $chainId
+        collectionAddress: $collectionAddress
+        asset: $asset
+        signature: $signature
+      }
+    ) {
       asset {
         id
       }
@@ -76,7 +86,8 @@ export enum CreateNftStep {
 }
 
 type createNftFn = (data: {
-  standard: Standard
+  chainId: number
+  collectionAddress: string
   name: string
   description: string
   content: File
@@ -158,13 +169,14 @@ export default function useCreateNFT(
 
   const createNft: createNftFn = useCallback(
     async ({
+      chainId,
+      collectionAddress,
       name,
       description,
       content,
       preview,
       isAnimation,
       isPrivate,
-      standard,
       amount,
       royalties,
       traits,
@@ -184,23 +196,30 @@ export default function useCreateNFT(
           isAnimation,
           isPrivate,
         })
+        const assetToCreate = {
+          creatorAddress: account.toLowerCase(),
+          royalties: royalties ? Math.round(royalties * 100) : null,
+          supply: amount ? amount.toString() : '1',
+          metadata: {
+            name,
+            image: media.image,
+            description,
+            animationUrl: media.animationUrl,
+            unlockableContent: media.unlockableContent,
+            attributes: (traits || []).map((x) => ({
+              traitType: x.type,
+              value: x.value,
+            })),
+          },
+        }
 
         // lazy minting
         if ((await config).hasLazyMint) {
-          const assetToCreate = {
-            standard,
-            creatorAddress: account.toLowerCase(),
-            description,
-            name,
-            traits: traits || null,
-            ...media,
-            supply: amount ? amount.toString() : '1',
-            royalties: royalties ? Math.round(royalties * 100) : null,
-          }
-
           const { createLazyMintedAssetSignature } =
             await sdk.CreateLazyMintedAssetSignature({
-              asset: assetToCreate,
+              chainId: chainId,
+              collectionAddress: collectionAddress,
+              asset: assetToCreate as LazyMintedAssetSignatureInput, // TODO: remove this cast when attributes from the API are removed
             })
 
           invariant(
@@ -218,10 +237,12 @@ export default function useCreateNFT(
           // send signature to api
           setActiveProcess(CreateNftStep.LAZYMINT_PENDING)
           const { createLazyMintedAsset } = await sdk.CreateLazyMintedAsset({
+            chainId: chainId,
+            collectionAddress: collectionAddress,
             signature,
             asset: {
               tokenId: message.tokenId,
-              ...assetToCreate,
+              ...(assetToCreate as LazyMintedAssetSignatureInput), // TODO: remove this cast when attributes from the API are removed
             },
           })
           invariant(
@@ -231,30 +252,20 @@ export default function useCreateNFT(
           return createLazyMintedAsset.asset.id
         }
 
-        const { createAsset } = await sdk.CreateAsset({
-          input: {
-            standard,
-            creatorAddress: account.toLowerCase(),
-            description,
-            name,
-            traits: traits || null,
-            ...media,
-          },
-          creatorAddress: account.toLowerCase(),
-          amount: amount ? amount.toString() : '1',
-          royalties: royalties ? Math.round(royalties * 100) : 0,
+        const { createAssetTransaction } = await sdk.CreateAssetTransaction({
+          chainId: chainId,
+          collectionAddress: collectionAddress,
+          ...assetToCreate,
         })
-        const asset = createAsset?.asset
-        invariant(asset, ErrorMessages.ASSET_CREATION_FAILED)
         invariant(
-          asset.token.__typename === 'ERC721' ||
-            asset.token.__typename === 'ERC1155',
-          ErrorMessages.ASSET_INVALID_STANDARD,
+          createAssetTransaction,
+          ErrorMessages.ASSET_TRANSACTION_CREATION_FAILED,
         )
-        invariant(asset.token.mint, ErrorMessages.ASSET_NO_MINT)
 
         setActiveProcess(CreateNftStep.TRANSACTION_SIGNATURE)
-        const tx = await signer.sendTransaction(convertTx(asset.token.mint))
+        const tx = await signer.sendTransaction(
+          convertTx(createAssetTransaction.transaction),
+        )
         setTransactionHash(tx.hash)
         setActiveProcess(CreateNftStep.TRANSACTION_PENDING)
         // waiting for transaction to be mined
@@ -266,13 +277,13 @@ export default function useCreateNFT(
         // poll the api until the ownership is updated
         console.info('polling api to check ownership...')
         await pollOwnership({
-          assetId: asset.id,
+          assetId: createAssetTransaction.assetId,
           ownerAddress: account.toLowerCase(),
           initialQuantity: '0',
         })
         console.info('polling done')
 
-        return asset.id
+        return createAssetTransaction.assetId
       } finally {
         setActiveProcess(CreateNftStep.INITIAL)
         setTransactionHash(undefined)