.png%3Falt%3Dmedia%26token%3D33ca4946-4570-4f14-92c0-94a5b692973c)
.png%3Falt%3Dmedia%26token%3D33ca4946-4570-4f14-92c0-94a5b692973c)
Comment on page
Customization
Apply various customizations to the Wallet Kit UI
Custom configuration can be applied using the Wallet Kit Provider:
...
<ArweaveWalletKit
config={{
permissions: ["ACCESS_ADDRESS"],
ensurePermissions: true,
...
}}
theme={{
accent: { r: 255, g: 0, b: 0 },
...
}}
>
<YourApp />
</ArweaveWalletKit>
...
Using the
config field of the <ArweaveWalletKit> provider component, you can define a name, a logo or the required permissions for your app. The following options are available:Prop | Type | Default | Description |
|---|---|---|---|
permissions | [] | Permissions to connect with. | |
ensurePermissions | boolean | false | Ensure that all required permissions are present. If false, it only checks if the app has any permissions. |
appInfo | {} | Information about your app (name/logo). | |
gatewayConfig | arweave.net gateway | Configuration for the Arweave gateway to use. |
With the
theme field, you can define a custom theme configuration for the Arweave Wallet Kit modals and buttons. The following options are available:Prop | Type | Description |
|---|---|---|
displayTheme | "dark", "light" | UI display theme to use |
accent | RGBObject | RGB accent color for the UI |
titleHighlight | RGBObject | RGB accent color for the subscreen titles (like the connection screen) |
radius | "default", "minimal", "none" | Border radius level used throughout the Kit UI |
Last modified 5mo ago