124 lines
2.9 KiB
TypeScript
124 lines
2.9 KiB
TypeScript
import { createLazyFileRoute } from "@tanstack/react-router";
|
|
import { useState } from "react";
|
|
import type { Numbers } from "web3";
|
|
import { useStore } from "../store";
|
|
import { getFormInputValue, toastError, tryWithToast } from "../utils";
|
|
import { padToken, web3 } from "../web3";
|
|
|
|
export const Route = createLazyFileRoute("/pad-token")({
|
|
component: PadTokenPage,
|
|
});
|
|
|
|
function PadTokenPage() {
|
|
const connectedAccount = useStore((state) => state.connectedAccount);
|
|
const [balance, setBalance] = useState("(nothingness)");
|
|
|
|
const onBalanceOfFormSubmit: React.FormEventHandler<HTMLFormElement> = async (
|
|
event
|
|
) => {
|
|
event.preventDefault();
|
|
|
|
const address = getFormInputValue(
|
|
event.target as HTMLFormElement,
|
|
"address"
|
|
).trim();
|
|
if (!address) {
|
|
toastError("Balance Of", "Enter an address.");
|
|
return;
|
|
}
|
|
|
|
await tryWithToast("Balance Of", async () => {
|
|
const balanceBN: Numbers = await padToken.methods
|
|
.balanceOf(address)
|
|
.call();
|
|
setBalance(web3.utils.fromWei(balanceBN, "ether"));
|
|
});
|
|
};
|
|
|
|
const onMintFormSubmit: React.FormEventHandler<HTMLFormElement> = async (
|
|
event
|
|
) => {
|
|
event.preventDefault();
|
|
|
|
if (!connectedAccount) {
|
|
toastError("Mint", "Connect your wallet first.");
|
|
return;
|
|
}
|
|
|
|
const to = getFormInputValue(event.target as HTMLFormElement, "to").trim();
|
|
if (!to) {
|
|
toastError("Mint", "Enter a target address.");
|
|
return;
|
|
}
|
|
|
|
const amount = getFormInputValue(
|
|
event.target as HTMLFormElement,
|
|
"amount"
|
|
).trim();
|
|
if (!amount) {
|
|
toastError("Mint", "Enter an amount.");
|
|
return;
|
|
}
|
|
|
|
await tryWithToast("Mint", async () => {
|
|
await padToken.methods
|
|
.mint(to, web3.utils.toWei(amount, "ether"))
|
|
.send({ from: connectedAccount });
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 grid md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
<div className="card bg-base-200">
|
|
<div className="card-body items-start">
|
|
<h2 className="text-2xl font-bold">Balance Of</h2>
|
|
<form onSubmit={onBalanceOfFormSubmit}>
|
|
<input
|
|
type="text"
|
|
name="address"
|
|
className="input"
|
|
placeholder="Address"
|
|
required
|
|
minLength={42}
|
|
maxLength={42}
|
|
/>
|
|
<button type="submit" className="btn btn-primary">
|
|
Get
|
|
</button>
|
|
<div>
|
|
<span className="font-bold">Balance:</span> {balance} PAD
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="card bg-base-200">
|
|
<div className="card-body items-start">
|
|
<h2 className="text-2xl font-bold">Mint</h2>
|
|
<form onSubmit={onMintFormSubmit}>
|
|
<input
|
|
type="text"
|
|
name="to"
|
|
className="input"
|
|
placeholder="To"
|
|
required
|
|
minLength={42}
|
|
maxLength={42}
|
|
/>
|
|
<input
|
|
type="number"
|
|
name="amount"
|
|
className="input"
|
|
placeholder="Amount"
|
|
required
|
|
/>
|
|
<button type="submit" className="btn btn-primary">
|
|
Mint
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|