Skip to content

Commit cf88909

Browse files
guru-web3guru-web3
authored
Merge pull request #203 from Web3Auth/feat/ui-comments
Feat/UI comments
2 parents e87f0bd + 2618d23 commit cf88909

File tree

23 files changed

+1146
-183
lines changed

23 files changed

+1146
-183
lines changed

‎demo/redirect-flow-example/public/serviceworker/sw.js‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
/* eslint-disable */
2+
function getScope() {
3+
return self.registration.scope;
4+
}
5+
6+
self.addEventListener("message", function (event) {
7+
if (event.data && event.data.type === "SKIP_WAITING") {
8+
self.skipWaiting();
9+
}
10+
});
11+
12+
self.addEventListener("fetch", function (event) {
13+
try {
14+
const url = new URL(event.request.url);
15+
if (url.pathname.includes("redirect") && url.href.includes(getScope())) {
16+
event.respondWith(
17+
new Response(
18+
new Blob(
19+
[
20+
`
21+
<!DOCTYPE html>
22+
<html lang="en">
23+
<head>
24+
<meta charset="utf-8" />
25+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
26+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
27+
<title>Redirect</title>
28+
<style>
29+
* {
30+
box-sizing: border-box;
31+
}
32+
33+
html,
34+
body {
35+
background: #fcfcfc;
36+
height: 100%;
37+
padding: 0;
38+
margin: 0;
39+
}
40+
41+
.container {
42+
width: 100%;
43+
height: 100%;
44+
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
flex-direction: column;
49+
}
50+
51+
h1.title {
52+
font-size: 14px;
53+
color: #0f1222;
54+
font-family: "Roboto", sans-serif !important;
55+
margin: 0;
56+
text-align: center;
57+
}
58+
59+
.spinner .beat {
60+
background-color: #0364ff;
61+
height: 12px;
62+
width: 12px;
63+
margin: 24px 2px 10px;
64+
border-radius: 100%;
65+
-webkit-animation: beatStretchDelay 0.7s infinite linear;
66+
animation: beatStretchDelay 0.7s infinite linear;
67+
-webkit-animation-fill-mode: both;
68+
animation-fill-mode: both;
69+
display: inline-block;
70+
}
71+
72+
.spinner .beat-odd {
73+
animation-delay: 0s;
74+
}
75+
76+
.spinner .beat-even {
77+
animation-delay: 0.35s;
78+
}
79+
80+
@-webkit-keyframes beatStretchDelay {
81+
50% {
82+
-webkit-transform: scale(0.75);
83+
transform: scale(0.75);
84+
-webkit-opacity: 0.2;
85+
opacity: 0.2;
86+
}
87+
88+
100% {
89+
-webkit-transform: scale(1);
90+
transform: scale(1);
91+
-webkit-opacity: 1;
92+
opacity: 1;
93+
}
94+
}
95+
96+
@keyframes beatStretchDelay {
97+
50% {
98+
-webkit-transform: scale(0.75);
99+
transform: scale(0.75);
100+
-webkit-opacity: 0.2;
101+
opacity: 0.2;
102+
}
103+
104+
100% {
105+
-webkit-transform: scale(1);
106+
transform: scale(1);
107+
-webkit-opacity: 1;
108+
opacity: 1;
109+
}
110+
}
111+
112+
@media (min-width: 768px) {
113+
h1.title {
114+
font-size: 14px;
115+
}
116+
p.info {
117+
font-size: 28px;
118+
}
119+
120+
.spinner .beat {
121+
height: 12px;
122+
width: 12px;
123+
}
124+
}
125+
</style>
126+
</head>
127+
128+
<body>
129+
<div id="message" class="container">
130+
<div class="spinner content" id="spinner">
131+
<div class="beat beat-odd"></div>
132+
<div class="beat beat-even"></div>
133+
<div class="beat beat-odd"></div>
134+
</div>
135+
<h1 class="title content" id="closeText" style="display: none;">You can close this window now</h1>
136+
</div>
137+
<script
138+
src="https://cdn.jsdelivr.net/npm/@toruslabs/[email protected]/dist/broadcastChannel.umd.min.js"
139+
integrity="sha256-q78HZzZl8u46uVK0a+t5vzPyAevMwEWHi43ok+P7/O8="
140+
crossorigin="anonymous"
141+
></script>
142+
<script>
143+
function storageAvailable(type) {
144+
var storage;
145+
try {
146+
storage = window[type];
147+
var x = "__storage_test__";
148+
storage.setItem(x, x);
149+
storage.removeItem(x);
150+
return true;
151+
} catch (e) {
152+
return (
153+
e &&
154+
// everything except Firefox
155+
(e.code === 22 ||
156+
// Firefox
157+
e.code === 1014 ||
158+
// test name field too, because code might not be present
159+
// everything except Firefox
160+
e.name === "QuotaExceededError" ||
161+
// Firefox
162+
e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
163+
// acknowledge QuotaExceededError only if there's something already stored
164+
storage &&
165+
storage.length !== 0
166+
);
167+
}
168+
}
169+
function showCloseText() {
170+
var closeText = document.getElementById("closeText");
171+
var spinner = document.getElementById("spinner");
172+
if (closeText) {
173+
closeText.style.display = "block";
174+
}
175+
if (spinner) {
176+
spinner.style.display = "none";
177+
}
178+
}
179+
var isLocalStorageAvailable = storageAvailable("localStorage");
180+
// set theme
181+
let theme = "light";
182+
if (isLocalStorageAvailable) {
183+
var torusTheme = localStorage.getItem("torus-theme");
184+
if (torusTheme) {
185+
theme = torusTheme.split("-")[0];
186+
}
187+
}
188+
189+
if (theme === "dark") {
190+
document.querySelector("body").style.backgroundColor = "#24252A";
191+
}
192+
var bc;
193+
var broadcastChannelOptions = {
194+
// type: 'localstorage', // (optional) enforce a type, oneOf['native', 'idb', 'localstorage', 'node'
195+
webWorkerSupport: false, // (optional) set this to false if you know that your channel will never be used in a WebWorker (increase performance)
196+
};
197+
var instanceParams = {};
198+
var preopenInstanceId = new URL(window.location.href).searchParams.get("preopenInstanceId");
199+
if (!preopenInstanceId) {
200+
document.getElementById("message").style.visibility = "visible";
201+
// in general oauth redirect
202+
try {
203+
var url = new URL(location.href);
204+
var hash = url.hash.substr(1);
205+
var hashParams = {};
206+
if (hash) {
207+
hashParams = hash.split("&").reduce(function (result, item) {
208+
var parts = item.split("=");
209+
result[parts[0]] = parts[1];
210+
return result;
211+
}, {});
212+
}
213+
var queryParams = {};
214+
for (var key of url.searchParams.keys()) {
215+
queryParams[key] = url.searchParams.get(key);
216+
}
217+
var error = "";
218+
try {
219+
if (Object.keys(hashParams).length > 0 && hashParams.state) {
220+
instanceParams = JSON.parse(base64urlLib.decode(decodeURIComponent(decodeURIComponent(hashParams.state)))) || {};
221+
if (hashParams.error) error = hashParams.error;
222+
} else if (Object.keys(queryParams).length > 0 && queryParams.state) {
223+
instanceParams = JSON.parse(base64urlLib.decode(decodeURIComponent(decodeURIComponent(queryParams.state)))) || {};
224+
if (queryParams.error) error = queryParams.error;
225+
}
226+
} catch (e) {
227+
console.error(e);
228+
}
229+
if (instanceParams.redirectToOpener) {
230+
// communicate to window.opener
231+
window.opener.postMessage(
232+
{
233+
channel: "redirect_channel_" + instanceParams.instanceId,
234+
data: {
235+
instanceParams: instanceParams,
236+
hashParams: hashParams,
237+
queryParams: queryParams,
238+
},
239+
error: error,
240+
},
241+
"http://localhost:3000"
242+
);
243+
} else {
244+
// communicate via broadcast channel
245+
bc = new broadcastChannelLib.BroadcastChannel("redirect_channel_" + instanceParams.instanceId, broadcastChannelOptions);
246+
bc.postMessage({
247+
data: {
248+
instanceParams: instanceParams,
249+
hashParams: hashParams,
250+
queryParams: queryParams,
251+
},
252+
error: error,
253+
}).then(function () {
254+
bc.close();
255+
console.log("posted", {
256+
queryParams,
257+
instanceParams,
258+
hashParams,
259+
});
260+
setTimeout(function () {
261+
window.close();
262+
showCloseText();
263+
}, 5000);
264+
});
265+
}
266+
} catch (err) {
267+
console.error(err, "service worker error in redirect");
268+
bc && bc.close();
269+
window.close();
270+
showCloseText();
271+
}
272+
} else {
273+
// in preopen, awaiting redirect
274+
try {
275+
bc = new broadcastChannelLib.BroadcastChannel("preopen_channel_" + preopenInstanceId, broadcastChannelOptions);
276+
bc.onmessage = function (ev) {
277+
var { preopenInstanceId: oldId, payload, message } = ev.data;
278+
if (oldId === preopenInstanceId && payload && payload.url) {
279+
window.location.href = payload.url;
280+
} else if (oldId === preopenInstanceId && message === "setup_complete") {
281+
bc.postMessage({
282+
data: {
283+
preopenInstanceId: preopenInstanceId,
284+
message: "popup_loaded",
285+
},
286+
});
287+
}
288+
if (ev.error && ev.error !== "") {
289+
console.error(ev.error);
290+
bc.close();
291+
}
292+
};
293+
} catch (err) {
294+
console.error(err, "service worker error in preopen");
295+
bc && bc.close();
296+
window.close();
297+
showCloseText();
298+
}
299+
}
300+
</script>
301+
</body>
302+
</html>
303+
304+
${""}
305+
`,
306+
],
307+
{ type: "text/html" }
308+
)
309+
)
310+
);
311+
}
312+
} catch (error) {
313+
console.error(error);
314+
}
315+
});

0 commit comments

Comments
 (0)