@canton-network/core-wallet-ui-components 0.1.0 → 0.2.0

package/dist/components/AppHeader.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+export declare class AppHeader extends LitElement {
+    iconSrc: string;
+    createRenderRoot(): this;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=AppHeader.d.ts.map

package/dist/components/AppHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../src/components/AppHeader.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAGtC,qBACa,SAAU,SAAQ,UAAU;IACT,OAAO,EAAE,MAAM,CAAoB;IAG/D,gBAAgB;IAIhB,MAAM;CA0CT"}

package/dist/components/AppHeader.js

@@ -0,0 +1,73 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let AppHeader = class AppHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.iconSrc = 'images/icon.png';
+    }
+    // Prevent shadow DOM so external CSS applies
+    createRenderRoot() {
+        return this;
+    }
+    render() {
+        return html `
+            <div
+                class="header d-flex justify-content-between align-items-center"
+            >
+                <h2>
+                    <div
+                        class="logo-box"
+                        @click=${() => (window.location.href = '/')}
+                        aria-label="Go to home"
+                    >
+                        <img
+                            src="${this.iconSrc}"
+                            alt="Icon"
+                            width="24"
+                            height="24"
+                        />
+                        Splice Wallet
+                    </div>
+                </h2>
+                <div>
+                    <button
+                        class="btn btn-outline-secondary btn-sm"
+                        id="settingsButton"
+                        @click=${() => (window.location.href = '/networks/')}
+                    >
+                        Settings
+                    </button>
+                    <button
+                        class="btn btn-outline-secondary btn-sm"
+                        @click=${() => {
+            localStorage.clear();
+            window.location.href = '/login';
+        }}
+                        id="logoutButton"
+                    >
+                        Logout
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AppHeader.prototype, "iconSrc", void 0);
+AppHeader = __decorate([
+    customElement('app-header')
+], AppHeader);
+export { AppHeader };

package/dist/components/AppLayout.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class AppLayout extends LitElement {
+    iconSrc: string;
+    themeSrc?: string;
+    static styles: import("lit").CSSResult;
+    private customThemeCss;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    private get effectiveThemeCss();
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=AppLayout.d.ts.map

package/dist/components/AppLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../src/components/AppLayout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAA;AAKtD,qBACa,SAAU,SAAQ,UAAU;IACT,OAAO,EAAE,MAAM,CAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAE7C,MAAM,CAAC,MAAM,0BAiBZ;IAED,OAAO,CAAC,cAAc,CAAsB;IAEtC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAqBhD,OAAO,KAAK,iBAAiB,GAE5B;IAED,MAAM;CAYT"}

package/dist/components/AppLayout.js

@@ -0,0 +1,87 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import bootstrapCss from 'bootstrap/dist/css/bootstrap.min.css?inline';
+import defaultTheme from '../../themes/default.css?inline';
+let AppLayout = class AppLayout extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.iconSrc = '/images/icon.png';
+        this.customThemeCss = null;
+    }
+    static { this.styles = css `
+        ${unsafeCSS(bootstrapCss.replaceAll(/:root/g, ':root,:host'))}
+
+        :host {
+            --bs-body-color: var(--splice-wk-text-color);
+
+            margin: 0;
+            font-family: var(--bs-body-font-family);
+            font-size: var(--bs-body-font-size);
+            font-weight: var(--bs-body-font-weight);
+            line-height: var(--bs-body-line-height);
+            color: var(--bs-body-color);
+            text-align: var(--bs-body-text-align);
+            background-color: var(--bs-body-bg);
+            -webkit-text-size-adjust: 100%;
+            -webkit-tap-highlight-color: transparent;
+        }
+    `; }
+    async updated(changedProps) {
+        if (changedProps.has('themeSrc')) {
+            if (this.themeSrc) {
+                try {
+                    const res = await fetch(this.themeSrc);
+                    if (!res.ok)
+                        throw new Error(`HTTP ${res.status}`);
+                    this.customThemeCss = await res.text();
+                }
+                catch (err) {
+                    console.warn(`[app-layout] Failed to load theme from "${this.themeSrc}":`, err);
+                    this.customThemeCss = null;
+                }
+                this.requestUpdate();
+            }
+            else {
+                this.customThemeCss = null;
+            }
+        }
+    }
+    get effectiveThemeCss() {
+        return this.customThemeCss ?? defaultTheme;
+    }
+    render() {
+        return html `
+            <style>
+                ${unsafeCSS(this.effectiveThemeCss)}
+            </style>
+
+            <app-header .iconSrc=${this.iconSrc}></app-header>
+            <div class="container" id="mainContent">
+                <slot></slot>
+            </div>
+        `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AppLayout.prototype, "iconSrc", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AppLayout.prototype, "themeSrc", void 0);
+AppLayout = __decorate([
+    customElement('app-layout')
+], AppLayout);
+export { AppLayout };

package/dist/components/Configuration.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class Configuration extends LitElement {
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=Configuration.d.ts.map

package/dist/components/Configuration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.d.ts","sourceRoot":"","sources":["../../src/components/Configuration.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAA;AAGtC,qBACa,aAAc,SAAQ,UAAU;IACzC,SAAS,CAAC,MAAM;CAQnB"}

package/dist/components/Configuration.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let Configuration = class Configuration extends LitElement {
+    render() {
+        return html `
+            <div>
+                <h1>Configuration</h1>
+                <p>Wallet Kernel configuration page.</p>
+            </div>
+        `;
+    }
+};
+Configuration = __decorate([
+    customElement('swk-configuration')
+], Configuration);
+export { Configuration };

package/dist/components/Discovery.d.ts

@@ -0,0 +1,19 @@
+import { DiscoverResult } from '@canton-network/core-types';
+/**
+ * Discovery implements the view of the Wallet Kernel selection window.
+ * It is implemented directly as a Web Component without using LitElement, so to avoid having external dependencies.
+ */
+export declare class Discovery extends HTMLElement {
+    static observedAttributes: string[];
+    get walletExtensionLoaded(): boolean;
+    set walletExtensionLoaded(val: boolean);
+    private root;
+    constructor();
+    verifiedKernels(): DiscoverResult[];
+    private renderKernelOption;
+    private selectKernel;
+    render(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+//# sourceMappingURL=Discovery.d.ts.map

package/dist/components/Discovery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Discovery.d.ts","sourceRoot":"","sources":["../../src/components/Discovery.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAsB,MAAM,4BAA4B,CAAA;AAE/E;;;GAGG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,kBAAkB,WAA8B;IAEvD,IAAI,qBAAqB,YAExB;IAED,IAAI,qBAAqB,CAAC,GAAG,SAAA,EAM5B;IAED,OAAO,CAAC,IAAI,CAAa;;IA2DzB,eAAe,IAAI,cAAc,EAAE;IAInC,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,YAAY;IAQpB,MAAM;IAiDN,iBAAiB;IAIjB,wBAAwB;CAG3B"}

package/dist/components/Discovery.js

@@ -0,0 +1,148 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Discovery implements the view of the Wallet Kernel selection window.
+ * It is implemented directly as a Web Component without using LitElement, so to avoid having external dependencies.
+ */
+export class Discovery extends HTMLElement {
+    static { this.observedAttributes = ['wallet-extension-loaded']; }
+    get walletExtensionLoaded() {
+        return this.hasAttribute('wallet-extension-loaded');
+    }
+    set walletExtensionLoaded(val) {
+        if (val) {
+            this.setAttribute('wallet-extension-loaded', '');
+        }
+        else {
+            this.removeAttribute('wallet-extension-loaded');
+        }
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        const styles = document.createElement('style');
+        styles.textContent = `
+        * {
+            color: var(--splice-wk-text-color, black);
+            font-family: var(--splice-wk-font-family);
+        }
+
+        h1 {
+            margin: 0px;
+        }
+
+        div {
+            background-color: var(--splice-wk-background-color, none);
+            width: 100%;
+            height: 100%;
+        }
+
+        .kernel {
+            height: auto;
+            margin-bottom: 8px;
+        }
+
+        .kernel button {
+            margin-left: 8px;
+        }
+
+        input {
+            margin-left: 8px;
+        }
+        `;
+        this.root = document.createElement('div');
+        this.root.id = 'discovery-root';
+        if (this.shadowRoot) {
+            this.shadowRoot.appendChild(styles);
+            this.shadowRoot.appendChild(this.root);
+        }
+        if (window.opener) {
+            // uses the string literal instead of the WalletEvent enum to avoid bundling issues
+            window.opener.postMessage({ type: 'SPLICE_WALLET_EXT_READY' }, '*');
+            window.opener.addEventListener('message', (event) => {
+                if (event.data.type === 'SPLICE_WALLET_EXT_ACK') {
+                    this.setAttribute('wallet-extension-loaded', '');
+                }
+            });
+        }
+    }
+    verifiedKernels() {
+        return [{ url: 'http://localhost:3000/rpc', walletType: 'remote' }];
+    }
+    renderKernelOption(kernel) {
+        const div = document.createElement('div');
+        div.setAttribute('class', 'kernel');
+        const span = document.createElement('span');
+        switch (kernel.walletType) {
+            case 'extension':
+                span.innerText = 'Browser Extension';
+                break;
+            case 'remote':
+                span.innerText = `${kernel.walletType} - ${kernel.url}`;
+                break;
+        }
+        const button = document.createElement('button');
+        button.innerText = `Connect`;
+        button.addEventListener('click', () => {
+            this.selectKernel(kernel);
+        });
+        div.appendChild(span);
+        div.appendChild(button);
+        return div;
+    }
+    selectKernel(kernel) {
+        if (window.opener) {
+            window.opener.postMessage(kernel, '*');
+        }
+        else {
+            console.warn('no window opener...');
+        }
+    }
+    render() {
+        const root = document.createElement('div');
+        const header = document.createElement('h1');
+        header.innerText = 'Add Remote Wallet Kernel';
+        const input = document.createElement('input');
+        input.setAttribute('autofocus', '');
+        input.setAttribute('id', 'wkurl');
+        input.setAttribute('type', 'text');
+        input.setAttribute('placeholder', 'RPC URL');
+        const button = document.createElement('button');
+        button.setAttribute('id', 'connect');
+        button.innerText = 'Connect';
+        button.addEventListener('click', () => {
+            const url = input.value;
+            console.log('Connecting to Wallet Kernel...' + url);
+            this.selectKernel({ url, walletType: 'remote' });
+        });
+        root.appendChild(header);
+        if (this.walletExtensionLoaded) {
+            const k = this.renderKernelOption({
+                walletType: 'extension',
+            });
+            root.appendChild(k);
+        }
+        for (const kernel of this.verifiedKernels()) {
+            const k = this.renderKernelOption(kernel);
+            root.appendChild(k);
+        }
+        root.appendChild(input);
+        root.appendChild(button);
+        // Replace the whole root (except styles), don't append
+        if (this.shadowRoot) {
+            Array.from(this.shadowRoot.childNodes).forEach((node) => {
+                if (!(node instanceof HTMLStyleElement)) {
+                    this.shadowRoot.removeChild(node);
+                }
+            });
+            this.shadowRoot.appendChild(root);
+        }
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.render();
+    }
+}
+customElements.define('swk-discovery', Discovery);

package/dist/components/NetworkForm.d.ts

@@ -0,0 +1,12 @@
+import { Network } from '@canton-network/core-wallet-store';
+import { LitElement } from 'lit';
+export declare class NetworkForm extends LitElement {
+    editingNetwork: Network | null;
+    authType: string;
+    static styles: import("lit").CSSResult[];
+    private getAuthField;
+    onAuthTypeChange(e: Event): void;
+    handleSubmit(e: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=NetworkForm.d.ts.map

package/dist/components/NetworkForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkForm.d.ts","sourceRoot":"","sources":["../../src/components/NetworkForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAItC,qBACa,WAAY,SAAQ,UAAU;IACX,cAAc,EAAE,OAAO,GAAG,IAAI,CAAO;IACrC,QAAQ,EAAE,MAAM,CAAa;IAEzD,MAAM,CAAC,MAAM,4BAAW;IAExB,OAAO,CAAC,YAAY;IAOpB,gBAAgB,CAAC,CAAC,EAAE,KAAK;IAKzB,YAAY,CAAC,CAAC,EAAE,KAAK;IAerB,MAAM;CA6GT"}

package/dist/components/NetworkForm.js

@@ -0,0 +1,164 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from '../themes/styles.js';
+let NetworkForm = class NetworkForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.editingNetwork = null;
+        this.authType = 'implicit';
+    }
+    static { this.styles = [styles]; }
+    getAuthField(field) {
+        if (!this.editingNetwork)
+            return '';
+        const auth = this.editingNetwork.auth;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return auth?.[field] ?? '';
+    }
+    onAuthTypeChange(e) {
+        const select = e.target;
+        this.authType = select.value;
+    }
+    handleSubmit(e) {
+        e.preventDefault();
+        const form = e.target;
+        const formData = new FormData(form);
+        this.dispatchEvent(new CustomEvent('form-submit', {
+            detail: formData,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+            <form @submit=${this.handleSubmit}>
+                <input
+                    name="name"
+                    placeholder="Name"
+                    .value=${this.editingNetwork?.name ?? ''}
+                    required
+                />
+                <input
+                    name="chainId"
+                    placeholder="Network Id"
+                    .value=${this.editingNetwork?.chainId ?? ''}
+                    required
+                />
+                <input
+                    name="synchronizerId"
+                    placeholder="Synchronizer Id"
+                    .value=${this.editingNetwork?.synchronizerId ?? ''}
+                    required
+                />
+                <input
+                    name="description"
+                    placeholder="Description"
+                    .value=${this.editingNetwork?.description ?? ''}
+                    required
+                />
+                <input
+                    name="ledgerApi.baseurl"
+                    placeholder="Ledger API Base Url"
+                    .value=${this.editingNetwork?.ledgerApi?.baseUrl ?? ''}
+                    required
+                />
+
+                <select
+                    name="authType"
+                    @change=${this.onAuthTypeChange}
+                    .value=${this.authType}
+                >
+                    <option value="password">password</option>
+                    <option value="implicit">implicit</option>
+                </select>
+
+                ${this.authType === 'implicit'
+            ? html `
+                          <input
+                              name="domain"
+                              placeholder="Domain"
+                              .value=${this.getAuthField('domain')}
+                              required
+                          />
+                          <input
+                              name="clientId"
+                              placeholder="ClientId"
+                              .value=${this.getAuthField('clientId')}
+                              required
+                          />
+                          <input
+                              name="scope"
+                              placeholder="Scope"
+                              .value=${this.getAuthField('scope')}
+                              required
+                          />
+                          <input
+                              name="audience"
+                              placeholder="Audience"
+                              .value=${this.getAuthField('audience')}
+                              required
+                          />
+                      `
+            : html `
+                          <input
+                              name="tokenUrl"
+                              placeholder="TokenUrl"
+                              .value=${this.getAuthField('tokenUrl')}
+                              required
+                          />
+                          <input
+                              name="grantType"
+                              placeholder="GrantType"
+                              .value=${this.getAuthField('grantType')}
+                              required
+                          />
+                          <input
+                              name="scope"
+                              placeholder="Scope"
+                              .value=${this.getAuthField('scope')}
+                              required
+                          />
+                          <input
+                              name="audience"
+                              placeholder="Audience"
+                              .value=${this.getAuthField('audience')}
+                              required
+                          />
+                      `}
+
+                <div class="buttons">
+                    <button type="submit">Save</button>
+                    <button
+                        type="button"
+                        @click=${() => this.dispatchEvent(new Event('cancel'))}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </form>
+        `;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], NetworkForm.prototype, "editingNetwork", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], NetworkForm.prototype, "authType", void 0);
+NetworkForm = __decorate([
+    customElement('network-form')
+], NetworkForm);
+export { NetworkForm };

package/dist/components/NetworkTable.d.ts

@@ -0,0 +1,8 @@
+import { Network } from '@canton-network/core-wallet-store';
+import { LitElement } from 'lit';
+export declare class NetworkTable extends LitElement {
+    networks: Network[];
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=NetworkTable.d.ts.map

package/dist/components/NetworkTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkTable.d.ts","sourceRoot":"","sources":["../../src/components/NetworkTable.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,qBACa,YAAa,SAAQ,UAAU;IACb,QAAQ,EAAE,OAAO,EAAE,CAAK;IAEnD,MAAM,CAAC,MAAM,4BAAW;IAExB,MAAM;CA2CT"}

package/dist/components/NetworkTable.js

@@ -0,0 +1,67 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from '../themes/styles.js';
+let NetworkTable = class NetworkTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.networks = [];
+    }
+    static { this.styles = [styles]; }
+    render() {
+        console.log('rendering with networks ' + JSON.stringify(this.networks));
+        return html `
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>ID</th>
+                        <th>Description</th>
+                        <th>Auth type</th>
+                        <th>Synchronizer ID</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    ${this.networks.map((net) => html `
+                            <tr>
+                                <td>${net.name}</td>
+                                <td>${net.chainId}</td>
+                                <td>${net.description}</td>
+                                <td>${net.auth.type}</td>
+                                <td>${net.synchronizerId}</td>
+                                <td class="actions">
+                                    <button>Update</button>
+                                    <button
+                                        @click=${() => this.dispatchEvent(new CustomEvent('delete', {
+            detail: net,
+        }))}
+                                    >
+                                        Delete
+                                    </button>
+                                </td>
+                            </tr>
+                        `)}
+                </tbody>
+            </table>
+        `;
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], NetworkTable.prototype, "networks", void 0);
+NetworkTable = __decorate([
+    customElement('network-table')
+], NetworkTable);
+export { NetworkTable };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAA;AAI3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAElC,OAAO,2BAA2B,CAAA;AAClC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AACrC,OAAO,6BAA6B,CAAA;AAGpC,qBACa,KAAM,SAAQ,UAAU;IACjC,MAAM,CAAC,MAAM,0BAMZ;IAGD,UAAU;;;QAST;IAED,OAAO,CAAC,wBAAwB;IAiBhC,SAAS,CAAC,MAAM;CA2BnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAA;AAI3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAElC,OAAO,2BAA2B,CAAA;AAClC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AACrC,OAAO,6BAA6B,CAAA;AAGpC,qBACa,KAAM,SAAQ,UAAU;IACjC,MAAM,CAAC,MAAM,0BAMZ;IAGD,UAAU;;;QAST;IAED,OAAO,CAAC,wBAAwB;IAiBhC,SAAS,CAAC,MAAM;CA2BnB"}

package/dist/index.js

@@ -1,3 +1,5 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/themes/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/themes/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/themes/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,yBAuElB,CAAA"}

package/dist/themes/styles.js

@@ -0,0 +1,75 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { css } from 'lit';
+export const styles = css `
+    .table-wrapper {
+        max-height: 300px;
+        overflow-y: auto;
+        border: 1px solid var(--splice-wk-border-color, #ccc);
+        border-radius: 4px;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    thead th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        text-align: left;
+        padding: 8px 12px;
+        border-bottom: 1px solid var(--splice-wk-border-color, #ccc);
+    }
+
+    tbody td {
+        padding: 8px 12px;
+        border-bottom: 1px solid var(--splice-wk-border-color, #ccc);
+    }
+
+    tr:nth-child(even) {
+        background-color: var(--splice-wk-background-color, none);
+    }
+
+    .actions button {
+        margin-right: 4px;
+        font-size: 0.8rem;
+        padding: 4px 8px;
+    }
+
+    .modal {
+        position: fixed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .modal-content {
+        background: var(--splice-wk-background-color, none);
+        padding: 1.5rem;
+        border-radius: 8px;
+        width: 400px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    }
+
+    .form {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    input,
+    select {
+        padding: 6px;
+        font-size: 1rem;
+    }
+
+    .buttons {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 1rem;
+        gap: 0.5rem;
+        margin-bottom: 1.5rem;
+    }
+`;

package/dist/windows/discovery.d.ts

@@ -0,0 +1,3 @@
+import { DiscoverResult } from '@canton-network/core-types';
+export declare function discover(): Promise<DiscoverResult>;
+//# sourceMappingURL=discovery.d.ts.map

package/dist/windows/discovery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"discovery.d.ts","sourceRoot":"","sources":["../../src/windows/discovery.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAI3D,wBAAsB,QAAQ,IAAI,OAAO,CAAC,cAAc,CAAC,CAiCxD"}

package/dist/windows/discovery.js

@@ -0,0 +1,32 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { Discovery } from '../components/Discovery.js';
+import { popup } from './popup.js';
+export async function discover() {
+    const win = await popup(Discovery, {
+        title: 'Wallet Discovery',
+        target: 'wallet-discovery',
+    });
+    return new Promise((resolve, reject) => {
+        let response = undefined;
+        win.addEventListener('beforeunload', () => {
+            if (response === undefined) {
+                console.log('Wallet discovery window closed by user');
+                reject('User closed the wallet discovery window');
+            }
+        });
+        const handler = (event) => {
+            if (event.origin === window.location.origin &&
+                typeof event.data.walletType === 'string') {
+                response = event.data;
+                resolve({
+                    url: event.data.url,
+                    walletType: event.data.walletType,
+                });
+                window.removeEventListener('message', handler);
+                win.close();
+            }
+        };
+        window.addEventListener('message', handler);
+    });
+}

package/dist/windows/popup.d.ts

@@ -0,0 +1,12 @@
+interface PopupOptions {
+    title?: string;
+    target?: string;
+    width?: number;
+    height?: number;
+    screenX?: number;
+    screenY?: number;
+}
+export declare function popup(component: new () => HTMLElement, options?: PopupOptions): Promise<Window>;
+export declare function popupHref(url: URL | string, options?: PopupOptions): Promise<Window>;
+export {};
+//# sourceMappingURL=popup.d.ts.map

package/dist/windows/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/windows/popup.ts"],"names":[],"mappings":"AAKA,UAAU,YAAY;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,KAAK,CACjB,SAAS,EAAE,UAAU,WAAW,EAChC,OAAO,CAAC,EAAE,YAAY,GACvB,OAAO,CAAC,MAAM,CAAC,CA6DjB;AAED,wBAAgB,SAAS,CACrB,GAAG,EAAE,GAAG,GAAG,MAAM,EACjB,OAAO,CAAC,EAAE,YAAY,GACvB,OAAO,CAAC,MAAM,CAAC,CAuBjB"}

package/dist/windows/popup.js

@@ -0,0 +1,64 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+import styles from '../../themes/default.css?inline';
+export function popup(component, options) {
+    const { title = 'Custom Popup', target = 'wallet-popup', width = 400, height = 500, screenX = 200, screenY = 200, } = options || {};
+    const html = `<!DOCTYPE html>
+    <html>
+        <head>
+            <title>${title}</title>
+            <style>
+                html, body {
+                    margin: 0;
+                    padding: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+
+                body {
+                    display: flex;
+                }
+            </style>
+            <style>${styles}</style>
+        </head>
+        <body>
+        </body>
+
+        <script>
+            customElements.define('popup-content', ${component})
+
+            const root = document.getElementsByTagName('body')[0]
+
+            const content = document.createElement('popup-content')
+            content.setAttribute('style', 'width: 100%; height: 100%;')
+
+            root.appendChild(content)
+        </script>
+    </html>`;
+    const url = URL.createObjectURL(new Blob([html], { type: 'text/html' }));
+    return new Promise((resolve, reject) => {
+        const win = window.open(url, target, `width=${width},height=${height},screenX=${screenX},screenY=${screenY}`);
+        if (win) {
+            win.addEventListener('beforeunload', () => {
+                URL.revokeObjectURL(url); // clean up the URL object to prevent memory leaks
+            });
+            resolve(win);
+        }
+        else {
+            reject(new Error('Failed to open popup window.'));
+        }
+    });
+}
+export function popupHref(url, options) {
+    const { target = 'wallet-popup', width = 400, height = 500, screenX = 200, screenY = 200, } = options || {};
+    return new Promise((resolve, reject) => {
+        const win = window.open(url, target, `width=${width},height=${height},screenX=${screenX},screenY=${screenY}`);
+        if (win) {
+            win.focus();
+            resolve(win);
+        }
+        else {
+            reject(new Error('Failed to open popup window.'));
+        }
+    });
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@canton-network/core-wallet-ui-components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Reusable UI components for the Splice wallet",
-  "repository": "https://github.com/hyperledger-labs/splice-wallet-kernel",
+  "repository": "github:hyperledger-labs/splice-wallet-kernel",
   "license": "Apache-2.0",
   "author": "Marc Juchli <marc.juchli@digitalasset.com>",
   "main": "./dist/index.js",
@@ -23,16 +23,16 @@
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   },
-  "packageManager": "yarn@4.9.2",
+  "packageManager": "yarn@4.9.4",
   "dependencies": {
-    "@canton-network/core-types": "^0.1.0",
-    "@canton-network/core-wallet-store": "^0.1.0",
+    "@canton-network/core-types": "^0.2.0",
+    "@canton-network/core-wallet-store": "^0.2.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.7",
     "lit": "^3.3.0"
   },
   "files": [
-    "dist/*"
+    "dist/**"
   ],
   "publishConfig": {
     "access": "public"