ui1

packages/hardhat/package.json

@@ -17,7 +17,8 @@
     "@openzeppelin/contracts": "~4.8.1",
     "dotenv": "~16.0.3",
     "envfile": "~6.18.0",
-    "qrcode": "~1.5.1"
+    "qrcode": "~1.5.1",
+    "solmate": "^6.2.0"
   },
   "devDependencies": {
     "@ethersproject/abi": "~5.7.0",

packages/nextjs/pages/_app.tsx

@@ -11,6 +11,7 @@ import {
 	polygon,
 	base,
 	zora,
+	localhost
 } from "wagmi/chains"
 import { publicProvider } from "wagmi/providers/public"
 import { Lexend } from "next/font/google"
@@ -19,6 +20,7 @@ const lexend = Lexend({ subsets: ["latin"] })
 
 const { chains, publicClient, webSocketPublicClient } = configureChains(
 	[
+		localhost,
 		mainnet,
 		polygon,
 		optimism,

packages/nextjs/pages/connect/index.tsx

@@ -0,0 +1,103 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import Image from "next/image";
+import logo from "../../public/logo.png";
+
+export default function Connect() {
+    return <>
+    <div className="w-full h-screen flex flex-col justify-center items-center gap-16">
+        <Image src={logo} alt="logo" />
+        <ConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        // Note: If your app doesn't use authentication, you
+        // can remove all 'authenticationStatus' checks
+        const ready = mounted && authenticationStatus !== 'loading';
+        const connected =
+          ready &&
+          account &&
+          chain &&
+          (!authenticationStatus ||
+            authenticationStatus === 'authenticated');
+
+        return (
+          <div
+            {...(!ready && {
+              'aria-hidden': true,
+              'style': {
+                opacity: 0,
+                pointerEvents: 'none',
+                userSelect: 'none',
+              },
+            })}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <button onClick={openConnectModal} type="button" className="w-[490px] h-[93px] bg-[#3DB9CF] hover:bg-[#19D9CF] rounded-[25px] text-white text-[35px]">
+                    Connect Wallet
+                  </button>
+                );
+              }
+
+              if (chain.unsupported) {
+                return (
+                  <button onClick={openChainModal} type="button" className="bg-[#3DB9CF] rounded-[25px] text-white text-[35px]">
+                    Wrong network
+                  </button>
+                );
+              }
+
+              return (
+                <div style={{ display: 'flex', gap: 12 }}>
+                  <button
+                    onClick={openChainModal}
+                    style={{ display: 'flex', alignItems: 'center' }}
+                    type="button"
+                  >
+                    {chain.hasIcon && (
+                      <div
+                        style={{
+                          background: chain.iconBackground,
+                          width: 12,
+                          height: 12,
+                          borderRadius: 999,
+                          overflow: 'hidden',
+                          marginRight: 4,
+                        }}
+                      >
+                        {chain.iconUrl && (
+                          <img
+                            alt={chain.name ?? 'Chain icon'}
+                            src={chain.iconUrl}
+                            style={{ width: 12, height: 12 }}
+                          />
+                        )}
+                      </div>
+                    )}
+                    {chain.name}
+                  </button>
+
+                  <button onClick={openAccountModal} type="button">
+                    {account.displayName}
+                    {account.displayBalance
+                      ? ` (${account.displayBalance})`
+                      : ''}
+                  </button>
+                </div>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </ConnectButton.Custom>
+
+    </div>
+    </>
+}

packages/nextjs/pages/search/index.tsx

@@ -0,0 +1,33 @@
+import Image from "next/image";
+import logo from "../../public/logo.png";
+import { useState } from "react";
+
+export default function Search() {
+  const [isAvailable, setIsAvailable] = useState(false);
+  const [domain, setDomain] = useState("");
+
+  console.log(domain)
+  return (
+    <>
+      <div className="w-full h-screen flex flex-col justify-center items-center">
+        <Image src={logo} alt="logo" className="mb-[80px]" />
+        <h1 className="text-[35px]">SEARCH FOR A NAME!</h1>
+        <input
+          onChange={(e) => {
+            setDomain(e.currentTarget.value  + ".me");
+          }}
+          type="text"
+          className="w-[596px] h-[101px] rounded-[15px] border-[5px] border-black text-[50px] px-4"
+        />
+        <p className="text-[#3DB9CF] text-[20px]">
+          {isAvailable ? "Available" : "Taken"}
+        </p>
+        {isAvailable ? null : (
+          <button className="text-[20px] w-[354px] h-[78px] bg-[#3DB9CF] rounded-[10px] text-white">
+            Marketplace
+          </button>
+        )}
+      </div>
+    </>
+  );
+}

yarn.lock

@@ -3253,6 +3253,7 @@ __metadata:
     prettier: ~2.8.4
     qrcode: ~1.5.1
     solidity-coverage: ~0.8.2
+    solmate: ^6.2.0
     ts-node: ~10.9.1
     typechain: ~8.1.0
     typescript: ~5.1.6
@@ -13447,6 +13448,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"solmate@npm:^6.2.0":
+  version: 6.7.0
+  resolution: "solmate@npm:6.7.0"
+  checksum: f4c4ea21c74172ed1590248a05792e2362a624da3c717d87f67ed7d24cb76fc588a98eb509d6d2fe42ef7bebda87498edb8a1aeba1cd54036d13bf0e1228fbe4
+  languageName: node
+  linkType: hard
+
 "sonic-boom@npm:^2.2.1":
   version: 2.8.0
   resolution: "sonic-boom@npm:2.8.0"