Feat/support sdk backdrop (#272)

Deland-Labs · Dec 26, 2024 · 71cbe73 · 71cbe73
1 parent b811760
commit 71cbe73
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/packages/sdk/src/lib/constants.ts b/packages/sdk/src/lib/constants.ts
@@ -1,3 +1,4 @@
 export const RPC_SERVICE_NAME = 'hibit-id-rpc'
 export const IFRAME_CONTAINER_ID = 'hibit-id-app'
+export const IFRAME_BACKDROP_ID = 'hibit-id-app-backdrop'
 export const CONTROLLER_CONTAINER_ID = 'hibit-id-controller'
diff --git a/packages/sdk/src/lib/dom/index.css b/packages/sdk/src/lib/dom/index.css
@@ -36,7 +36,7 @@
 
 #hibit-id-app {
   position: fixed;
-  z-index: 9998;
+  z-index: 9995;
   border-radius: 1rem;
   overflow: hidden;
 }
@@ -45,3 +45,13 @@
   height: 100%;
   border: none;
 }
+
+#hibit-id-app-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9990;
+}
diff --git a/packages/sdk/src/lib/dom/index.ts b/packages/sdk/src/lib/dom/index.ts
@@ -1,4 +1,4 @@
-import { CONTROLLER_CONTAINER_ID, IFRAME_CONTAINER_ID } from "../constants"
+import { CONTROLLER_CONTAINER_ID, IFRAME_BACKDROP_ID, IFRAME_CONTAINER_ID } from "../constants"
 import { HibitIdChainId } from "../enums"
 import { FixDevMode, HibitEnv, Language } from "../types"
 import { clamp, getHibitIdUrl } from "../utils"
@@ -153,15 +153,15 @@ export class HibitIdController {
 export class HibitIdIframe {
   public iframe: HTMLIFrameElement
   public readonly isDesktop: boolean
-  private container: HTMLDivElement
+  private _container: HTMLDivElement
   private _visible = false
 
   constructor(env: HibitEnv, chains: HibitIdChainId[] = [], urlAppendix: string = '', lang: Language | '' = '', fixDevMode: FixDevMode = 'unset' ) {
     this.isDesktop = window.innerWidth > 576
     const existed = document.getElementById(IFRAME_CONTAINER_ID)
     if (existed) {
-      this.container = existed as HTMLDivElement
-      this.iframe = this.container.querySelector('iframe') as HTMLIFrameElement
+      this._container = existed as HTMLDivElement
+      this.iframe = this._container.querySelector('iframe') as HTMLIFrameElement
       return
     }
     const container = document.createElement('div')
@@ -171,7 +171,7 @@ export class HibitIdIframe {
     iframe.allow='clipboard-write; publickey-credentials-get *; publickey-credentials-create *'
     container.appendChild(iframe)
     document.body.appendChild(container)
-    this.container = container
+    this._container = container
     this.iframe = iframe
     this.hide()
   }
@@ -184,13 +184,14 @@ export class HibitIdIframe {
     Object.keys(style).forEach((key) => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
-      this.container.style[key] = style[key]
+      this._container.style[key] = style[key]
     })
   }
 
   public show = (
     mode: 'fullscreen' | 'centered' | 'floating',
-    floatingPos?: { right: number, bottom: number }
+    floatingPos?: { right: number, bottom: number },
+    withBackdrop?: boolean
   ) => {
     if (mode === 'fullscreen') {
       this.updateStyle({
@@ -230,16 +231,23 @@ export class HibitIdIframe {
         })
       }
     }
+    if (withBackdrop && !document.getElementById(IFRAME_BACKDROP_ID)) {
+      const backdrop = document.createElement('div')
+      backdrop.id = IFRAME_BACKDROP_ID
+      document.body.appendChild(backdrop)
+    }
     this._visible = true
   }
 
   public hide = () => {
-    this.container.style.width = '0'
-    this.container.style.height = '0'
+    this._container.style.width = '0'
+    this._container.style.height = '0'
+    document.getElementById(IFRAME_BACKDROP_ID)?.remove()
     this._visible = false
   }
 
   public destroy = () => {
-    this.container?.remove()
+    this.hide()
+    this._container?.remove()
   }
 }
diff --git a/packages/sdk/src/lib/wallet.ts b/packages/sdk/src/lib/wallet.ts
@@ -587,7 +587,8 @@ export class HibitIdWallet {
               right: window.innerWidth - controllerRect.right,
               bottom: window.innerHeight - controllerRect.top + 20
             }
-          : undefined
+          : undefined,
+        this._options.embedMode === 'background',
       );
     }
   };

diff --git a/packages/sdk/src/test/App.tsx b/packages/sdk/src/test/App.tsx
@@ -18,7 +18,7 @@ const App: FC = () => {
       env: 'dev',
       chains: [],
       defaultChain: HibitIdChainId.EthereumSepolia,
-      embedMode: 'float',
+      embedMode: 'background',
     })
     setWallet(wallet)
     const handleChainChanged = (chainId: HibitIdChainId) => setChainId(chainId)