@onekeyfe/cross-inpage-provider-core 2.0.0-alpha.0 → 2.0.0-alpha.2
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/dist/cjs/notification/icon.js +2 -2
- package/dist/cjs/notification/notification.js +78 -76
- package/dist/cjs/notification/swtichDefaultWalletNotification.js +4 -4
- package/dist/cjs/versionInfo.js +1 -1
- package/dist/notification/icon.d.ts +1 -1
- package/dist/notification/icon.js +1 -1
- package/dist/notification/notification.d.ts +18 -18
- package/dist/notification/notification.js +79 -77
- package/dist/notification/swtichDefaultWalletNotification.js +4 -4
- package/dist/versionInfo.js +1 -1
- package/package.json +5 -5
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.IconLogo = exports.
|
|
4
|
-
exports.
|
|
3
|
+
exports.IconLogo = exports.IconDismiss = void 0;
|
|
4
|
+
exports.IconDismiss = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 4.79289C4.68342 4.40237 5.31658 4.40237 5.70711 4.79289L12 11.0858L18.2929 4.79289C18.6834 4.40237 19.3166 4.40237 19.7071 4.79289C20.0976 5.18342 20.0976 5.81658 19.7071 6.20711L13.4142 12.5L19.7071 18.7929C20.0976 19.1834 20.0976 19.8166 19.7071 20.2071C19.3166 20.5976 18.6834 20.5976 18.2929 20.2071L12 13.9142L5.70711 20.2071C5.31658 20.5976 4.68342 20.5976 4.29289 20.2071C3.90237 19.8166 3.90237 19.1834 4.29289 18.7929L10.5858 12.5L4.29289 6.20711C3.90237 5.81658 3.90237 5.18342 4.29289 4.79289Z' fill='black'/%3E%3C/svg%3E";
|
|
5
5
|
exports.IconLogo = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M10.4987 14.4595C11.3758 14.4595 12.0867 13.7485 12.0867 12.8715C12.0867 11.9945 11.3758 11.2836 10.4987 11.2836C9.62174 11.2836 8.91078 11.9945 8.91078 12.8715C8.91078 13.7485 9.62174 14.4595 10.4987 14.4595Z' fill='black' fill-opacity='0.875'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4987 19.6668C16.827 19.6668 19.6654 16.8284 19.6654 10.5002C19.6654 4.1719 16.827 1.3335 10.4987 1.3335C4.17044 1.3335 1.33203 4.1719 1.33203 10.5002C1.33203 16.8284 4.17044 19.6668 10.4987 19.6668ZM8.77681 5.22049H11.3269V9.42284H9.74582V6.57329H8.32942L8.77681 5.22049ZM10.4988 15.7798C12.105 15.7798 13.407 14.4778 13.407 12.8715C13.407 11.2653 12.105 9.96325 10.4988 9.96325C8.89255 9.96325 7.59046 11.2653 7.59046 12.8715C7.59046 14.4778 8.89255 15.7798 10.4988 15.7798Z' fill='black' fill-opacity='0.875'/%3E%3C/svg%3E";
|
|
@@ -4,84 +4,82 @@ exports.isInSameOriginIframe = void 0;
|
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
5
|
const icon_1 = require("./icon");
|
|
6
6
|
class Notification {
|
|
7
|
-
constructor(
|
|
8
|
-
this.
|
|
9
|
-
this.
|
|
10
|
-
this.
|
|
11
|
-
//
|
|
12
|
-
this.
|
|
13
|
-
// inner
|
|
7
|
+
constructor(settings) {
|
|
8
|
+
this.settings = settings;
|
|
9
|
+
this.element = document.createElement("div");
|
|
10
|
+
this.element.className = `onekey-alert-message ${this.settings.customClass ? this.settings.customClass : ""}`;
|
|
11
|
+
// initialize event handlers
|
|
12
|
+
this.eventHandlers = {};
|
|
13
|
+
// add inner content
|
|
14
14
|
this.insert();
|
|
15
|
-
// auto
|
|
16
|
-
if (this.
|
|
17
|
-
this.
|
|
15
|
+
// start auto-dismiss timer
|
|
16
|
+
if (this.settings.duration) {
|
|
17
|
+
this.initiateTimer();
|
|
18
18
|
}
|
|
19
|
-
// mouse events
|
|
20
|
-
this.
|
|
19
|
+
// mouse interaction events
|
|
20
|
+
this.bindEvents();
|
|
21
21
|
}
|
|
22
22
|
insert() {
|
|
23
23
|
var _a;
|
|
24
|
-
if (!this.
|
|
24
|
+
if (!this.element) {
|
|
25
25
|
return;
|
|
26
26
|
}
|
|
27
|
-
//
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
(_a = this.
|
|
32
|
-
//
|
|
33
|
-
if (this.
|
|
34
|
-
this.
|
|
35
|
-
this.
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
this.
|
|
40
|
-
this.
|
|
27
|
+
// content container
|
|
28
|
+
const contentContainer = document.createElement("div");
|
|
29
|
+
contentContainer.className = "onekey-alert-message-body";
|
|
30
|
+
contentContainer.innerHTML = this.settings.content;
|
|
31
|
+
(_a = this.element) === null || _a === void 0 ? void 0 : _a.appendChild(contentContainer);
|
|
32
|
+
// dismiss button
|
|
33
|
+
if (this.settings.dismissible) {
|
|
34
|
+
this.dismissButton = document.createElement("div");
|
|
35
|
+
this.dismissButton.className = "onekey-alert-message-dismiss";
|
|
36
|
+
const dismissIcon = document.createElement("img");
|
|
37
|
+
dismissIcon.setAttribute("src", icon_1.IconDismiss);
|
|
38
|
+
dismissIcon.className = "onekey-alert-close-icon";
|
|
39
|
+
this.dismissButton.appendChild(dismissIcon);
|
|
40
|
+
this.element.appendChild(this.dismissButton);
|
|
41
41
|
}
|
|
42
|
-
this.
|
|
42
|
+
this.settings.hostElement.appendChild(this.element);
|
|
43
43
|
}
|
|
44
|
-
|
|
44
|
+
bindEvents() {
|
|
45
45
|
var _a;
|
|
46
|
-
this.
|
|
47
|
-
(_a = this.
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
this.
|
|
51
|
-
this.
|
|
52
|
-
},
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
if (this.
|
|
56
|
-
clearTimeout(this.
|
|
57
|
-
this.
|
|
46
|
+
this.eventHandlers.dismiss = () => this.dismiss();
|
|
47
|
+
(_a = this.dismissButton) === null || _a === void 0 ? void 0 : _a.addEventListener("click", this.eventHandlers.dismiss, false);
|
|
48
|
+
}
|
|
49
|
+
initiateTimer(duration = this.settings.duration) {
|
|
50
|
+
this.dismissalTimer = setTimeout(() => {
|
|
51
|
+
this.dismiss();
|
|
52
|
+
}, duration);
|
|
53
|
+
}
|
|
54
|
+
cancelTimer() {
|
|
55
|
+
if (this.dismissalTimer) {
|
|
56
|
+
clearTimeout(this.dismissalTimer);
|
|
57
|
+
this.dismissalTimer = null;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
|
|
61
|
-
if (!this.
|
|
60
|
+
dismiss() {
|
|
61
|
+
if (!this.element) {
|
|
62
62
|
return;
|
|
63
63
|
}
|
|
64
|
-
this.
|
|
65
|
-
|
|
66
|
-
this.
|
|
67
|
-
this.
|
|
68
|
-
|
|
69
|
-
this.options.onHide();
|
|
64
|
+
this.element.classList.add(".onekey-alert-message-hidden");
|
|
65
|
+
this.settings.hostElement.removeChild(this.element);
|
|
66
|
+
this.element = null;
|
|
67
|
+
if (this.settings.onDismiss) {
|
|
68
|
+
this.settings.onDismiss();
|
|
70
69
|
}
|
|
71
|
-
this.
|
|
72
|
-
// }, 300);
|
|
70
|
+
this.cancelTimer();
|
|
73
71
|
}
|
|
74
72
|
}
|
|
75
73
|
let container = null;
|
|
76
74
|
let style = null;
|
|
77
75
|
const styles = `
|
|
78
|
-
.onekey-
|
|
76
|
+
.onekey-alert-container {
|
|
79
77
|
position: fixed;
|
|
80
78
|
z-index: 99999;
|
|
81
79
|
top: 60px;
|
|
82
80
|
right: 42px;
|
|
83
81
|
}
|
|
84
|
-
.onekey-
|
|
82
|
+
.onekey-alert-message {
|
|
85
83
|
min-width: 230px;
|
|
86
84
|
min-height: 44px;
|
|
87
85
|
background: #FFFFFF;
|
|
@@ -104,23 +102,20 @@ const styles = `
|
|
|
104
102
|
|
|
105
103
|
opacity: 1;
|
|
106
104
|
}
|
|
107
|
-
.onekey-
|
|
105
|
+
.onekey-alert-message + .onekey-alert-message {
|
|
108
106
|
margin-top: 30px;
|
|
109
107
|
}
|
|
110
|
-
.onekey-
|
|
108
|
+
.onekey-alert-message-body {
|
|
111
109
|
display: flex;
|
|
112
110
|
align-items: center;
|
|
113
111
|
color: #13141A;
|
|
114
112
|
}
|
|
115
|
-
.onekey-
|
|
113
|
+
.onekey-alert-message-hidden {
|
|
116
114
|
opacity: 0;
|
|
117
115
|
transition: 0.3s;
|
|
118
116
|
}
|
|
119
117
|
|
|
120
|
-
.onekey-
|
|
121
|
-
width: 20px;
|
|
122
|
-
}
|
|
123
|
-
.onekey-notice-close-wrapper {
|
|
118
|
+
.onekey-alert-message-dismiss {
|
|
124
119
|
display: flex;
|
|
125
120
|
justify-content: center;
|
|
126
121
|
align-items: center;
|
|
@@ -128,7 +123,7 @@ const styles = `
|
|
|
128
123
|
height: 32px;
|
|
129
124
|
cursor: pointer;
|
|
130
125
|
}
|
|
131
|
-
.onekey-
|
|
126
|
+
.onekey-alert-close-icon-close {
|
|
132
127
|
flex-shrink: 0;
|
|
133
128
|
width: 24px;
|
|
134
129
|
height: 24px;
|
|
@@ -137,7 +132,7 @@ const styles = `
|
|
|
137
132
|
font-weight: bold;
|
|
138
133
|
color: #13141A;
|
|
139
134
|
}
|
|
140
|
-
.onekey-
|
|
135
|
+
.onekey-alert-default-wallet {
|
|
141
136
|
border-radius: 8px;
|
|
142
137
|
height: 71px;
|
|
143
138
|
|
|
@@ -147,28 +142,35 @@ const styles = `
|
|
|
147
142
|
}
|
|
148
143
|
`;
|
|
149
144
|
function notification(options) {
|
|
150
|
-
const { content = "",
|
|
151
|
-
// timeout = 3000,
|
|
152
|
-
timeout = 0, closeButton = "×", className = "", closeable = false, } = options || {};
|
|
145
|
+
const { content = "", duration = 0, triggerElement = "×", customClass = "", dismissible = false, } = options || {};
|
|
153
146
|
if (!container) {
|
|
147
|
+
const hostElement = document.createElement('div');
|
|
148
|
+
hostElement.id = 'onekey-notification-center';
|
|
149
|
+
const shadowRoot = hostElement.attachShadow({ mode: 'open' });
|
|
154
150
|
container = document.createElement("div");
|
|
155
|
-
container.classList.add("onekey-
|
|
151
|
+
container.classList.add("onekey-alert-container");
|
|
156
152
|
style = document.createElement("style");
|
|
157
153
|
style.innerHTML = styles;
|
|
158
|
-
|
|
159
|
-
|
|
154
|
+
shadowRoot.appendChild(style);
|
|
155
|
+
shadowRoot.appendChild(container);
|
|
156
|
+
document.body.appendChild(hostElement);
|
|
160
157
|
}
|
|
161
158
|
return new Notification({
|
|
162
159
|
content,
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
container,
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
160
|
+
duration,
|
|
161
|
+
triggerElement,
|
|
162
|
+
hostElement: container,
|
|
163
|
+
customClass,
|
|
164
|
+
dismissible,
|
|
165
|
+
onDismiss: () => {
|
|
169
166
|
if (container && !(container === null || container === void 0 ? void 0 : container.hasChildNodes())) {
|
|
170
|
-
|
|
171
|
-
|
|
167
|
+
const rootNode = container.getRootNode();
|
|
168
|
+
if (rootNode instanceof ShadowRoot) {
|
|
169
|
+
document.body.removeChild(rootNode.host);
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
document.body.removeChild(rootNode);
|
|
173
|
+
}
|
|
172
174
|
style = null;
|
|
173
175
|
container = null;
|
|
174
176
|
}
|
|
@@ -28,14 +28,14 @@ const switchDefaultWalletNotification = (isDefaultWallet) => {
|
|
|
28
28
|
return;
|
|
29
29
|
}
|
|
30
30
|
if (instance) {
|
|
31
|
-
instance.
|
|
31
|
+
instance.dismiss();
|
|
32
32
|
instance = null;
|
|
33
33
|
}
|
|
34
34
|
const text = isDefaultWallet ? 'OneKey is your default wallet now.' : 'OneKey Default Canceled';
|
|
35
35
|
instance = (0, notification_1.default)({
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
dismissible: true,
|
|
37
|
+
duration: 0,
|
|
38
|
+
customClass: "onekey-alert-default-wallet",
|
|
39
39
|
content: `<div style="display: flex; align-items: center; gap: 8px;">
|
|
40
40
|
<img style="width: 32px;" src="${icon_1.IconLogo}"/>
|
|
41
41
|
<div>
|
package/dist/cjs/versionInfo.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const IconDismiss = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 4.79289C4.68342 4.40237 5.31658 4.40237 5.70711 4.79289L12 11.0858L18.2929 4.79289C18.6834 4.40237 19.3166 4.40237 19.7071 4.79289C20.0976 5.18342 20.0976 5.81658 19.7071 6.20711L13.4142 12.5L19.7071 18.7929C20.0976 19.1834 20.0976 19.8166 19.7071 20.2071C19.3166 20.5976 18.6834 20.5976 18.2929 20.2071L12 13.9142L5.70711 20.2071C5.31658 20.5976 4.68342 20.5976 4.29289 20.2071C3.90237 19.8166 3.90237 19.1834 4.29289 18.7929L10.5858 12.5L4.29289 6.20711C3.90237 5.81658 3.90237 5.18342 4.29289 4.79289Z' fill='black'/%3E%3C/svg%3E";
|
|
2
2
|
export declare const IconLogo = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M10.4987 14.4595C11.3758 14.4595 12.0867 13.7485 12.0867 12.8715C12.0867 11.9945 11.3758 11.2836 10.4987 11.2836C9.62174 11.2836 8.91078 11.9945 8.91078 12.8715C8.91078 13.7485 9.62174 14.4595 10.4987 14.4595Z' fill='black' fill-opacity='0.875'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4987 19.6668C16.827 19.6668 19.6654 16.8284 19.6654 10.5002C19.6654 4.1719 16.827 1.3335 10.4987 1.3335C4.17044 1.3335 1.33203 4.1719 1.33203 10.5002C1.33203 16.8284 4.17044 19.6668 10.4987 19.6668ZM8.77681 5.22049H11.3269V9.42284H9.74582V6.57329H8.32942L8.77681 5.22049ZM10.4988 15.7798C12.105 15.7798 13.407 14.4778 13.407 12.8715C13.407 11.2653 12.105 9.96325 10.4988 9.96325C8.89255 9.96325 7.59046 11.2653 7.59046 12.8715C7.59046 14.4778 8.89255 15.7798 10.4988 15.7798Z' fill='black' fill-opacity='0.875'/%3E%3C/svg%3E";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const
|
|
1
|
+
export const IconDismiss = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 4.79289C4.68342 4.40237 5.31658 4.40237 5.70711 4.79289L12 11.0858L18.2929 4.79289C18.6834 4.40237 19.3166 4.40237 19.7071 4.79289C20.0976 5.18342 20.0976 5.81658 19.7071 6.20711L13.4142 12.5L19.7071 18.7929C20.0976 19.1834 20.0976 19.8166 19.7071 20.2071C19.3166 20.5976 18.6834 20.5976 18.2929 20.2071L12 13.9142L5.70711 20.2071C5.31658 20.5976 4.68342 20.5976 4.29289 20.2071C3.90237 19.8166 3.90237 19.1834 4.29289 18.7929L10.5858 12.5L4.29289 6.20711C3.90237 5.81658 3.90237 5.18342 4.29289 4.79289Z' fill='black'/%3E%3C/svg%3E";
|
|
2
2
|
export const IconLogo = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M10.4987 14.4595C11.3758 14.4595 12.0867 13.7485 12.0867 12.8715C12.0867 11.9945 11.3758 11.2836 10.4987 11.2836C9.62174 11.2836 8.91078 11.9945 8.91078 12.8715C8.91078 13.7485 9.62174 14.4595 10.4987 14.4595Z' fill='black' fill-opacity='0.875'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4987 19.6668C16.827 19.6668 19.6654 16.8284 19.6654 10.5002C19.6654 4.1719 16.827 1.3335 10.4987 1.3335C4.17044 1.3335 1.33203 4.1719 1.33203 10.5002C1.33203 16.8284 4.17044 19.6668 10.4987 19.6668ZM8.77681 5.22049H11.3269V9.42284H9.74582V6.57329H8.32942L8.77681 5.22049ZM10.4988 15.7798C12.105 15.7798 13.407 14.4778 13.407 12.8715C13.407 11.2653 12.105 9.96325 10.4988 9.96325C8.89255 9.96325 7.59046 11.2653 7.59046 12.8715C7.59046 14.4778 8.89255 15.7798 10.4988 15.7798Z' fill='black' fill-opacity='0.875'/%3E%3C/svg%3E";
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
interface
|
|
1
|
+
interface NotificationSettings {
|
|
2
2
|
content: string;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
triggerElement: HTMLElement | string;
|
|
4
|
+
hostElement: HTMLElement;
|
|
5
|
+
duration: number;
|
|
6
|
+
onDismiss?: () => void;
|
|
7
|
+
customClass?: string;
|
|
8
|
+
dismissible: boolean;
|
|
9
9
|
}
|
|
10
10
|
declare class Notification {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
constructor(
|
|
11
|
+
settings: NotificationSettings;
|
|
12
|
+
element: HTMLDivElement | null;
|
|
13
|
+
eventHandlers: Record<string, (...args: any) => void>;
|
|
14
|
+
dismissButton?: HTMLElement;
|
|
15
|
+
dismissalTimer?: number | null;
|
|
16
|
+
constructor(settings: NotificationSettings);
|
|
17
17
|
insert(): void;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
bindEvents(): void;
|
|
19
|
+
initiateTimer(duration?: number): void;
|
|
20
|
+
cancelTimer(): void;
|
|
21
|
+
dismiss(): void;
|
|
22
22
|
}
|
|
23
|
-
declare function notification(options: Partial<
|
|
23
|
+
declare function notification(options: Partial<NotificationSettings>): Notification;
|
|
24
24
|
export default notification;
|
|
25
25
|
export declare const isInSameOriginIframe: () => boolean;
|
|
@@ -1,84 +1,82 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
-
import {
|
|
2
|
+
import { IconDismiss } from './icon';
|
|
3
3
|
class Notification {
|
|
4
|
-
constructor(
|
|
5
|
-
this.
|
|
6
|
-
this.
|
|
7
|
-
this.
|
|
8
|
-
//
|
|
9
|
-
this.
|
|
10
|
-
// inner
|
|
4
|
+
constructor(settings) {
|
|
5
|
+
this.settings = settings;
|
|
6
|
+
this.element = document.createElement("div");
|
|
7
|
+
this.element.className = `onekey-alert-message ${this.settings.customClass ? this.settings.customClass : ""}`;
|
|
8
|
+
// initialize event handlers
|
|
9
|
+
this.eventHandlers = {};
|
|
10
|
+
// add inner content
|
|
11
11
|
this.insert();
|
|
12
|
-
// auto
|
|
13
|
-
if (this.
|
|
14
|
-
this.
|
|
12
|
+
// start auto-dismiss timer
|
|
13
|
+
if (this.settings.duration) {
|
|
14
|
+
this.initiateTimer();
|
|
15
15
|
}
|
|
16
|
-
// mouse events
|
|
17
|
-
this.
|
|
16
|
+
// mouse interaction events
|
|
17
|
+
this.bindEvents();
|
|
18
18
|
}
|
|
19
19
|
insert() {
|
|
20
20
|
var _a;
|
|
21
|
-
if (!this.
|
|
21
|
+
if (!this.element) {
|
|
22
22
|
return;
|
|
23
23
|
}
|
|
24
|
-
//
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
(_a = this.
|
|
29
|
-
//
|
|
30
|
-
if (this.
|
|
31
|
-
this.
|
|
32
|
-
this.
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
this.
|
|
37
|
-
this.
|
|
24
|
+
// content container
|
|
25
|
+
const contentContainer = document.createElement("div");
|
|
26
|
+
contentContainer.className = "onekey-alert-message-body";
|
|
27
|
+
contentContainer.innerHTML = this.settings.content;
|
|
28
|
+
(_a = this.element) === null || _a === void 0 ? void 0 : _a.appendChild(contentContainer);
|
|
29
|
+
// dismiss button
|
|
30
|
+
if (this.settings.dismissible) {
|
|
31
|
+
this.dismissButton = document.createElement("div");
|
|
32
|
+
this.dismissButton.className = "onekey-alert-message-dismiss";
|
|
33
|
+
const dismissIcon = document.createElement("img");
|
|
34
|
+
dismissIcon.setAttribute("src", IconDismiss);
|
|
35
|
+
dismissIcon.className = "onekey-alert-close-icon";
|
|
36
|
+
this.dismissButton.appendChild(dismissIcon);
|
|
37
|
+
this.element.appendChild(this.dismissButton);
|
|
38
38
|
}
|
|
39
|
-
this.
|
|
39
|
+
this.settings.hostElement.appendChild(this.element);
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
bindEvents() {
|
|
42
42
|
var _a;
|
|
43
|
-
this.
|
|
44
|
-
(_a = this.
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
this.
|
|
48
|
-
this.
|
|
49
|
-
},
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
if (this.
|
|
53
|
-
clearTimeout(this.
|
|
54
|
-
this.
|
|
43
|
+
this.eventHandlers.dismiss = () => this.dismiss();
|
|
44
|
+
(_a = this.dismissButton) === null || _a === void 0 ? void 0 : _a.addEventListener("click", this.eventHandlers.dismiss, false);
|
|
45
|
+
}
|
|
46
|
+
initiateTimer(duration = this.settings.duration) {
|
|
47
|
+
this.dismissalTimer = setTimeout(() => {
|
|
48
|
+
this.dismiss();
|
|
49
|
+
}, duration);
|
|
50
|
+
}
|
|
51
|
+
cancelTimer() {
|
|
52
|
+
if (this.dismissalTimer) {
|
|
53
|
+
clearTimeout(this.dismissalTimer);
|
|
54
|
+
this.dismissalTimer = null;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
|
-
|
|
58
|
-
if (!this.
|
|
57
|
+
dismiss() {
|
|
58
|
+
if (!this.element) {
|
|
59
59
|
return;
|
|
60
60
|
}
|
|
61
|
-
this.
|
|
62
|
-
|
|
63
|
-
this.
|
|
64
|
-
this.
|
|
65
|
-
|
|
66
|
-
this.options.onHide();
|
|
61
|
+
this.element.classList.add(".onekey-alert-message-hidden");
|
|
62
|
+
this.settings.hostElement.removeChild(this.element);
|
|
63
|
+
this.element = null;
|
|
64
|
+
if (this.settings.onDismiss) {
|
|
65
|
+
this.settings.onDismiss();
|
|
67
66
|
}
|
|
68
|
-
this.
|
|
69
|
-
// }, 300);
|
|
67
|
+
this.cancelTimer();
|
|
70
68
|
}
|
|
71
69
|
}
|
|
72
70
|
let container = null;
|
|
73
71
|
let style = null;
|
|
74
72
|
const styles = `
|
|
75
|
-
.onekey-
|
|
73
|
+
.onekey-alert-container {
|
|
76
74
|
position: fixed;
|
|
77
75
|
z-index: 99999;
|
|
78
76
|
top: 60px;
|
|
79
77
|
right: 42px;
|
|
80
78
|
}
|
|
81
|
-
.onekey-
|
|
79
|
+
.onekey-alert-message {
|
|
82
80
|
min-width: 230px;
|
|
83
81
|
min-height: 44px;
|
|
84
82
|
background: #FFFFFF;
|
|
@@ -101,23 +99,20 @@ const styles = `
|
|
|
101
99
|
|
|
102
100
|
opacity: 1;
|
|
103
101
|
}
|
|
104
|
-
.onekey-
|
|
102
|
+
.onekey-alert-message + .onekey-alert-message {
|
|
105
103
|
margin-top: 30px;
|
|
106
104
|
}
|
|
107
|
-
.onekey-
|
|
105
|
+
.onekey-alert-message-body {
|
|
108
106
|
display: flex;
|
|
109
107
|
align-items: center;
|
|
110
108
|
color: #13141A;
|
|
111
109
|
}
|
|
112
|
-
.onekey-
|
|
110
|
+
.onekey-alert-message-hidden {
|
|
113
111
|
opacity: 0;
|
|
114
112
|
transition: 0.3s;
|
|
115
113
|
}
|
|
116
114
|
|
|
117
|
-
.onekey-
|
|
118
|
-
width: 20px;
|
|
119
|
-
}
|
|
120
|
-
.onekey-notice-close-wrapper {
|
|
115
|
+
.onekey-alert-message-dismiss {
|
|
121
116
|
display: flex;
|
|
122
117
|
justify-content: center;
|
|
123
118
|
align-items: center;
|
|
@@ -125,7 +120,7 @@ const styles = `
|
|
|
125
120
|
height: 32px;
|
|
126
121
|
cursor: pointer;
|
|
127
122
|
}
|
|
128
|
-
.onekey-
|
|
123
|
+
.onekey-alert-close-icon-close {
|
|
129
124
|
flex-shrink: 0;
|
|
130
125
|
width: 24px;
|
|
131
126
|
height: 24px;
|
|
@@ -134,7 +129,7 @@ const styles = `
|
|
|
134
129
|
font-weight: bold;
|
|
135
130
|
color: #13141A;
|
|
136
131
|
}
|
|
137
|
-
.onekey-
|
|
132
|
+
.onekey-alert-default-wallet {
|
|
138
133
|
border-radius: 8px;
|
|
139
134
|
height: 71px;
|
|
140
135
|
|
|
@@ -144,28 +139,35 @@ const styles = `
|
|
|
144
139
|
}
|
|
145
140
|
`;
|
|
146
141
|
function notification(options) {
|
|
147
|
-
const { content = "",
|
|
148
|
-
// timeout = 3000,
|
|
149
|
-
timeout = 0, closeButton = "×", className = "", closeable = false, } = options || {};
|
|
142
|
+
const { content = "", duration = 0, triggerElement = "×", customClass = "", dismissible = false, } = options || {};
|
|
150
143
|
if (!container) {
|
|
144
|
+
const hostElement = document.createElement('div');
|
|
145
|
+
hostElement.id = 'onekey-notification-center';
|
|
146
|
+
const shadowRoot = hostElement.attachShadow({ mode: 'open' });
|
|
151
147
|
container = document.createElement("div");
|
|
152
|
-
container.classList.add("onekey-
|
|
148
|
+
container.classList.add("onekey-alert-container");
|
|
153
149
|
style = document.createElement("style");
|
|
154
150
|
style.innerHTML = styles;
|
|
155
|
-
|
|
156
|
-
|
|
151
|
+
shadowRoot.appendChild(style);
|
|
152
|
+
shadowRoot.appendChild(container);
|
|
153
|
+
document.body.appendChild(hostElement);
|
|
157
154
|
}
|
|
158
155
|
return new Notification({
|
|
159
156
|
content,
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
container,
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
157
|
+
duration,
|
|
158
|
+
triggerElement,
|
|
159
|
+
hostElement: container,
|
|
160
|
+
customClass,
|
|
161
|
+
dismissible,
|
|
162
|
+
onDismiss: () => {
|
|
166
163
|
if (container && !(container === null || container === void 0 ? void 0 : container.hasChildNodes())) {
|
|
167
|
-
|
|
168
|
-
|
|
164
|
+
const rootNode = container.getRootNode();
|
|
165
|
+
if (rootNode instanceof ShadowRoot) {
|
|
166
|
+
document.body.removeChild(rootNode.host);
|
|
167
|
+
}
|
|
168
|
+
else {
|
|
169
|
+
document.body.removeChild(rootNode);
|
|
170
|
+
}
|
|
169
171
|
style = null;
|
|
170
172
|
container = null;
|
|
171
173
|
}
|
|
@@ -6,14 +6,14 @@ export const switchDefaultWalletNotification = (isDefaultWallet) => {
|
|
|
6
6
|
return;
|
|
7
7
|
}
|
|
8
8
|
if (instance) {
|
|
9
|
-
instance.
|
|
9
|
+
instance.dismiss();
|
|
10
10
|
instance = null;
|
|
11
11
|
}
|
|
12
12
|
const text = isDefaultWallet ? 'OneKey is your default wallet now.' : 'OneKey Default Canceled';
|
|
13
13
|
instance = notification({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
dismissible: true,
|
|
15
|
+
duration: 0,
|
|
16
|
+
customClass: "onekey-alert-default-wallet",
|
|
17
17
|
content: `<div style="display: flex; align-items: center; gap: 8px;">
|
|
18
18
|
<img style="width: 32px;" src="${IconLogo}"/>
|
|
19
19
|
<div>
|
package/dist/versionInfo.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onekeyfe/cross-inpage-provider-core",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.2",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"cross-inpage-provider"
|
|
6
6
|
],
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"build-version-info": "node ./scripts/buildVersionInfo.js"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@onekeyfe/cross-inpage-provider-errors": "2.0.0-alpha.
|
|
33
|
-
"@onekeyfe/cross-inpage-provider-events": "2.0.0-alpha.
|
|
34
|
-
"@onekeyfe/cross-inpage-provider-types": "2.0.0-alpha.
|
|
32
|
+
"@onekeyfe/cross-inpage-provider-errors": "2.0.0-alpha.2",
|
|
33
|
+
"@onekeyfe/cross-inpage-provider-events": "2.0.0-alpha.2",
|
|
34
|
+
"@onekeyfe/cross-inpage-provider-types": "2.0.0-alpha.2",
|
|
35
35
|
"events": "^3.3.0",
|
|
36
36
|
"lodash": "^4.17.21",
|
|
37
37
|
"ms": "^2.1.3"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "0792eb8ecafd6dfdf58d48cc7c6bc3f89a25cd21"
|
|
40
40
|
}
|