@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 (EVM)
• useWhoami() - Get user information (includes solanaAddress when available)
• useExternalWalletInfo() - External wallet information (EVM)
• useSolanaExternalWallet() - External wallet information & helpers for Solana wallets (Phantom, Solflare)
• useExportWallet() - Export wallet (EVM or Solana, based on current chain)
• usePublicClient() / usePrepareRawTxn() / useSignTxn() / useSignAndSendTxn() / useWaitForTxnReceipt() - EVM transaction flow (prepare → sign → send → confirm)
• useSolanaConnection() / useSolanaPublicKey() / usePrepareSolanaTxn() / useSignSolanaTxn() / useSignAndSendSolanaTxn() / useWaitForSolanaConfirmation() - Solana transaction flow (prepare → sign → send → confirm)

Example: EVM → Solana flow after social/email login

import {
  useAbstraxnWallet,
  usePublicClient,
  usePrepareRawTxn,
  useEstimateGas,
  useGetGasPrice,
  useSignAndSendTxn,
  useWaitForTxnReceipt,
  useSolanaConnection,
  useSolanaPublicKey,
  usePrepareSolanaTxn,
  useSignAndSendSolanaTxn,
  useWaitForSolanaConfirmation,
} from '@abstraxn/signer-react';
import { polygonAmoy } from 'viem/chains';

function CrossChainExample() {
  const { isConnected } = useAbstraxnWallet();

  // EVM clients & hooks
  const { publicClient } = usePublicClient(
    polygonAmoy,
    'https://rpc-amoy.polygon.technology'
  );
  const { prepareRawTxn } = usePrepareRawTxn(publicClient);
  const { estimateGas } = useEstimateGas(publicClient);
  const { getGasPrice } = useGetGasPrice(publicClient);
  const { signAndSendTxn } = useSignAndSendTxn(publicClient);
  const { waitForTxnReceipt } = useWaitForTxnReceipt(publicClient);

  // Solana clients & hooks
  const { connection } = useSolanaConnection('https://api.devnet.solana.com');
  const { solanaAddress } = useSolanaPublicKey();
  const { prepareSolanaTransfer } = usePrepareSolanaTxn(connection);
  const { signAndSendSolanaTxn } = useSignAndSendSolanaTxn(connection);
  const { waitForSolanaConfirmation } = useWaitForSolanaConfirmation(connection);

  const handleCrossChain = async () => {
    if (!isConnected) throw new Error('Please login first');

    // 1) EVM tx (e.g. on Polygon Amoy)
    const from = '0x...'; // current EVM address
    const rawTx = await prepareRawTxn({
      from,
      to: '0x...',
      value: '0.001',
    });
    const { gasLimit } = await estimateGas({
      account: from,
      to: rawTx.to,
      data: rawTx.data,
      value: rawTx.value,
    });
    const fees = await getGasPrice();

    const evmResult = await signAndSendTxn({
      from,
      ...rawTx,
      gas: {
        gasLimit,
        maxFeePerGas: fees.maxFeePerGas!,
        maxPriorityFeePerGas: fees.maxPriorityFeePerGas!,
      },
    });

    await waitForTxnReceipt({ hash: evmResult.hash, confirmations: 1 });

    // 2) After EVM confirmation, send SOL
    if (!solanaAddress) throw new Error('Solana wallet not provisioned');

    const { transaction } = await prepareSolanaTransfer({
      fromPubkey: solanaAddress,
      toPubkey: 'TargetSolanaAddressHere',
      amountInSol: 0.01,
    });

    const solanaResult = await signAndSendSolanaTxn({
      transaction,
      fromPubkey: solanaAddress,
    });

    await waitForSolanaConfirmation({ signature: solanaResult.signature });
  };

  return (
    <button onClick={handleCrossChain}>
      Run EVM → Solana Flow
    </button>
  );
}

### Example: Phantom Solana wallet interaction

```tsx
import {
  useSolanaConnection,
  useSolanaExternalWallet,
} from '@abstraxn/signer-react';

function PhantomDemo() {
  // Use the same RPC endpoint you configured in AbstraxnProvider chains.solanaEndpoint
  const { connection } = useSolanaConnection('https://api.devnet.solana.com');
  const {
    isConnected,
    publicKey,
    signMessage,
    signTransaction,
    sendTransaction,
  } = useSolanaExternalWallet();

  const handleSignMessage = async () => {
    if (!isConnected || !publicKey) {
      throw new Error('Connect Phantom first');
    }
    const signature = await signMessage('Hello from Abstraxn + Phantom');
    console.log('Signed message (base58):', Buffer.from(signature).toString('base64'));
  };

  const handleSendSol = async () => {
    if (!isConnected || !publicKey) {
      throw new Error('Connect Phantom first');
    }

    // Example: send 0.01 SOL using wallet-adapter + our helpers
    const fromPubkey = publicKey;
    const toPubkey = 'TargetSolanaAddressHere';

    const { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } =
      await import('@solana/web3.js');

    const tx = new Transaction();
    tx.add(
      SystemProgram.transfer({
        fromPubkey: new PublicKey(fromPubkey),
        toPubkey: new PublicKey(toPubkey),
        lamports: 0.01 * LAMPORTS_PER_SOL,
      }),
    );

    tx.feePayer = new PublicKey(fromPubkey);
    tx.recentBlockhash = (await connection.getLatestBlockhash('finalized')).blockhash;

    const signed = await signTransaction(tx);
    const sig = await sendTransaction(signed, { skipPreflight: false });
    console.log('Sent SOL with signature:', sig);
  };

  return (
    <div>
      <button onClick={handleSignMessage} disabled={!isConnected}>
        Sign message with Phantom
      </button>
      <button onClick={handleSendSol} disabled={!isConnected}>
        Send 0.01 SOL with Phantom
      </button>
    </div>
  );
}

## 🔗 Related Packages

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

## 📋 Changelog

See [CHANGELOG.md](./CHANGELOG.md) for a list of changes and version history.

## 📝 License

MIT