solana-program-examples/tokens/token-2022/nft-meta-data-pointer/anchor-example/app/components/SessionKeyButton.tsx

import { useState } from "react"
import { Button } from "@chakra-ui/react"
import { useWallet } from "@solana/wallet-adapter-react"
import { useSessionWallet } from "@magicblock-labs/gum-react-sdk"
import { useGameState } from "@/contexts/GameStateProvider"
import { program } from "@/utils/anchor"

const SessionKeyButton = () => {
  const { publicKey } = useWallet()
  const { gameState } = useGameState()
  const sessionWallet = useSessionWallet()
  const [isLoading, setIsLoading] = useState(false)

  const handleCreateSession = async () => {
    setIsLoading(true)
    const topUp = true
    const expiryInMinutes = 600

    try {
      const session = await sessionWallet.createSession(
        program.programId,
        topUp,
        expiryInMinutes
      )
      console.log("Session created:", session)
    } catch (error) {
      console.error("Failed to create session:", error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleRevokeSession = async () => {
    setIsLoading(true)
    try {
      await sessionWallet.revokeSession()
      console.log("Session revoked")
    } catch (error) {
      console.error("Failed to revoke session:", error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <>
      {publicKey && gameState && (
        <Button
          isLoading={isLoading}
          onClick={
            sessionWallet && sessionWallet.sessionToken == null
              ? handleCreateSession
              : handleRevokeSession
          }
        >
          {sessionWallet && sessionWallet.sessionToken == null
            ? "Create session"
            : "Revoke Session"}
        </Button>
      )}
    </>
  )
}

export default SessionKeyButton