@ -9,10 +9,19 @@
// 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" >
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 CenteredLayout from "../lib/CenteredLayout.svelte";
import CopyToClipboard from "../lib/components/CopyToClipboard.svelte";
// @ts-ignore
import EULogo from "../assets/EU.svg?component";
// @ts-ignore
@ -27,7 +36,11 @@
APP_WALLET_CREATE_SUFFIX,
default as ng,
} 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 { wallets , set_active_session , has_wallets } from "../store";
@ -36,6 +49,11 @@
let tauri_platform = import.meta.env.TAURI_PLATFORM;
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) => {
animate_bounce = false;
@ -116,7 +134,9 @@
let unsub_register_accepted;
let unsub_register_error;
let unsub_register_close;
/** The emojis for the newly created pazzle. */
let pazzle_emojis = [];
let confirm_modal_open = false;
function scrollToTop() {
top.scrollIntoView();
}
@ -183,6 +203,9 @@
}
}
scrollToTop();
// We need them for display later.
load_svg();
}
function create_wallet() {
@ -246,8 +269,10 @@
window.wallet_channel.postMessage(new_in_mem, location.href);
}
}
console.log(ready.pazzle);
console.log(display_pazzle(ready.pazzle));
console.log("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";
if (options.cloud) {
cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
@ -394,11 +419,106 @@
"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 >
< svelte:window bind:innerWidth = { width } bind:innerHeight= { height } />
< CenteredLayout >
< div class = "max-w-2xl lg:px-8 mx-auto" >
{ #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 }
Please wait...
{ : else }
@ -430,7 +550,7 @@
< div class = "container3" bind:this = { top } >
< div class = "row" >
< a href = "#/" >
< Logo class = "logo block h-40 " alt = "NextGraph Logo" / >
< Logo class = "logo block h-[8em] " alt = "NextGraph Logo" / >
< / a >
< / div >
{ #if registration_error }
@ -479,11 +599,11 @@
< / div >
{ :else if intro }
< 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
credentials and authorizations to access documents. You need one in
order to start using NextGraph.< br / > < br / > If you already have a
wallet, you should not create a new one, i nstead,
credentials and authorizations to access documents. You need one
in order to start using NextGraph.< br / > < br / > If you already have
a wallet, you should not create a new one. I nstead,
< a href = "/wallet/login" use:link
>login here with your existing wallet.< /a
>
@ -549,8 +669,8 @@
< / svg >
< span
>In your wallet, we store all the permissions to access
documents you have been granted with, or that you have created
yourself.< /span
documents you have been granted with, or that you have
created yourself.< /span
>
< / li >
< li class = "flex space-x-3" >
@ -571,7 +691,8 @@
/>
< / svg >
< 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
< b > PIN code< / b > of 4 digits. Your personal pazzle (contraction
@ -599,9 +720,10 @@
< / svg >
< span
>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
complex password. The entropy of your pazzle is < b > 66bits< / b > ,
which is considered very high by all standards.< /span
password like "69$g& ms%C*%", and it has the same strength as
a complex password. The entropy of your pazzle is < b
>66bits< /b
>, which is considered very high by all standards.< /span
>
< / li >
@ -622,10 +744,10 @@
/>
< / svg >
< span
>You should only create < b > one unique wallet for yourself< / b > .
All your accounts, identities and permissions will be added to
this unique wallet later on. Do not create another wallet if
you already have one. Instead, you will
>You should only create < b > one unique wallet for yourself< /b
>. All your accounts, identities and permissions will be
added to this unique wallet later on. Do not create another
wallet if you already have one. Instead, you will
< b > import< / b > your existing wallet in all the apps and websites
where you need it< /span
>
@ -671,9 +793,9 @@
/>
< / svg >
< span
>We at NextGraph will never see the content of your wallet. It
is encrypted and we do not know your pazzle, so we cannot see
what is inside.< /span
>We at NextGraph will never see the content of your wallet.
It is encrypted and we do not know your pazzle, so we cannot
see what is inside.< /span
>
< / li >
< li class = "flex space-x-3 under" >
@ -696,10 +818,11 @@
< span
>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
file. There is no "password recovery" option in this case. You
can note your pazzle down on a piece of paper until you
remember it, but don't forget to destroy this note after a
while.< /span
file. < span class = "text-bold" >
There is no "password recovery" option< /span
> in this case. You can note your pazzle down on a piece of paper
until you remember it, but don't forget to destroy this note
after a while.< /span
>
< / li >
< / 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"
/>
< / svg >
Ok, I create my wallet now !
I create my wallet now !
< / button >
< / div >
{ :else if ! invitation }
< div class = " max-w-6xl lg:px-8 mx-auto px-4" >
< p class = "max-w-xl md:mx-auto lg:max-w-2xl" >
NextGraph is based on an efficient decentralized P2P network, and in
order to join this network and start using the app, you need to
< 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 order to join this network and start using the app, you need to
first select a < b > broker server< / b > .
< / p >
< / div >
@ -763,8 +886,8 @@
/>
< / svg >
< span >
The broker helps you keep all your data in < b > sync< / b > , as it
is connected to the internet 24/7 and keeps a copy of the
The broker helps you keep all your data in < b > sync< / b > , as
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
participants are offline, you can still see their changes< /span
>
@ -787,8 +910,8 @@
< / svg >
< span >
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
not have the keys to decrypt them.< /span
the broker cannot see the content of the documents as it
does not have the keys to decrypt them.< /span
>
< / li >
< li class = "flex space-x-3" >
@ -808,8 +931,9 @@
/>
< / svg >
< span >
The broker helps you enforce your < b > privacy< / b > as it hides your
internet address (IP) from other users you share documents with.< /span
The broker helps you enforce your < b > privacy< / b > as it hides
your internet address (IP) from other users you share documents
with.< /span
>
< / li >
< li class = "flex space-x-3" >
@ -830,9 +954,9 @@
< / svg >
< span >
It will be possible in the future to use NextGraph without any
broker and to have direct connections between peers, but this
will imply a less smooth experience.< /span
It will be possible in the future to use NextGraph without
any broker and to have direct connections between peers, but
this will imply a less smooth experience.< /span
>
< / li >
< li class = "flex space-x-3" >
@ -852,8 +976,8 @@
/>
< / svg >
< span >
At anytime you can decide to switch to another broker service
provider or host it yourself. Your data is totally < b
At anytime you can decide to switch to another broker
service provider or host it yourself. Your data is totally < b
>portable< /b
>
and can freely move to another broker.< /span
@ -877,12 +1001,12 @@
< / svg >
< span >
Soon we will offer you the opportunity to host your own broker
at < b > home< / b >
Soon we will offer you the opportunity to host your own
broker at < b > home< / b >
or < b > office< / b > . Instead of using a "broker service
provider", you will own a small device that you connect behind
your internet router. It is called < b > NG Box< / b > and will be available
soon.< /span
provider", you will own a small device that you connect
behind your internet router. It is called < b > NG Box< / b > and will
be available soon.< /span
>
< / li >
< li class = "flex space-x-3" >
@ -921,7 +1045,10 @@
< div class = "row mt-5" >
< button
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"
>
@ -949,7 +1076,10 @@
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"
>
< 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
< / button >
< / div >
@ -1087,7 +1217,7 @@
< / button >
< / div >
{ :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 }
< Alert color = "green" class = "mb-5" >
< span class = "font-bold text-xl"
@ -1107,24 +1237,25 @@
NextGraph will never see your PIN.
< / Alert >
< / p >
< p class = "text-left mt-5" > Here are the rules for the PIN :< / p >
< ul class = "text-left list-disc list-inside" >
< p class = "text-left mt-5 px-3 " > Here are the rules for the PIN :< / p >
< ul class = "text-left list-disc list-inside px-3 " >
< li > It cannot be a series like 1234 or 8765< / li >
< li >
The same digit cannot repeat more than once. By example 4484 is
invalid
< / 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 >
< / ul >
< Alert color = "blue" class = "mt-5" >
You have chosen: { #each pin as digit } < span class = "font-bold text-xl"
>{ digit } < /span
You have chosen: { #each pin as digit } < span
class="font-bold text-xl" >{ digit } < /span
>{ /each }
< / Alert >
< div class = "w-[295px] mx-auto mb-4 " >
< div class = "w-[295px] mx-auto mb-10 " >
{ #each [ 0 , 1 , 2 ] as row }
< div class = "" >
{ #each [ 1 , 2 , 3 ] as num }
@ -1195,11 +1326,11 @@
Now let's enter a security phrase and a security image
< / h2 >
< 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
you every time you are about to enter your pazzle and PIN in order
to unlock your wallet.< br / >
This security measure will prevent you from entering your pazzle and
PIN on malicious sites and apps.
As a verification step, this phrase and image will be presented
to you every time you are about to enter your pazzle and PIN in
order to unlock your wallet.< br / >
This security measure will prevent you from entering your pazzle
and PIN on malicious sites and apps.
< Alert color = "red" class = "mt-5" >
Every time you will use your wallet, if you do not see and
recognize your own security phrase and image before entering
@ -1207,7 +1338,9 @@
would be the victim of a phishing attempt.
< / Alert >
< / 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 :
< / p >
< ul
@ -1215,15 +1348,15 @@
>
< li > The phrase should be at least 10 characters long< / li >
< li >
It should be something you will remember, but not something too
personal.
It should be something you will remember, but not something
too personal.
< / li >
< li >
Do not enter your full name, nor address, nor phone number.
< / li >
< li >
Instead, you can enter a quote, a small sentence that you like,
or something meaningless to others, but unique to you.
Instead, you can enter a quote, a small sentence that you
like, or something meaningless to others, but unique to you.
< / li >
< li >
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.
< / li >
< li >
The best would be a landscape you like or any other picture that
you will recognize as unique.
The best would be a landscape you like or any other picture
that you will recognize as unique.
< / li >
< li >
Please be aware that other people who are sharing this device
@ -1296,7 +1429,7 @@
on:change={ handleChange }
>
< 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 >
{ : else }
< 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" >
< span class = "text-xl" > We are almost done !< / span > < br / >
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
be careful with your security and privacy.< br / > < br / >
options can help you to use and keep your wallet. But we also want
to be careful with your security and privacy.< br / > < br / >
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,
USB key or hard-disk. This is the default way you can use and keep your
wallet. Now let's look at some options that can make your life a bit
easier.
USB key or hard-disk. This is the default way you can use and keep
your wallet. Now let's look at some options that can make your life
a bit easier.
< / p >
< 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 / >
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 />
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
/>
< Toggle class = "mt-3" bind:checked = { options . trusted }
>Save my wallet on this device?< /Toggle
>
< / p >
< 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 / >
Are you afraid that you will loose the file containing your wallet? If
this would happen, your wallet would be lost forever, together with all
your documents. We can keep an encrypted copy of your wallet in our cloud.
Only you will be able to download it with a special link. You would have
to keep this link safely though. By selecting this option, you agree
to the
Are you afraid that you will loose the file containing your wallet?
If this would happen, your wallet would be lost forever, together with
all your documents. We can keep an encrypted copy of your wallet in
our cloud. Only you will be able to download it with a special link.
You would have to keep this link safely though. By selecting this option,
you agree to the
< span
style="font-weight: 500;cursor: pointer; color: #646cff;"
tabindex="0"
@ -1388,11 +1522,11 @@
< 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 >
< br / >
We can prepare for you a PDF file containing all the information of your
wallet, unencrypted. You should print this file and then delete the PDF
(and empty the trash). Keep this printed document in a safe place. It
contains all the information to regenerate your wallet in case you lost
access to it.
We can prepare for you a PDF file containing all the information of
your wallet, unencrypted. You should print this file and then delete
the PDF (and empty the trash). Keep this printed document in a safe
place. It contains all the information to regenerate your wallet in
case you lost access to it.
< br / >
< Toggle disabled class = "mt-3" bind:checked = { options . pdf }
>Create a PDF of my wallet?< /Toggle
@ -1472,10 +1606,11 @@
< / svg >
< / div >
{ : else }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-green-800" >
Your wallet is ready!
< div class = "text-left mx-4" >
< div class = "text-green-800 mx-auto flex flex-col items-center" >
< div > Your wallet is ready!< / div >
< svg
class="my-10 h-16 w-16 mx-auto "
class="my-4 h-16 w-16 "
fill="none"
stroke="currentColor"
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"
/>
< / svg >
< / div >
< div class = "text-center" >
{ #if download_link }
Please download your wallet and keep it in a safe location< br / >
< a href = { download_link } target="_blank" download = { download_name } >
Please download your wallet and keep it in a safe location< br
/>
< a
href={ download_link }
target="_blank"
download={ download_name }
>
< button
tabindex="-1"
class:animate-bounce={ animateDownload }
@ -1516,30 +1658,92 @@
Download my wallet
< / button >
< / a > < br / >
< / a >
< br / >
{ :else if ! options . trusted }
Your wallet file has been downloaded into your "Downloads" folder,
with the name< br / > < span class = "text-black" >
Your wallet file has been downloaded into your "Downloads"
folder, with the name< br / > < span class = "text-black" >
{ download_name } < /span
>< 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 }
Here is your Pazzle:< br / > < br / >
{ #each display_pazzle ( ready . pazzle ) as emoji }
< span > { emoji } </ span >< br />
<!-- Pazzle -->
Here below is your Pazzle.
< 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 }
< / 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 / >
Copy it on a piece of paper. Use that until you memorized it, then throw
it away.< br / > The order of each image is important!< br / >
Now click on "Continue to Login" and select your wallet.< br / > < br
/>It is important that you login with this wallet at least once from
this { #if tauri_platform } device{ : else } browser tab{ /if } ,< br />
Now click on "Continue to Login" and select your new wallet.
< br / >
It is important that you < span class = "font-bold" > login< / span > with
this wallet
< 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
on your broker.< br / > < br / >
< a href = "/wallet/login" use:link >
< div class = "flex flex-col items-center" >
< button
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"
on:click={() => ( confirm_modal_open = true )}
>
< svg
class="w-8 h-8 mr-2 -ml-1"
@ -1558,8 +1762,33 @@
< / svg >
Continue to Login
< / 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 >
< / div >
< / Modal >
< / div >
{ /if }
{ : else }
< div class = " max-w-6xl lg:px-8 mx-auto px-4 text-red-800" >
@ -1599,6 +1828,7 @@
{ /if }
< / div >
{ /if }
< / div >
< / CenteredLayout >
< style >
