Build npm Package: @near-js/wallet-selector-react - React Wallet Integration

Overview

Create a React component library for NEAR wallet integration - making it trivially easy to add "Connect Wallet" functionality to any React app.

Why This Matters

Wallet integration is the first hurdle for any dApp. A polished React library removes friction for developers building on NEAR.

Technical Requirements

Components

import {
  WalletSelectorProvider,
  ConnectButton,
  AccountInfo,
  useWallet
} from '@near-js/wallet-selector-react';

// Provider wraps app
<WalletSelectorProvider network="mainnet">
  <App />
</WalletSelectorProvider>

// Simple connect button with modal
<ConnectButton
  theme="dark"
  label="Connect Wallet"
  onConnect={(account) => console.log(account)}
/>

// Account display with balance
<AccountInfo
  showBalance
  showAvatar
  truncateAddress
/>

// Hook for custom implementations
const {
  account,
  isConnected,
  connect,
  disconnect,
  signTransaction
} = useWallet();

Supported Wallets

• NEAR Wallet (wallet.near.org)
• MyNearWallet
• Meteor Wallet
• Sender Wallet
• HERE Wallet
• Ledger

Features

• Responsive modal design
• Dark/light theme support
• Customizable styling (CSS vars or styled-components)
• SSR compatible
• TypeScript support
• Accessible (WCAG 2.1)

Deliverables

1. npm package: @near-js/wallet-selector-react
2. 5+ ready-to-use components
3. Hooks for custom implementations
4. Storybook with all components
5. Documentation site

Budget: 10 NEAR