Add Dexter Sign-In

npm install @dexterai/connect@0.29.1 @dexterai/vault@0.43.4

'use client';

import { useCallback, useState } from 'react';
import type { PasskeyLoginTokens } from '@dexterai/connect';
import {
  DexterButton,
  useDexterConnection,
  type DexterAccountSession,
} from '@dexterai/connect/react';

export function DexterSignIn() {
  const [accountSession, setAccountSession] = useState<DexterAccountSession>({
    status: 'signed_out',
  });
  const [message, setMessage] = useState('');

  const installAccountSession = useCallback((session: PasskeyLoginTokens) => {
    setAccountSession({ status: 'authenticated', accessToken: session.accessToken });
  }, []);
  const clearAccountSession = useCallback(() => {
    setAccountSession({ status: 'signed_out' });
  }, []);

  const dx = useDexterConnection({
    intent: 'identity',
    accountSession,
    installAccountSession,
    clearAccountSession,
  });
  const busy = dx.operation !== 'idle' || dx.model.stage === 'checking';
  const connected = dx.model.permissions.accountContentVisible;

  async function signIn() {
    setMessage('');
    try {
      await dx.connect();
    } catch {
      setMessage('Sign-in did not complete. Try again.');
    }
  }

  async function disconnect() {
    setMessage('');
    try {
      await dx.disconnectDexter();
    } catch {
      setMessage('Could not disconnect. Try again.');
    }
  }

  return (
    <section aria-label="Dexter account">
      {connected && <p>Connected: {dx.identity.walletLabel ?? dx.identity.userHandle}</p>}
      <DexterButton
        loading={busy}
        loadingLabel="Connecting"
        onClick={() => { void (connected ? disconnect() : signIn()); }}
      >
        {connected ? 'Disconnect Dexter' : 'Sign in with Dexter'}
      </DexterButton>
      {message && <p role="alert">{message}</p>}
    </section>
  );
}