refactor: modal manager

RedDuck-Software · Jan 21, 2025 · f168bd5 · f168bd5
1 parent bc1f48b
commit f168bd5
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 58 deletions.
diff --git a/src/components/common/header/connect-wallet-button.tsx b/src/components/common/header/connect-wallet-button.tsx
@@ -4,17 +4,13 @@ import { PhantomWalletName, SolflareWalletName } from '@solana/wallet-adapter-wa
 import { Dot } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { BaseErrorModal } from './modals/base-error';
-import { CanceledModal } from './modals/cancelled';
-import { InsufficientFundsModal } from './modals/insufficient-funds';
-import { SuccessfulModal } from './modals/successful';
-import { SvgComponent } from './progress-bar';
+import { ProgressBar } from './progress-bar';
 
 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 { useStatusModalStore } from '@/store/status-modal';
 import { useWalletModalStore } from '@/store/wallet-modal';
 
 export const ConnectWalletButton = () => {
@@ -57,41 +53,25 @@ 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"
-            >
-              {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 border-0 bg-[#D8BA9F] !p-[20] max-sm:w-fit md:!p-[40px]"
-            hideX={!!status}
+      <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"
           >
-            <DialogTitle className="hidden" />
-
-            {status === Status.Success && <SuccessfulModal />}
-            {status === Status.Failed && <BaseErrorModal />}
-            {status === Status.InsufficientFunds && <InsufficientFundsModal />}
-            {status === Status.Canceled && <CanceledModal />}
-          </DialogContent>
-        </Dialog>
-      </>
+            {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>
     );
   }
 
@@ -116,7 +96,7 @@ export const ConnectWalletButton = () => {
 
             <div className="flex flex-col items-center justify-center gap-[15px] text-center text-[20px] leading-[30px]">
               <div>Awaiting Connect Confirmation</div>
-              <SvgComponent />
+              <ProgressBar />
             </div>
           </div>
         ) : (

diff --git a/src/components/common/header/nav-menu.tsx b/src/components/common/header/nav-menu.tsx
@@ -15,6 +15,7 @@ export const NavMenu = ({ className }: BaseComponentProps) => {
       >
         <img src="/icons/socials/twitter.svg" alt="twitter" />
       </a>
+
       <ConnectWalletButton />
     </nav>
   );

diff --git a/src/components/common/header/progress-bar.tsx b/src/components/common/header/progress-bar.tsx
@@ -1,19 +1,17 @@
 const RECT_COUNT = 26;
 
-export const SvgComponent = () => {
+export const ProgressBar = () => {
   return (
-    <>
-      <svg xmlns="http://www.w3.org/2000/svg" width={267} height={20} fill="none">
-        <path fill="#2F130F" d="M.5 6h1v8h-1zM1.5 3h1v14h-1z" />
-        <rect width={261} height={19} x={3} y={0.5} stroke="#2F130F" rx={1.5} />
+    <svg xmlns="http://www.w3.org/2000/svg" width={267} height={20} fill="none">
+      <path fill="#2F130F" d="M.5 6h1v8h-1zM1.5 3h1v14h-1z" />
+      <rect width={261} height={19} x={3} y={0.5} stroke="#2F130F" rx={1.5} />
 
-        {new Array(RECT_COUNT).fill(null).map((_, idx) => (
-          <Rectangle key={idx} x={10 * idx + 4.5} animateId={idx} />
-        ))}
+      {new Array(RECT_COUNT).fill(null).map((_, idx) => (
+        <Rectangle key={idx} x={10 * idx + 4.5} animateId={idx} />
+      ))}
 
-        <path fill="#2F130F" d="M264.5 3h1v14h-1zM265.5 6h1v8h-1z" />
-      </svg>
-    </>
+      <path fill="#2F130F" d="M264.5 3h1v14h-1zM265.5 6h1v8h-1z" />
+    </svg>
   );
 };
 

diff --git a/src/components/common/layouts/main-layout.tsx b/src/components/common/layouts/main-layout.tsx
@@ -1,11 +1,16 @@
 import { Outlet } from 'react-router';
 
+import { ModalManager } from '../modal-manager';
+
 import { Footer } from '@/components/common/footer';
 
 export function MainLayout() {
   return (
     <main className="w-full">
       <Outlet />
+
+      <ModalManager />
+
       <Footer />
     </main>
   );

diff --git a/src/components/common/modal-manager/index.tsx b/src/components/common/modal-manager/index.tsx
@@ -0,0 +1,32 @@
+import { BaseErrorModal } from '../header/modals/base-error';
+import { CanceledModal } from '../header/modals/cancelled';
+import { InsufficientFundsModal } from '../header/modals/insufficient-funds';
+import { SuccessfulModal } from '../header/modals/successful';
+
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { Status, useStatusModalStore } from '@/store/status-modal';
+
+export const ModalManager = () => {
+  const { status, setStatus } = useStatusModalStore();
+
+  return (
+    <Dialog
+      open={!!status}
+      onOpenChange={() => {
+        setStatus(null);
+      }}
+    >
+      <DialogContent
+        className="w-fit rounded-lg border-0 bg-[#D8BA9F] !p-[20] max-sm:w-fit md:!p-[40px]"
+        hideX={!!status}
+      >
+        <DialogTitle className="hidden" />
+
+        {status === Status.Success && <SuccessfulModal />}
+        {status === Status.Failed && <BaseErrorModal />}
+        {status === Status.InsufficientFunds && <InsufficientFundsModal />}
+        {status === Status.Canceled && <CanceledModal />}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/src/components/common/tarot-line/index.tsx b/src/components/common/tarot-line/index.tsx
@@ -24,6 +24,7 @@ export const TarotLine = ({ className, words }: BaseComponentProps<{ words: stri
               )}
             >
               <p className="text-[24px] font-light leading-7 text-black">{word}</p>
+
               {index !== wordsArr.length - 1 && (
                 <svg width="44" height="50" viewBox="0 0 44 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path

diff --git a/src/components/pages/home/cta.tsx b/src/components/pages/home/cta.tsx
@@ -13,19 +13,24 @@ export const CtaBlock = () => {
         <Star className="-translate-y-10" />
         <Dot className="w-[16px]" />
       </div>
+
       <p className="max-w-none gap-5 text-center text-[20px] md:max-w-[1000px] md:gap-[50px] md:text-[35px] 2xl:max-w-[1200px]">
         Our unique approach combines ancient numerology and Tarot cards with cutting-edge AI and blockchain technologies
         to provide you with insightful readings tailored to your questions
       </p>
+
       <div className="flex items-center gap-8 md:hidden">
         <Hand className="max-w-[100px]" />
         <Dot className="translate-y-4" />
         <Hand className="max-w-[100px] scale-x-[-1]" />
       </div>
+
       <div className="w-full md:max-w-max">
         <PredictFutureBtn />
       </div>
+
       <Sunburst className="block md:hidden" />
+
       {isMd && (
         <>
           <Hand className="absolute left-[5%] top-[36%] hidden xl:block 2xl:left-[7%]" />

diff --git a/src/components/pages/home/faq.tsx b/src/components/pages/home/faq.tsx
@@ -97,14 +97,17 @@ export const Faq = () => {
           ))}
         </Accordion>
       </div>
+
       <div className="flex h-full min-h-full w-full flex-col justify-between border-black px-[24px] pt-[80px] lg:pl-[140px] lg:pr-[60px]">
         <div className="space-y-8">
           <p className="text-[40px] font-light leading-[48px] max-sm:max-w-[327px] md:text-[60px] md:leading-[72px]">
             Horoscope on X (Twitter) for every day
           </p>
+
           <div className="w-full md:max-w-[240px]">
             <GoToTwitterBtn />
           </div>
+
           <img
             src="/images/horoscope.png"
             alt="horoscope"

diff --git a/src/components/pages/home/hero.tsx b/src/components/pages/home/hero.tsx
@@ -18,11 +18,13 @@ export const Hero = () => {
 
         {publicKey?.equals(OwnerAddress[network]) && <AdminBtn />}
       </div>
+
       <img
         src="/images/landing/hero-bg.webp"
         alt="bg"
         className="absolute left-1/2 top-0 -z-[20] h-full w-full -translate-x-1/2 object-cover object-center xl:object-contain"
       />
+
       <div className="absolute bottom-0 -z-[10] h-[335px] w-full bg-[url('/images/landing/clouds.png')] md:h-[370px]" />
     </div>
   );

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown } from 'lucide-react';
 import * as React from 'react';

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import * as React from 'react';

diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
-Original file line number
+Diff line change
@@ Expand Up @@
           >
             <img src="/icons/socials/twitter.svg" alt="twitter" />
           </a>
           <ConnectWalletButton />
         </nav>
       );
@@ Expand Down @@