Skip to content

feat(tangle-cloud): iframe wallet connect — parent-origin detection + requestConnect + Base Sepolia switch#3252

Merged
drewstone merged 5 commits into
developfrom
feat/iframe-request-connect-bridge
May 30, 2026
Merged

feat(tangle-cloud): iframe wallet connect — parent-origin detection + requestConnect + Base Sepolia switch#3252
drewstone merged 5 commits into
developfrom
feat/iframe-request-connect-bridge

Conversation

@tangletools
Copy link
Copy Markdown
Contributor

Summary

Makes embedded blueprint apps (starting with trading-arena) connect a wallet from inside the Tangle Cloud iframe, end to end.

Two halves, both required:

  1. Bridge detection (this completes it) — the embedded app installs the parent-bridge wallet connector only if it can detect it's inside Tangle Cloud. Detection reads document.referrer OR a ?parent= query param. But we send the iframe referrerpolicy="no-referrer" and run it at an opaque sandbox origin (no allow-same-origin), so document.referrer is empty — the app fell back to an injected wallet that doesn't exist in the sandbox and couldn't connect at all.
  2. requestConnect (already on this branch) — once the bridge is up, the iframe asks the dapp to open its wallet modal and resolves when an account appears.

Changes

  • iframe/url.ts: buildBlueprintIframeUrl gains a reserved parent param.
  • components/BlueprintAppFrame.tsx: passes window.location.origin as parent — the deterministic detection signal, privacy-preserving (keeps no-referrer + the hardened sandbox: no allow-same-origin, no top-nav).
  • registry.ts (trading-arena): allowChainSwitch: true + allowedChainIds: [84532] so an embedded wallet on the wrong network can switch to Base Sepolia (where the trading bots run). Still no contracts/messages → no signing surface granted.
  • requestConnect bridge (prior commits on branch): protocol + validator + WalletConnectModalContext, gated read-tier via allowReadAccount.
  • Also includes 3 earlier nav/header commits on this branch (breadcrumb trail, Create-service nav button, react-refresh lint) — bundled as the branch stands.

Why ?parent= not referrer

The embedded app's detection (@tangle-network/blueprint-ui detectTangleCloudParentOrigin) explicitly supports ?parent= precisely because the cloud wrapper sends no-referrer. cloud.tangle.tools (and the localhost dev origins) are already in that allowlist, so ?parent=https://cloud.tangle.tools is honored with no further config.

Tests

New iframe/url.spec.ts (5 cases incl. the parent param + malformed-URL passthrough); policy.spec.ts + manifest.spec.ts still green — 18/18.

Companion fixes (already shipped on the arena side)

The standalone arena had matching bugs fixed + deployed this week: Base Sepolia missing from the wallet chain set, no operator-backend URL baked into the build, and operator CORS not allowing the arena origin. With those + this PR, both the direct site and the embedded iframe can connect and load the live leaderboard.

drewstone added 5 commits May 25, 2026 15:41
The Header computed breadcrumbs but never rendered them. Show the trail
("Blueprints / Trading") in the nav left slot by default, with the leading
"Cloud" dropped and section roots (Blueprints/Operators/Instances) linking
back. Pages can still override via useTopNavSlot; the blueprint detail now
injects a matching "Blueprints / <name>" trail alongside its Create/Details
actions instead of a "← Catalog" link.
The sandbox Button variant left dark, italic text on its purple fill
(unreadable). Render the Create action as an explicit styled link: white
text on a solid accent fill, non-italic, sized to match the Details button.
…xt module

The context module intentionally exports its Provider alongside its hooks;
the react-refresh/only-export-components rule doesn't apply. Disable it at
the two hook exports so the project lints clean.
…let modal

An embedded blueprint (sandboxed, no wallet of its own) can now ask the dapp
to connect a wallet via tangle.app.requestConnect. The bridge:

- answers immediately if a wallet is already connected;
- otherwise opens the parent's wallet-connect modal (new app-level
  WalletConnectModalContext mounting one EvmWalletModal) and resolves the
  request when an account appears — or rejects it if the user dismisses the
  modal, so the iframe never hangs.

Gated read-tier in policy (allowReadAccount). Protocol + validator mirror the
SDK's tangle.app.requestConnect / connectResult. This is what lets BOTH the
thin-iframe apps (useTangleWallet().connect()) and full-iframe wagmi apps
(eth_requestAccounts via the parent-bridge connector) connect from inside the
iframe without breaking the sandbox model.
…ia switch

Completes the iframe wallet-connect path. The embedded app detects it's running
inside Tangle Cloud to install the parent-bridge wallet connector — detection
reads `document.referrer` OR a `?parent=` query param. But the iframe is sent
`referrerpolicy="no-referrer"` and runs at an opaque sandbox origin (no
allow-same-origin), so `document.referrer` is empty and the app would fall back
to an injected wallet that doesn't exist in the sandbox — i.e. it couldn't
connect at all.

- buildBlueprintIframeUrl: add a `parent` reserved param.
- BlueprintAppFrame: pass `window.location.origin` as `parent`, the deterministic
  signal (privacy-preserving — keeps no-referrer + the hardened sandbox).
- registry (trading-arena): allowChainSwitch true + allowedChainIds [84532] so an
  embedded wallet on the wrong network can move to Base Sepolia (where the bots
  run); still no contracts/messages, so no signing surface is granted.

Pairs with the requestConnect bridge in this branch: detection (this commit)
installs the bridge; requestConnect drives the actual connect. url.spec covers
the new param; policy/manifest specs still green (18 tests).
@tangletools tangletools requested a review from AtelyPham as a code owner May 30, 2026 23:01
@drewstone drewstone merged commit 5d474dd into develop May 30, 2026
4 of 7 checks passed
@drewstone drewstone deleted the feat/iframe-request-connect-bridge branch May 30, 2026 23:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants