docs: Add React Hooks section

.github/styles/config/vocabularies/default/accept.txt

@@ -271,6 +271,8 @@ peaq
 pluggable
 polyfills
 precompile(?s)
+refetch
+refetching
 saltNonce
 stablecoin
 superset

pages/_meta.json

@@ -12,6 +12,11 @@
     "type": "page",
     "display": "hidden"
   },
+  "reference-sdk-react-hooks": {
+    "title": "React Hooks Reference",
+    "type": "page",
+    "display": "hidden"
+  },
   "core-api": {
     "title": "API",
     "type": "page"

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

@@ -0,0 +1,18 @@
+{
+  "home": {
+    "title": "← Go Back",
+    "href": "/sdk/react-hooks"
+  },
+  "overview": "Overview",
+  "-- React Hooks Reference": {
+    "type": "separator",
+    "title": "React Hooks Reference"
+  },
+  "safeprovider": "SafeProvider",
+  "createconfig": "createConfig",
+  "useconfirmtransaction": "useConfirmTransaction",
+  "usesafe": "useSafe",
+  "usesendtransaction": "useSendTransaction",
+  "useupdateowners": "useUpdateOwners",
+  "useupdatethreshold": "useUpdateThreshold"
+}

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

@@ -0,0 +1,242 @@
+import { Tabs } from 'nextra/components'
+
+# `createConfig`
+
+Returns the configuration object required to initialize the Safe React Hooks.
+
+## Usage
+
+It can be used to initialize the [`SafeProvider`](./safeprovider.mdx) or any of the Safe React Hooks. The global configuration will be overwritten within the scope of a hook if a hook is created with a custom configuration.
+
+{/* <!-- vale off --> */}
+
+<Tabs items={['SafeProvider configuration', 'Hook configuration']}>
+  <Tabs.Tab>
+    ```typescript
+    import ReactDOM from 'react-dom/client'
+    import { createConfig, SafeProvider } from '@safe-global/safe-react-hooks'
+    import App from './App.tsx'
+
+    const config = createConfig({
+      // ...
+    })
+
+    const root = document.getElementById('root')
+
+    ReactDOM.createRoot(root).render(
+      <SafeProvider config={config}>
+        <App />
+      </SafeProvider>
+    )
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```typescript
+    import { createConfig, useSafe } from '@safe-global/safe-react-hooks'
+
+    const config = createConfig({
+      // ...
+    })
+
+    function CustomComponent() {
+      const {
+        getChain,
+        // ...
+      } = useSafe()
+      const { name } = getChain({ config })
+
+      return (
+        <div>
+          {name}
+        </div>
+      )
+    }
+
+    export default CustomComponent
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+{/* <!-- vale on --> */}
+
+The `createConfig` parameters vary depending on if you want to connect a Safe account that is already deployed or you want to deploy a new one.
+
+{/* <!-- vale off --> */}
+
+<Tabs items={['Existing Safe', 'New Safe']}>
+  <Tabs.Tab>
+    Use the `safeAddress` property to use an existing Safe account.
+
+    ```typescript
+    import { createConfig } from '@safe-global/safe-react-hooks'
+    import { sepolia } from 'viem/chains'
+
+    const config = createConfig({
+      chain: sepolia
+      provider,
+      signer,
+      safeAddress: '0x...'
+    })
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    Use the `safeOptions` property to configure and deploy a new Safe account. The Safe address generation is deterministic based on the `owners`, `threshold`, and `saltNonce` values. 
+
+    ```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,
+        saltNonce: 123n // Optional
+      }
+    })
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+{/* <!-- vale on --> */}
+
+## Parameters
+
+`CreateConfigParams`
+
+```typescript
+import { CreateConfigParams } from '@safe-global/safe-react-hooks'
+```
+
+### `chain`
+- **Type:** `Chain`
+
+The connected chain.
+
+```typescript focus=2
+const config = createConfig({
+  chain: sepolia,
+  provider,
+  signer,
+  safeAddress: '0x...'
+})
+```
+
+### `provider`
+
+- **Type:** `Eip1193Provider | HttpTransport | SocketTransport`
+
+The provider connected to the blockchain.
+
+```typescript focus=3
+const config = createConfig({
+  chain: sepolia,
+  provider,
+  signer,
+  safeAddress: '0x...'
+})
+```
+
+### `signer`
+
+- **Type:** `HexAddress | PrivateKey | PasskeyClient`
+
+The signer connected to the Safe as an owner.
+- If it's an address, the same address from the `provider` will be used to sign.
+- If it's a private key, its derived address will be used to sign.
+- If it's a passkey, the passkey will be used to sign.
+
+```typescript focus=4
+const config = createConfig({
+  chain: sepolia
+  provider,
+  signer,
+  safeAddress: '0x...'
+})
+```
+
+### `safeAddress` (Optional)
+
+- **Type:** `HexAddress`
+
+The address of the connected Safe.
+
+```typescript focus=5
+const config = createConfig({
+  chain: sepolia
+  provider,
+  signer,
+  safeAddress: '0x...'
+})
+```
+
+### `safeOptions` (Optional)
+
+#### `owners`
+
+- **Type:** `string[]`
+
+The list of owners to configure in the Safe.
+
+```typescript focus=6
+const config = createConfig({
+  chain: sepolia
+  provider,
+  signer,
+  safeOptions: {
+    owners: ['0x...', '0x...', '0x...'],
+    threshold: 2,
+    saltNonce: 123n
+  }
+})
+```
+
+#### `threshold`
+
+- **Type:** `number`
+
+The threshold of the Safe. It must be lower or equal to the number of owners.
+
+```typescript focus=7
+const config = createConfig({
+  chain: sepolia
+  provider,
+  signer,
+  safeOptions: {
+    owners: ['0x...', '0x...', '0x...'],
+    threshold: 2,
+    saltNonce: 123n
+  }
+})
+```
+
+#### `saltNonce` (Optional)
+
+- **Type:** `string`
+
+The salt introduces randomness or predictability when the Safe address is generated.
+
+```typescript focus=8
+const config = createConfig({
+  chain: sepolia
+  provider,
+  signer,
+  safeOptions: {
+    owners: ['0x...', '0x...', '0x...'],
+    threshold: 2,
+    saltNonce: 123n
+  }
+})
+```
+
+## Returns
+
+`SafeConfig`
+
+The Safe React Hooks configuration.
+
+```typescript
+import { SafeConfig } from '@safe-global/safe-react-hooks'
+```

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

@@ -0,0 +1,27 @@
+# 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 Safe React Hooks to your project, run:
+
+{/* <!-- vale off --> */}
+
+<CH.Section>
+  <CH.Code style={{ boxShadow: 'none' }}>
+    ```bash pnpm
+    pnpm add @safe-global/sdk-react-hooks
+    ```
+
+    ```bash npm
+    npm install @safe-global/sdk-react-hooks
+    ```
+
+    ```bash yarn
+    yarn add @safe-global/sdk-react-hooks
+    ```
+  </CH.Code>
+</CH.Section>
+
+{/* <!-- vale on --> */}

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

@@ -0,0 +1,46 @@
+# `SafeProvider`
+
+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 React Hook requires a `SafeProvider` to be present somewhere in its parent component tree.
+
+{/* <!-- vale off --> */}
+
+```typescript
+import ReactDOM from 'react-dom/client'
+import { createConfig, SafeProvider } from '@safe-global/safe-react-hooks'
+import { sepolia } from 'viem/chains'
+import App from './App.tsx'
+
+const config = createConfig({
+  chain: sepolia,
+  provider,
+  signer,
+  safeOptions: {
+    owners: ['0x...', '0x...', '0x...'],
+    threshold: 2
+  }
+})
+
+const root = document.getElementById('root')
+
+ReactDOM.createRoot(root).render(
+  <SafeProvider config={config}>
+    <App />
+  </SafeProvider>
+)
+```
+
+{/* <!-- vale on --> */}
+
+## Parameters
+
+### `config`
+
+- **Type**: `SafeConfig`
+
+The configuration object required to connect and setup a Safe account in the application.
+
+Use the [`createConfig`](./createconfig.mdx) function to create the configuration object.