@scafonix/react

The official React SDK for Scafonix MPC — the zero-assembly, secure ECDSA non-custodial wallet engine.

Installation

Install the package via your preferred package manager:

# npm
npm install @scafonix/react ethers

# yarn
yarn add @scafonix/react ethers

# pnpm
pnpm add @scafonix/react ethers

# bun
bun add @scafonix/react ethers

Quickstart

To get started, you will need a public API key from your Scafonix Developer Dashboard.

1. Initialize & Connect Wallet

import React from 'react';
import { useScafonixWallet } from '@scafonix/react';
import { ethers } from 'ethers';

export default function App() {
  const { 
    wallet, 
    connectWallet, 
    signTransaction, 
    showBackupModal, 
    exportWallet, 
    clearWallet,
    isConnecting, 
    error 
  } = useScafonixWallet({
    apiKey: 'YOUR_PUBLIC_API_KEY',
    backupOptions: {
      allowedMethods: ['google_drive', 'copy_key_share']
    }
  });

  const userId = 'user_97c4f8d2e3b1';

  const handleConnect = async () => {
    // Connect wallet with Lazy Backup option
    await connectWallet(userId, { skipBackupModal: true });
  };

  const handleBackup = async () => {
    // Trigger recovery share backup modal on demand
    await showBackupModal(userId);
  };

  const handleExportKey = async () => {
    // Export private key securely inside sandbox modal (supports EVM Chain IDs like '43113' or 'ETH')
    await exportWallet(userId, { chain: '43113' });
  };

  const handleDeviceUnlink = async () => {
    // ⚠️ WARNING: clearWallet() purges local P1 device share.
    // Do NOT call this on standard app logouts! Use only for explicit device unbinding or security reset.
    if (confirm("Are you sure? This will purge local key shares and force wallet recovery on next login.")) {
      await clearWallet();
    }
  };

  const sendTx = async () => {
    if (!wallet) return;
    const provider = new ethers.JsonRpcProvider("https://cloudflare-eth.com");
    const tx = {
      to: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
      value: ethers.parseEther("0.01"),
      gasLimit: 21000,
      chainId: 1
    };

    // Request threshold signature using official full API name
    const signature = await signTransaction(tx);

    const signedTx = ethers.Transaction.from({ ...tx, signature }).serialized;
    const { hash } = await provider.broadcastTransaction(signedTx);
    alert(`Tx Sent! Hash: ${hash}`);
  };

  return (
    <div>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      
      {wallet ? (
        <div>
          <p>Connected Address: {wallet.address}</p>
          <button onClick={sendTx}>Send 0.01 ETH</button>
          <button onClick={handleBackup}>☁️ Backup (P3)</button>
          <button onClick={handleExportKey}>🔑 Export Key</button>
        </div>
      ) : (
        <button disabled={isConnecting} onClick={handleConnect}>
          {isConnecting ? 'Connecting...' : 'Connect Wallet'}
        </button>
      )}
    </div>
  );
}

License

MIT License