Next.js + Capsule example

page.tsx

'use client'

import Capsule, {
  Environment,
  CapsuleModal,
} from '@usecapsule/react-sdk';
import { useState, useEffect } from 'react'

const capsule = new Capsule(
  Environment.BETA,
  process.env.NEXT_PUBLIC_CAPSULE_API_KEY
);

import Image from "next/image";

export default function Home() {
  const [isOpen, setIsOpen] = useState(false)
  const [wallet, setWallet] = useState(null)
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
    fetchWallet()
  }, [capsule])
  async function fetchWallet() {
    try {
      const wallets = await capsule.fetchWallets()
      if (wallets[0]) {
        setWallet(wallets[0])
      }
      setLoaded(true)
    } catch (err) {
      setLoaded(true)
    }
  }
  
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <CapsuleModal
        capsule={capsule}
        isOpen={isOpen}
        onClose={() => {
          setIsOpen(false)
          fetchWallet()
        }}
      />
      {
        loaded && !wallet && (
          <div className='pt-40 flex items-center justify-center flex-col'>
          <button
          className='bg-[#1a0c6d] hover:bg-blue-700 text-white py-2 px-12 rounded-full'
            onClick={() => {setIsOpen(true)}}
          >
            Login
          </button>
          </div>
        )
      }
      {
        loaded && wallet && (
          <div className='pt-20 flex items-center justify-center flex-col'>
            <Image
              className='animate-bounce'
              src="/eigenlayer.png"
              width="280"
              height="280"
              alt='Eigenlayer Logo'
            />
            <button
              className='mt-4 bg-[#1a0c6d] hover:bg-blue-700 text-white py-2 px-12 rounded-full'
              onClick={() => {
                capsule.logout()
                setWallet(null)
              }}
            >
              Logout
            </button>
          </div>  
        )
      }
    </main>
  );
}