@embarkai/ui-kit 0.1.1
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/LICENSE +21 -0
- package/README.md +977 -0
- package/dist/iframe/_headers +49 -0
- package/dist/iframe/dkls23_wasm_bg.wasm +0 -0
- package/dist/iframe/index.html +881 -0
- package/dist/iframe/kyc/sumsub.html +102 -0
- package/dist/iframe/kyc/sumsub.js +237 -0
- package/dist/iframe/lumia-logo.svg +1 -0
- package/dist/iframe/main.js +5180 -0
- package/dist/iframe/main.js.map +1 -0
- package/dist/iframe/oauth/telegram.html +129 -0
- package/dist/iframe/oauth/telegram.js +112 -0
- package/dist/iframe/oauth/x.html +162 -0
- package/dist/iframe/oauth/x.js +436 -0
- package/dist/index.cjs +21115 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +2719 -0
- package/dist/index.d.ts +2719 -0
- package/dist/index.js +20978 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +96 -0
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Telegram Login - Lumia Passport</title>
|
|
7
|
+
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
17
|
+
background: #000000;
|
|
18
|
+
color: #000000;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
padding: 2rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.container {
|
|
27
|
+
background: white;
|
|
28
|
+
border-radius: 16px;
|
|
29
|
+
padding: 3rem 2rem;
|
|
30
|
+
max-width: 450px;
|
|
31
|
+
width: 100%;
|
|
32
|
+
/* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); */
|
|
33
|
+
text-align: center;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.logo {
|
|
37
|
+
width: 80px;
|
|
38
|
+
height: 80px;
|
|
39
|
+
margin: 0 auto 1.5rem;
|
|
40
|
+
background: #000000;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
font-size: 2.5rem;
|
|
46
|
+
color: white;
|
|
47
|
+
font-weight: bold;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
h1 {
|
|
51
|
+
font-size: 1.75rem;
|
|
52
|
+
margin-bottom: 0.5rem;
|
|
53
|
+
color: #000000;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
p {
|
|
57
|
+
color: rgba(0, 0, 0, 0.6);
|
|
58
|
+
margin-bottom: 2rem;
|
|
59
|
+
line-height: 1.5;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
#telegram-widget-container {
|
|
63
|
+
display: flex;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
align-items: center;
|
|
66
|
+
min-height: 80px;
|
|
67
|
+
margin: 2rem 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.loading {
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-direction: column;
|
|
73
|
+
align-items: center;
|
|
74
|
+
gap: 1rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.spinner {
|
|
78
|
+
width: 40px;
|
|
79
|
+
height: 40px;
|
|
80
|
+
border: 4px solid rgba(201, 201, 201, 0.3);
|
|
81
|
+
border-top-color: rgb(201, 201, 201);
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
animation: spin 1s linear infinite;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes spin {
|
|
87
|
+
to {
|
|
88
|
+
transform: rotate(360deg);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.error {
|
|
93
|
+
background: #d6204e;
|
|
94
|
+
border-radius: 10px;
|
|
95
|
+
padding: 1rem;
|
|
96
|
+
color: #000000;
|
|
97
|
+
margin-top: 1rem;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.footer {
|
|
101
|
+
margin-top: 2rem;
|
|
102
|
+
padding-top: 1.5rem;
|
|
103
|
+
border-top: 1px solid rgb(201, 201, 201);
|
|
104
|
+
font-size: 0.875rem;
|
|
105
|
+
color: rgba(0, 0, 0, 0.4);
|
|
106
|
+
}
|
|
107
|
+
</style>
|
|
108
|
+
</head>
|
|
109
|
+
<body>
|
|
110
|
+
<div class="container">
|
|
111
|
+
<div class="logo">L</div>
|
|
112
|
+
<h1>Sign in with Telegram</h1>
|
|
113
|
+
<p>Click the button below to authenticate with your Telegram account</p>
|
|
114
|
+
|
|
115
|
+
<div id="telegram-widget-container">
|
|
116
|
+
<div class="loading">
|
|
117
|
+
<div class="spinner"></div>
|
|
118
|
+
<p>Loading Telegram widget...</p>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="footer">
|
|
123
|
+
<p>You can close this window after authentication</p>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<script src="./telegram.js"></script>
|
|
128
|
+
</body>
|
|
129
|
+
</html>
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Telegram OAuth Popup Script
|
|
3
|
+
* Handles Telegram Login Widget integration in popup window
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// Get bot username from URL parameter
|
|
7
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
8
|
+
const BOT_USERNAME = urlParams.get('bot');
|
|
9
|
+
|
|
10
|
+
console.log('[Telegram OAuth] Initializing with bot:', BOT_USERNAME);
|
|
11
|
+
|
|
12
|
+
// Setup callback for Telegram widget
|
|
13
|
+
window.onTelegramAuth = function(user) {
|
|
14
|
+
console.log('[Telegram OAuth] Authentication successful:', user);
|
|
15
|
+
|
|
16
|
+
try {
|
|
17
|
+
// Send data to opener window
|
|
18
|
+
if (window.opener) {
|
|
19
|
+
window.opener.postMessage({
|
|
20
|
+
type: 'TELEGRAM_AUTH_SUCCESS',
|
|
21
|
+
provider: 'telegram',
|
|
22
|
+
user: user
|
|
23
|
+
}, '*');
|
|
24
|
+
|
|
25
|
+
// Show success message
|
|
26
|
+
const container = document.getElementById('telegram-widget-container');
|
|
27
|
+
if (container) {
|
|
28
|
+
container.innerHTML = `
|
|
29
|
+
<div style="color: #10b981; font-weight: 500;">
|
|
30
|
+
✓ Authentication successful!<br>
|
|
31
|
+
<small style="color: #666;">Closing window...</small>
|
|
32
|
+
</div>
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Close popup after short delay
|
|
37
|
+
setTimeout(() => {
|
|
38
|
+
window.close();
|
|
39
|
+
}, 1500);
|
|
40
|
+
} else {
|
|
41
|
+
throw new Error('No opener window found');
|
|
42
|
+
}
|
|
43
|
+
} catch (error) {
|
|
44
|
+
console.error('[Telegram OAuth] Error:', error);
|
|
45
|
+
showError('Failed to communicate with parent window');
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
function showError(message) {
|
|
50
|
+
const container = document.getElementById('telegram-widget-container');
|
|
51
|
+
if (container) {
|
|
52
|
+
container.innerHTML = `
|
|
53
|
+
<div class="error">
|
|
54
|
+
<strong>Error:</strong> ${message}
|
|
55
|
+
</div>
|
|
56
|
+
`;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Load Telegram Login Widget
|
|
61
|
+
function loadTelegramWidget() {
|
|
62
|
+
if (!BOT_USERNAME) {
|
|
63
|
+
showError('Bot username not configured. Pass ?bot=username in URL parameter.');
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const container = document.getElementById('telegram-widget-container');
|
|
68
|
+
if (!container) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Clear loading indicator
|
|
73
|
+
container.innerHTML = '';
|
|
74
|
+
|
|
75
|
+
// Create script element for Telegram widget
|
|
76
|
+
const script = document.createElement('script');
|
|
77
|
+
script.async = true;
|
|
78
|
+
script.src = 'https://telegram.org/js/telegram-widget.js?22';
|
|
79
|
+
script.setAttribute('data-telegram-login', BOT_USERNAME);
|
|
80
|
+
script.setAttribute('data-size', 'large');
|
|
81
|
+
script.setAttribute('data-userpic', 'true');
|
|
82
|
+
script.setAttribute('data-onauth', 'onTelegramAuth(user)');
|
|
83
|
+
script.setAttribute('data-request-access', 'write');
|
|
84
|
+
|
|
85
|
+
script.onload = () => {
|
|
86
|
+
console.log('[Telegram OAuth] Widget loaded successfully');
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
script.onerror = (error) => {
|
|
90
|
+
console.error('[Telegram OAuth] Failed to load widget:', error);
|
|
91
|
+
showError('Failed to load Telegram widget');
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
container.appendChild(script);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Load widget when DOM is ready
|
|
98
|
+
if (document.readyState === 'loading') {
|
|
99
|
+
document.addEventListener('DOMContentLoaded', loadTelegramWidget);
|
|
100
|
+
} else {
|
|
101
|
+
loadTelegramWidget();
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Handle popup closing without authentication
|
|
105
|
+
window.addEventListener('beforeunload', () => {
|
|
106
|
+
if (window.opener) {
|
|
107
|
+
window.opener.postMessage({
|
|
108
|
+
type: 'TELEGRAM_AUTH_CANCELLED',
|
|
109
|
+
provider: 'telegram'
|
|
110
|
+
}, '*');
|
|
111
|
+
}
|
|
112
|
+
});
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>X (Twitter) Login - Lumia Passport</title>
|
|
7
|
+
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
17
|
+
background: #000000;
|
|
18
|
+
color: #000000;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
padding: 2rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.container {
|
|
27
|
+
background: white;
|
|
28
|
+
border-radius: 16px;
|
|
29
|
+
padding: 3rem 2rem;
|
|
30
|
+
max-width: 450px;
|
|
31
|
+
width: 100%;
|
|
32
|
+
text-align: center;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.logo {
|
|
36
|
+
width: 80px;
|
|
37
|
+
height: 80px;
|
|
38
|
+
margin: 0 auto 1.5rem;
|
|
39
|
+
background: #000000;
|
|
40
|
+
border-radius: 50%;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
font-size: 2.5rem;
|
|
45
|
+
color: white;
|
|
46
|
+
font-weight: bold;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
h1 {
|
|
50
|
+
font-size: 1.75rem;
|
|
51
|
+
margin-bottom: 0.5rem;
|
|
52
|
+
color: #000000;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
p {
|
|
56
|
+
color: rgba(0, 0, 0, 0.6);
|
|
57
|
+
margin-bottom: 2rem;
|
|
58
|
+
line-height: 1.5;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#content {
|
|
62
|
+
min-height: 120px;
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
justify-content: center;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: 1rem;
|
|
68
|
+
margin: 2rem 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.loading {
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
align-items: center;
|
|
75
|
+
gap: 1rem;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.spinner {
|
|
79
|
+
width: 40px;
|
|
80
|
+
height: 40px;
|
|
81
|
+
border: 4px solid rgba(201, 201, 201, 0.3);
|
|
82
|
+
border-top-color: rgb(201, 201, 201);
|
|
83
|
+
border-radius: 50%;
|
|
84
|
+
animation: spin 1s linear infinite;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@keyframes spin {
|
|
88
|
+
to {
|
|
89
|
+
transform: rotate(360deg);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.error {
|
|
94
|
+
background: #d6204e;
|
|
95
|
+
border-radius: 10px;
|
|
96
|
+
padding: 1rem;
|
|
97
|
+
color: #000000;
|
|
98
|
+
margin-top: 1rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.success {
|
|
102
|
+
background: #21ff51;
|
|
103
|
+
border-radius: 10px;
|
|
104
|
+
padding: 1rem;
|
|
105
|
+
color: #000000;
|
|
106
|
+
margin-top: 1rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.footer {
|
|
110
|
+
margin-top: 2rem;
|
|
111
|
+
padding-top: 1.5rem;
|
|
112
|
+
border-top: 1px solid rgb(201, 201, 201);
|
|
113
|
+
font-size: 0.875rem;
|
|
114
|
+
color: #999;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.retry-button {
|
|
118
|
+
background: #000000;
|
|
119
|
+
color: white;
|
|
120
|
+
border: none;
|
|
121
|
+
padding: 0.75rem 1.5rem;
|
|
122
|
+
border-radius: 8px;
|
|
123
|
+
font-size: 1rem;
|
|
124
|
+
cursor: pointer;
|
|
125
|
+
margin-top: 1rem;
|
|
126
|
+
transition: background 0.2s;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.retry-button:hover {
|
|
130
|
+
opacity: 0.6;
|
|
131
|
+
}
|
|
132
|
+
.retry-button:active {
|
|
133
|
+
opacity: 0.4;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.retry-button:disabled {
|
|
137
|
+
opacity: 0.4;
|
|
138
|
+
cursor: not-allowed;
|
|
139
|
+
}
|
|
140
|
+
</style>
|
|
141
|
+
</head>
|
|
142
|
+
<body>
|
|
143
|
+
<div class="container">
|
|
144
|
+
<div class="logo">𝕏</div>
|
|
145
|
+
<h1>Sign in with X</h1>
|
|
146
|
+
<p>Redirecting to X (Twitter) for authentication...</p>
|
|
147
|
+
|
|
148
|
+
<div id="content">
|
|
149
|
+
<div class="loading">
|
|
150
|
+
<div class="spinner"></div>
|
|
151
|
+
<p>Initializing OAuth flow...</p>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div class="footer">
|
|
156
|
+
<p>You can close this window after authentication</p>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<script src="./x.js"></script>
|
|
161
|
+
</body>
|
|
162
|
+
</html>
|