@n1xyz/wallet-widget v0.0.22

N1 Wallet Widget

A React component library for integrating N1 wallet functionality into your application. This widget provides a seamless way to connect to blockchain wallets, manage sessions, and perform wallet operations.

Features

• Wallet connection and authentication
• Session management (Nord and NTS modes)
• Transaction signing
• Message signing
• Balance display
• Error handling
• Dark/light mode support
• Customizable UI

Installation

npm install @n1xyz/wallet-widget
# or
yarn add @n1xyz/wallet-widget

Quick Start

import { N1WalletProvider, N1SessionMode } from '@n1xyz/wallet-widget';
import { Nord } from '@n1xyz/nord-ts';

// Initialize Nord client
const nord = new Nord({
  // Your Nord configuration
});

function App() {
  return (
    <N1WalletProvider 
      providedSessionMode={N1SessionMode.Nord} 
      appId="your-app-id"
      nord={nord}
    >
      {/* Your application components */}
    </N1WalletProvider>
  );
}

Usage

The wallet widget provides a React context that can be accessed throughout your application to interact with the wallet functionality.

Accessing Wallet Context

import { useN1WalletContext } from '@n1xyz/wallet-widget';

function WalletInfo() {
  const { 
    address, 
    isConnected, 
    balances, 
    username,
    setShowLogin
  } = useN1WalletContext();

  return (
    <div>
      {isConnected ? (
        <>
          <p>Connected as: {username}</p>
          <p>Address: {address}</p>
          <p>Balances: {balances.map(b => `${b.balance} ${b.appType}`).join(', ')}</p>
        </>
      ) : (
        <button onClick={() => setShowLogin(true)}>Connect Wallet</button>
      )}
    </div>
  );
}

Signing Messages and Transactions

import { useN1WalletContext } from '@n1xyz/wallet-widget';

function SigningExample() {
  const { 
    signMessageWithSessionKey,
    signMessageWithWalletKey,
    signTransactionWithWalletKey
  } = useN1WalletContext();

  const handleSignMessage = async () => {
    if (signMessageWithSessionKey) {
      const message = { content: "Hello, world!" };
      const signature = await signMessageWithSessionKey(message);
      console.log("Signature:", signature);
    }
  };

  return (
    <button onClick={handleSignMessage}>Sign Message</button>
  );
}

API Reference

N1WalletProvider Props

N1SessionMode

enum N1SessionMode {
  Nord,
  NTS
}

N1WalletContext

The context provides the following values:

Error Handling

The wallet widget includes a built-in error boundary that catches and processes wallet-related errors. You can provide a custom error handler through the onError prop:

<N1WalletProvider
  providedSessionMode={N1SessionMode.Nord}
  appId="your-app-id"
  onError={(error) => {
    console.error("Wallet error:", error.code, error.message);
    // Handle error appropriately
  }}
>
  {/* Your application */}
</N1WalletProvider>

Examples

Nord Mode Integration

import { useEffect, useState } from 'react';
import { N1WalletProvider, N1SessionMode } from '@n1xyz/wallet-widget';
import { Nord } from '@n1xyz/nord-ts';

function App() {
  const [nord, setNord] = useState(null);

  useEffect(() => {
    async function initNord() {
      const nordClient = new Nord({
        // Your Nord configuration
      });
      await nordClient.initialize();
      setNord(nordClient);
    }
    
    initNord();
  }, []);

  if (!nord) return <div>Loading...</div>;

  return (
    <N1WalletProvider 
      providedSessionMode={N1SessionMode.Nord} 
      appId="your-app-id"
      faucetUrl="https://your-faucet-url.com/api/faucet"
      nord={nord}
    >
      <YourApplication />
    </N1WalletProvider>
  );
}

License

MIT License