From 583ba85e5137728600d8bdc4d3de51da97f4b04d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Vodr=C3=A1=C5=BEka?=
 <36418132+DaveVodrazka@users.noreply.github.com>
Date: Fri, 8 Dec 2023 15:01:58 +0100
Subject: [PATCH] fix: prevent creating multiple root divs

---
 src/main.ts | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index ddbb659..6d3d51e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -82,15 +82,33 @@ export const connect = async ({
     storeVersion,
   })
 
-  const element = document.createElement("div")
-  document.body.appendChild(element)
-  const target = element.attachShadow({ mode: "open" })
-
-  target.innerHTML = `<style>${css}</style>`
+  const getTarget = (): ShadowRoot => {
+    const modalId = "starknetkit-modal"
+    const existingElement = document.getElementById(modalId)
+
+    if (existingElement) {
+      if (existingElement.shadowRoot) {
+        // element already exists, use the existing as target
+        return existingElement.shadowRoot
+      }
+      // element exists but shadowRoot cannot be accessed
+      // delete the element and create new
+      existingElement.remove()
+    }
+
+    const element = document.createElement("div")
+    // set id for future retrieval
+    element.id = modalId
+    document.body.appendChild(element)
+    const target = element.attachShadow({ mode: "open" })
+    target.innerHTML = `<style>${css}</style>`
+
+    return target
+  }
 
   return new Promise((resolve) => {
     const modal = new Modal({
-      target,
+      target: getTarget(),
       props: {
         dappName,
         callback: async (value: StarknetWindowObject | null) => {