Merge pull request #5 from KibokoDao-Africa/alex

Alex

constants/addresses.ts

@@ -1,4 +1,4 @@
-export const MARKETPLACE_ADDRESS = "0xBE3e0d39d350b41b5B6a4Bff4D4606F73849b01A";
+export const MARKETPLACE_ADDRESS = "0x42Ca855E799a2891182c1859f78FFadE939f869C";
 
 export const NFT_COLLECTION_ADDRESS =
-  "0x717F9d7605b0669f1c81e71385763634a556faC9";
+  "0x744AA400cbb2D215d37642d510194e7418b180bC";

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 (
+    <div>
+      <Box>
+        <CustomTextField
+          value={amount}
+          onChange={(e) => setAmount(Number(e.target.value))}
+          sx={{ mt: "7%" }}
+          fullWidth
+          size="small"
+          label="amount"
+          inputProps={{
+            sx: {
+              "&::placeholder": {
+                color: "#fff",
+              },
+              color: "#fff",
+              backgroundColor: "grey",
+              borderRadius: "12px",
+            },
+          }}
+        />
+        <input type="file" accept="image/*" onChange={handleImageChange} />
+
+        <Button
+          sx={{
+            mt: "7%",
+            background: "#0fe9ef",
+            borderRadius: "15px",
+            "&:hover": { background: "#0fe9ef" },
+            textTransform: "capitalize",
+            width: "100%",
+            whiteSpace: "nowrap",
+          }}
+          onClick={mintNft}
+          disabled={isLoading}
+        >
+          Mint/Create Tickets {isLoading && <CircularProgress size={20} />}
+        </Button>
+      </Box>
+    </div>
+  );
+};
+
+export default Mint;

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 (

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<number>(1);
+  // State to store generated random IDs
+  const [tokenIds, setTokenIds] = useState<number>(4);
+
   const [image, setImage] = useState<any>(null);
   const [preview, setPreview] = useState<any>(null);
   const fileInputRef = useRef<any>(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
           </Button>
+          <Mint />
         </Container>
       ) : (
         <Container

src/state/services.ts

@@ -1,6 +1,6 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
-const url = "https://ticketbackend-4oxc.onrender.com";
+const url = "https://nfticketsv2.buynance.org";
 
 export const EventsApi = createApi({
   reducerPath: "EventsApi",