refactor: Receive any argumentss on execute method from useTransaction (#276)

* Receive any argumentss on execute method from useTransaction

* Create strong-suns-sort.md

Author: berteotti

.changeset/strong-suns-sort.md

@@ -0,0 +1,12 @@
+---
+"@web3-ui/hooks": minor
+---
+
+You can now pass in args to the exec fn in useTransaction just like you would with ethers. You don't need to pass it all inside an array anymore.
+
+```tsx
+execute(['Hello', { value: '10' }]);
+
+// is now
+execute('Hello', { value: '10' });
+```

packages/hooks/README.md

@@ -175,12 +175,9 @@ import { useTransaction, useWriteContract } from '@web3-ui/hooks';
 const greeterContract = useWriteContract('CONTRACT_ADDRESS', 'CONTRACT_ABI');
 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
-  },
-]); // will execute the transaction
+await execute('Hello, world!', {
+  value: ethers.utils.parseEther('0.1'), // you can also use this for payable transactions
+}); // will execute the transaction
 ```
 
 ---

packages/hooks/src/hooks/useTransaction.ts

@@ -4,7 +4,7 @@ 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
  * @returns {
- *  execute: (args: any[]) => Promise<any>,
+ *  execute: (args: any) => Promise<any>,
  *  loading: boolean,
  *  error: null | Error,
  * } {
@@ -16,11 +16,11 @@ import React from 'react';
 
 export function useTransaction(
   method
-): [(args: any[]) => Promise<any>, boolean, any] {
+): [(args: any) => Promise<any>, boolean, any] {
   const [loading, setLoading] = React.useState<boolean>(false);
   const [error, setError] = React.useState<any>(null);
 
-  const execute = async (args: any[]) => {
+  const execute = async (...args: any) => {
     setLoading(true);
     setError(null);
     try {

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

@@ -97,7 +97,7 @@ const UsingUseWriteContract = () => {
             <Button
               type="submit"
               isLoading={loading}
-              onClick={() => setGreeting([value])}
+              onClick={() => setGreeting(value)}
             >
               Set Greeting
             </Button>