Use Passkeys as a PIN

import { useTransfer, ChainToken } from '@chipi-stack/chipi-react';
import { usePasskeyAuth } from '@chipi-stack/chipi-passkey/hooks';
import { useState } from 'react';

export function TransferWithPasskey() {
  const { transferAsync, isLoading } = useTransfer();
  const { authenticate } = usePasskeyAuth();
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('');

  const handleTransfer = async () => {
    try {
      // Triggers biometric prompt — returns null if user cancels
      const encryptKey = await authenticate();
      if (!encryptKey) return;

      const wallet = JSON.parse(localStorage.getItem('wallet')!);
      
      const txHash = await transferAsync({
        params: {
          encryptKey,
          usePasskey: true,
          wallet,
          token: 'USDC',
          recipient,
          amount: Number(amount),
        },
        bearerToken: 'your-jwt-token',
      });
      
      alert(`Transfer complete: ${txHash}`);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      <input 
        placeholder="Recipient address" 
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
      />
      <input 
        placeholder="Amount" 
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        type="number"
      />
      <button onClick={handleTransfer} disabled={isLoading}>
        {isLoading ? 'Sending...' : 'Send with Passkey'}
      </button>
    </div>
  );
}

import { useMigrateWalletToPasskey } from '@chipi-stack/chipi-react';
import { useState } from 'react';

export function MigrateToPasskey() {
  const { migrateWalletToPasskeyAsync, isLoading } = useMigrateWalletToPasskey();
  const [currentPin, setCurrentPin] = useState('');

  const handleMigrate = async () => {
    try {
      const wallet = JSON.parse(localStorage.getItem('wallet')!);

      // The hook handles passkey creation internally —
      // just pass the old PIN and it re-encrypts with passkey
      await migrateWalletToPasskeyAsync({
        wallet,
        oldEncryptKey: currentPin,
        externalUserId: 'user-123',
        bearerToken: 'your-jwt-token',
      });
      
      alert('Successfully migrated to passkey!');
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      <input
        type="password"
        placeholder="Current PIN"
        value={currentPin}
        onChange={(e) => setCurrentPin(e.target.value)}
      />
      <button onClick={handleMigrate} disabled={isLoading}>
        {isLoading ? 'Migrating...' : 'Migrate to Passkey'}
      </button>
    </div>
  );
}