updated layout

unlock-protocol · Feb 2, 2024 · ca5eeb7 · ca5eeb7
1 parent cc7b936
commit ca5eeb7
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 99 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { AppConfig } from "./AppConfig";
+import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,7 +19,27 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <main>{children}</main>
+        <main className="p-8">{children}</main>
+        <footer className="prose">
+          <p className="p-10">
+            <Link
+              target="_blank"
+              className="link"
+              href="https://warpcast.com/julien51.eth/0xa5390f5a"
+            >
+              Demo
+            </Link>{" "}
+            |{" "}
+            <Link
+              target="_blank"
+              className="link"
+              href="https://github.com/unlock-protocol/token-gated-frame"
+            >
+              Source code
+            </Link>{" "}
+            | <span>Built by Unlock Labs, with ❤️ for Farcaster!</span>
+          </p>
+        </footer>
       </body>
     </html>
   );

diff --git a/src/app/new/Form.tsx b/src/app/new/Form.tsx
@@ -6,6 +6,7 @@ import { useFormState } from "react-dom";
 import { useAccount } from "wagmi";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import Link from "next/link";
 
 export const Form = () => {
   const { push } = useRouter();
@@ -25,77 +26,87 @@ export const Form = () => {
   }, [frame, push]);
 
   return (
-    <form action={formAction} className="form-control	flex gap-4 prose">
-      <input type="hidden" name="author" value={address} />
+    <div className="p-2 prose">
+      <p>
+        Please complete the following form! You can use any ERC721 contract,
+        including Unlock Protocol&apos;s{" "}
+        <Link target="_blank" href="https://unlock-protocol.com/">
+          Membership contracts
+        </Link>
+        !
+      </p>
+      <form action={formAction} className="form-control	flex gap-4">
+        <input type="hidden" name="author" value={address} />
 
-      <div className="flex flex-col">
-        <label htmlFor="title">Title</label>
-        <input className="input" name="frame.title" required />
-      </div>
+        <div className="flex flex-col">
+          <label htmlFor="title">Title</label>
+          <input className="input" name="frame.title" required />
+        </div>
 
-      <div className="flex flex-col">
-        <label htmlFor="body">Hidden part</label>
-        <textarea
-          className="textarea textarea-borderedput"
-          placeholder="That's the hidden part!"
-          name="frame.body"
-          required
-        />
-      </div>
+        <div className="flex flex-col">
+          <label htmlFor="body">Hidden part</label>
+          <textarea
+            className="textarea textarea-borderedput"
+            placeholder="That's the hidden part!"
+            name="frame.body"
+            required
+          />
+        </div>
 
-      <div className="flex flex-col">
-        <label htmlFor="body">Public part</label>
-        <textarea
-          className="textarea textarea-borderedput"
-          placeholder="That's the part to entice users to reveal the hidden part."
-          name="frame.description"
-          required
-        />
-      </div>
+        <div className="flex flex-col">
+          <label htmlFor="body">Public part</label>
+          <textarea
+            className="textarea textarea-borderedput"
+            placeholder="That's the part to entice users to reveal the hidden part."
+            name="frame.description"
+            required
+          />
+        </div>
 
-      <div className="flex flex-col">
-        <label htmlFor="body">Checkout URL (optional)</label>
-        <input
-          className="input"
-          placeholder="A URL where users can go to purchase an NFT membership."
-          name="frame.checkoutUrl"
-        />
-      </div>
+        <div className="flex flex-col">
+          <label htmlFor="body">Checkout URL (optional)</label>
+          <input
+            className="input"
+            placeholder="A URL where users can go to purchase an NFT membership."
+            name="frame.checkoutUrl"
+          />
+        </div>
 
-      <div className="flex flex-col">
-        <label htmlFor="body">Network</label>
-        <select
-          className="select select-bordered w-full max-w-xs"
-          name="frame.gate.network"
-          required
-        >
-          {Object.keys(networks)
-            .filter((i) => {
-              return i !== "31337";
-            })
-            .map((network) => {
-              return (
-                <option key={network} value={network}>
-                  {networks[network].name}
-                </option>
-              );
-            })}
-        </select>
-      </div>
+        <div className="flex flex-col">
+          <label htmlFor="body">Network</label>
+          <select
+            className="select select-bordered w-full max-w-xs"
+            name="frame.gate.network"
+            required
+          >
+            {Object.keys(networks)
+              .filter((i) => {
+                return i !== "31337";
+              })
+              .map((network) => {
+                return (
+                  <option key={network} value={network}>
+                    {networks[network].name}
+                  </option>
+                );
+              })}
+          </select>
+        </div>
 
-      <div className="flex flex-col">
-        <label htmlFor="body">Contract address</label>
-        <input
-          className="input"
-          placeholder="A URL where users can go to purchase an NFT membership."
-          name="frame.gate.contract"
-          required
-        />
-      </div>
+        <div className="flex flex-col">
+          <label htmlFor="body">Contract address</label>
+          <input
+            className="input"
+            placeholder="A URL where users can go to purchase an NFT membership."
+            name="frame.gate.contract"
+            required
+          />
+        </div>
 
-      <button className="btn btn-neutral" type="submit">
-        Submit
-      </button>
-    </form>
+        <button className="btn btn-neutral" type="submit">
+          Submit
+        </button>
+      </form>
+    </div>
   );
 };
diff --git a/src/app/new/NavBar.tsx b/src/app/new/NavBar.tsx
@@ -1,17 +1,10 @@
 import Link from "next/link";
 import { AppConfig } from "../AppConfig";
-import { useAccount, useDisconnect } from "wagmi";
 import { ConnectKitButton } from "connectkit";
 
 export const Navbar = () => {
-  const { address, isConnecting, isDisconnected } = useAccount();
-  const { disconnect } = useDisconnect();
-  // if (isConnecting) return <div>Connecting...</div>;
-  // if (isDisconnected) return <div>Disconnected</div>;
-  // return <div>Connected Wallet: {}</div>;
-
   return (
-    <div className="navbar w-full px-8">
+    <div className="navbar w-full ">
       <div className="navbar-start">
         {/* <div className="dropdown">
           <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
@@ -53,8 +46,8 @@ export const Navbar = () => {
             </li>
           </ul>
         </div> */}
-        <Link href={"/"} className="text-xl">
-          {AppConfig.name}
+        <Link href={"/"} className="prose">
+          <h1>{AppConfig.name}</h1>
         </Link>
       </div>
       {/* <div className="navbar-center hidden lg:flex">

diff --git a/src/app/new/layout.tsx b/src/app/new/layout.tsx
@@ -10,7 +10,7 @@ export default function NewLayout({
   return (
     <Web3Provider>
       <Navbar />
-      <div className="p-8">{children}</div>
+      {children}
     </Web3Provider>
   );
 }
diff --git a/src/app/new/page.tsx b/src/app/new/page.tsx
@@ -4,7 +4,7 @@ import { Form } from "./Form";
 
 const NotConnected = () => {
   return (
-    <div className="prose">
+    <div className="prose p-2">
       <p>Please start by connecting a wallet.</p>
     </div>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,9 +2,9 @@ import Link from "next/link";
 
 export default async function Home() {
   return (
-    <div className="p-8 prose">
-      <h1 className="">Token Gated Frames</h1>
-      <p className="">
+    <div className="prose p-2">
+      <h1>Token Gated Frames</h1>
+      <p>
         <Link
           target="_blank"
           className="link"
@@ -18,7 +18,7 @@ export default async function Home() {
         </Link>
         .
       </p>
-      <p className="">
+      <p>
         At{" "}
         <Link
           target="_blank"
@@ -34,23 +34,6 @@ export default async function Home() {
       <Link href={"/new"} className="btn btn-neutral">
         Get Started
       </Link>
-      <p className="paragraph">
-        <Link
-          target="_blank"
-          className="link"
-          href="https://warpcast.com/julien51.eth/0xa5390f5a"
-        >
-          Demo
-        </Link>{" "}
-        |{" "}
-        <Link
-          target="_blank"
-          className="link"
-          href="https://github.com/unlock-protocol/token-gated-frame"
-        >
-          Source code
-        </Link>
-      </p>
     </div>
   );
 }