fix(rflows,rwallet): unstaged fixes from previous session

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

modules/rflows/components/folk-flow-river.ts

@@ -373,31 +373,93 @@ function renderWaterfall(wf: WaterfallLayout): string {
 	const topCx = isInflow ? wf.xSource : wf.x;
 	const bottomCx = isInflow ? wf.x : wf.xSource;
 
-	const cpFrac1 = isInflow ? 0.55 : 0.2;
-	const cpFrac2 = isInflow ? 0.75 : 0.45;
-	const cpY1 = wf.yStart + height * cpFrac1;
-	const cpY2 = wf.yStart + height * cpFrac2;
-
 	const tl = topCx - topWidth / 2;
 	const tr = topCx + topWidth / 2;
 	const bl = bottomCx - bottomWidth / 2;
 	const br = bottomCx + bottomWidth / 2;
 
-	const shapePath = `M ${tl} ${wf.yStart} C ${tl} ${cpY1}, ${bl} ${cpY2}, ${bl} ${wf.yEnd} L ${br} ${wf.yEnd} C ${br} ${cpY2}, ${tr} ${cpY1}, ${tr} ${wf.yStart} Z`;
+	// L-shaped paths: vertical drop + horizontal merge (inflow)
+	// or horizontal departure + vertical drop (outflow)
+	const hDisplacement = Math.abs(topCx - bottomCx);
+	const maxR = Math.min(height * 0.2, hDisplacement > 3 ? hDisplacement * 0.4 : height * 0.15, 15);
+	const r = Math.max(3, maxR);
+
+	let shapePath: string;
+	let spinePath: string;
+	let leftEdge: string;
+	let rightEdge: string;
+
+	if (hDisplacement < 3) {
+		// Source directly above river — simple tapered rectangle
+		shapePath = `M ${tl} ${wf.yStart} L ${bl} ${wf.yEnd} L ${br} ${wf.yEnd} L ${tr} ${wf.yStart} Z`;
+		spinePath = `M ${topCx} ${wf.yStart} L ${bottomCx} ${wf.yEnd}`;
+		leftEdge = `M ${tl} ${wf.yStart} L ${bl} ${wf.yEnd}`;
+		rightEdge = `M ${tr} ${wf.yStart} L ${br} ${wf.yEnd}`;
+	} else if (isInflow) {
+		// Inflow L-shape: vertical drop → rounded corner → horizontal merge into river
+		const hDir = Math.sign(bl - tl); // direction of horizontal leg
+
+		shapePath = [
+			`M ${tl} ${wf.yStart}`,
+			`L ${tl} ${wf.yEnd - r}`,
+			`Q ${tl} ${wf.yEnd}, ${tl + hDir * r} ${wf.yEnd}`,
+			`L ${bl} ${wf.yEnd}`,
+			`L ${br} ${wf.yEnd}`,
+			`L ${tr + hDir * r} ${wf.yEnd}`,
+			`Q ${tr} ${wf.yEnd}, ${tr} ${wf.yEnd - r}`,
+			`L ${tr} ${wf.yStart}`,
+			`Z`,
+		].join(" ");
+
+		spinePath = [
+			`M ${topCx} ${wf.yStart}`,
+			`L ${topCx} ${wf.yEnd - r}`,
+			`Q ${topCx} ${wf.yEnd}, ${topCx + hDir * r} ${wf.yEnd}`,
+			`L ${bottomCx} ${wf.yEnd}`,
+		].join(" ");
+
+		leftEdge = `M ${tl} ${wf.yStart} L ${tl} ${wf.yEnd - r} Q ${tl} ${wf.yEnd}, ${tl + hDir * r} ${wf.yEnd} L ${bl} ${wf.yEnd}`;
+		rightEdge = `M ${tr} ${wf.yStart} L ${tr} ${wf.yEnd - r} Q ${tr} ${wf.yEnd}, ${tr + hDir * r} ${wf.yEnd} L ${br} ${wf.yEnd}`;
+	} else {
+		// Outflow inverted-L: horizontal departure from river → rounded corner → vertical drop
+		const hDir = Math.sign(tl - bl); // direction from destination back toward river
+
+		shapePath = [
+			`M ${tl} ${wf.yStart}`,
+			`L ${bl + hDir * r} ${wf.yStart}`,
+			`Q ${bl} ${wf.yStart}, ${bl} ${wf.yStart + r}`,
+			`L ${bl} ${wf.yEnd}`,
+			`L ${br} ${wf.yEnd}`,
+			`L ${br} ${wf.yStart + r}`,
+			`Q ${br} ${wf.yStart}, ${br + hDir * r} ${wf.yStart}`,
+			`L ${tr} ${wf.yStart}`,
+			`Z`,
+		].join(" ");
+
+		spinePath = [
+			`M ${topCx} ${wf.yStart}`,
+			`L ${bottomCx + Math.sign(topCx - bottomCx) * r} ${wf.yStart}`,
+			`Q ${bottomCx} ${wf.yStart}, ${bottomCx} ${wf.yStart + r}`,
+			`L ${bottomCx} ${wf.yEnd}`,
+		].join(" ");
+
+		leftEdge = `M ${tl} ${wf.yStart} L ${bl + hDir * r} ${wf.yStart} Q ${bl} ${wf.yStart}, ${bl} ${wf.yStart + r} L ${bl} ${wf.yEnd}`;
+		rightEdge = `M ${tr} ${wf.yStart} L ${br + hDir * r} ${wf.yStart} Q ${br} ${wf.yStart}, ${br} ${wf.yStart + r} L ${br} ${wf.yEnd}`;
+	}
+
 	const clipId = `sankey-clip-${wf.id}`;
 	const gradId = `sankey-grad-${wf.id}`;
 	const glowId = `sankey-glow-${wf.id}`;
 	const pathMinX = Math.min(tl, bl) - 5;
 	const pathMaxW = Math.max(topWidth, bottomWidth) + 10;
 
-	const spinePath = `M ${topCx} ${wf.yStart} C ${topCx} ${cpY1}, ${bottomCx} ${cpY2}, ${bottomCx} ${wf.yEnd}`;
 	const entryCx = isInflow ? bottomCx : topCx;
 	const entryY = isInflow ? wf.yEnd : wf.yStart;
 	const entryWidth = isInflow ? bottomWidth : topWidth;
 	const exitCx = isInflow ? topCx : bottomCx;
 	const exitY = isInflow ? wf.yStart : wf.yEnd;
 
-	const labelX = (topCx + bottomCx) / 2;
+	const labelX = isInflow ? topCx : bottomCx;
 	const labelY = wf.yStart + height * 0.45;
 	const flowLabel = wf.flowAmount >= 1000 ? `$${(wf.flowAmount / 1000).toFixed(1)}k` : `$${Math.floor(wf.flowAmount)}`;
 
@@ -422,8 +484,8 @@ function renderWaterfall(wf: WaterfallLayout): string {
 		<g clip-path="url(#${clipId})">
 			${[0, 1, 2, 3, 4].map((i) => `<rect x="${pathMinX}" y="${wf.yStart - height}" width="${pathMaxW}" height="${height * 0.6}" fill="${wf.color}" opacity="${0.15 + i * 0.03}" style="animation:waterFlow ${0.8 + i * 0.25}s linear infinite;animation-delay:${i * -0.15}s"/>`).join("")}
 		</g>
-		<path d="M ${tl} ${wf.yStart} C ${tl} ${cpY1}, ${bl} ${cpY2}, ${bl} ${wf.yEnd}" fill="none" stroke="${wf.color}" stroke-width="1.5" opacity="0.4"/>
+		<path d="${leftEdge}" fill="none" stroke="${wf.color}" stroke-width="1.5" opacity="0.4"/>
-		<path d="M ${tr} ${wf.yStart} C ${tr} ${cpY1}, ${br} ${cpY2}, ${br} ${wf.yEnd}" fill="none" stroke="${wf.color}" stroke-width="1.5" opacity="0.4"/>
+		<path d="${rightEdge}" fill="none" stroke="${wf.color}" stroke-width="1.5" opacity="0.4"/>
 		<path d="${spinePath}" fill="none" stroke="white" stroke-width="2" opacity="0.35" stroke-dasharray="6 12" style="animation:riverCurrent 0.8s linear infinite"/>
 		<path d="${spinePath}" fill="none" stroke="${wf.color}" stroke-width="3" opacity="0.2" stroke-dasharray="3 18" style="animation:riverCurrent 1.2s linear infinite;animation-delay:-0.4s"/>
 		<ellipse cx="${entryCx}" cy="${entryY}" rx="${entryWidth * 0.7}" ry="5" fill="url(#${glowId})" style="animation:entryPulse 1.5s ease-in-out infinite"/>
@@ -436,14 +498,13 @@ function renderBranch(b: BranchLayout): string {
 	const dy = b.y2 - b.y1;
 	const halfW = b.width / 2;
 
-	// Pipe exits horizontally from lip, then curves down to target
+	// Pipe exits horizontally from lip, then turns down to target (L-shape)
-	const exitX = b.side === "left" ? b.x1 - 40 : b.x1 + 40;
+	const dirX = Math.sign(b.x2 - b.x1);
-	const cp1x = exitX;
+	const r = Math.min(12, Math.abs(dy) * 0.2, Math.abs(b.x2 - b.x1) * 0.3);
-	const cp1y = b.y1;
-	const cp2x = b.x2;
-	const cp2y = b.y1 + (b.y2 - b.y1) * 0.3;
 
-	const spinePath = `M ${b.x1} ${b.y1} L ${exitX} ${b.y1} C ${cp1x} ${b.y1 + Math.abs(dy) * 0.4}, ${cp2x} ${cp2y}, ${b.x2} ${b.y2}`;
+	const spinePath = r > 2
+		? `M ${b.x1} ${b.y1} L ${b.x2 - dirX * r} ${b.y1} Q ${b.x2} ${b.y1}, ${b.x2} ${b.y1 + r} L ${b.x2} ${b.y2}`
+		: `M ${b.x1} ${b.y1} L ${b.x2} ${b.y1} L ${b.x2} ${b.y2}`;
 
 	// Outer wall (dark)
 	const outerStroke = `<path d="${spinePath}" fill="none" stroke="#334155" stroke-width="${b.width + 6}" stroke-linecap="round" opacity="0.5"/>`;

modules/rwallet/components/folk-wallet-viewer.ts

@@ -242,13 +242,9 @@ class FolkWalletViewer extends HTMLElement {
 				this.render();
 				this.loadYieldData();
 			} else {
-				// Auto-load address or demo
+				// Auto-load address from passkey or linked wallet
-				if (!this.address) {
+				if (!this.address && this.passKeyEOA) {
-					if (this.passKeyEOA) {
+					this.address = this.passKeyEOA;
-						this.address = this.passKeyEOA;
-					} else {
-						this.address = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045";
-					}
 				}
 
 				this.render();