ArweaveKit Docs
  • ArweaveKit
    • Introduction
  • 🔐Wallets
    • Introduction to Wallets
    • Create Wallet
    • Get Wallet Address
    • Get Wallet Balance
    • Wallet Plugins
  • 💳ARWEAVE WALLET KIT
    • Introduction to Arweave Wallet Kit
    • Setup
    • Connect Button
    • Hooks
    • Customization
  • 🏦Transactions
    • Introduction to Transactions
    • Create Transaction
    • Sign Transaction
    • Post Transaction
    • Get Transaction Status
    • Get Transaction
    • Create and Post Transaction with Othent
    • Transaction Plugins
  • 📄SMART CONTRACTS
    • Introduction to Smart Contracts
    • Create Contract
    • Write Contract
    • Read Contract State
    • View Contract State
    • Write Contract with Othent
    • Read Contract with Othent
    • Smart Contract Plugins
  • ✅AUTH
    • Introduction to Auth
    • Connect
    • Disconnect
    • Get Active Address
    • Get Permissions
    • Get Wallet Names
    • Get All Addresses
    • Get Active Public Key
    • Is Installed
    • Log In with Othent
    • Log Out with Othent
    • Get User Details with Othent
    • Auth Plugins
  • 🔐Encryption
    • Introduction to Encryption
    • Encrypt Data with AES
    • Decrypt Data with AES
    • Encrypt AES Key with RSA
    • Decrypt AES Key with RSA
    • Encryption Plugins
  • 🌐GRAPHQL
    • Introduction to GraphQL
    • Query All Arweave Transactions
    • Query Arweave Data
    • Query Arweave Transactions
    • GraphQL Plugins
  • 🗺️RoadMap
    • Features
  • 📘REFERENCES
    • ArweaveKit in Browser Environments
  • 🛠️SUPPORTING TOOLS
    • Arweave StarterKit
Powered by GitBook
On this page
  • Manage customizations
  • Application info
  • Theming

Was this helpful?

  1. ARWEAVE WALLET KIT

Customization

Apply various customizations to the Wallet Kit UI

Manage customizations

Custom configuration can be applied using the Wallet Kit Provider:

...
   <ArweaveWalletKit
      theme={{
        displayTheme: "light",
        accent: {
          r: 0,
          g: 0,
          b: 0
        },
        titleHighlight: {
          r: 0,
          g: 122,
          b: 255
        },
        radius: "default"
      }}
      config={{
        strategies: [
          new WanderStrategy(),
          new WebWalletStrategy(),
          new OthentStrategy(),
          new BrowserWalletStrategy()
        ],
        permissions: ["ACCESS_ADDRESS", "ACCESS_ALL_ADDRESSES"],
        ensurePermissions: true,
        appInfo: {
          name: "Test App",
          logo: "https://arweave.net/tQUcL4wlNj_NED2VjUGUhfCTJ6pDN9P0e3CbnHo3vUE"
        },
        gatewayConfig: {
          host: "arweave.net",
          port: 443,
          protocol: "https"
        }
      }}
    >
    <YourApp />
  </ArweaveWalletKit>
...

Application info

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.

Theming

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

PreviousHooksNextIntroduction to Transactions

Last updated 3 months ago

Was this helpful?

Using the config field of the provider component, you can define a name, a logo or the required permissions for your app. The following options are available:

💳
PermissionType[]
AppInfo
GatewayConfig
<ArweaveWalletKit>