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 + />