[Mint] fix get contract metadata from irys

package.json

@@ -31,6 +31,7 @@
     "graphql-request": "^5.1.0",
     "lodash": "^4.17.21",
     "lodash.merge": "^4.6.2",
+    "millify": "^6.1.0",
     "ms": "^2.1.3",
     "numeral": "^2.0.6",
     "polished": "^4.2.2",

src/components/DynamicWrapper/index.tsx

@@ -7,6 +7,7 @@ const Uploader = lazy(() => import('@/pages/Uploader'))
 const Manager = lazy(() => import('@/pages/Manage'))
 const Auction = lazy(() => import('@/pages/Auction'))
 const Mint = lazy(() => import('@/pages/Mint'))
+const MyCollections = lazy(() => import('@/pages/MyCollections'))
 
 export default function DynamicWrapper({ identifier }: { identifier: string }) {
   const component = useMemo(() => {
@@ -25,6 +26,8 @@ export default function DynamicWrapper({ identifier }: { identifier: string }) {
         return <Auction />
       case 'mint':
         return <Mint />
+      case 'myCollections':
+        return <MyCollections />
       default:
         return <></>
     }

src/components/Errors/ErrorWrapper/index.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components/macro'
 
 export const ErrorWrapper = styled.div`
-  width: 50%;
+  width: 60%;
   height: 26%;
   position: absolute;
   top: 37%;

src/constants/pages.ts

@@ -1,6 +1,7 @@
 import MiyaLogo from 'assets/134321870.png?preset=icon&resize=true'
 import ExecutableIcon from 'assets/create_new.png?preset=icon&resize=true'
 import GearIcon from 'assets/executable_gear.png?preset=icon&resize=true'
+import FolderOpen from 'assets/folder_open.png?preset=thumbnail&resize=true'
 import AuctionIcon from 'assets/icon/auction.png?preset=icon&resize=true'
 import MintIcon from 'assets/launchpad_logo.png?preset=icon&resize=true'
 import ManageIcon from 'assets/miya_website_logo_2-removebg-preview.png?preset=icon&resize=true'
@@ -21,7 +22,7 @@ const Pages: Record<string, Page> = {
   home: {
     id: 'home',
     path: '/about',
-    label: 'Net Mint',
+    label: 'Net Explorer',
     icon: MiyaLogo[0],
     minSize: {
       width: 800,
@@ -38,6 +39,16 @@ const Pages: Record<string, Page> = {
       height: 720,
     },
   },
+  myCollections: {
+    id: 'myCollections',
+    path: '/my-collections',
+    label: 'My Collections',
+    icon: FolderOpen[0],
+    minSize: {
+      width: 800,
+      height: 720,
+    },
+  },
   launch: {
     id: 'launch',
     path: '/launch',

src/pages/Mint/Collection/CollectionDetail.tsx

@@ -25,7 +25,7 @@ import { Spinner } from '@/components/Spinner'
 import BackButton from '@/pages/Mint/Button/BackButton'
 import ConnectWalletButton from '@/pages/Mint/Button/ConnectWalletButton'
 import MintButton from '@/pages/Mint/Button/MintButton'
-import { EXPLORER_PAGE_SECTION } from '@/pages/Mint/constants'
+import { MINT_PAGE_SECTION } from '@/pages/Mint/constants'
 import type { Collection } from '@/pages/Mint/types/collection'
 import { useContractMetadata } from '@/pages/Mint/useContractMetadata'
 import { useMintWithFee } from '@/pages/Mint/useMintWithFee'
@@ -366,7 +366,7 @@ export default function CollectionDetail({
             {/* </SocialList> */}
           </ImageDetailWrapper>
           <ConnectButtonWrapper>
-            <BackButton text="Back" handleClick={() => setPageSection(EXPLORER_PAGE_SECTION.COLLECTIONS_SECTION)} />
+            <BackButton text="Back" handleClick={() => setPageSection(MINT_PAGE_SECTION.COLLECTIONS_SECTION)} />
             <ConnectWalletButton isConnected={isConnected} />
           </ConnectButtonWrapper>
         </ImageDetailContainer>
@@ -388,7 +388,7 @@ export default function CollectionDetail({
                   value={freeMintAmount}
                   onChange={(e) => setFreeMintAmount(Number(e.target.value))}
                 />
-                <Button text={'Launch'} />
+                <Button text={'Mint'} />
               </MintInputWrapper>
             </MintInputContainer>
             <MintInputContainer>

src/pages/Mint/Collections/CollectionsItem.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components/macro'
 
 import SampleImage from '@/assets/explorer/sample/nft_2.png'
-import { EXPLORER_PAGE_SECTION } from '@/pages/Mint/constants'
 import type { Collection } from '@/pages/Mint/types/collection'
 import { useContractMetadata } from '@/pages/Mint/useContractMetadata'
 

src/pages/Mint/Collections/index.tsx

@@ -4,11 +4,11 @@ import styled from 'styled-components/macro'
 
 import SearchIcon from '@/assets/explorer/icon/search.svg'
 import { Spinner } from '@/components/Spinner'
-import { GET_COLLECTIONS } from '@/pages/Mint/gql/collections'
 import BackButton from '@/pages/Mint/Button/BackButton'
 import ConnectWalletButton from '@/pages/Mint/Button/ConnectWalletButton'
 import CollectionsItem from '@/pages/Mint/Collections/CollectionsItem'
-import { EXPLORER_PAGE_SECTION } from '@/pages/Mint/constants'
+import { MINT_PAGE_SECTION } from '@/pages/Mint/constants'
+import { GET_COLLECTIONS } from '@/pages/Mint/gql/collections'
 import type { Collection } from '@/pages/Mint/types/collection'
 
 const Wrapper = styled.div`
@@ -141,7 +141,7 @@ export default function Collections({
 
   const handleClickCollection = (collection: Collection) => {
     setSelectedCollection(collection)
-    setPageSection(EXPLORER_PAGE_SECTION.COLLECTION_SECTION)
+    setPageSection(MINT_PAGE_SECTION.COLLECTION_SECTION)
   }
 
   return (

src/pages/Mint/NFT/index.tsx

@@ -5,7 +5,7 @@ import { useWindowSize } from 'usehooks-ts'
 import Dialog from '@/components/Dialog'
 import type { Token } from '@/pages/Mint'
 import BackButton from '@/pages/Mint/Button/BackButton'
-import { EXPLORER_PAGE_SECTION } from '@/pages/Mint/constants'
+import { MINT_PAGE_SECTION } from '@/pages/Mint/constants'
 
 const Container = styled.div`
   height: 100%;
@@ -163,7 +163,7 @@ export default function NFTDetail({
         </MetadataWrapper>
       </DetailWrapper>
       <ButtonWrapper style={{ height: width > 640 ? '25%' : '15%' }}>
-        <BackButton text="Back" handleClick={() => setPageSection(EXPLORER_PAGE_SECTION.COLLECTION_SECTION)} />
+        <BackButton text="Back" handleClick={() => setPageSection(MINT_PAGE_SECTION.COLLECTION_SECTION)} />
       </ButtonWrapper>
     </Container>
   )

src/pages/Mint/RecentMint/NFTItem.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/macro'
 import type { Address } from 'viem'
 
 import type { Token } from '@/pages/Mint'
-import { EXPLORER_PAGE_SECTION } from '@/pages/Mint/constants'
+import { MINT_PAGE_SECTION } from '@/pages/Mint/constants'
 import { useTokenMetadata } from '@/pages/Mint/useTokenMetadata'
 
 const Container = styled.div`
@@ -68,7 +68,7 @@ export default function NFTItem({
       collectionAddress,
       metadata: { name, image, description, attributes, external_url: externalURL },
     })
-    setPageSection(EXPLORER_PAGE_SECTION.NFT_SECTION)
+    setPageSection(MINT_PAGE_SECTION.NFT_SECTION)
   }
 
   return (

src/pages/Mint/RecentMint/index.tsx

@@ -2,7 +2,6 @@ import { useQuery } from '@apollo/client'
 import type { CSSProperties } from 'react'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
-import { useAccount } from 'wagmi'
 
 import { Spinner } from '@/components/Spinner'
 import type { Token } from '@/pages/Mint'
@@ -62,14 +61,11 @@ export default function RecentMint({
   const [currentCounter, setCurrentCounter] = useState<number>(1)
   const [isEndPage, setIsEndPage] = useState<boolean>(true)
 
-  const { address } = useAccount()
-
   const { loading, error, data, refetch } = useQuery(GET_NFTS_OF_USER, {
     variables: {
       offset: (currentCounter - 1) * ITEM_PER_PAGE,
       limit: ITEM_PER_PAGE,
       collectionAddress: selectedCollection.address,
-      ownerAddress: address || '',
     },
   })
 

src/pages/Mint/constants.ts

@@ -1,4 +1,4 @@
-export const EXPLORER_PAGE_SECTION = {
+export const MINT_PAGE_SECTION = {
   COLLECTIONS_SECTION: 'Collections',
   COLLECTION_SECTION: 'Collection',
   NFT_SECTION: 'Nft',

src/pages/Mint/gql/NFTs.ts

@@ -1,12 +1,8 @@
 import { gql } from '@apollo/client'
 
 export const GET_NFTS_OF_USER = gql`
-  query GetNFTsOfUser($limit: Int, $offset: Int, $collectionAddress: String, $ownerAddress: String) {
-    Token(
-      offset: $offset
-      limit: $limit
-      where: { collection: { address: { _eq: $collectionAddress } }, owner_id: { _eq: $ownerAddress } }
-    ) {
+  query GetNFTsOfUser($limit: Int, $offset: Int, $collectionAddress: String) {
+    Token(offset: $offset, limit: $limit, where: { collection: { address: { _eq: $collectionAddress } } }) {
       metadataUri
       token_id
       owner_id

src/pages/Mint/index.tsx

@@ -11,7 +11,7 @@ import WindowWrapper from '@/components/WindowWrapper'
 import Pages from '@/constants/pages'
 import CollectionInfo from '@/pages/Mint/Collection'
 import Collections from '@/pages/Mint/Collections'
-import { EXPLORER_PAGE_SECTION } from '@/pages/Mint/constants'
+import { MINT_PAGE_SECTION } from '@/pages/Mint/constants'
 import NFTDetail from '@/pages/Mint/NFT'
 import type { Collection } from '@/pages/Mint/types/collection'
 import type { TokenMetadata } from '@/store/collections/reducer'
@@ -74,7 +74,7 @@ export default function MintPage() {
 
   const [errorMessage, setErrorMessage] = useState<string>('')
   const [errorName, setErrorName] = useState<string>('Mint Error')
-  const [pageSection, setPageSection] = useState<string>(EXPLORER_PAGE_SECTION.COLLECTIONS_SECTION)
+  const [pageSection, setPageSection] = useState<string>(MINT_PAGE_SECTION.COLLECTIONS_SECTION)
   const [selectedCollection, setSelectedCollection] = useState<Collection>({
     name: '',
     metadataUri: '',
@@ -102,7 +102,7 @@ export default function MintPage() {
 
   const renderSection = () => {
     switch (pageSection) {
-      case EXPLORER_PAGE_SECTION.COLLECTIONS_SECTION:
+      case MINT_PAGE_SECTION.COLLECTIONS_SECTION:
         return (
           <Collections
             isConnected={isConnected}
@@ -111,7 +111,7 @@ export default function MintPage() {
             setSelectedCollection={setSelectedCollection}
           />
         )
-      case EXPLORER_PAGE_SECTION.COLLECTION_SECTION:
+      case MINT_PAGE_SECTION.COLLECTION_SECTION:
         return (
           <CollectionInfo
             setErrorMessage={setErrorMessage}
@@ -122,7 +122,7 @@ export default function MintPage() {
             setSelectedToken={setSelectedToken}
           />
         )
-      case EXPLORER_PAGE_SECTION.NFT_SECTION:
+      case MINT_PAGE_SECTION.NFT_SECTION:
         return <NFTDetail selectedToken={selectedToken} setPageSection={setPageSection} />
       default:
         return <></>

src/pages/Mint/useContractMetadata.ts

@@ -5,10 +5,13 @@ import type { ContractMetadata } from '@/store/collections/reducer'
 export function useContractMetadata({ metadataUri }: { metadataUri: string }) {
   let contractUri = metadataUri
   if (contractUri.includes('ipfs://')) {
-    const uri = contractUri.replace('ipfs://', '')
-    const cid = uri.split('/')[0]
-    const contractFile = uri.split('/')[1]
-    contractUri = `https://${cid}.ipfs.nftstorage.link/${contractFile}`
+    const imageCID = contractUri.replace('ipfs://', '')
+    contractUri = `https://nftstorage.link/ipfs/${imageCID}`
+  }
+
+  if (contractUri.includes('ar://')) {
+    const imageCID = contractUri.replace('ar://', '')
+    contractUri = `https://gateway.irys.xyz/${imageCID}`
   }
 
   const { data: contractMetadata, error } = useFetch<ContractMetadata>(contractUri)
@@ -19,10 +22,13 @@ export function useContractMetadata({ metadataUri }: { metadataUri: string }) {
 
   let imageUri = contractMetadata?.image || ''
   if (imageUri.includes('ipfs://')) {
-    imageUri = (contractMetadata?.image || '').replace('ipfs://', '')
-    const cid = imageUri.split('/')[0]
-    const imageFile = imageUri.split('/')[1]
-    imageUri = `https://${cid}.ipfs.nftstorage.link/${imageFile}`
+    const imageCID = (contractMetadata?.image || '').replace('ipfs://', '')
+    imageUri = `https://nftstorage.link/ipfs/${imageCID}`
+  }
+
+  if (imageUri.includes('ar://')) {
+    const imageCID = (contractMetadata?.image || '').replace('ar://', '')
+    imageUri = `https://gateway.irys.xyz/${imageCID}`
   }
 
   return {

src/pages/Mint/useTokenMetadata.tsx

@@ -26,7 +26,11 @@ export function useTokenMetadata({ address, tokenId }: { address: Address; token
 
         if (uri.includes('ar://')) {
           const cid = uri.replace('ar://', '')
-          link = `https://gateway.irys.xyz/${cid}`
+          if (!cid.includes('.json')) {
+            link = `https://gateway.irys.xyz/${cid}.json`
+          } else {
+            link = `https://gateway.irys.xyz/${cid}`
+          }
         }
 
         const response = await fetch(link)