reverse nft array & format

divine-comedian · divine-comedian · commit 15676bdedb64 · 2023-09-23T11:26:17.000-06:00
diff --git a/components/NFTCard.tsx b/components/NFTCard.tsx
@@ -7,19 +7,18 @@ import { formatEther } from 'viem'
 import { getIpfsImage } from '../utils/AxiosHelper'
 import { nftData } from '../pages/store'
 
-
 interface NFTCardProps {
   tokenId: number
   addToCart: Function
   removeFromCart: Function
   contractProps: MintingContractProps
   paymentTokenSymbol: string
   owned: boolean
-  name: string,
-  description: string,
-  image: string,
-  price: bigint,
-  setIsMysteryMint: Function,
+  name: string
+  description: string
+  image: string
+  price: bigint
+  setIsMysteryMint: Function
   isMysteryMint: boolean
   emptyCart: Function
 }
@@ -37,7 +36,7 @@ export const NFTCard: React.FC<NFTCardProps> = ({
   price,
   setIsMysteryMint,
   isMysteryMint,
-  emptyCart
+  emptyCart,
 }) => {
   // const [ipfsData, setIpfsData] = useState({}) as any
   const [ipfsImage, setIpfsImage] = useState() as any
@@ -75,7 +74,6 @@ export const NFTCard: React.FC<NFTCardProps> = ({
   useEffect(() => {
     setNftData({ name, description, image, tokenId, tokenPrice: price })
   }, [name, description, image, price])
-  
 
   useEffect(() => {
     setTimeout(() => {
@@ -107,20 +105,20 @@ export const NFTCard: React.FC<NFTCardProps> = ({
   }
 
   const handleCart = () => {
-    const {tokenId: id, name: name, tokenPrice: price } = nftData
+    const { tokenId: id, name: name, tokenPrice: price } = nftData
     setIsInCart((prevIsInCart) => !prevIsInCart)
     setRandomMsg(randomMessage())
     if (isMysteryMint) {
       emptyCart()
-      setIsMysteryMint(false);
+      setIsMysteryMint(false)
     }
 
     if (!isInCart) {
       console.log('adding to cart', id, name, price)
       addToCart({ tokenId: id, name, tokenPrice: price })
       showFadeInOutText()
     } else {
-      removeFromCart({ tokenId: id, name, tokenPrice: price})
+      removeFromCart({ tokenId: id, name, tokenPrice: price })
     }
   }
 
@@ -173,10 +171,9 @@ export const NFTCard: React.FC<NFTCardProps> = ({
     if (image && !ipfsImage) {
       getIpfsImage(image).then((res) => {
         setIpfsImage(res)
-      }
-      )
+      })
     }
-  },[image, ipfsImage, name, description])
+  }, [image, ipfsImage, name, description])
 
   useEffect(() => {
     setTokenSymbol(paymentTokenSymbol)
diff --git a/components/cartModal.tsx b/components/cartModal.tsx
@@ -10,18 +10,30 @@ interface cartItems {
   paymentTokenSymbol: string
   userBalance: bigint
   emptyCart: Function
-  isMysteryMint: boolean;
+  isMysteryMint: boolean
 }
 
-export const CartModal = ({ userBalance, itemsArray, itemSum, isMintModal, paymentTokenSymbol, emptyCart, isMysteryMint }: 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}>
-      {' '}
-      { isMysteryMint ? '????' : item.name}: {formatEther(item.tokenPrice)} {tokenSymbol}
-    </li>
-  ))
+  const cartItems = Array.from(itemsArray).map(
+    (item) => (
+      console.log('token name on cart modal', item.name),
+      (
+        <li key={item.tokenId}>
+          {' '}
+          {isMysteryMint ? '????' : item.name}: {formatEther(item.tokenPrice)} {tokenSymbol}
+        </li>
+      )
+    ),
+  )
 
   useEffect(() => {
     setTokenSymbol(paymentTokenSymbol)
@@ -32,19 +44,18 @@ export const CartModal = ({ userBalance, itemsArray, itemSum, isMintModal, payme
       <div className="box-content border-solid border-2 lg:w-96  bg-orange-300 dark:bg-orange-800 rounded-lg border-grey-600 ">
         <div className="p-4 space-y-1">
           <div>
-          <h3 className=" inline text-lg font-semibold">Current Mitch Cart</h3>
-        <button
-            className={
-              itemsArray.length === 0
-                ? 'inline float-right text-xs p-1 bg-gray-200 text-gray-400 cursor-default rounded-lg'
-                : 'inline float-right text-xs p-1 bg-orange-400 dark:bg-orange-700 rounded-lg active:scale-90 transition-transform duration-100'
-            }
-            disabled={itemsArray.length === 0}
-            onClick={() => emptyCart()}
-          >
-            Empty Cart
-          </button>
-
+            <h3 className=" inline text-lg font-semibold">Current Mitch Cart</h3>
+            <button
+              className={
+                itemsArray.length === 0
+                  ? 'inline float-right text-xs p-1 bg-gray-200 text-gray-400 cursor-default rounded-lg'
+                  : 'inline float-right text-xs p-1 bg-orange-400 dark:bg-orange-700 rounded-lg active:scale-90 transition-transform duration-100'
+              }
+              disabled={itemsArray.length === 0}
+              onClick={() => emptyCart()}
+            >
+              Empty Cart
+            </button>
           </div>
           <hr className="border-t border-gray-400 dark:border-gray-300 my-4" />
 
diff --git a/components/mint.tsx b/components/mint.tsx
@@ -325,8 +325,8 @@ export const MintModal = ({
           <div className="space-y-2 font-medium dark:text-white">
             <p>Amazing! Thank you so much for minting some mitch and supporting me in my goals!</p>
             <>
-            <h3 className="text-xl font-bold">Check out your Mitch's here:</h3>
-            <ul>{tokenLinks}</ul>
+              <h3 className="text-xl font-bold">Check out your Mitch's here:</h3>
+              <ul>{tokenLinks}</ul>
             </>
 
             <p>
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -42,91 +42,90 @@ IProps) => {
       abi: MintingContractJSON.abi,
       functionName: 'nativeMintEnabled',
       args: [],
-      chainId: chainId
-    }).then((response) => {
-      setIsNativeMinting(response as boolean)
-    }).catch((error) => {
-      console.log('error', error, 'chainID', chainId)
-    }
-    )
+      chainId: chainId,
+    })
+      .then((response) => {
+        setIsNativeMinting(response as boolean)
+      })
+      .catch((error) => {
+        console.log('error', error, 'chainID', chainId)
+      })
   }
-    
+
   const getMitchTokenBalance = async (mitchTokenAddress: string) => {
-    if (account.address !== undefined ) {
+    if (account.address !== undefined) {
       fetchBalance({
         address: `0x${account.address?.substring(2)}`,
         token: `0x${mitchTokenAddress}`,
         chainId: contractProps?.chainId,
-      }).then((response) => {
-        if (response !== undefined) {
-          const formattedBalance = parseFloat(formatEther(response.value))
-          setRewardTokenBalance(formattedBalance)
-        }
-      }).catch((error) => {
-        console.log('error', error)
-      }
-      )
+      })
+        .then((response) => {
+          if (response !== undefined) {
+            const formattedBalance = parseFloat(formatEther(response.value))
+            setRewardTokenBalance(formattedBalance)
+          }
+        })
+        .catch((error) => {
+          console.log('error', error)
+        })
     }
   }
 
   const getContractBalance = async (address: string, chainId: number) => {
-    isNativeMinting ? 
-        fetchBalance({
+    isNativeMinting
+      ? fetchBalance({
           address: `0x${address}`,
+        }).then((response) => {
+          setBalance(parseFloat(formatEther(response.value)))
         })
-        .then((response) => {
-            setBalance(parseFloat(formatEther(response.value)))
-        })
-        : 
-        readContract({
-        address: `0x${address}`,
-        abi: MintingContractJSON.abi,
-        functionName: 'paymentToken',
-        args: [],
-        chainId: chainId,
-      }).then((response) => {
-        fetchBalance({
+      : readContract({
           address: `0x${address}`,
-          token: `0x${(response as string).substring(2) }`,
+          abi: MintingContractJSON.abi,
+          functionName: 'paymentToken',
+          args: [],
           chainId: chainId,
-        }).then((response) => {
-          if (response !== undefined) {
-            const formattedBalance = parseFloat(formatEther(response.value))
-            setBalance(formattedBalance)
-          }
         })
-      }).catch((error) => {
-        console.log('error', error)
-        }
-        )
+          .then((response) => {
+            fetchBalance({
+              address: `0x${address}`,
+              token: `0x${(response as string).substring(2)}`,
+              chainId: chainId,
+            }).then((response) => {
+              if (response !== undefined) {
+                const formattedBalance = parseFloat(formatEther(response.value))
+                setBalance(formattedBalance)
+              }
+            })
+          })
+          .catch((error) => {
+            console.log('error', error)
+          })
   }
   useEffect(() => {
     if (isRightNetwork && contractProps?.address && contractProps?.chainId && contractProps?.mitchTokenAddress) {
       getContractBalance(contractProps.address, contractProps.chainId)
       getMitchTokenBalance(contractProps.mitchTokenAddress)
     }
   }, [contractProps, isNativeMinting, updateBalance, isRightNetwork])
- 
+
   useEffect(() => {
     if (network !== undefined) {
       setContractProps(selectContractAddress(network))
     }
   }, [network])
-  
+
   useEffect(() => {
     if (contractProps?.address && contractProps?.chainId) {
       getNativeMintEnabled(contractProps?.address, contractProps?.chainId)
     }
-  }
-  , [contractProps])
+  }, [contractProps])
 
   useEffect(() => {
     const maxEthNeeded = 32
     const percentComplete = ((2.25 + balance!) / maxEthNeeded) * 100
     setProgressBar(Number(percentComplete.toFixed(3)))
   }, [balance])
 
-
   return (
     <nav className="flex flex-col z-30 lg:flex-row items-center bg-gradient-to-r from-cyan-500 to-blue-500 dark:from-blue-500 dark:to-cyan-500 sm:max-w-screen justify-between py-2 px-4 navBarBorder">
       {/* Logo */}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -5,22 +5,20 @@ import '@rainbow-me/rainbowkit/styles.css'
 
 import type { AppProps } from 'next/app'
 import { ThemeProvider } from 'next-themes'
-import {  getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'
+import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit'
 import { configureChains, createConfig, WagmiConfig } from 'wagmi'
-import {infuraProvider} from 'wagmi/providers/infura'
+import { infuraProvider } from 'wagmi/providers/infura'
 import { constants } from '../utils/constants'
 import { Analytics } from '@vercel/analytics/react'
 import { jsonRpcProvider } from 'wagmi/providers/jsonRpc'
-import { publicProvider } from 'wagmi/providers/public';
-
+import { publicProvider } from 'wagmi/providers/public'
 
 const walletConnectId = process.env.WALLET_CONNECT_PROJECT as string
 const infuraID = process.env.NEXT_PUBLIC_INFURA_ID as string
 // const { NEXT_PUBLIC_ALCHEMY_ID } = config
 const NEXT_PUBLIC_GNOSIS_RPC_URL = process.env.NEXT_PUBLIC_GNOSIS_RPC_URL as string
 // const alchemyId = NEXT_PUBLIC_ALCHEMY_ID as string
 
-
 let appChains: any[] = []
 if (process.env.NODE_ENV === 'development') {
   appChains = constants.DEVELOPMENT_CHAINS
@@ -29,7 +27,7 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 const { chains, publicClient } = configureChains(appChains, [
-  infuraProvider({ apiKey: infuraID}),
+  infuraProvider({ apiKey: infuraID }),
   jsonRpcProvider({ rpc: () => ({ http: NEXT_PUBLIC_GNOSIS_RPC_URL }) }),
   publicProvider(),
 ])
@@ -40,7 +38,6 @@ const { connectors } = getDefaultWallets({
   chains,
 })
 
-
 const wagmiClient = createConfig({
   autoConnect: true,
   connectors,
diff --git a/pages/store.tsx b/pages/store.tsx
