Merge pull request #38 from RedDuck-Software/feat/shutdown

feat: implement status modal store and integrate with prediction flow
RedDuck-Software · Jan 16, 2025 · e233dd6 · e233dd6
2 parents 8b794d2 + 651e059
commit e233dd6
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 51 deletions.
diff --git a/public/icons/failed.svg b/public/icons/failed.svg
diff --git a/public/icons/successful.svg b/public/icons/successful.svg
diff --git a/src/components/common/Header/connect-wallet-button.tsx b/src/components/common/Header/connect-wallet-button.tsx
@@ -10,10 +10,12 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { shortenAddress } from '@/lib/utils';
+import { Status, useStatusModalStore } from '@/store/status-modal';
 import { useWalletModalStore } from '@/store/wallet-modal';
 
 export const ConnectWalletButton = () => {
   const { isOpen, setIsOpen } = useWalletModalStore();
+  const { status, setStatus } = useStatusModalStore();
 
   const { select, wallets, publicKey, disconnect, connecting, wallet } = useWallet();
 
@@ -51,28 +53,82 @@ export const ConnectWalletButton = () => {
 
   if (publicKey) {
     return (
-      <Popover>
-        <PopoverTrigger ref={buttonRef} asChild>
-          <Button
-            ref={buttonRef}
-            variant={'outline'}
-            className="h-fit w-full bg-customYellow px-[24px] py-[15px] font-poppins text-[22px] font-light leading-[26px] text-black"
+      <>
+        <Popover>
+          <PopoverTrigger ref={buttonRef} asChild>
+            <Button
+              ref={buttonRef}
+              variant={'outline'}
+              className="h-fit w-full bg-customYellow px-[24px] py-[15px] font-poppins text-[22px] font-light leading-[26px] text-black"
+            >
+              {shortenAddress(publicKey.toBase58())}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent style={{ width: popoverWidth }} className="border-0" asChild>
+            <Button
+              onClick={() => void handleDisconnect()}
+              className="h-fit w-full bg-customRed px-[24px] py-[15px] text-[20px] font-light leading-[24px] text-white hover:bg-customRed hover:opacity-80"
+            >
+              Disconnect
+            </Button>
+          </PopoverContent>
+        </Popover>
+
+        <Dialog open={!!status} onOpenChange={onOpenChange}>
+          <DialogContent
+            className="w-fit rounded-lg bg-[#D8BA9F] !p-[20] max-md:w-[330px] md:!p-[40px]"
+            hideX={!!status}
           >
-            {shortenAddress(publicKey.toBase58())}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent style={{ width: popoverWidth }} className="border-0" asChild>
-          <Button
-            onClick={() => void handleDisconnect()}
-            className="h-fit w-full bg-customRed px-[24px] py-[15px] text-[20px] font-light leading-[24px] text-white hover:bg-customRed hover:opacity-80"
-          >
-            Disconnect
-          </Button>
-        </PopoverContent>
-      </Popover>
+            {status === Status.Success ? (
+              <div className="flex w-[75vw] flex-col items-center justify-center gap-[15px] text-center text-[20px] leading-[30px] md:w-[480px]">
+                <img
+                  src="/icons/successful.svg"
+                  alt="success"
+                  className="h-[120px] w-[93px] md:h-[180px] md:w-[140px]"
+                />
+
+                <p className="text-[22px] leading-[30px] md:text-[28px] md:leading-[39px]">Payment Successful</p>
+
+                <Button
+                  onClick={() => {
+                    setStatus(null);
+                  }}
+                  variant="secondary"
+                  size="lg"
+                  className="!h-[60px] w-full text-[22px] leading-[30px]"
+                >
+                  Close
+                </Button>
+              </div>
+            ) : (
+              <div className="flex w-[75vw] flex-col items-center justify-center gap-[15px] text-center text-[20px] leading-[30px] md:w-[480px]">
+                <img src="/icons/failed.svg" alt="failed" className="h-[120px] w-[93px] md:h-[180px] md:w-[140px]" />
+
+                <p className="text-[22px] leading-[30px] md:text-[28px] md:leading-[39px]">Oracle Response Failed</p>
+                <p className="text-[16px] leading-[22px] md:text-[18px] md:leading-[25px]">
+                  The Oracle couldn’t provide an answer at this time. <br /> Please try again.
+                </p>
+
+                <Button
+                  onClick={() => {
+                    setStatus(null);
+                  }}
+                  variant="secondary"
+                  size="lg"
+                  className="!h-[60px] w-full text-[22px] leading-[30px]"
+                >
+                  Close
+                </Button>
+              </div>
+            )}
+          </DialogContent>
+        </Dialog>
+      </>
     );
   }
 
+  console.log(!!status, status);
+
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogTrigger asChild>
@@ -87,7 +143,7 @@ export const ConnectWalletButton = () => {
         </Button>
       </DialogTrigger>
 
-      <DialogContent className="w-fit rounded-lg bg-[#D8BA9F] !p-[20] max-md:w-[330px] md:!p-[40px]">
+      <DialogContent className="w-fit rounded-lg bg-[#D8BA9F] !p-[20] max-md:w-[330px] md:!p-[40px]" hideX={!!status}>
         {!!wallet && connecting ? (
           <div className="flex flex-col items-center justify-center gap-[30px]">
             <img src={wallet.adapter.icon} alt={wallet.adapter.name} className="size-[84px]" />

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -11,7 +11,7 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-customYellow text-black hover:bg-customYellow-secondary',
         outline: 'border border-customBlack bg-customYellow hover:bg-customYellow-secondary',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        secondary: 'bg-[#9DA990] border border-black text-secondary-foreground hover:bg-[#9da990c9]',
       },
       size: {
         responsive: 'px-4 py-2',

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 !bg-black',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
       className,
     )}
     {...props}
@@ -29,8 +29,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    hideX?: boolean;
+  }
+>(({ className, children, hideX, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -42,10 +44,13 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-3 top-3 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="size-5 md:size-8" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+
+      {hideX ? null : (
+        <DialogPrimitive.Close className="absolute right-3 top-3 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="size-5 md:size-8" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

diff --git a/src/hooks/contracts/write/use-make-prediction.ts b/src/hooks/contracts/write/use-make-prediction.ts
@@ -9,6 +9,7 @@ import useSubmitTarotCards from '@/hooks/api/use-submit-cards';
 import { network } from '@/lib/solana';
 import { sendAndConfirmTransaction } from '@/lib/solana/utils';
 import { getRandomTarotCards } from '@/lib/utils';
+import { Status, useStatusModalStore } from '@/store/status-modal';
 
 let toastId: string | number | null = null;
 
@@ -22,31 +23,10 @@ const notify = () => {
   });
 };
 
-const updateToast = (toastId: string | number | null) => {
-  if (toastId !== null) {
-    toast.update(toastId, {
-      render: 'Done!',
-      type: 'success',
-      autoClose: 3000,
-      isLoading: false,
-    });
-  }
-};
-
-const handleErrorToast = (toastId: string | number | null) => {
-  if (toastId !== null) {
-    toast.update(toastId, {
-      render: 'Error occurred!',
-      type: 'error',
-      autoClose: 3000,
-      isLoading: false,
-    });
-  }
-};
-
 const useMakePrediction = () => {
   const { publicKey, sendTransaction } = useWallet();
   const { mutateAsync: submitCards } = useSubmitTarotCards();
+  const { setStatus } = useStatusModalStore();
 
   return useMutation({
     async mutationFn(question: string) {
@@ -72,7 +52,11 @@ const useMakePrediction = () => {
 
       const result = await submitCards({ tarots, hash: txHash, question });
 
-      updateToast(toastId);
+      if (toastId) {
+        toast.dismiss(toastId);
+      }
+
+      // setStatus(Status.Success);
 
       return {
         tarots,
@@ -82,7 +66,10 @@ const useMakePrediction = () => {
 
     onError(error) {
       console.trace(error);
-      handleErrorToast(toastId);
+      setStatus(Status.Failed);
+      if (toastId) {
+        toast.dismiss(toastId);
+      }
     },
   });
 };

diff --git a/src/store/status-modal.tsx b/src/store/status-modal.tsx
@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+
+export enum Status {
+  Success = 1,
+  Failed = 2,
+}
+
+interface StatusModalStore {
+  status: Status | null;
+  setStatus: (setStatus: Status | null) => void;
+}
+
+export const useStatusModalStore = create<StatusModalStore>((set) => ({
+  status: null,
+  setStatus: (status: Status | null) => {
+    set({ status });
+  },
+}));