lesson 8 new looks and modification (HTML>CSS>JS)

[Red12-45]

CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #c4bebe;
background-image: url("https://wallpaperaccess.com/full/479271.jpg");

background-repeat: no-repeat;
background-size: cover;
}

.container {
max-width: 600px;
margin: 50px auto 0;
padding: 50px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
}

h1 {
font-family: "Montserrat", sans-serif;
font-size: 36px;
margin: 0;
animation: slide-i 0.5s ease-in-out;
color: #2b3633;
}

@Keyframes slide-i {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

label {
display: block;
font-size: 24px;
margin: 30px 0 10px;
}

h2 {
font-family: "Montserrat", sans-serif;
font-size: 24px;
margin-top: 40px;
opacity: 0;
transform: translateX(100%);
animation: slide-in 0.5s ease-in-out forwards;
color: #808d8a;
}

@Keyframes slide-in {
to {
transform: translateX(0);
opacity: 1;
}
}

h2::before {
content: "";
display: block;
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 4px;
background-color: #e2e757;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s ease-in-out;
}

h2:hover::before {
transform: scaleX(1);
}

input {
display: block;
margin: 20px auto;
padding: 10px 20px;
border: none;
border-radius: 30px;
font-size: 18px;
color: #444;
background-color: #f2f2f2;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
width: 80%;
text-align: center;
}

input:focus {
outline: none;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.button-group {
display: flex;
justify-content: space-between;
}

button {
width: 150px;
height: 50px;
display: inline-block;
margin: 10px;
padding: 10px 20px;
border: none;
border-radius: 30px;
font-size: 18px;
color: #fff;
background-color: #6c5ce7;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease-in-out;
}

button:hover {
transform: translateY(-3px);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

button:active {
transform: translateY(0);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

#fundButton {
background-color: #ff7675;
}

#connectButton {
background-color: #fdcb6e;
}

#balanceButton {
background-color: #74b9ff;
}

#withdrawButton {
background-color: #00b894;
}

HTML

<title>Crypto Wallet</title>

Crypto Wallet

Enter the amount of ETH:

Fund Connect Balance Withdraw

<script src="./index.js" type="module"></script>

JS
import { ethers } from "./ethers-5.6.esm.min.js";
import { abi, contractAddress } from "./constant.js";

const connectButton = document.getElementById("connectButton");
const fundButton = document.getElementById("fundButton");
const balanceButton = document.getElementById("balanceButton");
const withdrawButton = document.getElementById("withdrawButton");
const ethAmount = document.getElementById("ethAmount");

fundButton.addEventListener("click", () => {
// perform the fund operation here
ethAmount = ethAmount.value;
// clear the input field
ethAmount.value = "";
});

connectButton.addEventListener("click", connect);
fundButton.addEventListener("click", fund);
balanceButton.addEventListener("click", getBalance);
withdrawButton.addEventListener("click", withdraw);

// Check localStorage for wallet connection flag
const connectedToWallet = localStorage.getItem("connectedToWallet");

if (connectedToWallet) {
// If connected, update button text and disable connect button
connectButton.innerHTML = "Connected";
connectButton.disabled = true;
}

async function connect() {
if (typeof window.ethereum !== "undefined") {
const accounts = await window.ethereum.request({ method: "eth_accounts" });

if (accounts.length === 0) {
  await window.ethereum.request({ method: "eth_requestAccounts" });
}

connectButton.innerHTML = "Connected";

} else {
connectButton.innerHTML = "Please install metamask";
}
}

async function fund() {
const amount = document.getElementById("ethAmount").value;
if (typeof window.ethereum !== "undefined") {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(contractAddress, abi, signer);
try {
const transactionResponse = await contract.fund({
value: ethers.utils.parseEther(amount),
});
await listenForTransactionMine(transactionResponse, provider);
console.log("Done");
document.getElementById("ethAmount").value = "";
} catch (error) {
console.log(error);
}
}
}

async function getBalance() {
if (typeof window.ethereum !== "undefined") {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const balance = await provider.getBalance(contractAddress);
const formattedBalance = ethers.utils.formatEther(balance);

// Show balance for 3 seconds
balanceButton.innerHTML = ` ${formattedBalance} ETH`;
setTimeout(() => {
  balanceButton.innerHTML = "Balance";
}, 3000);

}
}

function listenForTransactionMine(transactionResponse, provider) {
console.log(Mining ${transactionResponse.hash}....);

return new Promise((resolve, reject) => {
provider.once(transactionResponse.hash, (transactionReciept) => {
console.log(
Completed with ${transactionReciept.confirmations} confirmations
);
resolve();
});
});
}

async function withdraw() {
if (typeof window.ethereum !== "undefined") {
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(contractAddress, abi, signer);
try {
const transactionResponse = await contract.withdraw();
await listenForTransactionMine(transactionResponse, provider);
console.log("Done");
} catch (error) {
console.log(error);
}
}
}