do

src/App.jsx

@@ -3,59 +3,11 @@ import NFT from "./NFT";
 import { NavLink, Route, Routes } from "react-router-dom";
 import Gallery from "./Gallery";
 import Transfer from "./Transfer";
-
-const ReactHooksTutorial = () => {
-	const [count, setCount] = useState(0);
-	const [text, setText] = useState("John");
-
-	useEffect(() => {
-		if (count > 10) {
-			alert("Count is greater than 10, resetting to 0...");
-			setCount(0);
-		}
-	}, [count]);
-
-	return (
-		<div>
-			<h1
-				style={{
-					marginBottom: "2rem",
-				}}
-			>
-				React Hooks Tutorial
-			</h1>
-			<div
-				className="Buttons__Container"
-				style={{
-					marginBottom: "2rem",
-				}}
-			>
-				<p
-					style={{
-						fontSize: "1rem",
-						color: "hsla(260, 15%, 75%, 1)",
-					}}
-				>
-					Count: {count}
-				</p>
-				<button className="btn" onClick={() => setCount(count + 1)}>
-					Increment
-				</button>
-			</div>
-			<div className="Input__Container">
-				<label>Name: {text}</label>
-				<input
-					type="text"
-					value={text}
-					onChange={e => setText(e.target.value)}
-				/>
-			</div>
-		</div>
-	);
-};
+import { Web3Button } from "@web3modal/react";
+import { useAccount } from "wagmi";
 
 export default function App() {
-	const isConnected = false;
+	const {isConnected} = useAccount();
 	return (
 		<div className="App">
 			<nav className="header">
@@ -99,7 +51,7 @@ export default function App() {
 						<Route path="transfer/:id" element={<Transfer />} />
 					</Routes>
 				) : (
-					<ReactHooksTutorial />
+					<Web3Button />
 				)}
 			</div>
 			<footer>

src/NFT.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 import ABI from "./contracts/ABI.json";
 import { useNavigate } from "react-router-dom";
+import {NFTStorage} from "nft.storage";
+import { useAccount, useContract, useContractRead, useSigner } from "wagmi";
 
-const CONTRACT_ADDRESS = "0xf8Ef6084E0734e0359D91C82D3D23194fC832dA0";
+const CONTRACT_ADDRESS = "0xaC69B54765c9cb9770bD6A6F890E95ED640aB233";
 
 const NFT_STORAGE_KEY = import.meta.env.VITE_NFT_STORAGE_KEY;
 
@@ -11,6 +13,20 @@ const NFT = () => {
 	const [isFilePicked, setIsFilePicked] = useState(false);
 	const [isMinting, setIsMinting] = useState(false);
 
+	const { address } = useAccount();
+	const { data: signer } = useSigner();
+	const contract = useContract({
+    address: CONTRACT_ADDRESS,
+    abi: ABI.abi,
+    signerOrProvider: signer,
+	});
+	const { data: supply } = useContractRead({
+    address: CONTRACT_ADDRESS,
+    abi: ABI.abi,
+    functionName: "totalSupply",
+	});
+
+	const client = new NFTStorage({ token: NFT_STORAGE_KEY });
 	const navigate = useNavigate();
 
 	const [title, setTitle] = useState("");
@@ -29,6 +45,37 @@ const NFT = () => {
 		setDescription(event.target.value);
 	};
 
+	const uploadFile = () => {
+		setIsMinting(true);
+		client
+			.store({
+				name: title,
+				description: description,
+				image: selectedFile,
+			})
+			.then(result => {
+				const ipfsUrl = result.url;
+				console.log("IPFS url:", ipfsUrl);
+				try {
+					contract.mintNFT(address, ipfsUrl).then(res => {
+						console.log(
+							"Minted Successfully: https://mumbai.polygonscan.com/tx/" +
+								res.hash
+						);
+						setIsMinting(false);
+						// navigate(`/gallery/${supply.toNumber()}`);
+					});
+				} catch (e) {
+					console.log(e);
+				}
+			})
+			.catch(error => {
+				console.error("Error:", error);
+				setIsMinting(false);
+			});
+	};
+
+
 	return (
 		<div className="NFT__Container">
 			{isFilePicked ? (
@@ -83,7 +130,8 @@ const NFT = () => {
 					onChange={changeHandler}
 				/>
 				{isFilePicked && (
-					<button disabled={isMinting} className="btn">
+					<button disabled={isMinting} className="btn" 
+					onClick={uploadFile}>
 						{isMinting ? (
 							<svg
 								xmlns="http://www.w3.org/2000/svg"