with balance
This commit is contained in:
rodič
0bdeaa1bc0
revize
89de964832
Rozdílový obsah nebyl zobrazen, protože některé řádky jsou příliš dlouhá
Za Šířka: | Výška: | Velikost: 6.4 KiB |
52
src/App.tsx
52
src/App.tsx
|
@ -90,21 +90,31 @@ export function App() {
|
|||
getEligibilityData();
|
||||
}, [address]);
|
||||
|
||||
function revalidate() {
|
||||
}
|
||||
|
||||
//console.log(isEligible);
|
||||
|
||||
return (
|
||||
<>
|
||||
<section>
|
||||
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center opacity-70">
|
||||
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium">
|
||||
Soulbound
|
||||
<br />
|
||||
<p className="font-bold text-[#3441c0]">ETH Faucet</p>
|
||||
</h1>
|
||||
<div className="flex flex-col">
|
||||
<img className="w-48 -ml-2" src="logo.svg" />
|
||||
|
||||
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
|
||||
Soulbound
|
||||
<br />
|
||||
<p className="font-bold text-[#3441c0]">ETH Faucet</p>
|
||||
</h1>
|
||||
</div>
|
||||
{!isEligible && isConnected && (
|
||||
<div className="my-4 text-xs">
|
||||
We cannot find a Soubound token in your wallet.{" "}
|
||||
<a
|
||||
className="font-bold underline"
|
||||
href="https://mint.ethbrno.cz/"
|
||||
>
|
||||
Mint yours here.
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{isConnected && (
|
||||
<div className="flex items-baseline my-6">
|
||||
<div className="space-x-6 flex text-sm font-medium">
|
||||
|
@ -160,17 +170,6 @@ export function App() {
|
|||
>
|
||||
Connect
|
||||
</button>
|
||||
<button
|
||||
className={isEligible || !isConnected
|
||||
? `whitebtn`
|
||||
: `redbtn`}
|
||||
onClick={() => {
|
||||
revalidate;
|
||||
}}
|
||||
disabled={isFetching != "none" || isEligible}
|
||||
>
|
||||
Validate
|
||||
</button>
|
||||
<button
|
||||
className={isEligible ? `greenbtn` : `whitebtn`}
|
||||
onClick={() => initiateTokenFall()}
|
||||
|
@ -188,17 +187,6 @@ export function App() {
|
|||
<Connect />
|
||||
</div>
|
||||
)}
|
||||
{!isEligible && (
|
||||
<div className="my-4 text-xs">
|
||||
We cannot find a Soubound token in your wallet.{" "}
|
||||
<a
|
||||
className="font-bold underline"
|
||||
href="https://mint.ethbrno.cz/"
|
||||
>
|
||||
Mint yours here.
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="lg:max-w-lg lg:w-full md:w-1/3 w-5/6 flex justify-center">
|
||||
<img
|
||||
|
|
|
@ -1,14 +1,48 @@
|
|||
export interface BalanceType {
|
||||
balance: number;
|
||||
network: string;
|
||||
quota: Object;
|
||||
quota: {
|
||||
quota: number;
|
||||
used: number;
|
||||
};
|
||||
}
|
||||
|
||||
export function Balance(props: BalanceType[]) {
|
||||
console.log(props);
|
||||
const nets = Object.values(props);
|
||||
console.log(nets);
|
||||
|
||||
return (
|
||||
<>
|
||||
Balance
|
||||
<section className="text-gray-900 body-font w-full bg-white/20 my-4 p-4 border-white/20 border">
|
||||
<div className="container divide-y mx-auto">
|
||||
{nets.map((net) => {
|
||||
return (
|
||||
<div
|
||||
key={net.network}
|
||||
className="flex flex-wrap text-left"
|
||||
>
|
||||
<div className="p-4 sm:w-1/3 w-1/2">
|
||||
<h2 className="title-font font-medium sm:text-2xl text-3xl">
|
||||
{net.network}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 sm:w-1/3 w-1/2">
|
||||
<h2 className="title-font font-medium sm:text-4xl text-3xl">
|
||||
{Number(net.balance).toFixed(2)} Ξ
|
||||
</h2>
|
||||
<p className="leading-relaxed">Balance</p>
|
||||
</div>
|
||||
<div className="p-4 sm:w-1/3 w-1/2">
|
||||
<h2 className="title-font font-medium sm:text-4xl text-3xl">
|
||||
{net.quota.used} of {net.quota.quota}
|
||||
</h2>
|
||||
<p className="leading-relaxed">Requests used</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.greenbtn {
|
||||
@apply px-6 h-12 uppercase font-semibold tracking-wider border-2 border-black bg-[#3441c0] text-white hover:border-[#3441c0] disabled:opacity-10;
|
||||
@apply px-6 h-12 uppercase font-semibold tracking-wider border-2 border-[#3441c0] bg-[#3441c0] text-white hover:border-white disabled:opacity-10;
|
||||
}
|
||||
|
||||
.whitebtn {
|
||||
|
|
Načítá se…
Odkázat v novém úkolu