Update docs

README.md

@@ -7,7 +7,7 @@ A Bitcoin Web3 wallet provider selector. Built as a custom element, compatible w
 ```ts
 import { loadSelector, selectWalletProvider } from "@sats-connect/ui";
 
-// Call this once in your app, loads the custom element.
+// Call this once in your app to load the custom element.
 loadSelector();
 
 // At a later point,

docs/architecture.md

@@ -1,14 +1,14 @@
 # Architecture
 
-The UI for the wallet provider selector is made available through a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) Custom elements are easy to integrate in just about any web project. Methods detailed in [Component API](./component-api.md) are provided to interact with the selector.
+The UI for the wallet provider selector is made available through a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). Custom elements are easy to integrate in just about any web project. Methods detailed in [Selector API](./selector-api.md) are provided to interact with the selector.
 
 ## Reactivity
 
 The selector uses [Solid](https://www.solidjs.com/) for component logic and reactivity. Solid has a build-time compiler and no runtime, ideal for creating performant and compact shareable components.
 
 ## Building the custom element
 
-Solid, like other popular component frameworks, is usually used to manipulate the DOM. To encapsualte the selector's logic into a custom element, the [`solid-element`](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) package is used.
+Solid, like other popular component frameworks, is usually used to manipulate the DOM. To encapsulate the selector's logic into a custom element, the [`solid-element`](https://github.com/solidjs/solid/tree/main/packages/solid-element#readme) package is used.
 
 ## Styles
 

docs/selector-api.md

@@ -2,7 +2,25 @@
 
 Interaction with the selector is done by means of custom events. The selector sets up event listeners when it mounts, and convenience methods are available to interact with the selector.
 
-For convenience, all the events are emitted to and listened from `window`.
+For consistency and practicality, all the events are emitted to and listened from `window`.
+
+## Loading the selector
+
+Before use, the selector needs to be registered as a custom element and insterted into the DOM. The `loadSelector()` helper function facilitates both these actions, ensuring the selector is properly registered and added to the page.
+
+## Events API
+
+Events are used to interact with the selector.
+
+### Listeners
+
+- **open** `"sats-connect_wallet-provider-selector_open"`: The selector will open and display the providers as configured using custom event's `details` property, which is expected to be of type [`Config`](../src/lib/utils.ts)
+- **close** `"sats-connect_wallet-provider-selector_close"`: The selector will close if open.
+
+### Emitted events
+
+- **select**: `"sats-connect_wallet-provider-selector_select"`: Emitted when the user selects a provider. The selected provider ID is in the custom event's `details` property.
+- **cancel** `"sats-connect_wallet-provider-selector_cancel"`: Emitted when the user closes the selector.
 
 ## Request flow
 

src/lib/utils.ts

@@ -44,9 +44,9 @@ export interface TWalletProviderOption {
   installPrompt?: InstallPrompt;
 }
 
-export function selectWalletProvider(
-  walletProviders: Array<TWalletProviderOption>,
-): Promise<string> {
+export type Config = Array<TWalletProviderOption>;
+
+export function selectWalletProvider(config: Config): Promise<string> {
   return new Promise((resolve, reject) => {
     const walletSelectorElement = getWalletProviderSelectorElement();
     if (!walletSelectorElement) {
@@ -75,7 +75,7 @@ export function selectWalletProvider(
     window.addEventListener(cancel, handleWalletSelectorCancelEvent);
 
     const event = new CustomEvent(open, {
-      detail: walletProviders,
+      detail: config,
     });
     window.dispatchEvent(event);
   });