Package Exports

@ar-dacity/ardacity-wallet-btn
@ar-dacity/ardacity-wallet-btn/dist/index.esm.js
@ar-dacity/ardacity-wallet-btn/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ar-dacity/ardacity-wallet-btn) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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