@ -9,10 +9,19 @@
// according to those terms. // according to those terms.
--> -->
<!--
@component
Wallet creation page.
This component manages the whole UX flow, gives infos about wallets,
offers available brokers, handles wallet creation,
and shows the wallet pazzle and pin.
-->
< script lang = "ts" > < script lang = "ts" >
import { Button , Alert , Dropzone , Toggle } from "flowbite-svelte"; import { Button , Alert , Dropzone , Toggle , Modal } from "flowbite-svelte";
import { link , querystring } from "svelte-spa-router"; import { link , querystring } from "svelte-spa-router";
import CenteredLayout from "../lib/CenteredLayout.svelte"; import CenteredLayout from "../lib/CenteredLayout.svelte";
import CopyToClipboard from "../lib/components/CopyToClipboard.svelte";
// @ts-ignore // @ts-ignore
import EULogo from "../assets/EU.svg?component"; import EULogo from "../assets/EU.svg?component";
// @ts-ignore // @ts-ignore
@ -27,7 +36,11 @@
APP_WALLET_CREATE_SUFFIX, APP_WALLET_CREATE_SUFFIX,
default as ng, default as ng,
} from "../api"; } from "../api";
import { display_pazzle } from "../wallet_emojis"; import {
display_pazzle,
emojis_from_pazzle_ids,
load_svg,
} from "../wallet_emojis";
import { onMount , onDestroy , tick } from "svelte"; import { onMount , onDestroy , tick } from "svelte";
import { wallets , set_active_session , has_wallets } from "../store"; import { wallets , set_active_session , has_wallets } from "../store";
@ -36,6 +49,11 @@
let tauri_platform = import.meta.env.TAURI_PLATFORM; let tauri_platform = import.meta.env.TAURI_PLATFORM;
let mobile = tauri_platform == "android" || tauri_platform == "ios"; let mobile = tauri_platform == "android" || tauri_platform == "ios";
let is_touch_device =
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
// @ts-ignore
navigator?.msMaxTouchPoints > 0;
const onFileSelected = (image) => { const onFileSelected = (image) => {
animate_bounce = false; animate_bounce = false;
@ -116,7 +134,9 @@
let unsub_register_accepted; let unsub_register_accepted;
let unsub_register_error; let unsub_register_error;
let unsub_register_close; let unsub_register_close;
/** The emojis for the newly created pazzle. */
let pazzle_emojis = [];
let confirm_modal_open = false;
function scrollToTop() { function scrollToTop() {
top.scrollIntoView(); top.scrollIntoView();
} }
@ -183,6 +203,9 @@
} }
} }
scrollToTop(); scrollToTop();
// We need them for display later.
load_svg();
} }
function create_wallet() { function create_wallet() {
@ -246,8 +269,10 @@
window.wallet_channel.postMessage(new_in_mem, location.href); window.wallet_channel.postMessage(new_in_mem, location.href);
} }
} }
console.log(ready.pazzle); console.log("pazzle", ready.pazzle);
console.log(display_pazzle(ready.pazzle)); console.log("pazzle words", display_pazzle(ready.pazzle));
console.log("mnemonic", ready.mnemonic);
console.log("mnemonic words", ready.mnemonic_str);
download_name = "wallet-" + ready.wallet_name + ".ngw"; download_name = "wallet-" + ready.wallet_name + ".ngw";
if (options.cloud) { if (options.cloud) {
cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name; cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
@ -394,11 +419,106 @@
"Terms of Service NextGraph.one" "Terms of Service NextGraph.one"
); );
}; };
const load_pazzle_emojis = async (pazzle_ids: number[]) => {
// We wait until the SVGs are available. If they are already, we return immediately.
await load_svg();
pazzle_emojis = emojis_from_pazzle_ids(pazzle_ids);
};
$: if (ready?.pazzle) {
load_pazzle_emojis(ready.pazzle);
}
// Loads an example wallet.
// const loadWallet = async () => {
// options = {
// trusted: true,
// cloud: false,
// bootstrap: false,
// pdf: false,
// };
// creating = true;
// let local_invitation = await ng.get_local_bootstrap(location.href);
// let additional_bootstrap;
// if (local_invitation) {
// additional_bootstrap = local_invitation.V0.bootstrap;
// }
// let core_registration;
// if (invitation?.V0.code) {
// core_registration = invitation.V0.code.ChaCha20Key;
// }
// let params = {
// security_img: security_img,
// security_txt,
// pin,
// pazzle_length: 9,
// send_bootstrap: false, //options.cloud || options.bootstrap ? : undefined,
// send_wallet: options.cloud,
// local_save: options.trusted,
// result_with_wallet_file: false, // this will be automatically changed to true for browser app
// core_bootstrap: invitation?.V0.bootstrap,
// core_registration,
// additional_bootstrap,
// };
// try {
// ready = await import("./wallet.json");
// wallets.set(await ng.get_wallets());
// if (!options.trusted && !tauri_platform) {
// let lws = $wallets[ready.wallet_name];
// if (lws.in_memory) {
// let new_in_mem = {
// lws,
// name: ready.wallet_name,
// opened: false,
// cmd: "new_in_mem",
// };
// window.wallet_channel.postMessage(new_in_mem, location.href);
// }
// }
// console.log("pazzle ids", ready.pazzle);
// console.log("pazzle emojis", emojis_from_pazzle_ids(ready.pazzle));
// download_name = "wallet-" + ready.wallet_name + ".ngw";
// if (options.cloud) {
// cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
// }
// if (ready.wallet_file.length) {
// const blob = new Blob([ready.wallet_file], {
// type: "application/octet-stream",
// });
// download_link = URL.createObjectURL(blob);
// }
// } catch (e) {
// console.error(e);
// error = e;
// }
// wait = false;
// registration_error = false;
// intro = false;
// pin = [0, 8, 1, 5];
// pin_confirm = [0, 8, 1, 5];
// invitation = true;
// };
// loadWallet();
let width: number;
let height: number;
const breakPointWidth: number = 450;
const breakPointHeight: number = 500;
let small_screen = false;
$: if (width >= breakPointWidth && height >= breakPointHeight) {
small_screen = false;
} else {
small_screen = true;
}
< / script > < / script >
< svelte:window bind:innerWidth = { width } bind:innerHeight= { height } />
< CenteredLayout > < CenteredLayout >
< div class = "max-w-2xl lg:px-8 mx-auto" >
{ #if wait } { #if wait }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-primary-700" > < div class = "lg:px-8 text-primary-700" >
{ #if wait === true } { #if wait === true }
Please wait... Please wait...
{ : else } { : else }
@ -430,7 +550,7 @@
< div class = "container3" bind:this = { top } > < div class = "container3" bind:this = { top } >
< div class = "row" > < div class = "row" >
< a href = "#/" > < a href = "#/" >
< Logo class = "logo block h-40 " alt = "NextGraph Logo" / > < Logo class = "logo block h-[8em] " alt = "NextGraph Logo" / >
< / a > < / a >
< / div > < / div >
{ #if registration_error } { #if registration_error }
@ -479,11 +599,11 @@
< / div > < / div >
{ :else if intro } { :else if intro }
< div class = " max-w-6xl lg:px-8 mx-auto px-4" > < div class = " max-w-6xl lg:px-8 mx-auto px-4" >
< p class = "max-w-xl md:mx-auto lg:max-w-2xl" > < p class = "max-w-xl text-left md:mx-auto lg:max-w-2xl" >
A < b > NextGraph Wallet< / b > is unique to each person. It stores your A < b > NextGraph Wallet< / b > is unique to each person. It stores your
credentials and authorizations to access documents. You need one in credentials and authorizations to access documents. You need one
order to start using NextGraph.< br / > < br / > If you already have a in order to start using NextGraph.< br / > < br / > If you already have
wallet, you should not create a new one, i nstead, a wallet, you should not create a new one. I nstead,
< a href = "/wallet/login" use:link < a href = "/wallet/login" use:link
>login here with your existing wallet.< /a >login here with your existing wallet.< /a
> >
@ -549,8 +669,8 @@
< / svg > < / svg >
< span < span
>In your wallet, we store all the permissions to access >In your wallet, we store all the permissions to access
documents you have been granted with, or that you have created documents you have been granted with, or that you have
yourself.< /span created yourself.< /span
> >
< / li > < / li >
< li class = "flex space-x-3" > < li class = "flex space-x-3" >
@ -571,7 +691,8 @@
/> />
< / svg > < / svg >
< span < span
>In order to open it, you will need to enter your < b > pazzle< /b >In order to open it, you will need to enter your < b
>pazzle< /b
> >
and a and a
< b > PIN code< / b > of 4 digits. Your personal pazzle (contraction < b > PIN code< / b > of 4 digits. Your personal pazzle (contraction
@ -599,9 +720,10 @@
< / svg > < / svg >
< span < span
>Don't worry, it is easier to remember 9 images than a >Don't worry, it is easier to remember 9 images than a
password like "69$g& ms%C*%", and it has the same strength as a password like "69$g& ms%C*%", and it has the same strength as
complex password. The entropy of your pazzle is < b > 66bits< / b > , a complex password. The entropy of your pazzle is < b
which is considered very high by all standards.< /span >66bits< /b
>, which is considered very high by all standards.< /span
> >
< / li > < / li >
@ -622,10 +744,10 @@
/> />
< / svg > < / svg >
< span < span
>You should only create < b > one unique wallet for yourself< / b > . >You should only create < b > one unique wallet for yourself< /b
All your accounts, identities and permissions will be added to >. All your accounts, identities and permissions will be
this unique wallet later on. Do not create another wallet if added to this unique wallet later on. Do not create another
you already have one. Instead, you will wallet if you already have one. Instead, you will
< b > import< / b > your existing wallet in all the apps and websites < b > import< / b > your existing wallet in all the apps and websites
where you need it< /span where you need it< /span
> >
@ -671,9 +793,9 @@
/> />
< / svg > < / svg >
< span < span
>We at NextGraph will never see the content of your wallet. It >We at NextGraph will never see the content of your wallet.
is encrypted and we do not know your pazzle, so we cannot see It is encrypted and we do not know your pazzle, so we cannot
what is inside.< /span see what is inside.< /span
> >
< / li > < / li >
< li class = "flex space-x-3 under" > < li class = "flex space-x-3 under" >
@ -696,10 +818,11 @@
< span < span
>For the same reason, we won't be able to help you if you >For the same reason, we won't be able to help you if you
forget your pazzle or PIN code, or if you loose the wallet forget your pazzle or PIN code, or if you loose the wallet
file. There is no "password recovery" option in this case. You file. < span class = "text-bold" >
can note your pazzle down on a piece of paper until you There is no "password recovery" option< /span
remember it, but don't forget to destroy this note after a > in this case. You can note your pazzle down on a piece of paper
while.< /span until you remember it, but don't forget to destroy this note
after a while.< /span
> >
< / li > < / li >
< / ul > < / ul >
@ -725,14 +848,14 @@
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" 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 > < / svg >
Ok, I create my wallet now ! I create my wallet now !
< / button > < / button >
< / div > < / div >
{ :else if ! invitation } { :else if ! invitation }
< div class = " max-w-6xl lg:px-8 mx-auto px-4" > < div class = " max-w-6xl lg:px-8 mx-auto px-4" >
< p class = "max-w-xl md:mx-auto lg:max-w-2xl" > < p class = "max-w-xl md:mx-auto text-left lg:max-w-2xl" >
NextGraph is based on an efficient decentralized P2P network, and in NextGraph is based on an efficient decentralized P2P network, and
order to join this network and start using the app, you need to in order to join this network and start using the app, you need to
first select a < b > broker server< / b > . first select a < b > broker server< / b > .
< / p > < / p >
< / div > < / div >
@ -763,8 +886,8 @@
/> />
< / svg > < / svg >
< span > < span >
The broker helps you keep all your data in < b > sync< / b > , as it The broker helps you keep all your data in < b > sync< / b > , as
is connected to the internet 24/7 and keeps a copy of the it is connected to the internet 24/7 and keeps a copy of the
updates for you. This way, even if the devices of the other updates for you. This way, even if the devices of the other
participants are offline, you can still see their changes< /span participants are offline, you can still see their changes< /span
> >
@ -787,8 +910,8 @@
< / svg > < / svg >
< span > < span >
All your data is secure and < b > end-to-end encrypted< / b > , and All your data is secure and < b > end-to-end encrypted< / b > , and
the broker cannot see the content of the documents as it does the broker cannot see the content of the documents as it
not have the keys to decrypt them.< /span does not have the keys to decrypt them.< /span
> >
< / li > < / li >
< li class = "flex space-x-3" > < li class = "flex space-x-3" >
@ -808,8 +931,9 @@
/> />
< / svg > < / svg >
< span > < span >
The broker helps you enforce your < b > privacy< / b > as it hides your The broker helps you enforce your < b > privacy< / b > as it hides
internet address (IP) from other users you share documents with.< /span your internet address (IP) from other users you share documents
with.< /span
> >
< / li > < / li >
< li class = "flex space-x-3" > < li class = "flex space-x-3" >
@ -830,9 +954,9 @@
< / svg > < / svg >
< span > < span >
It will be possible in the future to use NextGraph without any It will be possible in the future to use NextGraph without
broker and to have direct connections between peers, but this any broker and to have direct connections between peers, but
will imply a less smooth experience.< /span this will imply a less smooth experience.< /span
> >
< / li > < / li >
< li class = "flex space-x-3" > < li class = "flex space-x-3" >
@ -852,8 +976,8 @@
/> />
< / svg > < / svg >
< span > < span >
At anytime you can decide to switch to another broker service At anytime you can decide to switch to another broker
provider or host it yourself. Your data is totally < b service provider or host it yourself. Your data is totally < b
>portable< /b >portable< /b
> >
and can freely move to another broker.< /span and can freely move to another broker.< /span
@ -877,12 +1001,12 @@
< / svg > < / svg >
< span > < span >
Soon we will offer you the opportunity to host your own broker Soon we will offer you the opportunity to host your own
at < b > home< / b > broker at < b > home< / b >
or < b > office< / b > . Instead of using a "broker service or < b > office< / b > . Instead of using a "broker service
provider", you will own a small device that you connect behind provider", you will own a small device that you connect
your internet router. It is called < b > NG Box< / b > and will be available behind your internet router. It is called < b > NG Box< / b > and will
soon.< /span be available soon.< /span
> >
< / li > < / li >
< li class = "flex space-x-3" > < li class = "flex space-x-3" >
@ -921,7 +1045,10 @@
< div class = "row mt-5" > < div class = "row mt-5" >
< button < button
on:click| once={ async () => { on:click| once={ async () => {
await select_bsp(pre_invitation.V0.url, pre_invitation.V0.name); await select_bsp(
pre_invitation.V0.url,
pre_invitation.V0.name
);
}} }}
class="choice-button text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 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" class="choice-button text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 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"
> >
@ -949,7 +1076,10 @@
on:click| once={ selectEU } on:click| once={ selectEU }
class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mb-2" class="choice-button text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mb-2"
> >
< EULogo class = "mr-4 block h-10 w-10" alt = "European Union flag" / > < EULogo
class="mr-4 block h-10 w-10"
alt="European Union flag"
/>
For European Union citizens For European Union citizens
< / button > < / button >
< / div > < / div >
@ -1087,7 +1217,7 @@
< / button > < / button >
< / div > < / div >
{ :else if pin . length < 4 } { :else if pin . length < 4 }
< div class = " max-w-6xl lg:px-8 mx-auto px-3 " > < div class = " max-w-6xl lg:px-8 mx-auto" >
{ #if registration_success } { #if registration_success }
< Alert color = "green" class = "mb-5" > < Alert color = "green" class = "mb-5" >
< span class = "font-bold text-xl" < span class = "font-bold text-xl"
@ -1107,24 +1237,25 @@
NextGraph will never see your PIN. NextGraph will never see your PIN.
< / Alert > < / Alert >
< / p > < / p >
< p class = "text-left mt-5" > Here are the rules for the PIN :< / p > < p class = "text-left mt-5 px-3 " > Here are the rules for the PIN :< / p >
< ul class = "text-left list-disc list-inside" > < ul class = "text-left list-disc list-inside px-3 " >
< li > It cannot be a series like 1234 or 8765< / li > < li > It cannot be a series like 1234 or 8765< / li >
< li > < li >
The same digit cannot repeat more than once. By example 4484 is The same digit cannot repeat more than once. By example 4484 is
invalid invalid
< / li > < / li >
< li > < li >
Try to avoid birth date, last digits of phone number, or zip code Try to avoid birth date, last digits of phone number, or zip
code
< / li > < / li >
< / ul > < / ul >
< Alert color = "blue" class = "mt-5" > < Alert color = "blue" class = "mt-5" >
You have chosen: { #each pin as digit } < span class = "font-bold text-xl" You have chosen: { #each pin as digit } < span
>{ digit } < /span class="font-bold text-xl" >{ digit } < /span
>{ /each } >{ /each }
< / Alert > < / Alert >
< div class = "w-[295px] mx-auto mb-4 " > < div class = "w-[295px] mx-auto mb-10 " >
{ #each [ 0 , 1 , 2 ] as row } { #each [ 0 , 1 , 2 ] as row }
< div class = "" > < div class = "" >
{ #each [ 1 , 2 , 3 ] as num } { #each [ 1 , 2 , 3 ] as num }
@ -1195,11 +1326,11 @@
Now let's enter a security phrase and a security image Now let's enter a security phrase and a security image
< / h2 > < / h2 >
< p class = "max-w-xl md:mx-auto lg:max-w-2xl text-left" > < p class = "max-w-xl md:mx-auto lg:max-w-2xl text-left" >
As a verification step, this phrase and image will be presented to As a verification step, this phrase and image will be presented
you every time you are about to enter your pazzle and PIN in order to you every time you are about to enter your pazzle and PIN in
to unlock your wallet.< br / > order to unlock your wallet.< br / >
This security measure will prevent you from entering your pazzle and This security measure will prevent you from entering your pazzle
PIN on malicious sites and apps. and PIN on malicious sites and apps.
< Alert color = "red" class = "mt-5" > < Alert color = "red" class = "mt-5" >
Every time you will use your wallet, if you do not see and Every time you will use your wallet, if you do not see and
recognize your own security phrase and image before entering recognize your own security phrase and image before entering
@ -1207,7 +1338,9 @@
would be the victim of a phishing attempt. would be the victim of a phishing attempt.
< / Alert > < / Alert >
< / p > < / p >
< p class = "max-w-xl md:mx-auto lg:max-w-2xl text-left mt-5 text-sm" > < p
class="max-w-xl md:mx-auto lg:max-w-2xl text-left mt-5 text-sm"
>
Here are the rules for the security phrase and image : Here are the rules for the security phrase and image :
< / p > < / p >
< ul < ul
@ -1215,15 +1348,15 @@
> >
< li > The phrase should be at least 10 characters long< / li > < li > The phrase should be at least 10 characters long< / li >
< li > < li >
It should be something you will remember, but not something too It should be something you will remember, but not something
personal. too personal.
< / li > < / li >
< li > < li >
Do not enter your full name, nor address, nor phone number. Do not enter your full name, nor address, nor phone number.
< / li > < / li >
< li > < li >
Instead, you can enter a quote, a small sentence that you like, Instead, you can enter a quote, a small sentence that you
or something meaningless to others, but unique to you. like, or something meaningless to others, but unique to you.
< / li > < / li >
< li > < li >
The image should be minimum 150x150px. There is no need to The image should be minimum 150x150px. There is no need to
@ -1240,8 +1373,8 @@
Do not upload your face picture, this is not a profile pic. Do not upload your face picture, this is not a profile pic.
< / li > < / li >
< li > < li >
The best would be a landscape you like or any other picture that The best would be a landscape you like or any other picture
you will recognize as unique. that you will recognize as unique.
< / li > < / li >
< li > < li >
Please be aware that other people who are sharing this device Please be aware that other people who are sharing this device
@ -1296,7 +1429,7 @@
on:change={ handleChange } on:change={ handleChange }
> >
< p class = "mt-2 mb-5 text-gray-500 dark:text-gray-400" > < p class = "mt-2 mb-5 text-gray-500 dark:text-gray-400" >
{ #if mobil e} { #if is_touch_devic e}
< span class = "font-semibold" > Tap to upload an image< / span > < span class = "font-semibold" > Tap to upload an image< / span >
{ : else } { : else }
< span class = "font-semibold" > Click to select an image< / span > or < span class = "font-semibold" > Click to select an image< / span > or
@ -1345,34 +1478,35 @@
< p class = "max-w-xl mb-10 md:mx-auto lg:max-w-2xl" > < p class = "max-w-xl mb-10 md:mx-auto lg:max-w-2xl" >
< span class = "text-xl" > We are almost done !< / span > < br / > < span class = "text-xl" > We are almost done !< / span > < br / >
There are 4 options to choose before we can create your wallet. Those There are 4 options to choose before we can create your wallet. Those
options can help you to use and keep your wallet. But we also want to options can help you to use and keep your wallet. But we also want
be careful with your security and privacy.< br / > < br / > to be careful with your security and privacy.< br / > < br / >
Remember that in any case, once your wallet will be created, you will Remember that in any case, once your wallet will be created, you will
download a file that you should keep privately somewhere on your device, download a file that you should keep privately somewhere on your device,
USB key or hard-disk. This is the default way you can use and keep your USB key or hard-disk. This is the default way you can use and keep
wallet. Now let's look at some options that can make your life a bit your wallet. Now let's look at some options that can make your life
easier. a bit easier.
< / p > < / p >
< p class = "max-w-xl md:mx-auto lg:max-w-2xl text-left" > < p class = "max-w-xl md:mx-auto lg:max-w-2xl text-left" >
< span class = "text-xl" > Do you trust this device? < / span > < br / > < span class = "text-xl" > Do you trust this device? < / span > < br / >
If you do, if this device is yours or is used by few trusted persons 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 of your family or workplace, and you would like to login again from
device in the future, then you can save your wallet on this device. To this device in the future, then you can save your wallet on this device.
the contrary, if this device is public and shared by strangers, do not To the contrary, if this device is public and shared by strangers,
save your wallet here. { #if ! tauri_platform } By selecting this do not save your wallet here. { #if ! tauri_platform } By selecting
option, you agree to save some cookies on your browser.{ /if } < br /> this option, you agree to save some cookies on your browser.{ /if } < br
/>
< Toggle class = "mt-3" bind:checked = { options . trusted } < Toggle class = "mt-3" bind:checked = { options . trusted }
>Save my wallet on this device?< /Toggle >Save my wallet on this device?< /Toggle
> >
< / p > < / p >
< p class = "max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left" > < p class = "max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left" >
< span class = "text-xl" > Keep a copy in the cloud? < / span > < br / > < span class = "text-xl" > Keep a copy in the cloud? < / span > < br / >
Are you afraid that you will loose the file containing your wallet? If Are you afraid that you will loose the file containing your wallet?
this would happen, your wallet would be lost forever, together with all If this would happen, your wallet would be lost forever, together with
your documents. We can keep an encrypted copy of your wallet in our cloud. all your documents. We can keep an encrypted copy of your wallet in
Only you will be able to download it with a special link. You would have our cloud. Only you will be able to download it with a special link.
to keep this link safely though. By selecting this option, you agree You would have to keep this link safely though. By selecting this option,
to the you agree to the
< span < span
style="font-weight: 500;cursor: pointer; color: #646cff;" style="font-weight: 500;cursor: pointer; color: #646cff;"
tabindex="0" tabindex="0"
@ -1388,11 +1522,11 @@
< p class = "max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left" > < p class = "max-w-xl md:mx-auto mt-10 lg:max-w-2xl text-left" >
< span class = "text-xl" > Create a PDF file of your wallet? < / span > < span class = "text-xl" > Create a PDF file of your wallet? < / span >
< br / > < br / >
We can prepare for you a PDF file containing all the information of your We can prepare for you a PDF file containing all the information of
wallet, unencrypted. You should print this file and then delete the PDF your wallet, unencrypted. You should print this file and then delete
(and empty the trash). Keep this printed document in a safe place. It the PDF (and empty the trash). Keep this printed document in a safe
contains all the information to regenerate your wallet in case you lost place. It contains all the information to regenerate your wallet in
access to it. case you lost access to it.
< br / > < br / >
< Toggle disabled class = "mt-3" bind:checked = { options . pdf } < Toggle disabled class = "mt-3" bind:checked = { options . pdf }
>Create a PDF of my wallet?< /Toggle >Create a PDF of my wallet?< /Toggle
@ -1472,10 +1606,11 @@
< / svg > < / svg >
< / div > < / div >
{ : else } { : else }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-green-800" > < div class = "text-left mx-4" >
Your wallet is ready! < div class = "text-green-800 mx-auto flex flex-col items-center" >
< div > Your wallet is ready!< / div >
< svg < svg
class="my-10 h-16 w-16 mx-auto " class="my-4 h-16 w-16 "
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="1.5" stroke-width="1.5"
@ -1489,9 +1624,16 @@
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" 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 > < / svg >
< / div >
< div class = "text-center" >
{ #if download_link } { #if download_link }
Please download your wallet and keep it in a safe location< br / > Please download your wallet and keep it in a safe location< br
< a href = { download_link } target="_blank" download = { download_name } > />
< a
href={ download_link }
target="_blank"
download={ download_name }
>
< button < button
tabindex="-1" tabindex="-1"
class:animate-bounce={ animateDownload } class:animate-bounce={ animateDownload }
@ -1516,30 +1658,92 @@
Download my wallet Download my wallet
< / button > < / button >
< / a > < br / > < / a >
< br / >
{ :else if ! options . trusted } { :else if ! options . trusted }
Your wallet file has been downloaded into your "Downloads" folder, Your wallet file has been downloaded into your "Downloads"
with the name< br / > < span class = "text-black" > folder, with the name< br / > < span class = "text-black" >
{ download_name } < /span { download_name } < /span
>< br / > >< br / >
Please move it to a safe and durable place.< br / > < br / > < span class = "font-bold"
>Please move it to a safe and durable place.< /span
>< br / >
{ /if } { /if }
Here is your Pazzle:< br / > < br / > <!-- Pazzle -->
{ #each display_pazzle ( ready . pazzle ) as emoji } Here below is your Pazzle.
< span > { emoji } </ span >< br /> < br / >
The < span class = "font-bold" > order< / span > of each image is
< span class = "font-bold" > important< / span > !
< / div >
< div
class="mt-2 bg-white shadow-md rounded-lg max-w-2xl w-full mx-auto"
>
{ #each pazzle_emojis as emoji , index }
< div
class="flex w-full p-1 tall-sm:p-2 content-center"
class:border-b={ index !== pazzle_emojis . length - 1 }
class:justify-center={ ! small_screen }
>
< div class = "mr-4 content-center pt-1 my-auto" >
{ index + 1 }
< / div >
< div
class="flex justify-center w-[3em] h-[3em]"
title={ emoji . code }
>
< svelte:component
this={ emoji . svg ? . default }
class="w-[3em] h-[3em] "
/>
< / div >
< div class = "flex flex-col ml-4" >
< div class = "w-[10em] text-left" >
< span > { emoji . cat } </ span >
< / div >
< div class = "font-bold text-lg h-full content-center" >
< span > { emoji . code } </ span >
< / div >
< / div >
< / div >
{ /each } { /each }
< / div >
< br / >
<!-- Mnemonic (copy button). TODO: once the component is available -->
< label for = "mnemonic"
>And here is your mnemonic (your alternative passphrase):< /label
>
< CopyToClipboard
id="mnemonic"
value={ ready . mnemonic_str . join ( " " )}
/>
< br / >
You can use both the pazzle or the mnemonic to unlock your wallet.
The pazzle is easier to remember. The mnemonic is useful in some special
cases. We recommend that you use the pazzle.
< span class = "font-bold text-xl"
>Copy both on a piece of paper.< /span
>
You should try to memorize the pazzle. Once you did, you won't need
the paper anymore.
< br / > < br / > < br / > < br / >
Copy it on a piece of paper. Use that until you memorized it, then throw Now click on "Continue to Login" and select your new wallet.
it away.< br / > The order of each image is important!< br / > < br / >
Now click on "Continue to Login" and select your wallet.< br / > < br It is important that you < span class = "font-bold" > login< / span > with
/>It is important that you login with this wallet at least once from this wallet
this { #if tauri_platform } device{ : else } browser tab{ /if } ,< br /> < span class = "font-bold" > at least once< / span >
from this { #if tauri_platform } device{ : else } browser tab{ /if } ,< br />
while connected to the internet, so your personal site can be created while connected to the internet, so your personal site can be created
on your broker.< br / > < br / > on your broker.< br / > < br / >
< a href = "/wallet/login" use:link > < div class = "flex flex-col items-center" >
< button < button
tabindex="-1" tabindex="-1"
class="mb-20 text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mr-2" class="mb-20 text-primary-700 bg-primary-100 hover:bg-primary-100/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-100/55 mr-2"
on:click={() => ( confirm_modal_open = true )}
> >
< svg < svg
class="w-8 h-8 mr-2 -ml-1" class="w-8 h-8 mr-2 -ml-1"
@ -1558,8 +1762,33 @@
< / svg > < / svg >
Continue to Login Continue to Login
< / button > < / button >
< / div >
< Modal
autoclose
outsideclose
bind:open={ confirm_modal_open }
title="Did you write down your login credentials?"
>
< span class = "text-lg text-neutral-950" >
The pazzle and the mnemonic < span class = "font-bold" >
will not be shown to you again< /span
>. Please make sure, you have written them down.
< / span >
< div >
< button
class="m-2"
on:click={() => ( confirm_modal_open = false )}
>Take me back< /button
>
< a href = "/wallet/login" use:link >
< button class = "m-2 bg-primary-700 text-white"
>Yes, I did< /button
>
<!-- todo: blue button -->
< / a > < / a >
< / div > < / div >
< / Modal >
< / div >
{ /if } { /if }
{ : else } { : else }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-red-800" > < div class = " max-w-6xl lg:px-8 mx-auto px-4 text-red-800" >
@ -1599,6 +1828,7 @@
{ /if } { /if }
< / div > < / div >
{ /if } { /if }
< / div >
< / CenteredLayout > < / CenteredLayout >
< style > < style >
