Move to DOM events (#6)

* Move to DOM events * Update backdrop background color * Set above other elements on the page
secretkeylabs · May 7, 2024 · b2c1cec · b2c1cec
1 parent b40833c
commit b2c1cec
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
-    "build-app": "tsc && vite build --config vite.config.app.ts"
+    "build": "vite build",
+    "build-app": "vite build --config vite.config.app.ts"
   },
   "devDependencies": {
     "@ark-ui/solid": "2.2.0",

diff --git a/src/lib/WalletProviderSelector/components/CloseButton.tsx b/src/lib/WalletProviderSelector/components/CloseButton.tsx
@@ -60,8 +60,8 @@ export function CloseButton(props: Props) {
           margin: "0",
           "border-radius": "50%",
         }}
-        onClick={props.onClose}
-        onKeyDown={handleKeyDown}
+        on:click={props.onClose}
+        on:keydown={handleKeyDown}
       >
         <XCircle />
       </div>

diff --git a/src/lib/WalletProviderSelector/components/SidePanelInstallWalletPrompt.tsx b/src/lib/WalletProviderSelector/components/SidePanelInstallWalletPrompt.tsx
@@ -60,8 +60,8 @@ export function SidePanelInstallWalletPrompt(props: Props) {
           class="install-prompt-button"
           role="button"
           tabIndex={0}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
+          on:click={handleClick}
+          on:keydown={handleKeyDown}
           style={{
             ...buttonTextStyles,
             cursor: "pointer",

diff --git a/src/lib/WalletProviderSelector/components/WalletProviderOption.tsx b/src/lib/WalletProviderSelector/components/WalletProviderOption.tsx
@@ -61,12 +61,12 @@ export function WalletProviderOption(props: Props) {
           outline: "none",
           "padding-top": "10px",
         }}
-        onClick={handleWalletSelected}
-        onKeyDown={handleKeyDown}
-        onMouseEnter={() => setIsMouseOver(true)}
-        onMouseLeave={() => setIsMouseOver(false)}
-        onFocus={() => setIsFocused(true)}
-        onBlur={() => setIsFocused(false)}
+        on:click={handleWalletSelected}
+        on:keydown={handleKeyDown}
+        on:mouseenter={() => setIsMouseOver(true)}
+        on:mouseleave={() => setIsMouseOver(false)}
+        on:focus={() => setIsFocused(true)}
+        on:blur={() => setIsFocused(false)}
       >
         <img
           style={{

diff --git a/src/lib/WalletProviderSelector/index.tsx b/src/lib/WalletProviderSelector/index.tsx
@@ -1,5 +1,13 @@
-import { Dialog } from "@ark-ui/solid";
-import { For, Match, Show, Switch, batch, onCleanup, onMount } from "solid-js";
+import {
+  For,
+  Match,
+  Show,
+  Switch,
+  batch,
+  createEffect,
+  onCleanup,
+  onMount,
+} from "solid-js";
 import { createSignal } from "solid-js";
 
 import {
@@ -34,6 +42,7 @@ const cardRadius = "24px";
 
 export function WalletProviderSelector() {
   const [root, setRoot] = createSignal<HTMLDivElement>();
+  const [card, setCard] = createSignal<HTMLDivElement>();
   const [sidePanel, setSidePanel] = createSignal<HTMLDivElement>();
 
   /**
@@ -75,6 +84,21 @@ export function WalletProviderSelector() {
     triggerFadeOut();
   }
 
+  function handleEscKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      handleCancelClick();
+    }
+  }
+
+  createEffect(() => {
+    if (isVisible()) {
+      window.addEventListener("keydown", handleEscKeyDown);
+      return;
+    }
+
+    window.removeEventListener("keydown", handleEscKeyDown);
+  });
+
   function handleWalletSelected(walletId: string) {
     const option = options().find(
       (p) => p.id === walletId,
@@ -158,23 +182,36 @@ export function WalletProviderSelector() {
     );
   });
 
-  function handleAsCancelled(e: Event) {
-    e.preventDefault();
-    handleCancelClick();
-  }
-
   onCleanup(() => {
     window.removeEventListener(open, handleOpen);
     window.removeEventListener(close, handleClose);
   });
 
+  function handleRootClick(e: MouseEvent) {
+    const target = e.target;
+    if (!target) return;
+
+    const cardEl = card();
+    if (!cardEl) return;
+
+    if (cardEl.contains(target as Node)) {
+      return;
+    }
+
+    handleCancelClick();
+  }
+
   return (
     <div
       ref={setRoot}
       style={{
         position: shouldRender() ? "fixed" : "static",
         inset: "0",
       }}
+      on:click={handleRootClick}
+      on:keydown={() => {
+        console.log("Inside root keydown");
+      }}
     >
       <CssReset />
       <style>{`
@@ -320,14 +357,13 @@ export function WalletProviderSelector() {
         }
       `}</style>
       <Show when={shouldRender()}>
-        <Dialog.Root
-          getRootNode={() => root()?.getRootNode() as Node}
-          open={shouldRender()}
-          onEscapeKeyDown={handleAsCancelled}
-          onInteractOutside={handleAsCancelled}
-          onPointerDownOutside={handleAsCancelled}
+        <div
+          style={{
+            position: "fixed",
+            inset: "0",
+          }}
         >
-          <Dialog.Backdrop
+          <div
             style={{
               "background-color": "#FFFFFF80",
               position: "absolute",
@@ -337,7 +373,7 @@ export function WalletProviderSelector() {
                 : "wallet-selector-blur-out 0.2s cubic-bezier(.3, 0, .8, .15) forwards",
             }}
           />
-          <Dialog.Positioner
+          <div
             style={{
               display: "flex",
               "justify-content": "center",
@@ -347,13 +383,14 @@ export function WalletProviderSelector() {
           >
             <div class="card-width-container">
               <div class="card-height-container">
-                <Dialog.Content
+                <div
+                  ref={setCard}
                   class="card"
-                  onAnimationEnd={handleAnimationEnd}
+                  on:animationend={handleAnimationEnd}
                 >
                   <div class="card-grid">
                     <div class="main-panel">
-                      <Dialog.Title
+                      <div
                         style={{
                           ...titleTextStyles,
                           margin: "0",
@@ -366,8 +403,8 @@ export function WalletProviderSelector() {
                         {hasAnyWalletInstalled()
                           ? "Choose wallet to connect"
                           : "Don't have a wallet?"}
-                      </Dialog.Title>
-                      <Dialog.Description
+                      </div>
+                      <div
                         style={{
                           ...bodyTextStyles,
                           "padding-left": "24px",
@@ -378,7 +415,7 @@ export function WalletProviderSelector() {
                         {hasAnyWalletInstalled()
                           ? "Start by selecting with one of the wallets below and confirming the connection."
                           : "Start by installing one of the wallets below."}
-                      </Dialog.Description>
+                      </div>
                       <div
                         class="wallets-grid-container"
                         data-desc="wallet grid container for padding"
@@ -447,11 +484,11 @@ export function WalletProviderSelector() {
                     </Show>
                   </div>
                   <CloseButton onClose={handleCancelClick} />
-                </Dialog.Content>
+                </div>
               </div>
             </div>
-          </Dialog.Positioner>
-        </Dialog.Root>
+          </div>
+        </div>
       </Show>
     </div>
   );

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -30,6 +30,11 @@ export function loadSelector() {
 
   const element = document.createElement(elementName);
   element.id = elementId;
+
+  // Ensure above all else
+  element.style.position = "relative";
+  element.style.zIndex = "999999";
+
   document.body.appendChild(element);
 }