feat(site): send uno to ethereum state management

unionlabs · Oct 18, 2023 · e77eabc · e77eabc
1 parent 6301325
commit e77eabc
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/site/src/lib/transferDemo.ts b/site/src/lib/transferDemo.ts
@@ -117,12 +117,11 @@ export const startBalanceWorkers = () => {
 };
 
 export const toFixedPoint = (value: bigint, decimals: number) => {
-	let right = BigInt(value) % BigInt(10**decimals);
+	let right = BigInt(value) % BigInt(10 ** decimals);
 	let left = BigInt(value) - right;
 
-	return left.toString()
-		.concat(".", right.toString().padStart(decimals, "0"))
-}
+	return left.toString().concat('.', right.toString().padStart(decimals, '0'));
+};
 
 export const updateUnionUnoBalance = async () => {
 	const sgClient = get(stargateClient);
@@ -179,7 +178,7 @@ export const sendUnoToEthereum = async () => {
 		return;
 	}
 
-	await cwClient.execute(
+	return cwClient.execute(
 		uAccount.address,
 		UCS01_RELAY_CONTRACT,
 		{

diff --git a/site/src/routes/blog/start-of-the-endgame/TransferUnoToEthereum.svelte b/site/src/routes/blog/start-of-the-endgame/TransferUnoToEthereum.svelte
@@ -2,8 +2,52 @@
 	import DemoButton from "$lib/DemoButton.svelte";
 	import { sendUnoToEthereum } from "$lib/transferDemo";
 	import TerminalContainer from "$lib/TerminalContainer.svelte";
+
+	import { sendingUnoToEthereum } from './demoStore';
+	import PulseSpinner from "$lib/PulseSpinner.svelte";
+	import type { ExecuteResult } from "@cosmjs/cosmwasm-stargate";
+	import { ethereumEthBalance, ethereumUnoBalance } from "$lib/stores/wallets";
+	import { get } from "svelte/store";
+
+	const clickHandler = async () => {
+		sendingUnoToEthereum.set('sending');
+		let result: ExecuteResult | undefined = undefined;
+		try {
+			result = await sendUnoToEthereum();
+		} catch {
+			sendingUnoToEthereum.set('start');
+		}
+		if (result === undefined) {
+			return;
+		}
+
+		const currentEthereumUnoBalance = get(ethereumUnoBalance);
+
+		ethereumUnoBalance.subscribe((balance) => {
+			if (balance > currentEthereumUnoBalance) {
+				sendingUnoToEthereum.set('done');
+			}
+		});
+
+	};
 </script>
 
 <TerminalContainer>
-	<DemoButton on:click={sendUnoToEthereum}>Send UNO to Ethereum</DemoButton>
+	{#if $ethereumUnoBalance === null}
+		<div>Complete the previous steps to continue</div>
+	{:else}
+		{#if $sendingUnoToEthereum === 'sending'}
+			<div class="flex gap-4 h-[48px] items-center">
+				<div>Sending UNO to Ethereum</div>
+				<PulseSpinner/>
+			</div>
+		{:else if $sendingUnoToEthereum === 'start'}
+			<DemoButton on:click={clickHandler}>Send UNO to Ethereum</DemoButton>
+		{:else if $sendingUnoToEthereum === 'done'} 
+			<div class="flex gap-4 h-[48px] items-center">
+				<div>✅ Received UNO on Sepolia, new balance is <span class="text-accent">{$ethereumUnoBalance}</span>muno</div> 
+			</div>
+
+		{/if}
+	{/if}
 </TerminalContainer>
diff --git a/site/src/routes/blog/start-of-the-endgame/demoStore.ts b/site/src/routes/blog/start-of-the-endgame/demoStore.ts
@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+import type { Writable } from 'svelte/store';
+
+export const sendingUnoToEthereum: Writable<'start' | 'sending' | 'done'> = writable('start');