chore: hydrate application

src/app/[chainId]/[poolId]/[applicationId]/page.tsx

@@ -1,10 +1,35 @@
-import ApplicationDetails from "@/components/application/Application";
+import ApplicationDetail from "@/components/application/ApplicationDetail";
 import Container from "@/components/shared/Container";
+import { graphqlEndpoint, getMicroGrantRecipientQuery } from "@/utils/query";
+import request from "graphql-request";
+
+export default async function Application({
+  params,
+}: {
+  params: { chainId: string; poolId: string; applicationId: string };
+}) {
+  let recipient;
+  let isError = false;
+
+  try {
+    const response: any = await request(
+      graphqlEndpoint,
+      getMicroGrantRecipientQuery,
+      {
+        chainId: params.chainId,
+        poolId: params.poolId,
+        recipientId: params.applicationId,
+      }
+    );
+    recipient = response?.microGrantRecipient;
+  } catch (error) {
+    isError = true;
+    console.error(error);
+  }
 
-export default function ApplicationDetail() {
   return (
     <Container>
-      <ApplicationDetails />
+      <ApplicationDetail application={recipient} isError={isError} />
     </Container>
   );
 }

src/app/types.ts

@@ -103,6 +103,31 @@ export type TPoolData = {
   };
 };
 
+export type TApplicationData = {
+  microGrant: {
+    chainId: string;
+    poolId: string;
+    allocationStartTime: number;
+    allocationEndTime: number;
+    pool: {
+      tokenMetadata: {
+        name?: string;
+        symbol?: string;
+        decimals?: number;
+      };
+      token: `0x${string}`;
+      amount: string;
+    };
+  };
+  recipientId: string;
+  recipientAddress: string;
+  requestedAmount: string;
+  metadataPointer: string;
+  blockTimestamp: string;
+  isUsingRegistryAnchor: boolean;
+  status: string;
+};
+
 export type TAllocatedData = {
   recipientId: `0x${string}`;
   recipientAddress: `0x${string}`;

src/components/application/Application.tsx → src/components/application/ApplicationDetail.tsx

@@ -1,30 +1,41 @@
 "use client";
 
-import { classNames, statusColorsScheme } from "@/utils/common";
-import { useParams } from "next/navigation";
+import { classNames, humanReadableAmount, statusColorsScheme } from "@/utils/common";
 import Breadcrumb from "../shared/Breadcrumb";
 import Image from "next/image";
+import NotificationToast from "../shared/NotificationToast";
+import { TApplicationData } from "@/app/types";
+import { formatEther } from "viem";
 
-export default function Application() {
-  const params = useParams();
+export default function ApplicationDetail(props: {
+  application: TApplicationData,
+  isError: boolean,
+}) {
 
-  const chainId = params["chainId"];
-  const poolId = params["poolId"];
+  console.log(props.application);  
 
+  const microGrantRecipient = props.application;
+  const microGrant = microGrantRecipient.microGrant;
+
+  const tokenMetadata = microGrant.pool.tokenMetadata;
+  const amount = humanReadableAmount(microGrant.pool.amount, tokenMetadata.decimals);
+  const token = tokenMetadata.symbol ?? "ETH";
+
+  // TODO: wire in name + description 
   const applicationName = "Papa Kush";
 
   const application = {
     name: applicationName,
-    status: "Pending", // "Accepted"
-    amountRequested: "$192",
+    status: microGrantRecipient.status,
+    amountRequested: `${formatEther(BigInt(amount))} ${token}`,
     href: "#",
     breadcrumbs: [
       { id: 1, name: "Home", href: "/" },
-      { id: 2, name: `Pool ${poolId}`, href: `/${chainId}/${poolId}` },
+      { id: 2, name: `Pool ${microGrant.poolId}`, href: `/${microGrant.chainId}/${microGrant.poolId}` },
       { id: 3, name: applicationName, href: "#" },
     ],
     logo: {
-      src: "https://www.mikeduran.com/wp-content/uploads/2019/02/Solarpunk-1.jpg",
+      src: "https://www.mikeduran.com/wp-content/uploads/2019/02/Solarpink-1.jpg",
       alt: "Two each of gray, white, and black shirts laying flat.",
     },
     description:
@@ -49,6 +60,11 @@ export default function Application() {
 
   return (
     <div className="bg-white">
+
+      {props.isError && (
+        <NotificationToast success={false} title="Unable to fetch application" />
+      )}
+
       <div className="pt-6">
         <Breadcrumb breadcrumbs={application.breadcrumbs} />
 

src/components/pool/PoolList.tsx

@@ -14,7 +14,6 @@ const PoolList = async () => {
       getMicroGrantsQuery,
       {},
     );
-    console.log("response ================", response);
     pools = response["microGrants"];
   } catch (e) {
     isError = true;

src/utils/common.ts

@@ -7,7 +7,7 @@ export function classNames(...classes: string[]) {
 export const statusColorsScheme = {
   Paid: "text-blue-700 bg-blue-50 ring-blue-600/20",
   Accepted: "text-green-700 bg-green-50 ring-green-600/20",
-  Pending: "text-yellow-600 bg-yellow-50 ring-yellow-500/10",
+  Pending: "text-yellow-600 bg-yellow-50 ring-yellow-600/20",
   Rejected: "text-red-700 bg-red-50 ring-red-600/20",
   Active: "text-green-700 bg-green-50 ring-green-600/20",
   Closed: "text-red-700 bg-red-50 ring-red-600/20",

src/utils/query.ts

@@ -73,6 +73,17 @@ export const getMicroGrantRecipientQuery = gql`
       poolId: $poolId
       recipientId: $recipientId
     ) {
+      microGrant {
+        poolId
+        chainId
+        allocationStartTime
+        allocationEndTime
+        pool {
+          tokenMetadata
+          token
+          amount
+        }
+      }
       recipientId
       recipientAddress
       requestedAmount