@canton-network/core-wallet-ui-components 0.30.0 → 0.32.0

package/dist/internal/activity-utils.d.ts

@@ -0,0 +1,8 @@
+import type { ParsedTransactionInfo } from '@canton-network/core-tx-visualizer';
+export declare function getActivityStatusTone(status: string): 'success' | 'warning' | 'danger' | 'default';
+export declare function getActivityStatusLabel(status: string): string;
+export declare function getActivityStatusBadgeClass(status: string): string;
+export declare function formatActivityDate(value: string | null | undefined): string;
+export declare function getActivityType(parsed: ParsedTransactionInfo | null): string;
+export declare function getActivityAmount(parsed: ParsedTransactionInfo | null): string;
+//# sourceMappingURL=activity-utils.d.ts.map

package/dist/internal/activity-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-utils.d.ts","sourceRoot":"","sources":["../../src/internal/activity-utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAE/E,wBAAgB,qBAAqB,CACjC,MAAM,EAAE,MAAM,GACf,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAc9C;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED,wBAAgB,2BAA2B,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAWlE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAO3E;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,qBAAqB,GAAG,IAAI,GAAG,MAAM,CAG5E;AAED,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,qBAAqB,GAAG,IAAI,GACrC,MAAM,CAOR"}

package/dist/internal/base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/internal/base-element.ts"],"names":[],"mappings":"AAGA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAEhE,OAAO,sCAAsC,CAAA;AAC7C,OAAO,0BAA0B,CAAA;AAMjC;;GAEG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,EAqBR,cAAc,CAAA;CACtB"}
+{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/internal/base-element.ts"],"names":[],"mappings":"AAGA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAEhE,OAAO,sCAAsC,CAAA;AAC7C,OAAO,0BAA0B,CAAA;AAMjC;;GAEG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,EA4DR,cAAc,CAAA;CACtB"}

package/dist/routing.d.ts

@@ -1,4 +1,4 @@
-export declare const ALLOWED_ROUTES: readonly ["/login", "/wallets", "/settings", "/transactions", "/approve", "/", "/404", "/callback"];
+export declare const ALLOWED_ROUTES: readonly ["/login", "/parties/add", "/parties", "/wallets", "/settings", "/networks/add", "/networks/review", "/networks", "/identity-providers/add", "/identity-providers/review", "/identity-providers", "/activities", "/approve", "/", "/404", "/callback"];
 export type AllowedRoute = (typeof ALLOWED_ROUTES)[number];
 export declare function isAllowedRoute(path: string): path is AllowedRoute;
 export declare function getCurrentRoute(pathname: string): AllowedRoute | null;

package/dist/routing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../src/routing.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,qGASjB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1D,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,YAAY,CAEjE;AA2BD,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAcrE;AAcD,wBAAgB,SAAS,CACrB,IAAI,EAAE,MAAM,EACZ,QAAQ,SAA2B,GACpC,MAAM,CAaR;AAED,wBAAgB,SAAS,CACrB,KAAK,EAAE,YAAY,EACnB,QAAQ,SAA2B,GACpC,MAAM,CAMR"}
+{"version":3,"file":"routing.d.ts","sourceRoot":"","sources":["../src/routing.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,iQAiBjB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1D,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,YAAY,CAEjE;AA2BD,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,IAAI,CAcrE;AAcD,wBAAgB,SAAS,CACrB,IAAI,EAAE,MAAM,EACZ,QAAQ,SAA2B,GACpC,MAAM,CAaR;AAED,wBAAgB,SAAS,CACrB,KAAK,EAAE,YAAY,EACnB,QAAQ,SAA2B,GACpC,MAAM,CAMR"}

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/styles/card.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,yBAqBtB,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/styles/card.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,yBA2CtB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/styles/modal.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,yBAkCvB,CAAA"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/styles/modal.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,yBAoCvB,CAAA"}

package/dist/windows/popup.d.ts

@@ -17,6 +17,7 @@ declare class PopupInstance {
     open(component: StyledElement, options?: PopupOptions): WindowProxy;
     close(): void;
     private getComponentUrl;
+    private escapeStylesForTemplate;
 }
 export declare const popup: PopupInstance;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/windows/popup.ts"],"names":[],"mappings":"AAGA,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,UAAU,aAAa;IACnB,QAAQ,WAAW,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;CACjB;AAID,cAAM,aAAa;IACf,MAAM,CAAC,WAAW;;IA4BlB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,WAAW;IACpC,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW;IAsBnE,KAAK;IAKL,OAAO,CAAC,eAAe;CAqD1B;AAED,eAAO,MAAM,KAAK,eAAsB,CAAA"}
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/windows/popup.ts"],"names":[],"mappings":"AAGA,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,UAAU,aAAa;IACnB,QAAQ,WAAW,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;CACjB;AAID,cAAM,aAAa;IACf,MAAM,CAAC,WAAW;;IA4BlB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,GAAG,WAAW;IACpC,IAAI,CAAC,SAAS,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW;IAsBnE,KAAK;IAKL,OAAO,CAAC,eAAe;IAyDvB,OAAO,CAAC,uBAAuB;CAQlC;AAED,eAAO,MAAM,KAAK,eAAsB,CAAA"}

package/dist/windows/wallet-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallet-picker.d.ts","sourceRoot":"","sources":["../../src/windows/wallet-picker.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,iBAAiB,EACjB,kBAAkB,EACrB,MAAM,gCAAgC,CAAA;AAIvC;;;;;GAKG;AACH,wBAAsB,UAAU,CAC5B,OAAO,EAAE,iBAAiB,EAAE,GAC7B,OAAO,CAAC,kBAAkB,CAAC,CAgD7B"}
+{"version":3,"file":"wallet-picker.d.ts","sourceRoot":"","sources":["../../src/windows/wallet-picker.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,iBAAiB,EACjB,kBAAkB,EACrB,MAAM,gCAAgC,CAAA;AAIvC;;;;;GAKG;AACH,wBAAsB,UAAU,CAC5B,OAAO,EAAE,iBAAiB,EAAE,GAC7B,OAAO,CAAC,kBAAkB,CAAC,CAqD7B"}

package/dist/windows/wallet-picker.stories.d.ts

@@ -3,6 +3,7 @@ import '../components/wallet-picker';
 declare const meta: Meta;
 export default meta;
 export declare const Default: StoryObj;
+export declare const WithManualProviders: StoryObj;
 export declare const Popup: StoryObj;
 export declare const Empty: StoryObj;
 //# sourceMappingURL=wallet-picker.stories.d.ts.map

package/dist/windows/wallet-picker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallet-picker.stories.d.ts","sourceRoot":"","sources":["../../src/windows/wallet-picker.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AAIpE,OAAO,6BAA6B,CAAA;AAEpC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AA6CnB,eAAO,MAAM,OAAO,EAAE,QASrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAQnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QASnB,CAAA"}
+{"version":3,"file":"wallet-picker.stories.d.ts","sourceRoot":"","sources":["../../src/windows/wallet-picker.stories.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AAIpE,OAAO,6BAA6B,CAAA;AAEpC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAA;AAED,eAAe,IAAI,CAAA;AAiDnB,eAAO,MAAM,OAAO,EAAE,QAUrB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,QAejC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAQnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAUnB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canton-network/core-wallet-ui-components",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "type": "module",
   "description": "Reusable UI components for the Splice wallet",
   "license": "Apache-2.0",
@@ -24,26 +24,32 @@
     "typecheck": "tsc --noEmit",
     "flatpack": "yarn pack --out \"$FLATPACK_OUTDIR\"",
     "clean": "tsc -b --clean; rm -rf dist",
-    "dev": "storybook dev -p 6006"
+    "dev": "storybook dev -p 6006",
+    "test": "vitest run --project browser --passWithNoTests",
+    "test:coverage": "vitest run --project browser --coverage --passWithNoTests"
   },
   "devDependencies": {
     "@storybook/web-components-vite": "^10.2.14",
     "@types/bootstrap": "^5.2.10",
     "@types/fs-extra": "^11.0.4",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
     "fs-extra": "^11.3.3",
-    "storybook": "^10.2.14",
+    "playwright": "^1.58.2",
+    "storybook": "^10.2.16",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "^7.3.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.2"
   },
   "packageManager": "yarn@4.9.4",
   "dependencies": {
-    "@canton-network/core-tx-visualizer": "^0.24.0",
-    "@canton-network/core-types": "^0.24.0",
-    "@canton-network/core-wallet-auth": "^0.25.0",
-    "@canton-network/core-wallet-store": "^0.29.0",
-    "@canton-network/core-wallet-user-rpc-client": "^0.30.0",
+    "@canton-network/core-tx-visualizer": "^0.25.1",
+    "@canton-network/core-types": "^0.25.1",
+    "@canton-network/core-wallet-auth": "^0.26.1",
+    "@canton-network/core-wallet-store": "^0.30.1",
+    "@canton-network/core-wallet-user-rpc-client": "^0.31.1",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
     "lit": "^3.3.2"

package/themes/default.css

@@ -1,32 +1,165 @@
 :root,
 :host {
+    /* ---------------------------------------------------------------------
+     * Core palette (legacy + runtime wallet-picker variables)
+     * ------------------------------------------------------------------ */
     --wg-theme-background-color: #ffffff;
     --wg-theme-text-color: #1a1a1a;
-    --wg-theme-font-family: sans-serif;
+    --wg-theme-text-secondary: #6b7280;
+    --wg-theme-font-family:
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 
     --wg-theme-border-color: #e5e7eb;
-    --wg-theme-text-secondary: #6b7280;
     --wg-theme-surface-color: #ffffff;
     --wg-theme-surface-hover: #ede9fe;
+
     --wg-theme-primary-color: #000000;
     --wg-theme-primary-hover: #363636;
     --wg-theme-primary-text-color: #ffffff;
-    --wg-theme-success-color: #22c55e;
+    --wg-theme-primary-rgb: 128, 222, 234;
+
+    --wg-theme-accent-color: #7c3aed;
+    --wg-theme-accent-rgb: 124, 58, 237;
+    --wg-theme-success-color: #077e3b;
+    --wg-theme-success-rgb: 7, 126, 59;
+
     --wg-theme-error-color: #ef4444;
+    --wg-theme-error-rgb: 239, 68, 68;
+
     --wg-theme-icon-bg: rgba(0, 0, 0, 0.04);
     --wg-theme-badge-bg: rgba(0, 0, 0, 0.06);
-    --wg-theme-accent-color: #7c3aed;
 
+    /* ---------------------------------------------------------------------
+     * Typography
+     * ------------------------------------------------------------------ */
+    --wg-theme-font-size-xs: 0.75rem;
+    --wg-theme-font-size-sm: 0.875rem;
+    --wg-theme-font-size-base: 1rem;
+    --wg-theme-font-size-lg: 1.125rem;
+    --wg-theme-font-size-xl: 1.25rem;
+    --wg-theme-font-size-2xl: 1.5rem;
+
+    --wg-theme-font-weight-normal: 400;
+    --wg-theme-font-weight-medium: 500;
+    --wg-theme-font-weight-semibold: 600;
+    --wg-theme-font-weight-bold: 700;
+
+    --wg-theme-line-height-tight: 1.2;
+    --wg-theme-line-height-normal: 1.5;
+    --wg-theme-line-height-relaxed: 1.7;
+
+    /* ---------------------------------------------------------------------
+     * Spacing scale
+     * ------------------------------------------------------------------ */
+    --wg-theme-space-0: 0;
+    --wg-theme-space-1: 0.25rem;
+    --wg-theme-space-2: 0.5rem;
+    --wg-theme-space-3: 0.75rem;
+    --wg-theme-space-4: 1rem;
+    --wg-theme-space-5: 1.25rem;
+    --wg-theme-space-6: 1.5rem;
+    --wg-theme-space-8: 2rem;
+    --wg-theme-space-10: 2.5rem;
+    --wg-theme-space-12: 3rem;
+
+    /* ---------------------------------------------------------------------
+     * Radii
+     * ------------------------------------------------------------------ */
+    --wg-theme-radius-sm: 0.375rem;
+    --wg-theme-radius-md: 0.5rem;
+    --wg-theme-radius-lg: 0.75rem;
+    --wg-theme-radius-xl: 1rem;
+    --wg-theme-radius-full: 9999px;
+
+    /* ---------------------------------------------------------------------
+     * Shadows
+     * ------------------------------------------------------------------ */
+    --wg-theme-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+    --wg-theme-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
+    --wg-theme-shadow-lg: 0 14px 28px rgba(15, 23, 42, 0.12);
+    --wg-theme-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.08);
+
+    /* ---------------------------------------------------------------------
+     * Form controls
+     * ------------------------------------------------------------------ */
+    --wg-theme-label-color: var(--wg-theme-accent-color);
+    --wg-theme-label-required-color: #dc2626;
+    --wg-theme-input-bg: #f3f4f6;
+    --wg-theme-input-text: var(--wg-theme-text-color);
+    --wg-theme-input-border: #d1d5db;
+    --wg-theme-input-border-focus: var(--wg-theme-accent-color);
+    --wg-theme-input-placeholder: #9ca3af;
+
+    /* ---------------------------------------------------------------------
+     * Canonical --wg-* aliases (for gateway app usage)
+     * ------------------------------------------------------------------ */
     --wg-bg: var(--wg-theme-background-color);
     --wg-text: var(--wg-theme-text-color);
     --wg-text-secondary: var(--wg-theme-text-secondary);
     --wg-font-family: var(--wg-theme-font-family);
+
     --wg-border: var(--wg-theme-border-color);
     --wg-surface: var(--wg-theme-surface-color);
     --wg-surface-hover: var(--wg-theme-surface-hover);
+
     --wg-primary: var(--wg-theme-primary-color);
     --wg-primary-hover: var(--wg-theme-primary-hover);
+    --wg-primary-text: var(--wg-theme-primary-text-color);
+    --wg-primary-rgb: var(--wg-theme-primary-rgb);
     --wg-accent: var(--wg-theme-accent-color);
+    --wg-accent-rgb: var(--wg-theme-accent-rgb);
     --wg-success: var(--wg-theme-success-color);
+    --wg-success-rgb: var(--wg-theme-success-rgb);
+
     --wg-error: var(--wg-theme-error-color);
+    --wg-error-rgb: var(--wg-theme-error-rgb);
+
+    --wg-icon-bg: var(--wg-theme-icon-bg);
+    --wg-badge-bg: var(--wg-theme-badge-bg);
+
+    --wg-font-size-xs: var(--wg-theme-font-size-xs);
+    --wg-font-size-sm: var(--wg-theme-font-size-sm);
+    --wg-font-size-base: var(--wg-theme-font-size-base);
+    --wg-font-size-lg: var(--wg-theme-font-size-lg);
+    --wg-font-size-xl: var(--wg-theme-font-size-xl);
+    --wg-font-size-2xl: var(--wg-theme-font-size-2xl);
+
+    --wg-font-weight-normal: var(--wg-theme-font-weight-normal);
+    --wg-font-weight-medium: var(--wg-theme-font-weight-medium);
+    --wg-font-weight-semibold: var(--wg-theme-font-weight-semibold);
+    --wg-font-weight-bold: var(--wg-theme-font-weight-bold);
+
+    --wg-line-height-tight: var(--wg-theme-line-height-tight);
+    --wg-line-height-normal: var(--wg-theme-line-height-normal);
+    --wg-line-height-relaxed: var(--wg-theme-line-height-relaxed);
+
+    --wg-space-0: var(--wg-theme-space-0);
+    --wg-space-1: var(--wg-theme-space-1);
+    --wg-space-2: var(--wg-theme-space-2);
+    --wg-space-3: var(--wg-theme-space-3);
+    --wg-space-4: var(--wg-theme-space-4);
+    --wg-space-5: var(--wg-theme-space-5);
+    --wg-space-6: var(--wg-theme-space-6);
+    --wg-space-8: var(--wg-theme-space-8);
+    --wg-space-10: var(--wg-theme-space-10);
+    --wg-space-12: var(--wg-theme-space-12);
+
+    --wg-radius-sm: var(--wg-theme-radius-sm);
+    --wg-radius-md: var(--wg-theme-radius-md);
+    --wg-radius-lg: var(--wg-theme-radius-lg);
+    --wg-radius-xl: var(--wg-theme-radius-xl);
+    --wg-radius-full: var(--wg-theme-radius-full);
+
+    --wg-shadow-sm: var(--wg-theme-shadow-sm);
+    --wg-shadow-md: var(--wg-theme-shadow-md);
+    --wg-shadow-lg: var(--wg-theme-shadow-lg);
+    --wg-shadow-inset: var(--wg-theme-shadow-inset);
+
+    --wg-label-color: var(--wg-theme-label-color);
+    --wg-label-required-color: var(--wg-theme-label-required-color);
+    --wg-input-bg: var(--wg-theme-input-bg);
+    --wg-input-text: var(--wg-theme-input-text);
+    --wg-input-border: var(--wg-theme-input-border);
+    --wg-input-border-focus: var(--wg-theme-input-border-focus);
+    --wg-input-placeholder: var(--wg-theme-input-placeholder);
 }