Merge pull request #234 from polywrap/dev

Release Prod February 26
agentcoinorg · Feb 26, 2024 · c2f8fdb · c2f8fdb
2 parents 8f3b4e7 + e833929
commit c2f8fdb
Show file tree

Hide file tree

Showing 16 changed files with 411 additions and 349 deletions.
diff --git a/web/app/Header.tsx b/web/app/Header.tsx
@@ -1,8 +1,9 @@
 "use client";
 
+import { SubstackLogo, XLogo } from "@/components/Icons";
 import { Logo } from "@/components/Logo";
 import truncateEthAddress from "@/utils/ethereum/truncateAddress";
-import { CaretDown, Link } from "@phosphor-icons/react";
+import { CaretDown, DiscordLogo, Link } from "@phosphor-icons/react";
 import { useConnectWallet } from "@web3-onboard/react";
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
@@ -11,6 +12,19 @@ function Header() {
   const [{ wallet }, _, disconnect] = useConnectWallet();
   const [showDropdownMenu, setShowDropdownMenu] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const [isMobile, setIsMobile] = useState<boolean>(true);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+
+    checkScreenSize();
+
+    window.addEventListener("resize", checkScreenSize);
+
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -34,51 +48,79 @@ function Header() {
   return (
     <div className='flex w-full justify-between text-sm px-6 py-4 bg-indigo-300/80 border-b-2 border-indigo-400/20'>
       <a href='/' className='flex'>
-        <Logo size={160} />
+        <Logo
+          size={160}
+          wordmark={!isMobile}
+          className='max-sm:bg-white max-sm:rounded-full max-sm:flex max-sm:justify-center max-sm:min-w-[28px]'
+        />
       </a>
-      {wallet && (
-        <div className='relative' ref={dropdownRef}>
-          <div
-            onClick={() => setShowDropdownMenu((current) => !current)}
-            className='text-indigo-600 hover:text-indigo-800 font-bold text-sm cursor-pointer flex space-x-1 items-center p-1 rounded-md hover:bg-indigo-500/20'>
-            <div>
-              {wallet.accounts[0]?.ens?.name ? (
-                <div className='flex items-center space-x-2'>
-                  {wallet.accounts[0]?.ens?.avatar && (
-                    <Image
-                      className='min-w-[20px] h-5 rounded-full object-fit bg-white'
-                      src={wallet.accounts[0]?.ens?.avatar.toString()}
-                      alt={wallet.accounts[0]?.ens?.name}
-                      width={20}
-                      height={20}
-                    />
-                  )}
-                  <div>{wallet.accounts[0]?.ens?.name}</div>
-                </div>
-              ) : (
-                <div>{truncateEthAddress(wallet.accounts[0].address)}</div>
-              )}
+      <div className='space-x-4 flex items-center'>
+        <div className='space-x-3 flex items-center'>
+          <a
+            href='https://discord.com/invite/Z5m88a5qWu'
+            target='_blank'
+            rel='noredirect'
+            className='flex items-center justify-center rounded-full bg-indigo-400/40 p-1 hover:bg-indigo-100 transition-colors duration-300 ease-in-out text-indigo-600 hover:text-indigo-800'>
+            <DiscordLogo size={16} weight='bold' />
+          </a>
+          <a
+            href='https://x.com/polywrap_io'
+            target='_blank'
+            rel='noredirect'
+            className='flex items-center justify-center rounded-full bg-indigo-400/40 p-1 hover:bg-indigo-100 transition-colors duration-300 ease-in-out text-indigo-600 hover:text-indigo-800'>
+            <XLogo size={16} />
+          </a>
+          <a
+            href='https://blog.polywrap.io/'
+            target='_blank'
+            rel='noredirect'
+            className='flex items-center justify-center rounded-full bg-indigo-400/40 p-1 hover:bg-indigo-100 transition-colors duration-300 ease-in-out text-indigo-600 hover:text-indigo-800'>
+            <SubstackLogo size={16} />
+          </a>
+        </div>
+        {wallet && (
+          <div className='relative' ref={dropdownRef}>
+            <div
+              onClick={() => setShowDropdownMenu((current) => !current)}
+              className='text-indigo-600 hover:text-indigo-800 font-bold text-sm cursor-pointer flex space-x-1 items-center p-1 rounded-md hover:bg-indigo-500/20'>
+              <div>
+                {wallet.accounts[0]?.ens?.name ? (
+                  <div className='flex items-center space-x-2'>
+                    {wallet.accounts[0]?.ens?.avatar && (
+                      <Image
+                        className='min-w-[20px] h-5 rounded-full object-fit bg-white'
+                        src={wallet.accounts[0]?.ens?.avatar.toString()}
+                        alt={wallet.accounts[0]?.ens?.name}
+                        width={20}
+                        height={20}
+                      />
+                    )}
+                    <div>{wallet.accounts[0]?.ens?.name}</div>
+                  </div>
+                ) : (
+                  <div>{truncateEthAddress(wallet.accounts[0].address)}</div>
+                )}
+              </div>
+              <CaretDown weight='bold' />
             </div>
-            <CaretDown weight='bold' />
-          </div>
-          {showDropdownMenu ? <div className='absolute top-[calc(100%+8px)] right-0 z-10' >
-            <div className='bg-indigo-50 rounded-2xl border-2 border-indigo-300 space-y-2 p-3 shadow-xl shadow-primary-shadow/20'>
-              <div
-                className="p-2 flex items-center space-x-2 hover:bg-white cursor-pointer w-full rounded-xl"
-                onClick={() => {
-                  disconnect(wallet);
-                  setShowDropdownMenu(!showDropdownMenu)
-                }}
-              >
-                <Link size={16} weight='bold' className='min-w-[16px]' />
-                <div className='whitespace-nowrap'>
-                  Disconnect Wallet
+            {showDropdownMenu ? (
+              <div className='absolute top-[calc(100%+8px)] right-0 z-10'>
+                <div className='bg-indigo-50 rounded-2xl border-2 border-indigo-300 space-y-2 p-3 shadow-xl shadow-primary-shadow/20'>
+                  <div
+                    className='p-2 flex items-center space-x-2 hover:bg-white cursor-pointer w-full rounded-xl'
+                    onClick={() => {
+                      disconnect(wallet);
+                      setShowDropdownMenu(!showDropdownMenu);
+                    }}>
+                    <Link size={16} weight='bold' className='min-w-[16px]' />
+                    <div className='whitespace-nowrap'>Disconnect Wallet</div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </div> : null}
-        </div>
-      )}
+            ) : null}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

diff --git a/web/app/favicon.ico b/web/app/favicon.ico
diff --git a/web/app/page.tsx b/web/app/page.tsx
@@ -2,28 +2,30 @@ import React from "react";
 import Prompt from "@/components/Prompt";
 import { EXAMPLE_PROMPTS } from "@/utils/examplePrompts";
 
-export const dynamic = 'force-dynamic'
+export const dynamic = "force-dynamic";
 
 function generateUniqueIndexes(arrayLength: number, count: number): number[] {
   if (arrayLength < count) {
-      throw new Error('Array does not have enough elements to generate unique indexes.');
+    throw new Error(
+      "Array does not have enough elements to generate unique indexes."
+    );
   }
 
   const uniqueIndexes = new Set<number>();
 
   while (uniqueIndexes.size < count) {
-      const randomIndex = Math.floor(Math.random() * arrayLength);
-      uniqueIndexes.add(randomIndex);
+    const randomIndex = Math.floor(Math.random() * arrayLength);
+    uniqueIndexes.add(randomIndex);
   }
 
   return Array.from(uniqueIndexes);
 }
 
 export default function HomePage() {
-  const promptIdxs = generateUniqueIndexes(EXAMPLE_PROMPTS.length, 5)
+  const promptIdxs = generateUniqueIndexes(EXAMPLE_PROMPTS.length, 6);
 
   return (
-    <div className="flex h-full items-center justify-center">
+    <div className='flex h-full items-center justify-center'>
       <Prompt promptIdxs={promptIdxs} />
     </div>
   );

diff --git a/web/components/Disclaimer.tsx b/web/components/Disclaimer.tsx
@@ -19,7 +19,7 @@ const Disclaimer = () => {
             This AI agent is experimental.
           </div>
           <div className="text-[10px]">
-            The agent is evaluating projects based on self-reported data through past Gitcion 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.
+            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>

diff --git a/web/components/Icons.tsx b/web/components/Icons.tsx
@@ -11,67 +11,25 @@ export const SparkleIcon = ({ size = 32, className }: IconProps) => {
     <svg
       width={size}
       height={size}
-      viewBox='0 0 32 32'
+      viewBox='0 0 256 256'
       className={clsx(
         "transform transition-transform duration-300 ease-in-out",
-        "group-hover/logo:scale-[2] group-hover/logo:-translate-x-1",
+        "group-hover/logo:scale-125 group-hover/logo:-translate-x-px sm:group-hover/logo:scale-175 sm:group-hover/logo:-translate-x-1",
         "group-hover/prompt:scale-125",
         className
       )}
       fill='none'
       xmlns='http://www.w3.org/2000/svg'>
-      <g className='group-hover/logo:animate-[pulse_1s_ease-in-out_infinite] group-hover/prompt:animate-[pulse_1s_ease-in-out_infinite]'>
-        <path
-          d='M19.8445 28.9687C18.6061 19.0604 19.2257 16.4405 9.22217 15.0114C19.8445 14.2493 18.2727 9.34305 19.8445 2.67391C21.4164 9.34305 19.8445 14.2493 30.4669 15.0114C20.4634 16.4405 21.083 19.0604 19.8445 28.9687Z'
-          className='fill-indigo-200'
-        />
-        <path
-          fillRule='evenodd'
-          clipRule='evenodd'
-          d='M20.2647 4.77857C20.3438 5.24154 20.4149 5.69346 20.4841 6.13335C21.0051 9.44615 21.4189 12.077 24.3771 13.6143C24.5319 13.8684 24.6834 14.1026 24.83 14.3127C19.7352 16.2791 19.4858 8.31679 19.998 4.08984C20.0774 4.29836 20.1667 4.52923 20.2647 4.77857ZM14.2062 14.0936C18.178 12.6638 18.6251 9.82105 19.2051 6.13335C19.2218 6.02743 19.2385 5.92081 19.2555 5.81351C19.6749 9.9149 19.1429 16.0136 14.188 14.5921C14.181 14.4359 14.1875 14.2693 14.2062 14.0936ZM19.5696 26.6669C21.2134 14.804 16.2286 14.4077 13.2739 15.818C18.4811 17.3017 18.7968 20.0177 19.5588 26.5735C19.5624 26.6046 19.566 26.6357 19.5696 26.6669ZM21.2547 18.2233C21.3199 17.4505 21.9921 15.9049 24.1596 15.9049C23.3216 16.1842 22.344 16.6312 21.2547 18.2233Z'
-          className='fill-indigo-100'
-        />
-        <path
-          d='M10.7448 29.7544C10.1706 25.1605 10.4579 23.9458 5.81982 23.2832C10.7448 22.9299 10.0161 20.6551 10.7448 17.563C11.4736 20.6551 10.7448 22.9299 15.6698 23.2832C11.0317 23.9458 11.319 25.1605 10.7448 29.7544Z'
-          className='fill-indigo-200'
-        />
-
-        <path
-          d='M6.45796 14.4366C5.88377 9.84267 6.17104 8.62794 1.53296 7.96536C6.45796 7.61202 5.7292 5.33726 6.45796 2.24515C7.18672 5.33726 6.45796 7.61202 11.383 7.96536C6.74487 8.62794 7.03215 9.84267 6.45796 14.4366Z'
-          className='fill-indigo-200'
-        />
-        <path
-          d='M20.2499 22.7481C20.1021 23.65 19.9769 24.6606 19.8445 25.7871C19.7122 24.6606 19.587 23.65 19.4391 22.7481C19.1647 21.0742 18.8044 19.7154 18.1414 18.6166C17.046 16.8014 15.1811 15.7829 11.8375 15.0814C15.4351 14.4606 17.2553 13.1452 18.2594 11.2321C18.8546 10.0979 19.1448 8.78467 19.3852 7.37086C19.4514 6.9812 19.5138 6.58413 19.5775 6.17919C19.6607 5.65047 19.746 5.10832 19.8445 4.55171C19.9431 5.10832 20.0284 5.65047 20.1115 6.17919C20.1752 6.58413 20.2377 6.9812 20.3039 7.37086C20.5443 8.78467 20.8345 10.0979 21.4297 11.2321C22.4338 13.1452 24.254 14.4606 27.8516 15.0814C24.508 15.7829 22.6431 16.8014 21.5477 18.6166C20.8847 19.7154 20.5244 21.0742 20.2499 22.7481Z'
-          className='stroke-indigo-500 stroke-1'
-          strokeWidth='1'
-        />
-      </g>
-      <g className='group-hover/logo:animate-[pulse_1s_300ms_ease-in-out_infinite] group-hover/prompt:animate-[pulse_1s_300ms_ease-in-out_infinite]'>
-        <path
-          fillRule='evenodd'
-          clipRule='evenodd'
-          d='M10.9397 18.5388C10.9764 18.7535 11.0094 18.963 11.0414 19.1669C11.283 20.7029 11.4749 21.9227 12.8464 22.6355C12.9182 22.7533 12.9884 22.8619 13.0564 22.9593C10.6942 23.871 10.5786 20.1793 10.8161 18.2195C10.8529 18.3162 10.8943 18.4232 10.9397 18.5388ZM8.13072 22.8577C9.97224 22.1947 10.1795 20.8767 10.4484 19.1669C10.4562 19.1178 10.4639 19.0684 10.4718 19.0186C10.6662 20.9202 10.4196 23.7479 8.12228 23.0888C8.11905 23.0164 8.12205 22.9391 8.13072 22.8577ZM10.6174 28.6872C11.3796 23.1871 9.06839 23.0033 7.69849 23.6572C10.1128 24.3451 10.2591 25.6043 10.6124 28.6439C10.6141 28.6583 10.6158 28.6727 10.6174 28.6872ZM11.3987 24.7724C11.4289 24.4141 11.7406 23.6975 12.7456 23.6975C12.357 23.827 11.9038 24.0342 11.3987 24.7724Z'
-          className='fill-indigo-100'
-        />
-        <path
-          d='M11.3623 24.8509C11.0434 25.3793 10.8721 26.0192 10.7448 26.7745C10.6176 26.0192 10.4462 25.3793 10.1274 24.8509C9.68154 24.112 8.9854 23.6497 7.90055 23.3254C9.08221 22.9847 9.7724 22.4162 10.188 21.6244C10.4798 21.0683 10.6183 20.4321 10.7301 19.7745C10.7351 19.7453 10.74 19.7162 10.7448 19.687C10.7497 19.7162 10.7546 19.7453 10.7595 19.7745C10.8713 20.4321 11.0098 21.0683 11.3017 21.6244C11.7173 22.4162 12.4074 22.9847 13.5891 23.3254C12.5043 23.6497 11.8081 24.112 11.3623 24.8509Z'
-          className='stroke-indigo-500 stroke-1'
-          strokeWidth='1'
-        />
-      </g>
-      <g className='group-hover/logo:animate-[pulse_1s_600ms_ease-in-out_infinite] group-hover/prompt:animate-[pulse_1s_600ms_ease-in-out_infinite]'>
-        <path
-          fillRule='evenodd'
-          clipRule='evenodd'
-          d='M6.65283 3.22094C6.68954 3.43559 6.7225 3.64512 6.75457 3.84907C6.99614 5.38503 7.18799 6.60483 8.55955 7.31758C8.63133 7.43539 8.70153 7.54399 8.76954 7.6414C6.40736 8.55309 6.29173 4.86141 6.5292 2.90161C6.56601 2.99829 6.60741 3.10533 6.65283 3.22094ZM3.84386 7.53981C5.68538 6.87686 5.89267 5.55885 6.16158 3.84907C6.16931 3.79996 6.17708 3.75053 6.18495 3.70078C6.37938 5.60236 6.13273 8.43 3.83541 7.77093C3.83218 7.6985 3.83519 7.62125 3.84386 7.53981ZM6.33058 13.3693C7.09272 7.86918 4.78152 7.68541 3.41162 8.33929C5.82591 9.02721 5.97227 10.2865 6.32555 13.326C6.32722 13.3404 6.3289 13.3549 6.33058 13.3693ZM7.11185 9.45449C7.14207 9.09619 7.45374 8.3796 8.4587 8.3796C8.07018 8.50911 7.61692 8.71631 7.11185 9.45449Z'
-          className='fill-indigo-100'
-        />
-        <path
-          d='M7.07542 9.53298C6.75657 10.0614 6.58521 10.7014 6.45796 11.4566C6.33071 10.7014 6.15935 10.0614 5.8405 9.53298C5.39468 8.79414 4.69853 8.3318 3.61369 8.00753C4.79534 7.66682 5.48553 7.09833 5.90109 6.30657C6.19297 5.75047 6.33145 5.11427 6.44326 4.45658C6.44821 4.42746 6.4531 4.3983 6.45796 4.3691C6.46281 4.3983 6.46771 4.42746 6.47266 4.45658C6.58447 5.11427 6.72295 5.75047 7.01483 6.30657C7.43039 7.09833 8.12058 7.66682 9.30223 8.00753C8.21739 8.3318 7.52124 8.79414 7.07542 9.53298Z'
-          className='stroke-indigo-500 stroke-1'
-          strokeWidth='1'
-        />
-      </g>
+      <path
+        d='M176.599 46.841C177.009 45.5566 178.826 45.5566 179.236 46.841V46.841C183.595 60.507 194.303 71.2152 207.969 75.5741V75.5741C209.254 75.9838 209.254 77.8013 207.969 78.211V78.211C194.303 82.57 183.595 93.2782 179.236 106.944V106.944C178.826 108.229 177.009 108.229 176.599 106.944V106.944C172.24 93.2782 161.532 82.57 147.866 78.211V78.211C146.582 77.8013 146.582 75.9838 147.866 75.5741V75.5741C161.532 71.2152 172.24 60.507 176.599 46.841V46.841Z'
+        stroke-width='8.35645'
+        className='group-hover/logo:animate-[pulse_1s_ease-in-out_infinite] group-hover/prompt:animate-[pulse_1s_ease-in-out_infinite] group-hover/prompt:fill-blue-400 fill-indigo-500 group-hover/prompt:stroke-blue-800 stroke-indigo-800'
+      />
+      <path
+        d='M112.177 75.9993C112.59 74.7066 114.419 74.7066 114.831 75.9993L123.352 102.712C127.739 116.466 138.515 127.242 152.268 131.629L178.981 140.15C180.274 140.562 180.274 142.391 178.981 142.803L152.268 151.324C138.515 155.711 127.739 166.487 123.352 180.241L114.831 206.954C114.419 208.246 112.59 208.246 112.177 206.954L103.657 180.241C99.27 166.487 88.4934 155.711 74.7401 151.324L48.0271 142.803C46.7344 142.391 46.7344 140.562 48.0271 140.15L74.7401 131.629C88.4934 127.242 99.27 116.466 103.657 102.712L112.177 75.9993Z'
+        stroke-width='11.1419'
+        className='group-hover/logo:animate-[pulse_1s_300ms_ease-in-out_infinite] group-hover/prompt:animate-[pulse_1s_300ms_ease-in-out_infinite] group-hover/prompt:fill-blue-400 group-hover/prompt:stroke-blue-800 fill-indigo-500 stroke-indigo-800'
+      />
     </svg>
   );
 };
@@ -93,6 +51,31 @@ export const XLogo = ({ size = 16, className }: IconProps) => {
   );
 };
 
+export const SubstackLogo = ({ size = 16, className }: IconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}>
+      <path
+        d='M3.89453 2.73682H20.1045V4.92605H3.89453V2.73682Z'
+        fill='currentColor'
+      />
+      <path
+        d='M20.1045 6.91009H3.89453V9.09969H20.1045V6.91009Z'
+        fill='currentColor'
+      />
+      <path
+        d='M3.89453 11.0834V21.2636L11.9992 16.7171L20.1052 21.2636V11.0834H3.89453Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
 export interface ScoreIconProps extends IconProps {
   rank: number;
 }