Refactor useTransaction hook's execute fn's API (#234)

* Refactor `useTransaction` hook's `execute` fn's API

* Update stories

Author: Dhaiwat10

.changeset/tidy-goats-rule.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/hooks': minor
+---
+
+You can now pass in your arguments directly to the execute function in useTransaction.

packages/hooks/README.md

@@ -89,9 +89,9 @@ if (isReady) {
 
 ### useTransaction
 
-The `useTransaction` hook takes in a contract function and a list of arguments to pass to it. It returns an array of three elements:
+The `useTransaction` hook takes in a contract function. It returns an array of three elements:
 
-- `execute`: Calling this function will execute the transaction.
+- `execute`: Calling this function will execute the transaction. You should pass your arguments/parameters to this function as an array.
 
 - `loading`: Will be true when the transaction is executing and will be false once the transaction has been confirmed.
 
@@ -101,14 +101,14 @@ The `useTransaction` hook takes in a contract function and a list of arguments t
 import { useTransaction, useContract } from '@web3-ui/hooks';
 
 const greeterContract = useContract('CONTRACT_ADDRESS', 'CONTRACT_ABI');
-const [execute, loading, error] = useTransaction(greeter.setGreeting, [
+const [execute, loading, error] = useTransaction(greeter.setGreeting);
+
+await execute([
   'Hello, world!',
   {
     value: ethers.utils.parseEther('0.1') // you can also use this for payable transactions
   }
-]);
-
-execute(); // will execute the transaction
+]); // will execute the transaction
 ```
 
 ---

packages/hooks/src/hooks/useTransaction.ts

@@ -3,9 +3,8 @@ import React from 'react';
 /**
  * @dev Hook to get the loading status, error, and data of a function call.
  * @param method The contract function you want to call
- * @param args an array of arguments to pass to the function.
  * @returns {
- *  execute: () => Promise<any>,
+ *  execute: (args: any[]) => Promise<any>,
  *  loading: boolean,
  *  error: null | Error,
  * } {
@@ -15,11 +14,13 @@ import React from 'react';
  * }
  */
 
-export function useTransaction(method, args: any[] = []) {
+export function useTransaction(
+  method
+): [(args: any[]) => Promise<any>, boolean, any] {
   const [loading, setLoading] = React.useState<boolean>(false);
   const [error, setError] = React.useState<any>(null);
 
-  const execute = async () => {
+  const execute = async (args: any[]) => {
     setLoading(true);
     setError(null);
     try {

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

@@ -81,9 +81,7 @@ const UsingUseContract = () => {
   };
 
   // @ts-expect-error
-  const [setGreeting, loading, error] = useTransaction(contract.setGreeting, [
-    value
-  ]);
+  const [setGreeting, loading, error] = useTransaction(contract.setGreeting);
 
   if (connected) {
     return (
@@ -99,7 +97,11 @@ const UsingUseContract = () => {
               value={value}
               onChange={e => setValue(e.target.value)}
             />
-            <Button type="submit" isLoading={loading} onClick={setGreeting}>
+            <Button
+              type="submit"
+              isLoading={loading}
+              onClick={() => setGreeting([value])}
+            >
               Set Greeting
             </Button>
             <FormErrorMessage>{error && error.message}</FormErrorMessage>