refine pending modal (#398)

babylonlabs-io · Nov 27, 2024 · 1f5a8d5 · 1f5a8d5
1 parent 629ce21
commit 1f5a8d5
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 14 deletions.
diff --git a/src/app/components/Modals/CongratModal.tsx b/src/app/components/Modals/CongratModal.tsx
@@ -0,0 +1,52 @@
+import { Button, Heading } from "@babylonlabs-io/bbn-core-ui";
+import { LuPartyPopper } from "react-icons/lu";
+
+import { GeneralModal } from "./GeneralModal";
+
+interface CongratModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function CongratModal({ open, onClose }: CongratModalProps) {
+  return (
+    <GeneralModal
+      open={open}
+      onClose={onClose}
+      closeOnOverlayClick={false}
+      closeOnEsc={false}
+    >
+      <div className="flex flex-col gap-8 md:max-w-[34rem] text-primary-dark">
+        <div className="py-4 flex flex-col items-center gap-4">
+          <LuPartyPopper className="text-5xl" />
+          <Heading variant="h4">Conratulations</Heading>
+          <p className="text-base text-center">
+            Share feedback or report issues on our{" "}
+            <a
+              href="https://forum.babylonlabs.io/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-secondary-main hover:text-primary-main"
+            >
+              Forums
+            </a>{" "}
+            or{" "}
+            <a
+              href="https://discord.com/invite/babylonglobal"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-secondary-main hover:text-primary-main"
+            >
+              Discord
+            </a>{" "}
+            (#feedback and #support) – thank you for being part of the Babylon
+            community!
+          </p>
+        </div>
+        <Button onClick={onClose}>
+          <span>Done</span>
+        </Button>
+      </div>
+    </GeneralModal>
+  );
+}
diff --git a/src/app/components/Modals/GeneralModal.tsx b/src/app/components/Modals/GeneralModal.tsx
@@ -43,7 +43,7 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
       classNames={{
         modalContainer: "flex items-end justify-center md:items-center",
         modal: twMerge(
-          `m-0 w-full max-w-none rounded-t-2xl bg-base-300 shadow-lg md:w-auto md:rounded-b-2xl max-h-[100svh] min-w-[20rem] md:max-h-[85svh] md:min-w-[30rem]`,
+          `m-0 w-full max-w-none rounded-t bg-secondary-contrast border-primary-light/20 p-6 md:w-auto md:rounded max-h-[100svh] min-w-[20rem] md:max-h-[85svh] md:min-w-[30rem]`,
           small ? "md:max-w-[25rem]" : "md:max-w-[45rem] lg:max-w-[55rem]",
           className,
         ),

diff --git a/src/app/components/Modals/PendingVerificationModal.tsx b/src/app/components/Modals/PendingVerificationModal.tsx
@@ -1,5 +1,6 @@
+import { Button, Heading, Loader } from "@babylonlabs-io/bbn-core-ui";
 import { useCallback } from "react";
-import { FaCheckCircle } from "react-icons/fa";
+import { BiSolidBadgeCheck } from "react-icons/bi";
 
 import { useDelegationV2 } from "@/app/hooks/api/useDelegationV2";
 import { useTransactionService } from "@/app/hooks/services/useTransactionService";
@@ -17,9 +18,9 @@ interface PendingVerificationModalProps {
 
 const Verified = () => (
   <>
-    <FaCheckCircle className="text-5xl text-success" />
-    <h3 className="text-xl text-center">Verified</h3>
-    <p className="text-sm text-center">
+    <BiSolidBadgeCheck className="text-5xl" />
+    <Heading variant="h4">Verified</Heading>
+    <p className="text-base text-center">
       Your request has been verified by the babylon blockchain. You can now
       stake
     </p>
@@ -28,9 +29,9 @@ const Verified = () => (
 
 const NotVerified = () => (
   <>
-    <span className="loading loading-spinner loading-lg text-primary" />
-    <h3 className="text-xl text-center">Pending Verification</h3>
-    <p className="text-sm text-center">
+    <Loader size={48} />
+    <Heading variant="h4">Pending Verification</Heading>
+    <p className="text-base text-center">
       The babylon blockchain has received your request. Please wait while we
       confirm the neseccary amount of signatures
     </p>
@@ -83,21 +84,20 @@ export function PendingVerificationModal({
       closeOnOverlayClick={false}
       closeOnEsc={false}
     >
-      <div className="flex flex-col gap-8 md:max-w-[34rem]">
+      <div className="flex flex-col gap-8 md:max-w-[34rem] text-primary-dark">
         <div className="py-4 flex flex-col items-center gap-4">
           {verified ? <Verified /> : <NotVerified />}
         </div>
-        <button
-          className="btn btn-primary"
+        <Button
           disabled={!verified || awaitingWalletResponse}
           onClick={onStake}
         >
           {awaitingWalletResponse ? (
-            <span className="loading loading-spinner"></span>
+            <Loader size={24} />
           ) : (
             <span>Stake on {networkName}</span>
           )}
-        </button>
+        </Button>
       </div>
     </GeneralModal>
   );

diff --git a/src/app/components/TestingInfo/TestingInfo.tsx b/src/app/components/TestingInfo/TestingInfo.tsx
@@ -5,7 +5,6 @@ import { shouldDisplayTestingMsg } from "@/config";
 interface TestingInfoProps {}
 
 export const TestingInfo: React.FC<TestingInfoProps> = () => {
-  return null;
   if (!shouldDisplayTestingMsg()) return null;
   return (
     <div className="flex w-full justify-center">