Merge branch 'feat/ui-improvements'

src/app/components/CopyModal.tsx

@@ -33,7 +33,7 @@ const CopyFrameModal: React.FC<ModalProps> = (props) => {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal isOpen={isOpen} onClose={onClose} showCloseButton={true}>
       <>
         <h2 className="text-xl font-bold mb-4 text-center">
           Share with your friends on Warpcast

src/app/components/FarcasterSigninButton.tsx

@@ -98,6 +98,7 @@ export default function SignInButton({ ...signInArgs }: SignInButtonProps) {
           <Modal
             isOpen={!!(url && showDialog)}
             onClose={() => setShowDialog(false)}
+            showCloseButton={true}
           >
             <div className="flex flex-col">
               <div className="flex text-black text-xl font-semibold">

src/app/components/HowItWorks.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import Modal from "./Modal";
+
+const HowItWorks: React.FC = () => {
+  const [showHowItWorks, setShowHowItWorks] = useState(false);
+  return (
+    <>
+      <div
+        className="text-center cursor-pointer hover:underline"
+        onClick={() => setShowHowItWorks(true)}
+      >
+        [ how it works ]
+      </div>
+      <Modal isOpen={showHowItWorks} onClose={() => setShowHowItWorks(false)} showCloseButton={false}>
+        <div className="flex flex-col">
+          <div className="flex text-black text-xl font-semibold">
+            How it Works
+          </div>
+        </div>
+        <div className="flex m-4 justify-center w-full text-black text-sm">
+          <ol className="list-decimal list-outside">
+            <li className="mb-2">
+              {" "}
+              Upload a meme, select your memecoin community and create a custom
+              mint frame{" "}
+            </li>
+            <li className="mb-2"> Share your meme frame far and wide on Farcaster </li>
+            <li className="mb-2">
+              {" "}
+              Each time your meme is minted, your memecoin community gets 50% of
+              the mint revenue{" "}
+            </li>
+            <li className="mb-2">
+              {" "}
+              The memecoin community with highest mint revenue across all frames
+              on 04/30 wins $${" "}
+            </li>
+            <li className="mb-2">
+              {" "}
+              The winning prize is split between meme creators proportionately
+              based on your mint frames&apos; revenue contribution
+            </li>
+          </ol>
+        </div>
+
+        <div className="flex justify-center mt-8"><button
+            onClick={() => setShowHowItWorks(false)}
+            className="rounded-full px-4 py-2 bg-purple-500 hover:bg-purple-700 disabled:opacity-75 text-white focus:outline-none focus:ring-0"
+          >
+            I&apos;m ready to meme
+          </button>
+            </div>
+      </Modal>
+    </>
+  );
+};
+
+export default HowItWorks;

src/app/components/Modal.tsx

@@ -3,21 +3,25 @@ import { MdClose } from "react-icons/md";
 
 interface ModalProps {
   isOpen: boolean;
+  showCloseButton: boolean;
   onClose: () => void;
   children: ReactNode;
 }
 
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, showCloseButton = true }) => {
   if (isOpen) {
     return (
       <div className="fixed top-0 left-0 flex justify-center items-center w-full h-full bg-black bg-opacity-50 z-50">
         <div className="relative bg-white border border-black rounded-lg p-8">
-          <button
-            className="absolute top-2 right-2 text-black hover:text-gray-500 focus:outline-none"
-            onClick={onClose}
-          >
-            <MdClose className="text-2xl" />
-          </button>
+
+          {showCloseButton && (
+              <button
+              className="absolute top-2 right-2 text-black hover:text-gray-500 focus:outline-none"
+              onClick={onClose}
+            >
+              <MdClose className="text-2xl" />
+            </button>
+          )}
           {children}
         </div>
       </div>

src/app/components/Navbar.tsx

@@ -13,12 +13,12 @@ const Navbar = () => {
     Auth.removeUser();
     window.location.href = "/";
   };
-
+  console.log(profile, "profile");
   useEffect(() => {
-    if (isAuthenticated && !userSession) {
+    if (Auth.fid || isAuthenticated) {
       setUserSession(true);
     }
-  }, [userSession, isAuthenticated]);
+  }, [isAuthenticated]);
 
   return (
     <nav className="flex justify-between pt-4">
@@ -33,7 +33,7 @@ const Navbar = () => {
       </div>
       {userSession ? (
         <div className="flex items-center">
-          <button onClick={handleSignout}>Sign Out FID: #{profile.fid}</button>
+          <button onClick={handleSignout}>Sign Out FID: #{Auth.fid}</button>
         </div>
       ) : null}
     </nav>

src/app/layout.tsx

@@ -7,13 +7,16 @@ import "react-toastify/dist/ReactToastify.css";
 import { AuthKitProvider } from "@farcaster/auth-kit";
 import OurVision from "./components/OurVision";
 import Footer from "./components/Footer";
+import Modal from "./components/Modal";
+import HowItWorks from "./components/HowItWorks";
 const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+
   return (
     <html lang="en">
       <head>
@@ -36,16 +39,19 @@ export default function RootLayout({
                 MEME AMPLIFIER MACHINE
               </h2>
               <h4 className="text-center font-bold text-xl leading-normal tracking-tight uppercase">
-              Meme. Share. Grow the meme, earn together. 
+                Meme. Share. Grow the meme, earn together.
               </h4>
               <p className="mt-3 text-center mb-5">
-              Create and share a &quot;meme mint frame&quot; for your memecoin community. Every meme minted benefits your chosen community.
+                Create and share a &quot;meme mint frame&quot; for your memecoin
+                community. Every meme minted benefits your chosen community.
               </p>
+              <HowItWorks />
             </div>
             <div className="flex mt-8 justify-center items-center">
               {children}
             </div>
             <OurVision />
+
           </main>
           <Footer></Footer>
           <ToastContainer />