fix: remove conditional to allow every user test the application

.prettierrc.yml

@@ -0,0 +1,7 @@
+bracketSpacing: true
+printWidth: 100
+proseWrap: "always"
+singleQuote: false
+tabWidth: 2
+trailingComma: "all"
+useTabs: false

README.md

@@ -1 +1,56 @@
 ## Getting Started with GAP frontend
+
+## Pre-Requisites
+
+- [node.js](https://nodejs.org/en/download/package-manager) installed (>=18.17.0)
+- typescript installed (developed on v5.3.3)
+- [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
+- Web3 Wallet installed in your browser
+
+## Installation
+
+### Forkin the repository
+
+Fork this repository by:
+
+1. Clicking in the arrow aside from the `fork`
+2. Unmark the option `Copy the main branch only`
+3. Click `Create fork`
+
+### Cloning the repository
+
+Open the VsCode or other IDE editor, and enter the following command in the cmd:
+
+```bash
+git clone https://github.com/YourUserName/gap-app-v2.git
+```
+
+### Instaling dependencies
+
+Install all package dependencies by running:
+
+```bash
+yarn install
+```
+
+### Configure the `.env.example` file
+
+1. Copy the `.env.example` file and paste it in the root directory
+2. Remove the `.example` from the `.env.example` file name
+3. Add your API keys in the `.env` file
+4. Creating the keys to fulfill the `.env` file
+   1. **ALCHEMY_KEY:** Follow [this](https://docs.alchemy.com/docs/alchemy-quickstart-guide) tutorial of the Alchemy Docs and fill the following keys: `NEXT_PUBLIC_ALCHEMY_KEY`(use base sepolia for this one), `NEXT_PUBLIC_RPC_OPTIMISM`, `NEXT_PUBLIC_RPC_ARBITRUM`, `NEXT_PUBLIC_RPC_SEPOLIA` and `NEXT_PUBLIC_RPC_OPTIMISM_SEPOLIA`
+   2. **PROJECT_ID:** Create your account in [this](https://walletconnect.com/) link and follow the instructions to generate a key
+   3. **NEXT_PUBLIC_MIXPANEL_KEY:** Create your account in [this](https://mixpanel.com/login/) and follow [this](https://www.storylane.io/tutorials/how-to-get-mixpanel-project-token) tutorial
+
+### Running the application
+
+First, run the development server:
+
+```bash
+yarn run dev
+```
+
+Open http://localhost:3000 with your browser.
+
+<a href="https://twitter.com/@blockful_io" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="@blockful_io" height="30" width="40" /></a>

components/Icons/StarReview.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@/utilities/tailwind";
+import type { SVGProps } from "react";
+
+export const StarReviewIcon = ({
+  props,
+  pathProps,
+  score,
+  isHovered = true,
+}: {
+  props?: SVGProps<SVGSVGElement>;
+  pathProps?: React.SVGProps<SVGPathElement>;
+  score?: number;
+  isHovered?: boolean;
+}) => {
+  return (
+    <svg
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        {...pathProps}
+        d="M11.2827 3.44868C11.5131 2.98174 11.6284 2.74827 11.7848 2.67368C11.9209 2.60877 12.0791 2.60877 12.2152 2.67368C12.3717 2.74827 12.4869 2.98174 12.7174 3.44868L14.9041 7.87864C14.9721 8.0165 15.0061 8.08542 15.0558 8.13894C15.0999 8.18632 15.1527 8.22471 15.2113 8.25198C15.2776 8.28278 15.3536 8.2939 15.5057 8.31613L20.397 9.03107C20.9121 9.10635 21.1696 9.144 21.2888 9.2698C21.3925 9.37925 21.4412 9.52966 21.4215 9.67914C21.3988 9.85094 21.2124 10.0325 20.8395 10.3957L17.3014 13.8418C17.1912 13.9492 17.136 14.0029 17.1004 14.0668C17.0689 14.1234 17.0487 14.1856 17.0409 14.2499C17.0321 14.3225 17.0451 14.3984 17.0711 14.5501L17.906 19.4175C17.994 19.9309 18.038 20.1875 17.9553 20.3399C17.8833 20.4724 17.7554 20.5653 17.6071 20.5928C17.4366 20.6244 17.2061 20.5032 16.7451 20.2608L12.3724 17.9612C12.2361 17.8895 12.168 17.8537 12.0962 17.8396C12.0327 17.8272 11.9673 17.8272 11.9038 17.8396C11.832 17.8537 11.7639 17.8895 11.6277 17.9612L7.25492 20.2608C6.79392 20.5032 6.56341 20.6244 6.39297 20.5928C6.24468 20.5653 6.11672 20.4724 6.04474 20.3399C5.962 20.1875 6.00603 19.9308 6.09407 19.4175L6.92889 14.5501C6.95491 14.3984 6.96793 14.3225 6.95912 14.2499C6.95132 14.1856 6.93111 14.1234 6.89961 14.0668C6.86402 14.0029 6.80888 13.9492 6.69859 13.8418L3.16056 10.3957C2.78766 10.0325 2.60121 9.85094 2.57853 9.67914C2.55879 9.52966 2.60755 9.37925 2.71125 9.2698C2.83044 9.144 3.08797 9.10635 3.60304 9.03107L8.49431 8.31613C8.64642 8.2939 8.72248 8.28278 8.78872 8.25198C8.84736 8.22471 8.90016 8.18632 8.94419 8.13894C8.99391 8.08542 9.02793 8.0165 9.09597 7.87864L11.2827 3.44868Z"
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn(
+          isHovered ? "hover:fill-[#004EEB] hover:stroke-[#004EEB]" : "",
+          pathProps?.className || "",
+        )}
+      />
+      {score !== undefined && (
+        <text
+          x="12"
+          y="15"
+          textAnchor="middle"
+          fontSize={props?.fontSize || "12"}
+          fill={props?.color || "#000000"}
+        >
+          {score}
+        </text>
+      )}
+    </svg>
+  );
+};

components/Pages/ProgramRegistry/ProgramList.tsx

@@ -10,15 +10,9 @@ import { DiscussionIcon } from "@/components/Icons/Discussion";
 import { BlogIcon } from "@/components/Icons/Blog";
 import { OrganizationIcon } from "@/components/Icons/Organization";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import {
-  ColumnDef,
-  Row,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import { ColumnDef, Row, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Button } from "@/components/Utilities/Button";
-import { formatDate } from "@/utilities/formatDate";
+import { StarReviewIcon } from "@/components/Icons/StarReview";
 
 export type GrantProgram = {
   _id: {
@@ -74,6 +68,7 @@ export type GrantProgram = {
   registryAddress?: string;
   anchorAddress?: string;
   programId?: string;
+  programScore?: number;
   chainID?: number;
   isValid?: boolean;
   txHash?: string;
@@ -86,10 +81,7 @@ interface ProgramListProps {
   selectProgram: (program: GrantProgram) => void;
 }
 
-export const ProgramList: FC<ProgramListProps> = ({
-  grantPrograms,
-  selectProgram,
-}) => {
+export const ProgramList: FC<ProgramListProps> = ({ grantPrograms, selectProgram }) => {
   const columns = useMemo<ColumnDef<GrantProgram>[]>(
     () => [
       {
@@ -110,10 +102,7 @@ export const ProgramList: FC<ProgramListProps> = ({
 
                 <div className="flex flex-row gap-1 w-full">
                   {grant.metadata?.socialLinks?.website ? (
-                    <ExternalLink
-                      href={grant.metadata?.socialLinks?.website}
-                      className="w-max"
-                    >
+                    <ExternalLink href={grant.metadata?.socialLinks?.website} className="w-max">
                       <Image
                         className="w-5 h-5 text-black dark:text-white dark:hidden"
                         width={20}
@@ -131,42 +120,27 @@ export const ProgramList: FC<ProgramListProps> = ({
                     </ExternalLink>
                   ) : null}
                   {grant.metadata?.socialLinks?.twitter ? (
-                    <ExternalLink
-                      href={grant.metadata?.socialLinks?.twitter}
-                      className="w-max"
-                    >
+                    <ExternalLink href={grant.metadata?.socialLinks?.twitter} className="w-max">
                       <Twitter2Icon className="w-5 h-5 text-black dark:text-white" />
                     </ExternalLink>
                   ) : null}
                   {grant.metadata?.socialLinks?.discord ? (
-                    <ExternalLink
-                      href={grant.metadata?.socialLinks?.discord}
-                      className="w-max"
-                    >
+                    <ExternalLink href={grant.metadata?.socialLinks?.discord} className="w-max">
                       <Discord2Icon className="w-5 h-5 text-black dark:text-white" />
                     </ExternalLink>
                   ) : null}
                   {grant.metadata?.socialLinks?.forum ? (
-                    <ExternalLink
-                      href={grant.metadata?.socialLinks?.forum}
-                      className="w-max"
-                    >
+                    <ExternalLink href={grant.metadata?.socialLinks?.forum} className="w-max">
                       <DiscussionIcon className="w-5 h-5 text-black dark:text-white" />
                     </ExternalLink>
                   ) : null}
                   {grant.metadata?.socialLinks?.blog ? (
-                    <ExternalLink
-                      href={grant.metadata?.socialLinks?.blog}
-                      className="w-max"
-                    >
+                    <ExternalLink href={grant.metadata?.socialLinks?.blog} className="w-max">
                       <BlogIcon className="w-5 h-5 text-black dark:text-white" />
                     </ExternalLink>
                   ) : null}
                   {grant.metadata?.socialLinks?.orgWebsite ? (
-                    <ExternalLink
-                      href={grant.metadata?.socialLinks?.orgWebsite}
-                      className="w-max"
-                    >
+                    <ExternalLink href={grant.metadata?.socialLinks?.orgWebsite} className="w-max">
                       <OrganizationIcon className="w-5 h-5 text-black dark:text-white" />
                     </ExternalLink>
                   ) : null}
@@ -188,10 +162,7 @@ export const ProgramList: FC<ProgramListProps> = ({
           const grant = info.row.original;
           return (
             <div className="whitespace-nowrap px-3 py-5 text-sm text-black dark:text-zinc-400 max-w-[285px]">
-              <div
-                className="w-[420px] max-w-[420px] text-wrap pr-8"
-                data-color-mode="light"
-              >
+              <div className="w-[420px] max-w-[420px] text-wrap pr-8" data-color-mode="light">
                 <ReadMore
                   readLessText="Show less description"
                   readMoreText="Show full description"
@@ -247,22 +218,14 @@ export const ProgramList: FC<ProgramListProps> = ({
                             <Image
                               width={20}
                               height={20}
-                              src={
-                                registryHelper.networkImages[
-                                  network.toLowerCase()
-                                ].light
-                              }
+                              src={registryHelper.networkImages[network.toLowerCase()].light}
                               alt={network}
                               className="rounded-full w-5 h-5  dark:hidden"
                             />
                             <Image
                               width={20}
                               height={20}
-                              src={
-                                registryHelper.networkImages[
-                                  network.toLowerCase()
-                                ].dark
-                              }
+                              src={registryHelper.networkImages[network.toLowerCase()].dark}
                               alt={network}
                               className="rounded-full w-5 h-5  hidden dark:block"
                             />
@@ -280,17 +243,11 @@ export const ProgramList: FC<ProgramListProps> = ({
                       >
                         <div className="flex flex-col gap-3">
                           <div className="flex flex-row gap-2 items-center">
-                            {registryHelper.networkImages[
-                              network.toLowerCase()
-                            ] ? (
+                            {registryHelper.networkImages[network.toLowerCase()] ? (
                               <Image
                                 width={16}
                                 height={16}
-                                src={
-                                  registryHelper.networkImages[
-                                    network.toLowerCase()
-                                  ].dark
-                                }
+                                src={registryHelper.networkImages[network.toLowerCase()].dark}
                                 alt={network}
                                 className="rounded-full w-4 h-4"
                               />
@@ -327,21 +284,12 @@ export const ProgramList: FC<ProgramListProps> = ({
                       >
                         <div className="flex flex-col gap-3">
                           {restNetworks.map((item) => (
-                            <div
-                              key={item}
-                              className="flex flex-row gap-2 items-center"
-                            >
-                              {registryHelper.networkImages[
-                                item.toLowerCase()
-                              ] ? (
+                            <div key={item} className="flex flex-row gap-2 items-center">
+                              {registryHelper.networkImages[item.toLowerCase()] ? (
                                 <Image
                                   width={16}
                                   height={16}
-                                  src={
-                                    registryHelper.networkImages[
-                                      item.toLowerCase()
-                                    ].dark
-                                  }
+                                  src={registryHelper.networkImages[item.toLowerCase()].dark}
                                   alt={item}
                                   className="rounded-full w-4 h-4"
                                 />
@@ -420,6 +368,54 @@ export const ProgramList: FC<ProgramListProps> = ({
           </div>
         ),
       },
+      {
+        accessorFn: (row) => row,
+        id: "AverageScore",
+        cell: (info) => {
+          const grant = info.row.original;
+
+          return (
+            <div className="whitespace-nowrap px-3 py-5 text-sm text-black dark:text-zinc-300">
+              <Tooltip.Provider>
+                {grant.programScore ? (
+                  <Tooltip.Root>
+                    <Tooltip.Trigger asChild>
+                      <span className="mr-1 inline-flex items-center text-lg font-medium">
+                        <StarReviewIcon
+                          props={{
+                            className:
+                              "text-[#004EEB] w-14 h-14 transparent hover:fill-transparent hover:stroke-transparent",
+                            fontSize: 7,
+                            color: "#FFF",
+                          }}
+                          isHovered={false}
+                          score={grant.programScore}
+                        />
+                      </span>
+                    </Tooltip.Trigger>
+                    <Tooltip.Portal>
+                      <Tooltip.Content
+                        sideOffset={5}
+                        className="tooltip-content rounded bg-black p-2 text-white shadow-lg"
+                      >
+                        {`Score: ${grant.programScore} out of 5`}
+                        <Tooltip.Arrow className="tooltip-arrow fill-black" />
+                      </Tooltip.Content>
+                    </Tooltip.Portal>
+                  </Tooltip.Root>
+                ) : (
+                  <></>
+                )}
+              </Tooltip.Provider>
+            </div>
+          );
+        },
+        header: () => (
+          <div className="px-3 py-3.5 text-left text-sm font-bold text-gray-900 dark:text-zinc-100 sm:pl-0 font-body max-w-64">
+            Score
+          </div>
+        ),
+      },
       {
         accessorFn: (row) => row,
         id: "Apply",
@@ -439,7 +435,7 @@ export const ProgramList: FC<ProgramListProps> = ({
         header: () => <div />,
       },
     ],
-    []
+    [],
   );
 
   const table = useReactTable({
@@ -479,12 +475,7 @@ export const ProgramList: FC<ProgramListProps> = ({
                       style={{ width: header.getSize() }}
                     >
                       {header.isPlaceholder ? null : (
-                        <div>
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                        </div>
+                        <div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
                       )}
                     </th>
                   );
@@ -500,18 +491,13 @@ export const ProgramList: FC<ProgramListProps> = ({
                   key={row.id}
                   style={{
                     height: `${virtualRow.size}px`,
-                    transform: `translateY(${
-                      virtualRow.start - index * virtualRow.size
-                    }px)`,
+                    transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
                   }}
                 >
                   {row.getVisibleCells().map((cell) => {
                     return (
                       <td key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </td>
                     );
                   })}