E1: NextJs Front End - Update
Front end updated with useEffect and useState for automatic balance updates.
I will outline the changes below, but you can find the full repo here - https://github.com/SimSimButDifferent/L3-L4-EthWalletFrontEnd
For the lesson 4 code, go the the L4 branch in the repo above.
Or check the deployment here - https://ethwalletapp.on.fleek.co/
EthWallet.tsx
updates:
Set userBalance as "Loading..." as default.
Added an if statement before setUserBalance in the handle functions, to also handle empty wallets.
Added useEffect to populate userBalance message when page launches. and to update depending on wether a wallet is connected or not and wether they have eth deposited.
Removed getUserBalance button, in favor of a auto-updated userBalance bar.
"use client"
import { ethers, Contract, BrowserProvider } from "ethers"
import { useWeb3ModalAccount } from "@web3modal/ethers/react"
import { contractAddresses, abi } from "../context"
import React, { useEffect, useState } from "react"
import * as dotenv from "dotenv"
dotenv.config()
const EthWallet: React.FC = () => {
const { address, chainId, isConnected } = useWeb3ModalAccount()
const contractAddress =
chainId in contractAddresses ? contractAddresses[chainId][0] : null
const [depositAmount, setDepositAmount] = useState("")
const [withdrawAmount, setWithdrawAmount] = useState("")
const [successMessage, setSuccessMessage] = useState("")
// ------------Added Loading as default---------------------
const [userBalance, setUserBalance] = useState("Loading...")
// ---------------------------------------------------------
const [isLoading, setIsLoading] = useState(false)
async function deposit(value: any) {
if (!isConnected) throw Error("User Disconnected")
const provider = new BrowserProvider(window.ethereum)
const getSigner = provider.getSigner()
const signer = await getSigner
const ethWallet = new Contract(contractAddress, abi, signer)
const tx = await ethWallet.deposit({ value: ethers.parseEther(value) })
const receipt = await tx.wait()
console.log(`${value.toString()} ETH Deposited!`)
return receipt
}
async function withdraw(value: any) {
if (!isConnected) throw Error("User Disconnected")
const provider = new BrowserProvider(window.ethereum)
const getSigner = provider.getSigner()
const signer = await getSigner
const ethWallet = new Contract(contractAddress, abi, signer)
const tx = await ethWallet.withdraw(ethers.parseEther(value))
const receipt = await tx.wait()
console.log(`${value.toString()} ETH Withdrawn!`)
return receipt
}
const getUserBalance = async () => {
const provider = new BrowserProvider(window.ethereum)
const getSigner = provider.getSigner()
const signer = await getSigner
const ethWallet = new Contract(contractAddress, abi, signer)
console.log(signer)
const balance = await ethWallet.getUserBalance()
setUserBalance(ethers.formatEther(balance))
return balance.toString()
}
const handleDepositSubmit = async (
event: React.FormEvent<HTMLFormElement>,
) => {
event.preventDefault()
setIsLoading(true)
try {
await deposit(depositAmount)
setSuccessMessage(`Successfully deposited ${depositAmount} ETH!`)
const balance = await getUserBalance()
// ----- Added conditional statement to handle empty wallet -----
if (balance == 0) {
setUserBalance("Wallet empty!")
} else {
setUserBalance(
`User Contract Balance: ${ethers.formatEther(balance)} ETH`,
)
}
// --------------------------------------------------------------
setDepositAmount("") // Optional: Reset input field after successful deposit
setTimeout(() => setSuccessMessage(""), 10000)
} catch (error) {
console.error("Error during deposit: ", error)
setSuccessMessage("User Disconnected!")
}
setIsLoading(false)
}
const handleWithdrawSubmit = async (event) => {
event.preventDefault()
setIsLoading(true)
try {
await withdraw(withdrawAmount)
setSuccessMessage(`Successfully withdrawn ${withdrawAmount} ETH!`)
const balance = await getUserBalance()
// ----- Added conditional statement to handle empty wallet -----
if (balance == 0) {
setUserBalance("Wallet Empty!")
} else {
setUserBalance(
`User Contract Balance: ${ethers.formatEther(balance)} ETH`,
)
}
// --------------------------------------------------------------
setWithdrawAmount("") // Optional: Reset input field after successful deposit
setTimeout(() => setSuccessMessage(""), 10000)
} catch (error) {
console.error("Error during withdraw: ", error)
setSuccessMessage("User Disconnected!")
}
setIsLoading(false)
}
const handleGetUserBalance = async (event) => {
event.preventDefault()
setIsLoading(true)
try {
const balance = await getUserBalance()
// ----- Added conditional statement to handle empty wallet -----
if (balance == 0) {
setUserBalance("Wallet Empty!")
} else {
setUserBalance(
`User Contract Balance: ${ethers.formatEther(balance)} ETH`,
)
}
// --------------------------------------------------------------
setTimeout(() => 10000)
} catch (error) {
console.error("User does not exist!", error)
setSuccessMessage("User does not exist!")
}
setIsLoading(false)
}
// -- useEffect to load userBalance message depending on users balance --
useEffect(() => {
const fetchUserBalance = async () => {
try {
const balance = await getUserBalance()
if (balance == 0) {
setUserBalance("Wallet Empty!")
} else {
setUserBalance(
`User Contract Balance: ${ethers.formatEther(
balance,
)} ETH`,
)
}
} catch (error) {
console.error("Failed to fetch user balance: ", error)
}
}
if (isConnected) {
fetchUserBalance()
} else {
setUserBalance("Connect wallet!")
}
}, [isConnected])
// ---------------------------------------------------------------------
return (
<div className="">
<form onSubmit={handleDepositSubmit}>
<div className="flex justify-center p-4">
<h1 className="text-6xl text-center rounded-lg border border-transparent px-5 py-4 transition-colors border-neutral-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30">
Eth Wallet App
</h1>
</div>
<div className="flex flex-col p-4">
<input
type="text"
value={depositAmount}
onChange={(e) => setDepositAmount(e.target.value)}
className="text-black text-xl text-align-center py-2"
placeholder="Deposit amount..."
/>
<button
type="submit"
disabled={isLoading}
className={`px-4 pb-1 ${
isLoading
? "bg-violet-600"
: "rounded-lg border border-transparent transition-colors border-neutral-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30 hover:bg-transparent"
} text-white rounded-lg`}
>
Deposit
</button>
</div>
</form>
<form onSubmit={handleWithdrawSubmit}>
<div className="flex flex-col p-4">
<input
type="text"
value={withdrawAmount}
onChange={(e) => setWithdrawAmount(e.target.value)}
className="text-black text-xl text-align-center py-2"
placeholder="Withdraw amount..."
/>
<button
type="submit"
disabled={isLoading}
className={`px-4 pb-1 ${
isLoading
? "bg-violet-600"
: "rounded-lg border border-transparent transition-colors border-neutral-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30 hover:bg-transparent"
} text-white rounded-lg`}
>
Withdraw
</button>
</div>
</form>
<div className="flex justify-center pt-4">
<div className="flex p-4 text-2xl font-light rounded-lg border border-transparent transition-colors border-neutral-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30">
{userBalance}
</div>
</div>
{successMessage && (
<div className="flex items-center justify-center pt-10">
<div className="flex justify-center px-4 py-2 text-2xl rounded-lg border border-transparent transition-colors border-neutral-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30 animate-fadeOut">
{successMessage}
</div>
</div>
)}
</div>
)
}
export default EthWalletLast updated
