@ -9,24 +9,43 @@
// according to those terms. // according to those terms.
--> -->
<!--
The Login Procedure.
Has multiple states (steps) through the user flow.
-->
< script lang = "ts" > < script lang = "ts" >
import { Alert , Toggle } from "flowbite-svelte"; import { Alert , Toggle , Button } from "flowbite-svelte";
import { onMount , createEventDispatcher , tick } from "svelte"; import { onMount , createEventDispatcher , tick } from "svelte";
import ng from "../api"; import ng from "../api";
import { emoji_cat , emojis , load_svg } from "../wallet_emojis"; import { emoji_cat , emojis , load_svg } from "../wallet_emojis";
import { PuzzlePiece } from "svelte-heros-v2"; import {
PuzzlePiece,
XCircle,
Backspace,
ArrowPath,
LockOpen,
Key,
CheckCircle,
ArrowLeft,
} from "svelte-heros-v2";
import PasswordInput from "./components/PasswordInput.svelte";
//import Worker from "../worker.js?worker&inline"; //import Worker from "../worker.js?worker&inline";
export let wallet; export let wallet;
export let for_import = false; export let for_import = false;
let top;
function scrollToTop() {
top.scrollIntoView();
}
let tauri_platform = import.meta.env.TAURI_PLATFORM; let tauri_platform = import.meta.env.TAURI_PLATFORM;
let mobile = tauri_platform == "android" || tauri_platform == "ios";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
onMount(async () => { onMount(async () => {
loaded = false; loaded = false;
await load_svg(); load_svg();
//console.log(wallet); //console.log(wallet);
await init(); await init();
}); });
@ -46,16 +65,28 @@
} }
emojis2 = emojis2; emojis2 = emojis2;
display = 0; pazzlePage = 0;
selection = []; selection = [];
error = undefined; error = undefined;
scrollToTop();
// This is only for awaiting that SVGs are loaded.
await load_svg();
loaded = true; loaded = true;
} }
function letsgo() { function start_with_pazz le() {
loaded = false; loaded = false;
step = "pazzle"; step = "pazzle";
unlockWith = "pazzle";
scrollToTop();
}
function start_with_mnemonic() {
loaded = false;
step = "mnemonic";
unlockWith = "mnemonic";
scrollToTop();
} }
let emojis2 = []; let emojis2 = [];
@ -68,29 +99,33 @@
let pazzle_length = 9; let pazzle_length = 9;
let display = 0; let pazzlePage = 0;
let selection = []; /** The selected emojis by category (one for each pazzle page). First will be the selected of first pazzle page. */
let selection = [].fill(null, 0, pazzle_length);
let pin_code = []; let pin_code = [];
/** The selected order from the order page. */
let ordered = []; let ordered = [];
let last_one = {} ;
let shuffle_pin; let shuffle_pin;
let error; let error;
let trusted = false; let trusted = true;
let mnemonic = "";
let unlockWith: "pazzle" | "mnemonic" | undefined;
function order() { function order() {
step = "order"; step = "order";
ordered = []; ordered = [];
last_one = {} ; // In case, this is called by the cancel button, we need to reset the selection.
for (let i = 0; i < pazzle_length ; i ++) { selection.forEach((emoji) => (emoji.sel = undefined));
last_one[i] = true ; selection = selection ;
} scrollToTop();
} }
async function start_pin() { async function start_pin() {
@ -101,20 +136,19 @@
//console.log(shuffle_pin); //console.log(shuffle_pin);
} }
/** Called on selecting emoji in a category. */
function select(val) { function select(val) {
//console.log(emojis2[display][val]); //console.log(emojis2[display][val]);
let cat_idx = shuffle.category_indices[display ]; let cat_idx = shuffle.category_indices[pazzlePage ];
let cat = emojis[emoji_cat[cat_idx]]; let cat = emojis[emoji_cat[cat_idx]];
let idx = shuffle.emoji_indices[display][val]; let idx = shuffle.emoji_indices[pazzlePage][val];
//console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code);
selection.push({ cat : cat_idx , index : idx } ); selection[pazzlePage] = { cat : cat_idx , index : idx } ;
//console.log(selection);
if (display == pazzle_length - 1) { if (pazzlePage == pazzle_length - 1) {
order(); order();
} else { } else {
display = display + 1; pazzlePage = pazzlePage + 1;
} }
} }
@ -122,22 +156,23 @@
step = "opening"; step = "opening";
let pazzle = []; let pazzle = [];
for (const emoji of ordered) { for (const emoji of ordered) {
pazzle.push((emoji.cat < < 4 ) + emoji . index ) ; pazzle.push((emoji.cat < < 4 ) + emoji . index ) ;
} }
//console.log(pazzle); const mnemonic_words = mnemonic.split(" ");
//console.log(wallet);
// open the wallet // open the wallet
try { try {
if (tauri_platform) { if (tauri_platform) {
let opened_wallet = await ng.wallet_open_with_pazzle( let opened_wallet =
wallet, unlockWith === "pazzle"
pazzle, ? await ng.wallet_open_with_pazzle(wallet, pazzle, pin_code)
pin_code : await ng.wallet_open_with_mnemonic_words(
); wallet,
mnemonic_words,
pin_code
);
// try { // try {
// let client = await ng.wallet_was_opened(opened_wallet); // let client = await ng.wallet_was_opened(opened_wallet);
// opened_wallet.V0.client = client; // opened_wallet.V0.client = client;
@ -172,7 +207,11 @@
myWorker.onmessage = async (msg) => { myWorker.onmessage = async (msg) => {
//console.log("Message received from worker", msg.data); //console.log("Message received from worker", msg.data);
if (msg.data.loaded) { if (msg.data.loaded) {
myWorker.postMessage({ wallet , pazzle , pin_code } ); if (unlockWith === "pazzle") {
myWorker.postMessage({ wallet , pazzle , pin_code } );
} else {
myWorker.postMessage({ wallet , mnemonic_words , pin_code } );
}
//console.log("postMessage"); //console.log("postMessage");
} else if (msg.data.success) { } else if (msg.data.success) {
//console.log(msg.data); //console.log(msg.data);
@ -214,23 +253,17 @@
dispatch("cancel"); dispatch("cancel");
} }
async function pin(val) { async function on_pin_key(val) {
//console.log(val); pin_code = [...pin_code, val];
pin_code.push(val);
if (pin_code.length == 4) {
await finish();
}
} }
async function select_order(val, pos) { async function select_order(val) {
delete last_one[pos];
//console.log(last_one);
//console.log(val);
ordered.push(val); ordered.push(val);
val.sel = ordered.length; val.sel = ordered.length;
selection = selection; selection = selection;
if (ordered.length == pazzle_length - 1) { if (ordered.length == pazzle_length - 1) {
let last = selection[Object.keys(last_one)[0]] ; let last = selection.find((emoji) => !emoji.sel) ;
ordered.push(last); ordered.push(last);
last.sel = ordered.length; last.sel = ordered.length;
selection = selection; selection = selection;
@ -238,52 +271,379 @@
await start_pin(); await start_pin();
} }
} }
function go_back() {
if (step === "mnemonic") {
init();
} else if (step === "pazzle") {
// Go to previous pazzle or init page, if on first pazzle.
if (pazzlePage === 0) {
init();
} else {
pazzlePage -= 1;
}
} else if (step === "order") {
if (ordered.length === 0) {
step = "pazzle";
} else {
const last_selected = ordered.pop();
last_selected.sel = null;
ordered = ordered;
selection = selection;
}
} else if (step === "pin") {
if (pin_code.length === 0) {
if (unlockWith === "mnemonic") {
start_with_mnemonic();
} else {
// Unselect the last two elements.
const to_unselect = ordered.slice(-2);
to_unselect.forEach((val) => {
val.sel = null;
});
ordered = ordered.slice(0, -2);
selection = selection;
step = "order";
}
} else {
pin_code = pin_code.slice(0, pin_code.length - 1);
}
}
}
let width: number;
let height: number;
const breakPointWidth: number = 535;
const breakPointHeight: number = 1005;
let mobile = false;
$: if (width >= breakPointWidth && height >= breakPointHeight) {
mobile = false;
} else {
mobile = true;
}
< / script > < / script >
{ #if step == "load" } < div
< div class = " max-w-xl lg:px-8 mx-auto px-4 mt-10" > class="flex-col justify-center md:max-w-2xl py-4 sm:px-8"
< h2 class = "pb-5 text-xl" > How to open your wallet, step by step :< / h2 > class:h-screen={ step !== "load" && height > 660 }
< ul class = "mb-8 ml-3 space-y-4 text-left list-decimal" > class:flex={ height > 660 }
< li > bind:this={ top }
For each one of the 9 categories of images, you will be presented with >
the 15 possible image choices. The categories are shuffled at every { #if step == "load" }
login. They will not always appear in the same order. < div class = "flex flex-col justify-center p-4 pt-6" >
< / li > < h2 class = "pb-5 text-xl self-start" >
< li > How to open your wallet? You have 2 options:
At each category, only one of the 15 displayed choices is the correct < / h2 >
image that belongs to your pazzle. Find it and tap or click on that one. < h3 class = "pb-2 text-lg self-start" > With your Pazzle< / h3 >
The 15 images are shuffled too, they will not appear at the same < ul class = "mb-8 ml-3 space-y-4 text-justify text-sm list-decimal" >
position at each login. On a computer, you can also use the tab key on < li >
your keyboard to move to the desired item on the screen, then press the For each one of the 9 categories of images, you will be presented with
space bar to select each one. the 15 possible image choices. The categories are shuffled at every
< / li > login. They will not always appear in the same order.
< li > < / li >
Once you completed the last category, you will be presented with all the < li >
images you have previously selected. Their order is displayed as it was At each category, only one of the 15 displayed choices is the correct
when you picked them. But this is not the correct order of the images in image that belongs to your pazzle. Find it and tap or click on that
your pazzle. You now have to order them correctly. one. The 15 images are shuffled too, they will not appear at the same
< / li > position at each login. On a computer, you can also use the tab key on
< li > your keyboard to move to the desired item on the screen, then press
You must remember which image should be the first one in your pazzle. the space bar to select each one.
Find it on the screen and click or tap on it. It will be greyed out and < / li >
the number 1 will appear on top of it. < li >
< / li > Once you completed the last category, you will be presented with all
< li > the images you have previously selected. Their order is displayed as
Move on to the second image of your pazzle (that you memorized). Find it it was when you picked them. But this is not the correct order of the
on the screen and tap on it. Repeat this step until you reached the last images in your pazzle. You now have to order them correctly.
image. < / li >
< / li > < li >
< li > You must remember which image should be the first one in your pazzle.
Finally, your PIN code will be asked. enter it by clicking or tapping on Find it on the screen and click or tap on it. It will be greyed out
the digits. and the number 1 will appear on top of it.
< / li > < / li >
< / ul > < li >
< / div > Move on to the second image of your pazzle (that you memorized). Find
< div class = " max-w-xl lg:px-8 mx-auto px-4 text-primary-700" > it on the screen and tap on it. Repeat this step until you reached the
{ #if ! loaded } last image.
Loading pazzle... < / li >
< li >
Finally, your PIN code will be asked. enter it by clicking or tapping
on the digits.
< / li >
< / ul >
< h3 class = "pb-2 text-lg self-start" >
With your 12 words Mnemonic (passphrase)
< / h3 >
< ul class = "mb-8 ml-3 space-y-4 text-justify text-sm list-decimal" >
< li >
Enter your twelve words mnemonic in the input field. The words must be
separated by spaces.
< / li >
< li > Enter the PIN code that you chose when you created your wallet.< / li >
< / ul >
<!-- Save wallet? -->
{ #if for_import }
< div class = "max-w-xl lg:px-8 mx-auto px-4 mb-2" >
< span class = "text-xl" > Do you trust this device? < / span > < br / >
< p class = "text-sm" >
If you do, if this device is yours or is used by few trusted persons
of your family or workplace, and you would like to login again from
this device in the future, then you can save your wallet on this
device. To the contrary, if this device is public and shared by
strangers, do not save your wallet here. { #if ! tauri_platform } By
selecting this option, you agree to saving some cookies on your
browser.{ /if } < br />
< / p >
< div class = "flex justify-center items-center my-4" >
< Toggle class = "" bind:checked = { trusted }
>Yes, save my wallet on this device< /Toggle
>
< / div >
< / div >
{ /if }
< div class = " max-w-xl lg:px-8 mx-auto px-4 text-primary-700" >
< div class = "flex flex-col justify-centerspace-x-12 mt-4 mb-4" >
{ #if ! loaded }
Loading pazzle...
< svg
class="animate-spin my-4 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
< circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
< path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
< / svg >
{ : else }
< button
on:click={ start_with_pazzle }
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
>
< PuzzlePiece
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>
Open with Pazzle!
< / button >
{ /if }
< button
on:click={ cancel }
class="mt-3 mb-2 text-gray-500 dark:text-gray-400 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
>< ArrowLeft
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel login< /button
>
< span
on:click={ start_with_mnemonic }
on:keypress={ start_with_mnemonic }
role="link"
tabindex="0"
class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer"
>
Open with Mnemonic instead
< / span >
< / div >
< / div >
< / div >
<!-- The following steps have navigation buttons and fixed layout -->
{ :else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic" }
< div
class="flex-col justify-center h-screen"
class:flex={ height > 660 }
class:min-w-[310px]={ mobile }
class:min-w-[500px]={ ! mobile }
class:max-w-[370px]={ mobile }
class:max-w-[600px]={ ! mobile }
>
< div class = "mt-auto flex flex-col justify-center" >
<!-- Unlock Screens -->
{ #if step == "mnemonic" }
< form on:submit | preventDefault = { start_pin } >
< label
for="mnemonic-input"
class="block mb-2 text-xl text-gray-900 dark:text-white"
>Enter your 12 words mnemonic< /label
>
< PasswordInput
id="mnemonic-input"
placeholder="12 words separated by spaces"
bind:value={ mnemonic }
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
auto_complete="mnemonic"
/>
< div class = "flex" >
< Button
type="submit"
class="mt-3 mb-2 ml-auto text-white bg-primary-700 disabled:opacity-65 focus:ring-4 focus:ring-blue-500 focus:border-blue-500 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-500 dark:focus:border-blue-500"
on:click={ start_pin }
disabled={ mnemonic . split ( " " ). length !== 12 }
>< CheckCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Confirm< /Button
>
< / div >
< / form >
{ :else if step == "pazzle" }
< p class = "max-w-xl mx-auto lg:max-w-2xl" >
< span class = "text-xl" >
<!-- TODO: Internationalization -->
Select your emoji of category:< br /> { emoji_cat [
shuffle.category_indices[pazzlePage]
]}< /span
>
< / p >
{ #each [ 0 , 1 , 2 , 3 , 4 ] as row }
< div class = "columns-3 gap-0" >
{ #each emojis2 [ pazzlePage ] ? . slice ( 0 + row * 3 , 3 + row * 3 ) || [] as emoji , i ( pazzlePage + "-" + row + "-" + i )}
< div
role="button"
tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select ( row * 3 + i )}
on:keypress={() => select ( row * 3 + i )}
>
< svelte:component this = { emoji . svg ? . default } / >
< / div >
{ /each }
< / div >
{ /each }
{ :else if step == "order" }
< p class = "max-w-xl mx-auto lg:max-w-2xl mb-2" >
< span class = "text-xl" > Select each image in the correct order< / span >
< / p >
{ #each [ 0 , 1 , 2 ] as row }
< div class = "columns-3 gap-0" >
{ #each selection . slice ( 0 + row * 3 , 3 + row * 3 ) || [] as emoji , i }
{ #if ! emoji . sel }
< div
role="button"
tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select_order ( emoji )}
on:keypress={() => select_order ( emoji )}
>
< svelte:component
this={ emojis [ emoji_cat [ emoji . cat ]][ emoji . index ]. svg
?.default}
/>
< / div >
{ : else }
< div
class="w-full aspect-square opacity-25 select-none sel-emoji"
>
< svelte:component
this={ emojis [ emoji_cat [ emoji . cat ]][ emoji . index ]. svg
?.default}
/>
< span
class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
class:text-[8em]={ ! mobile }
class:text-[6em]={ mobile } >{ emoji . sel } < /span
>
< / div >
{ /if }
{ /each }
< / div >
{ /each }
{ :else if step == "pin" }
< p class = "items-center" >
< span class = "text-xl" > Enter your PIN code< / span >
< / p >
<!-- Chrome requires the columns - 3 __flex__ to be set, or else it wraps the lines incorrectly.
However, this leads to the width decreasing and the buttons come together in mobile view.
So we need a way to fix the width across all screens. -->
{ #each [ 0 , 1 , 2 ] as row }
< div class = "columns-3 flex" >
{ #each shuffle_pin . slice ( 0 + row * 3 , 3 + row * 3 ) as num }
< button
tabindex="0"
class="pindigit m-1 disabled:opacity-15 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
class:h-[160px]={ ! mobile }
class:h-[100px]={ mobile }
class:text-8xl={ ! mobile }
on:click={ async () => await on_pin_key ( num )}
disabled={ pin_code . length >= 4 }
>
< span > { num } </ span >
< / button >
{ /each }
< / div >
{ /each }
< div class = "columns-3 flex" >
< div class = "m-1 w-full aspect-square" / >
< button
tabindex="0"
class="pindigit disabled:opacity-15 m-1 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
class:h-[160px]={ ! mobile }
class:h-[100px]={ mobile }
class:text-8xl={ ! mobile }
on:click={ async () => await on_pin_key ( shuffle_pin [ 9 ])}
disabled={ pin_code . length >= 4 }
>
< span > { shuffle_pin [ 9 ]} </ span >
< / button >
< Button
tabindex="0"
class="w-full bg-green-300 hover:bg-green-300/90 enabled:animate-bounce disabled:bg-gray-200 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 aspect-square border-0"
on:click={ async () => await finish ()}
disabled={ pin_code . length < 4 }
>
< LockOpen
tabindex="-1"
class="w-[50%] h-[50%] transition duration-75 focus:outline-none select-none group-hover:text-gray-900 dark:group-hover:text-white"
/>
< / Button >
< / div >
< span class = "mt-3 text-9xl min-h-[8rem] text-center"
>{ #each pin_code as pin_key } *{ /each } < /span
>
{ /if }
< / div >
<!-- Navigation Buttons for pazzle, order pin, mnemonic -->
< div class = "flex justify-between mb-6 mt-auto" >
< button
on:click={ cancel }
class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
>< XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel< /button
>
< button
class="mt-1 ml-2 min-w-[141px] focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
on:click={ go_back }
>< Backspace
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>{ #if step === "mnemonic" || ( step === "pazzle" && pazzlePage === 0 )} Go
back{ : else } Correct{ /if } < /button
>
< / div >
< / div >
{ :else if step == "opening" }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-primary-700" >
Opening your wallet...< br / >
Please wait
< svg < svg
class="animate-spin my-4 h-14 w-14 mx-auto" class="animate-spin mt-10 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@ -303,213 +663,97 @@
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/> />
< / svg > < / svg >
{ : else }
< button
on:click={ letsgo }
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
>
< PuzzlePiece
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
/>
Open my wallet now!
< / button >
{ /if }
< / div >
{ #if for_import }
< div class = " max-w-xl lg:px-8 mx-auto px-4 mb-8" >
< span class = "text-xl" > Do you trust this device? < / span > < br / >
< div class = "flex justify-center items-center my-4" >
< Toggle class = "" bind:checked = { trusted }
>Yes, save my wallet on this device< /Toggle
>
< / div >
< p class = "text-sm" >
If you do, if this device is yours or is used by few trusted persons of
your family or workplace, and you would like to login again from this
device in the future, then you can save your wallet on this device. To
the contrary, if this device is public and shared by strangers, do not
save your wallet here. { #if ! tauri_platform } By selecting this option,
you agree to save some cookies on your browser.{ /if } < br />
< / p >
< / div > < / div >
{ /if } { :else if step == "end" }
{ :else if step == "pazzle" } { #if error }
< div < div class = " max-w-6xl lg:px-8 mx-auto text-red-800" >
class="h-screen aspect-[3/5] pazzleline" < div class = "mt-auto max-w-6xl lg:px-8" >
class:min-w-[310px]={ mobile } An error occurred !
class:min-w-[500px]={ ! mobile } < svg
class:max-w-[360px]={ mobile } fill="none"
class:max-w-[600px]={ ! mobile } class="animate-bounce mt-10 h-10 w-10 mx-auto"
> stroke="currentColor"
{ #each [ 0 , 1 , 2 , 3 , 4 ] as row } stroke-width="1.5"
< div class = "columns-3 gap-0" > viewBox="0 0 24 24"
{ #each emojis2 [ display ] ? . slice ( 0 + row * 3 , 3 + row * 3 ) || [] as emoji , i } xmlns="http://www.w3.org/2000/svg"
< div aria-hidden="true"
role="button"
tabindex="0"
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select ( row * 3 + i )}
on:keypress={() => select ( row * 3 + i )}
> >
< svelte:component this = { emoji . svg ? . default } / > < path
< / div > stroke-linecap="round"
{ /each } stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
< / svg >
< Alert color = "red" class = "mt-5" >
{ error }
< / Alert >
< / div >
< div class = "flex justify-between mt-auto gap-4" >
< button
on:click={ cancel }
class="mt-10 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
>< XCircle
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>Cancel< /button
>
< button
class="mt-10 ml-2 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
on:click={ init }
>
< ArrowPath
tabindex="-1"
class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
/>
Try again
< / button >
< / div >
< / div > < / div >
{ /each } { : else }
< / div > < div class = " max-w-6xl lg:px-8 mx-auto px-4 text-green-800" >
{ :else if step == "order" } Your wallet is opened! < br / > Please wait while the app is loading...
<!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); --> < svg
< div class="my-10 h-16 w-16 mx-auto"
class="h-screen aspect-[3/3] pazzleline" fill="none"
class:min-w-[320px]={ mobile } stroke="currentColor"
class:min-w-[500px]={ ! mobile } stroke-width="1.5"
class:max-w-[360px]={ mobile } viewBox="0 0 24 24"
class:max-w-[600px]={ ! mobile } xmlns="http://www.w3.org/2000/svg"
> aria-hidden="true"
{ #each [ 0 , 1 , 2 ] as row } >
< div class = "columns-3 gap-0" > < path
{ #each selection . slice ( 0 + row * 3 , 3 + row * 3 ) || [] as emoji , i } stroke-linecap="round"
{ #if ! emoji . sel } stroke-linejoin="round"
< div d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
role="button" />
tabindex="0" < / svg >
class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
on:click={() => select_order ( emoji , row * 3 + i )}
on:keypress={() => select_order ( emoji , row * 3 + i )}
>
< svelte:component
this={ emojis [ emoji_cat [ emoji . cat ]][ emoji . index ]. svg ? . default }
/>
< / div >
{ : else }
< div class = "w-full aspect-square opacity-25 select-none sel-emoji" >
< svelte:component
this={ emojis [ emoji_cat [ emoji . cat ]][ emoji . index ]. svg ? . default }
/>
< span class = "sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
>{ emoji . sel } < /span
>
< / div >
{ /if }
{ /each }
< / div > < / div >
{ /each } { /if }
< / div >
{ :else if step == "pin" }
< div class = " max-w-6xl lg:px-8 mx-auto px-3" >
< p class = "max-w-xl md:mx-auto lg:max-w-2xl" >
< span class = "text-xl" > Enter your PIN code< / span >
< / p >
< div class = "w-[295px] mx-auto" >
{ #each [ 0 , 1 , 2 ] as row }
< div class = "" >
{ #each shuffle_pin . slice ( 0 + row * 3 , 3 + row * 3 ) as num }
< button
tabindex="0"
class="m-1 select-none align-bottom text-7xl w-[90px] h-[90px] p-0"
on:click={ async () => await pin ( num )}
>
< span > { num } </ span >
< / button >
{ /each }
< / div >
{ /each }
< button
tabindex="0"
class="m-1 select-none mx-auto align-bottom text-7xl w-[90px] h-[90px] p-0"
on:click={ async () => await pin ( shuffle_pin [ 9 ])}
>
< span > { shuffle_pin [ 9 ]} </ span >
< / button >
< / div >
< / div >
{ :else if step == "opening" }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-primary-700" >
Opening your wallet...< br / >
Please wait
< svg
class="animate-spin mt-10 h-14 w-14 mx-auto"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
< circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
/>
< path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
< / svg >
< / div >
{ :else if step == "end" }
{ #if error }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-red-800" >
An error occurred !
< svg
fill="none"
class="animate-bounce mt-10 h-10 w-10 mx-auto"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
< path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
< / svg >
< Alert color = "red" class = "mt-5" >
{ error }
< / Alert >
< button class = "mt-10 select-none" on:click = { init } > Try again </ button >
< button class = "mt-10 ml-5 select-none" on:click = { cancel } > Cancel </ button >
< / div >
{ : else }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-green-800" >
Your wallet is opened! < br / > Please wait while the app is loading...
< svg
class="my-10 h-16 w-16 mx-auto"
fill="none"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
< path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
/>
< / svg >
< / div >
{ /if } { /if }
{ /if } < / div >
< svelte:window bind:innerWidth = { width } bind:innerHeight= { height } />
< style > < style >
.pazzleline { .pindigit {
min-height: 99px;
}
/* .pazzleline {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} } */
.sel { .sel {
position: absolute; position: absolute;
display: flex;
width: 100%; width: 100%;
top: 45%; height: 100%;
top: 0;
left: 0; left: 0;
font-size: 100px;
font-weight: 700; font-weight: 700;
justify-content: center;
align-items: center;
} }
.sel-emoji { .sel-emoji {
