Merge pull request #182 from jo-elimu/24-paired-sponsorship

feat(frontend): paired sponsorship

Author: nya-elimu

frontend/src/components/PairedDistribution.tsx

@@ -41,14 +41,10 @@ export default function PairedDistribution({ sponsorshipQueueNumber }: { sponsor
     }
 
     // Iterate processed queue pairs and look for matching queue number
-    let distributionQueueNumber = undefined
-    events.forEach(event => {
-        console.debug("event.blockNumber:", event.blockNumber)
-        if (event.args.sponsorshipQueueNumber == sponsorshipQueueNumber) {
-            distributionQueueNumber = event.args.distributionQueueNumber
-            return
-        }
-    })
+    const matchingEvent = events.find(
+        event => event.args.sponsorshipQueueNumber == sponsorshipQueueNumber
+    )
+    const distributionQueueNumber = matchingEvent?.args.distributionQueueNumber
     console.debug("distributionQueueNumber:", distributionQueueNumber)
 
     if (!distributionQueueNumber) {

frontend/src/components/PairedSponsorship.tsx

@@ -0,0 +1,68 @@
+import { Address, createPublicClient, http } from "viem";
+import { abi as abi_queue_handler } from "../../../backend/ignition/deployments/chain-11155111/artifacts/QueueHandlerModule#QueueHandler.json"
+import deployed_addresses from "../../../backend/ignition/deployments/chain-11155111/deployed_addresses.json"
+import LoadingIndicator from "@/components/LoadingIndicator";
+import { sepolia } from "viem/chains";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+
+export default function PairedSponsorship({ distributionQueueNumber }: { distributionQueueNumber: number }) {
+    console.debug("PairedSponsorship")
+
+    console.debug("distributionQueueNumber:", distributionQueueNumber)
+
+    const deploymentAddress: Address = deployed_addresses["QueueHandlerModule#QueueHandler"] as `0x${string}`
+    console.debug("deploymentAddress:", deploymentAddress)
+
+    const publicClient = createPublicClient({
+        chain: sepolia,
+        transport: http("https://0xrpc.io/sep")
+    })
+
+    const [events, setEvents] = useState(Array(0))
+    useEffect(() => {
+        async function fetchContractEvents() {
+            const logs = await publicClient.getContractEvents({
+                abi: abi_queue_handler,
+                address: deploymentAddress,
+                fromBlock: BigInt(9_760_219), // https://sepolia.etherscan.io/tx/0x01ea5a02fc320619f391757c038666722837e908c5094bef55b8a16824fb96e5
+                eventName: "QueuePairProcessed"
+            })
+            console.debug("logs:", logs)
+            setEvents(logs)
+        }
+        fetchContractEvents()
+    }, [])
+    console.debug("events.length:", events.length)
+    console.debug("events:", events)
+
+    if (events.length == 0) {
+        return <LoadingIndicator />
+    }
+
+    // Iterate processed queue pairs and look for matching queue number
+    const matchingEvent = events.find(
+        event => event.args.distributionQueueNumber == distributionQueueNumber
+    )
+    const sponsorshipQueueNumber = matchingEvent?.args.sponsorshipQueueNumber
+    console.debug("sponsorshipQueueNumber:", sponsorshipQueueNumber)
+
+    if (!sponsorshipQueueNumber) {
+        return (
+            <span className="p-2 text-sm text-gray-300 border-gray-400 bg-gray-600 border-2 rounded-xl">
+                Pairing not yet <Link href="/process" className="text-purple-300" id="processLink">processed</Link>
+            </span>
+        )
+    } else {
+      return (
+          <Link href={`/sponsorships/${sponsorshipQueueNumber}`} className="text-indigo-600">
+              <div className="skew-y-3 p-4 text-2xl bg-indigo-200 dark:bg-indigo-950 rounded-lg border-indigo-400 border-r-4 border-b-4 hover:border-r-8 hover:border-b-8 hover:-translate-y-1">
+                  <div className="mb-4 text-center text-4xl">
+                      🛵💨
+                  </div>
+                  Sponsorship #{sponsorshipQueueNumber}
+              </div>
+          </Link>
+      )
+    }
+}

frontend/src/pages/distributions/[queueNumber].tsx

@@ -7,6 +7,7 @@ import Verifications from "@/components/Verifications";
 import deployed_addresses from "../../../../backend/ignition/deployments/chain-11155111/deployed_addresses.json";
 import { Address } from "viem";
 import Link from "next/link";
+import PairedSponsorship from "@/components/PairedSponsorship";
 
 export default function DistributionDetails() {
   console.debug("DistributionDetails");
@@ -59,6 +60,15 @@ export default function DistributionDetails() {
             <Verifications queueNumber={queueNumber} eventName="DistributionRejected"  />
           </div>
         </div>
+
+        <div className="mt-8 border-purple-100 dark:border-purple-950 border-t-2 pt-8">
+          <h2 className="text-2xl text-center">
+            Paired Sponsorship 🔗
+          </h2>
+          <div className="mt-4 text-center">
+            <PairedSponsorship distributionQueueNumber={queueNumber} />
+          </div>
+        </div>
       </main>
       <MainFooter />
     </>

frontend/src/pages/distributors/[ethereumAddress].tsx

@@ -9,6 +9,7 @@ import { sepolia } from "viem/chains";
 import { useEffect, useState } from "react";
 import LoadingIndicator from "@/components/LoadingIndicator";
 import Link from "next/link";
+import PairedSponsorship from "@/components/PairedSponsorship";
 
 export default function Distributor() {
   console.debug("Distributor");
@@ -98,7 +99,6 @@ export function LoadDistributionAddedEvents({ ethereumAddress }: {ethereumAddres
                     <th className="bg-zinc-700 text-zinc-300 p-4 rounded-md">Queue Number</th>
                     <th className="bg-zinc-700 text-zinc-300 p-4 rounded-md">Language Code</th>
                     <th className="bg-zinc-700 text-zinc-300 p-4 rounded-md">Paired Sponsorship</th>
-                    <th className="bg-zinc-700 text-zinc-300 p-4 rounded-md">Student ID</th>
                 </tr>
             </thead>
             <tbody>
@@ -116,8 +116,9 @@ export function LoadDistributionAddedEvents({ ethereumAddress }: {ethereumAddres
                             </Link>
                         </td>
                         <td className="bg-zinc-800 text-zinc-400 p-2 rounded-md">???</td>
-                        <td className="bg-zinc-800 text-zinc-400 p-2 rounded-md">#???</td>
-                        <td className="bg-zinc-800 text-zinc-400 p-2 rounded-md">Student #???</td>
+                        <td className="bg-zinc-800 text-zinc-400 p-2 rounded-md">
+                            <PairedSponsorship distributionQueueNumber={el.args.queueNumber} />
+                        </td>
                     </tr>
                 )}
             </tbody>