Merge pull request #244 from polywrap/intro-pop-up

Creates Intro Pop Up

web/app/page.tsx

@@ -24,9 +24,5 @@ function generateUniqueIndexes(arrayLength: number, count: number): number[] {
 export default function HomePage() {
   const promptIdxs = generateUniqueIndexes(EXAMPLE_PROMPTS.length, 6);
 
-  return (
-    <div className='flex h-full items-center justify-center'>
-      <Prompt promptIdxs={promptIdxs} />
-    </div>
-  );
+  return <Prompt promptIdxs={promptIdxs} />;
 }

web/components/Disclaimer.tsx

@@ -10,16 +10,20 @@ const Disclaimer = () => {
       <div className='fixed bottom-16 left-1/2 transform -translate-x-1/2 max-w-screen-sm w-[calc(100%-48px)] z-10'>
         <X
           onClick={() => setShowDisclaimer(false)}
-          className='absolute top-4 right-4 text-indigo-800 hover:text-indigo-500 cursor-pointer'
+          className='absolute top-3 right-3 text-indigo-800 hover:text-indigo-500 cursor-pointer'
           size={20}
           weight='bold'
         />
         <div className='p-6 bg-indigo-25 rounded-2xl border-2 border-indigo-200 space-y-1 shadow-md shadow-primary-shadow/20'>
           <div className='font-bold text-sm'>
             This AI agent is experimental.
           </div>
-          <div className="text-[10px]">
-            The agent is evaluating projects based on self-reported data through past Gitcoin applications and therefore cannot guarantee their accuracy at this time. The agent also cannot guarantee that each project is still in control of its address, so please double check before sending large amounts.
+          <div className='text-[10px]'>
+            The agent is evaluating projects based on self-reported data through
+            past Gitcoin applications and therefore cannot guarantee their
+            accuracy at this time. The agent also cannot guarantee that each
+            project is still in control of its address, so please double check
+            before sending large amounts.
           </div>
         </div>
       </div>

web/components/IntroPopUp.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { X } from "@phosphor-icons/react/dist/ssr";
+import { SparkleIcon } from "./Icons";
+import { Dispatch, SetStateAction } from "react";
+
+interface IntroPopupProps {
+  setShowIntro: Dispatch<SetStateAction<boolean>>;
+}
+
+const IntroPopUp = ({ setShowIntro }: IntroPopupProps) => {
+  const handleClose = () => {
+    setShowIntro(false);
+    localStorage.setItem("introClosed", "true");
+  };
+
+  return (
+    <div className='fixed bottom-16 left-1/2 transform -translate-x-1/2 max-w-screen-md w-[calc(100%-48px)] z-10'>
+      <X
+        onClick={handleClose}
+        className='absolute top-3 right-3 text-indigo-800 hover:text-indigo-500 cursor-pointer'
+        size={20}
+        weight='bold'
+      />
+      <div className='p-6 bg-indigo-25 rounded-2xl border-2 border-indigo-200 space-y-1 shadow-md shadow-primary-shadow/20'>
+        <div className='flex items-center'>
+          <SparkleIcon size={24} className='transform -translate-x-1' />
+          <div className='text-lg font-bold'>
+            Welcome to fundpublicgoods.ai!
+          </div>
+        </div>
+        <div className='text-[14px] leading-relaxed'>
+          This is a proof-of-concept to showcase the potential of AI agents to
+          assist users with complex transactions. Give it a try and let us know
+          what you think!
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default IntroPopUp;

web/components/Prompt.tsx

@@ -9,9 +9,11 @@ import { startRun } from "@/app/actions";
 import clsx from "clsx";
 import { EXAMPLE_PROMPTS } from "@/utils/examplePrompts";
 import { toast } from "react-toastify";
+import IntroPopUp from "./IntroPopUp";
 
 export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
   const [prompt, setPrompt] = useState<string>("");
+  const [showIntro, setShowIntro] = useState<boolean>(false);
   const [isWaiting, setIsWaiting] = useState(false);
   const { data: session } = useSession();
   const searchParams = useSearchParams();
@@ -42,8 +44,19 @@ export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
     }
   }, [searchParams, router]);
 
+  useEffect(() => {
+    const introClosed = localStorage.getItem("introClosed");
+    if (!introClosed) {
+      setShowIntro(true);
+    }
+  }, []);
+
   return (
-    <>
+    <div
+      className={clsx(
+        "flex h-full justify-center md:items-center md:pt-0",
+        showIntro ? "items-start pt-8" : "items-center"
+      )}>
       <div className='mx-auto max-w-screen-lg'>
         <div className='w-full space-y-8 px-6 flex flex-col items-center'>
           <div className='space-y-4 flex flex-col items-center w-full'>
@@ -88,6 +101,7 @@ export default function Prompt({ promptIdxs }: { promptIdxs: number[] }) {
           </div>
         </div>
       </div>
-    </>
+      {showIntro && <IntroPopUp setShowIntro={setShowIntro} />}
+    </div>
   );
 }