PeersConnect

A collection of reusable React components and hooks that handle peer connections and authentication using Ethereum wallets.

Features

• 🔍 Provider Detection: Automatically detect Ethereum providers (MetaMask, etc.)
• 🔐 Sign-In with Ethereum (SIWE): Implement EIP-4361 compliant authentication
• 🔄 WebSocket Connection: Establish real-time bidirectional communication
• ⚛️ React Ready: Built with React components and hooks
• 🎨 Customizable: Flexible integration options

Installation

npm install peers-connect

or

yarn add peers-connect

Core Components

1. DetectProviders

Automatically detects and connects to available Ethereum providers in the browser.

import { DetectProviders } from 'peers-connect';

function App() {
  return (
    <DetectProviders onConnect={provider => {
      console.log('Connected to:', provider.name);
    }} />
  );
}

2. Sign-In with Ethereum

Implements EIP-4361 standard for authentication using Ethereum wallets.

import { SignInWithEthereum } from 'peers-connect';

function Auth() {
  return (
    <SignInWithEthereum 
      onSignature={signature => {
        // Handle the signature
      }}
      message="Sign this message to authenticate" 
    />
  );
}

3. WebSocket Connection

Establishes secure WebSocket connections using authentication tokens.

import { useWebSocket } from 'peers-connect';

function Chat() {
  const { connection, send, messages } = useWebSocket({
    url: 'wss://your-server.com',
    token: 'your-auth-token'
  });
}

Usage Example

import { DetectProviders, SignInWithEthereum, useWebSocket } from 'peers-connect';

function App() {
  const handleConnect = async (provider) => {
    // Provider connected
  };

  const handleSignature = async (signature) => {
    // Handle authentication
  };

  return (
    <div>
      <DetectProviders onConnect={handleConnect} />
      <SignInWithEthereum onSignature={handleSignature} />
    </div>
  );
}

Requirements

• React 16.8+
• Web3 provider (MetaMask or similar)
• Modern browser with Ethereum support

Documentation

For detailed documentation and API reference, visit [documentation link].

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

[Your chosen license]

Support

For issues and feature requests, please create an issue on GitHub.