From 4e5d2f1a6cd7b643a956fcc115f7e8bd74f1233d Mon Sep 17 00:00:00 2001
From: Chris Smith <chris@walletconnect.com>
Date: Tue, 16 Jul 2024 14:36:31 -0700
Subject: [PATCH] chore: lab loading indicator

---
 .../src/components/Wagmi/WagmiSignMessageTest.tsx    | 12 ++++++++----
 .../src/components/Wagmi/WagmiSignTypedDataTest.tsx  |  8 ++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx
index a2bf5cbe54..1f33ae7963 100644
--- a/apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx
+++ b/apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx
@@ -7,9 +7,8 @@ import { useChakraToast } from '../Toast'
 export function WagmiSignMessageTest() {
   const toast = useChakraToast()
 
-  const { signMessageAsync } = useSignMessage()
-  const { status } = useAccount()
-  const isConnected = status === 'connected'
+  const { signMessageAsync, isPending } = useSignMessage()
+  const { isConnected } = useAccount()
   const [signature, setSignature] = React.useState<string | undefined>()
 
   async function onSignMessage() {
@@ -32,7 +31,12 @@ export function WagmiSignMessageTest() {
 
   return (
     <>
-      <Button data-testid="sign-message-button" onClick={onSignMessage} isDisabled={!isConnected}>
+      <Button
+        data-testid="sign-message-button"
+        onClick={onSignMessage}
+        isDisabled={!isConnected || isPending}
+        isLoading={isPending}
+      >
         Sign Message
       </Button>
       <div data-testid="w3m-signature" hidden>
diff --git a/apps/laboratory/src/components/Wagmi/WagmiSignTypedDataTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiSignTypedDataTest.tsx
index 00aa4a3b30..9b51997a8e 100644
--- a/apps/laboratory/src/components/Wagmi/WagmiSignTypedDataTest.tsx
+++ b/apps/laboratory/src/components/Wagmi/WagmiSignTypedDataTest.tsx
@@ -29,16 +29,15 @@ const message = {
 
 export function WagmiSignTypedDataTest() {
   const toast = useChakraToast()
-  const { chain, status } = useAccount()
+  const { chain, isConnected } = useAccount()
   const domain = {
     name: 'Ether Mail',
     version: '1',
     chainId: chain?.id,
     verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC'
   } as const
-  const isConnected = status === 'connected'
 
-  const { signTypedDataAsync } = useSignTypedData()
+  const { signTypedDataAsync, isPending } = useSignTypedData()
 
   async function onSignTypedData() {
     try {
@@ -66,7 +65,8 @@ export function WagmiSignTypedDataTest() {
     <Button
       data-testid="sign-typed-data-button"
       onClick={onSignTypedData}
-      isDisabled={!isConnected}
+      isDisabled={!isConnected || isPending}
+      isLoading={isPending}
     >
       Sign Typed Data
     </Button>