wip

src/common/ui/components/dialog.tsx

@@ -61,18 +61,20 @@ const DialogContent = forwardRef<
     >
       {children}
 
-      <DialogPrimitive.Close
-        onClick={onCloseClick}
-        className={cn(
-          "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity",
-          "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring",
-          "focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent",
-          "data-[state=open]:text-muted-foreground",
-        )}
-      >
-        <X className="color-white h-7 w-7" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      <div un-flex="~" un-justify="between" un-position="absolute top-0">
+        <DialogPrimitive.Close
+          onClick={onCloseClick}
+          className={cn(
+            "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity",
+            "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring",
+            "focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent",
+            "data-[state=open]:text-muted-foreground",
+          )}
+        >
+          <X className="color-white h-7 w-7" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </div>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

src/modules/donation/components/DonationModal.tsx

@@ -2,13 +2,13 @@ import { useCallback } from "react";
 
 import { create, useModal } from "@ebay/nice-modal-react";
 
-import { AccountId, PotId } from "@/common/api/potlock";
 import { Dialog, DialogContent } from "@/common/ui/components";
 
 import { DonationToPot } from "./DonationToPot";
 import { DonationToProject } from "./DonationToProject";
+import { DonationInputs, DonationState } from "../models";
 
-export type DonationModalProps = { accountId: AccountId } | { potId: PotId };
+export type DonationModalProps = DonationInputs & DonationState;
 
 export const DonationModal = create((props: DonationModalProps) => {
   const self = useModal();
@@ -22,28 +22,11 @@ export const DonationModal = create((props: DonationModalProps) => {
     <Dialog open={self.visible}>
       <DialogContent onCloseClick={close}>
         {"accountId" in props && (
-          <DonationToProject accountId={props.accountId} closeDialog={close} />
+          <DonationToProject closeDialog={close} {...props} />
         )}
 
-        {"potId" in props && (
-          <DonationToPot potId={props.potId} closeDialog={close} />
-        )}
+        {"potId" in props && <DonationToPot closeDialog={close} {...props} />}
       </DialogContent>
     </Dialog>
   );
 });
-
-export const useDonationModal = (props: DonationModalProps) => {
-  const modal = useModal(DonationModal);
-
-  return {
-    openDonationModal: useCallback(
-      (event: React.MouseEvent) => {
-        event.preventDefault();
-        modal.show(props);
-      },
-
-      [modal, props],
-    ),
-  };
-};

src/modules/donation/components/DonationToPot.tsx

@@ -5,13 +5,17 @@ import {
   DialogTitle,
 } from "@/common/ui/components";
 
-export type DonationToPotProps = ByPotId & {
-  closeDialog: VoidFunction;
-};
+import { DonationState } from "../models";
+
+export type DonationToPotProps = ByPotId &
+  DonationState & {
+    closeDialog: VoidFunction;
+  };
 
 export const DonationToPot: React.FC<DonationToPotProps> = ({
   potId,
   closeDialog: _,
+  currentStep: __,
 }) => {
   const { isLoading, data: pot, error } = potlock.usePot({ potId });
 

src/modules/donation/components/DonationToProject.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import { dispatch, useTypedSelector } from "@/app/_store";
+import { dispatch } from "@/app/_store";
 import { ByAccountId, potlock } from "@/common/api/potlock";
 import {
   Button,
@@ -21,17 +21,18 @@ import {
 } from "@/common/ui/components";
 
 import { useProjectDonationForm } from "../hooks/project-donation";
+import { DonationState } from "../models";
 
-export type DonationToProjectProps = ByAccountId & {
-  closeDialog: VoidFunction;
-};
+export type DonationToProjectProps = ByAccountId &
+  DonationState & {
+    closeDialog: VoidFunction;
+  };
 
 export const DonationToProject: React.FC<DonationToProjectProps> = ({
   accountId,
   closeDialog: _,
+  currentStep,
 }) => {
-  const { currentStep } = useTypedSelector(({ donation }) => donation);
-
   const {
     isLoading: isAccountLoading,
     data: account,
@@ -43,11 +44,11 @@ export const DonationToProject: React.FC<DonationToProjectProps> = ({
 
   const { onSubmit, ...form } = useProjectDonationForm({});
 
-  const currentScreen = useMemo(() => {
+  const content = useMemo(() => {
     switch (currentStep) {
       case "allocation":
         return (
-          <>
+          <div>
             <div un-flex="~ col" un-gap="3">
               <div className="prose" un-font="600" un-text="neutral-950">
                 How do you want to allocate funds?
@@ -108,7 +109,7 @@ export const DonationToProject: React.FC<DonationToProjectProps> = ({
               step={0.01}
               appendix="$ 0.00"
             />
-          </>
+          </div>
         );
       case "confirmation":
         return <></>;
@@ -136,15 +137,17 @@ export const DonationToProject: React.FC<DonationToProjectProps> = ({
 
       {account !== undefined && (
         <>
-          <DialogHeader>
-            <DialogTitle>
-              {`Donation to ${account.near_social_profile_data?.name}`}
-            </DialogTitle>
-          </DialogHeader>
-
-          <DialogDescription asChild>
-            <div>{currentScreen}</div>
-          </DialogDescription>
+          {currentStep !== "done" && (
+            <DialogHeader>
+              <DialogTitle>
+                {currentStep === "confirmation"
+                  ? "Confirm donation"
+                  : `Donation to ${account.near_social_profile_data?.name}`}
+              </DialogTitle>
+            </DialogHeader>
+          )}
+
+          <DialogDescription asChild>{content}</DialogDescription>
 
           <DialogFooter>
             <Button variant="brand-outline" color="black" disabled>

src/modules/donation/index.ts

@@ -1 +1,24 @@
-export { useDonationModal } from "./components/DonationModal";
+import { useCallback } from "react";
+
+import { useModal } from "@ebay/nice-modal-react";
+
+import { useTypedSelector } from "@/app/_store";
+
+import { DonationModal } from "./components/DonationModal";
+import { DonationInputs } from "./models";
+
+export const useDonation = (props: DonationInputs) => {
+  const modal = useModal(DonationModal);
+  const state = useTypedSelector(({ donation }) => donation);
+
+  return {
+    openDonationModal: useCallback(
+      (event: React.MouseEvent) => {
+        event.preventDefault();
+        modal.show({ ...props, ...state });
+      },
+
+      [modal, props, state],
+    ),
+  };
+};

src/modules/donation/models.ts

@@ -1,6 +1,9 @@
 import { createModel } from "@rematch/core";
 
 import { RootModel } from "@/app/_store/models";
+import { ByAccountId, ByPotId } from "@/common/api/potlock";
+
+export type DonationInputs = ByAccountId | ByPotId;
 
 export type DonationStep = "allocation" | "confirmation" | "done";