v0.3.0

Version 0.3.0 - 7/10/25, 2:10 AM

Changes

Feat

• ipfs: improve avatar url resolution with content validation (#5) (fab5501) by @drichar

Packages

• @txnlab/[email protected]

v0.2.3

Version 0.2.3 - 5/7/25, 4:56 PM

Changes

Fix

• react: move ConnectedWalletButton styles to button element (d248c72) by @drichar

Style

• buttons: add cursor pointer to connect and connected states (db54b70) by @drichar

Refactor

• ui: remove redundant data-wallet-ui attributes from components (a01c757) by @drichar

Packages

• @txnlab/[email protected]

v0.2.2

Version 0.2.2 - 4/15/25, 10:05 PM

Changes

Fix

• react: add CSS post-processor to prefix class selectors with data-wallet-ui (fcd8ea3) by @drichar
• react: ensure compatibility with React 18 and 19 (64108c6) by @drichar

Packages

• @txnlab/[email protected]

v0.2.1

Version 0.2.1 - 4/13/25, 6:55 AM

Changes

Fix

• react: remove Tailwind layers to fix styling in non-Tailwind projects (aeddbd6) by @drichar
• react: move data-wallet-ui attribute to FloatingOverlay (e8d4009) by @drichar

Packages

• @txnlab/[email protected]

v0.2.0

@txnlab/use-wallet-ui-react v0.2.0

Overview

This release adds comprehensive NFD integration, account information display, CSS styling flexibility, and numerous UI enhancements to make wallet integration easier and more user-friendly.

Features

NFD Integration

• Added NfdAvatar component with IPFS support and fallback options
• Enhanced NFD integration with TanStack Query for better caching and error handling
• Added view options to useNfd hook ('tiny', 'thumbnail', 'brief', 'full')
• Implemented automatic prefetching of NFD data for all connected accounts

Account Information

• Added useAccountInfo hook replacing useBalance for more comprehensive data
• Added balance toggle in wallet menu (total vs available balance)
• Added balance persistence in local storage
• Enhanced ConnectedWalletButton with avatar display and responsive design
• Added Algorand symbol to replace text in balance display

CSS Flexibility

• Made Tailwind CSS optional with standalone CSS bundle generation
• Added CSS scoping with data attributes to prevent style conflicts
• Implemented style prop for inline styling of wallet buttons
• Added CSS-only example project demonstrating usage without Tailwind
• Added comprehensive documentation for both Tailwind v3 and v4 integration

UI Improvements

• Enhanced responsiveness of wallet components for mobile devices
• Added utility for merging Tailwind classes with clsx and tailwind-merge
• Improved padding and spacing in wallet modal and menus
• Added border radius to wallet icon for better visual consistency
• Enhanced connected button with chevron icon and proper spacing

Developer Experience

• Added integration with @txnlab/utils-ts for consistent formatting
• Improved documentation with clear examples for all features
• Added TanStack Query integration options for existing applications

Breaking Changes

• Removed balance display from ConnectedWalletButton and related props

Examples and Documentation

• Added both Tailwind CSS and CSS-only example projects
• Completely restructured README with clear integration instructions
• Added comprehensive documentation for all components and hooks

Full Changelog: v0.1.0...v0.2.0

v0.1.0

@txnlab/use-wallet-ui-react v0.1.0

Features

• Initial wallet connection UI with support for multiple wallets
• Flexible component architecture with four integration approaches:
  • WalletButton for simple drop-in usage
  • Customized button components with menus
  • Completely custom UI elements
  • Direct button component usage
• Account balance display in connected wallet state
• Account switching support for wallets with multiple accounts
• Dark mode support following Algorand design guidelines
• Smooth transitions and animations for wallet dialog
• Custom Aeonik font support with SSR compatibility

Prerequisites

• @txnlab/use-wallet-react v4
• React v18 or v19
• Tailwind CSS

Documentation

• Comprehensive usage documentation with code examples
• Multiple integration approaches demonstrated
• Detailed component API descriptions