Integrating your Smart Contract with Frontend

const { ethers } = require("hardhat");

async function main() {
  const CrowdFunding = await ethers.getContractFactory("CrowdFunding");
  const crowdFunding = await CrowdFunding.deploy(1000); // Pass the target amount here (e.g., 1000 wei)
  await crowdFunding.deployed();

  console.log("CrowdFunding deployed to:", crowdFunding.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

import crowdFunding from './CrowdFunding.json';
export const CROWDFUNDING_ADDRESS = '0x5FbDB2315678afecb367f032d93F642f64180aa3'; // Update this address
export const CROWDFUNDING_ABI = crowdFunding.abi;

'use client'
import React, { useState, useEffect } from "react";
import Web3Modal from "web3modal";
import { ethers } from "ethers";

// INTERNAL IMPORTS
import { CROWDFUNDING_ABI, CROWDFUNDING_ADDRESS } from "./Constants";

// FETCHING SMART CONTRACT
const fetchContract = (signerOrProvider) =>
  new ethers.Contract(CROWDFUNDING_ADDRESS, CROWDFUNDING_ABI, signerOrProvider);

export const CrowdFundingContext = React.createContext();

export const CrowdFundingProvider = ({ children }) => {
  const titleData = "Crowd Funding";
  const [currentAccount, setCurrentAccount] = useState("");
  const [error, setError] = useState(null);

  const createCampaign = async (campaign) => {
    const { title, description, amount, deadline } = campaign;

    const web3Modal = new Web3Modal();
    const connection = await web3Modal.connect();
    const provider = new ethers.providers.Web3Provider(connection);
    const signer = provider.getSigner();
    const contract = fetchContract(signer);

    try {
      const transaction = await contract.createCampaign(
        title,
        description,
        ethers.utils.parseUnits(amount, 18),
        new Date(deadline).getTime()
      );
      await transaction.wait();
      console.log("Transaction Mined", transaction);
    } catch (error) {
      console.log("Error", error);
    }
  };

  const getCampaigns = async () => {
    const provider = new ethers.providers.JsonRpcProvider();
    const contract = fetchContract(provider);
    const campaigns = await contract.getCampaigns();
    const parsedCampaigns = campaigns.map((campaign, i) => ({
      owner: campaign.owner,
      title: campaign.title,
      description: campaign.description,
      target: ethers.utils.formatEther(campaign.amount.toString()), // Corrected line
      deadline: campaign.deadline.toNumber(),
      amountCollected: ethers.utils.formatEther(
        campaign.amountCollected.toString()
      ),
      pId: i,
    }));
  
    return parsedCampaigns;
  };
  
  const ifWalletConnected = async () => {
    try {
      if (!window.ethereum) {
        setError("Install Metamask");
        return false;
      }

      const accounts = await window.ethereum.request({
        method: "eth_accounts",
      });

      if (accounts.length) {
        setCurrentAccount(accounts[0]);
        return true;
      } else {
        console.log("No account found");
      }
    } catch (error) {
      console.log("Something wrong while connecting to the wallet ", error);
      return false;
    }
  };

  useEffect(() => {
    ifWalletConnected();
  }, []);

  const connectWallet = async () => {
    try {
      if (!window.ethereum) {
        setError("Install Metamask");
        return;
      }
      const accounts = await window.ethereum.request({
        method: "eth_requestAccounts",
      });
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log("Something wrong while connecting to the wallet", error);
    }
  };

  return (
    <CrowdFundingContext.Provider
      value={{
        titleData,
        currentAccount,
        connectWallet,
        createCampaign,
        getCampaigns,
        error,
      }}
    >
      {children}
    </CrowdFundingContext.Provider>
  );
};

'use client'
import Image from "next/image";
import React, { useState, useContext, useEffect } from 'react'
import { CrowdFundingContext } from '../../Context/CrowdFunding'

export default function Home() {
  const { createCampaign, error, getCampaigns, currentAccount, connectWallet } = useContext(CrowdFundingContext)
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [amount, setAmount] = useState('')
  const [deadline, setDeadline] = useState('')
  const [errorMessage, setErrorMessage] = useState('')
  const [campaigns, setCampaigns] = useState([])
  const fetchCampaigns = async () => {
    try {
      const data = await getCampaigns()
      setCampaigns(data)
    } catch (error) {
      console.error('Error while fetching campaigns:', error)
      setErrorMessage('Error while fetching campaigns')
    }
  }

  useEffect(() => {
    fetchCampaigns()
  }, [])

  const handleSubmit = async (e) => {
    e.preventDefault()
    const campaign = {
      title,
      description,
      amount,
      deadline
    }
    try {
      await createCampaign(campaign)
      setErrorMessage('')
      setTitle('')
      setDescription('')
      setAmount('')
      setDeadline('')
      fetchCampaigns()
    } catch (error) {
      console.error('Error while creating campaign:', error)
      setErrorMessage(error.message || 'Error while creating campaign')
    }
  }

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '10px' }}>GFG on WEB3</h1>
      {!currentAccount ? (
        <button
          style={{ backgroundColor: '#007bff', color: 'white', border: 'none', padding: '10px 20px', fontSize: '16px', cursor: 'pointer', marginBottom: '20px' }}
          onClick={connectWallet}
        >
          Connect Wallet
        </button>
      ) : (
        <div style={{ marginBottom: '20px' }}>
          <p style={{ marginTop: '10px' }}>Connected Wallet: {currentAccount}</p>
         
        </div>
      )}
      <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginTop: '20px' }}>Create Campaign</h2>
      <form onSubmit={handleSubmit} style={{ marginTop: '20px' }}>
        <div style={{ marginBottom: '10px' }}>
          <label style={{ display: 'block', fontSize: '16px', marginBottom: '5px' }}>Title:</label>
          <input
            style={{ width: '100%', padding: '10px' }}
            type='text'
            value={title}
            onChange={e => setTitle(e.target.value)}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label style={{ display: 'block', fontSize: '16px', marginBottom: '5px' }}>Description:</label>
          <textarea
            style={{ width: '100%', padding: '10px' }}
            value={description}
            onChange={e => setDescription(e.target.value)}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label style={{ display: 'block', fontSize: '16px', marginBottom: '5px' }}>Amount:</label>
          <input
            style={{ width: '100%', padding: '10px' }}
            type='number'
            value={amount}
            onChange={e => setAmount(e.target.value)}
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label style={{ display: 'block', fontSize: '16px', marginBottom: '5px' }}>Deadline:</label>
          <input
            style={{ width: '100%', padding: '10px' }}
            type='date'
            value={deadline}
            onChange={e => setDeadline(e.target.value)}
          />
        </div>
        <button
          type='submit'
          style={{ backgroundColor: '#007bff', color: 'white', border: 'none', padding: '10px 20px', fontSize: '16px', cursor: 'pointer', marginTop: '10px' }}
        >
          Create Campaign
        </button>
        {errorMessage && <p style={{ color: 'red', marginTop: '10px' }}>{errorMessage}</p>}
      </form>
      <h2 style={{ fontSize: '20px', fontWeight: 'bold', marginTop: '20px' }}>Campaigns</h2>
      <div>
        {campaigns.map((campaign, index) => (
          <div key={index} style={{ border: '1px solid #ccc', borderRadius: '5px', padding: '10px', marginTop: '20px' }}>
            <h3 style={{ fontSize: '18px', fontWeight: 'bold' }}>{campaign.title}</h3>
            <p>Description: {campaign.description}</p>
            <p>Target Amount: {campaign.target}</p>
            <p>Deadline: {new Date(campaign.deadline).toLocaleDateString()}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

import { Inter } from "next/font/google";
import "./globals.css";

import {CrowdFundingProvider} from '../../Context/CrowdFunding'
import Form from "../../Components/Form";
const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "GFG App",
  description: "Integrating front-end with smart contracts",
};

export default function RootLayout({ children }) {
  return (
    <>
     <html lang="en">
   
   <body className={inter.className}>
    <CrowdFundingProvider>
      <div>


      </div>
  
    {children}
    </CrowdFundingProvider>
   </body>
 </html>

    </>
   
  );
}

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
      appDir: true,
    },
  };
  
  export default nextConfig;