From edcceb4b2cfa3e6309962d560db21344c50d8566 Mon Sep 17 00:00:00 2001
From: Dawid Sowa <dawid.sowa@rdx.works>
Date: Thu, 20 Jun 2024 19:04:41 +0200
Subject: [PATCH] fix: allow late render for connect button

---
 examples/simple-dapp/src/main.ts                    | 13 +++++++++++++
 .../connect-button/src/components/connect-button.ts |  1 +
 .../modules/connect-button/connect-button.module.ts |  3 +--
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/examples/simple-dapp/src/main.ts b/examples/simple-dapp/src/main.ts
index 26c58396..6df5fb3b 100644
--- a/examples/simple-dapp/src/main.ts
+++ b/examples/simple-dapp/src/main.ts
@@ -26,6 +26,8 @@ const content = document.getElementById('app')!
 content.innerHTML = `  
   <button id="reset">Reset</button>
   <button id="sendTx">Send Tx</button>
+  <button id="removeCb">Remove Connect Button</button>
+  <button id="addCb">Add Connect Button</button>
 
   <div class="mt-25"><button id="one-time-request">Send one time request</button></div>
 
@@ -40,6 +42,8 @@ content.innerHTML = `
 const resetButton = document.getElementById('reset')!
 const sendTxButton = document.getElementById('sendTx')!
 const sessions = document.getElementById('sessions')!
+const removeCb = document.getElementById('removeCb')!
+const addCb = document.getElementById('addCb')!
 const requests = document.getElementById('requests')!
 const logs = document.getElementById('logs')!
 const state = document.getElementById('state')!
@@ -62,6 +66,15 @@ ${logs.innerHTML}`
   logs.innerHTML = logEntry
 })
 
+removeCb.onclick = () => {
+  document.querySelector('radix-connect-button')?.remove()
+}
+
+addCb.onclick = () => {
+  const connectButton = document.createElement('radix-connect-button')
+  const header = document.querySelector('header')!
+  header.appendChild(connectButton)
+}
 const dAppToolkit = RadixDappToolkit({
   dAppDefinitionAddress,
   networkId,
diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts
index b9348c8a..25c679ef 100644
--- a/packages/connect-button/src/components/connect-button.ts
+++ b/packages/connect-button/src/components/connect-button.ts
@@ -132,6 +132,7 @@ export class ConnectButton extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback()
+    window.dispatchEvent(new Event('onConnectButtonRender'))
     this.dispatchEvent(
       new CustomEvent('onRender', {
         bubbles: true,
diff --git a/packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts b/packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts
index 306fe8b8..734124b1 100644
--- a/packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts
+++ b/packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts
@@ -91,13 +91,12 @@ export const ConnectButtonModule = (
 
   subscriptions.add(
     merge(
-      fromEvent(document, 'onRender'),
+      fromEvent(window, 'onConnectButtonRender'),
       of(getConnectButtonElement()).pipe(filter((e) => !!e)),
     )
       .pipe(
         map(() => getConnectButtonElement()),
         filter((element): element is ConnectButton => !!element),
-        first(),
         switchMap((connectButtonElement) => {
           logger?.debug({ event: `connectButtonDiscovered` })