feat: add SignMessage component to playground

packages/svelte/src/routes/+page.svelte

@@ -5,6 +5,7 @@ import BlockNumber from './_components/BlockNumber.svelte'
 import Connect from './_components/Connect.svelte'
 import Connections from './_components/Connections.svelte'
 import ReadContract from './_components/ReadContract.svelte'
+import SignMessage from './_components/SignMessage.svelte'
 import SwitchAccount from './_components/SwitchAccount.svelte'
 import SwitchChain from './_components/SwitchChain.svelte'
 </script>
@@ -17,3 +18,4 @@ import SwitchChain from './_components/SwitchChain.svelte'
 <SwitchChain />
 <Connections />
 <ReadContract />
+<SignMessage />

packages/svelte/src/routes/_components/SignMessage.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { useSignMessage } from '$lib/hooks/useSignMessage.svelte.js'
+import type { SignableMessage } from 'viem'
+
+const { data, signMessage } = $derived.by(useSignMessage())
+
+function handleSubmit(event: SubmitEvent) {
+  event.preventDefault()
+  const formData = new FormData(event.target as HTMLFormElement)
+  signMessage({ message: formData.get('message') as SignableMessage })
+}
+</script>
+
+<h2>Sign Message</h2>
+
+<form onsubmit={handleSubmit}>
+    <input name="message" />
+    <button type="submit">Sign Message</button>
+</form>
+
+{#if data}
+    {data}
+{/if}