diff --git a/modules/rwallet/components/folk-wallet-viewer.ts b/modules/rwallet/components/folk-wallet-viewer.ts index 947b89a..f91868d 100644 --- a/modules/rwallet/components/folk-wallet-viewer.ts +++ b/modules/rwallet/components/folk-wallet-viewer.ts @@ -85,7 +85,6 @@ const EXAMPLE_WALLETS = [ ]; type ViewTab = "balances" | "timeline" | "flow" | "sankey" | "yield"; -type TopTab = "my-wallets" | "visualizer"; interface YieldRate { protocol: string; @@ -158,8 +157,6 @@ class FolkWalletViewer extends HTMLElement { private crdtBalances: Array<{ tokenId: string; name: string; symbol: string; decimals: number; icon: string; color: string; balance: number }> = []; private crdtLoading = false; - // Top-level tab - private topTab: TopTab = "visualizer"; private myWalletBalances: Map> = new Map(); private myWalletsLoading = false; @@ -226,19 +223,12 @@ class FolkWalletViewer extends HTMLElement { this.checkAuthState(); this.initWalletSync(space); - // Yield view is standalone — always force visualizer tab if (this.activeView === "yield") { - this.topTab = "visualizer"; this.render(); this.loadYieldData(); } else { - // If address in URL, show visualizer regardless of auth - if (this.address) { - this.topTab = "visualizer"; - } - - // For visualizer tab: auto-load address or demo - if (this.topTab === "visualizer" && !this.address) { + // Auto-load address or demo + if (!this.address) { if (this.passKeyEOA) { this.address = this.passKeyEOA; } else { @@ -247,7 +237,7 @@ class FolkWalletViewer extends HTMLElement { } this.render(); - if (this.topTab === "visualizer" && this.address) this.detectChains(); + if (this.address) this.detectChains(); } } if (!localStorage.getItem("rwallet_tour_done")) { @@ -1450,20 +1440,6 @@ class FolkWalletViewer extends HTMLElement { padding: 6px 10px; background: rgba(239,83,80,0.08); border-radius: 6px; } - /* ── Top-level tabs ── */ - .top-tabs { - display: flex; gap: 0; border-bottom: 2px solid var(--rs-border-subtle); - margin-bottom: 0; max-width: 640px; margin-left: auto; margin-right: auto; - } - .top-tab { - padding: 12px 24px; border: none; background: transparent; - color: var(--rs-text-secondary); cursor: pointer; font-size: 14px; font-weight: 600; - text-transform: uppercase; letter-spacing: 0.5px; - border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; - } - .top-tab:hover { color: var(--rs-text-primary); background: var(--rs-bg-hover); } - .top-tab.active { color: var(--rs-accent); border-bottom-color: var(--rs-accent); } - /* ── Wallet cards (My Wallets tab) ── */ .my-wallets-grid { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; } .wallet-card { @@ -1641,18 +1617,15 @@ class FolkWalletViewer extends HTMLElement { .chains { flex-wrap: wrap; } .features { grid-template-columns: 1fr 1fr; } .view-tabs { overflow-x: auto; } - .top-tabs { max-width: 100%; } .wallet-card-header { flex-direction: column; align-items: flex-start; } } @media (max-width: 640px) { .view-tab { padding: 6px 10px; font-size: 12px; } - .top-tab { padding: 6px 10px; font-size: 12px; } } @media (max-width: 480px) { .features { grid-template-columns: 1fr; } .hero-title { font-size: 18px; } .hero-subtitle { font-size: 13px; } - .top-tabs { gap: 2px; } .view-tabs { gap: 2px; } .aggregate-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .wallet-item { padding: 8px; } @@ -1820,14 +1793,6 @@ class FolkWalletViewer extends HTMLElement { `; } - private renderTopTabBar(): string { - return ` -
- - -
`; - } - private renderMyWalletsTab(): string { if (!this.isAuthenticated) { return `
@@ -2488,7 +2453,6 @@ class FolkWalletViewer extends HTMLElement { this.shadow.querySelectorAll("[data-view-in-viz]").forEach((btn) => { btn.addEventListener("click", () => { const addr = (btn as HTMLElement).dataset.viewInViz!; - this.topTab = "visualizer"; this.address = addr; const url = new URL(window.location.href); url.searchParams.set("address", addr); @@ -2528,28 +2492,12 @@ class FolkWalletViewer extends HTMLElement { } private render() { - const isMyWallets = this.topTab === "my-wallets" && this.isAuthenticated; - const isYield = this.activeView === "yield"; - this.shadow.innerHTML = ` ${this.renderStyles()} - ${this.isAuthenticated && !isYield ? this.renderTopTabBar() : ''} - ${isMyWallets && !isYield ? this.renderMyWalletsTab() : this.renderVisualizerTab()} + ${this.renderVisualizerTab()} `; - // Top tab listeners - this.shadow.querySelectorAll(".top-tab").forEach((tab) => { - tab.addEventListener("click", () => { - this.topTab = (tab as HTMLElement).dataset.topTab as TopTab; - this.render(); - }); - }); - - if (isMyWallets) { - this.attachMyWalletsListeners(); - } else { - this.attachVisualizerListeners(); - } + this.attachVisualizerListeners(); this._tour.renderOverlay(); }