jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rwallet): remove My Wallets / Wallet Visualizer top tab bar 

Show the visualizer view directly without the top-level tab switcher,
keeping the sub-tab header (Balances, Yield, Timeline, etc.) intact.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-21 12:27:03 -07:00
parent 031ffbbbfa
commit e879f5e2f0
1 changed files with 5 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
modules/rwallet/components/folk-wallet-viewer.ts
View File

@ -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<string, Array<{ chainId: string; chainName: string; balances: BalanceItem[] }>> = 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 {
</div>`;
}
private renderTopTabBar(): string {
return `
<div class="top-tabs">
<button class="top-tab ${this.topTab === "my-wallets" ? "active" : ""}" data-top-tab="my-wallets">My Wallets</button>
<button class="top-tab ${this.topTab === "visualizer" ? "active" : ""}" data-top-tab="visualizer">Wallet Visualizer</button>
</div>`;
}
private renderMyWalletsTab(): string {
if (!this.isAuthenticated) {
return `<div class="empty">
@ -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();
}