diff --git a/src/ExampleDApp.tsx b/src/ExampleDApp.tsx index 7539768..4a2865c 100644 --- 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 (

This is a mock DApp

diff --git a/src/lib/ProviderOption.tsx b/src/lib/WalletProviderOption.tsx similarity index 92% rename from src/lib/ProviderOption.tsx rename to src/lib/WalletProviderOption.tsx index 668751b..52c77d6 100644 --- a/src/lib/ProviderOption.tsx +++ b/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) {
diff --git a/src/lib/Selector.tsx b/src/lib/WalletProviderSelector.tsx similarity index 92% rename from src/lib/Selector.tsx rename to src/lib/WalletProviderSelector.tsx index 17dc3ef..c7cff2c 100644 --- a/src/lib/Selector.tsx +++ b/src/lib/WalletProviderSelector.tsx @@ -2,11 +2,12 @@ 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>([]); @@ -14,7 +15,7 @@ export function WalletSelector() { 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", }} > {(provider) => ( - )} diff --git a/src/lib/constants.ts b/src/lib/constants.ts new file mode 100644 index 0000000..84272d4 --- /dev/null +++ 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 index ee73a54..fb1bce5 100644 --- 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, +export function selectWalletProvider( + walletProviders: Array, ): Promise { 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) { @@ -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 index a7bd2fa..9ed15bc 100644 --- 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; - "sats-connect_wallet-selector_cancel": CustomEvent; - "sats-connect_wallet-selector_open": CustomEvent; + "sats-connect_wallet-provider-selector_select": CustomEvent; + "sats-connect_wallet-provider-selector_cancel": CustomEvent; + "sats-connect_wallet-provider-selector_open": CustomEvent; "sats-connect_wallet-selector_close": CustomEvent; } }