diff --git a/frontend/src/components/ErrorIndicator.tsx b/frontend/src/components/ErrorIndicator.tsx new file mode 100644 index 0000000..bc37f3a --- /dev/null +++ b/frontend/src/components/ErrorIndicator.tsx @@ -0,0 +1,8 @@ +export default function ErrorIndicator({ description }: any) { + return ( +
+

Error: {description}

+

See browser console for more details

+
+ ) +} diff --git a/frontend/src/components/LoadingIndicator copy.tsx b/frontend/src/components/LoadingIndicator copy.tsx deleted file mode 100644 index e3bf153..0000000 --- a/frontend/src/components/LoadingIndicator copy.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function ErrorIndicator() { - return ( -
- Error -
- ) -} diff --git a/frontend/src/components/SponsorshipSummary.tsx b/frontend/src/components/SponsorshipSummary.tsx index 2a4beda..62d38a4 100644 --- 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 } + + if (isError) { + return + } const sponsorship: any = data; const estimatedCost = BigInt(sponsorship[0]); diff --git a/frontend/src/components/Sponsorships.tsx b/frontend/src/components/Sponsorships.tsx index 0fce411..b7ab3eb 100644 --- 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 + return } const queueCount = Number(data); diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 91b987c..c1dab8f 100644 --- 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 + + + +

Step 1 - Sponsor sends 0.02 ETH

diff --git a/frontend/src/pages/sponsorships/add.tsx b/frontend/src/pages/sponsorships/add.tsx new file mode 100644 index 0000000..467586c --- /dev/null +++ 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 + } + + return ( + <> + + Sponsors 🫢🏽 + + + + + +
+

+ Become a Sponsor πŸ’œ +

+ +
+ Your sponsorship will cover the estimated cost for
+ delivering education to one out-of-school child. +
+ +
+ {!address ? ( + + ) : ( + + )} +
+
+ + + ); +} + +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 + } + + if (isError) { + return + } + + return +} + +export function WriteContractButton() { + console.debug("WriteContractButton"); + + const deploymentAddress: Address = deployed_addresses["SponsorshipQueueModule#SponsorshipQueue"] as `0x${string}`; + console.debug("deploymentAddress:", deploymentAddress); + + const { writeContract } = useWriteContract(); + return ( + + ) +}