-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/safe-global/safe-docs into …
…smart-account-reference
- Loading branch information
Showing
42 changed files
with
4,221 additions
and
552 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -271,6 +271,8 @@ peaq | |
| pluggable | ||
| polyfills | ||
| precompile(?s) | ||
| refetch | ||
| refetching | ||
| saltNonce | ||
| stablecoin | ||
| superset | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/safe-react-hooks | ||
| ``` | ||
|
|
||
| ```bash npm | ||
| npm install @safe-global/safe-react-hooks | ||
| ``` | ||
|
|
||
| ```bash yarn | ||
| yarn add @safe-global/safe-react-hooks | ||
| ``` | ||
| </CH.Code> | ||
| </CH.Section> | ||
|
|
||
| {/* <!-- vale on --> */} |
Oops, something went wrong.