cleverprogrammers / opensea-blockchain-youtube

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).

opensea-blockchain-youtube's Issues

getting this error please help!!

import { useWeb3 } from '@3rdweb/hooks';
import { useRouter } from 'next/router';
import React, { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { client } from '/Users/barivry/Desktop/Nahum web demo/with-tailwindcss-app/lib/sanityClient.js'
import { ThirdwebSDK } from '@3rdweb/sdk'

const style = {
bannerImageContainer: h-[20vh] w-screen overflow-hidden flex justify-center items-center,
bannerImage: w-full object-cover,
infoContainer: w-screen px-4,
midRow: w-full flex justify-center text-white,
endRow: w-full flex justify-end text-white,
profileImg: w-40 h-40 object-cover rounded-full border-2 border-[#202225] mt-[-4rem],
socialIconsContainer: flex text-3xl mb-[-2rem],
socialIconsWrapper: w-44,
socialIconsContent: flex container justify-between text-[1.4rem] border-2 rounded-lg px-2,
socialIcon: my-2,
divider: border-r-2,
title: text-5xl font-bold mb-4,
createdBy: text-lg mb-4,
statsContainer: w-[44vw] flex justify-between py-4 border border-[#151b22] rounded-xl mb-4,
collectionStat: w-1/4,
statValue: text-3xl font-bold w-full flex items-center justify-center,
ethLogo: h-6 mr-2,
statName: text-lg w-full text-center mt-1,
description: text-[#8a939b] text-xl w-max-1/4 flex-wrap mt-4,
}

const Collection = () => {
const router = useRouter()
const { provider } = useWeb3()
const { collectionId } = router.query
const [collection, setCollection] = useState({})
const [nfts, setNfts] = useState([])
const [isting, setListings] = useState([])

const nftModule = useMemo(() => {
    if (!provider) return
    const sdk = new ThirdwebSDK(
        provider.getSigner(),
        'https://eth-rinkeby.alchemyapi.io/v2/P7kGwqNqVKea2mUDUCeaKaXKY9xgao91c'
    )
    return sdk.getNFTModule(collectionId)
}, [provider])

useEffect(() => {
    if (!nftModule) return
        ; (async () => {
            const nfts = await nftModule.getAll()
            setNfts(nfts)
        })()

}, [nftModule])

const marketPlaceModule = useMemo(() => {
    if (!provider) return
    const sdk = new ThirdwebSDK(
        provider.getSigner(),
        'https://eth-rinkeby.alchemyapi.io/v2/P7kGwqNqVKea2mUDUCeaKaXKY9xgao91'
    )
    return sdk.getMarketplaceModule(
        '0x5043A25B4D52e830F03783509B3dEb524023Cb0e'
    )
}, [provider])

useEffect(() => {
    if (!marketPlaceModule) return
        ; (async () => {
            setListings(await marketPlaceModule.getAllListings())
        })()
}, [marketPlaceModule])

const fethCollectionData = async (
    SanityClient = client

) => {
    const query = `*[_type == "marketItems"&&contractAddress == "0x5043A25B4D52e830F03783509B3dEb524023Cb0e"]{
    "imageUrl": profileImage.asset->url,
    "bannerImageUrl": bannerImage.asset->url,
    volumeTraded,
    createdBy,
    contractAddress,
    "creator": createdBy->userName,
    title, floorPrice,
    "allOwners": owners[]->,
    description
  }`
    const collectionData = await SanityClient.fetch(query)
    console.log(collectionData, '@@@@')
    await setCollection(collectionData[0])
}

useEffect(() => {
    fethCollectionData()
}, [collectionId])




return (
    <Link href="/">
        <h2>{router.query.collectionId}</h2>
    </Link>
)

}

export default Collection;

npm ERR! cb.apply is not a function

Tried npx create-next-app --example with-tailwindcss with-tailwindcss-app and get this error: npm ERR! cb.apply is not a function

Used the latest node v17.6.0.

call revert exception [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (method="nextTokenId()", data="0x", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.7.0)

I have created the whole app and followed every steps but I can't make purchase of the listed NFT's. When I click buy now it just gives the purchase successful toast and skips the payment part entirely, can anyone help me out please ?

The app is stucked at home screen "Connect to wallet"

I cloned this repo, ran the npm install, built command and started the project. The app started successfully at local host but is is stucked at the home screen saying "Connect to wallet". I have set a private blockchain using Ganache and conencted my meta mask to it but it is still at that page only
Here's my pic of what I am trying to say:

Unhandled Runtime; TypeError: Cannot read properties of undefined (reading 'id')

0

On my Localhost:3000, when I am running the code, I am getting an error saying:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'id')
For the Source part, it is showing a certain section of my code, which is:-

    ;(async () => {
  20 |     setSelectedMarketNft(
> 21 |       listings.find((marketNft) => marketNft.asset?.id === selectedNft.id)
     |                                                                       ^
  22 |     )
  23 |   })()
  24 | }, [selectedNft, listings, isListed])

There are certain questions of the similar type on stackOverflow, but I am unable to find any answers from any of them. I am making a web3 project, where I am using next.js, sanity and thirweb.

The source code that contains this is:-

 const MakeOffer = ({ isListed, selectedNft, listings, marketPlaceModule }) => {
  const [selectedMarketNft, setSelectedMarketNft] = useState()
  const [enableButton, setEnableButton] = useState(false)

  useEffect(() => {
    if (!listings || isListed === 'false') return
    ;(async () => {
      setSelectedMarketNft(
        listings.find((marketNft) => marketNft.asset?.id === selectedNft.id)
      )
    })()
  }, [selectedNft, listings, isListed])

  useEffect(() => {
    if (!selectedMarketNft || !selectedNft) return

    setEnableButton(true)
  }, [selectedMarketNft, selectedNft])

This error is happening in the purchase.js file

Css is not loading

After establishing coneection with metamask, Css stops loading

Error: missing revert data in call exception; Transaction reverted without a reason string

Error: missing revert data in call exception; Transaction reverted without a reason string [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (error={"code":-32000,"message":"execution reverted"}, data="0x", code=CALL_EXCEPTION, version=providers/5.6.4)

How to solve it??

Error: cannot estimate gas; transaction may fail or may require manual gas limit

Error: cannot estimate gas; transaction may fail or may require manual gas limit [ See: https://links.ethers.org/v5-errors-UNPREDICTABLE_GAS_LIMIT ] (error={"code":-32000,"message":"execution reverted"}, method="estimateGas", transaction={"from":"0x92c7B98d9F1f5267974445f90FBB761605C51DbE","to":"0x2425Cc0699DA80a604650f1cd2EcFfBf67660B97","value":{"type":"BigNumber","hex":"0x2386f26fc10000"},"data":"0xd6febde800000000000000000000000000000000000000000000000000000000000000040000000000000000000000000000000000000000000000000000000000000001","accessList":null}, code=UNPREDICTABLE_GAS_LIMIT, version=providers/5.6.4)

getting error on setIsListed(true)

I checked multiple times that I missed something from previous lines but didn't able to solve it.

Getting error : "Uncaught (in promise) Error: call revert exception "

Hi, i am getting an error : "Uncaught (in promise) Error: call revert exception [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (method="nextTokenId()", data="0x", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.7.0)
at Logger.makeError (index.js?dd68:224:1)
at Logger.throwError (index.js?dd68:233:1)
at Interface.decodeFunctionResult (interface.js?1df7:345:1)
at Contract.eval (index.js?b70c:293:1)
at Generator.next ()"
Someone know how to fix that?