Step 7 - Set Up Your Home Route for Magmar

No one likes seeing outdated instructions or blank pages at localhost:3000/, so let’s turn your home route into the main dashboard for Magmar.

Your Goal

When a user visits /, the page should:

1. Redirect them to /login if they’re not authenticated.

2. If authenticated, allow them to toggle between:

   • Wallet View: Display the user's owned NFTs in their smart contract wallet.

   • Minter View: Allow the user to mint a new NFT to their walletSetup Instructions

1. Add Light Mode (Optional)

Open your globals.css and add:

body {
  background-color: white;
}

2. Install Avatar Generator

In your project terminal:

npm i random-avatar-generator

---

3. Set Up /app/page.tsx for Magmar

"use client";

import GaslessMinter from "@common/GaslessMinter";
import WalletDisplay from "@common/WalletDisplay";
import "./globals.css";
import { useAuth } from "@common/AuthProvider";
import { useRouter } from "next/navigation";
import { AvatarGenerator } from "random-avatar-generator";
import { useState } from "react";
import userbase from "userbase-js"; // If you're using another auth system, modify this accordingly

export default function Home() {
  const { user, logout } = useAuth();
  const router = useRouter();
  const [walletViewActive, setWalletViewActive] = useState(true);
  const generator = new AvatarGenerator();

  function handleLogout() {
    try {
      userbase
        .signOut()
        .then(() => {
          console.log("User logged out!");
          logout();
          router.push("/");
        })
        .catch((e: any) => console.error(e));
    } catch (error: any) {
      console.log(error);
    }
  }

  return (
    <div>
      {user?.isLoggedIn ? (
        <div className="font-mono text-2xl mt-8">
          <div className="flex items-center justify-center">
            <div className="avatar">
              <div className="rounded-full ml-12">
                <img src={generator.generateRandomAvatar(user?.userId)} />
              </div>
            </div>
            <div className="flex flex-col ml-6 gap-2">
              <div className="text-black">
                <b>Username:</b> {user?.username}
              </div>
              <div className="text-black">
                <b>Smart Wallet:</b>{" "}
                <a
                  className="link link-secondary"
                  href={`https://sepolia.etherscan.io/address/${user?.scwAddress}`}
                  target="_blank"
                >
                  {user?.scwAddress}
                </a>
              </div>
              <div className="text-black">
                <div className="btn btn-outline" onClick={handleLogout}>
                  <a>Log out</a>
                </div>
              </div>
            </div>
          </div>

          <div className="tabs items-center flex justify-center mb-[-25px]">
            <a
              className={`tab tab-lg tab-lifted text-2xl ${
                walletViewActive ? "tab-active text-white" : ""
              }`}
              onClick={() => setWalletViewActive(true)}
            >
              Wallet View
            </a>
            <a
              className={`tab tab-lg tab-lifted text-2xl ${
                !walletViewActive ? "tab-active text-white" : ""
              }`}
              onClick={() => setWalletViewActive(false)}
            >
              Mint NFT
            </a>
          </div>

          <div className="divider mx-16 mb-8"></div>

          {walletViewActive ? <WalletDisplay /> : <GaslessMinter />}
        </div>
      ) : (
        <div className="text-black flex flex-col items-center justify-center mt-36 mx-8 text-4xl font-mono">
          Please log in to continue! 👀
          <button
            onClick={() => router.push("/login")}
            className="btn mt-6 text-white"
          >
            Login
          </button>
        </div>
      )}
    </div>
  );
}

---

What This Does for Magmar

• Checks if the user is logged in using useAuth().

• If not logged in: prompts them to log in.

• If logged in:

  • Displays the user's avatar, username, and smart wallet address.