From 0fe6015e061958234e56fb283a812a8d3cf71e9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eduard=20Bardaj=C3=AD=20Puig?= <ebardaji@gmail.com>
Date: Mon, 25 Mar 2024 08:41:07 +0100
Subject: [PATCH] Update docs

---
 README.md            |  2 +-
 docs/architecture.md |  4 ++--
 docs/selector-api.md | 20 +++++++++++++++++++-
 src/lib/utils.ts     |  8 ++++----
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 4db07fb..8a0da4a 100644
--- a/README.md
+++ b/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,
diff --git a/docs/architecture.md b/docs/architecture.md
index 5b18985..98b157e 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,6 +1,6 @@
 # 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
 
@@ -8,7 +8,7 @@ The selector uses [Solid](https://www.solidjs.com/) for component logic and reac
 
 ## 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
 
diff --git a/docs/selector-api.md b/docs/selector-api.md
index bf1703a..83ab406 100644
--- a/docs/selector-api.md
+++ b/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
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0fe8cb4..3e9a06a 100644
--- a/src/lib/utils.ts
+++ b/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);
   });