feat(packages): create new pegin vault (#550)

* feat(packages): create new pegin vault

Author: jeremy-babylonlabs

services/vault/src/components/Overview/Deposits/DepositFormModal/index.tsx

@@ -12,11 +12,12 @@ import {
 } from "@babylonlabs-io/core-ui";
 import { useMemo, useState } from "react";
 
-import { useVaultProviders } from "../../../../hooks/useVaultProviders";
+import type { VaultProvider } from "../../../../types/vaultProvider";
 import {
   btcStringToSatoshi,
   satoshiToBtcNumber,
 } from "../../../../utils/btcConversion";
+import { useVaultProviders } from "../hooks/useVaultProviders";
 
 interface CollateralDepositModalProps {
   open: boolean;
@@ -182,7 +183,7 @@ export function CollateralDepositModal({
                 </Text>
               </div>
             ) : (
-              vaultProviders.map((provider) => {
+              vaultProviders.map((provider: VaultProvider) => {
                 const shortId =
                   provider.id.length > 14
                     ? `${provider.id.slice(0, 8)}...${provider.id.slice(-6)}`

services/vault/src/components/Overview/Deposits/index.tsx renamed to services/vault/src/components/Overview/Deposits/DepositOverview/index.tsx

@@ -12,17 +12,15 @@ import {
 import { useWalletConnect } from "@babylonlabs-io/wallet-connector";
 import { useMemo, useState } from "react";
 
-import { useBTCWallet, useETHWallet } from "../../../context/wallet";
-import { useVaultDeposits } from "../../../hooks/useVaultDeposits";
-import { getPeginState } from "../../../models/peginStateMachine";
-import type { VaultActivity } from "../../../types/activity";
-import type { Deposit } from "../../../types/vault";
-
+import { useBTCWallet, useETHWallet } from "../../../../context/wallet";
+import { useVaultDeposits } from "../../../../hooks/useVaultDeposits";
+import { getPeginState } from "../../../../models/peginStateMachine";
+import type { VaultActivity } from "../../../../types/activity";
+import type { Deposit } from "../../../../types/vault";
 import {
   useVaultDepositState,
   VaultDepositStep,
-} from "./state/VaultDepositState";
-import { useVaultRedeemState, VaultRedeemStep } from "./state/VaultRedeemState";
+} from "../state/VaultDepositState";
 
 function EmptyState({
   onDeposit,
@@ -97,7 +95,6 @@ export function DepositOverview() {
     Array<string | number>
   >([]);
   const { goToStep: goToDepositStep } = useVaultDepositState();
-  const { goToStep: goToRedeemStep, setRedeemData } = useVaultRedeemState();
 
   const handleDeposit = () => {
     if (!isConnected) {
@@ -109,13 +106,6 @@ export function DepositOverview() {
     }
   };
 
-  const handleRedeem = () => {
-    if (selectedDepositIds.length > 0) {
-      setRedeemData(selectedDepositIds as string[]);
-      goToRedeemStep(VaultRedeemStep.FORM);
-    }
-  };
-
   // Show empty state when not connected OR when connected but no data
   if (!isConnected || deposits.length === 0) {
     return <EmptyState onDeposit={handleDeposit} isConnected={isConnected} />;
@@ -157,10 +147,13 @@ export function DepositOverview() {
       key: "status",
       header: "Status",
       render: (_value: unknown, row: Deposit) => {
-        const statusMap = {
-          Available: "inactive" as const,
-          Pending: "pending" as const,
-          "In Use": "active" as const,
+        const statusMap: Record<
+          "Available" | "Pending" | "In Use",
+          "inactive" | "pending" | "active"
+        > = {
+          Available: "inactive",
+          Pending: "pending",
+          "In Use": "active",
         };
         return (
           <StatusBadge status={statusMap[row.status]} label={row.status} />
@@ -182,7 +175,8 @@ export function DepositOverview() {
         >
           {isConnected ? "Deposit" : "Connect Wallet"}
         </Button>
-        <Button
+        {/* TODO: Uncomment when redeem flow is ready */}
+        {/* <Button
           variant="outlined"
           size="medium"
           rounded
@@ -191,17 +185,20 @@ export function DepositOverview() {
           aria-label="Redeem selected deposits"
         >
           Redeem
-        </Button>
+        </Button> */}
       </div>
 
       {/* Desktop: Deposits Table, Mobile: Deposit Cards */}
       {isMobile ? (
         <div className="flex max-h-[60vh] flex-col gap-4 overflow-y-auto">
           {deposits.map((deposit) => {
-            const statusMap = {
-              Available: "inactive" as const,
-              Pending: "pending" as const,
-              "In Use": "active" as const,
+            const statusMap: Record<
+              "Available" | "Pending" | "In Use",
+              "inactive" | "pending" | "active"
+            > = {
+              Available: "inactive",
+              Pending: "pending",
+              "In Use": "active",
             };
             return (
               <VaultDetailCard