WebSig Wallet Adapter

✨ Features

• 🔐 Biometric Authentication - Use Face ID, Touch ID, or Windows Hello
• 🌐 No Extension Required - Works in any browser, on any device
• 🚀 Instant Integration - One line of code for existing Solana DApps
• 📱 Mobile First - Beautiful experience on phones and tablets
• 🎨 Beautiful UI - Porto-inspired minimal design

🚀 Installation

npm install @websig/wallet-adapter

or

yarn add @websig/wallet-adapter

💻 Usage

With React (Recommended)

If you're using @solana/wallet-adapter-react:

import { WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { WebSigWalletAdapter } from '@websig/wallet-adapter';

function App() {
  const wallets = [
    new WebSigWalletAdapter(),
    // ... other wallets
  ];

  return (
    <WalletProvider wallets={wallets}>
      <WalletModalProvider>
        {/* WebSig now appears in the wallet list! */}
        <YourApp />
      </WalletModalProvider>
    </WalletProvider>
  );
}

Direct Usage

import { WebSigWalletAdapter } from '@websig/wallet-adapter';

const wallet = new WebSigWalletAdapter();

// Connect
await wallet.connect();
console.log('Connected:', wallet.publicKey?.toString());

// Sign transaction
const signature = await wallet.signTransaction(transaction);

// Sign message
const sig = await wallet.signMessage(new TextEncoder().encode('Hello WebSig!'));

// Disconnect
await wallet.disconnect();

🎨 How It Looks

When users click "WebSig" in your wallet list:

1. Beautiful popup opens (or new tab on mobile)
2. User authenticates with biometrics
3. Connected! No seed phrases, no passwords

🤝 Compatibility

WebSig works with all standard Solana wallet adapters:

• ✅ @solana/wallet-adapter-react
• ✅ @solana/wallet-adapter-react-ui
• ✅ @solana/wallet-adapter-base
• ✅ Jupiter
• ✅ Raydium
• ✅ Magic Eden
• ✅ Any DApp using standard wallet adapters

🔧 Configuration

RPC Endpoint (Important!)

The public Solana RPC has strict rate limits and often returns 403 errors. Use a reliable RPC provider:

// Recommended: Use a dedicated RPC provider
const endpoint = 'https://your-quicknode-endpoint.com'; // QuickNode
// const endpoint = 'https://mainnet.helius-rpc.com/?api-key=YOUR_KEY'; // Helius
// const endpoint = 'https://solana-mainnet.g.alchemy.com/v2/YOUR_KEY'; // Alchemy

// Pass to ConnectionProvider
<ConnectionProvider endpoint={endpoint}>
  {/* Your app */}
</ConnectionProvider>

Custom WebSig URL (for development)

// Set environment variable
NEXT_PUBLIC_WEBSIG_URL=http://localhost:3000

// Or configure directly
const wallet = new WebSigWalletAdapter({
  url: 'http://localhost:3000'
});

Connection Modes

WebSig automatically selects the optimal connection mode:

| Environment | Mode | Experience | |------------|------|------------| | Same Domain (prod) | Inline Modal | Beautiful Porto-style modal with full passkey support | | Cross-Origin (dev) | Popup Window | Clean popup for secure authentication | | Mobile | New Tab | Full-screen with automatic return |

For the best production experience, deploy your DApp and WebSig on the same domain.

🏗️ Architecture

graph LR
    DApp[Your DApp] -->|1. Connect| Adapter[WebSig Adapter]
    Adapter -->|2. Open Popup| WebSig[WebSig.xyz]
    WebSig -->|3. Biometric Auth| User[User]
    WebSig -->|4. Return PublicKey| Adapter
    Adapter -->|5. Connected| DApp

📦 What's Included

• WebSigWalletAdapter - Main adapter class
• TypeScript definitions
• Beautiful WebSig icon
• Zero dependencies (except peer deps)
• < 10KB minified

🛠️ Development

# Clone the repo
git clone https://github.com/websig-xyz/websig-wallet-adapter
cd websig-wallet-adapter

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run dev

📝 Examples

Check out the /examples folder for:

• Next.js integration
• Plain React
• Vue.js
• Vanilla JavaScript

🔗 Links

• WebSig Website
• Documentation
• GitHub
• Twitter

📄 License

Apache 2.0 - See LICENSE file for details

🎮 Live Examples

We have fully functional examples ready to test:

📄 Vanilla JavaScript

Open examples/vanilla.html directly in your browser. No build step required!

Features:

• Connect/disconnect wallet
• Sign messages & transactions
• Display balance
• Environment switcher

⚛️ React Application

cd examples/react
npm install
npm run dev

A complete React app with:

• Full wallet adapter integration
• Beautiful wallet modal UI
• Send transactions
• Sign messages

Both examples work with:

• Production: https://websig.xyz (default)
• Local Development: http://localhost:3001

📖 See examples/README.md for detailed instructions

🤔 FAQ

Q: Do users need to install anything?
A: No! WebSig is a web app. Clicking "Connect" opens websig.xyz in a popup.

Q: How secure is it?
A: Very. Biometric authentication + hardware security + zero-knowledge architecture.

Q: Does it work on mobile?
A: Yes! Opens in a new tab on mobile with seamless return flow.

Q: Can I use it with existing wallet adapters?
A: Yes! WebSig is fully compatible with Solana wallet standards.