fix: allow late render for connect button

radixdlt · Jun 20, 2024 · edcceb4 · edcceb4
1 parent f34c1eb
commit edcceb4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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` })