ArDacity Wallet Button

A customizable React component for connecting to Arweave wallets with smooth animations and Tailwind CSS styling.

Features

• 🔄 Connect/Disconnect Arweave wallet functionality
• ✨ Ripple animation effect on click
• 🎨 Multiple style variants (default, outline, minimal)
• 📏 Multiple size options (small, medium, large)
• 🎯 Customizable button labels
• 📋 Optional wallet address display
• 🎭 TypeScript support with proper typings

Installation

npm install @ar-dacity/ardacity-wallet-btn

or

yarn add @ar-dacity/ardacity-wallet-btn

Usage

import React from 'react';
import ArweaveWalletBtn from '@ar-dacity/ardacity-wallet-btn';

function App() {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Arweave Wallet Demo</h1>
      
      {/* Basic usage */}
      <ArweaveWalletBtn 
        onConnect={(address) => console.log('Connected:', address)}
        onDisconnect={() => console.log('Disconnected')}
      />
      
      {/* Customized button */}
      <ArweaveWalletBtn
        variant="outline"
        size="lg"
        label={{
          connect: "Connect to Arweave",
          disconnect: "Sign Out",
          connecting: "Please wait..."
        }}
        showAddress={true}
        addressDisplayLength={8}
        className="mt-4"
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |-----------------------|-------------------------------------|---------------------------------------------------|----------------------------------------------------------| | className | string | '' | Additional CSS classes for styling | | variant | 'default' \| 'outline' \| 'minimal' | 'default' | Visual style variant of the button | | size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the button | | label | object | { connect: 'Connect Wallet', disconnect: 'Disconnect', connecting: 'Connecting...' } | Button text labels | | showAddress | boolean | true | Whether to show wallet address when connected | | addressDisplayLength| number | 6 | Number of characters to show at start of wallet address | | onConnect | (address: string) => void | - | Callback when wallet is connected | | onDisconnect | () => void | - | Callback when wallet is disconnected |

Tailwind CSS

This component is designed to work with Tailwind CSS. Make sure you have Tailwind CSS set up in your project.

License

MIT