some minor ux impros

src/lib/Signer.svelte

@@ -1,23 +1,21 @@
 <script lang="ts">
   import { signMessageWithPKP } from "$lib/services/signMessage";
-  import { walletState, messageToSign, messageSignature } from "$lib/stores.js";
+  import { walletState, signRequest } from "$lib/stores.js";
 
   let currentPKP;
   let sessionSigs;
   let message;
   let signature;
+  let status = "WAITING FOR SIGNATURE";
 
   walletState.subscribe((value) => {
     currentPKP = value.pkps[0];
     sessionSigs = value.sessionSigs;
   });
 
-  messageToSign.subscribe((value) => {
-    message = value;
-  });
-
-  messageSignature.subscribe((value) => {
-    signature = value;
+  signRequest.subscribe((value) => {
+    message = value.messageToSign;
+    signature = value.signature;
   });
 
   async function signMessage() {
@@ -25,17 +23,27 @@
     if (result.error) {
       console.error(result.error);
     } else {
-      messageSignature.set(result.messageSignature);
+      (status = "SIGNED"),
+        signRequest.set({
+          messageToSign: message,
+          signature: result.messageSignature,
+          drawer: true,
+        });
     }
   }
 
   function declineSign() {
-    messageSignature.set(null);
+    signRequest.set({
+      messageToSign: {},
+      signature: null,
+      drawer: false,
+    });
   }
 </script>
 
 <div class="flex flex-col items-center justify-center h-full space-y-4">
-  <p class="text-lg break-words">{JSON.stringify(message)}</p>
+  <p class="text-sm font-bold">{status}</p>
+  <p class="text-lg break-words max-w-2/3">{JSON.stringify(message)}</p>
   {#if signature}
     <p class="text-sm font-bold break-words">
       Signature: {JSON.stringify(signature)}

src/lib/Wallet.svelte

@@ -3,14 +3,12 @@
   import walletMachine from "./machines/walletMachine";
   import { onMount } from "svelte";
   import Icon from "@iconify/svelte";
-  import { walletState } from "./stores";
-  import { messageToSign } from "./stores";
+  import { walletState, signRequest } from "./stores";
 
   import {
     signInWithGoogle,
     startSignIn as startSignInService,
   } from "./services/signInWithGoogle";
-  import Signer from "./Signer.svelte";
   import { getDrawerStore } from "@skeletonlabs/skeleton";
 
   const { state, send } = useMachine(walletMachine);
@@ -45,13 +43,24 @@
     send("LOGOUT");
   }
 
-  function signRequest() {
+  function signRequestTrigger() {
+    signRequest.set({
+      status: "SIGN REQUEST",
+      messageToSign: { hello: "test" },
+      signature: null,
+      drawer: true,
+    });
+  }
+
+  $: if ($signRequest.drawer) {
     const settings = { position: "bottom", id: "signMessage" };
     drawerStore.open(settings);
-    messageToSign.set({ hello: "test" });
+  } else {
+    drawerStore.close();
   }
 </script>
 
+<!-- ... existing markup ... -->
 {#if $state.matches("sessionAvailable") || $state.matches("creatingSession") || $state.matches("signIn")}
   {#if $state.matches("signIn")}
     <div class="w-1/3">
@@ -80,8 +89,10 @@
             </p>
           </div>
         </div>
-        <button on:click={signRequest} type="button" class="btn variant-filled"
-          >SignRequest</button
+        <button
+          on:click={signRequestTrigger}
+          type="button"
+          class="btn variant-filled">SignRequest</button
         >
         <button type="button" class="btn variant-filled" on:click={clearSession}
           >Logout</button

src/lib/stores.js

@@ -4,10 +4,12 @@ export const redirectStore = writable(false);
 
 export const walletState = writable(null);
 
-export const messageToSign = writable(null);
-
-export const messageSignature = writable(null);
+export const signRequest = writable({
+  messageToSign: {},
+  signature: null,
+  drawer: false
+});
 
 export const googleSession = writable({
-    activeSession: false
-  });
+  activeSession: false
+});