Merge pull request #30 from elimu-ai/17-add-sponsorship

feat(frontend): add sponsorship
elimu-ai · Jun 30, 2024 · b89422a · b89422a
2 parents 25c414b + 94a24c2
commit b89422a
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 10 deletions.
diff --git a/frontend/src/components/ErrorIndicator.tsx b/frontend/src/components/ErrorIndicator.tsx
@@ -0,0 +1,8 @@
+export default function ErrorIndicator({ description }: any) {
+    return (
+        <div className="p-8 bg-orange-800 border-orange-400 border-4 rounded-lg">
+            <p>Error: <code>{description}</code></p>
+            <p className="mt-4">See browser console for more details</p>
+        </div>
+    )
+}
diff --git a/frontend/src/components/LoadingIndicator copy.tsx b/frontend/src/components/LoadingIndicator copy.tsx
diff --git a/frontend/src/components/SponsorshipSummary.tsx b/frontend/src/components/SponsorshipSummary.tsx
@@ -4,6 +4,7 @@ import deployed_addresses from "../../../backend/ignition/deployments/chain-8453
 import LoadingIndicator from "./LoadingIndicator";
 import { Address, formatEther } from "viem";
 import { Avatar, Name } from "@coinbase/onchainkit/identity";
+import ErrorIndicator from "./ErrorIndicator";
 
 export default function SponsorshipSummary({ queueIndex }: any) {
     console.debug("SponsorshipSummary");
@@ -12,18 +13,24 @@ export default function SponsorshipSummary({ queueIndex }: any) {
 
     const deploymentAddress: Address = deployed_addresses["SponsorshipQueueModule#SponsorshipQueue"] as `0x${string}`;
     console.debug("deploymentAddress:", deploymentAddress);
-    const { isLoading, data } = useReadContract({
+    const { isLoading, isError, error, data } = useReadContract({
         abi,
         address: deploymentAddress,
         functionName: "queue",
         args: [queueIndex]
     });
     console.debug("isLoading:", isLoading);
+    console.debug("isError:", isError);
+    console.debug("error:", error);
     console.debug("data:", data);
 
     if (isLoading) {
         return <LoadingIndicator />
     }
+
+    if (isError) {
+        return <ErrorIndicator description={error.name} />
+    }
 
     const sponsorship: any = data;
     const estimatedCost = BigInt(sponsorship[0]);

diff --git a/frontend/src/components/Sponsorships.tsx b/frontend/src/components/Sponsorships.tsx
@@ -5,7 +5,7 @@ import LoadingIndicator from "./LoadingIndicator";
 import { Address, formatEther } from "viem";
 import SponsorshipSummary from "./SponsorshipSummary";
 import Link from "next/link";
-import ErrorIndicator from "./LoadingIndicator copy";
+import ErrorIndicator from "./ErrorIndicator";
 
 export default function Sponsorships() {
     console.debug("Sponsorships");
@@ -27,7 +27,7 @@ export default function Sponsorships() {
     }
 
     if (isError) {
-        return <ErrorIndicator />
+        return <ErrorIndicator description={error.name} />
     }
 
     const queueCount = Number(data);

diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -28,6 +28,12 @@ export default function Home() {
           Sponsor the education of one individual child
         </div>
 
+        <Link href="/sponsorships/add" className="mt-8 shadow-lg shadow-purple-500/100">
+          <button className="p-8 text-2xl bg-purple-200 dark:bg-purple-950 rounded-lg border-purple-400 border-r-4 border-b-4 hover:border-r-8 hover:border-b-8 hover:-translate-y-1">
+            Become a Sponsor <span className="animate-pulse">💜</span>
+          </button>
+        </Link>
+
         <div id="steps" className="mt-16 p-8 flex flex-col space-y-8 border-4 border-purple-50 dark:border-purple-950 rounded-lg">
           <div className="flex flex-col items-center text-center">
             <h2 className="text-2xl">Step 1 - Sponsor sends 0.02 ETH</h2>

diff --git a/frontend/src/pages/sponsorships/add.tsx b/frontend/src/pages/sponsorships/add.tsx
@@ -0,0 +1,112 @@
+import LoadingIndicator from "@/components/LoadingIndicator";
+import MainFooter from "@/components/MainFooter";
+import MainHeader from "@/components/MainHeader";
+import Head from "next/head";
+import { useAccount, useSimulateContract, useWriteContract } from "wagmi";
+import { abi } from "../../../../backend/ignition/deployments/chain-84532/artifacts/SponsorshipQueueModule#SponsorshipQueue.json";
+import deployed_addresses from "../../../../backend/ignition/deployments/chain-84532/deployed_addresses.json";
+import { Address, parseEther } from "viem";
+import ErrorIndicator from "@/components/ErrorIndicator";
+
+export default function AddSponsorship() {
+  console.debug("AddSponsorship");
+
+  const { address, isConnecting, isReconnecting } = useAccount();
+  console.debug("address:", address);
+  console.debug("isConnecting:", isConnecting);
+  console.debug("isReconnecting:", isReconnecting);
+
+  if (isConnecting || isReconnecting) {
+    return <LoadingIndicator />
+  }
+
+  return (
+    <>
+      <Head>
+          <title>Sponsors 🫶🏽</title>
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap" rel="stylesheet" />
+      </Head>
+      <MainHeader />
+      <main
+        className={`flex flex-col items-center px-4 sm:px-8 md:px-16 lg:px-32 xl:px-64`}
+        >
+        <h1 className="relative flex place-items-center text-4xl">
+          Become a Sponsor <span className="animate-pulse">💜</span>
+        </h1>
+
+        <div className="mt-8">
+          Your sponsorship will cover the estimated cost for<br />
+          delivering education to one out-of-school child.
+        </div>
+
+        <div className="mt-8">
+          {!address ? (
+            <button disabled={true} className="p-8 text-2xl text-zinc-400 bg-zinc-300 rounded-lg">
+              <div className="text-6xl rotate-12 mb-4">☝🏽</div>
+              Connect wallet first
+            </button>
+          ) : (
+            <SimulateContractButton />
+          )}
+        </div>
+      </main>
+      <MainFooter />
+    </>
+  );
+}
+
+export function SimulateContractButton() {
+  console.debug("SimulateContractButton");
+
+  const deploymentAddress: Address = deployed_addresses["SponsorshipQueueModule#SponsorshipQueue"] as `0x${string}`;
+  console.debug("deploymentAddress:", deploymentAddress);
+
+  const { isPending, isError, error, isSuccess } = useSimulateContract({
+    abi,
+    address: deploymentAddress,
+    functionName: "addSponsorship",
+    value: parseEther("0.002")
+  })
+  console.debug("isPending:", isPending);
+  console.debug("isError:", isError);
+  console.debug("error:", error);
+  console.debug("isSuccess:", isSuccess);
+
+  if (isPending) {
+    return <button disabled={true} className="p-8 text-2xl bg-purple-200 dark:bg-purple-950 rounded-lg border-purple-400 border-r-4 border-b-4 hover:border-r-8 hover:border-b-8 hover:-translate-y-1">
+      <LoadingIndicator /> &nbsp; Simulating...
+    </button>
+  }
+
+  if (isError) {
+    return <ErrorIndicator description={error.name} />
+  }
+
+  return <WriteContractButton />
+}
+
+export function WriteContractButton() {
+  console.debug("WriteContractButton");
+
+  const deploymentAddress: Address = deployed_addresses["SponsorshipQueueModule#SponsorshipQueue"] as `0x${string}`;
+  console.debug("deploymentAddress:", deploymentAddress);
+
+  const { writeContract } = useWriteContract();
+  return (
+    <button 
+      className="p-8 text-2xl bg-purple-200 dark:bg-purple-950 rounded-lg border-purple-400 border-r-4 border-b-4 hover:border-r-8 hover:border-b-8 hover:-translate-y-1"
+      onClick={() =>
+        writeContract({
+          abi,
+          address: deploymentAddress,
+          functionName: "addSponsorship",
+          value: parseEther("0.002")
+        })
+      }
+    >
+      Send 0.02 ETH
+    </button>
+  )
+}