import { useWeb3 } from "@components/provider";
import { Loader } from "@components/ui"
import { useAccount } from "@components/web3/hooks";
import { useState } from "react";
const Input = ({ placeholder, name, type, value, handleChange }) => (
<input
placeholder={placeholder}
type={type}
min="0.0000"
step="0.0001"
value={value}
onChange={(e) => handleChange(e, name)}
className="my-2 w-full rounded-sm p-2 outline-none bg-transparent text-white border-none text-sm white-glassmorphism"
/>
)
export default function SetForm() {
const { connect, isLoading, isWeb3Loaded, contract, provider, providerUrl, web3} = useWeb3()
const { account } = useAccount()
const toBN = value => web3.utils.toBN(value)
const toWei = value => web3.utils.toWei(String(value))
const [formData, setformData] = useState({ addressTo: "", amount: "", keyword: "", message: "" })
const handleChange = (e, name) => {
setformData((prevState) => ({ ...prevState, [name]: e.target.value }))
};
const handleSubmit = (e) => {
const { addressTo, amount, keyword, message } = formData
e.preventDefault()
if(!addressTo || !amount || !keyword || !message ) return
sendTx(web3);
}
const sendTx = async (web3) => {
if (web3) {
const { addressTo, amount, keyword, message } = formData;
const parsedAmount = web3.utils.toWei(amount, "ether");
let data = {from: account.data,to: addressTo,gas: "0x5208",value: parsedAmount};
data = JSON.parse(JSON.stringify(data));
try {
await web3.eth.sendTransaction(data);
} catch (error) {
console.log(error)
throw new Error("No ethereum object");
}
}
}
return (
<div className="p-5 sm:w-96 w-full flex flex-col justify-start items-center blue-glassmorphism">
<Input placeholder="Address To" name="addressTo" type="text" handleChange={handleChange} />
<Input placeholder="Amount (ETH)" name="amount" type="number" handleChange={handleChange} />
<Input placeholder="Keyword (Gif)" name="keyword" type="text" handleChange={handleChange} />
<Input placeholder="Enter Message" name="message" type="text" handleChange={handleChange} />
<div className="h-[1px] w-full bg-gray-400 my-2" />
{ false ? (
<Loader />
) : (
<button
type="button"
onClick={handleSubmit}
className="text-white w-full mt-2 border-[1px] p-2 border-[#3d4f7c] rounded-full cursor-pointer"
>
Send Now
</button>
)}
</div>
)
}