page.tsx

"use client";

import Image from "next/image";
import { ConnectButton, useActiveWallet } from "thirdweb/react";
import thirdwebIcon from "@public/thirdweb.svg";
import { client } from "../client";
import { ozean, sepolia } from "../chains";
import { useEffect, useState } from "react";
import { EthereumProvider } from "@walletconnect/ethereum-provider";

export default function Home() {
  const [provider, setProvider] = useState<Awaited<
    ReturnType<typeof EthereumProvider.init>
  > | null>(null);

  useEffect(() => {
    (async () => {
      const provider = await EthereumProvider.init({
        projectId: "08c4b07e3ad25f1a27c14a4e8cecb6f0", // REQUIRED your projectId
        chains: [sepolia.id], // REQUIRED chain ids
        optionalChains: [sepolia.id, ozean.id],
        showQrModal: true,
        rpcMap: { [sepolia.id]: sepolia.rpc, [ozean.id]: ozean.rpc },
      });
      console.log("set provider");
      setProvider(provider);
    })();
  }, []);

  const wallet = useActiveWallet();

  return (
    <main className="p-4 pb-10 min-h-[100vh] flex items-center justify-center container max-w-screen-lg mx-auto">
      <div className="py-20">
        <Header />

        <div className="flex justify-center flex-col items-center gap-6 mb-20">
          <button
            disabled={!provider}
            onClick={async () => {
              console.log("connecting...");
              await provider?.connect();
              console.log(
                "connected",
                provider?.session?.namespaces,
                provider?.session?.namespaces["eip155"]
              );
            }}
          >
            Connect
          </button>
          <div className="flex items-center gap-4">
            <button
              onClick={async () => {
                console.log("switching to sepolia...");
                await wallet?.switchChain(sepolia);
                console.log("finish switch chain");
              }}
            >
              Switch to Sepolia
            </button>
            <button
              onClick={async () => {
                console.log("switching to ozean...");
                await wallet?.switchChain(ozean);
                console.log("finish switch chain");
              }}
            >
              Switch to Ozean
            </button>
          </div>
        </div>

        <ThirdwebResources />
      </div>
    </main>
  );
}

function Header() {
  return (
    <header className="flex flex-col items-center mb-20 md:mb-20">
      <Image
        src={thirdwebIcon}
        alt=""
        className="size-[150px] md:size-[150px]"
        style={{
          filter: "drop-shadow(0px 0px 24px #a726a9a8)",
        }}
      />

      <h1 className="text-2xl md:text-6xl font-semibold md:font-bold tracking-tighter mb-6 text-zinc-100">
        thirdweb SDK
        <span className="text-zinc-300 inline-block mx-1"> + </span>
        <span className="inline-block -skew-x-6 text-blue-500"> Next.js </span>
      </h1>

      <p className="text-zinc-300 text-base">
        Read the{" "}
        <code className="bg-zinc-800 text-zinc-300 px-2 rounded py-1 text-sm mx-1">
          README.md
        </code>{" "}
        file to get started.
      </p>
    </header>
  );
}

function ThirdwebResources() {
  return (
    <div className="grid gap-4 lg:grid-cols-3 justify-center">
      <ArticleCard
        title="thirdweb SDK Docs"
        href="https://portal.thirdweb.com/typescript/v5"
        description="thirdweb TypeScript SDK documentation"
      />

      <ArticleCard
        title="Components and Hooks"
        href="https://portal.thirdweb.com/typescript/v5/react"
        description="Learn about the thirdweb React components and hooks in thirdweb SDK"
      />

      <ArticleCard
        title="thirdweb Dashboard"
        href="https://thirdweb.com/dashboard"
        description="Deploy, configure, and manage your smart contracts from the dashboard."
      />
    </div>
  );
}

function ArticleCard(props: {
  title: string;
  href: string;
  description: string;
}) {
  return (
    <a
      href={props.href + "?utm_source=next-template"}
      target="_blank"
      className="flex flex-col border border-zinc-800 p-4 rounded-lg hover:bg-zinc-900 transition-colors hover:border-zinc-700"
    >
      <article>
        <h2 className="text-lg font-semibold mb-2">{props.title}</h2>
        <p className="text-sm text-zinc-400">{props.description}</p>
      </article>
    </a>
  );
}