feat(site): spinners

site/src/lib/PulseSpinner.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+type SpinnerTypes = {
+	size: string | number;
+	color: string;
+	unit: string;
+	duration: string;
+	pause: boolean;
+};
+
+type Circle2Types = {
+	colorOuter: string;
+	colorCenter: string;
+	colorInner: string;
+	durationMultiplier: number;
+	durationOuter: string;
+	durationInner: string;
+	durationCenter: string;
+} & SpinnerTypes;
+
+type Circle3Types = {
+	ballTopLeft: string;
+	ballTopRight: string;
+	ballBottomLeft: string;
+	ballBottomRight: string;
+} & SpinnerTypes;
+
+
+	type HEX = string;
+
+const durationUnitRegex = /[a-zA-Z]/;
+
+const calculateRgba = (color: HEX, opacity: number): string => {
+	if (color[0] === '#') {
+		color = color.slice(1);
+	}
+
+	if (color.length === 3) {
+		let res = '';
+		color.split('').forEach((c: string) => {
+			res += c;
+			res += c;
+		});
+		color = res;
+	}
+
+	const rgbValues = (color.match(/.{2}/g) || []).map((hex: HEX) => parseInt(hex, 16)).join(', ');
+
+	return `rgba(${rgbValues}, ${opacity})`;
+};
+
+const range = (size: number, startAt = 0) => [...Array(size).keys()].map((i) => i + startAt);
+
+
+	
+	export let color: SpinnerTypes['color'] = '#00FFF0';
+	export let unit: SpinnerTypes['unit'] = 'px';
+	export let duration: SpinnerTypes['duration'] = '1.5s';
+	export let size: SpinnerTypes['size'] = '60';
+	export let pause: SpinnerTypes['pause'] = false;
+	let durationUnit: string = duration.match(durationUnitRegex)?.[0] ?? 's';
+	let durationNum: string = duration.replace(durationUnitRegex, '');
+</script>
+
+<div class="wrapper" style="--size: {size}{unit}; --color: {color}; --duration: {duration}">
+	{#each range(3, 0) as version}
+		<div
+			class="cube"
+			class:pause-animation={pause}
+			style="animation-delay: {version * (+durationNum / 10)}{durationUnit}; left: {version *
+				(+size / 3 + +size / 15) +
+				unit};"
+		/>
+	{/each}
+</div>
+
+<style>
+	.wrapper {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: var(--size);
+		height: calc(var(--size) / 2.5);
+	}
+	.cube {
+		position: absolute;
+		top: 0px;
+		width: calc(var(--size) / 5);
+		height: calc(var(--size) / 2.5);
+		background-color: var(--color);
+		animation: motion var(--duration) cubic-bezier(0.895, 0.03, 0.685, 0.22) infinite;
+	}
+	.pause-animation {
+		animation-play-state: paused;
+	}
+	@keyframes motion {
+		0% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+</style>

site/src/lib/transferDemo.ts

@@ -101,7 +101,7 @@ export const sendUnoToUnionAddress = async () => {
 	console.log(txResponse);
 };
 
-const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+export const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 
 const balanceWorker = async (fetcher: () => Promise<void>, interval: number) => {
 	while (true) {

site/src/routes/blog/start-of-the-endgame/FaucetButton.svelte

@@ -1,10 +1,50 @@
 <script lang="ts">
 	import DemoButton from "$lib/DemoButton.svelte";
 	import TerminalContainer from "$lib/TerminalContainer.svelte";
+	import PulseSpinner from "$lib/PulseSpinner.svelte";
 	import { getUnoFromFaucet } from "$lib/transferDemo";
+	import { get, writable } from "svelte/store";
+	import type { Writable } from "svelte/store";
+	import { connectedToUnion } from "$lib/stores/wallets";
+	import { unionUnoBalance } from "$lib/stores/wallets"; 
+	import AddressesAndBalances from "./AddressesAndBalances.svelte";
+
+	let loading: Writable<boolean> = writable(false);
+	let fetchedFromFaucet: Writable<boolean> = writable(false);
+
+	const clickHandler = async () => {
+		loading.set(true);
+		await getUnoFromFaucet();
+		const currentBalance = get(unionUnoBalance);
+		if (currentBalance === null) {
+			return;
+		}
+		unionUnoBalance.subscribe((newBalance) => {
+			if (newBalance !== null && BigInt(newBalance.amount) > BigInt(currentBalance.amount)) {
+				loading.set(false);
+				fetchedFromFaucet.set(true);
+			}
+			});
+	};
 </script>
 
 
 <TerminalContainer>
-	<DemoButton on:click={getUnoFromFaucet}>Get UNO from faucet</DemoButton>
+	{#if !$connectedToUnion || $unionUnoBalance == null}
+		Complete the previous steps to continue
+	{:else}
+		{#if $loading}
+
+			<div class="flex gap-4 h-[48px] items-center">
+				<div>Requesting UNO from faucet</div>
+				<PulseSpinner/>
+			</div>
+		{:else if $fetchedFromFaucet}
+			<div class="flex gap-4 h-[48px] items-center">
+				<div>✅ Received UNO from faucet, new balance is <span class="text-accent">{$unionUnoBalance.amount}</span></div> 
+			</div>
+		{:else}
+				<DemoButton on:click={clickHandler}>Get UNO from faucet</DemoButton>
+		{/if}
+	{/if}
 </TerminalContainer>