Update var names

secretkeylabs · Mar 21, 2024 · 3769652 · 3769652
1 parent 293bba0
commit 3769652
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 60 deletions.
diff --git a/src/ExampleDApp.tsx b/src/ExampleDApp.tsx
@@ -1,10 +1,10 @@
-import { onMount } from "solid-js";
-
-import { registerWalletSelector, selectProvider } from "./lib/utils";
+import { registerWalletSelector, selectWalletProvider } from "./lib/utils";
 import { mockGetAvailableProviders } from "./mocks";
 
+registerWalletSelector();
+
 function handleButtonClick() {
-  selectProvider(mockGetAvailableProviders())
+  selectWalletProvider(mockGetAvailableProviders())
     .then(
       (wallet) => {
         console.log("Wallet selected", wallet);
@@ -19,10 +19,6 @@ function handleButtonClick() {
 }
 
 export function ExampleDApp() {
-  onMount(() => {
-    registerWalletSelector();
-  });
-
   return (
     <div>
       <h1>This is a mock DApp</h1>

diff --git a/src/lib/ProviderOption.tsx → src/lib/WalletProviderOption.tsx b/src/lib/ProviderOption.tsx → src/lib/WalletProviderOption.tsx
@@ -3,17 +3,17 @@ import { createSignal } from "solid-js";
 import { ProviderOption } from "./utils";
 
 interface Props extends ProviderOption {
-  onWalletSelected: (walletId: string) => void;
+  onProviderSelected: (walletId: string) => void;
 }
 
-export function WalletOption(props: Props) {
+export function WalletProviderOption(props: Props) {
   function handleWalletSelected() {
     if (props.installPrompt) {
       window.open(props.installPrompt.url, "_blank");
       return;
     }
 
-    props.onWalletSelected(props.id);
+    props.onProviderSelected(props.id);
   }
 
   function handleKeyDown(e: KeyboardEvent) {
@@ -76,6 +76,7 @@ export function WalletOption(props: Props) {
       <div
         style={{
           color: isOutlined() ? focusTextColor : undefined,
+          "font-size": "14px",
           "text-align": "center",
         }}
       >

diff --git a/src/lib/Selector.tsx → src/lib/WalletProviderSelector.tsx b/src/lib/Selector.tsx → src/lib/WalletProviderSelector.tsx
@@ -2,19 +2,20 @@ import { Dialog } from "@ark-ui/solid";
 import { For, Show, batch, createSignal, onCleanup, onMount } from "solid-js";
 
 import { CssReset } from "./CssReset";
-import { WalletOption } from "./ProviderOption";
+import { WalletProviderOption } from "./WalletProviderOption";
 import { XCircle } from "./XCircle";
+import { cancel, close, open, select } from "./constants";
 import { ProviderOption } from "./utils";
 
-export function WalletSelector() {
+export function WalletProviderSelector() {
   const [isVisible, setIsVisible] = createSignal(false);
   const [shouldRender, setShouldRender] = createSignal(false);
   const [providers, setProviders] = createSignal<Array<ProviderOption>>([]);
 
   const triggerFadeOut = () => setIsVisible(false);
 
   function handleCancelClick() {
-    const event = new CustomEvent("sats-connect_wallet-selector_cancel", {
+    const event = new CustomEvent(cancel, {
       bubbles: true,
       composed: true,
     });
@@ -23,7 +24,7 @@ export function WalletSelector() {
   }
 
   function handleWalletSelected(walletId: string) {
-    const event = new CustomEvent("sats-connect_wallet-selector_select", {
+    const event = new CustomEvent(select, {
       detail: walletId,
       bubbles: true,
       composed: true,
@@ -54,8 +55,8 @@ export function WalletSelector() {
   };
 
   onMount(() => {
-    window.addEventListener("sats-connect_wallet-selector_open", handleOpen);
-    window.addEventListener("sats-connect_wallet-selector_close", handleClose);
+    window.addEventListener(open, handleOpen);
+    window.addEventListener(close, handleClose);
 
     // Adds the DM Sans font stylesheet into the document head. Seems fonts
     // can't (or are difficult) to load from the shadow DOM, yet globally
@@ -76,7 +77,7 @@ export function WalletSelector() {
   }
 
   onCleanup(() => {
-    window.removeEventListener("sats-connect_wallet-selector_open", handleOpen);
+    window.removeEventListener(open, handleOpen);
     window.removeEventListener(
       "sats-connect_wallet-selector_close",
       handleClose,
@@ -202,14 +203,14 @@ export function WalletSelector() {
                     display: "grid",
                     "grid-template-columns": "repeat(3, 1fr)",
                     "column-gap": "8px",
-                    "row-gap": "14px",
+                    "row-gap": "6px",
                   }}
                 >
                   <For each={providers()}>
                     {(provider) => (
-                      <WalletOption
+                      <WalletProviderOption
                         {...provider}
-                        onWalletSelected={handleWalletSelected}
+                        onProviderSelected={handleWalletSelected}
                       />
                     )}
                   </For>

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
@@ -0,0 +1,4 @@
+export const select = "sats-connect_wallet-provider-selector_select";
+export const cancel = "sats-connect_wallet-provider-selector_cancel";
+export const open = "sats-connect_wallet-provider-selector_open";
+export const close = "sats-connect_wallet-provider-selector_close";
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,25 +1,34 @@
 import { customElement } from "solid-element";
 
-import { WalletSelector } from "./Selector";
+import { WalletProviderSelector } from "./WalletProviderSelector";
+import { cancel, open, select } from "./constants";
 
-export const selectorId = "sats-connect-wallet-selector";
+export const elementId = "sats-connect-wallet-provider-selector";
+export const elementName = elementId;
 
-export function getWalletSelectorElement() {
-  return document.getElementById(selectorId);
+export function getWalletProviderSelectorElement() {
+  return document.getElementById(elementId);
 }
 
+/**
+ * Call this once in your app to register the wallet provider selector element.
+ */
 export function registerWalletSelector() {
-  customElement("wallet-selector", WalletSelector);
+  if (customElements.get(elementName)) {
+    return;
+  }
+
+  customElement(elementName, WalletProviderSelector);
 
-  const walletSelectorElement = document.createElement("wallet-selector");
-  walletSelectorElement.id = selectorId;
-  document.body.appendChild(walletSelectorElement);
+  const element = document.createElement(elementName);
+  element.id = elementId;
+  document.body.appendChild(element);
 }
 
 export function cleanup() {
-  const walletSelectorElement = getWalletSelectorElement();
-  if (walletSelectorElement) {
-    walletSelectorElement.remove();
+  const element = getWalletProviderSelectorElement();
+  if (element) {
+    element.remove();
   }
 }
 
@@ -34,28 +43,20 @@ export interface ProviderOption {
   installPrompt?: InstallPrompt;
 }
 
-export function selectProvider(
-  providers: Array<ProviderOption>,
+export function selectWalletProvider(
+  walletProviders: Array<ProviderOption>,
 ): Promise<string> {
   return new Promise((resolve, reject) => {
-    const walletSelectorElement = getWalletSelectorElement();
+    const walletSelectorElement = getWalletProviderSelectorElement();
     if (!walletSelectorElement) {
-      reject(
-        "Failed to detect the wallet selector, aborting wallet selection.",
-      );
+      reject("Failed to detect the wallet provider selector.");
       return;
     }
 
     function cleanup() {
-      window.removeEventListener(
-        "sats-connect_wallet-selector_select",
-        handleWalletSelectorSelectEvent,
-      );
-
-      window.removeEventListener(
-        "sats-connect_wallet-selector_cancel",
-        handleWalletSelectorCancelEvent,
-      );
+      window.removeEventListener(select, handleWalletSelectorSelectEvent);
+
+      window.removeEventListener(cancel, handleWalletSelectorCancelEvent);
     }
 
     function handleWalletSelectorSelectEvent(event: CustomEvent<string>) {
@@ -68,18 +69,12 @@ export function selectProvider(
       cleanup();
     }
 
-    window.addEventListener(
-      "sats-connect_wallet-selector_select",
-      handleWalletSelectorSelectEvent,
-    );
+    window.addEventListener(select, handleWalletSelectorSelectEvent);
 
-    window.addEventListener(
-      "sats-connect_wallet-selector_cancel",
-      handleWalletSelectorCancelEvent,
-    );
+    window.addEventListener(cancel, handleWalletSelectorCancelEvent);
 
-    const event = new CustomEvent("sats-connect_wallet-selector_open", {
-      detail: providers,
+    const event = new CustomEvent(open, {
+      detail: walletProviders,
     });
     window.dispatchEvent(event);
   });

diff --git a/src/selector-events.ts b/src/selector-events.ts
@@ -3,9 +3,9 @@ export {};
 // Allow adding custom event listeners to the window object.
 declare global {
   interface WindowEventMap {
-    "sats-connect_wallet-selector_select": CustomEvent<string>;
-    "sats-connect_wallet-selector_cancel": CustomEvent;
-    "sats-connect_wallet-selector_open": CustomEvent;
+    "sats-connect_wallet-provider-selector_select": CustomEvent<string>;
+    "sats-connect_wallet-provider-selector_cancel": CustomEvent;
+    "sats-connect_wallet-provider-selector_open": CustomEvent;
     "sats-connect_wallet-selector_close": CustomEvent;
   }
 }