docs: Add React Hooks guide (#621)

* Add send transactions guide

* Fix titles in the reference

* Small fixes/typos

* Fix installation

* Add hooks home page

* Adjust styles

* Update SDK sidebar

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

@@ -2,7 +2,7 @@ import { Tabs } from 'nextra/components'
 
 # `useSafe`
 
-Provides a set of utilities to access different information about the Safe connected to the [`SafeProvider`].
+Provides a set of utilities to access different information about the Safe connected to the [`SafeProvider`](./safeprovider.mdx).
 
 ## Usage
 

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

@@ -1,6 +1,6 @@
 import { Tabs } from 'nextra/components'
 
-### `getBalance`
+# `getBalance`
 
 Returns the balance information of the Safe connected to the [`SafeProvider`](../safeprovider.mdx).
 

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

@@ -1,6 +1,6 @@
 import { Tabs } from 'nextra/components'
 
-### `getPendingTransactions`
+# `getPendingTransactions`
 
 Returns all the pending transactions associated with the Safe connected to the [`SafeProvider`](../safeprovider.mdx).
 

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

@@ -1,6 +1,6 @@
 import { Tabs } from 'nextra/components'
 
-### `getSafeInfo`
+# `getSafeInfo`
 
 Returns the information associated with the Safe connected to the [`SafeProvider`](../safeprovider.mdx).
 

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

@@ -1,6 +1,6 @@
 import { Tabs } from 'nextra/components'
 
-### `getSignerAddress`
+# `getSignerAddress`
 
 Returns the address of the signer connected to the [`SafeProvider`](../safeprovider.mdx).
 

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

@@ -1,6 +1,6 @@
 import { Tabs } from 'nextra/components'
 
-### `getTransactions`
+# `getTransactions`
 
 Returns all the transactions associated with the Safe connected to the [`SafeProvider`](../safeprovider.mdx).
 

pages/sdk/_meta.json

@@ -8,11 +8,19 @@
     "title": "Safe{Core} SDK"
   },
   "overview": "Overview",
-  "react-hooks": "React Hooks",
   "starter-kit": "Starter Kit",
   "protocol-kit": "Protocol Kit",
   "api-kit": "API Kit",
   "relay-kit": "Relay Kit",
+  "-- React Hooks": {
+    "type": "separator",
+    "title": "React Hooks"
+  },
+  "react-hooks": "Safe React Hooks",
+  "-- Integrations": {
+    "type": "separator",
+    "title": "Integrations"
+  },
   "signers": "Signers",
   "onramp": "Onramp"
 }

pages/sdk/api-kit.mdx

@@ -17,4 +17,5 @@ The following guides show how to use the API Kit and integrate it into your proj
 - [Propose and confirm transactions](./api-kit/guides/propose-and-confirm-transactions.mdx)
 
 ## Resources
+
 - [API Kit on GitHub](https://github.com/safe-global/safe-core-sdk/tree/main/packages/api-kit)

pages/sdk/protocol-kit.mdx

@@ -19,4 +19,5 @@ The following guides show how to use the Protocol Kit and integrate it into your
 - [Message signatures](./protocol-kit/guides/signatures/messages)
 
 ## Resources
+
 - [Protocol Kit on GitHub](https://github.com/safe-global/safe-core-sdk/tree/main/packages/protocol-kit)

pages/sdk/react-hooks.mdx

@@ -0,0 +1,23 @@
+import { Grid } from '@mui/material'
+import CustomCard from '../../components/CustomCard'
+
+# Safe React Hooks
+
+The Safe React Hooks are the starting point for interacting with the Safe smart account using a React application.
+
+These hooks are built on top of the [Starter Kit](./starter-kit.mdx), which leverages and abstracts the complex logic from several kits from the Safe\{Core\} SDK, allowing you to set a React context that gives access to the exposed Safe functionality everywhere in your application. 
+
+<Grid item mt={3}>
+  <CustomCard
+    title={'@safe-global/safe-react-hooks'}
+    description={''}
+    url={'https://www.npmjs.com/package/@safe-global/safe-react-hooks'}
+  />
+</Grid>
+
+The following guides show how to use the Safe React Hooks and integrate it into your project:
+- [Send transactions](./react-hooks/guides/send-transactions)
+
+## Resources
+
+- [Safe React Hooks on GitHub](https://github.com/safe-global/safe-react-hooks)

pages/sdk/react-hooks/_meta.json

@@ -1,4 +1,5 @@
 {
+  "guides": "Guides",
   "references": {
     "title": "Reference",
     "href": "/reference-sdk-react-hooks/overview"

pages/sdk/react-hooks/guides/_meta.json

@@ -0,0 +1,3 @@
+{
+  "send-transactions": "Send Transactions"
+}

pages/sdk/react-hooks/guides/send-transactions.mdx

@@ -0,0 +1,208 @@
+import { Steps, Tabs } from 'nextra/components'
+
+# Send Transactions
+
+This guide will teach you how to deploy new Safe accounts and create, sign, and execute Safe transactions using the Safe React Hooks.
+
+For more detailed information, see the [Safe React Hooks Reference](../../../reference-sdk-react-hooks/overview.mdx).
+
+## Prerequisites
+
+- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+
+## Install dependencies
+
+First, you need to install some dependencies.
+
+```bash
+pnpm add @safe-global/safe-react-hooks
+```
+
+## Steps
+
+<Steps>
+
+  ### Imports
+
+  Here are all the necessary imports for this guide.
+
+  {/* <!-- vale off --> */}
+
+  ```typescript
+  import {
+    SafeProvider,
+    createConfig,
+    useSafe,
+    useSendTransaction,
+    SendTransactionVariables,
+    useConfirmTransaction,
+    ConfirmTransactionVariables
+  } from '@safe-global/safe-react-hooks'
+  import { sepolia } from 'viem/chains'
+  ```
+
+  {/* <!-- vale on --> */}
+
+  ### Create a signer and provider
+
+  Firstly, you need to get a signer, which will be the owner of a Safe account after it's deployed.
+
+  This example uses a private key, but any way to get an EIP-1193 compatible signer can be used.
+
+  {/* <!-- vale off --> */}
+
+  ```typescript
+  const SIGNER_ADDRESS = // ...
+  const SIGNER_PRIVATE_KEY = // ...
+
+  const RPC_URL = 'https://rpc.ankr.com/eth_sepolia'
+  ```
+
+  {/* <!-- vale on --> */}
+
+  ### Initialize the Safe React Hooks
+
+  You need to wrap your app with the [`SafeProvider`](../../../reference-sdk-react-hooks/safeprovider.mdx) to have access to the different Safe React Hooks like `useSendTransaction()`, `useConfirmTransaction()`, and `usePendingTransactions()` that will provide the functionality you need in this guide.
+
+  `SafeProvider` receives a `config` object with different properties to create the global configuration that you can get from the [`createConfig`](../../../reference-sdk-react-hooks/createconfig.mdx) function. 
+
+  {/* <!-- vale off --> */}
+
+  <Tabs items={['New Safe account', 'Existing Safe account']}>
+    <Tabs.Tab>
+      When deploying a new Safe account for the connected signer, you need to pass the configuration of the Safe in the `safeOptions` property. In this case, the Safe account is configured with your signer as the only owner.
+
+      ```typescript
+      const config = createConfig({
+        chain: sepolia,
+        provider: RPC_URL,
+        signer: SIGNER_PRIVATE_KEY,
+        safeOptions: {
+          owners: [SIGNER_ADDRESS],
+          threshold: 1
+        }
+      })
+      ```
+    </Tabs.Tab>
+    <Tabs.Tab>
+      When connecting an existing Safe account, you need to pass the `safeAddress` property.
+
+      ```typescript
+      const config = createConfig({
+        chain: sepolia,
+        provider: RPC_URL,
+        signer: SIGNER_PRIVATE_KEY,
+        safeAddress: '0x...'
+      })
+      ```
+    </Tabs.Tab>
+  </Tabs>
+
+  {/* <!-- vale on --> */}
+
+  To apply the global configuration to your app, pass the created `config` to the `SafeProvider`.
+
+  {/* <!-- vale off --> */}
+
+  ```typescript
+  <SafeProvider config={config}>
+    <App />
+  </SafeProvider>
+  ```
+
+  {/* <!-- vale on --> */}
+
+  ### Create a Safe transaction
+
+  Create an array of Safe transactions to execute.
+
+  {/* <!-- vale off --> */}
+
+  ```typescript
+  const transactions = [{
+    to: '0x...',
+    data: '0x',
+    value: '0'
+  }]
+  ```
+
+  {/* <!-- vale on --> */}
+
+  ### Send the Safe transaction
+
+  Create a `SendTransaction` component in your application to create and send a transaction.
+
+  If you configured your Safe with `threshold` equal to `1`, calling the `sendTransaction` function from the [`useSendTransaction`](../../../reference-sdk-react-hooks/usesendtransaction.mdx) hook will execute the Safe transaction. However, if the `threshold` is greater than `1` the other owners of the Safe will need to confirm the transaction until the required number of signatures are collected.
+
+  {/* <!-- vale off --> */}
+
+  <Tabs items={['SendTransaction.tsx']}>
+    <Tabs.Tab>
+      ```typescript
+      function SendTransaction() {
+        const { sendTransaction } = useSendTransaction()
+
+        const sendTransactionParams: SendTransactionVariables = {
+          transactions
+        }
+
+        return (
+          <button onClick={() => sendTransaction(sendTransactionParams)}>
+            Send Transaction
+          </button>
+        )
+      }
+
+      export default SendTransaction
+      ```
+    </Tabs.Tab>
+  </Tabs>
+
+  {/* <!-- vale on --> */}
+
+  ### Confirm the Safe transaction
+
+  Create a `ConfirmPendingTransactions` component in your application to check the transactions pending for confirmation in case the Safe transaction needs to be confirmed by other Safe owners.
+
+  Retrieve all the pending Safe transactions from the Safe Transaction Service by calling the [`getPendingTransaction`](../../../reference-sdk-react-hooks/usesafe/getpendingtransactions.mdx) function from the [`useSafe`](../../../reference-sdk-react-hooks/usesafe.mdx) hook, and call the `confirmTransaction` function from the [`useConfirmTransaction`](../../../reference-sdk-react-hooks/useconfirmtransaction.mdx) hook to confirm them.
+
+  Notice that the `SafeProvider` configuration needs to be initialized with a different Safe owner as the `signer` when confirming a transaction.
+
+  {/* <!-- vale off --> */}
+
+  <Tabs items={['ConfirmPendingTransactions.tsx']}>
+    <Tabs.Tab>
+      ```typescript
+      function ConfirmPendingTransactions() {
+        const { getPendingTransactions } = useSafe()
+        const { data = [] } = getPendingTransactions()
+        const { confirmTransaction } = useConfirmTransaction()
+
+        return (
+          <>
+            {data.length > 0 && data.map(tx => (
+              <>
+                {tx.safeTxHash}
+                <button onClick={() => confirmTransaction({
+                  safeTxHash: tx.safeTxHash
+                })} />
+              </>
+            ))}
+          </>
+        )
+      }
+
+      export default ConfirmPendingTransactions
+      ```
+    </Tabs.Tab>
+  </Tabs>
+
+  {/* <!-- vale on --> */}
+
+  Once the total number of confirmations reaches the `threshold` of the Safe, the `confirmTransaction` will automatically execute the transaction. 
+
+</Steps>
+
+## Recap and further reading
+
+After following this guide, you are able to deploy new Safe accounts and create, sign, and execute Safe transactions using the Safe React Hooks.

pages/sdk/relay-kit.mdx

@@ -18,4 +18,5 @@ The following guides show how to use the Relay Kit and integrate it into your pr
 - [Integrate Gelato Relay](./relay-kit/guides/gelato-relay.mdx)
 
 ## Resources
+
 - [Relay Kit on GitHub](https://github.com/safe-global/safe-core-sdk/tree/main/packages/relay-kit)

pages/sdk/starter-kit.mdx

@@ -3,7 +3,7 @@ import CustomCard from '../../components/CustomCard'
 
 # Starter Kit
 
-The [Starter Kit](../sdk/starter-kit) is the starting point for interacting with the Safe smart account using a TypeScript interface.
+The Starter Kit is the starting point for interacting with the Safe smart account using a TypeScript interface.
 
 The Starter Kit is built on top of several kits from the Safe\{Core\} SDK, leveraging and abstracting the complex logic. At the same time, it's modular and customizable, offering the most simplified way to deploy new accounts and handle the Safe transaction flow in all its different forms:
 
@@ -24,4 +24,5 @@ The following guides show how to use the Starter Kit and integrate it into your
 - [Send user operations](./starter-kit/guides/send-user-operations)
 
 ## Resources
+
 - [Starter Kit on GitHub](https://github.com/safe-global/safe-core-sdk/tree/main/packages/sdk-starter-kit)