improvements

ng-app/src/lib/components/CopyToClipboard.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  export let value: string = "";
+  export let id: string;
+
+  let has_success: boolean = false;
+
+  const on_click = (e) => {
+    has_success = true;
+    setTimeout(() => (has_success = false), 2_000);
+
+    navigator.clipboard.writeText(value);
+  };
+</script>
+
+<div class="w-full">
+  <div class="relative">
+    <input
+      {id}
+      type="text"
+      {value}
+      class="col-span-6 pr-11 bg-gray-50 border border-gray-300 text-gray-600 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      disabled
+      readonly
+    />
+    <button
+      on:click={on_click}
+      class="absolute end-2 top-1/2 -translate-y-1/2 bg-gray-50 shadow-none text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center"
+    >
+      <span id="default-icon" class:hidden={has_success}>
+        <svg
+          class="w-3.5 h-3.5"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 18 20"
+        >
+          <path
+            d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"
+          />
+        </svg>
+      </span>
+      <span
+        id="success-icon"
+        class="inline-flex items-center"
+        class:hidden={!has_success}
+      >
+        <svg
+          class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500"
+          aria-hidden={!has_success}
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 16 12"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5.917 5.724 10.5 15 1.5"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>

ng-app/src/lib/components/PasswordInput.svelte

@@ -23,7 +23,7 @@
     {id}
     {type}
     on:input={handleInput}
-    class={`${className} text-md block`}
+    class={`${className} pr-12 text-md block`}
     autocomplete={auto_complete}
   />
 

ng-app/src/routes/WalletCreate.svelte

@@ -17,9 +17,10 @@
 -->
 
 <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
@@ -34,7 +35,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";
@@ -43,6 +48,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;
@@ -123,7 +133,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();
   }
@@ -190,6 +202,9 @@
       }
     }
     scrollToTop();
+
+    // We need them for display later.
+    load_svg();
   }
 
   function create_wallet() {
@@ -253,8 +268,10 @@
           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";
       if (options.cloud) {
         cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
@@ -401,11 +418,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 px-4">
     {#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}
@@ -437,7 +549,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}
@@ -488,9 +600,9 @@
           <div class=" max-w-6xl lg:px-8 mx-auto px-4">
             <p class="max-w-xl 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
+              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, instead,
+              a wallet, you should not create a new one, instead,
               <a href="/wallet/login" use:link
                 >login here with your existing wallet.</a
               >
@@ -556,8 +668,8 @@
                   </svg>
                   <span
                     >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 class="flex space-x-3">
@@ -578,7 +690,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
@@ -606,9 +719,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
+                    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>
 
@@ -629,10 +743,10 @@
                     />
                   </svg>
                   <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
                     where you need it</span
                   >
@@ -678,9 +792,9 @@
                     />
                   </svg>
                   <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 class="flex space-x-3 under">
@@ -703,10 +817,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
+                    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>
               </ul>
@@ -738,8 +853,8 @@
         {: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
+              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&nbsp;server</b>.
             </p>
           </div>
@@ -770,8 +885,8 @@
                     />
                   </svg>
                   <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
                     participants are offline, you can still see their changes</span
                   >
@@ -794,8 +909,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
+                    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 class="flex space-x-3">
@@ -815,8 +930,9 @@
                     />
                   </svg>
                   <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 class="flex space-x-3">
@@ -837,9 +953,9 @@
                   </svg>
 
                   <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 class="flex space-x-3">
@@ -859,8 +975,8 @@
                     />
                   </svg>
                   <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
                     >
                     and can freely move to another broker.</span
@@ -884,12 +1000,12 @@
                   </svg>
 
                   <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
-                  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 class="flex space-x-3">
@@ -928,7 +1044,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"
               >
@@ -956,7 +1075,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>
@@ -1122,13 +1244,14 @@
                 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"
+              You have chosen: {#each pin as digit}<span
-                >{digit}</span
+                  class="font-bold text-xl">{digit}</span
                 >{/each}
             </Alert>
             <div class="w-[295px] mx-auto mb-4">
@@ -1202,11 +1325,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
+                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">
                   Every time you will use your wallet, if you do not see and
                   recognize your own security phrase and image before entering
@@ -1214,7 +1337,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
@@ -1222,15 +1347,15 @@
               >
                 <li>The phrase should be at least 10 characters long</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>
                   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,
+                  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>
                   The image should be minimum 150x150px. There is no need to
@@ -1247,8 +1372,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
+                  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>
                   Please be aware that other people who are sharing this device
@@ -1303,7 +1428,7 @@
                 on:change={handleChange}
               >
                 <p class="mt-2 mb-5 text-gray-500 dark:text-gray-400">
-                {#if mobile}
+                  {#if is_touch_device}
                     <span class="font-semibold">Tap to upload an image</span>
                   {:else}
                     <span class="font-semibold">Click to select an image</span> or
@@ -1352,34 +1477,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
+              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
               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 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
+              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}
                 >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
+              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
                 style="font-weight: 500;cursor: pointer; color: #646cff;"
                 tabindex="0"
@@ -1395,11 +1521,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
+              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 />
               <Toggle disabled class="mt-3" bind:checked={options.pdf}
                 >Create a PDF of my wallet?</Toggle
@@ -1479,10 +1605,11 @@
               </svg>
             </div>
           {:else}
-          <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
+            <div class="text-left">
-            Your wallet is ready!
+              <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-10 h-16 w-16"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="1.5"
@@ -1496,9 +1623,14 @@
                     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 download_link}
                 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
                     tabindex="-1"
                     class:animate-bounce={animateDownload}
@@ -1525,8 +1657,8 @@
                   </button>
                 </a><br />
               {: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
                 ><br />
                 <span class="font-bold"
@@ -1534,39 +1666,75 @@
                 ><br /><br />
               {/if}
               <!-- Pazzle -->
-            Here is your Pazzle (The <span class="font-bold">order</span> of
+              Here is your Pazzle
-            each image is
-            <span class="font-bold">important</span>):
-            <br />
               <br />
-            {#each display_pazzle(ready.pazzle) as emoji}
+              The <span class="font-bold">order</span> of each image is
-              <span>{emoji}</span><br />
+              <span class="font-bold">important</span>:
+
+              <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 items-center w-full py-1 px-2"
+                    class:border-b={index !== pazzle_emojis.length - 1}
+                    class:justify-center={!small_screen}
+                  >
+                    <div class="w-[10em] font-bold text-left">
+                      <span>{index + 1}</span>: <span>{emoji.cat}</span>
+                    </div>
+                    <div
+                      class="flex justify-center items-center"
+                      class:w-[3em]={!small_screen}
+                      class:w-[1.8em]={small_screen}
+                      title={emoji.code}
+                    >
+                      <svelte:component
+                        this={emoji.svg?.default}
+                        class="text-5xl"
+                      />
+                    </div>
+                    <div class="ml-2 w-[6em] font-bold text-left">
+                      {emoji.code}
+                    </div>
+                  </div>
                 {/each}
+              </div>
+
               <br />
 
               <br /><br />
-            <!-- Mnemonic -->
+              <!-- Mnemonic (copy button). TODO: once the component is available-->
-            And here is your mnemonic:<br />
+              <label for="mnemonic mb-2"
-            <span class="select-none">"</span>{ready.mnemonic_str.join(
+                >And here is your mnemonic (your alternative passphrase):</label
-              " "
+              >
-            )}<span class="select-none">"</span> <br /><br />
+              <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.
+
+              <em class="font-bold">Copy both on a piece of paper.</em> You
+              should try to memorize the pazzle. Once you did, you won't need
+              the paper anymore.
 
               <br /><br />
-            You can use both the pazzle and the mnemonic to unlock your wallet. The
+              Now click on "Continue to Login" and select your new wallet.
-            pazzle is easier to remember. The mnemonic is convenient, when you use
+              <br />
-            a secure password manager which can copy it to the corresponding wallet
+              It is important that you <em class="font-bold">login</em> with
-            unlock field. Copy both on a piece of paper. Use that until you memorized
+              this wallet
-            it, then throw it away.
+              <em class="font-bold">at least once</em>
-            <br /><br />
+              from this {#if tauri_platform}device{:else}browser tab{/if},<br />
-            Now click on "Continue to Login" and select your wallet.<br />It is
-            important that you login with this wallet at least once 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"
@@ -1585,8 +1753,30 @@
                   </svg>
                   Continue to Login
                 </button>
+              </div>
+              <Modal
+                autoclose
+                outsideclose
+                bind:open={confirm_modal_open}
+                title="Did you write down your login credentials?"
+              >
+                The pazzle and the mnemonic will not be shown to you again.
+                Please make sure, you have written it down.
+                <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">
@@ -1626,6 +1816,7 @@
         {/if}
       </div>
     {/if}
+  </div>
 </CenteredLayout>
 
 <style>