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
  • Usage
  • Configuration

Was this helpful?

  1. ARWEAVE WALLET KIT

Connect Button

The Connect Button provides an option to easily integrate the Wallet Kit

PreviousSetupNextHooks

Last updated 5 months ago

Was this helpful?

The <ConnectButton> component is a highly customizable button that supports the protocol to display information about the connected wallet. It comes as part of the @arweave-wallet-kit/react package.

Usage

You can import and use the component anywhere in your React application as follows:

<ConnectButton
  accent="rgb(255, 0, 0)"
  profileModal={false}
  showBalance={true}
  ...
/>

Configuration

You can configure the Connect Button through its props:

Props
Type
Description

accent

string

A theme color for the button

showBalance

boolean

Show user balance when connected

showProfilePicture

boolean

Show user profile picture when connected

useAns

boolean

Use ANS to grab profile information

profileModal

boolean

Show profile modal on click (if disabled, clicking the button will disconnect the user)

💳
ANS