From dbbf4b3f4c5a79c4e791ba6d5b47b233aec94fb6 Mon Sep 17 00:00:00 2001
From: Manish Gupta <manishiwa@gmail.com>
Date: Thu, 11 Jan 2024 09:53:20 -0500
Subject: [PATCH] RPGF3 changes

---
 app/api/optimism-retropgf-3/projects/route.ts |  7 ++++++-
 app/optimism-retropgf-3/page.tsx              | 20 ++++++++++++++-----
 types/api/RetroPGF3.ts                        |  5 +++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/api/optimism-retropgf-3/projects/route.ts b/app/api/optimism-retropgf-3/projects/route.ts
index 7f314a1e..e0beac54 100644
--- a/app/api/optimism-retropgf-3/projects/route.ts
+++ b/app/api/optimism-retropgf-3/projects/route.ts
@@ -11,6 +11,11 @@ const pool = new Pool({
 });
 
 export async function GET() {
+  // get OP token price from coingecko
+  const tokenPrice = await fetch(
+    "https://api.coingecko.com/api/v3/simple/price?ids=optimism&vs_currencies=usd",
+  ).then((res) => res.json());
+
   try {
     const result = await pool.query(
       `SELECT 
@@ -39,7 +44,7 @@ export async function GET() {
       }
     });
 
-    return Response.json({ projects: data });
+    return Response.json({ projects: data, prices: tokenPrice });
   } catch (error) {
     return Response.json({ error });
   }
diff --git a/app/optimism-retropgf-3/page.tsx b/app/optimism-retropgf-3/page.tsx
index 9957b455..8b5c63ef 100644
--- a/app/optimism-retropgf-3/page.tsx
+++ b/app/optimism-retropgf-3/page.tsx
@@ -698,12 +698,22 @@ export default function Page() {
                       </div>
                     </TooltipTrigger>
                     <TooltipContent className="z-50 flex items-center justify-center">
-                      <div className="px-3 py-1.5 text-sm font-medium bg-forest-100 dark:bg-[#4B5553] text-forest-900 dark:text-forest-100 rounded-xl shadow-lg z-50 flex items-center">
-                        <div className="text-xs space-x-1">
-
-                          {info.row.original.awarded.toLocaleString()} OP <span className="font-light">Awarded</span>
-
+                      <div className="ml-2 px-3 py-1.5 text-sm bg-forest-100 dark:bg-[#4B5553] text-forest-900 dark:text-forest-100 rounded-xl shadow-lg z-50 flex flex-col space-y-1">
+                        <div className="text-xs text-center">Award Amount</div>
+                        <div className="flex justify-between space-x-1 font-bold items-end leading-snug">
+                          <div className="flex-1 text-right">{info.row.original.awarded.toLocaleString()}</div><div className="text-left opacity-60 text-xs font-normal">OP</div>
                         </div>
+                        {projectsResponse?.prices.optimism.usd &&
+                          (
+                            <>
+                              <div className="flex justify-between space-x-1 items-end">
+                                <div className="flex-1 text-right"><span className="opacity-60 text-[0.65rem]">$</span>{Math.round(projectsResponse.prices.optimism.usd * info.row.original.awarded).toLocaleString()}</div><div className="text-left opacity-60 text-[0.65rem]">USD</div>
+                              </div>
+                              {/* <div className="text-[0.6rem] text-center opacity-60">@ ${projectsResponse.prices.optimism.usd} / OP</div> */}
+                            </>
+                          )
+                        }
+
                       </div>
                     </TooltipContent>
                   </Tooltip>
diff --git a/types/api/RetroPGF3.ts b/types/api/RetroPGF3.ts
index 78f620ee..10a70748 100644
--- a/types/api/RetroPGF3.ts
+++ b/types/api/RetroPGF3.ts
@@ -83,6 +83,11 @@ export type Project = {
 
 export type ProjectsResponse = {
   projects: Project[];
+  prices: {
+    optimism: {
+      usd: number;
+    };
+  };
 };
 
 export type List = {