@reclack/walletkit 0.1.2 → 0.2.1

package/README.md

@@ -161,6 +161,39 @@ by setting any `--rkw-` token on the element.
 `variant="modal"` is a native `<dialog>`, so focus trapping, Esc to close, an
 inert background and a backdrop all come from the browser.
 
+## The network picker
+
+The chain something settles on, as a second element. A checkout asks which
+chain before it asks which wallet, and a form collecting a settlement address
+asks which chain without connecting anything at all.
+
+```html
+<reclack-network
+  networks="base,polygon,ethereum,solana"
+  value="base"
+  asset-base="/wallets/"
+></reclack-network>
+```
+
+```js
+document.querySelector('reclack-network')
+  .addEventListener('change', (event) => {
+    console.log(event.detail.network)   // 'polygon'
+  })
+```
+
+| Attribute | Values | Default | What it does |
+| --- | --- | --- | --- |
+| `networks` | comma separated names | none | The chains to choose between |
+| `value` | one of them | the first | The chain chosen, and settable |
+| `disabled` | present or absent | absent | Stops it while something is in flight |
+| `label` | text | `Network` | Empty renders no label at all |
+| `asset-base` | URL path | `/images/` | Where the chain marks are served from |
+
+It carries the same theme attributes as the picker, and `element.value` reads
+and writes the choice. Chain artwork ships in `assets/` beside the wallet
+artwork; a chain with no mark shows its initial rather than a broken image.
+
 ## The kit
 
 The element makes its own kit, and you never have to touch one. Reach for the

package/dist/element/element.d.ts

@@ -68,6 +68,14 @@ export declare class ReclackConnectElement extends HTMLElement {
     /** Hands this element a kit to share instead of the one it would make. */
     useKit(kit: WalletKit): void;
 }
+/**
+ * Puts the stylesheet in the shadow root.
+ *
+ * One constructed sheet shared by every instance, so a page with several
+ * pickers parses the CSS once. A `<style>` element where that is not
+ * supported, which costs a parse per element and is correct everywhere.
+ */
+export declare function adoptStyles(root: ShadowRoot): void;
 /** Registers the element, once, under its own name. */
 export declare function defineWalletElement(tagName?: string): void;
 export interface ConnectWalletOptions extends ConnectRequest {

package/dist/element/index.d.ts

@@ -1,4 +1,6 @@
 export type { ReclackConnectAttributes, ReclackConnectProps, } from './attributes.js';
 export { ATTRIBUTES, attributesOf, EVENTS } from './props.js';
-export type { ConnectProps } from './props.js';
+export { NETWORK_ATTRIBUTES, NETWORK_EVENTS, networkAttributesOf, } from './props.js';
+export type { ConnectProps, NetworkProps } from './props.js';
 export { connectWallet, defineWalletElement, ReclackConnectElement, type ConnectWalletOptions, } from './element.js';
+export { defineNetworkElement, ReclackNetworkElement, } from './network-element.js';

package/dist/element/network-element.d.ts

@@ -0,0 +1,24 @@
+import type { WalletKitTheme } from '@reclack/walletkit';
+/**
+ * The chain picker, as an element of its own.
+ *
+ * Separate from `<reclack-connect>` because the two answer different
+ * questions and a page often wants one without the other: a checkout asks
+ * which chain before it asks which wallet, and a dashboard form asks which
+ * chain an address is for without connecting anything at all.
+ */
+export declare class ReclackNetworkElement extends HTMLElement {
+    #private;
+    static tagName: string;
+    static get observedAttributes(): string[];
+    constructor();
+    /** The full theme, for anything an attribute cannot hold. */
+    set theme(theme: WalletKitTheme | undefined);
+    /** The chain currently chosen, which is also settable. */
+    get value(): string;
+    set value(network: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+export declare function defineNetworkElement(tagName?: string): void;

package/dist/element/props.d.ts

@@ -65,3 +65,39 @@ export declare const EVENTS: {
     readonly cancel: "onCancel";
     readonly 'connect-error': "onError";
 };
+/**
+ * The chain picker's props, and how each becomes an attribute.
+ *
+ * Shared for the same reason the picker's are: two wrappers writing their own
+ * mapping is two mappings to keep in step with the element.
+ */
+export interface NetworkProps {
+    /** The chains to choose between, in the order they are offered. */
+    networks?: string[] | string;
+    /** The chain chosen. The first is used when this names none of them. */
+    value?: string;
+    /** Empty renders no label at all. */
+    label?: string;
+    disabled?: boolean;
+    themeMode?: 'light' | 'dark' | 'system';
+    brand?: string;
+    radius?: string;
+    fontFamily?: string;
+    assetBase?: string;
+    onChange?: (network: string) => void;
+}
+/** The network props that are plain attributes, and their DOM names. */
+export declare const NETWORK_ATTRIBUTES: {
+    readonly value: "value";
+    readonly label: "label";
+    readonly themeMode: "theme-mode";
+    readonly brand: "brand";
+    readonly radius: "radius";
+    readonly fontFamily: "font";
+    readonly assetBase: "asset-base";
+};
+export declare function networkAttributesOf(props: NetworkProps): Record<string, string>;
+/** The one event the chain picker dispatches. */
+export declare const NETWORK_EVENTS: {
+    readonly change: "onChange";
+};

package/dist/element/ui/assets.d.ts

@@ -3,5 +3,7 @@ export declare function AssetProvider({ base, children, }: {
     base: string;
     children: ComponentChildren;
 }): import("preact").JSX.Element;
+/** Where this element serves its artwork from, for anything drawing a mark. */
+export declare function useAssetBase(): string;
 /** The artwork for a wallet, or nothing where this package carries none. */
 export declare function useWalletLogo(): (id: string) => string | undefined;

package/dist/element/ui/network-select.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The chain something settles on.
+ *
+ * A closed trigger rather than a stacked list: the number of payable chains
+ * grows with every deployment, and a list that grows without bound pushes
+ * whatever follows it below the fold.
+ *
+ * A combobox over a button and a listbox rather than a native `<select>`,
+ * which cannot carry a chain mark or a search field.
+ */
+export declare function NetworkSelect({ networks, value, disabled, label, onChange, }: {
+    networks: string[];
+    value: string;
+    disabled?: boolean;
+    label?: string;
+    onChange: (network: string) => void;
+}): import("preact").JSX.Element;