Skip to content

Commit

Permalink
fix hydration error
Browse files Browse the repository at this point in the history
  • Loading branch information
@divine-comedian
divine-comedian committed Sep 16, 2023
1 parent af91f36 commit fab0c46
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 29 deletions.
15 changes: 10 additions & 5 deletions components/NFTCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export const NFTCard: React.FC<NFTCardProps> = ({
// const [ipfsData, setIpfsData] = useState({}) as any
const [ipfsImage, setIpfsImage] = useState() as any
const [tokenPrice, setTokenPrice] = useState('0')
const [tokenURI, setTokenURI] = useState('')
const [isInCart, setIsInCart] = useState<boolean>(false)
const [showFadeText, setShowFadeText] = useState(false)
const [randomMsg, setRandomMsg] = useState('')
Expand Down Expand Up @@ -160,22 +159,28 @@ export const NFTCard: React.FC<NFTCardProps> = ({

useEffect(() => {
if (tokenInfo) {
const [newTokenPriceHex, newTokenURI] = tokenInfo as [bigint, string]
const [newTokenPriceHex,] = tokenInfo as [bigint, string]
setTokenPrice(newTokenPriceHex.toString())
setTokenURI(newTokenURI)
} else if (isTokenInfoError) {
console.log(tokenInfoError)
}
}, [tokenInfo, isTokenInfoError])

// if (image && name && description && !ipfsImage) {
// getIpfsImage(image).then((res) => {
// setIpfsImage(res)
// }
// )
// }

useEffect(() => {
if (image) {
if (image && !ipfsImage) {
getIpfsImage(image).then((res) => {
setIpfsImage(res)
}
)
}
},[image])
},[image, ipfsImage, name, description])

useEffect(() => {
setTokenSymbol(paymentTokenSymbol)
Expand Down
2 changes: 1 addition & 1 deletion components/mint.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ export const MintModal = ({
}

return (
<div className=" bg-gradient-to-r overflow-y-auto from-cyan-400 to-blue-400 dark:from-blue-600 dark:to-cyan-600 max-h-[400px] max-w-[500px] md:min-w-[400px] xs:w-[200px] p-4 m-4 rounded-lg">
<div className=" bg-gradient-to-r overflow-y-auto from-cyan-400 to-blue-400 dark:from-blue-600 dark:to-cyan-600 max-h-[600px] max-w-[500px] md:min-w-[400px] xs:w-[200px] p-4 m-4 rounded-lg">
<div className="float-right">
<button
className="font-bold text-lg py-0.5 px-2 hover:rounded-full hover:bg-gray-300/80"
Expand Down
67 changes: 44 additions & 23 deletions pages/store.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ const Store = () => {
const [showMintModal, setShowMintModal] = React.useState(false)
const [mintingCart, setMintingCart] = useState<Item[]>([])
const [uniqueTokens, setUniqueTokens] = useState(0)
const [nativeMinting, setNativeMinting] = useState<boolean>(false)
const [nftData, setNftData] = useState<nftData[]>()
const [renderWrongNetwork, setRenderWrongNetwork] = useState(false)
const [correctNetwork, setCorrectNetwork] = useState<string[] | null>(null)
// const [nftCards, dispatch] = useReducer(nftCardsReducer, [])
const [userBalance, setUserBalance] = useState<bigint>(0n)
Expand Down Expand Up @@ -141,19 +143,23 @@ const Store = () => {

async function fetchNFTCardData(totalTokens: number) {
try {
const allNftData: nftData[] = [];
for(let i = 1; i <= totalTokens; i++) {
getIpfsData(i, contractProps).then((response) => {
allNftData.push(response);
0 })
}
const promises: Promise<nftData>[] = [];

for (let i = 1; i <= totalTokens; i++) {
const promise = getIpfsData(i, contractProps);
promises.push(promise);
}

const allNftData = await Promise.all(promises);
return allNftData;

} catch (error) {
console.log(error);
return [];
}
}


const isMintModal = (state: boolean) => {
setShowMintModal(state)
}
Expand All @@ -172,6 +178,12 @@ const Store = () => {
, [])

// welcome to the use effect jungle
useEffect(() => {
isNativeMintingSuccess &&
setNativeMinting(isNativeMinting as boolean)
}, [isNativeMinting])


useEffect(() => {
if (currentNetwork !== undefined) {
setNetwork(currentNetwork)
Expand All @@ -185,6 +197,15 @@ const Store = () => {
setContractProps(selectContractAddress(currentNetwork))
}, [currentNetwork])

useEffect(() => {
if (isRightNetwork === false && currentNetwork !== undefined && !renderWrongNetwork ) {
setRenderWrongNetwork(true)
} else {
setRenderWrongNetwork(false)
}
}, [isRightNetwork, currentNetwork])


useEffect(() => {
if (isPaymentTokenAddressSuccess && isNativeMinting === false) {
fetchToken({
Expand Down Expand Up @@ -219,20 +240,20 @@ const Store = () => {
useEffect(() => {
if (newUniqueTokens !== undefined) {
setUniqueTokens(Number(newUniqueTokens))
fetchNFTCardData(Number(newUniqueTokens)).then((response) => {
setNftData(response)
}
).catch((error) => console.log(error))
} else if (isUniqueTokensError) {
console.log(uniqueTokensError)
}
}, [newUniqueTokens, contractProps])

useEffect(() => {
if (uniqueTokens !== 0 || undefined) {
fetchNFTCardData(uniqueTokens).then((response) => {
setNftData(response)
}
).catch((error) => console.log(error))
}
}
, [uniqueTokens, contractProps])
// useEffect(() => {
// if (uniqueTokens !== 0 || undefined) {
// }
// }
// , [uniqueTokens, contractProps])

const cartTotal = mintingCart.reduce((acc, item) => acc +(BigInt(item.tokenPrice)), BigInt(0))
return (
Expand All @@ -252,7 +273,7 @@ const Store = () => {
{showMintModal ? (
<div className="fixed z-30 inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div className="rise-up mb-40">
{nftData &&
{nftData &&
<MintModal
itemSum={cartTotal}
itemsArray={mintingCart}
Expand All @@ -276,7 +297,7 @@ const Store = () => {
<p>Mint any Mitchs you like on Gnosis Chain, Optimism and Polygon!</p>
<p>
You are currently connected to <b>{contractProps.name}</b>, so you'll need to use{' '}
{isNativeMinting && isNativeMintingSuccess ? (
{nativeMinting ? (
<b>ETH</b>
) : (
<b>
Expand Down Expand Up @@ -329,7 +350,7 @@ const Store = () => {
</div>
{/* <div className="flex lg:max-w-[50%] xl:max-w-[66%] justify-between my-3 space-x-1">
</div> */}
<div className="lg:fixed lg:float-right z-20 mt-2 lg:top-20 right-10 mr-5 xl:max-w-[26%]">
<div className="lg:fixed lg:float-right z-20 mt-2 lg:top-20 right-10 mr-5 md:max-w-[40%] xl:max-w-[26%]">
<CartModal
itemsArray={mintingCart}
itemSum={cartTotal}
Expand All @@ -341,25 +362,25 @@ const Store = () => {
<div className="space-y-4 mt-3 space-x-1">
<button
onClick={() => autoMint(5)}
className="font-bold text-xl text-slate-300 border-4 px-6 border-solid bg-gradient-to-br border-violet-700 from-violet-500 to-purple-600 rounded-2xl p-3"
className="font-bold text-xl text-white border-4 px-6 border-solid bg-gradient-to-br border-violet-700 from-violet-500 to-purple-600 rounded-2xl p-3"
>
Mystery 5 pack 🤔
</button>
<button
onClick={() => autoMint(10)}
className="font-bold text-xl text-slate-300 border-4 px-6 border-solid bg-gradient-to-br border-violet-700 from-violet-500 to-purple-600 rounded-2xl p-3">
className="font-bold text-xl text-white border-4 px-6 border-solid bg-gradient-to-br border-violet-700 from-violet-500 to-purple-600 rounded-2xl p-3">
Mystery 10 pack ✨
</button>
<button
onClick={() => autoMint(uniqueTokens)}
className="font-bold text-xl text-slate-300 border-4 px-6 border-solid bg-gradient-to-br border-violet-700 from-violet-500 to-purple-600 rounded-2xl p-3">
className="font-bold text-xl text-white border-4 px-6 border-solid bg-gradient-to-br border-violet-700 from-violet-500 to-purple-600 rounded-2xl p-3">
GIMME 'EM ALL 🤩
</button>
</div>
</div>
</>
)}
{nftData ? (
{nftData && nftData.length !== 0 && isAccountConnected ? (
<div className="flex-initial grid xl:grid-cols-2 grid-cols-1 gap-2 gap-x-6 sm:max-w-[50%] xl:max-w-[66%] ">
{Array.from({ length: uniqueTokens }).map((_, i) => (
<NFTCard
Expand All @@ -381,7 +402,7 @@ const Store = () => {
)}
</div>
</div>
{!isRightNetwork && currentNetwork !== undefined && (
{renderWrongNetwork && (
<div className="fixed z-30 inset-0 flex items-center justify-center bg-black bg-opacity-40">
<div className="rise-up">
<WrongNetwork isRightNetwork={correctNetwork} />
Expand Down

1 comment on commit fab0c46

@vercel
Copy link

@vercel vercel bot commented on fab0c46 Sep 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mint-mitch – ./

mint-mitch.vercel.app
mint-mitch-divine-comedian.vercel.app
mint-mitch-git-main-divine-comedian.vercel.app
mintmitch.xyz

Please sign in to comment.