@ar-dacity/ardacity-wallet-btn

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