import { useCallback } from 'react';
import { useStytch } from '@stytch/react';

export const Login = () => {
const stytch = useStytch();

const trigger = useCallback(async () => {
  /* Request user's address */
  const [crypto_wallet_address] = await ethereum.request({
    method: 'eth_requestAccounts',
  });

  /* Ask Stytch to generate a challenge for the user */
  const { challenge } = await stytch.cryptoWallets.authenticateStart({
    crypto_wallet_address,
    crypto_wallet_type: 'ethereum',
  });

  /* Ask the user to sign the challenge, this takes place on your frontend and uses the browser's built-in crypto provider API. */
  const signature = await ethereum.request({
    method: 'personal_sign',
    params: [challenge, crypto_wallet_address],
  });

  /* Send the signature back to Stytch for validation */
  await stytch.cryptoWallets.authenticate({
    crypto_wallet_address,
    crypto_wallet_type: 'ethereum',
    signature,
    session_duration_minutes: 60,
  });
}, [stytch]);

return <button onClick={trigger}>Sign in with Ethereum</button>;
};