parent
2e4f44a838
commit
58f21626a3
@ -0,0 +1,421 @@ |
|||||||
|
<!-- |
||||||
|
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
// All rights reserved. |
||||||
|
// Licensed under the Apache License, Version 2.0 |
||||||
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||||
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||||
|
// at your option. All files in the project carrying such |
||||||
|
// notice may not be copied, modified, or distributed except |
||||||
|
// according to those terms. |
||||||
|
--> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { Alert } from "flowbite-svelte"; |
||||||
|
import { onMount, createEventDispatcher, tick } from "svelte"; |
||||||
|
import ng from "../api"; |
||||||
|
import { emoji_cat, emojis, load_svg } from "../wallet_emojis"; |
||||||
|
export let wallet; |
||||||
|
|
||||||
|
const dispatch = createEventDispatcher(); |
||||||
|
|
||||||
|
onMount(async () => { |
||||||
|
await load_svg(); |
||||||
|
|
||||||
|
await init(); |
||||||
|
|
||||||
|
//console.log(JSON.stringify(await ng.test_create_wallet())); |
||||||
|
//console.log(await ng.test_create_wallet()); |
||||||
|
|
||||||
|
// let ref = { |
||||||
|
// id: { |
||||||
|
// Blake3Digest32: [ |
||||||
|
// 228, 228, 181, 117, 36, 206, 41, 223, 130, 96, 85, 195, 104, 137, 78, |
||||||
|
// 145, 42, 176, 58, 244, 111, 97, 246, 39, 11, 76, 135, 150, 188, 111, |
||||||
|
// 66, 33, |
||||||
|
// ], |
||||||
|
// }, |
||||||
|
// key: { |
||||||
|
// ChaCha20Key: [ |
||||||
|
// 100, 243, 39, 242, 203, 131, 102, 50, 9, 54, 248, 113, 4, 160, 28, 45, |
||||||
|
// 73, 56, 217, 112, 95, 150, 144, 137, 9, 57, 106, 5, 39, 202, 146, 94, |
||||||
|
// ], |
||||||
|
// }, |
||||||
|
// }; |
||||||
|
|
||||||
|
// let img = await ng.doc_get_file_from_store_with_object_ref("ng:", ref); |
||||||
|
|
||||||
|
// let c = { |
||||||
|
// security_img: img["File"].V0.content, |
||||||
|
// security_txt: " know yourself ", |
||||||
|
// pin: [5, 2, 9, 1], |
||||||
|
// pazzle_length: 9, |
||||||
|
// send_bootstrap: false, |
||||||
|
// send_wallet: false, |
||||||
|
// result_with_wallet_file: true, |
||||||
|
// local_save: false, |
||||||
|
// }; |
||||||
|
|
||||||
|
// try { |
||||||
|
// let res = await ng.wallet_create_wallet(c); |
||||||
|
// console.log(res); |
||||||
|
// wallet = res.wallet; |
||||||
|
|
||||||
|
// for (const emoji of res.pazzle) { |
||||||
|
// let cat = (emoji & 240) >> 4; |
||||||
|
// let idx = emoji & 15; |
||||||
|
// console.log(emoji_cat[cat], emojis[emoji_cat[cat]][idx].code); |
||||||
|
// } |
||||||
|
// } catch (e) { |
||||||
|
// console.error(e); |
||||||
|
// } |
||||||
|
|
||||||
|
//await start_pin(); |
||||||
|
}); |
||||||
|
|
||||||
|
async function init() { |
||||||
|
shuffle = await ng.wallet_gen_shuffle_for_pazzle_opening(pazzle_length); |
||||||
|
emojis2 = []; |
||||||
|
|
||||||
|
for (const [idx, cat_idx] of shuffle.category_indices.entries()) { |
||||||
|
let cat = emojis[emoji_cat[cat_idx]]; |
||||||
|
let items = []; |
||||||
|
for (const id of shuffle.emoji_indices[idx]) { |
||||||
|
items.push(cat[id]); |
||||||
|
} |
||||||
|
emojis2.push(items); |
||||||
|
} |
||||||
|
emojis2 = emojis2; |
||||||
|
|
||||||
|
display = 0; |
||||||
|
selection = []; |
||||||
|
error = undefined; |
||||||
|
|
||||||
|
step = "pazzle"; |
||||||
|
} |
||||||
|
|
||||||
|
let emojis2 = []; |
||||||
|
|
||||||
|
let shuffle; |
||||||
|
|
||||||
|
let step = "load"; |
||||||
|
|
||||||
|
let pazzle_length = 9; |
||||||
|
|
||||||
|
let display = 0; |
||||||
|
|
||||||
|
let selection = []; |
||||||
|
|
||||||
|
let pin_code = []; |
||||||
|
|
||||||
|
let ordered = []; |
||||||
|
|
||||||
|
let last_one = {}; |
||||||
|
|
||||||
|
let shuffle_pin; |
||||||
|
|
||||||
|
let error; |
||||||
|
|
||||||
|
function order() { |
||||||
|
step = "order"; |
||||||
|
ordered = []; |
||||||
|
last_one = {}; |
||||||
|
for (let i = 0; i < pazzle_length; i++) { |
||||||
|
last_one[i] = true; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function start_pin() { |
||||||
|
pin_code = []; |
||||||
|
console.log(ordered); |
||||||
|
shuffle_pin = await ng.wallet_gen_shuffle_for_pin(); |
||||||
|
step = "pin"; |
||||||
|
console.log(shuffle_pin); |
||||||
|
} |
||||||
|
|
||||||
|
function select(val) { |
||||||
|
//console.log(emojis2[display][val]); |
||||||
|
let cat_idx = shuffle.category_indices[display]; |
||||||
|
let cat = emojis[emoji_cat[cat_idx]]; |
||||||
|
let idx = shuffle.emoji_indices[display][val]; |
||||||
|
console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); |
||||||
|
|
||||||
|
selection.push({ cat: cat_idx, index: idx }); |
||||||
|
console.log(selection); |
||||||
|
|
||||||
|
if (display == pazzle_length - 1) { |
||||||
|
order(); |
||||||
|
} else { |
||||||
|
display = display + 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function finish() { |
||||||
|
step = "opening"; |
||||||
|
|
||||||
|
let pazzle = []; |
||||||
|
|
||||||
|
for (const emoji of ordered) { |
||||||
|
pazzle.push((emoji.cat << 4) + emoji.index); |
||||||
|
} |
||||||
|
|
||||||
|
console.log(pazzle); |
||||||
|
|
||||||
|
// open the wallet |
||||||
|
try { |
||||||
|
let secret_wallet = await ng.wallet_open_wallet_with_pazzle( |
||||||
|
wallet, |
||||||
|
pazzle, |
||||||
|
pin_code |
||||||
|
); |
||||||
|
step = "end"; |
||||||
|
console.log(secret_wallet); |
||||||
|
dispatch("opened", { |
||||||
|
wallet: secret_wallet, |
||||||
|
id: secret_wallet.V0.wallet_id, |
||||||
|
}); |
||||||
|
} catch (e) { |
||||||
|
console.error(e); |
||||||
|
error = e; |
||||||
|
step = "end"; |
||||||
|
dispatch("error", { error: e }); |
||||||
|
} |
||||||
|
|
||||||
|
// display the result |
||||||
|
} |
||||||
|
|
||||||
|
function cancel() { |
||||||
|
dispatch("cancel"); |
||||||
|
} |
||||||
|
|
||||||
|
async function pin(val) { |
||||||
|
console.log(val); |
||||||
|
pin_code.push(val); |
||||||
|
if (pin_code.length == 4) { |
||||||
|
await finish(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function select_order(val, pos) { |
||||||
|
delete last_one[pos]; |
||||||
|
console.log(last_one); |
||||||
|
console.log(val); |
||||||
|
ordered.push(val); |
||||||
|
val.sel = ordered.length; |
||||||
|
selection = selection; |
||||||
|
if (ordered.length == pazzle_length - 1) { |
||||||
|
let last = selection[Object.keys(last_one)[0]]; |
||||||
|
ordered.push(last); |
||||||
|
last.sel = ordered.length; |
||||||
|
selection = selection; |
||||||
|
console.log(last); |
||||||
|
await start_pin(); |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if step == "load"} |
||||||
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700"> |
||||||
|
Loading... |
||||||
|
<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 == "pazzle"} |
||||||
|
<div class="h-screen aspect-[3/5] pazzleline max-w-[500px] min-w-[200px]"> |
||||||
|
{#each [0, 1, 2, 3, 4] as row} |
||||||
|
<div class="columns-3 gap-0"> |
||||||
|
{#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i} |
||||||
|
<div |
||||||
|
role="button" |
||||||
|
tabindex="0" |
||||||
|
class="w-full aspect-square emoji" |
||||||
|
on:click={() => select(row * 3 + i)} |
||||||
|
on:keypress={() => select(row * 3 + i)} |
||||||
|
> |
||||||
|
<svelte:component this={emoji.svg?.default} /> |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
</div> |
||||||
|
{:else if step == "order"} |
||||||
|
<!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); --> |
||||||
|
<div class="h-screen aspect-[3/3] pazzleline max-w-[500px] min-w-[200px]"> |
||||||
|
{#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" |
||||||
|
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> |
||||||
|
{/each} |
||||||
|
</div> |
||||||
|
{:else if step == "pin"} |
||||||
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4"> |
||||||
|
<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-[325px] 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-[100px] h-[100px] 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-[100px] h-[100px] 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! |
||||||
|
<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} |
||||||
|
|
||||||
|
<style> |
||||||
|
.pazzleline { |
||||||
|
margin-right: auto; |
||||||
|
margin-left: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.pin { |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.sel { |
||||||
|
position: relative; |
||||||
|
top: -56%; |
||||||
|
font-size: 100px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.sel-emoji { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.emoji { |
||||||
|
cursor: pointer; |
||||||
|
/* padding: 0; |
||||||
|
margin: 0; |
||||||
|
border: 0; |
||||||
|
box-shadow: none; */ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,287 +0,0 @@ |
|||||||
<!-- |
|
||||||
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
|
||||||
// All rights reserved. |
|
||||||
// Licensed under the Apache License, Version 2.0 |
|
||||||
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
|
||||||
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
|
||||||
// at your option. All files in the project carrying such |
|
||||||
// notice may not be copied, modified, or distributed except |
|
||||||
// according to those terms. |
|
||||||
--> |
|
||||||
|
|
||||||
<script lang="ts"> |
|
||||||
import { onMount } from "svelte"; |
|
||||||
import ng from "../api"; |
|
||||||
import { emoji_cat, emojis, load_svg } from "../wallet_emojis"; |
|
||||||
|
|
||||||
onMount(async () => { |
|
||||||
await load_svg(); |
|
||||||
|
|
||||||
shuffle = await ng.wallet_gen_shuffle_for_pazzle_opening(pazzle_length); |
|
||||||
|
|
||||||
for (const [idx, cat_idx] of shuffle.category_indices.entries()) { |
|
||||||
let cat = emojis[emoji_cat[cat_idx]]; |
|
||||||
let items = []; |
|
||||||
for (const id of shuffle.emoji_indices[idx]) { |
|
||||||
items.push(cat[id]); |
|
||||||
} |
|
||||||
emojis2.push(items); |
|
||||||
} |
|
||||||
emojis2 = emojis2; |
|
||||||
|
|
||||||
//console.log(JSON.stringify(await ng.test_create_wallet())); |
|
||||||
//console.log(await ng.test_create_wallet()); |
|
||||||
|
|
||||||
let ref = { |
|
||||||
id: { |
|
||||||
Blake3Digest32: [ |
|
||||||
228, 228, 181, 117, 36, 206, 41, 223, 130, 96, 85, 195, 104, 137, 78, |
|
||||||
145, 42, 176, 58, 244, 111, 97, 246, 39, 11, 76, 135, 150, 188, 111, |
|
||||||
66, 33, |
|
||||||
], |
|
||||||
}, |
|
||||||
key: { |
|
||||||
ChaCha20Key: [ |
|
||||||
100, 243, 39, 242, 203, 131, 102, 50, 9, 54, 248, 113, 4, 160, 28, 45, |
|
||||||
73, 56, 217, 112, 95, 150, 144, 137, 9, 57, 106, 5, 39, 202, 146, 94, |
|
||||||
], |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
let img = await ng.doc_get_file_from_store_with_object_ref("ng:", ref); |
|
||||||
|
|
||||||
let c = { |
|
||||||
security_img: img["File"].V0.content, |
|
||||||
security_txt: " know yourself ", |
|
||||||
pin: [5, 2, 9, 1], |
|
||||||
pazzle_length: 9, |
|
||||||
send_bootstrap: false, |
|
||||||
send_wallet: false, |
|
||||||
result_with_wallet_file: true, |
|
||||||
local_save: false, |
|
||||||
}; |
|
||||||
|
|
||||||
try { |
|
||||||
let res = await ng.wallet_create_wallet(c); |
|
||||||
console.log(res); |
|
||||||
wallet = res.wallet; |
|
||||||
|
|
||||||
for (const emoji of res.pazzle) { |
|
||||||
let cat = (emoji & 240) >> 4; |
|
||||||
let idx = emoji & 15; |
|
||||||
console.log(emoji_cat[cat], emojis[emoji_cat[cat]][idx].code); |
|
||||||
} |
|
||||||
} catch (e) { |
|
||||||
console.error(e); |
|
||||||
} |
|
||||||
|
|
||||||
//await start_pin(); |
|
||||||
}); |
|
||||||
|
|
||||||
let wallet; |
|
||||||
|
|
||||||
let emojis2 = []; |
|
||||||
|
|
||||||
let shuffle; |
|
||||||
|
|
||||||
let step = "pazzle"; |
|
||||||
|
|
||||||
let pazzle_length = 9; |
|
||||||
|
|
||||||
let display = 0; |
|
||||||
|
|
||||||
let selection = []; |
|
||||||
|
|
||||||
let pin_code = []; |
|
||||||
|
|
||||||
let ordered = []; |
|
||||||
|
|
||||||
let last_one = {}; |
|
||||||
|
|
||||||
let shuffle_pin; |
|
||||||
|
|
||||||
function order() { |
|
||||||
step = "order"; |
|
||||||
last_one = {}; |
|
||||||
for (let i = 0; i < pazzle_length; i++) { |
|
||||||
last_one[i] = true; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function start_pin() { |
|
||||||
console.log(ordered); |
|
||||||
shuffle_pin = await ng.wallet_gen_shuffle_for_pin(); |
|
||||||
step = "pin"; |
|
||||||
console.log(shuffle_pin); |
|
||||||
} |
|
||||||
|
|
||||||
function select(val) { |
|
||||||
//console.log(emojis2[display][val]); |
|
||||||
let cat_idx = shuffle.category_indices[display]; |
|
||||||
let cat = emojis[emoji_cat[cat_idx]]; |
|
||||||
let idx = shuffle.emoji_indices[display][val]; |
|
||||||
console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); |
|
||||||
|
|
||||||
selection.push({ cat: cat_idx, index: idx }); |
|
||||||
console.log(selection); |
|
||||||
|
|
||||||
if (display == pazzle_length - 1) { |
|
||||||
order(); |
|
||||||
} else { |
|
||||||
display = display + 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function finish() { |
|
||||||
step = "end"; |
|
||||||
|
|
||||||
let pazzle = []; |
|
||||||
|
|
||||||
for (const emoji of ordered) { |
|
||||||
pazzle.push((emoji.cat << 4) + emoji.index); |
|
||||||
} |
|
||||||
|
|
||||||
console.log(pazzle); |
|
||||||
|
|
||||||
// open the wallet |
|
||||||
try { |
|
||||||
let secret_wallet = await ng.wallet_open_wallet_with_pazzle( |
|
||||||
wallet, |
|
||||||
pazzle, |
|
||||||
pin_code |
|
||||||
); |
|
||||||
console.log(secret_wallet); |
|
||||||
} catch (e) { |
|
||||||
console.error(e); |
|
||||||
} |
|
||||||
|
|
||||||
// display the result |
|
||||||
} |
|
||||||
|
|
||||||
async function pin(val) { |
|
||||||
console.log(val); |
|
||||||
pin_code.push(val); |
|
||||||
if (pin_code.length == 4) { |
|
||||||
await finish(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async function select_order(val, pos) { |
|
||||||
delete last_one[pos]; |
|
||||||
console.log(last_one); |
|
||||||
console.log(val); |
|
||||||
ordered.push(val); |
|
||||||
val.sel = ordered.length; |
|
||||||
selection = selection; |
|
||||||
if (ordered.length == pazzle_length - 1) { |
|
||||||
let last = selection[Object.keys(last_one)[0]]; |
|
||||||
ordered.push(last); |
|
||||||
last.sel = ordered.length; |
|
||||||
selection = selection; |
|
||||||
console.log(last); |
|
||||||
await start_pin(); |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
{#if step == "pazzle"} |
|
||||||
<div class="h-screen aspect-[3/5] pazzleline max-w-[500px] min-w-[200px]"> |
|
||||||
{#each [0, 1, 2, 3, 4] as row} |
|
||||||
<div class="columns-3 gap-0"> |
|
||||||
{#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i} |
|
||||||
<div |
|
||||||
role="button" |
|
||||||
tabindex="0" |
|
||||||
class="w-full aspect-square emoji" |
|
||||||
on:click={() => select(row * 3 + i)} |
|
||||||
on:keypress={() => select(row * 3 + i)} |
|
||||||
> |
|
||||||
<svelte:component this={emoji.svg?.default} /> |
|
||||||
</div> |
|
||||||
{/each} |
|
||||||
</div> |
|
||||||
{/each} |
|
||||||
</div> |
|
||||||
{:else if step == "order"} |
|
||||||
<!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); --> |
|
||||||
<div class="h-screen aspect-[3/3] pazzleline max-w-[500px] min-w-[200px]"> |
|
||||||
{#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" |
|
||||||
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> |
|
||||||
{/each} |
|
||||||
</div> |
|
||||||
{:else if step == "pin"} |
|
||||||
<div class="aspect-[5/2] pazzleline max-w-[800px] min-w-[200px] mt-20"> |
|
||||||
{#each [0, 1] as row} |
|
||||||
<div class="columns-5 gap-0"> |
|
||||||
{#each shuffle_pin.slice(0 + row * 5, 5 + row * 5) as num, i} |
|
||||||
<div |
|
||||||
role="button" |
|
||||||
tabindex="0" |
|
||||||
class="w-full aspect-square pin align-bottom text-9xl" |
|
||||||
on:click={async () => await pin(num)} |
|
||||||
on:keypress={async () => await pin(num)} |
|
||||||
> |
|
||||||
<span>{num}</span> |
|
||||||
</div> |
|
||||||
{/each} |
|
||||||
</div> |
|
||||||
{/each} |
|
||||||
</div> |
|
||||||
{:else if step == "end"}{/if} |
|
||||||
|
|
||||||
<style> |
|
||||||
.pazzleline { |
|
||||||
margin-right: auto; |
|
||||||
margin-left: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.pin { |
|
||||||
cursor: pointer; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.sel { |
|
||||||
position: relative; |
|
||||||
top: -56%; |
|
||||||
font-size: 100px; |
|
||||||
left: 30%; |
|
||||||
font-weight: 700; |
|
||||||
} |
|
||||||
|
|
||||||
.sel-emoji { |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.emoji { |
|
||||||
cursor: pointer; |
|
||||||
/* padding: 0; |
|
||||||
margin: 0; |
|
||||||
border: 0; |
|
||||||
box-shadow: none; */ |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,125 @@ |
|||||||
|
<!-- |
||||||
|
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
// All rights reserved. |
||||||
|
// Licensed under the Apache License, Version 2.0 |
||||||
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||||
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||||
|
// at your option. All files in the project carrying such |
||||||
|
// notice may not be copied, modified, or distributed except |
||||||
|
// according to those terms. |
||||||
|
--> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { Button, Alert, Dropzone, Toggle } from "flowbite-svelte"; |
||||||
|
import { link, querystring } from "svelte-spa-router"; |
||||||
|
// @ts-ignore |
||||||
|
import Logo from "../assets/nextgraph.svg?component"; |
||||||
|
|
||||||
|
import { onMount, tick } from "svelte"; |
||||||
|
|
||||||
|
import { |
||||||
|
NG_EU_BSP, |
||||||
|
NG_NET_BSP, |
||||||
|
NG_EU_BSP_REGISTER, |
||||||
|
NG_EU_BSP_REGISTERED, |
||||||
|
APP_ACCOUNT_REGISTERED_SUFFIX, |
||||||
|
default as ng, |
||||||
|
} from "../api"; |
||||||
|
|
||||||
|
const param = new URLSearchParams($querystring); |
||||||
|
|
||||||
|
let tauri_platform = import.meta.env.TAURI_PLATFORM; |
||||||
|
|
||||||
|
let mobile = tauri_platform == "android" || tauri_platform == "ios"; |
||||||
|
|
||||||
|
let error = param.get("e"); |
||||||
|
|
||||||
|
let invite = param.get("i"); |
||||||
|
let invitation; |
||||||
|
|
||||||
|
let user = param.get("u"); |
||||||
|
|
||||||
|
onMount(async () => { |
||||||
|
if (invite) { |
||||||
|
invitation = await ng.decode_invitation(invite); |
||||||
|
} |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<main class="container3"> |
||||||
|
<div class="row"> |
||||||
|
<a href="#/"> |
||||||
|
<Logo class="logo block h-40" alt="NextGraph Logo" /> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
{#if error} |
||||||
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800"> |
||||||
|
<svg |
||||||
|
class="animate-bounce mt-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="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> |
||||||
|
{#if error == "AlreadyExists"} |
||||||
|
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> |
||||||
|
The user is already registered with the selected broker.<br /> Try logging |
||||||
|
in instead |
||||||
|
</p> |
||||||
|
<a use:link href="/"> |
||||||
|
<button |
||||||
|
tabindex="-1" |
||||||
|
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none focus:ring-primary-700/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" |
||||||
|
> |
||||||
|
Login |
||||||
|
</button> |
||||||
|
</a> |
||||||
|
{:else} |
||||||
|
<p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5"> |
||||||
|
An error occurred:<br />{error} |
||||||
|
</p> |
||||||
|
<a use:link href="/"> |
||||||
|
<button |
||||||
|
tabindex="-1" |
||||||
|
class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none focus:ring-primary-700/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" |
||||||
|
> |
||||||
|
Go back to homepage |
||||||
|
</button> |
||||||
|
</a> |
||||||
|
{/if} |
||||||
|
</div> |
||||||
|
{:else if invite && user} |
||||||
|
<div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800"> |
||||||
|
<svg |
||||||
|
class="mt-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> |
||||||
|
<p class="max-w-xl md:mx-auto lg:max-w-2xl"> |
||||||
|
You have been successfully <br />registered {#if invitation?.V0?.name} |
||||||
|
to {invitation?.V0?.name}{/if} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
{/if} |
||||||
|
</main> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,270 @@ |
|||||||
|
<!-- |
||||||
|
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers |
||||||
|
// All rights reserved. |
||||||
|
// Licensed under the Apache License, Version 2.0 |
||||||
|
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0> |
||||||
|
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>, |
||||||
|
// at your option. All files in the project carrying such |
||||||
|
// notice may not be copied, modified, or distributed except |
||||||
|
// according to those terms. |
||||||
|
--> |
||||||
|
|
||||||
|
<script lang="ts"> |
||||||
|
import { onMount, onDestroy } from "svelte"; |
||||||
|
import { link, push } from "svelte-spa-router"; |
||||||
|
import Login from "../lib/Login.svelte"; |
||||||
|
import ng from "../api"; |
||||||
|
// @ts-ignore |
||||||
|
import Logo from "../assets/nextgraph.svg?component"; |
||||||
|
import { |
||||||
|
wallets, |
||||||
|
active_wallet, |
||||||
|
opened_wallets, |
||||||
|
active_session, |
||||||
|
set_active_session, |
||||||
|
has_wallets, |
||||||
|
} from "../store"; |
||||||
|
let wallet; |
||||||
|
let selected; //= "8Hg1Rf7us3LFhs7HCbxCQOWJoV-OUyALbTuSaKp7D-M"; |
||||||
|
let step; |
||||||
|
|
||||||
|
let wallets_unsub; |
||||||
|
let opened_wallets_unsub; |
||||||
|
let active_wallet_unsub; |
||||||
|
|
||||||
|
function convert_img_to_url(buffer) { |
||||||
|
var blob = new Blob([buffer], { |
||||||
|
type: "image/jpeg", |
||||||
|
}); |
||||||
|
var imageUrl = URL.createObjectURL(blob); |
||||||
|
return imageUrl; |
||||||
|
} |
||||||
|
|
||||||
|
onMount(async () => { |
||||||
|
step = "open"; |
||||||
|
wallets_unsub = wallets.subscribe((value) => { |
||||||
|
wallet = selected && $wallets[selected]?.wallet; |
||||||
|
console.log("wallet found locally", wallet); |
||||||
|
}); |
||||||
|
opened_wallets_unsub = opened_wallets.subscribe(async (value) => { |
||||||
|
if (!$active_wallet && selected && value[selected]) { |
||||||
|
active_wallet.set({ wallet: value[selected], id: selected }); |
||||||
|
} |
||||||
|
}); |
||||||
|
active_wallet_unsub = active_wallet.subscribe(async (value) => { |
||||||
|
if (value && value.wallet) { |
||||||
|
if (!$active_session) { |
||||||
|
let session = await ng.get_local_session( |
||||||
|
value.id, |
||||||
|
value.wallet.V0.wallet_privkey, |
||||||
|
value.wallet.V0.personal_site |
||||||
|
); |
||||||
|
console.log(session); |
||||||
|
if (session) { |
||||||
|
set_active_session(session); |
||||||
|
loggedin(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
function loggedin() { |
||||||
|
step = "loggedin"; |
||||||
|
push("#/"); |
||||||
|
} |
||||||
|
onDestroy(() => { |
||||||
|
if (wallets_unsub) wallets_unsub(); |
||||||
|
if (opened_wallets_unsub) opened_wallets_unsub(); |
||||||
|
if (active_wallet_unsub) active_wallet_unsub(); |
||||||
|
}); |
||||||
|
async function gotError(event) { |
||||||
|
console.error(event.detail); |
||||||
|
} |
||||||
|
async function gotWallet(event) { |
||||||
|
console.log(event.detail); |
||||||
|
active_wallet.set(event.detail); |
||||||
|
// wallet |
||||||
|
// id |
||||||
|
} |
||||||
|
function cancelLogin(event) { |
||||||
|
selected = undefined; |
||||||
|
wallet = undefined; |
||||||
|
} |
||||||
|
function select(id) { |
||||||
|
selected = id; |
||||||
|
if ($opened_wallets[selected]) { |
||||||
|
active_wallet.set({ wallet: $opened_wallets[selected], id: selected }); |
||||||
|
} else { |
||||||
|
wallet = $wallets[selected]?.wallet; |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if wallet} |
||||||
|
<Login |
||||||
|
{wallet} |
||||||
|
on:error={gotError} |
||||||
|
on:opened={gotWallet} |
||||||
|
on:cancel={cancelLogin} |
||||||
|
/> |
||||||
|
{:else if !$active_wallet && !selected} |
||||||
|
<main class=""> |
||||||
|
<div class="row"> |
||||||
|
<Logo class="logo block h-40" alt="NextGraph Logo" /> |
||||||
|
</div> |
||||||
|
<h2 class="pb-5 text-xl">Select a wallet for log in</h2> |
||||||
|
<div class="flex flex-wrap justify-center gap-5 mb-20"> |
||||||
|
{#each Object.entries($wallets) as wallet_entry} |
||||||
|
<div |
||||||
|
class="wallet-box" |
||||||
|
role="button" |
||||||
|
tabindex="0" |
||||||
|
title={wallet_entry[0]} |
||||||
|
on:click={() => { |
||||||
|
select(wallet_entry[0]); |
||||||
|
}} |
||||||
|
on:keypress={() => { |
||||||
|
select(wallet_entry[0]); |
||||||
|
}} |
||||||
|
> |
||||||
|
<span class="securitytxt" |
||||||
|
>{wallet_entry[1].wallet.V0.content.security_txt} |
||||||
|
{wallet_entry[0]}</span |
||||||
|
> |
||||||
|
<img |
||||||
|
alt={wallet_entry[1].wallet.V0.content.security_txt} |
||||||
|
class="securityimg" |
||||||
|
src={convert_img_to_url( |
||||||
|
wallet_entry[1].wallet.V0.content.security_img |
||||||
|
)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{/each} |
||||||
|
<div class="wallet-box"> |
||||||
|
{#if $has_wallets}<p class="mt-1">Log in with another wallet</p> |
||||||
|
{:else}<p class="mt-1">Import your wallet</p> |
||||||
|
{/if} |
||||||
|
<button |
||||||
|
class=" mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2" |
||||||
|
> |
||||||
|
<svg |
||||||
|
class="w-8 h-8 mr-2 -ml-1" |
||||||
|
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 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15M9 12l3 3m0 0l3-3m-3 3V2.25" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
Import a Wallet File |
||||||
|
</button> |
||||||
|
<button |
||||||
|
class="mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2" |
||||||
|
> |
||||||
|
<svg |
||||||
|
class="w-8 h-8 mr-2 -ml-1" |
||||||
|
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="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" |
||||||
|
/> |
||||||
|
<path |
||||||
|
stroke-linecap="round" |
||||||
|
stroke-linejoin="round" |
||||||
|
d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
Import with QRcode |
||||||
|
</button> |
||||||
|
<button |
||||||
|
class="mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2" |
||||||
|
> |
||||||
|
<svg |
||||||
|
class="w-8 h-8 mr-2 -ml-1" |
||||||
|
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="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
|
||||||
|
Enter a Wallet Link |
||||||
|
</button> |
||||||
|
<a href="/wallet/create" use:link> |
||||||
|
<button |
||||||
|
tabindex="-1" |
||||||
|
class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none 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" |
||||||
|
> |
||||||
|
<svg |
||||||
|
class="w-8 h-8 mr-2 -ml-1" |
||||||
|
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="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
Create a new wallet |
||||||
|
</button> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</main> |
||||||
|
{:else if step == "security"}{:else if step == "qrcode"}{:else if step == "drop"}{:else if step == "cloud"}{:else if step == "loggedin"}you |
||||||
|
are logged in{/if} |
||||||
|
|
||||||
|
<style> |
||||||
|
.wallet-box { |
||||||
|
width: 300px; |
||||||
|
height: 300px; |
||||||
|
background-color: white; |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
button { |
||||||
|
min-width: 250px; |
||||||
|
} |
||||||
|
.securitytxt { |
||||||
|
z-index: 100; |
||||||
|
width: 300px; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
padding: 5px; |
||||||
|
background-color: #ffffff70; |
||||||
|
overflow-wrap: break-word; |
||||||
|
} |
||||||
|
.wallet-box:focus .securitytxt { |
||||||
|
background-color: #ffffffff; |
||||||
|
} |
||||||
|
.securityimg { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,33 +1,113 @@ |
|||||||
import { writable } from "svelte/store"; |
import { writable, readonly, derived } from "svelte/store"; |
||||||
import ng from "./api"; |
import ng from "./api"; |
||||||
|
|
||||||
|
let all_branches = {}; |
||||||
|
|
||||||
|
export const opened_wallets = writable({}); |
||||||
|
|
||||||
|
/// { wallet:, id: }
|
||||||
|
export const active_wallet = writable(undefined); |
||||||
|
|
||||||
|
export const wallets = writable({}); |
||||||
|
|
||||||
|
export const has_wallets = derived(wallets,($wallets) => Object.keys($wallets).length); |
||||||
|
|
||||||
|
export const active_session = writable(undefined); |
||||||
|
|
||||||
|
export const set_active_session = function(session) { |
||||||
|
let v = session.users.values().next().value; |
||||||
|
v.branches_last_seq = Object.fromEntries(v.branches_last_seq); |
||||||
|
let users = Object.fromEntries(session.users); |
||||||
|
active_session.set(users); |
||||||
|
}; |
||||||
|
|
||||||
|
export { writable, readonly, derived }; |
||||||
|
|
||||||
|
const close_active_wallet = function() { |
||||||
|
|
||||||
|
active_session.set(undefined); |
||||||
|
active_wallet.update((w) => { |
||||||
|
delete w.wallet; |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
const branch_commits = (nura, sub) => { |
const branch_commits = (nura, sub) => { |
||||||
|
// console.log("branch_commits")
|
||||||
|
// const { subscribe, set, update } = writable([]); // create the underlying writable store
|
||||||
|
|
||||||
|
// let unsub = () => {};
|
||||||
|
// return {
|
||||||
|
// load: async () => {
|
||||||
|
// console.log("load")
|
||||||
|
// unsub = await ng.doc_sync_branch(nura, async (commit) => {
|
||||||
|
// console.log(commit);
|
||||||
|
// update( (old) => {old.unshift(commit); return old;} )
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// subscribe: (run, invalid) => {
|
||||||
|
// console.log("sub")
|
||||||
|
// let upper_unsub = subscribe(run, invalid);
|
||||||
|
|
||||||
|
// return () => {
|
||||||
|
// upper_unsub();
|
||||||
|
// unsub();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // set: (value) => {
|
||||||
|
// // localStorage.setItem(key, toString(value)); // save also to local storage as a string
|
||||||
|
// // return set(value);
|
||||||
|
// // },
|
||||||
|
// // update,
|
||||||
|
// };
|
||||||
|
|
||||||
const { subscribe, set, update } = writable([]); // create the underlying writable store
|
|
||||||
|
|
||||||
let unsub = () => {}; |
|
||||||
return { |
return { |
||||||
|
load: async () => { |
||||||
|
let already_subscribed = all_branches[nura]; |
||||||
|
if (!already_subscribed) return; |
||||||
|
if (already_subscribed.load) { |
||||||
|
await already_subscribed.load(); |
||||||
|
already_subscribed.load = undefined; |
||||||
|
} |
||||||
|
}, |
||||||
|
subscribe: (run, invalid) => { |
||||||
|
let already_subscribed = all_branches[nura]; |
||||||
|
if (!already_subscribed) { |
||||||
|
const { subscribe, set, update } = writable([]); // create the underlying writable store
|
||||||
|
let count = 0; |
||||||
|
let unsub = () => {}; |
||||||
|
already_subscribed = { |
||||||
load: async () => { |
load: async () => { |
||||||
unsub = await ng.doc_sync_branch(nura, async (commit) => { |
unsub = await ng.doc_sync_branch(nura, async (commit) => { |
||||||
console.log(commit); |
console.log(commit); |
||||||
update( (old) => {old.unshift(commit); return old;} ) |
update( (old) => {old.unshift(commit); return old;} ) |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
subscribe: (run, invalid) => { |
increase: () => { |
||||||
|
count += 1; |
||||||
let upper_unsub = subscribe(run, invalid); |
return readonly({subscribe}); |
||||||
|
}, |
||||||
|
decrease: () => { |
||||||
|
count -= 1; |
||||||
|
if (count == 0) { |
||||||
|
unsub(); |
||||||
|
delete all_branches[nura]; |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
all_branches[nura] = already_subscribed; |
||||||
|
} |
||||||
|
|
||||||
|
let new_store = already_subscribed.increase(); |
||||||
|
let read_unsub = new_store.subscribe(run, invalid); |
||||||
return () => { |
return () => { |
||||||
upper_unsub(); |
read_unsub(); |
||||||
unsub(); |
already_subscribed.decrease(); |
||||||
|
} |
||||||
|
|
||||||
} |
} |
||||||
} |
} |
||||||
// set: (value) => {
|
|
||||||
// localStorage.setItem(key, toString(value)); // save also to local storage as a string
|
|
||||||
// return set(value);
|
|
||||||
// },
|
|
||||||
// update,
|
|
||||||
}; |
|
||||||
}; |
}; |
||||||
|
|
||||||
export default branch_commits; |
export default branch_commits; |
||||||
Loading…
Reference in new issue