import React, { useEffect, useState } from 'react' import { useParams } from 'react-router-dom' import useDappyPacks from '../hooks/use-dappy-packs.hook' import Spinner from '../components/Spinner' import "./PackDetails.page.css" export default function PackDetails() { const [pack, setPack] = useState(null) const [dappies, setDappies] = useState([]) const { packID } = useParams() const { fetchDappiesOfPack, mintFromPack, fetchPackDetails } = useDappyPacks() useEffect(() => { fetchDappies() //eslint-disable-next-line }, []) const fetchDappies = async () => { let dappiesOfPack = await fetchDappiesOfPack(parseInt(packID.replace("Pack", ""))) setDappies(dappiesOfPack) let packDetails = await fetchPackDetails(parseInt(packID.replace("Pack", ""))) setPack(packDetails) } if (!pack) return <Spinner /> return ( <div className="packdetails__wrapper"> <img className="pack__img" src={`${process.env.PUBLIC_URL}/assets/${packID}.png`} alt='Pack' /> <div className="pack__content"> <h3 className="app__title">{pack?.name}</h3> <div onClick={() => mintFromPack(packID, dappies, pack?.price)} className="btn btn-bordered btn-light" style={{ width: "60%", margin: "0 auto", display: "flex", justifyContent: "center" }}> <i className="ri-shopping-cart-fill" style={{ fontSize: "1.2rem", marginRight: ".2rem" }}></i> {parseInt(pack?.price)} FUSD </div> <p>Dappies included:</p> <p> {dappies.map((d, i) => ` #${d} `)} </p> </div> </div> ) }