@abstraxn/signer-react

React SDK for Abstraxn Wallet - React components, hooks, and providers for seamless Web3 wallet integration.

This package provides React-specific components and hooks that use @abstraxn/signer-core under the hood.

📦 Installation

npm install @abstraxn/signer-react

Requirements:

• React 18.0.0 or higher (supports both React 18 and React 19)
• Node.js 16.0.0 or higher
• @abstraxn/signer-core (installed automatically as a dependency)

🚀 Quick Start

1. Wrap Your App with AbstraxnProvider

import { AbstraxnProvider, type AbstraxnProviderConfig } from '@abstraxn/signer-react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const providerConfig: AbstraxnProviderConfig = {
  apiKey: 'your-api-key-here',
};

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <AbstraxnProvider config={providerConfig}>
      <App />
    </AbstraxnProvider>
  </StrictMode>,
);

2. Use the ConnectButton Component

import { ConnectButton } from "@abstraxn/signer-react";

function App() {
  return (
    <div>
      <ConnectButton
        connectText="Connect Wallet"
        connectedText="Connected"
        showAddress={true}
      />
    </div>
  );
}

3. Or Use Hooks for Custom Integration

import { useAbstraxnWallet } from "@abstraxn/signer-react";

function HookConnectButton() {
  const { showOnboarding, loading } = useAbstraxnWallet();

  return (
    <button
      onClick={showOnboarding}
      disabled={loading}
      className="demo-connect-button"
    >
      {loading ? 'Connecting...' : 'Connect via Hook'}
    </button>
  );
}

✨ Features

• 🔐 Multiple Auth Methods: Email OTP, Social login (Google, Discord, X), Passkey, External wallets
• 💼 Wallet Management: Connect, disconnect, view wallet info, export wallets
• 🎨 Beautiful UI Components: Pre-built ConnectButton, WalletModal, and OnboardingUI
• 🌓 Theme Support: Light and dark themes
• 🔄 Auto-Reconnect: Automatic session restoration
• 📱 Responsive Design: Works on all devices
• ⚡ TypeScript: Full TypeScript support
• 🌐 Multi-Chain: Support for multiple blockchain networks

📚 Components

• AbstraxnProvider - Context provider
• ConnectButton - Ready-to-use connect button
• WalletModal - Wallet management modal
• OnboardingUI - Authentication UI component

🪝 Hooks

• useAbstraxnWallet() - Main wallet hook
• useIsConnected() - Check connection status
• useAddress() - Get wallet address
• useWhoami() - Get user information
• useExternalWalletInfo() - External wallet information
• usePrepareTransaction() - Prepare and sign transactions
• useExportWallet() - Export wallet

🔗 Related Packages

• @abstraxn/signer-core - Core SDK (dependency)
• @abstraxn/signer - Backward compatible wrapper (deprecated)

📝 License

MIT