Update descriptions and code snippets

pages/reference-sdk-react-hooks/overview.mdx

@@ -1,10 +1,10 @@
-# React Hooks Reference
+# Safe React Hooks Reference
 
 [Safe React Hooks](../sdk/react-hooks) is a collection of React hooks written in TypeScript that simplify the usage of the Safe\{Core\} SDK for React developers.
 
 ## Install dependencies
 
-To add the React Hooks to your project, run:
+To add the Safe React Hooks to your project, run:
 
 {/* <!-- vale off --> */}
 

pages/reference-sdk-react-hooks/safeprovider.mdx

@@ -1,14 +1,10 @@
 # `SafeProvider`
 
-The `SafeProvider` component is a [context provider](https://react.dev/reference/react/createContext#provider) that wraps a React application and makes all the Safe React hooks available.
+The `SafeProvider` is a [context provider](https://react.dev/reference/react/createContext#provider) that wraps a React application and makes all the Safe React Hooks available within the application with a global configuration.
 
 ## Usage
 
-Any component that uses a Safe hook requires a `SafeProvider` to be present somewhere in its parent component tree.
-
-Usually, you will add this component at the root of your application, wrapping the entire application and providing a global [configuration object](./safeconfig.mdx) to the hooks.
-
-Another way to work with Safe hooks is to pass the `config` as a parameter to the individual functions. You can find more information about this in the specific hook documentation.
+Any component that uses a Safe React Hook requires a `SafeProvider` to be present somewhere in its parent component tree.
 
 {/* <!-- vale off --> */}
 
@@ -43,8 +39,8 @@ ReactDOM.createRoot(root).render(
 
 ### `config`
 
-`SafeConfig`
+- **Type**: `SafeConfig`
 
-The [configuration object](./safeconfig.mdx) for the Safe instance. 
+The configuration object required to connect and setup a Safe account in the application.
 
-Use the [`createConfig`](./createconfig.mdx) function to help you create the configuration object.
+Use the [`createConfig`](./createconfig.mdx) function to create the configuration object.

pages/reference-sdk-react-hooks/useconfirmtransaction.mdx

@@ -2,9 +2,10 @@ import { Tabs } from 'nextra/components'
 
 # `useConfirmTransaction`
 
-`(params?: UseConfirmTransactionParams): UseConfirmTransactionReturnType`
+Confirms a pending multi-signature transaction shared via the Safe Transaction Service.
 
-Hook to confirm a pending multisig transaction which is stored by the Transaction Service.
+- If the number of signatures collected in the Safe Transaction Service for a given Safe transaction hash hasn't met the `threshold`, it adds the signature from the connected signer.
+- If the number of collected signatures reaches the `threshold`, it executes the Safe transaction.
 
 ## Usage
 
@@ -18,23 +19,18 @@ Hook to confirm a pending multisig transaction which is stored by the Transactio
     function App() {
       const {
         confirmTransaction,
-        isLoading,
-        isError,
         data,
-        error
+        // ...
       } = useConfirmTransaction()
 
-      const handleConfirmTransaction = () => {
-        confirmTransaction({ safeTxHash })
-      }
+      const safeTxHash = '0x...'
 
       return (
         <>
-          <button onClick={handleConfirmTransaction} disabled={isLoading}>
+          <button onClick={() => confirmTransaction({ safeTxHash })}>
             Confirm Transaction
           </button>
-          {isError && <p>Error: {error.message}</p>}
-          {data && <p>Transaction confirmed: {JSON.stringify(data)}</p>}
+          {data && JSON.stringify(data)}
         </>
       )
     }
@@ -74,13 +70,62 @@ Hook to confirm a pending multisig transaction which is stored by the Transactio
 
 ## Parameters
 
-- `params` (UseConfirmTransactionParams, optional): Parameters to customize the hook behavior. It contains:
-  - `config` (SafeConfigWithSigner, optional): The [`SafeConfigWithSigner`](./safeconfig.mdx#safeconfigwithsigner) is used instead of the one provided by the nearest `SafeProvider` in the component tree.
+`UseConfirmTransactionParams`
+
+Parameters to customize the hook behavior.
+
+```typescript
+import { UseConfirmTransactionParams } from '@safe-global/safe-react-hooks'
+```
+
+### `config` (Optional)
+
+- **Type**: `SafeConfigWithSigner`
+
+The configuration used instead of the one from the nearest [`SafeProvider`](./safeprovider.mdx).
+
+{/* <!-- vale off --> */}
+
+<Tabs items={['index.tsx', 'config.ts']}>
+  <Tabs.Tab>
+    ```typescript
+    import config from './index.ts'
+
+    const result = useConfirmTransaction({
+      config
+    })
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```typescript
+    import { createConfig } from '@safe-global/safe-react-hooks'
+    import { sepolia } from 'viem/chains'
+
+    const config = createConfig({
+      chain: sepolia,
+      provider,
+      signer,
+      safeOptions: {
+        owners: ['0x...', '0x...', '0x...'],
+        threshold: 2
+      }
+    })
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+{/* <!-- vale on --> */}
 
 ## Returns 
 
-- The react-query [`UseMutationResult`](https://tanstack.com/query/v4/docs/framework/react/reference/useMutation).
-- The `mutate` and `mutateAsync` functions have been renamed to `confirmTransaction` and `confirmTransactionAsync` respectively. The other properties in the return type remain unchanged, and the behavior is still the same as described in the docs.
+`UseConfirmTransactionReturnType`
+
+The react-query [`UseMutationResult`](https://tanstack.com/query/v4/docs/framework/react/reference/useMutation).
+
+```typescript
+import { UseConfirmTransactionReturnType } from '@safe-global/safe-react-hooks'
+```
+
 
 
 
@@ -126,6 +171,16 @@ Asynchronous function to send the transaction. It's a react-query [`mutateAsync`
 
 In the `data` property of the react-query mutation result, we will have a [`SafeClientResult`](https://github.com/safe-global/safe-core-sdk/blob/9fca59736c418dc6253404b4a7784e2245d83312/packages/sdk-starter-kit/src/types.ts#L67-L85) object containing the transaction result.
 
+
+
+
+
+
+
+
+
+
+
 ## Caveats
 
 The `confirmTransaction` and `confirmTransactionAsync` methods are used to confirm a transaction proposed to the Transaction Service. These methods are only applicable for multisig Safe accounts (with more than one owner and a threshold greater than 1).

pages/reference-sdk-react-hooks/usesafe.mdx

@@ -2,7 +2,7 @@ import { Tabs } from 'nextra/components'
 
 # `useSafe`
 
-This is the primary hook for accessing safe-related information. It provides a set of utilities to interact with the safe, allowing actions such as connecting and disconnecting signers, retrieving balances, and obtaining information about the connected chain, among others.
+Provides a set of utilities to access different information about the Safe connected to the [`SafeProvider`].
 
 ## Usage
 
@@ -18,6 +18,7 @@ This is the primary hook for accessing safe-related information. It provides a s
         isInitialized,
         connect,
         disconnect,
+        isOwnerConnected,
         isSignerConnected,
         getBalance,
         getChain,
@@ -26,7 +27,7 @@ This is the primary hook for accessing safe-related information. It provides a s
         getPendingTransactions,
         getSafeInfo,
         getSignerAddress
-        } = useSafe()
+      } = useSafe()
 
       // ...
     }
@@ -66,14 +67,21 @@ This is the primary hook for accessing safe-related information. It provides a s
 
 ## Returns
 
-- [`isInitialized`](./usesafe/isinitialized.mdx)
-- [`connect`](./usesafe/connect.mdx)
-- [`disconnect`](./usesafe/disconnect.mdx)
-- [`isSignerConnected`](./usesafe/issignerconnected.mdx)
-- [`getBalance`](./usesafe/getbalance.mdx)
-- [`getChain`](./usesafe/getchain.mdx)
-- [`getTransaction`](./usesafe/gettransaction.mdx)
-- [`getTransactions`](./usesafe/gettransactions.mdx)
-- [`getPendingTransactions`](./usesafe/getpendingtransactions.mdx)
-- [`getSafeInfo`](./usesafe/getsafeinfo.mdx)
-- [`getSignerAddress`](./usesafe/getsigneraddress.mdx)
+`UseSafeReturnType`
+
+```typescript
+import { UseSafeReturnType } from '@safe-global/safe-react-hooks'
+```
+
+### [`isInitialized`](./usesafe/isinitialized.mdx)
+### [`connect`](./usesafe/connect.mdx)
+### [`disconnect`](./usesafe/disconnect.mdx)
+### [`isOwnerConnected`](./usesafe/isownerconnected.mdx)
+### [`isSignerConnected`](./usesafe/issignerconnected.mdx)
+### [`getBalance`](./usesafe/getbalance.mdx)
+### [`getChain`](./usesafe/getchain.mdx)
+### [`getTransaction`](./usesafe/gettransaction.mdx)
+### [`getTransactions`](./usesafe/gettransactions.mdx)
+### [`getPendingTransactions`](./usesafe/getpendingtransactions.mdx)
+### [`getSafeInfo`](./usesafe/getsafeinfo.mdx)
+### [`getSignerAddress`](./usesafe/getsigneraddress.mdx)

pages/reference-sdk-react-hooks/usesendtransaction.mdx

@@ -2,9 +2,11 @@ import { Tabs } from 'nextra/components'
 
 # `useSendTransaction`
 
-`(params?: UseSendTransactionParams): UseSendTransactionReturnType`
+Executes a Safe transaction from the Safe connected to the [`SafeProvider`](./safeprovider.mdx) or sends it to the Safe Transaction Service if it isn't executable.
 
-Hook to send or propose transactions. For single-owner Safe accounts, it sends the transaction directly to the blockchain. For multisig Safe accounts, it sends the transaction to the Transaction Service.
+- If the `threshold` of the connected Safe is greater than `1`, it creates the Safe transaction and submits it to the Safe Transaction Service to collect the signatures from the Safe owners.
+- If the `threshold` of the connected Safe is `1`, it executes the Safe transaction.
+- If the connected Safe is not deployed, it deploys it using the funds from the connected signer to pay for the transaction fees, and executes the transaction or sends it to the Safe Transaction Service, depending on the `threshold`.
 
 ## Usage
 
@@ -18,29 +20,22 @@ Hook to send or propose transactions. For single-owner Safe accounts, it sends t
     function App() {
       const {
         sendTransaction,
-        isLoading,
-        isError,
         data,
-        error
+        // ...
       } = useSendTransaction()
 
-      const handleSendTransaction = () => {
-        sendTransaction({
-          transactions: [{
-            to: '0x...',
-            value: '123',
-            data: '0x'
-          }]
-        })
-      }
+      const transactions = [{
+        to: '0x...',
+        value: '123',
+        data: '0x'
+      }]
 
       return (
         <>
-          <button onClick={handleSendTransaction} disabled={isLoading}>
+          <button onClick={() => sendTransaction({ transactions })}>
             Send Transaction
           </button>
-          {isError && <p>Error: {error.message}</p>}
-          {data && <p>Transaction sent: {JSON.stringify(data)}</p>}
+          {data && JSON.stringify(data)}
         </>
       )
     }
@@ -80,13 +75,63 @@ Hook to send or propose transactions. For single-owner Safe accounts, it sends t
 
 ## Parameters
 
-- `params` (UseSendTransactionParams, optional): Parameters to customize the hook behavior. It contains:
-  - `config` (SafeConfigWithSigner, optional): The [`SafeConfigWithSigner`](./safeconfig.mdx#safeconfigwithsigner) is used instead of the one provided by the nearest `SafeProvider` in the component tree.
+`UseSendTransactionParams`
+
+Parameters to customize the hook behavior.
+
+```typescript
+import { UseSendTransactionParams } from '@safe-global/safe-react-hooks'
+```
+
+### `config` (Optional)
+
+- **Type**: `SafeConfigWithSigner`
+
+The configuration used instead of the one from the nearest [`SafeProvider`](./safeprovider.mdx).
+
+{/* <!-- vale off --> */}
+
+<Tabs items={['index.tsx', 'config.ts']}>
+  <Tabs.Tab>
+    ```typescript
+    import config from './index.ts'
+
+    const result = useSendTransaction({
+      config
+    })
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```typescript
+    import { createConfig } from '@safe-global/safe-react-hooks'
+    import { sepolia } from 'viem/chains'
+
+    const config = createConfig({
+      chain: sepolia,
+      provider,
+      signer,
+      safeOptions: {
+        owners: ['0x...', '0x...', '0x...'],
+        threshold: 2
+      }
+    })
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+{/* <!-- vale on --> */}
 
 ## Returns 
 
-- The react-query [`UseMutationResult`](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation).
-- The `mutate` and `mutateAsync` functions have been renamed to `sendTransaction` and `sendTransactionAsync` respectively. The other properties in the return type remain unchanged, and the behavior is still the same described in the docs.
+`UseSendTransactionReturnType`
+
+The react-query [`UseMutationResult`](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation).
+
+```typescript
+import { UseSendTransactionReturnType } from '@safe-global/safe-react-hooks'
+```
+
+
 
 
 
@@ -133,6 +178,17 @@ Asynchronous function to send the transaction. It's a react-query [`mutateAsync`
 
 In the `data` property of the react-query mutation result, we will have a [`SafeClientResult`](https://github.com/safe-global/safe-core-sdk/blob/9fca59736c418dc6253404b4a7784e2245d83312/packages/sdk-starter-kit/src/types.ts#L67-L85) object containing the transaction result.
 
+
+
+
+
+
+
+
+
+
+
+
 ## Caveats
 
 The `sendTransaction` and `sendTransactionAsync` methods are used to send transactions from your Safe account. It covers various transaction flows that you would typically need to implement yourself if you're using a more advanced kit, such as the `protocol-kit` in conjunction with the `api-kit`. You can send an array to transactions (to, value, data) that we will convert to a transaction batch.