chore: more loading buttons

reown-com · Jul 17, 2024 · 2337106 · 2337106
1 parent f8c68cd
commit 2337106
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 47 deletions.
diff --git a/apps/laboratory/src/components/Wagmi/WagmiSendCallsTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiSendCallsTest.tsx
@@ -29,11 +29,9 @@ export function WagmiSendCallsTest() {
   const [availableCapabilities, setAvailableCapabilities] = useState<
     Record<number, WalletCapabilities> | undefined
   >()
-  const [isLoading, setLoading] = useState(false)
-  const { status, chain, address, connector } = useAccount()
+  const { isConnected, chain, address, connector } = useAccount()
   const toast = useChakraToast()
 
-  const isConnected = status === 'connected'
   const atomicBatchSupportedChains = availableCapabilities
     ? getFilteredCapabilitySupportedChainInfo(
         WALLET_CAPABILITIES.ATOMIC_BATCH,
@@ -52,18 +50,16 @@ export function WagmiSendCallsTest() {
       fetchProviderAndAccountCapabilities(address, connector, chain)
     }
   }, [isConnected, connector, address])
-  const { sendCalls } = useSendCalls({
+  const { sendCalls, isPending } = useSendCalls({
     mutation: {
       onSuccess: hash => {
-        setLoading(false)
         toast({
           title: 'SendCalls Success',
           description: hash,
           type: 'success'
         })
       },
       onError: () => {
-        setLoading(false)
         toast({
           title: 'SendCalls Error',
           description: 'Failed to send calls',
@@ -73,7 +69,6 @@ export function WagmiSendCallsTest() {
     }
   })
   const onSendCalls = useCallback(() => {
-    setLoading(true)
     sendCalls({
       calls: [TEST_TX_1, TEST_TX_2]
     })
@@ -131,7 +126,8 @@ export function WagmiSendCallsTest() {
         data-test-id="send-calls-button"
         onClick={onSendCalls}
         disabled={!sendCalls}
-        isDisabled={isLoading}
+        isDisabled={!isConnected || isPending}
+        isLoading={isPending}
       >
         Send Batch Calls to Vitalik
       </Button>

diff --git a/apps/laboratory/src/components/Wagmi/WagmiSendCallsWithPaymasterServiceTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiSendCallsWithPaymasterServiceTest.tsx
@@ -30,11 +30,9 @@ export function WagmiSendCallsWithPaymasterServiceTest() {
     Record<number, WalletCapabilities> | undefined
   >()
   const [paymasterServiceUrl, setPaymasterServiceUrl] = useState<string>('')
-  const [isLoading, setLoading] = useState(false)
-  const { status, chain, address, connector } = useAccount()
+  const { isConnected, chain, address, connector } = useAccount()
   const toast = useChakraToast()
 
-  const isConnected = status === 'connected'
   const paymasterServiceSupportedChains = availableCapabilities
     ? getFilteredCapabilitySupportedChainInfo(
         WALLET_CAPABILITIES.PAYMASTER_SERVICE,
@@ -53,18 +51,16 @@ export function WagmiSendCallsWithPaymasterServiceTest() {
       fetchProviderAndAccountCapabilities(address, connector, chain)
     }
   }, [isConnected, connector, address])
-  const { sendCalls } = useSendCalls({
+  const { sendCalls, isPending } = useSendCalls({
     mutation: {
       onSuccess: hash => {
-        setLoading(false)
         toast({
           title: 'SendCalls Success',
           description: hash,
           type: 'success'
         })
       },
       onError: () => {
-        setLoading(false)
         toast({
           title: 'SendCalls Error',
           description: 'Failed to send calls',
@@ -75,7 +71,6 @@ export function WagmiSendCallsWithPaymasterServiceTest() {
   })
 
   const onSendCalls = useCallback(() => {
-    setLoading(true)
     if (!paymasterServiceUrl) {
       throw Error('paymasterServiceUrl not set')
     }
@@ -142,7 +137,7 @@ export function WagmiSendCallsWithPaymasterServiceTest() {
           placeholder="http://api.pimlico.io/v2/sepolia/rpc?apikey=..."
           onChange={e => setPaymasterServiceUrl(e.target.value)}
           value={paymasterServiceUrl}
-          isDisabled={isLoading}
+          isDisabled={isPending}
           whiteSpace="nowrap"
           textOverflow="ellipsis"
         />
@@ -152,7 +147,8 @@ export function WagmiSendCallsWithPaymasterServiceTest() {
         data-test-id="send-calls-paymaster-service-button"
         onClick={onSendCalls}
         disabled={!sendCalls}
-        isDisabled={isLoading || !paymasterServiceUrl}
+        isDisabled={!isConnected || isPending || !paymasterServiceUrl}
+        isLoading={isPending}
       >
         SendCalls w/ Paymaster Service
       </Button>

diff --git a/apps/laboratory/src/components/Wagmi/WagmiSendUSDCTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiSendUSDCTest.tsx
@@ -32,24 +32,21 @@ const minTokenAbi = [
 ]
 
 export function WagmiSendUSDCTest() {
-  const [isLoading, setLoading] = useState(false)
   const [address, setAddress] = useState('')
   const [amount, setAmount] = useState('')
-  const { status, chain } = useAccount()
+  const { isConnected, chain } = useAccount()
   const toast = useChakraToast()
 
-  const { writeContract } = useWriteContract({
+  const { writeContract, isPending } = useWriteContract({
     mutation: {
       onSuccess: hash => {
-        setLoading(false)
         toast({
           title: 'Transaction Success',
           description: hash,
           type: 'success'
         })
       },
       onError: () => {
-        setLoading(false)
         toast({
           title: 'Error',
           description: 'Failed to send transaction',
@@ -60,7 +57,6 @@ export function WagmiSendUSDCTest() {
   })
 
   const onSendTransaction = useCallback(() => {
-    setLoading(true)
     writeContract({
       abi: minTokenAbi,
       functionName: 'transfer',
@@ -71,7 +67,7 @@ export function WagmiSendUSDCTest() {
 
   const allowedChains = [sepolia.id, optimism.id] as number[]
 
-  return allowedChains.includes(Number(chain?.id)) && status === 'connected' ? (
+  return allowedChains.includes(Number(chain?.id)) && isConnected ? (
     <Stack direction={['column', 'column', 'row']}>
       <Spacer />
       <Input placeholder="0xf34ffa..." onChange={e => setAddress(e.target.value)} value={address} />
@@ -85,13 +81,14 @@ export function WagmiSendUSDCTest() {
         data-test-id="sign-transaction-button"
         onClick={onSendTransaction}
         disabled={!writeContract}
-        isDisabled={isLoading}
+        isDisabled={!isConnected || isPending}
+        isLoading={isPending}
         width="80%"
       >
         Send USDC
       </Button>
       <Link isExternal href="https://faucet.circle.com">
-        <Button variant="outline" colorScheme="blue" isDisabled={isLoading}>
+        <Button variant="outline" colorScheme="blue">
           USDC Faucet
         </Button>
       </Link>

diff --git 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, status: signStatus } = 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() {
@@ -35,8 +34,8 @@ export function WagmiSignMessageTest() {
       <Button
         data-testid="sign-message-button"
         onClick={onSignMessage}
-        isDisabled={!isConnected}
-        isLoading={signStatus === 'pending'}
+        isDisabled={!isConnected || isPending}
+        isLoading={isPending}
       >
         Sign Message
       </Button>

diff --git 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>

diff --git a/apps/laboratory/src/components/Wagmi/WagmiTransactionTest.tsx b/apps/laboratory/src/components/Wagmi/WagmiTransactionTest.tsx
@@ -2,7 +2,7 @@ import { Button, Stack, Link, Text, Spacer } from '@chakra-ui/react'
 import { parseGwei, type Address } from 'viem'
 import { useEstimateGas, useSendTransaction, useAccount } from 'wagmi'
 import { vitalikEthAddress } from '../../utils/DataUtil'
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import { optimism, optimismSepolia, sepolia } from 'wagmi/chains'
 import { useChakraToast } from '../Toast'
 
@@ -13,23 +13,19 @@ const TEST_TX = {
 
 export function WagmiTransactionTest() {
   const toast = useChakraToast()
-  const { status, chain } = useAccount()
+  const { isConnected, chain } = useAccount()
   const { data: gas, error: prepareError } = useEstimateGas(TEST_TX)
-  const [isLoading, setLoading] = useState(false)
-  const isConnected = status === 'connected'
 
-  const { sendTransaction } = useSendTransaction({
+  const { sendTransaction, isPending } = useSendTransaction({
     mutation: {
       onSuccess: hash => {
-        setLoading(false)
         toast({
           title: 'Transaction Success',
           description: hash,
           type: 'success'
         })
       },
       onError: () => {
-        setLoading(false)
         toast({
           title: 'Error',
           description: 'Failed to sign transaction',
@@ -47,7 +43,6 @@ export function WagmiTransactionTest() {
         type: 'error'
       })
     } else {
-      setLoading(true)
       sendTransaction({
         ...TEST_TX,
         gas
@@ -57,27 +52,28 @@ export function WagmiTransactionTest() {
 
   const allowedChains = [sepolia.id, optimism.id, optimismSepolia.id] as number[]
 
-  return allowedChains.includes(Number(chain?.id)) && status === 'connected' ? (
+  return allowedChains.includes(Number(chain?.id)) && isConnected ? (
     <Stack direction={['column', 'column', 'row']}>
       <Button
         data-test-id="sign-transaction-button"
         onClick={onSendTransaction}
         disabled={!sendTransaction}
-        isDisabled={isLoading || !isConnected}
+        isDisabled={!isConnected || isPending}
+        isLoading={isPending}
       >
         Send Transaction to Vitalik
       </Button>
 
       <Spacer />
 
       <Link isExternal href="https://sepoliafaucet.com">
-        <Button variant="outline" colorScheme="blue" isDisabled={isLoading}>
+        <Button variant="outline" colorScheme="blue">
           Sepolia Faucet 1
         </Button>
       </Link>
 
       <Link isExternal href="https://www.infura.io/faucet/sepolia">
-        <Button variant="outline" colorScheme="orange" isDisabled={isLoading}>
+        <Button variant="outline" colorScheme="orange">
           Sepolia Faucet 2
         </Button>
       </Link>