Web3

🚧 Note: This package is under active development. While we're working hard to make it production-ready, please be aware that APIs and features may change. We welcome your feedback and contributions as we continue to improve!

🌐 Web Support Only - Native support coming soon!

🚀 Ultimate cross-platform blockchain components that feel native everywhere

Build powerful Web3 interfaces that work seamlessly across web and mobile platforms, with a comprehensive set of components that handle blockchain interactions, wallet connections, and Ethereum-specific utilities.

// One import. Any platform. Native everywhere.
import { Account, Address, ChainAvatar } from '@consensys/ds3-web3';

✨ Standout Features

✨ Built on @consensys/ds3 - Leverages true cross-platform components with compound patterns, dual APIs, and unified styling through Tailwind + NativeWind

🔗 Wallet Integration - Seamless connection with MetaMask, WalletConnect, and other popular wallets

🌐 Cross-Chain Support - Display and interact with multiple blockchain networks through a unified interface

🔍 ENS Resolution - Automatic resolution of Ethereum addresses to human-readable ENS names

🚀 Get Started

pnpm add @consensys/ds3-web3

For detailed framework setup and configuration, see the @consensys/ds3-config documentation.

📚 Component Library

DS3 Web3 gives you production-ready components for building modern blockchain interfaces:

Account Components

• Account - Display and manage connected wallet accounts with ENS resolution

Address Components

• Address - Display Ethereum addresses with ENS resolution and truncation
• AddressAvatar - Generate and display avatars based on Ethereum addresses
• AddressCard - Card layout for displaying addresses with avatars

Chain Components

• ChainAvatar - Display network avatars and indicators
• ChainSelector - Network selection dropdown (coming soon)

Wallet Components

• MetaMaskLogin - Connect to MetaMask wallet
• DisconnectButton - Disconnect current wallet
• WalletConnect - Connect to WalletConnect (coming soon)

🛠️ Development

# Install dependencies
pnpm i

# Watch and build
pnpm dev

# Production build
pnpm build

🤝 Contributing

We welcome contributions!

📜 License

MIT