Make Buy me coffee working

[Vikash-8090-Yadav]

I want if someone clicks on the support me button then the wallet opens and the small form opens asking for the amount to donate in the form of matic . and that amount should be sent to my wallet address!

use the confirmation button also and a message after the donation is completed as Transaction successful !!

Wallet address - 0x7719E64418C13c3Ab97e6f8500E81ce1101e8C40

[Harsh22222]

Can I work on this @Vikash-8090-Yadav?

[Amrit-Pal-Singh-3103]

Hey, I want to work on this @Vikash-8090-Yadav

[Vikash-8090-Yadav]

@Harsh22222 start working on this !

[Vikash-8090-Yadav]

@Harsh22222 for the reference u can check this out - https://vikash-portfolio-3-0.vercel.app/

[Harsh22222]

@Vikash-8090-Yadav I have a bug in the last stage of the payment process in my code can you help me with that?

[Harsh22222]

import { useState } from 'react'
import Link from "next/link"
import Image from "next/image"
import confused from "./images/confused.jpg"  
import {ethers} from "ethers"
import Web3Modal from 'web3modal'
import { Modal } from 'antd';
import { Support } from '@mui/icons-material'

let matic;

function Contact() {
  const [matic, setPolygonAmount] = useState();
  const handleSubmit = async (event) => {
  event.preventDefault();
  const data = new FormData(event.target);
  // setError();
  matic = data.get("matic");
  await startPayment();
};

// here
const startPayment = async (matic) => {
  const web3Modal = new Web3Modal()
  const connection = await web3Modal.connect()
  const provider = new ethers.providers.Web3Provider(connection)
  const signer = provider.getSigner()
  const address = await signer.getAddress()
  console.log(address);
  if (address && signer && provider) {
    requestPolygonTransaction(signer, address, provider)
  } else {
    console.log("ERROR couldn't connect to metamask")
  }
}

const requestPolygonTransaction = async (signer, address, provider) => {
  alert(address);
  if (!ethers.utils.isAddress(address)) {
    console.log('ERROR invalid wallet addresses provided')
    window.alert('Oops transaction failed!');
//   await  Modal.error({
//   title: 'Oops transaction failed!',
//   content: 'Dont forget to check the Console for better underswtanding',

// });
    return
  }

  const transactionParameters = {
    from: address ,
    to: "0xeE467Cae5d6461FB1783c15bD9Da43d63048ffb0", 
    data: '0x',
    value: ethers.utils.parseEther(matic),
    gasLimit: ethers.utils.hexlify(210000),
    gasPrice: ethers.utils.hexlify(parseInt(await provider.getGasPrice())),
  }

  try {
const transaction = await signer.sendTransaction(transactionParameters);
setIsModalOpen(false);
await transaction.wait();
await Modal.success({
  title: 'Tx Success!',
   content: 'Thank You So Much !!',
});
} catch (e) {
console.log('failed!')
window.alert('Oops transaction failed!');
// await  Modal.error({
//   title: 'Oops transaction failed!',
//   content: 'please double check the amount  and try again ,Dont forget to check the Console for better underswtanding',
// });
}
}

  return (
    <>
      <div name = "contact" className = "w-full py-5 bg-gradient-to-b from-gray-800 to-black text-white">
        <h1 className = "text-4xl pt-8 pb-4 px-24 font-semibold max-md:text-center text-white">Buy Me a ☕</h1>
        <p className = "text-lg pb-4 px-24 font-semibold max-md:text-center text-gray-500">Submit the form below to support me.</p>
        <div className = "mx-auto flex flex-col items-center justify-center h-full px-4 md:px-8 my-3">
          <form className = "w-full flex flex-col items-center justify-center" onSubmit={handleSubmit}>
            {/* <input type = "text" name = "address" placeholder = "Enter your Account address" className = "w-1/2 max-md:w-4/5 p-2 mb-4 bg-transparent border-2 rounded-md text-white focus:outline-none" /> */}
            <input type = "text" name = "matic" placeholder = "Amount in matic" className = "w-1/2 max-md:w-4/5 p-2 mb-4 bg-transparent border-2 rounded-md text-white focus:outline-none" />
            {/* <textarea name = "message" rows = "7" placeholder = "Enter your message" className = "w-1/2 max-md:w-4/5 p-2 mb-4 bg-transparent border-2 rounded-md text-white focus:outline-none" /> */}
            <button className = "bg-blue-500 w-1/2 max-md:w-4/5 rounded-md text-white font-semibold text-xl p-1 hover:bg-blue-800 mb-8">Support Me</button>
          </form>
        </div>
      </div>

    <div className="sm:px-4 py-16  sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
      <div className="flex flex-col max-w-screen-lg overflow-hidden bg-white border rounded-3xl shadow-sm lg:flex-row sm:mx-auto">
        <div className="relative lg:w-1/2">
        <Image src ={confused} width ={500} height = {400}  alt ="hero-image"/>
          <svg
            className="absolute top-0 right-0 hidden h-full text-white lg:inline-block"
            viewBox="0 0 20 104"
            fill="currentColor"
          >
            <polygon points="17.3036738 5.68434189e-14 20 5.68434189e-14 20 104 0.824555778 104" />
          </svg>
        </div>

        <div className="flex flex-col justify-center p-8 bg-black lg:p-16 lg:pl-10 lg:w-1/2">

          <h5 className="mb-3 text-3xl text-white font-extrabold leading-none sm:text-4xl">
            Oh ! You stucked , Dont worry 
          </h5>
          <p className="mb-8 text-blue-400 font-black">
          </p>
          <div style={{color:'red'}} className="flex items-left">
          <Link href="https://github.com/Vikash-8090-Yadav/SaL--dApp#readme"> 
           <a
           className="flex hover:border-2 hover:shadow-xl items-center  border border-2 justify-center w-full sm:px-10 py-4 leading-6 bg-white rounded-lg font-black"
           >
            Take Help !
           </a>
           </Link>
          </div>
        </div>
      </div>
    </div>
    </>
  )
}

export default Contact

[Vikash-8090-Yadav]

@Harsh22222 are u still workng on this ?

[Harsh22222]

No currently not.

[anipaul2]

Assign me