From a92455082ca80998ea3f2a9ff78674a6837f0346 Mon Sep 17 00:00:00 2001
From: Doug Richar <drichar@gmail.com>
Date: Fri, 11 Aug 2023 06:45:27 -0400
Subject: [PATCH] feat: update Send button disabled state, animate feedback msg

---
 src/components/SendTransaction.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/SendTransaction.tsx b/src/components/SendTransaction.tsx
index a8b0566..445f2b6 100644
--- a/src/components/SendTransaction.tsx
+++ b/src/components/SendTransaction.tsx
@@ -3,6 +3,7 @@ import algosdk from 'algosdk'
 import { useState } from 'react'
 import PartyTime from '@/components/PartyTime'
 import algodClient from '@/lib/algodClient'
+import { classNames } from '@/utils'
 
 type Status = 'idle' | 'signing' | 'sending' | 'success' | 'error'
 
@@ -10,6 +11,8 @@ export default function SendTransaction() {
   const [status, setStatus] = useState<Status>('idle')
   const [showConfetti, setShowConfetti] = useState(false)
 
+  const statusInFlight = ['signing', 'sending'].includes(status)
+
   const { activeAddress, signTransactions, sendTransactions } = useWallet()
 
   const sendTransaction = async () => {
@@ -89,12 +92,17 @@ export default function SendTransaction() {
             type="button"
             className="rounded-full bg-teal-600/90 px-6 py-2 font-beni text-white text-4xl tracking-wide shadow-lg shadow-zinc-800/5 ring-1 ring-teal-500/75 backdrop-blur transition hover:bg-teal-600 hover:text-white hover:ring-teal-300 sm:text-5xl sm:px-7 sm:py-2.5 xl:text-6xl xl:px-9 xl:py-3 disabled:opacity-50 disabled:pointer-events-none"
             onClick={sendTransaction}
-            disabled={status !== 'idle'}
+            disabled={statusInFlight}
           >
             Send Transaction
           </button>
         </div>
-        <p className="font-beni text-white/75 text-5xl tracking-wide xs:text-6xl sm:text-7xl">
+        <p
+          className={classNames(
+            'font-beni text-white/75 text-5xl tracking-wide xs:text-6xl sm:text-7xl',
+            statusInFlight ? 'animate-pulse' : ''
+          )}
+        >
           {renderStatus()}
         </p>
       </div>