fix(rwallet): yield page renders standalone without wallet detection

Force topTab=visualizer and skip hero/address/features/examples when
activeView is yield. Works for both authenticated and anonymous users.
Yield rates auto-load on page init without requiring a wallet address.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-15 12:33:40 -07:00
parent 374f4adccb
commit 6d40904fa7
1 changed files with 38 additions and 20 deletions

View File

@ -214,6 +214,12 @@ class FolkWalletViewer extends HTMLElement {
this.address = params.get("address") || ""; this.address = params.get("address") || "";
this.checkAuthState(); this.checkAuthState();
// 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 address in URL, show visualizer regardless of auth
if (this.address) { if (this.address) {
this.topTab = "visualizer"; this.topTab = "visualizer";
@ -230,7 +236,7 @@ class FolkWalletViewer extends HTMLElement {
this.render(); this.render();
if (this.topTab === "visualizer" && this.address) this.detectChains(); if (this.topTab === "visualizer" && this.address) this.detectChains();
if (this.activeView === "yield") this.loadYieldData(); }
} }
if (!localStorage.getItem("rwallet_tour_done")) { if (!localStorage.getItem("rwallet_tour_done")) {
setTimeout(() => this._tour.start(), 1200); setTimeout(() => this._tour.start(), 1200);
@ -1433,6 +1439,12 @@ class FolkWalletViewer extends HTMLElement {
.yield-header-desc { .yield-header-desc {
font-size: 13px; color: var(--rs-text-secondary); margin: 0; line-height: 1.5; max-width: 560px; font-size: 13px; color: var(--rs-text-secondary); margin: 0; line-height: 1.5; max-width: 560px;
} }
.yield-back-link {
padding: 8px 16px; border-radius: 8px; border: 1px solid var(--rs-border);
color: var(--rs-text-secondary); text-decoration: none; font-size: 13px; font-weight: 500;
white-space: nowrap; transition: all 0.2s;
}
.yield-back-link:hover { border-color: var(--rs-accent); color: var(--rs-accent); }
/* ── Yield tab ── */ /* ── Yield tab ── */
.yield-summary { .yield-summary {
@ -1924,6 +1936,8 @@ class FolkWalletViewer extends HTMLElement {
} }
private renderYieldStandaloneHeader(): string { private renderYieldStandaloneHeader(): string {
// Derive the wallets link from current URL
const basePath = window.location.pathname.replace(/\/yield\/?$/, "");
return ` return `
<div class="yield-header"> <div class="yield-header">
<div class="yield-header-row"> <div class="yield-header-row">
@ -1931,7 +1945,7 @@ class FolkWalletViewer extends HTMLElement {
<h2 class="yield-header-title">Stablecoin Yield</h2> <h2 class="yield-header-title">Stablecoin Yield</h2>
<p class="yield-header-desc">Compare APY rates across Aave V3 and Morpho Blue vaults on Ethereum and Base. Deposit idle USDC, USDT, or DAI through your Safe multisig.</p> <p class="yield-header-desc">Compare APY rates across Aave V3 and Morpho Blue vaults on Ethereum and Base. Deposit idle USDC, USDT, or DAI through your Safe multisig.</p>
</div> </div>
<button class="view-tab" data-view="balances" style="white-space:nowrap">Back to Balances</button> <a href="${basePath}/wallets" class="yield-back-link">Back to Wallets</a>
</div> </div>
</div>`; </div>`;
} }
@ -2169,6 +2183,11 @@ class FolkWalletViewer extends HTMLElement {
} }
private renderVisualizerTab(): string { private renderVisualizerTab(): string {
// Yield view is standalone — skip wallet UI entirely
if (this.activeView === "yield") {
return `${this.renderYieldStandaloneHeader()}${this.renderYieldTab()}`;
}
return ` return `
${this.renderHero()} ${this.renderHero()}
@ -2191,15 +2210,14 @@ class FolkWalletViewer extends HTMLElement {
` : ""} ` : ""}
</div> </div>
${this.activeView !== "yield" ? this.renderSupportedChains() : ""} ${this.renderSupportedChains()}
${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""} ${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}
${this.loading ? '<div class="loading"><span class="spinner"></span> Detecting wallet across chains...</div>' : ""} ${this.loading ? '<div class="loading"><span class="spinner"></span> Detecting wallet across chains...</div>' : ""}
${this.activeView === "yield" ${this.renderFeatures()}
? `${this.renderYieldStandaloneHeader()}${this.renderYieldTab()}` ${this.renderExamples()}
: `${this.renderFeatures()}${this.renderExamples()}${this.renderDashboard()}` ${this.renderDashboard()}
}
`; `;
} }