feat(core-wallet-ui-components): network form v2

clients/remote/src/user-api/controller.ts

@@ -14,10 +14,14 @@ import {
     AddSessionResult,
     ListSessionsResult,
     SetPrimaryWalletParams,
-    ListWalletsResult,
     SyncWalletsResult,
 } from './rpc-gen/typings.js'
-import { Store, Auth, Transaction } from '@canton-network/core-wallet-store'
+import {
+    Store,
+    Auth,
+    Transaction,
+    Network,
+} from '@canton-network/core-wallet-store'
 import { Logger } from 'pino'
 import { NotificationService } from '../notification/NotificationService.js'
 import {
@@ -51,9 +55,11 @@ export const userController = (
     const logger = _logger.child({ component: 'user-controller' })
 
     return buildController({
-        addNetwork: async (network: AddNetworkParams) => {
+        addNetwork: async (params: AddNetworkParams) => {
+            const { network } = params
+
             const ledgerApi = {
-                baseUrl: network.ledgerApiUrl ?? '',
+                baseUrl: network.ledgerApi ?? '',
             }
 
             let auth: Auth
@@ -81,16 +87,25 @@ export const userController = (
                 }
             }
 
-            const newNetwork = {
-                name: network.network.name,
-                chainId: network.network.chainId,
-                description: network.network.description,
-                synchronizerId: network.network.synchronizerId,
+            const newNetwork: Network = {
+                name: network.name,
+                chainId: network.chainId,
+                description: network.description,
+                synchronizerId: network.synchronizerId,
                 auth,
                 ledgerApi,
             }
 
-            await store.addNetwork(newNetwork)
+            // TODO: Add an explicit updateNetwork method to the User API spec and controller
+            const existingNetworks = await store.listNetworks()
+            if (
+                existingNetworks.find((n) => n.chainId === newNetwork.chainId)
+            ) {
+                await store.updateNetwork(newNetwork)
+            } else {
+                await store.addNetwork(newNetwork)
+            }
+
             return null
         },
         removeNetwork: async (params: RemoveNetworkParams) => {

clients/remote/src/web/frontend/networks/index.ts

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import '@canton-network/core-wallet-ui-components'
-import { Auth } from '@canton-network/core-wallet-store'
 import { LitElement, html, css } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import {
@@ -15,6 +14,10 @@ import '/index.css'
 import { stateManager } from '../state-manager'
 import { createUserClient } from '../rpc-client'
 import { handleErrorToast } from '../handle-errors'
+import {
+    NetworkCardDeleteEvent,
+    NetworkEditSaveEvent,
+} from '@canton-network/core-wallet-ui-components'
 
 @customElement('user-ui-networks')
 export class UserUiNetworks extends LitElement {
@@ -86,6 +89,8 @@ export class UserUiNetworks extends LitElement {
             border-radius: 8px;
             min-width: 300px;
             max-width: 95vw;
+            max-height: 75vh;
+            overflow-y: scroll;
             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
         }
         @media (max-width: 600px) {
@@ -195,11 +200,17 @@ export class UserUiNetworks extends LitElement {
         this.listNetworks()
     }
 
-    private async handleDelete(net: Network) {
-        if (!confirm(`Delete network "${net.name}"?`)) return
+    private async handleDelete(e: NetworkCardDeleteEvent) {
+        const network: Network = {
+            ...e.network,
+            ledgerApi: e.network.ledgerApi.baseUrl,
+        }
+
+        if (!confirm(`Delete network "${network.name}"?`)) return
 
         try {
-            const params: RemoveNetworkParams = { networkName: net.name }
+            // TODO: rename parameter to chainId in User API
+            const params: RemoveNetworkParams = { networkName: network.chainId }
             const userClient = createUserClient(stateManager.accessToken.get())
             await userClient.request('removeNetwork', params)
             await this.listNetworks()
@@ -208,52 +219,17 @@ export class UserUiNetworks extends LitElement {
         }
     }
 
-    handleSubmit = async (e: CustomEvent<FormData>) => {
+    private handleSubmit = async (e: NetworkEditSaveEvent) => {
         e.preventDefault()
-        const formData = e.detail
-        const authType = formData.get('authType') as string
 
-        try {
-            let auth: Auth
-            if (authType === 'implicit') {
-                auth = {
-                    type: 'implicit',
-                    identityProviderId: formData.get(
-                        'identityProviderId'
-                    ) as string,
-                    issuer: formData.get('issuer') as string,
-                    configUrl: formData.get('configUrl') as string,
-                    audience: formData.get('audience') as string,
-                    scope: formData.get('scope') as string,
-                    clientId: formData.get('clientId') as string,
-                }
-            } else {
-                auth = {
-                    type: 'password',
-                    identityProviderId: formData.get(
-                        'identityProviderId'
-                    ) as string,
-                    issuer: formData.get('issuer') as string,
-                    configUrl: formData.get('configUrl') as string,
-                    tokenUrl: formData.get('tokenUrl') as string,
-                    grantType: formData.get('grantType') as string,
-                    scope: formData.get('scope') as string,
-                    clientId: formData.get('clientId') as string,
-                    audience: formData.get('audience') as string,
-                }
-            }
-
-            const networkParam: Network = {
-                chainId: formData.get('chainId') as string,
-                synchronizerId: formData.get('synchronizerId') as string,
-                name: formData.get('name') as string,
-                description: formData.get('description') as string,
-                auth: auth,
-                ledgerApi: formData.get('ledgerApi.baseurl') as string,
-            }
+        const network: Network = {
+            ...e.network,
+            ledgerApi: e.network.ledgerApi.baseUrl,
+        }
 
+        try {
             const userClient = createUserClient(stateManager.accessToken.get())
-            await userClient.request('addNetwork', { network: networkParam })
+            await userClient.request('addNetwork', { network })
             await this.listNetworks()
         } catch (e) {
             handleErrorToast(e)
@@ -341,7 +317,8 @@ export class UserUiNetworks extends LitElement {
 
             <network-table
                 .networks=${this.networks}
-                @delete=${(e: CustomEvent) => this.handleDelete(e.detail)}
+                @network-edit-save=${this.handleSubmit}
+                @delete=${this.handleDelete}
             ></network-table>
 
             ${this.isModalOpen
@@ -359,8 +336,8 @@ export class UserUiNetworks extends LitElement {
                               <network-form
                                   .editingNetwork=${this.editingNetwork}
                                   .authType=${this.authType}
-                                  @form-submit=${this.handleSubmit}
-                                  @cancel=${this.closeModal}
+                                  @network-edit-save=${this.handleSubmit}
+                                  @network-edit-cancel=${this.closeModal}
                               ></network-form>
                           </div>
                       </div>

core/wallet-store/src/config/schema.ts

@@ -89,5 +89,6 @@ export type Auth = z.infer<typeof authSchema>
 export type Network = z.infer<typeof networkSchema>
 export type ImplicitAuth = z.infer<typeof implicitAuthSchema>
 export type PasswordAuth = z.infer<typeof passwordAuthSchema>
-export type clientCredentialAuth = z.infer<typeof clientCredentialAuthSchema>
+export type ClientCredentials = z.infer<typeof clientCredentials>
+export type ClientCredentialAuth = z.infer<typeof clientCredentialAuthSchema>
 export type LedgerApi = z.infer<typeof ledgerApiSchema>

core/wallet-ui-components/src/components/NetworkCard.ts

@@ -0,0 +1,101 @@
+// Copyright (c) 2025 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { customElement, property, state } from 'lit/decorators.js'
+import { BaseElement } from '../internal/BaseElement'
+import { css, html } from 'lit'
+import { Network } from '@canton-network/core-wallet-store'
+
+/** Emitted when the user clicks the "Delete" button on a network card */
+export class NetworkCardDeleteEvent extends Event {
+    constructor(public network: Network) {
+        super('delete', { bubbles: true, composed: true })
+    }
+}
+
+/** Emitted when the user clicks the "Update" button on a network card */
+export class NetworkCardUpdateEvent extends Event {
+    constructor() {
+        super('update', { bubbles: true, composed: true })
+    }
+}
+
+@customElement('network-card')
+export class NetworkCard extends BaseElement {
+    @property({ type: Object }) network: Network | null = null
+
+    @state() private _editing = false
+
+    static styles = [
+        BaseElement.styles,
+        css`
+            .network-card {
+                background: #fff;
+                border: none;
+                border-radius: 8px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+                min-width: 0;
+            }
+            .network-meta {
+                color: var(--bs-gray-600);
+                margin-bottom: 0.5rem;
+                word-break: break-all;
+            }
+            .network-desc {
+                color: var(--bs-gray-700);
+                margin-bottom: 0.5rem;
+                word-break: break-all;
+            }
+        `,
+    ]
+
+    render() {
+        let body = html`<p>no network supplied</p>`
+
+        if (this.network !== null) {
+            if (this._editing) {
+                body = html` <network-form
+                    .network=${this.network}
+                    @network-edit-cancel=${() => (this._editing = false)}
+                    @network-edit-save=${() => (this._editing = false)}
+                ></network-form>`
+            } else {
+                body = html` <h6 class="card-title text-primary fw-bold">
+                        ${this.network.name}
+                    </h6>
+                    <div class="network-meta">
+                        <strong>ID:</strong>
+                        ${this.network.chainId}<br />
+                        <strong>Auth:</strong> ${this.network.auth.type}<br />
+                        <strong>Synchronizer:</strong>
+                        ${this.network.synchronizerId}
+                    </div>
+                    <div class="network-desc">${this.network.description}</div>
+                    <div>
+                        <button
+                            class="btn btn-secondary"
+                            @click=${() => (this._editing = true)}
+                        >
+                            Update
+                        </button>
+                        <button
+                            class="btn btn-danger"
+                            @click=${() =>
+                                this.dispatchEvent(
+                                    new NetworkCardDeleteEvent(this.network!)
+                                )}
+                        >
+                            Delete
+                        </button>
+                    </div>`
+            }
+        }
+
+        return html`<div class="col card network-card">
+            <div class="card-body">${body}</div>
+        </div>`
+    }
+}

core/wallet-ui-components/src/components/NetworkForm.stories.ts

@@ -4,12 +4,93 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite'
 import { html } from 'lit'
 
+import { Network } from '@canton-network/core-wallet-store'
+
 const meta: Meta = {
     title: 'NetworkForm',
 }
 
 export default meta
 
+function onSaved() {
+    document.getElementById('output')!.textContent = 'saved successfully!'
+}
+
 export const Default: StoryObj = {
-    render: () => html`<network-form></network-form>`,
+    render: () => {
+        return html`<network-form @network-edit-save=${onSaved}></network-form>
+            <div id="output"></div>`
+    },
+}
+
+const sampleNetworkImplicit: Network = {
+    name: 'Local (OAuth IDP)',
+    chainId: 'canton:local-oauth',
+    synchronizerId:
+        'wallet::1220e7b23ea52eb5c672fb0b1cdbc916922ffed3dd7676c223a605664315e2d43edd',
+    description: 'Mock OAuth IDP',
+    ledgerApi: {
+        baseUrl: 'http://127.0.0.1:5003',
+    },
+    auth: {
+        identityProviderId: 'idp2',
+        type: 'implicit',
+        issuer: 'http://127.0.0.1:8889',
+        configUrl: 'http://127.0.0.1:8889/.well-known/openid-configuration',
+        audience:
+            'https://daml.com/jwt/aud/participant/participant1::1220d44fc1c3ba0b5bdf7b956ee71bc94ebe2d23258dc268fdf0824fbaeff2c61424',
+        scope: 'openid daml_ledger_api offline_access',
+        clientId: 'operator',
+        admin: {
+            clientId: 'participant_admin',
+            clientSecret: 'admin-client-secret',
+        },
+    },
+}
+
+export const PopulatedImplicitAuth: StoryObj = {
+    render: () => {
+        return html`<network-form
+                @network-edit-save=${onSaved}
+                .network=${sampleNetworkImplicit}
+            ></network-form>
+            <div id="output"></div>`
+    },
+}
+
+const sampleNetworkPassword: Network = {
+    name: 'Local (password IDP)',
+    chainId: 'canton:local-password',
+    synchronizerId:
+        'wallet::1220e7b23ea52eb5c672fb0b1cdbc916922ffed3dd7676c223a605664315e2d43edd',
+    description: 'Unimplemented Password Auth',
+    ledgerApi: {
+        baseUrl: 'https://test',
+    },
+    auth: {
+        identityProviderId: 'idp1',
+        type: 'password',
+        issuer: 'http://127.0.0.1:8889',
+        configUrl: 'http://127.0.0.1:8889/.well-known/openid-configuration',
+        audience:
+            'https://daml.com/jwt/aud/participant/participant1::1220d44fc1c3ba0b5bdf7b956ee71bc94ebe2d23258dc268fdf0824fbaeff2c61424',
+        tokenUrl: 'tokenUrl',
+        grantType: 'password',
+        scope: 'openid',
+        clientId: 'wk-service-account',
+        admin: {
+            clientId: 'participant_admin',
+            clientSecret: 'admin-client-secret',
+        },
+    },
+}
+
+export const PopulatedPasswordAuth: StoryObj = {
+    render: () => {
+        return html`<network-form
+                @network-edit-save=${onSaved}
+                .network=${sampleNetworkPassword}
+            ></network-form>
+            <div id="output"></div>`
+    },
 }