feat: hook up modals

package.json

@@ -40,7 +40,7 @@
     "@sentry/nextjs": "^8.30.0",
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-query-next-experimental": "^5.28.14",
-    "@tomo-inc/wallet-connect-sdk": "^0.3.3",
+    "@tomo-inc/wallet-connect-sdk": "^0.3.5",
     "@uidotdev/usehooks": "^2.4.1",
     "axios": "^1.7.4",
     "bitcoinjs-lib": "6.1.5",

src/app/components/Delegations/Delegations.tsx

@@ -4,11 +4,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import { useLocalStorage } from "usehooks-ts";
 
 import { LoadingTableList } from "@/app/components/Loading/Loading";
-import {
-  MODE,
-  MODE_WITHDRAW,
-  WithdrawModal,
-} from "@/app/components/Modals/WithdrawModal";
+import { WithdrawModal } from "@/app/components/Modals/WithdrawModal";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import { useDelegations } from "@/app/hooks/client/api/useDelegations";
@@ -25,6 +21,10 @@ import { toLocalStorageIntermediateDelegation } from "@/utils/local_storage/toLo
 
 import { Delegation } from "./Delegation";
 
+const MODE_TRANSITION = "transition";
+const MODE_WITHDRAW = "withdraw";
+type MODE = typeof MODE_TRANSITION | typeof MODE_WITHDRAW;
+
 export const Delegations = ({}) => {
   const { publicKeyNoCoord, connected, network } = useBTCWallet();
   const [modalOpen, setModalOpen] = useState(false);
@@ -268,12 +268,12 @@ export const Delegations = ({}) => {
       </div>
       {modalMode && txID && selectedDelegation && (
         <WithdrawModal
-          isOpen={modalOpen}
+          open={modalOpen}
           onClose={() => setModalOpen(false)}
-          onProceed={() => {
+          onSubmit={() => {
             handleWithdraw(txID);
           }}
-          awaitingWalletResponse={awaitingWalletResponse}
+          processing={awaitingWalletResponse}
         />
       )}
     </>

src/app/components/Modals/ConfirmationModal.tsx

@@ -0,0 +1,64 @@
+import {
+  Button,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  Loader,
+} from "@babylonlabs-io/bbn-core-ui";
+import { PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { ResponsiveDialog } from "./ResponsiveDialog";
+
+interface ConfirmationModalProps {
+  className?: string;
+  processing: boolean;
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export const ConfirmationModal = ({
+  className,
+  processing,
+  open,
+  title,
+  children,
+  onClose,
+  onSubmit,
+}: PropsWithChildren<ConfirmationModalProps>) => (
+  <ResponsiveDialog
+    className={twMerge("max-w-[660px]", className)}
+    open={open}
+    onClose={onClose}
+  >
+    <DialogHeader
+      title={title}
+      className="text-primary-dark"
+      onClose={onClose}
+    />
+
+    <DialogBody className="text-primary-dark">{children}</DialogBody>
+
+    <DialogFooter className="flex gap-4">
+      <Button
+        variant="outlined"
+        color="primary"
+        onClick={onClose}
+        className="flex-1"
+      >
+        Cancel
+      </Button>
+
+      <Button
+        disabled={processing}
+        variant="contained"
+        onClick={onSubmit}
+        className="flex-1"
+      >
+        {processing ? <Loader size={16} className="text-white" /> : "Proceed"}
+      </Button>
+    </DialogFooter>
+  </ResponsiveDialog>
+);

src/app/components/Modals/PendingVerificationModal.tsx

@@ -4,7 +4,8 @@ import { BiSolidBadgeCheck } from "react-icons/bi";
 
 import { useDelegationV2 } from "@/app/hooks/client/api/useDelegationV2";
 import { useTransactionService } from "@/app/hooks/services/useTransactionService";
-import { DelegationV2StakingState as state } from "@/app/types/delegationsV2";
+import { useDelegationV2State } from "@/app/state/DelegationV2State";
+import { DelegationV2StakingState as State } from "@/app/types/delegationsV2";
 import { getNetworkConfig } from "@/config/network.config";
 
 import { GeneralModal } from "./GeneralModal";
@@ -45,6 +46,7 @@ export function PendingVerificationModal({
   stakingTxHash,
 }: PendingVerificationModalProps) {
   const { submitStakingTx } = useTransactionService();
+  const { updateDelegationStatus } = useDelegationV2State();
   const { networkName } = getNetworkConfig();
 
   const { data: delegation = null } = useDelegationV2(stakingTxHash);
@@ -72,10 +74,15 @@ export function PendingVerificationModal({
       stakingTxHashHex,
       stakingTxHex,
     );
+
+    updateDelegationStatus(
+      stakingTxHashHex,
+      State.INTERMEDIATE_PENDING_BTC_CONFIRMATION,
+    );
     onClose();
-  }, [delegation, submitStakingTx, onClose]);
+  }, [delegation, updateDelegationStatus, submitStakingTx, onClose]);
 
-  const verified = delegation?.state === state.VERIFIED;
+  const verified = delegation?.state === State.VERIFIED;
 
   return (
     <GeneralModal

src/app/components/Modals/PreviewModal.tsx

@@ -1,13 +1,11 @@
 import {
   Avatar,
   Button,
-  Dialog,
   DialogBody,
   DialogFooter,
   DialogHeader,
   Heading,
   Loader,
-  MobileDialog,
   Text,
 } from "@babylonlabs-io/bbn-core-ui";
 
@@ -18,6 +16,8 @@ import { satoshiToBtc } from "@/utils/btc";
 import { maxDecimals } from "@/utils/maxDecimals";
 import { blocksToDisplayTime } from "@/utils/time";
 
+import { ResponsiveDialog } from "./ResponsiveDialog";
+
 interface PreviewModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -53,8 +53,6 @@ export const PreviewModal = ({
     networkInfo?.params.btcEpochCheckParams?.latestParam
       ?.btcConfirmationDepth || 10;
 
-  const DialogComponent = isMobileView ? MobileDialog : Dialog;
-
   const FinalityProviderValue = isMobileView ? (
     <span className="flex gap-2">
       {finalityProviderAvatar && (
@@ -117,7 +115,7 @@ export const PreviewModal = ({
   ];
 
   return (
-    <DialogComponent open={isOpen} onClose={onClose}>
+    <ResponsiveDialog open={isOpen} onClose={onClose}>
       <DialogHeader
         title="Preview"
         onClose={onClose}
@@ -173,6 +171,6 @@ export const PreviewModal = ({
           )}
         </Button>
       </DialogFooter>
-    </DialogComponent>
+    </ResponsiveDialog>
   );
 };

src/app/components/Modals/ResponsiveDialog.tsx

@@ -0,0 +1,10 @@
+import { Dialog, DialogProps, MobileDialog } from "@babylonlabs-io/bbn-core-ui";
+
+import { useIsMobileView } from "@/app/hooks/useBreakpoint";
+
+export function ResponsiveDialog(props: DialogProps) {
+  const isMobileView = useIsMobileView();
+  const DialogComponent = isMobileView ? MobileDialog : Dialog;
+
+  return <DialogComponent {...props} />;
+}

src/app/components/Modals/SlashingModal.tsx

@@ -0,0 +1,22 @@
+import { Text } from "@babylonlabs-io/bbn-core-ui";
+
+import { ConfirmationModal } from "./ConfirmationModal";
+
+interface UnbondModalProps {
+  processing: boolean;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export const SlashingModal = (props: UnbondModalProps) => {
+  return (
+    <ConfirmationModal title="Withdraw Non-Slashed Balance" {...props}>
+      <Text variant="body1" className="pt-8 pb-10">
+        The Finality Provider you delegated to has been slashed and removed from
+        the network. You can withdraw your non-slashed balance after the
+        timelock period ends. Slashed funds cannot be recovered.
+      </Text>
+    </ConfirmationModal>
+  );
+};

src/app/components/Modals/StakeModal.tsx

@@ -0,0 +1,32 @@
+import { MdEditNote } from "react-icons/md";
+
+import { SubmitModal } from "./SubmitModal";
+
+interface StakeModalProps {
+  processing?: boolean;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export function StakeModal({
+  processing,
+  open,
+  onClose,
+  onSubmit,
+}: StakeModalProps) {
+  return (
+    <SubmitModal
+      processing={processing}
+      open={open}
+      icon={<MdEditNote size={52} />}
+      title="Sign and Send to BTC"
+      onClose={onClose}
+      onSubmit={onSubmit}
+    >
+      Lorem ipsum dolor sit amet consectetur. Eget ut sagittis vitae hendrerit
+      tempus non pellentesque. Amet enim justo vel quam pharetra sem. Id in arcu
+      dignissim.
+    </SubmitModal>
+  );
+}

src/app/components/Modals/SubmitModal.tsx

@@ -0,0 +1,80 @@
+import {
+  Button,
+  DialogBody,
+  DialogFooter,
+  Heading,
+  Loader,
+  Text,
+} from "@babylonlabs-io/bbn-core-ui";
+import type { JSX, PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { ResponsiveDialog } from "./ResponsiveDialog";
+
+interface SubmitModalProps {
+  className?: string;
+  processing?: boolean;
+  open: boolean;
+  icon: JSX.Element;
+  title: string;
+  buttons?: {
+    cancel?: string;
+    submit?: string;
+  };
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+const DEFAULT_BUTTONS = {
+  cancel: "Cancel",
+  submit: "Submit",
+};
+
+export const SubmitModal = ({
+  className,
+  processing = false,
+  icon,
+  title,
+  children,
+  open,
+  buttons,
+  onClose,
+  onSubmit,
+}: PropsWithChildren<SubmitModalProps>) => (
+  <ResponsiveDialog
+    className={twMerge("max-w-[660px]", className)}
+    open={open}
+    onClose={onClose}
+  >
+    <DialogBody className="text-primary-dark py-16 text-center">
+      <div className="inline-flex bg-primary-contrast h-20 w-20 items-center justify-center mb-6">
+        {icon}
+      </div>
+
+      <Heading variant="h4" className="mb-4">
+        {title}
+      </Heading>
+
+      <Text as="div">{children}</Text>
+    </DialogBody>
+
+    <DialogFooter className="flex gap-4">
+      <Button variant="outlined" className="flex-1" onClick={onClose}>
+        {buttons?.cancel ?? DEFAULT_BUTTONS.cancel}
+      </Button>
+
+      <Button
+        disabled={processing}
+        variant="contained"
+        className="flex-1"
+        onClick={onSubmit}
+      >
+        {processing ? (
+          <Loader size={16} className="text-white" />
+        ) : (
+          (buttons?.submit ?? DEFAULT_BUTTONS.submit)
+        )}
+      </Button>
+    </DialogFooter>
+  </ResponsiveDialog>
+);