Add bx & tx forms

Add ethers dep Move ConnectButton to page for simplicity

Closes #5 (closed) #6 (closed) #7 (closed) #8 (closed)

src/lib/components/BehaviorForm.svelte

+<script lang="ts">
+	import { generateCurlSnippetSendBehavior } from '$lib/utils/curl';
+	import { Confetti } from 'svelte-confetti';
+
+	export let signData = (timestamp: number, quantity: number, input: string) => {
+		return new Promise(() => {
+			'x';
+		});
+	};
+	export let sendBx = (to: string, value: number): Promise<string> => {
+		return new Promise(() => {
+			signedData;
+		});
+	};
+	export let rpcUrl: string;
+	let signedData = '';
+	let quantity: number;
+	let timestamp: number;
+	let showConfetti = false;
+
+	let showCurl: boolean;
+	let curlSnippet: string;
+</script>
+
+<div class="py-4 px-4 mx-auto max-w-2xl lg:py-8">
+	<h2 class="mb-4 text-xl font-bold">Behavior</h2>
+	<form action="#">
+		<div class="grid gap-4 sm:grid-cols-2 sm:gap-6">
+			<div class="sm:col-span-2">
+				<label
+					for="behavior-data"
+					class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Raw hex data</label
+				>
+				<textarea
+					id="behavior-data"
+					rows="8"
+					class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+					placeholder="4C494D4F53
+"
+				/>
+			</div>
+			<div class="sm:col-span-2">
+				<label
+					for="behavior-quantity"
+					class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Quantity</label
+				>
+				<input
+					type="number"
+					name="behavior-quantity"
+					id="behavior-quantity"
+					min="0"
+					class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+					placeholder="3 km"
+					bind:value={quantity}
+					required
+				/>
+			</div>
+			<div class="sm:col-span-2">
+				<label
+					for="behavior-datetime"
+					class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date & Time</label
+				>
+				<input
+					type="datetime-local"
+					name="behavior-datetime"
+					id="behavior-datetime"
+					class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+					placeholder=" {Date.now()}"
+					bind:value={timestamp}
+					required
+				/>
+			</div>
+		</div>
+		<div class="flex flex-row sm:mt-6 mt-4 items-center justify-items-center">
+			<button
+				type="button"
+				on:click={async () => {
+					showCurl = true;
+					curlSnippet = generateCurlSnippetSendBehavior(rpcUrl, 63, '');
+					await navigator.clipboard
+						.writeText(curlSnippet)
+						.then(function () {
+							console.log('Copied to clipboard');
+						})
+						.catch(function (err) {
+							console.error(err);
+						});
+				}}
+				class="py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+				>Show cURL</button
+			>
+
+			<button
+				type="button"
+				disabled={signedData == undefined}
+				on:click={async () => {
+					signedData = await signData('');
+				}}
+				class="text-blue-700 hover:text-white border disabled:hover:bg-white disabled:hover:text-blue-700 disabled:cursor-not-allowed border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
+				>Sign</button
+			>
+			<button
+				type="button"
+				disabled={!signedData}
+				on:click={async () => {
+					showConfetti = false;
+					const bx = await sendBx(signedData);
+					if (bx) {
+						showConfetti = true;
+					}
+				}}
+				class="text-blue-700 hover:text-white border disabled:hover:bg-white disabled:hover:text-blue-700 disabled:cursor-not-allowed border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
+				>Send
+				{#if showConfetti}
+					<Confetti />
+				{/if}</button
+			>
+		</div>
+		{#if showCurl}
+			<p class="break-all">{curlSnippet}</p>
+		{/if}
+	</form>
+</div>