Initial prototype

src/lib/components/input/publickey.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { PublicKey } from '@wharfkit/antelope';
+	import type { ComponentProps } from 'svelte';
+	import TextInput from './text.svelte';
+
+	interface PublicKeyInputProps extends ComponentProps<TextInput> {
+		valid?: boolean;
+		value: PublicKey | undefined;
+		debug?: boolean;
+	}
+
+	let {
+		autofocus = false,
+		ref = $bindable(),
+		valid = $bindable(false),
+		value: _value = $bindable(),
+		debug = false,
+		...props
+	}: PublicKeyInputProps = $props();
+
+	/** The string value bound to the form input */
+	let input: string = $state('');
+
+	/** The derived public key from the formatted input */
+	const pubkey: PublicKey | undefined = $derived.by(() => {
+		try {
+			return PublicKey.from(input);
+		} catch (e) {
+			return;
+		}
+	});
+
+	/** Validation states */
+	const satisfiesPublicKeyMatch = $derived(
+		String(pubkey) === input || String(pubkey?.toLegacyString()) === input
+	);
+
+	/** Whether or not the input value is valid */
+	const satisfies: boolean = $derived(satisfiesPublicKeyMatch);
+
+	/** Set the input value from a parent */
+	export function set(publickey: string) {
+		input = publickey;
+	}
+
+	/** Set the bindable values on form input changes */
+	$effect(() => {
+		valid = satisfies;
+		if (satisfies) {
+			_value = pubkey;
+		} else {
+			_value = undefined;
+		}
+	});
+
+	if (debug) {
+		$inspect({
+			input,
+			satisfies
+		});
+	}
+</script>
+
+<TextInput bind:ref bind:value={input} {autofocus} {...props} />
+
+{#if debug}
+	<h3>Component State</h3>
+	<pre>
+input (string):   "{input}"
+Public Key:        {pubkey}
+
+---
+
+Valid Input:       {satisfies}
+Valid Public Key:  {satisfiesPublicKeyMatch}
+</pre>
+{/if}