CU-864dmfjy9 - Upgrade Ghost Market API to v2

CityOfZion · Jan 4, 2023 · 87b75ec · 87b75ec
1 parent 3afc85a
commit 87b75ec
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 47 deletions.
diff --git a/app/actions/nftGalleryActions.js b/app/actions/nftGalleryActions.js
@@ -9,19 +9,11 @@ const NFT_PROVIDER = GHOST_MARKET
 
 export type NftGalleryItem = {
   metadata: {
-    attributes: any,
     description: string,
-    image: string,
-    media_type: string,
+    mediaUri: string,
+    mediaType: string,
     name: string,
   },
-  series: {
-    chain: string,
-    contrract: string,
-    creator: string,
-    current_supply: number,
-    description: string,
-  },
   tokenId: string,
   contract: string,
   collection: {
@@ -35,46 +27,53 @@ export type NftGalleryResults = {
   page: number,
 }
 
-const DEFAULT_NFT_GALLERY_RESULTS = { results: [], page: 0, count: 0 }
+const DEFAULT_NFT_GALLERY_RESULTS = (previousResults?: NftGalleryItem[]) => ({
+  results: previousResults ?? [],
+  page: 0,
+  count: 0,
+})
 
 export async function parseGhostMarketResults({
   address,
-  page = 0,
+  page = 1,
   previousResults = [],
 }: {
   address: string,
   page: number,
   previousResults: NftGalleryItem[],
 }): Promise<NftGalleryResults> {
   try {
-    const LIMIT = 8
-    const OFFSET = LIMIT * page
+    const SIZE = 8
 
     const response = await axios.get(
-      `https://api.ghostmarket.io/api/v1/assets?chain=n3&owner=${address}&limit=${LIMIT}&offset=${OFFSET}&with_total=1`,
+      `https://api.ghostmarket.io/api/v2/assets?chain=n3&owners[]=${address}&size=${SIZE}&page=${page}&getTotal=true`,
     )
 
-    const items = response?.data?.assets ?? []
-    const count = response?.data?.total_results ?? 0
-    if (items.length) {
-      const results = items.map(asset => {
-        const parsed = {
-          metadata: asset.nft.nft_metadata,
-          series: asset.nft.series,
-          tokenId: asset.nft.token_id,
-          contract: asset.nft.contract,
-          collection: asset.nft.collection,
-        }
-        return parsed
-      })
+    const { assets, total: count } = response?.data
 
-      return { results: previousResults.concat(results), page, count }
-    }
+    if (!assets || !assets.length || !count)
+      return DEFAULT_NFT_GALLERY_RESULTS(previousResults)
+
+    const results = assets.map(
+      ({ metadata, collection, contract, tokenId }) => ({
+        metadata: {
+          description: metadata.description,
+          mediaUri: metadata.mediaUri,
+          mediaType: metadata.mediaType,
+          name: metadata.name,
+        },
+        tokenId,
+        contract: contract.hash,
+        collection: {
+          name: collection.name,
+        },
+      }),
+    )
 
-    return { results: previousResults, page: 0, count }
+    return { results: previousResults.concat(results), page, count }
   } catch (e) {
     console.error('An error occurred fetching data for NFT gallery', { e })
-    return DEFAULT_NFT_GALLERY_RESULTS
+    return DEFAULT_NFT_GALLERY_RESULTS(previousResults)
   }
 }
 

diff --git a/app/components/Modals/TransferNftModal/TransferNftModal.jsx b/app/components/Modals/TransferNftModal/TransferNftModal.jsx
@@ -17,7 +17,7 @@ import { addPendingTransaction } from '../../../actions/pendingTransactionAction
 
 type Props = {
   hideModal: () => any,
-  imageHref: string,
+  mediaUri: string,
   url: string,
   mediaType: string,
   isWatchOnly: boolean,

diff --git a/app/containers/NftGallery/NftGallery.jsx b/app/containers/NftGallery/NftGallery.jsx
@@ -31,11 +31,11 @@ type Props = {
 }
 
 export function NFT({
-  imageHref,
+  mediaUri,
   url = '',
   mediaType = '',
 }: {
-  imageHref: string,
+  mediaUri: string,
   url: string,
   mediaType: string,
 }) {
@@ -52,7 +52,7 @@ export function NFT({
     () => {
       async function determineMediaType() {
         try {
-          const mediaUrl = imageHref.replace('ipfs://', 'https://ipfs.io/ipfs/')
+          const mediaUrl = mediaUri.replace('ipfs://', 'https://ipfs.io/ipfs/')
           const results = await axios.head(mediaUrl)
           setParsedMediaType(results?.headers?.['content-type'] ?? '')
         } catch (e) {
@@ -66,7 +66,7 @@ export function NFT({
         determineMediaType()
       }
     },
-    [mediaType],
+    [mediaType, mediaUri],
   )
 
   return (
@@ -91,14 +91,14 @@ export function NFT({
             style={{ display: isLoading ? 'none' : 'block' }}
           >
             <source
-              src={imageHref.replace('ipfs://', 'https://ipfs.io/ipfs/')}
+              src={mediaUri.replace('ipfs://', 'https://ipfs.io/ipfs/')}
               type="video/mp4"
             />
           </video>
         ) : (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
           <img
-            src={imageHref.replace('ipfs://', 'https://ipfs.io/ipfs/')}
+            src={mediaUri.replace('ipfs://', 'https://ipfs.io/ipfs/')}
             className={styles.newsImage}
             style={{ display: isLoading ? 'none' : 'block' }}
             onLoad={onLoad}
@@ -146,8 +146,7 @@ export default function NFTGallery({
               <>
                 {results.map(data => {
                   const {
-                    // eslint-disable-next-line camelcase
-                    metadata: { image, name, description, media_type },
+                    metadata: { mediaUri, name, description, mediaType },
                     tokenId,
                     collection,
                     contract,
@@ -156,9 +155,8 @@ export default function NFTGallery({
                   return (
                     <div className={styles.nftWrapper} key={tokenId}>
                       <NFT
-                        imageHref={image}
-                        // eslint-disable-next-line camelcase
-                        mediaType={media_type}
+                        mediaUri={mediaUri}
+                        mediaType={mediaType}
                         url={`https://ghostmarket.io/asset/n3/${contract}/${tokenId}/`}
                       />
                       <div className={styles.content}>
@@ -185,17 +183,17 @@ export default function NFTGallery({
                               renderIcon={() => <SendIcon />}
                               onClick={() =>
                                 showModal(TRANSFER_NFT, {
-                                  imageHref: image,
+                                  mediaUri,
                                   url: `https://ghostmarket.io/asset/n3/${contract}/${tokenId}/`,
-                                  mediaType: media_type,
+                                  mediaType,
                                   isWatchOnly: true,
                                   showModal,
                                   contract,
                                   tokenId,
                                 })
                               }
                             >
-                              Send
+                              SendButton
                             </Button>
                           </div>
                         )}