New vault poc UI

packages/babylon-wallet-connector/src/hooks/useWalletConnectors.tsx

@@ -234,7 +234,6 @@ export function useWalletConnectors({ persistent, accountStorage, onError }: Pro
     confirm,
     displayChains,
     accountStorage,
-    ...Object.values(connectors).filter(Boolean).map(c => c.connectedWallet),
   ]);
 
   const connect = useCallback(

routes/vault/src/VaultLayout.tsx

@@ -1,5 +1,5 @@
 import { useAppKitBridge } from '@babylonlabs-io/wallet-connector';
-import { VaultDashboard } from './components/VaultDashboard';
+import { VaultDeposit } from './components/VaultDeposit';
 
 // TODO: Uncomment this when we have a way to test the contract queries
 // import { PegInTest } from './components/examples/PegInTest';
@@ -10,10 +10,8 @@ export default function VaultLayout() {
   useAppKitBridge();
 
   return (
-    <div className="container mx-auto flex max-w-[760px] flex-1 flex-col gap-12 px-4 py-8">
-      {/* <ContractQueryExample /> */}
-      {/* <PegInTest /> */}
-      <VaultDashboard />
+    <div>
+      <VaultDeposit />
     </div>
   );
 }

routes/vault/src/components/VaultDashboard/VaultDashboard.tsx → routes/vault/src/components/VaultDeposit/VaultDeposit.tsx

@@ -14,7 +14,7 @@ import { EmptyState } from './EmptyState';
 import { VaultActivityCard } from './VaultActivityCard';
 import type { VaultActivity } from '../../mockData/vaultActivities';
 
-export function VaultDashboard() {
+export function VaultDeposit() {
   // Data fetching
   const {
     activities,

routes/vault/src/components/VaultDeposit/index.ts

@@ -0,0 +1 @@
+export { VaultDeposit } from './VaultDeposit';

routes/vault/src/components/VaultPositions/VaultPositions.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Button } from '@babylonlabs-io/core-ui';
+import { IoAdd } from 'react-icons/io5';
+import { BorrowModal } from '../BorrowFlow/BorrowModal/BorrowModal';
+import { useWalletConnect } from '@babylonlabs-io/wallet-connector';
+
+export default function VaultPositions() {
+  const [borrowModalOpen, setBorrowModalOpen] = useState(false);
+  const { connected } = useWalletConnect();
+
+  // Mock collateral data - replace with real data later
+  const mockCollateral = {
+    amount: '0.5',
+    symbol: 'BTC',
+  };
+
+  const mockMarketData = {
+    btcPriceUSD: 95000,
+    lltvPercent: 75,
+  };
+
+  // Show message if wallet is not connected
+  if (!connected) {
+    return (
+      <div className="container mx-auto flex max-w-[760px] flex-1 flex-col items-center justify-center px-4 py-8">
+        <div className="text-center">
+          <h2 className="mb-4 text-2xl font-semibold">Connect Your Wallet</h2>
+          <p className="text-gray-600">
+            Please connect your wallet to borrow USDC or view your existing positions
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 py-8">
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => setBorrowModalOpen(true)}
+        className="min-w-[200px] flex items-center gap-2"
+      >
+        <IoAdd size={20} />
+        Borrow USDC
+      </Button>
+
+      <BorrowModal
+        open={borrowModalOpen}
+        onClose={() => setBorrowModalOpen(false)}
+        collateral={mockCollateral}
+        marketData={mockMarketData}
+      />
+    </div>
+  );
+}

routes/vault/src/components/VaultPositions/index.ts

@@ -0,0 +1 @@
+export { default as VaultPositions } from './VaultPositions';

routes/vault/src/index.ts

@@ -1 +1,2 @@
-export { default as VaultLayout } from './VaultLayout';
+export { default as VaultLayout } from './VaultLayout';
+export { VaultPositions } from './components/VaultPositions';

services/simple-staking/src/ui/common/config/appkit.ts

@@ -34,7 +34,6 @@ const networks: any = [mainnet, sepolia, localhost];
 export const wagmiAdapter = new WagmiAdapter({
   networks,
   projectId,
-  autoConnect: false,
   transports: {
     [mainnet.id]: http(),
     [sepolia.id]: http(),

services/simple-staking/src/ui/router.tsx

@@ -1,7 +1,7 @@
 import { Navigate, Route, Routes } from "react-router";
-import { VaultLayout } from "@routes/vault";
 
 import BabyLayout from "./baby/layout";
+import VaultLayout from "./vault/layout";
 import Layout from "./common/layout";
 import NotFound from "./common/not-found";
 import BTCStaking from "./common/page";

services/simple-staking/src/ui/vault/layout.tsx

@@ -1,66 +1,60 @@
-import { useAppKitAccount } from "@reown/appkit/react";
-import { useDisconnect } from "wagmi";
+import { useState, useMemo } from "react";
+import { VaultLayout as VaultDeposit, VaultPositions } from "@routes/vault";
 
 import { Container } from "@/ui/common/components/Container/Container";
 import { Content } from "@/ui/common/components/Content/Content";
+import { Section } from "@/ui/common/components/Section/Section";
+import { Tabs } from "@/ui/common/components/Tabs";
 import { BTCWalletProvider } from "@/ui/common/context/wallet/BTCWalletProvider";
 import { SafeETHWalletProvider } from "@/ui/common/context/wallet/ETHWalletProvider";
 
-/**
- * AppKit Disconnect Button Component
- */
-function AppKitDisconnectButton() {
-  const { isConnected, address } = useAppKitAccount();
-  const { disconnect } = useDisconnect();
-
-  const handleDisconnect = async () => {
-    try {
-      await disconnect();
-    } catch (error) {
-      console.error("Failed to disconnect AppKit wallet:", error);
-    }
-  };
-
-  if (!isConnected || !address) {
-    return null;
-  }
-
-  return (
-    <div className="mb-2 mt-2 flex items-center justify-center gap-3">
-      <span className="text-sm text-gray-600">
-        Connected: {address.slice(0, 6)}...{address.slice(-4)}
-      </span>
-      <button
-        onClick={handleDisconnect}
-        className="rounded border border-red-200 px-3 py-1 text-sm text-red-600 transition-colors hover:border-red-300 hover:bg-red-50"
-      >
-        Disconnect
-      </button>
-    </div>
-  );
-}
+type TabId = "deposit" | "positions";
 
 /**
- * Vault Layout - Dual-chain wallet application
+ * Vault Layout Wrapper - Dual-chain wallet application
  *
- * This layout provides access to both BTC and ETH wallets for demonstration
- * of the AppKit integration and dual-chain functionality.
+ * This wrapper provides the wallet providers (BTC and ETH) for the vault
+ * and handles tab navigation between Deposit and Positions views.
  */
 export default function VaultLayout() {
+  const [activeTab, setActiveTab] = useState<TabId>("deposit");
+
+  const tabItems = useMemo(
+    () => [
+      {
+        id: "deposit",
+        label: "Deposit",
+        content: (
+          <Section>
+            <VaultDeposit />
+          </Section>
+        ),
+      },
+      {
+        id: "positions",
+        label: "Positions",
+        content: (
+          <Section>
+            <VaultPositions />
+          </Section>
+        ),
+      },
+    ],
+    []
+  );
+
   return (
     <BTCWalletProvider>
       <SafeETHWalletProvider>
         <Content>
           <Container className="mx-auto flex max-w-[1200px] flex-1 flex-col gap-8 py-8">
-            <div className="text-center">
-              <h1 className="mb-2 text-3xl font-bold text-primary-main">
-                Babylon Vault
-              </h1>
-              <p className="text-gray-600">
-                Dual-chain wallet demo with BTC and ETH support
-              </p>
-              <AppKitDisconnectButton />
-            </div>
+            <Tabs
+              items={tabItems}
+              defaultActiveTab="deposit"
+              activeTab={activeTab}
+              onTabChange={(tabId) => setActiveTab(tabId as TabId)}
+              keepMounted
+            />
           </Container>
         </Content>
       </SafeETHWalletProvider>