wip

src/modules/donation/components/DonationFlow.tsx

@@ -22,6 +22,7 @@ export type DonationFlowProps = DonationSubmissionInputs &
 export const DonationFlow: React.FC<DonationFlowProps> = ({
   closeModal,
   currentStep,
+  successResult: result,
   ...props
 }) => {
   const searchParams = useSearchParams();
@@ -54,7 +55,7 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
         return h(DonationConfirmation, { form });
 
       case "success":
-        return h(DonationSuccess, { closeModal });
+        return h(DonationSuccess, { result });
 
       default:
         return (
@@ -66,12 +67,12 @@ export const DonationFlow: React.FC<DonationFlowProps> = ({
     }
   }, [
     balanceFloat,
-    closeModal,
     currentStep,
     form,
     isBalanceSufficient,
     minAmountError,
     props,
+    result,
   ]);
 
   return (

src/modules/donation/components/DonationSuccess.tsx

@@ -1,12 +1,78 @@
+import { Check, Copy, XIcon } from "lucide-react";
+import Link from "next/link";
+
+import { Button, Skeleton } from "@/common/ui/components";
+
+import { DonationBreakdown } from "./DonationBreakdown";
+import { DonationState } from "../models";
+
 export type DonationSuccessProps = {
-  closeModal: VoidFunction;
+  result?: DonationState["successResult"];
 };
 
-export const DonationSuccess = ({ closeModal }: DonationSuccessProps) => {
+export const DonationSuccess = ({ result }: DonationSuccessProps) => {
   return (
-    <div>
-      <h1>Donation successful!</h1>
-      <button onClick={closeModal}>Close</button>
+    <div un-flex="~ col" un-gap="8" un-items="center" un-p="10">
+      <div un-flex="~ col" un-gap="4" un-items="center">
+        <div
+          un-flex="~"
+          un-items="center"
+          un-justify="center"
+          un-border="rounded-full"
+          un-shadow="[0px_0px_0px_6px_#FEE6E5]"
+          un-w="12"
+          un-h="12"
+          un-p="3"
+          un-bg="[var(--primary-600)]"
+        >
+          <Check className="h-6 w-6 text-red-500" />
+        </div>
+
+        <h2 className="prose" un-text="xl" un-font="600">
+          Donation Successful
+        </h2>
+
+        <Button variant="brand-filled" color="primary">
+          <span className="prose" un-font="500">
+            Share to
+          </span>
+
+          <XIcon className="h-4.5 w-4.5" />
+        </Button>
+      </div>
+
+      <div un-flex="~ col" un-gap="2" un-items="center">
+        <div className="flex items-center justify-center gap-2">
+          <span className="text-2xl font-bold">50 NEAR</span>
+          <span className="text-gray-500">~$350</span>
+        </div>
+
+        <p
+          className="prose"
+          un-flex="~"
+          un-gap="1"
+          un-m="0"
+          un-text="neutral-950"
+        >
+          <span>has been donated to</span>
+          <span un-font="600">{result?.recipient_id}</span>
+        </p>
+
+        <Link href="#" className="text-red-600">
+          View donation
+        </Link>
+      </div>
+
+      {result ? (
+        <DonationBreakdown tokenId={result.ft_id} />
+      ) : (
+        <Skeleton className="h-28" />
+      )}
+
+      <div className="gap--2 flex items-center">
+        <span>{`Txn Hash : ${result?.id}`}</span>
+        <Copy className="h-4 w-4" />
+      </div>
     </div>
   );
 };