docs: minor fix enable demo forms (#336)

This PR adds a minor fix so that the javascript is loaded properly for the typescript embedded demo in /demos. Signed-off-by: Michael Kantor <[email protected]> resolves CON-522
hashgraph · Nov 25, 2024 · 0051091 · 0051091
1 parent 646a2ef
commit 0051091
Show file tree

Hide file tree

Showing 9 changed files with 18,164 additions and 10,200 deletions.
diff --git a/demos/typescript/dapp/index.html b/demos/typescript/dapp/index.html
@@ -370,6 +370,12 @@ <h2>Pairing and session management:</h2>
         </form>
       </section>
     </main>
-    <script src="main.js" defer></script>
+    <script>
+      const scriptPath = new URL('main.js', window.location.href).pathname
+      const script = document.createElement('script')
+      script.src = scriptPath
+      script.defer = true
+      document.body.appendChild(script)
+    </script>
   </body>
 </html>
diff --git a/demos/typescript/main.ts b/demos/typescript/main.ts
@@ -18,9 +18,32 @@
  *
  */
 
-// set iframe src
-const iframe = document.querySelectorAll('iframe')
-const dapp = iframe[0]
-const wallet = iframe[1]
-dapp.src = process.env.dappUrl!
-wallet.src = process.env.walletUrl!
+const MAX_RETRIES = 3
+const INITIAL_DELAY = 20000 // 20 seconds
+
+async function setIframeSrcWithRetry() {
+  for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+    try {
+      const iframe = document.querySelectorAll('iframe')
+      const dapp = iframe[0]
+      const wallet = iframe[1]
+
+      await new Promise((resolve) => setTimeout(resolve, INITIAL_DELAY * Math.pow(2, attempt)))
+
+      dapp.src = process.env.dappUrl!
+      wallet.src = process.env.walletUrl!
+      console.log('demo iframes are loaded')
+
+      // If we get here, it worked
+      return
+    } catch (error) {
+      if (attempt === MAX_RETRIES - 1) {
+        console.error('Failed to set iframe sources after maximum retries:', error)
+        // throw error
+      }
+      console.warn(`Attempt ${attempt + 1} failed, retrying...`)
+    }
+  }
+}
+
+setIframeSrcWithRetry()
diff --git a/demos/typescript/wallet/index.html b/demos/typescript/wallet/index.html
@@ -109,7 +109,13 @@ <h2>Pairing and session management:</h2>
           </form>
         </section>
       </div>
-      <script src="main.js" defer></script>
+      <script>
+        const scriptPath = new URL('main.js', window.location.href).pathname
+        const script = document.createElement('script')
+        script.src = scriptPath
+        script.defer = true
+        document.body.appendChild(script)
+      </script>
     </main>
   </body>
 </html>
diff --git a/docs/src/pages/demos/index.tsx b/docs/src/pages/demos/index.tsx
@@ -1,25 +1,24 @@
-import Layout from "@theme/Layout"
-import { useState } from "react"
+import Layout from '@theme/Layout'
+import { useState } from 'react'
 import BrowserOnly from '@docusaurus/BrowserOnly'
 import '/'
 
 export const TypeScriptDemo = () => {
+  const [isDapp, setIsDapp] = useState(true)
   return (
     <Layout>
       <BrowserOnly>
         {() => {
-          const [isDapp, setIsDapp] = useState(true)
-
           return (
             <div className="flex h-screen">
               <div className="w-1/2 relative">
-                <iframe 
-                  src="/demos/typescript/dapp/index.html" 
+                <iframe
+                  src="/demos/typescript/dapp/index.html"
                   className="w-full h-full"
                   allow="clipboard-write"
                 />
                 {!isDapp && (
-                  <div 
+                  <div
                     onClick={() => setIsDapp(true)}
                     className="absolute inset-0 bg-black flex items-center justify-center text-white cursor-pointer"
                   >
@@ -28,13 +27,13 @@ export const TypeScriptDemo = () => {
                 )}
               </div>
               <div className="w-1/2 relative">
-                <iframe 
+                <iframe
                   src="/demos/typescript/wallet/index.html"
                   className="w-full h-full"
                   allow="clipboard-write"
                 />
                 {isDapp && (
-                  <div 
+                  <div
                     onClick={() => setIsDapp(false)}
                     className="absolute inset-0 bg-black flex items-center justify-center text-white cursor-pointer"
                   >
@@ -50,4 +49,4 @@ export const TypeScriptDemo = () => {
   )
 }
 
-export default TypeScriptDemo
+export default TypeScriptDemo
diff --git a/docs/static/demos/typescript/dapp/index.html b/docs/static/demos/typescript/dapp/index.html
@@ -370,6 +370,7 @@ <h2>Pairing and session management:</h2>
         </form>
       </section>
     </main>
-    <script src="main.js" defer></script>
+    <!-- TODO: in the interest of saving time, these paths are hardcoded. Make sure you rebuild. -->
+    <script src="/demos/typescript/dapp/main.js" defer></script>
   </body>
 </html>