diff --git a/packages/babylon-wallet-connector/src/hooks/useWalletConnectors.tsx b/packages/babylon-wallet-connector/src/hooks/useWalletConnectors.tsx
index a73ecc55..e1e7e669 100644
--- a/packages/babylon-wallet-connector/src/hooks/useWalletConnectors.tsx
+++ b/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(
diff --git a/routes/vault/src/VaultLayout.tsx b/routes/vault/src/VaultLayout.tsx
index 948c3126..112cb70d 100644
--- a/routes/vault/src/VaultLayout.tsx
+++ b/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 (
-
- {/*
*/}
- {/*
*/}
-
+
+
);
}
diff --git a/routes/vault/src/components/VaultDashboard/index.ts b/routes/vault/src/components/VaultDashboard/index.ts
deleted file mode 100644
index 6ea6e88a..00000000
--- a/routes/vault/src/components/VaultDashboard/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { VaultDashboard } from './VaultDashboard';
diff --git a/routes/vault/src/components/VaultDashboard/EmptyState.tsx b/routes/vault/src/components/VaultDeposit/EmptyState.tsx
similarity index 100%
rename from routes/vault/src/components/VaultDashboard/EmptyState.tsx
rename to routes/vault/src/components/VaultDeposit/EmptyState.tsx
diff --git a/routes/vault/src/components/VaultDashboard/VaultActivityCard.tsx b/routes/vault/src/components/VaultDeposit/VaultActivityCard.tsx
similarity index 100%
rename from routes/vault/src/components/VaultDashboard/VaultActivityCard.tsx
rename to routes/vault/src/components/VaultDeposit/VaultActivityCard.tsx
diff --git a/routes/vault/src/components/VaultDashboard/VaultDashboard.tsx b/routes/vault/src/components/VaultDeposit/VaultDeposit.tsx
similarity index 99%
rename from routes/vault/src/components/VaultDashboard/VaultDashboard.tsx
rename to routes/vault/src/components/VaultDeposit/VaultDeposit.tsx
index 86a70701..dca5a5dd 100644
--- a/routes/vault/src/components/VaultDashboard/VaultDashboard.tsx
+++ b/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,
diff --git a/routes/vault/src/components/VaultDeposit/index.ts b/routes/vault/src/components/VaultDeposit/index.ts
new file mode 100644
index 00000000..0ec410df
--- /dev/null
+++ b/routes/vault/src/components/VaultDeposit/index.ts
@@ -0,0 +1 @@
+export { VaultDeposit } from './VaultDeposit';
diff --git a/routes/vault/src/components/VaultDashboard/useBorrowFlow.ts b/routes/vault/src/components/VaultDeposit/useBorrowFlow.ts
similarity index 100%
rename from routes/vault/src/components/VaultDashboard/useBorrowFlow.ts
rename to routes/vault/src/components/VaultDeposit/useBorrowFlow.ts
diff --git a/routes/vault/src/components/VaultDashboard/usePeginFlow.ts b/routes/vault/src/components/VaultDeposit/usePeginFlow.ts
similarity index 100%
rename from routes/vault/src/components/VaultDashboard/usePeginFlow.ts
rename to routes/vault/src/components/VaultDeposit/usePeginFlow.ts
diff --git a/routes/vault/src/components/VaultDashboard/useRepayFlow.ts b/routes/vault/src/components/VaultDeposit/useRepayFlow.ts
similarity index 100%
rename from routes/vault/src/components/VaultDashboard/useRepayFlow.ts
rename to routes/vault/src/components/VaultDeposit/useRepayFlow.ts
diff --git a/routes/vault/src/components/VaultPositions/VaultPositions.tsx b/routes/vault/src/components/VaultPositions/VaultPositions.tsx
new file mode 100644
index 00000000..ceb9f9c5
--- /dev/null
+++ b/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 (
+
+
+
Connect Your Wallet
+
+ Please connect your wallet to borrow USDC or view your existing positions
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ setBorrowModalOpen(false)}
+ collateral={mockCollateral}
+ marketData={mockMarketData}
+ />
+
+ );
+}
diff --git a/routes/vault/src/components/VaultPositions/index.ts b/routes/vault/src/components/VaultPositions/index.ts
new file mode 100644
index 00000000..e9c89e32
--- /dev/null
+++ b/routes/vault/src/components/VaultPositions/index.ts
@@ -0,0 +1 @@
+export { default as VaultPositions } from './VaultPositions';
diff --git a/routes/vault/src/index.ts b/routes/vault/src/index.ts
index c0305835..ce76d492 100644
--- a/routes/vault/src/index.ts
+++ b/routes/vault/src/index.ts
@@ -1 +1,2 @@
-export { default as VaultLayout } from './VaultLayout';
\ No newline at end of file
+export { default as VaultLayout } from './VaultLayout';
+export { VaultPositions } from './components/VaultPositions';
\ No newline at end of file
diff --git a/services/simple-staking/src/ui/common/config/appkit.ts b/services/simple-staking/src/ui/common/config/appkit.ts
index 227e2335..c5023922 100644
--- a/services/simple-staking/src/ui/common/config/appkit.ts
+++ b/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(),
diff --git a/services/simple-staking/src/ui/router.tsx b/services/simple-staking/src/ui/router.tsx
index 58477f39..2f65854d 100644
--- a/services/simple-staking/src/ui/router.tsx
+++ b/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";
diff --git a/services/simple-staking/src/ui/vault/layout.tsx b/services/simple-staking/src/ui/vault/layout.tsx
index 2c19eb03..6f839088 100644
--- a/services/simple-staking/src/ui/vault/layout.tsx
+++ b/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 (
-
-
- Connected: {address.slice(0, 6)}...{address.slice(-4)}
-
-
-
- );
-}
+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
("deposit");
+
+ const tabItems = useMemo(
+ () => [
+ {
+ id: "deposit",
+ label: "Deposit",
+ content: (
+
+ ),
+ },
+ {
+ id: "positions",
+ label: "Positions",
+ content: (
+
+ ),
+ },
+ ],
+ []
+ );
+
return (
-
-
- Babylon Vault
-
-
- Dual-chain wallet demo with BTC and ETH support
-
-
-
+ setActiveTab(tabId as TabId)}
+ keepMounted
+ />