create-eth/templates/base/packages/nextjs/app/page.tsx.template.mjs

Create a Scaffold-ETH-2 app

import { withDefaults } from "../../../../utils.js";

const contents = ({ imports, externalExtensionName, description }) => {
  return `
"use client";

import { useAccount } from "wagmi";
import { Address } from "~~/components/scaffold-eth";
import type { NextPage } from "next";
import Link from "next/link";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
${imports}

const Home: NextPage = () => {
  const { address: connectedAddress } = useAccount();

  return (
    <>
      <div className="flex items-center flex-col grow pt-10">
        <div className="px-5">
          <h1 className="text-center">
            <span className="block text-2xl mb-2">Welcome to</span>
            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
            ${externalExtensionName[0] ? `<span className="block text-xl font-bold">(${externalExtensionName[0]} extension)</span>` : ''}
          </h1>
          <div className="flex justify-center items-center space-x-2 flex-col">
            <p className="my-2 font-medium">Connected Address:</p>
            <Address address={connectedAddress} />
          </div>
          ${description}
        </div>

        <div className="grow bg-base-300 w-full mt-16 px-8 py-12">
          <div className="flex justify-center items-center gap-12 flex-col md:flex-row">
            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
              <BugAntIcon className="h-8 w-8 fill-secondary" />
              <p>
                Tinker with your smart contract using the{" "}
                <Link href="/debug" passHref className="link">
                  Debug Contracts
                </Link>{" "}
                tab.
              </p>
            </div>
            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
              <p>
                Explore your local transactions with the{" "}
                <Link href="/blockexplorer" passHref className="link">
                  Block Explorer
                </Link>{" "}
                tab.
              </p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;
`;
};

export default withDefaults(contents, {
  imports: ``,
  description: `
<p className="text-center text-lg">
  Get started by editing{" "}
  <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
    packages/nextjs/app/page.tsx
  </code>
</p>
<p className="text-center text-lg">
  Edit your smart contract{" "}
  <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
    YourContract.sol
  </code>{" "}
  in{" "}
  <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
    packages/hardhat/contracts
  </code>
</p>
`,
  externalExtensionName: ""
});