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. Wallet Detection & Connection

Uses hooks and components to detect and connect to available Ethereum wallets using EIP-6963 standard.

import { useDetectProviders } from 'peers-connect';

function App() {
  // Hook to detect available providers
  const providers = useDetectProviders();
  
  return (
    <div>
      {providers.map(provider => (
        <div key={provider.info.uuid}>
          Found provider: {provider.info.name}
        </div>
      ))}
    </div>
  );
}

The hook returns an array of detected providers following the EIP-6963 standard, each containing:

• info: Provider information (name, icon, UUID)
• provider: The EIP-1193 compatible provider instance

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.