disable topup when not enough funds

Kredeum · Sep 25, 2023 · 7abb2ab · 7abb2ab
1 parent 69ad579
commit 7abb2ab
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/sveltekit/src/lib/css/styles.css b/sveltekit/src/lib/css/styles.css
@@ -172,7 +172,6 @@ article p {
 	margin: 0;
 }
 
-
 .batch-topUp-infos {
 	display: grid;
 	/* grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr); */
@@ -195,12 +194,12 @@ article p {
 }
 
 .batch-topUp-below {
-  padding-top: 2em;
-  font-style: italic;
+	padding-top: 2em;
+	font-style: italic;
 }
 
 .btn-topup {
-	place-self: center;
+  place-self: center;
 	font-size: 2rem;
 	background-color: var(--color-link);
 	border-color: transparent;
@@ -209,8 +208,15 @@ article p {
 }
 
 .btn.btn-topup:hover {
-	color: var(--color-link);
+  color: var(--color-link);
 	border-color: var(--color-link);
 	background-color: transparent;
 	cursor: pointer;
 }
+
+button:disabled.btn.btn-topup  {
+  cursor: no-drop;
+  border-color: var(--color-link);
+	background-color: transparent;
+}
+
diff --git a/sveltekit/src/routes/+page.svelte b/sveltekit/src/routes/+page.svelte
@@ -21,7 +21,6 @@
 		readRemainingBalance
 	} from '$lib/ts/read.js';
 	import { writeStampsTopUp } from '$lib/ts/writeStamps.js';
-	import { autoSwarmAbi } from '$lib/ts/abis.js';
 
 	let nftMetadataJson: NftMetadata;
 
@@ -33,6 +32,7 @@
 	let duration: bigint;
 	let oneYearBzz: bigint;
 	let depth: number;
+	let disabled: boolean = true;
 
 	let topping = false;
 
@@ -62,6 +62,8 @@
 		oneYearBzz = (lastPrice * BigInt(ONE_YEAR)) / SECONDS_PER_BLOCK;
 		[, depth] = await readBatchLegacy(publicClient);
 
+    disabled = autoSwarmBalance < oneYearBzz;
+
 		const secondsPerBlock = 5n;
 		if (lastPrice > 0) duration = (remainingBalance * secondsPerBlock) / lastPrice;
 	};
@@ -102,7 +104,7 @@
 			<p title="batchId {batchId}">Swarm Storage ends in</p>
 			<p title="{displayTxt(remainingBalance)} seconds">{displayDuration(duration)}</p>
 		</div>
-		<button class="btn btn-topup" on:click={topUp}>
+		<button {disabled} class="btn btn-topup" on:click={topUp}>
 			TopUp 1 Year
 			{#if topping}
 				<i class="fa-solid fa-spinner fa-spin-pulse" />

diff --git a/sveltekit/src/routes/[network]/+page.svelte b/sveltekit/src/routes/[network]/+page.svelte
@@ -65,7 +65,6 @@
 	let bzzNftOwnerBalance: bigint | undefined;
 	let oneDayBzz: bigint | undefined;
 	let addressOrCreated = '';
-	let disabled: boolean = true;
 	let tokenId = 1n;
 
 	const reset = () => {
@@ -181,7 +180,6 @@
 				on:click={() => topUp(30)}>TopUp 1 Month</button
 			>
 			<button
-				{disabled}
 				title="Cost {displayBzzFromBalance(oneDayBzz && oneDayBzz * 365n, depth)} Bzz"
 				on:click={() => topUp(365)}>TopUp 1 Year</button
 			>