diff --git a/constants/addresses.ts b/constants/addresses.ts index 02d3c5a..a6735b3 100644 --- a/constants/addresses.ts +++ b/constants/addresses.ts @@ -1,4 +1,4 @@ -export const MARKETPLACE_ADDRESS = "0xBE3e0d39d350b41b5B6a4Bff4D4606F73849b01A"; +export const MARKETPLACE_ADDRESS = "0x42Ca855E799a2891182c1859f78FFadE939f869C"; export const NFT_COLLECTION_ADDRESS = - "0x717F9d7605b0669f1c81e71385763634a556faC9"; + "0x744AA400cbb2D215d37642d510194e7418b180bC"; diff --git a/src/components/Mint.jsx b/src/components/Mint.jsx new file mode 100644 index 0000000..a46bb32 --- /dev/null +++ b/src/components/Mint.jsx @@ -0,0 +1,97 @@ +import React, { useState, useCallback } from "react"; +import { + useAddress, + useContract, + useContractWrite, + useStorageUpload, +} from "@thirdweb-dev/react"; +import { Box, Button, CircularProgress, TextField } from "@mui/material"; +import { CustomTextField } from "./CustomeTextBox"; + +const Mint = () => { + const address = useAddress(); + const [amount, setAmount] = useState(1); + // State to store generated random IDs + const [tokenIds, setTokenIds] = useState(4); + const [imageFile, setImageFile] = useState(null); // Added state for image file + const { mutateAsync: upload } = useStorageUpload(); + const { contract } = useContract( + "0x717F9d7605b0669f1c81e71385763634a556faC9" + ); + const { mutateAsync: mintTo, isLoading } = useContractWrite( + contract, + "mintTo" + ); + + const handleImageChange = (e) => { + const file = e.target.files[0]; + setImageFile(file); + }; + + const mintNft = useCallback(async () => { + try { + if (!imageFile) { + console.error("Please select an image file"); + return; + } + + // Upload the image file to IPFS + const uris = await upload({ data: [imageFile] }); + if (typeof uris !== "string") { + console.error("Invalid IPFS CID"); + return; + } + + // Mint an NFT with the given IPFS CID + const data = await mintTo({ args: [address, tokenIds, uris, amount] }); + + console.info("contract call successs", data); + } catch (err) { + console.error("contract call failure", err); + } + }, [address, amount, imageFile, mintTo, tokenIds, upload]); + + return ( +
+ + setAmount(Number(e.target.value))} + sx={{ mt: "7%" }} + fullWidth + size="small" + label="amount" + inputProps={{ + sx: { + "&::placeholder": { + color: "#fff", + }, + color: "#fff", + backgroundColor: "grey", + borderRadius: "12px", + }, + }} + /> + + + + +
+ ); +}; + +export default Mint; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 9a6db14..2c3779b 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -17,7 +17,12 @@ import { rainbowWallet, phantomWallet, } from "@thirdweb-dev/react"; -import { Aurora, AuroraTestnet, Mumbai } from "@thirdweb-dev/chains"; +import { + Aurora, + AuroraTestnet, + Mumbai, + FlareTestnetCoston, +} from "@thirdweb-dev/chains"; import { Provider } from "react-redux"; import { store } from "../state/store"; @@ -32,7 +37,7 @@ export const theme = createTheme({ }, }); -const activeChain = Mumbai; +const activeChain = FlareTestnetCoston; export default function App({ Component, pageProps }: AppProps) { return ( diff --git a/src/pages/create.tsx b/src/pages/create.tsx index 409564f..9e8be64 100644 --- a/src/pages/create.tsx +++ b/src/pages/create.tsx @@ -12,13 +12,24 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { useEffect, useRef, useState } from "react"; -import { useAddress } from "@thirdweb-dev/react"; +import { + Web3Button, + useAddress, + useContract, + useContractWrite, + useStorageUpload, +} from "@thirdweb-dev/react"; import Stack from "@mui/material/Stack"; import LinearProgress from "@mui/material/LinearProgress"; import { useCreateEventMutation } from "@/state/services"; +import Mint from "@/components/Mint"; const Create = () => { const address = useAddress(); + const [amount, setAmount] = useState(1); + // State to store generated random IDs + const [tokenIds, setTokenIds] = useState(4); + const [image, setImage] = useState(null); const [preview, setPreview] = useState(null); const fileInputRef = useRef(null); @@ -37,6 +48,28 @@ const Create = () => { deployerWalletAddress: "", }); + const { contract } = useContract( + "0x717F9d7605b0669f1c81e71385763634a556faC9" + ); + const { mutateAsync: upload } = useStorageUpload(); + const { mutateAsync: mintTo, isLoading: mintLoading } = useContractWrite( + contract, + "mintTo" + ); + + const mintNft = async () => { + try { + const dataToUpload: never[] = []; + + // And upload the data with the upload function + const uris = await upload({ data: dataToUpload }); + const data = await mintTo({ args: [address, tokenIds, uris, amount] }); + console.info("contract call successs", data); + } catch (err) { + console.error("contract call failure", err); + } + }; + const [createEvent, { isLoading, isError, isSuccess }] = useCreateEventMutation(); @@ -373,6 +406,7 @@ const Create = () => { > Mint/Create Tickets + ) : (