@canton-network/core-wallet-ui-components 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +89 -0
- package/package.json +40 -0
package/README.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# Wallet UI Components
|
|
2
|
+
|
|
3
|
+
This workspace contains UI components for the Wallet Kernel, implemented with [Web Components](https://www.webcomponents.org/introduction).
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This package provides a modular set of UI building blocks and utilities for wallet-related web applications.
|
|
8
|
+
|
|
9
|
+
[components](./src/components/): Contains reusable web components (such as headers, layouts, and forms) that can be used across different wallet UIs. These components are designed for flexibility and composability.
|
|
10
|
+
|
|
11
|
+
[windows](./src/windows/): Provides predefined window-based functionalities, such as wallet discovery dialogs. These are typically used by higher-level packages like the SDK to implement user flows that require popups or modal interactions.
|
|
12
|
+
|
|
13
|
+
[themes](./src/themes/): Includes the default theme (CSS custom properties and styles) to ensure a consistent look and feel across all components and windows. This theme can be extended or overridden as needed.
|
|
14
|
+
|
|
15
|
+
Together, this package enables rapid development of wallet UIs with a consistent user experience and shared logic.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
This package requires [NodeJS](https://nodejs.org/) v16 or higher and can be added to your project using:
|
|
20
|
+
|
|
21
|
+
```sh
|
|
22
|
+
npm install @canton-network/core-wallet-ui-components --save
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
or
|
|
26
|
+
|
|
27
|
+
```sh
|
|
28
|
+
yarn add @canton-network/core-wallet-ui-components
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Run
|
|
32
|
+
|
|
33
|
+
To build the package, run:
|
|
34
|
+
|
|
35
|
+
```sh
|
|
36
|
+
yarn build
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
To start a local web development server for interactive testing and development, run:
|
|
40
|
+
|
|
41
|
+
```sh
|
|
42
|
+
yarn dev
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Usage
|
|
46
|
+
|
|
47
|
+
The main entry point for building wallet UIs is the `AppLayout` component.
|
|
48
|
+
The `AppLayout` provides a consistent page structure (e.g. encapsulates the `AppHeader`), and automatically includes the [Bootstrap](https://getbootstrap.com/) CSS framework along with a [default theme](./themes/default.css) for a unified look and feel.
|
|
49
|
+
|
|
50
|
+
Basic usage:
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<body>
|
|
54
|
+
<app-layout>
|
|
55
|
+
<you-component></your-component>
|
|
56
|
+
</app-layout>
|
|
57
|
+
</body>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
You can also customize the layout by specifying a custom icon or stylesheet:
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<app-layout iconSrc="images/icon.png" themeSrc="css/custom.css">
|
|
64
|
+
<you-component></your-component>
|
|
65
|
+
</app-layout>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
- `iconSrc`: Path to a custom icon displayed in the header.
|
|
69
|
+
- `themeSrc`: Path to an alternative CSS file for custom theming.
|
|
70
|
+
|
|
71
|
+
This approach allows you to rapidly compose wallet UIs with a consistent structure and appearance, while still supporting customization as needed.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export * from './components/AppHeader.js';
|
|
3
|
+
export * from './components/AppLayout.js';
|
|
4
|
+
export * from './components/Discovery.js';
|
|
5
|
+
export * from './windows/discovery.js';
|
|
6
|
+
export * from './windows/popup.js';
|
|
7
|
+
import './components/Discovery.js';
|
|
8
|
+
import './components/Configuration.js';
|
|
9
|
+
import './components/NetworkTable.js';
|
|
10
|
+
import './components/NetworkForm.js';
|
|
11
|
+
export declare class AppUi extends LitElement {
|
|
12
|
+
static styles: import("lit").CSSResult;
|
|
13
|
+
components: {
|
|
14
|
+
name: string;
|
|
15
|
+
element: import("lit-html/static.js").StaticValue;
|
|
16
|
+
}[];
|
|
17
|
+
private addWalletExtensionLoaded;
|
|
18
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +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"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
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;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { css, html, LitElement } from 'lit';
|
|
8
|
+
import { discover } from './windows/discovery.js';
|
|
9
|
+
import { customElement } from 'lit/decorators.js';
|
|
10
|
+
export * from './components/AppHeader.js';
|
|
11
|
+
export * from './components/AppLayout.js';
|
|
12
|
+
export * from './components/Discovery.js';
|
|
13
|
+
export * from './windows/discovery.js';
|
|
14
|
+
export * from './windows/popup.js';
|
|
15
|
+
import './components/Discovery.js';
|
|
16
|
+
import './components/Configuration.js';
|
|
17
|
+
import './components/NetworkTable.js';
|
|
18
|
+
import './components/NetworkForm.js';
|
|
19
|
+
import { html as htmlStatic, literal } from 'lit/static-html.js';
|
|
20
|
+
let AppUi = class AppUi extends LitElement {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
|
+
// add new components here to be displayed on the dev page
|
|
24
|
+
this.components = [
|
|
25
|
+
{
|
|
26
|
+
name: 'Discovery.ts',
|
|
27
|
+
element: literal `swk-discovery`,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
name: 'Configuration.ts',
|
|
31
|
+
element: literal `swk-configuration`,
|
|
32
|
+
},
|
|
33
|
+
];
|
|
34
|
+
}
|
|
35
|
+
static { this.styles = css `
|
|
36
|
+
.component {
|
|
37
|
+
padding: 8px;
|
|
38
|
+
border: 1px solid #ccc;
|
|
39
|
+
background-color: #f9f9f9;
|
|
40
|
+
}
|
|
41
|
+
`; }
|
|
42
|
+
addWalletExtensionLoaded() {
|
|
43
|
+
const { shadowRoot } = document.getElementsByTagName('app-ui')[0];
|
|
44
|
+
const discovery = shadowRoot?.querySelector('swk-discovery');
|
|
45
|
+
if (discovery) {
|
|
46
|
+
const existing = discovery.hasAttribute('wallet-extension-loaded');
|
|
47
|
+
if (existing) {
|
|
48
|
+
discovery.removeAttribute('wallet-extension-loaded');
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
discovery.setAttribute('wallet-extension-loaded', '');
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
console.error('Discovery component not found.');
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
render() {
|
|
59
|
+
return html `
|
|
60
|
+
<div>
|
|
61
|
+
<h1>Wallet UI Components Dev Page</h1>
|
|
62
|
+
<p>Click the button below to open the discovery popup.</p>
|
|
63
|
+
<button @click=${discover}>Open Discover Popup</button>
|
|
64
|
+
|
|
65
|
+
<h2>Components</h2>
|
|
66
|
+
|
|
67
|
+
${this.components.map(({ name, element }) => {
|
|
68
|
+
return htmlStatic `
|
|
69
|
+
<h3>${name}</h3>
|
|
70
|
+
<div class="component">
|
|
71
|
+
<${element}></${element}>
|
|
72
|
+
</div>
|
|
73
|
+
<hr/>
|
|
74
|
+
`;
|
|
75
|
+
})}
|
|
76
|
+
|
|
77
|
+
<h2>Helpers</h2>
|
|
78
|
+
|
|
79
|
+
<button @click=${this.addWalletExtensionLoaded}>
|
|
80
|
+
Toggle attribute 'wallet-extension-loaded' to discovery
|
|
81
|
+
</button>
|
|
82
|
+
</div>
|
|
83
|
+
`;
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
AppUi = __decorate([
|
|
87
|
+
customElement('app-ui')
|
|
88
|
+
], AppUi);
|
|
89
|
+
export { AppUi };
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@canton-network/core-wallet-ui-components",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Reusable UI components for the Splice wallet",
|
|
6
|
+
"repository": "https://github.com/hyperledger-labs/splice-wallet-kernel",
|
|
7
|
+
"license": "Apache-2.0",
|
|
8
|
+
"author": "Marc Juchli <marc.juchli@digitalasset.com>",
|
|
9
|
+
"main": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": "./dist/index.js",
|
|
13
|
+
"./themes": "./themes"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "tsc -b",
|
|
17
|
+
"build:watch": "tsc -b --watch",
|
|
18
|
+
"clean": "tsc -b --clean; tsc -b tsconfig.dev.json --clean; rm -rf dist; [ -d public/js ] && rm -rf public/js/* || true",
|
|
19
|
+
"dev": "vite --port 8000"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@types/bootstrap": "^5",
|
|
23
|
+
"typescript": "^5.8.3",
|
|
24
|
+
"vite": "^6.3.5"
|
|
25
|
+
},
|
|
26
|
+
"packageManager": "yarn@4.9.2",
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@canton-network/core-types": "^0.1.0",
|
|
29
|
+
"@canton-network/core-wallet-store": "^0.1.0",
|
|
30
|
+
"@popperjs/core": "^2.11.8",
|
|
31
|
+
"bootstrap": "^5.3.7",
|
|
32
|
+
"lit": "^3.3.0"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist/*"
|
|
36
|
+
],
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
}
|
|
40
|
+
}
|