Skip to content

Commit

Permalink
fix showing names on mystery mint
Browse files Browse the repository at this point in the history
  • Loading branch information
@divine-comedian
divine-comedian committed Sep 23, 2023
1 parent 4a059f9 commit d06d636
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 49 deletions.
35 changes: 12 additions & 23 deletions components/NFTCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ interface NFTCardProps {
description: string,
image: string,
price: bigint,
setIsMysteryMint: Function,
isMysteryMint: boolean
emptyCart: Function
}

export const NFTCard: React.FC<NFTCardProps> = ({
Expand All @@ -32,10 +35,13 @@ export const NFTCard: React.FC<NFTCardProps> = ({
description,
image,
price,
setIsMysteryMint,
isMysteryMint,
emptyCart
}) => {
// const [ipfsData, setIpfsData] = useState({}) as any
const [ipfsImage, setIpfsImage] = useState() as any
const [tokenPrice, setTokenPrice] = useState('0')
// const [tokenPrice, setTokenPrice] = useState('0')
const [nftData, setNftData] = useState<nftData>({} as nftData)
const [isInCart, setIsInCart] = useState<boolean>(false)
const [showFadeText, setShowFadeText] = useState(false)
Expand Down Expand Up @@ -66,27 +72,6 @@ export const NFTCard: React.FC<NFTCardProps> = ({
enabled: false,
})


// const getSupplyInfo = useContractReads({
// contracts: [
// {
// address: `0x${contractProps.address}`,
// abi: MintingContractJSON.abi,
// functionName: 'maxTokenSupply',
// args: [tokenId],
// chainId: contractProps.chainId,
// },
// {
// address: `0x${contractProps.address}`,
// abi: MintingContractJSON.abi,
// functionName: 'totalSupply',
// args: [tokenId],
// chainId: contractProps.chainId,
// },
// ],
// enabled: false,
// })

useEffect(() => {
setNftData({ name, description, image, tokenId, tokenPrice: price })
}, [name, description, image, price])
Expand Down Expand Up @@ -125,6 +110,10 @@ export const NFTCard: React.FC<NFTCardProps> = ({
const {tokenId: id, name: name, tokenPrice: price } = nftData
setIsInCart((prevIsInCart) => !prevIsInCart)
setRandomMsg(randomMessage())
if (isMysteryMint) {
emptyCart()
setIsMysteryMint(false);
}

if (!isInCart) {
console.log('adding to cart', id, name, price)
Expand Down Expand Up @@ -222,7 +211,7 @@ export const NFTCard: React.FC<NFTCardProps> = ({
</div>
{toggleText ? <p className="font-300 bg-gray-200/30 p-2 rounded-lg">{description}</p> : null}
<p>
{parseFloat(formatEther(BigInt(tokenPrice)))} {tokenSymbol}
{parseFloat(formatEther(BigInt(price)))} {tokenSymbol}
</p>
{remainingSupply !== 'SOLD OUT' && (
<div className="pb-3">
Expand Down
5 changes: 3 additions & 2 deletions components/cartModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@ interface cartItems {
paymentTokenSymbol: string
userBalance: bigint
emptyCart: Function
isMysteryMint: boolean;
}

export const CartModal = ({ userBalance, itemsArray, itemSum, isMintModal, paymentTokenSymbol, emptyCart }: cartItems) => {
export const CartModal = ({ userBalance, itemsArray, itemSum, isMintModal, paymentTokenSymbol, emptyCart, isMysteryMint }: cartItems) => {
const [tokenSymbol, setTokenSymbol] = useState('ETH')
const cartItems = Array.from(itemsArray).map((item) => (
console.log('token name on cart modal', item.name),
<li key={item.tokenId}>
{' '}
{item.name}: {formatEther(item.tokenPrice)} {tokenSymbol}
{ isMysteryMint ? '????' : item.name}: {formatEther(item.tokenPrice)} {tokenSymbol}
</li>
))

Expand Down
45 changes: 21 additions & 24 deletions pages/store.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useCallback } from 'react'
import { NFTCard } from '../components/NFTCard'
import Navbar from '../components/navbar'
import { selectContractAddress, getTokenInfo,MintingContractProps, getNativeBalance, getPaymentTokenBalance } from '../utils/ContractHelper'
import { selectContractAddress,MintingContractProps, getNativeBalance, getPaymentTokenBalance } from '../utils/ContractHelper'
import { useState, useEffect } from 'react'
import { CartModal } from '../components/cartModal'
import { WrongNetwork } from '../components/wrongNetwork'
Expand All @@ -16,12 +16,6 @@ import { formatUnits } from 'viem'
import { ConnectButton } from '@rainbow-me/rainbowkit'
import { getIpfsData } from '../utils/AxiosHelper'

// interface Item {
// tokenID: number
// tokenName: string
// tokenPrice: string
// }

export interface nftData {
name: string
description?: string
Expand All @@ -36,6 +30,7 @@ const Store = () => {
const [showMintModal, setShowMintModal] = React.useState(false)
const [mintingCart, setMintingCart] = useState<nftData[]>([])
const [uniqueTokens, setUniqueTokens] = useState(0)
const [isMysteryMint, setIsMysteryMint] = useState(false)
const [nativeMinting, setNativeMinting] = useState<boolean>(false)
const [nftData, setNftData] = useState<nftData[]>()
const [renderWrongNetwork, setRenderWrongNetwork] = useState(false)
Expand Down Expand Up @@ -124,12 +119,13 @@ const Store = () => {
const tokensToMint = tokensNotOwned.slice(0, amount)
console.log('tokens to mint', tokensToMint)
async function addBatchToCart () {
setIsMysteryMint(true)
emptyCart()
nftData &&
tokensToMint.forEach((token: number) => {
addToCart({
tokenId: token,
name: '????',
name: nftData[token-1].name,
tokenPrice: nftData[token-1].tokenPrice,
})
})
Expand Down Expand Up @@ -188,6 +184,7 @@ const Store = () => {
useEffect(() => {
if (currentNetwork !== undefined) {
setNetwork(currentNetwork)
emptyCart()
}
}, [currentNetwork])

Expand All @@ -206,6 +203,17 @@ const Store = () => {
}
}, [isRightNetwork, currentNetwork])

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 (isPaymentTokenAddressSuccess && isNativeMinting === false) {
Expand Down Expand Up @@ -238,23 +246,8 @@ const Store = () => {
}
}, [isNativeMinting, account, contractProps])

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) {
// }
// }
// , [uniqueTokens, contractProps])

const cartTotal = mintingCart.reduce((acc, item) => acc +(BigInt(item.tokenPrice)), BigInt(0))
return (
Expand Down Expand Up @@ -359,6 +352,7 @@ const Store = () => {
paymentTokenSymbol={paymentTokenSymbol}
userBalance={userBalance}
emptyCart={emptyCart}
isMysteryMint={isMysteryMint}
/>
<div className="space-y-4 mt-3 space-x-1">
<button
Expand Down Expand Up @@ -398,6 +392,9 @@ const Store = () => {
description={nftData[i]?.description as string}
image={nftData[i]?.image as string}
price={nftData[i].tokenPrice}
setIsMysteryMint={setIsMysteryMint}
isMysteryMint={isMysteryMint}
emptyCart={emptyCart}
/>
))}
</div>
Expand Down

1 comment on commit d06d636

@vercel
Copy link

@vercel vercel bot commented on d06d636 Sep 23, 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.