import { useCrefy } from "crefy-connect";

export default function Dashboard() {
  const { user, walletInfo, logout, isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return <p>Please log in to view your dashboard.</p>;
  }

  return (
    <div>
      <h1>Welcome {user?.userData?.email}</h1>
      <p>Wallet Address: {walletInfo?.walletAddress}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

interface CrefyUser {
  userData: {
    email?: string;
    name?: string;
    picture?: string;
    // ... other user data fields
  };
  // ... other user fields
}

interface WalletInfo {
  walletAddress: string;
  chain: string;
  // ... other wallet fields
}

import { useCrefy } from "crefy-connect";

export default function ProtectedRoute() {
  const { isAuthenticated } = useCrefy();

  if (!isAuthenticated) {
    return <div>Please log in to access this page.</div>;
  }

  return <div>Protected content here</div>;
}

import { useCrefy } from "crefy-connect";

export default function UserProfile() {
  const { user, walletInfo } = useCrefy();

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>Profile</h2>
      <p>Email: {user.userData?.email}</p>
      <p>Name: {user.userData?.name}</p>
      {user.userData?.picture && (
        <img src={user.userData.picture} alt="Profile" />
      )}
      {walletInfo && (
        <p>Wallet: {walletInfo.walletAddress}</p>
      )}
    </div>
  );
}

import { useCrefy } from "crefy-connect";

export default function Header() {
  const { isAuthenticated, user, logout } = useCrefy();

  return (
    <header>
      <nav>
        {isAuthenticated ? (
          <>
            <span>Welcome, {user?.userData?.email}</span>
            <button onClick={logout}>Logout</button>
          </>
        ) : (
          <span>Not logged in</span>
        )}
      </nav>
    </header>
  );
}

import { useCrefy } from "crefy-connect";

export default function ApiExample() {
  const { token, isAuthenticated } = useCrefy();

  const fetchUserData = async () => {
    if (!token) return;

    const response = await fetch("https://api.example.com/user", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

    const data = await response.json();
    console.log(data);
  };

  return (
    <div>
      {isAuthenticated && (
        <button onClick={fetchUserData}>Fetch User Data</button>
      )}
    </div>
  );
}