fix: reload dashboard iframe when switching bots

- Add `panel` query parameter to dashboard URL with bot name to force iframe reload, since browsers skip navigation when only query string changes
- Pass `botName` prop to StitchDashboardEmbed and use it to generate unique iframe key
- Add guard in BotDetail to show loading state when URL name diverges from loaded bot data, preventing stale bot UI from rendering
- Update dashboard embed useEffect dependency array to include botName

Author: bnolens

.textile-monorepo-source

@@ -1 +1 @@
-356a0d47583ff0afdd4747504a82be68193a3271
+90f5a945d71d5e9a80914f7681c51fa42621afb4

.textile-stitch-release-version

@@ -1 +1 @@
-0.1.224
+0.1.225

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "stitch-bot"
-version = "0.1.224"
+version = "0.1.225"
 edition = "2021"
 description = "Stitch — Textile filler-network operator bot; quotes Swap via RFQ firm quotes and optionally fills resting limit orders."
 license = "AGPL-3.0-or-later"

Cargo.toml

@@ -7,10 +7,13 @@ const INITIAL_IFRAME_HEIGHT_PX = 480
 const EMBED_HEIGHT_SOURCE = 'textile-stitch-dashboard'
 const EMBED_HEIGHT_TYPE = 'embed-height'
 
-function dashboardUrl(operatorAddress: string): string {
+function dashboardUrl(operatorAddress: string, botName?: string): string {
   const url = new URL(DATAROOM_STITCH_DASHBOARD)
   url.searchParams.set('bot', operatorAddress)
   url.searchParams.set('embed', '1')
+  // Browsers often skip navigating an iframe when only the query changes.
+  // The panel bot name makes the URL unique per switch so the frame reloads.
+  if (botName) url.searchParams.set('panel', botName)
   return url.toString()
 }
 
@@ -35,10 +38,13 @@ function isEmbedHeightMessage(
  */
 export default function StitchDashboardEmbed({
   operatorAddress,
+  botName,
 }: {
   operatorAddress: string | null | undefined
+  botName?: string
 }) {
   const [heightPx, setHeightPx] = useState(INITIAL_IFRAME_HEIGHT_PX)
+  const frameKey = `${botName ?? ''}:${operatorAddress ?? ''}`
 
   useEffect(() => {
     if (!operatorAddress) return
@@ -53,7 +59,7 @@ export default function StitchDashboardEmbed({
 
     window.addEventListener('message', onMessage)
     return () => window.removeEventListener('message', onMessage)
-  }, [operatorAddress])
+  }, [operatorAddress, botName])
 
   if (!operatorAddress) {
     return (
@@ -67,8 +73,9 @@ export default function StitchDashboardEmbed({
   return (
     <section className="overflow-hidden rounded-xl border border-line-soft bg-[#22242a]">
       <iframe
+        key={frameKey}
         title="Stitch dashboard"
-        src={dashboardUrl(operatorAddress)}
+        src={dashboardUrl(operatorAddress, botName)}
         className="block w-full border-0"
         style={{ height: heightPx, overflow: 'hidden' }}
       />

web/src/components/StitchDashboardEmbed.tsx

@@ -161,6 +161,12 @@ export default function BotDetail() {
     }
   }
 
+  // Never paint the previous bot while the URL name has moved on. The
+  // dashboard iframe in particular will keep the old document if we do.
+  if (bot && bot.name !== name) {
+    if (error) return <ErrorState error={error} onRetry={() => void load()} />
+    return <Loading what={name} />
+  }
   if (!bot && error) return <ErrorState error={error} onRetry={() => void load()} />
   if (!bot) return <Loading what={name} />
 
@@ -468,7 +474,11 @@ export default function BotDetail() {
       )}
 
       {tab === 'dashboard' && (
-        <StitchDashboardEmbed operatorAddress={bot.config?.operatorAddress} />
+        <StitchDashboardEmbed
+          key={name}
+          botName={name}
+          operatorAddress={bot.config?.operatorAddress}
+        />
       )}
     </div>
   )