feat: new EOI Modal

package.json

@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.4",
-    "@babylonlabs-io/bbn-core-ui": "^0.3.2",
-    "@babylonlabs-io/bbn-wallet-connect": "^0.1.7",
+    "@babylonlabs-io/bbn-core-ui": "^0.4.1",
+    "@babylonlabs-io/bbn-wallet-connect": "^0.1.9",
     "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",

src/app/components/Modals/EOIModal/EOIModal.tsx

@@ -0,0 +1,108 @@
+import {
+  Button,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  Loader,
+  Text,
+} from "@babylonlabs-io/bbn-core-ui";
+
+import { ResponsiveDialog } from "@/app/components/Modals/ResponsiveDialog";
+
+import { Step } from "./Step";
+
+export enum EOIStepStatus {
+  UNSIGNED = "UNSIGNED",
+  SIGNED = "SIGNED",
+  PROCESSING = "PROCESSING",
+}
+
+interface EOIModalProps {
+  processing?: boolean;
+  open: boolean;
+  title: string;
+  statuses: {
+    slashing: EOIStepStatus;
+    unbonding: EOIStepStatus;
+    reward: EOIStepStatus;
+    eoi: EOIStepStatus;
+  };
+  onClose?: () => void;
+  onSubmit?: () => void;
+}
+
+const STEP_STATES = {
+  [EOIStepStatus.UNSIGNED]: "upcoming",
+  [EOIStepStatus.SIGNED]: "completed",
+  [EOIStepStatus.PROCESSING]: "processing",
+} as const;
+
+export function EOIModal({
+  processing = false,
+  open,
+  title,
+  statuses,
+  onClose,
+  onSubmit,
+}: EOIModalProps) {
+  return (
+    <ResponsiveDialog
+      className="z-[150]"
+      backdropClassName="z-[100]"
+      open={open}
+      onClose={onClose}
+      hasBackdrop
+    >
+      <DialogHeader
+        title={title}
+        onClose={onClose}
+        className="text-primary-dark"
+      />
+
+      <DialogBody className="flex flex-col pb-8 pt-4 text-primary-dark gap-4">
+        <Text variant="body1" className="text-primary-main">
+          Please sign the following messages
+        </Text>
+
+        <div className="py-4 flex flex-col items-start gap-6">
+          <Step index={1} state={STEP_STATES[statuses.slashing]}>
+            Consent to slashing
+          </Step>
+          <Step index={2} state={STEP_STATES[statuses.unbonding]}>
+            Consent to slashing during unbonding
+          </Step>
+          <Step index={3} state={STEP_STATES[statuses.reward]}>
+            BTC-BBN address binding for receiving staking rewards
+          </Step>
+          <Step index={4} state={STEP_STATES[statuses.eoi]}>
+            Staking transaction registration
+          </Step>
+        </div>
+      </DialogBody>
+
+      <DialogFooter className="flex gap-4">
+        {onClose && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={onClose}
+            className="flex-1 text-xs sm:text-base"
+          >
+            Cancel
+          </Button>
+        )}
+
+        {onSubmit && (
+          <Button
+            disabled={processing}
+            variant="contained"
+            className="flex-1 text-xs sm:text-base"
+            onClick={onSubmit}
+          >
+            {processing ? <Loader size={16} className="text-white" /> : "Sign"}
+          </Button>
+        )}
+      </DialogFooter>
+    </ResponsiveDialog>
+  );
+}

src/app/components/Modals/EOIModal/Step.tsx

@@ -0,0 +1,39 @@
+import { Text } from "@babylonlabs-io/bbn-core-ui";
+import type { PropsWithChildren, ReactNode } from "react";
+import { IoCheckmarkSharp } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+interface StepProps {
+  index: number;
+  state: "completed" | "processing" | "upcoming";
+  children: ReactNode;
+}
+
+export const Step = ({
+  index,
+  state,
+  children,
+}: PropsWithChildren<StepProps>) => (
+  <div
+    className={twMerge(
+      "p-4 flex flex-row items-center justify-start gap-3 rounded border border-primary-dark/20 bg-secondary-contrast self-stretch",
+      state !== "processing" && "opacity-25",
+    )}
+  >
+    {state === "completed" ? (
+      <div className="rounded-full bg-primary-light flex h-10 w-10 items-center justify-center">
+        <IoCheckmarkSharp size={24} className="text-secondary-contrast" />
+      </div>
+    ) : (
+      <div className="rounded-full bg-secondary-main flex h-10 w-10 items-center justify-center">
+        <Text variant="body1" className="text-secondary-contrast">
+          {index}
+        </Text>
+      </div>
+    )}
+
+    <Text variant="body1" className="text-primary-dark">
+      Step {index}: {children}
+    </Text>
+  </div>
+);

src/app/components/Staking/Staking.tsx

@@ -7,7 +7,10 @@ import { useLocalStorage } from "usehooks-ts";
 
 import { UTXO_KEY } from "@/app/common/constants";
 import { LoadingView } from "@/app/components/Loading/Loading";
-import { EOIModal, EOIStepStatus } from "@/app/components/Modals/EOIModal";
+import {
+  EOIModal,
+  EOIStepStatus,
+} from "@/app/components/Modals/EOIModal/EOIModal";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
 import {
@@ -581,11 +584,7 @@ export const Staking = () => {
           awaitingWalletResponse={awaitingWalletResponse}
         />
       )}
-      <EOIModal
-        statuses={eoiStatuses}
-        open={eoiModalOpen}
-        onClose={() => setEoiModalOpen(false)}
-      />
+      <EOIModal title="Staking" statuses={eoiStatuses} open={eoiModalOpen} />
       <InfoModal open={infoModalOpen} onClose={() => setInfoModalOpen(false)} />
     </div>
   );