Fix loading state of useTransaction and refactor story

.changeset/lemon-donkeys-battle.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/hooks': patch
+---
+
+Wait for tx to be confirmed inside `useTransaction`

packages/hooks/src/hooks/useTransaction.ts

@@ -2,16 +2,16 @@ import React from 'react';
 
 /**
  * @dev Hook to get the loading status, error, and data of a function call.
- * @param method Function to call
- * @param args an array of arguments to pass to the function
+ * @param method The contract function you want to call
+ * @param args an array of arguments to pass to the function.
  * @returns {
  *  execute: () => Promise<any>,
  *  loading: boolean,
  *  error: null | Error,
  * } {
- *  execute: On calling this method, the function is executed with the passed arguments and the loading status is set to true.
- *  loading: this is true while the function is executing and will be false when the function has finished executing.,
- *  error: this will be null when there is no error and in case of error, it will contain the error object.
+ *  execute: Executes the transaction.
+ *  loading: True until the the transaction is confirmed, false otherwise.
+ *  error: Contains the error object if the transaction failed, null otherwise.
  * }
  */
 
@@ -24,6 +24,8 @@ export function useTransaction(method, args: any[] = []) {
     setError(null);
     try {
       const response = await method(...args);
+      // wait for the transaction to be confirmed
+      await response.wait();
       setError(null);
       setLoading(false);
       return response;

packages/hooks/src/stories/UseTransaction.stories.tsx

@@ -1,4 +1,12 @@
-import { Button, Text, VStack, Input } from '@chakra-ui/react';
+import {
+  Button,
+  Text,
+  VStack,
+  Input,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+} from '@chakra-ui/react';
 import React from 'react';
 import { NETWORKS, Provider, useWallet, useContract } from '..';
 import { useTransaction } from '../hooks';
@@ -66,28 +74,35 @@ const UsingUseContract = () => {
   const contract = useContract(ADDRESS, ABI);
   const [value, setValue] = React.useState('');
 
-  const [greet, greetLoading, greetError] = useTransaction(async () =>
+  const greet = async () => {
     // @ts-expect-error
-    alert(await contract.greet())
-  );
+    const greeting = await contract.greet();
+    alert(greeting);
+  };
 
   // @ts-expect-error
   const [setGreeting, loading, error] = useTransaction(contract.setGreeting, [value]);
 
   if (connected) {
     return (
       <VStack>
-        <Button isLoading={greetLoading} onClick={greet}>
-          Greet
-        </Button>
-        {greetError && <Text color='red'>Error while greeting: {greetError.message}</Text>}
+        <Button onClick={greet}>Greet</Button>
         <Button onClick={disconnectWallet}>Disconnect Wallet</Button>
-        <Text fontSize='lg'>Set Greeting</Text>
-        <Input isDisabled={loading} value={value} onChange={e => setValue(e.target.value)} />
-        <Button isLoading={loading} onClick={setGreeting}>
-          Set Greeting
-        </Button>
-        {error && <Text color='red'>Error while setting greeting: {error.message}</Text>}
+        <FormControl isInvalid={!!error}>
+          <VStack>
+            <FormLabel htmlFor='setGreeting'>Set greeting</FormLabel>
+            <Input
+              id='setGreeting'
+              isDisabled={loading}
+              value={value}
+              onChange={e => setValue(e.target.value)}
+            />
+            <Button type='submit' isLoading={loading} onClick={setGreeting}>
+              Set Greeting
+            </Button>
+            <FormErrorMessage>{error && error.message}</FormErrorMessage>
+          </VStack>
+        </FormControl>
       </VStack>
     );
   }