feat(frontend): add sponsorship

refs #17
elimu-ai · Jun 30, 2024 · 848a3b0 · 848a3b0
1 parent 5db1c1a
commit 848a3b0
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 8 deletions.
diff --git a/frontend/src/components/ErrorIndicator.tsx b/frontend/src/components/ErrorIndicator.tsx
@@ -1,7 +1,8 @@
-export default function ErrorIndicator() {
+export default function ErrorIndicator({ description }: any) {
     return (
         <div className="p-8 bg-orange-800 border-orange-400 border-4 rounded-lg">
-            Error
+            <p>Error: "{description}"</p>
+            <p className="mt-4">See browser console for more details</p>
         </div>
     )
 }
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
@@ -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/sponsorships/add.tsx b/frontend/src/pages/sponsorships/add.tsx
@@ -2,7 +2,11 @@ import LoadingIndicator from "@/components/LoadingIndicator";
 import MainFooter from "@/components/MainFooter";
 import MainHeader from "@/components/MainHeader";
 import Head from "next/head";
-import { useAccount } from "wagmi";
+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");
@@ -44,13 +48,65 @@ export default function AddSponsorship() {
               Connect wallet first
             </button>
           ) : (
-            <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">
-              Send 0.02 ETH
-            </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>
+  )
+}