Use Passkeys as a PIN

"use client";

import { useTransfer } from '@chipi-stack/nextjs';
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 encryptKey or null if cancelled
      const encryptKey = await authenticate();
      if (!encryptKey) return;

      const wallet = JSON.parse(localStorage.getItem('wallet')!);

      // Transfer with passkey-derived key
      // Do NOT pass usePasskey: true — authenticate() already handled it
      const txHash = await transferAsync({
        params: {
          encryptKey,
          wallet,
          token: ChainToken.USDC,
          recipient,
          amount: Number(amount),
        },
        bearerToken: 'your-jwt-token',
      });

      alert(`Transfer complete: ${txHash}`);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="space-y-4 p-6 bg-white rounded-lg shadow">
      <input 
        placeholder="Recipient address" 
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
        className="w-full p-2 border rounded"
      />
      <input 
        placeholder="Amount" 
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        type="number"
        className="w-full p-2 border rounded"
      />
      <button 
        onClick={handleTransfer} 
        disabled={isLoading}
        className="w-full px-4 py-2 bg-green-600 text-white rounded disabled:bg-gray-400"
      >
        {isLoading ? 'Sending...' : 'Send with Passkey'}
      </button>
    </div>
  );
}

"use client";

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

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

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

      // Validates PIN first, then triggers biometric prompt internally
      const result = await migrateWalletToPasskeyAsync({
        wallet,
        oldEncryptKey: currentPin,
        externalUserId: userId,
        bearerToken: 'your-jwt-token',
      });

      // Store updated wallet and credentialId
      localStorage.setItem('wallet', JSON.stringify(result.wallet));
      localStorage.setItem('credentialId', result.credentialId);
      alert('Successfully migrated to passkey!');
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="space-y-4 p-6 bg-white rounded-lg shadow">
      <input
        type="password"
        placeholder="Current PIN"
        value={currentPin}
        onChange={(e) => setCurrentPin(e.target.value)}
        className="w-full p-2 border rounded"
      />
      <button 
        onClick={handleMigrate} 
        disabled={isLoading}
        className="w-full px-4 py-2 bg-green-600 text-white rounded disabled:bg-gray-400"
      >
        {isLoading ? 'Migrating...' : 'Migrate to Passkey'}
      </button>
    </div>
  );
}