@ar-dacity/ardacity-wallet-btn v0.1.0

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

Tailwind CSS

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

License

MIT