Testnet deployment

components/explore/ClipCard.jsx

@@ -2,26 +2,31 @@ import Image from 'next/image'
 import { FiHeart } from 'react-icons/fi'
 import testthumbnail from '../../public/test-thumbnail.png'
 
-export default function ClipCard() {
+export default function ClipCard({ NFT }) {
+
+  const { clip, description, game, itemId, name, owner, price, seller, tag, thumbnail } = NFT
+
   return (
     <div className='bg-gray-light py-1 px-1 rounded-xl'>
       <Image
         className='cursor-pointer'
-        src={testthumbnail}
+        src={thumbnail}
+        width={40}
+        height={40}
       />
       <div className='w-full flex flex-col items-start text-left px-2'>
         <div className='my-2'>
-          <h6 className='text-gray-mute font-semibold text-xs'>Valorant</h6>
-          <p className='text-primary text-sm'>Insane spray transfer 3K on Bind!</p>
+          <h6 className='text-gray-mute font-semibold text-xs'>{game}</h6>
+          <p className='text-primary text-sm'>{name}</p>
         </div>
         <div className='my-2 w-full flex flex-row justify-between items-center'>
           <div className=''>
             <h6 className='text-gray-mute font-semibold text-xs'>Price</h6>
-            <p className='text-primary text-sm'>0.3 ETH</p>
+            <p className='text-primary text-sm'>{price}</p>
           </div>
           <div className=''>
             <h6 className='text-gray-mute font-semibold text-xs'>Creator</h6>
-            <p className='text-primary text-sm'>mizanxali</p>
+            <p className='text-primary text-sm'>{seller}</p>
           </div>
         </div>
         <div className='my-2 w-full flex flex-row justify-between items-center'>

components/explore/ExploreCard.jsx

@@ -3,11 +3,11 @@ import Link from 'next/link'
 import valorantlogo from '../../public/valorant-logo.svg'
 import csgologo from '../../public/csgo-logo.png'
 import fortnitelogo from '../../public/fortnite-logo.jpg'
-import { CSGO_DESCRIPTION, CSGO_GAME_ID, FORTNITE_DESCRIPTION, FORTNITE_GAME_ID, GAMES, VALORANT_DESCRIPTION, VALORANT_GAME_ID } from '../../constants'
+import { CSGO_DESCRIPTION, CSGO_GAME_ID, FORTNITE_DESCRIPTION, FORTNITE_GAME_ID, GAME_KEYS, VALORANT_DESCRIPTION, VALORANT_GAME_ID } from '../../constants'
 
 export default function ExploreCard({ gameId }) {
   return (
-    <Link href={`explore/${GAMES[gameId].STRING}`}>
+    <Link href={`explore/${GAME_KEYS[gameId]}`}>
       <div className='relative cursor-pointer'>
         <div className=' absolute top-7 left-0 right-0 mx-auto z-10'>
           <GameLogo gameId={gameId} />

constants/index.js

@@ -2,19 +2,16 @@ export const VALORANT_GAME_ID = 0
 export const CSGO_GAME_ID = 1
 export const FORTNITE_GAME_ID = 2
 
-export const GAMES = [
-  {
-    NAME: 'Valorant',
-    STRING: 'valorant'
-  },
-  {
-    NAME: 'CS:GO',
-    STRING: 'csgo'
-  },
-  {
-    NAME: 'Fortnite',
-    STRING: 'fortnite'
-  },
+export const GAME_NAMES = [
+  'Valorant',
+  'CS:GO',
+  'Fortnite'
+]
+
+export const GAME_KEYS = [
+  'valorant',
+  'csgo',
+  'fortnite'
 ]
 
 export const VALORANT_DESCRIPTION = 'Valorant is a team-based first-person hero shooter set in the near future. Players play as one of a set of agents, characters designed based on several countries and cultures around the world.'

next.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   reactStrictMode: true,
+  images: {
+    domains: ['ipfs.infura.io'],
+  },
 }

pages/404.js

@@ -0,0 +1,3 @@
+export default function Custom404() {
+  return <h1 className='text-center text-primary text-2xl'>404 - Page Not Found</h1>
+}

pages/_app.js

@@ -21,30 +21,29 @@ function MyApp({ Component, pageProps }) {
   }, [])
 
   async function loadNFTs() {
-    // const provider = new ethers.providers.JsonRpcProvider()
-    // const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
-    // const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)
-    // const data = await marketContract.fetchMarketItems()
-
-    // const items = await Promise.all(data.map(async i => {
-    //   const tokenUri = await tokenContract.tokenURI(i.tokenId)
-    //   const meta = await axios.get(tokenUri)
-    //   let price = ethers.utils.formatUnits(i.price.toString(), 'ether')
-    //   let item = {
-    //     price,
-    //     itemId: i.itemId.toNumber(),
-    //     seller: i.seller,
-    //     owner: i.owner,
-    //     clip: meta.data.clip,
-    //     name: meta.data.name,
-    //     description: meta.data.description,
-    //     game: meta.data.game,
-    //     tag: meta.data.tag
-    //   }
-    //   return item
-    // }))
-
-    const items = [1, 2, 3]
+    const provider = new ethers.providers.JsonRpcProvider()
+    const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
+    const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)
+    const data = await marketContract.fetchMarketItems()
+
+    const items = await Promise.all(data.map(async i => {
+      const tokenUri = await tokenContract.tokenURI(i.tokenId)
+      const meta = await axios.get(tokenUri)
+      let price = ethers.utils.formatUnits(i.price.toString(), 'ether')
+      let item = {
+        price,
+        itemId: i.itemId.toNumber(),
+        seller: i.seller,
+        owner: i.owner,
+        clip: meta.data.clip,
+        thumbnail: meta.data.thumbnail,
+        name: meta.data.name,
+        description: meta.data.desc,
+        game: meta.data.game,
+        tag: meta.data.tag
+      }
+      return item
+    }))
 
     setNfts(items)
     console.log(nfts)

pages/create/index.js

@@ -1,9 +1,25 @@
 import Head from 'next/head'
 import Navbar from '../../components/common/Navbar'
 import { FiUpload } from 'react-icons/fi'
+import { BsCheck2Square } from 'react-icons/bs'
 import { useState } from 'react'
+import { ethers } from 'ethers'
+import { create as ipfsHttpClient } from 'ipfs-http-client'
+import { useRouter } from 'next/router'
+import Web3Modal from 'web3modal'
+
+const client = ipfsHttpClient('https://ipfs.infura.io:5001/api/v0')
+
+import {
+  nftaddress, nftmarketaddress
+} from '../../config'
+
+import NFT from '../../artifacts/contracts/NFT.sol/NFT.json'
+import Market from '../../artifacts/contracts/NFTMarket.sol/NFTMarket.json'
 
 export default function Create() {
+  const router = useRouter()
+
   const [clipFileName, setClipFileName] = useState('')
   const [thumbnailFileName, setThumbnailFileName] = useState('')
 
@@ -13,6 +29,12 @@ export default function Create() {
   const [tag, setTag] = useState('Competitive')
   const [price, setPrice] = useState('')
 
+  const [isUploadClipDisabled, setIsUploadClipDisabled] = useState(false)
+  const [isUploadThumbnailDisabled, setIsUploadThumbnailDisabled] = useState(false)
+
+  const [clipFileUrl, setClipFileUrl] = useState(null)
+  const [thumbnailFileUrl, setThumbnailFileUrl] = useState(null)
+
   function openClipInput() {
     var inputEl = document.getElementById('clip-upload')
     inputEl.click()
@@ -23,22 +45,90 @@ export default function Create() {
     inputEl.click()
   }
 
-  function onClipUpload() {
-    var inputEl = document.getElementById('clip-upload')
-    setClipFileName(inputEl.files.item(0).name)
+  async function onClipUpload(e) {
+    setIsUploadClipDisabled(true)
+
+    const file = e.target.files[0]
+    setClipFileName(file.name)
+
+    try {
+      const added = await client.add(
+        file,
+        {
+          progress: (prog) => console.log(`received: ${prog}`)
+        }
+      )
+      const url = `https://ipfs.infura.io/ipfs/${added.path}`
+      setClipFileUrl(url)
+    } catch (error) {
+      console.log('Error uploading clip file: ', error)
+    }
   }
 
-  function onThumbnailUpload() {
-    var inputEl = document.getElementById('thumbnail-upload')
-    setThumbnailFileName(inputEl.files.item(0).name)
+  async function onThumbnailUpload(e) {
+    setIsUploadThumbnailDisabled(true)
+
+    const file = e.target.files[0]
+    setThumbnailFileName(file.name)
+
+    try {
+      const added = await client.add(
+        file,
+        {
+          progress: (prog) => console.log(`received: ${prog}`)
+        }
+      )
+      const url = `https://ipfs.infura.io/ipfs/${added.path}`
+      setThumbnailFileUrl(url)
+    } catch (error) {
+      console.log('Error uploading thumbnail file: ', error)
+    }
+  }
+
+  async function createMarketItem() {
+    if (!name || !desc || !game || !tag || !price || !clipFileUrl || !thumbnailFileUrl) return
+
+    const data = JSON.stringify({
+      name, desc, game, tag, thumbnail: thumbnailFileUrl, clip: clipFileUrl
+    })
+
+    try {
+      const added = await client.add(data)
+      const url = `https://ipfs.infura.io/ipfs/${added.path}`
+      createSale(url)
+    } catch (error) {
+      console.log('Error uploading data to IPFS: ', error)
+    }
+  }
+
+  async function createSale(url) {
+    const web3Modal = new Web3Modal()
+    const connection = await web3Modal.connect()
+    const provider = new ethers.providers.Web3Provider(connection)
+    const signer = provider.getSigner()
+
+    /* next, create the item */
+    let contract = new ethers.Contract(nftaddress, NFT.abi, signer)
+    let transaction = await contract.createToken(url)
+    let tx = await transaction.wait()
+    let event = tx.events[0]
+    let value = event.args[2]
+    let tokenId = value.toNumber()
+
+    const thePrice = ethers.utils.parseUnits(price, 'ether')
+
+    /* then list the item for sale on the marketplace */
+    contract = new ethers.Contract(nftmarketaddress, Market.abi, signer)
+    let listingPrice = await contract.getListingPrice()
+    listingPrice = listingPrice.toString()
+
+    transaction = await contract.createMarketItem(nftaddress, tokenId, thePrice, { value: listingPrice })
+    await transaction.wait()
+    router.push('/')
   }
 
   function onSubmitNFT() {
-    console.log(name)
-    console.log(desc)
-    console.log(game)
-    console.log(tag)
-    console.log(price)
+    createMarketItem()
   }
 
   return (
@@ -56,16 +146,16 @@ export default function Create() {
             <div>
               <h3 className='text-xl text-left my-3 font-semibold text-primary'>Upload clip</h3>
               <div className='w-80 h-80 flex border-2 border-primary cursor-pointer' onClick={openClipInput}>
-                <input type='file' id='clip-upload' className='w-full h-full hidden' onChange={onClipUpload} />
-                <FiUpload className='text-7xl mx-auto my-auto text-primary' />
+                <input type='file' id='clip-upload' className='w-full h-full hidden' onChange={onClipUpload} disabled={isUploadClipDisabled} />
+                {isUploadClipDisabled ? <BsCheck2Square className='text-7xl mx-auto my-auto text-primary' /> : <FiUpload className='text-7xl mx-auto my-auto text-primary' />}
               </div>
               <p className='my-2 text-primary text-sm'>{clipFileName}</p>
             </div>
             <div>
               <h3 className='text-xl text-left my-3 font-semibold text-primary'>Thumbnail</h3>
               <div className='w-80 h-80 flex border-2 border-primary cursor-pointer' onClick={openThumbnailInput}>
-                <input type='file' id='thumbnail-upload' className='w-full h-full hidden' onChange={onThumbnailUpload} />
-                <FiUpload className='text-7xl mx-auto my-auto text-primary' />
+                <input type='file' id='thumbnail-upload' className='w-full h-full hidden' onChange={onThumbnailUpload} disabled={isUploadThumbnailDisabled} />
+                {isUploadThumbnailDisabled ? <BsCheck2Square className='text-7xl mx-auto my-auto text-primary' /> : <FiUpload className='text-7xl mx-auto my-auto text-primary' />}
               </div>
               <p className='my-2 text-primary text-sm'>{thumbnailFileName}</p>
             </div>