fix(wallet-gateway-remote): updates to creating a party in the wallet gateway

- Show loading indicator on submissionn
- update language. 'Add' -> "Create"

Signed-off-by: Fayi Femi-Balogun <fayimora.femibalogun@digitalasset.com>

Author: fayi-da

core/wallet-test-utils/src/wallet-gateway.ts

@@ -129,7 +129,7 @@ export class WalletGateway {
         await (await this.popup()).getByRole('button', { name: 'New' }).click()
         await expect(
             (await this.popup()).getByRole('heading', {
-                name: 'Add a new party',
+                name: 'Create a new party',
             })
         ).toBeVisible({ timeout: 15000 })
         await (await this.popup())
@@ -143,7 +143,9 @@ export class WalletGateway {
                 .getByRole('checkbox', { name: 'Set as primary wallet' })
                 .check()
         }
-        await (await this.popup()).getByRole('button', { name: 'Add' }).click()
+        await (await this.popup())
+            .getByRole('button', { name: 'Create' })
+            .click()
 
         await this.waitForPartiesPageReady()
 

core/wallet-ui-components/src/components/login-form.ts

@@ -6,7 +6,6 @@ import { customElement, property, state } from 'lit/decorators.js'
 import './back-link.js'
 import { BaseElement } from '../internal/base-element.js'
 import { Network, Idp } from '@canton-network/core-wallet-user-rpc-client'
-import { toRelPath } from '../routing'
 import { chevronDownIcon } from '../icons'
 import cantonLogo from '../../images/logos/canton-logo.png'
 
@@ -219,15 +218,6 @@ export class WgLoginForm extends BaseElement {
         )
     }
 
-    private handleBack() {
-        const event = new LoginBackEvent()
-        const shouldContinue = this.dispatchEvent(event)
-
-        if (shouldContinue) {
-            window.location.href = toRelPath(this.backHref)
-        }
-    }
-
     /** Set a status message on the form (e.g. "Redirecting...") */
     setMessage(message: string, type: 'error' | 'info') {
         this.message = message

core/wallet-ui-components/src/components/wallet-create-form.ts

@@ -23,6 +23,9 @@ export class WgWalletCreateForm extends BaseElement {
     @property({ type: Array }) networkIds: string[] = []
     @property({ type: Boolean }) loading = false
     @property({ type: String }) submitLabel = 'Add'
+    @property({ type: String }) loadingLabel = 'Adding...'
+    @property({ type: String }) loadingMessage =
+        'Creating party, please wait...'
 
     @query('#party-id-hint') accessor partyHintInput: HTMLInputElement | null =
         null
@@ -130,12 +133,31 @@ export class WgWalletCreateForm extends BaseElement {
                 font-size: var(--wg-font-size-sm);
                 font-weight: var(--wg-font-weight-medium);
             }
+
+            .submit-wrap {
+                gap: var(--wg-space-3);
+            }
+
+            .submit-button {
+                min-height: 44px;
+            }
+
+            .loading-message {
+                margin: 0;
+                color: var(--wg-text-secondary);
+                font-size: var(--wg-font-size-sm);
+                text-align: center;
+            }
         `,
     ]
 
     private onSubmit(event: Event) {
         event.preventDefault()
 
+        if (this.loading) {
+            return
+        }
+
         const partyHint = this.partyHintInput?.value || ''
         const signingProviderId = this.signingProviderSelect?.value || ''
         const primary = this.primaryCheckbox?.checked || false
@@ -156,7 +178,11 @@ export class WgWalletCreateForm extends BaseElement {
 
     protected render() {
         return html`
-            <form class="d-flex flex-column h-100" @submit=${this.onSubmit}>
+            <form
+                class="d-flex flex-column h-100"
+                aria-busy=${this.loading ? 'true' : 'false'}
+                @submit=${this.onSubmit}
+            >
                 <div class="form-fields d-flex flex-column">
                     <div class="field-group d-flex flex-column">
                         <label
@@ -220,14 +246,30 @@ export class WgWalletCreateForm extends BaseElement {
                     </div>
                 </div>
 
-                <div class="mt-auto pt-3">
+                <div class="submit-wrap mt-auto pt-3 d-flex flex-column">
                     <button
-                        class="btn btn-primary rounded-pill w-100"
+                        class="submit-button btn btn-primary rounded-pill w-100 d-inline-flex align-items-center justify-content-center gap-2"
                         ?disabled=${this.loading}
                         type="submit"
                     >
-                        ${this.submitLabel}
+                        ${this.loading
+                            ? html`<span
+                                  class="spinner-border spinner-border-sm"
+                                  aria-hidden="true"
+                              ></span>`
+                            : null}
+                        ${this.loading ? this.loadingLabel : this.submitLabel}
                     </button>
+
+                    ${this.loading
+                        ? html`<p
+                              class="loading-message"
+                              role="status"
+                              aria-live="polite"
+                          >
+                              ${this.loadingMessage}
+                          </p>`
+                        : null}
                 </div>
             </form>
         `

wallet-gateway/remote/src/web/frontend/parties/add/index.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Wallet Gateway - Add Party</title>
+        <title>Wallet Gateway - Create Party</title>
         <script type="module" src="./index.ts"></script>
     </head>
     <body>

wallet-gateway/remote/src/web/frontend/parties/add/index.ts

@@ -103,7 +103,7 @@ export class UserUiAddParty extends BaseElement {
     protected render() {
         return html`
             <div class="page-header">
-                <h1 class="h4 fw-semibold mb-0">Add a new party</h1>
+                <h1 class="h4 fw-semibold mb-0">Create a new party</h1>
                 <button
                     class="btn btn-link btn-sm text-body text-decoration-none p-0 d-inline-flex align-items-center gap-1"
                     type="button"
@@ -118,6 +118,9 @@ export class UserUiAddParty extends BaseElement {
                 <wg-wallet-create-form
                     .signingProviders=${this.signingProviders}
                     .networkIds=${this.networkIds}
+                    .submitLabel=${'Create party'}
+                    .loadingLabel=${'Creating party...'}
+                    .loadingMessage=${'Creating party, please wait...'}
                     ?loading=${this.loading}
                     @wallet-create=${this.onCreateParty}
                 ></wg-wallet-create-form>

wallet-gateway/remote/src/web/frontend/parties/index.ts

@@ -174,7 +174,7 @@ export class UserUiParties extends BaseElement {
         if (createdParam === WALLET_CREATION_STATUS_CODE.WALLET_ALLOCATED) {
             showToast(
                 'Party created',
-                'Your new party has been added successfully.',
+                'Your new party has been created successfully.',
                 'success'
             )
         } else if (