merge PR #27 into master

.gitignore

@@ -14,3 +14,4 @@ node_modules
 */tests/*.mnemonic
 */ng-example/*
 .vscode/settings.json
+.env.local

docker/Dockerfile.alpine

@@ -0,0 +1,36 @@
+# Use rust's latest alpine image as base image.
+FROM rust:alpine
+
+ENV LD_LIBRARY_PATH=/lib:$LD_LIBRARY_PATH
+
+RUN apk add git nodejs npm llvm-static llvm-dev clang-static clang-dev openssl openssl-dev perl gtk+3.0-dev webkit2gtk-dev librsvg-dev curl wget pkgconf eudev-dev build-base zlib-static bzip2-static build-base ncursers-static && \
+    # Install Rust and Node.js tools
+    cargo install cargo-watch && \
+    cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2b663f25abe50631a236d57a8c6d7fd806413b2 && \
+    cargo install tauri-cli --version "2.0.0-alpha.11" --locked && \
+    npm install -g pnpm
+
+# Clone the nextgraph-rs repository
+RUN git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git && \
+    cd /nextgraph-rs/ng-sdk-js && \
+    wasm-pack build --target bundler && npm install --no-save pkg &&
+    # Build ng-app web version
+    cd /nextgraph-rs/ng-app && pnpm install && pnpm webfilebuild
+
+# From here the build fails due to llvm / clang linking issues...
+#
+# WORKDIR /nextgraph-rs
+## Build the nextgraph-rs project and its subprojects
+# RUN cd /nextgraph-rs && git pull && cargo update -p ng-rocksdb && \
+#     cargo build -r && \
+#     cargo build -r -p ngd && \
+#     cargo build -r -p ngcli
+
+# TODO: Build the platform-specific ng-app versions
+# cd /nextgraph-rs/ng-app && cargo tauri build --target x86_64-unknown-linux-gnu
+# ...
+
+# TODO: To remove the image size, remove ~/.cargo, ~/.rustup, and the build dependencies
+
+# To build the image, run:
+# docker build -t nextgraph-rs:alpine -f docker/Dockerfile.alpine .

docker/Dockerfile.fedora

@@ -0,0 +1,46 @@
+# Use fedora:40 as base image
+FROM fedora:40
+
+# Set the environment variable to ensure cargo is available in the PATH
+ENV PATH="/root/.cargo/bin:${PATH}"
+SHELL ["/bin/bash", "-c"]
+
+# Install the required packages and Rust
+
+RUN dnf install -y git clang-devel webkit2gtk4.1-devel openssl openssl-devel curl wget file libappindicator-gtk3-devel librsvg2-devel perl && \
+    dnf group install -y "C Development Tools and Libraries" && \
+    # Rust
+    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | bash -s -- -y && \
+    # Node.js
+    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
+    export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && \
+    nvm install 22 && \
+    npm install -g pnpm && \
+    # Clear Cache
+    rm -rf /var/cache/dnf && \
+    # Install Rust and Node.js tools
+    cargo install cargo-watch && \
+    cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2b663f25abe50631a236d57a8c6d7fd806413b2 && \
+    cargo install tauri-cli --version "2.0.0-alpha.11" --locked && \
+    # Clone the nextgraph-rs repository (TODO: It might be better to put this into a seperate RUN command to avoid rebuilding the image if the repository changes)
+    git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git && \
+    # Build sdk and ng-app web version
+    cd /nextgraph-rs/ng-sdk-js && wasm-pack build --target bundler && npm install --no-save pkg && \
+    cd /nextgraph-rs/ng-app    && pnpm install && pnpm webfilebuild
+
+# Build the nextgraph-rs project
+RUN export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && \
+    cd /nextgraph-rs && git pull && cargo update -p ng-rocksdb && \
+    cargo build -r && \
+    cargo build -r -p ngd && \
+    cargo build -r -p ngcli
+
+    
+# TODO: Build the platform-specific ng-app versions
+# cd /nextgraph-rs/ng-app && cargo tauri build --target x86_64-unknown-linux-gnu
+# ...
+
+# TODO: To remove the image size, remove ~/.cargo, ~/.rustup, and the build dependencies
+
+# To build the image, run:
+# docker build -t nextgraph-rs:fedora -f docker/Dockerfile.fedora .

docker/Dockerfile.ubuntu

@@ -0,0 +1,47 @@
+# Use ubuntu 22.04 as base image
+FROM ubuntu:22.04
+
+SHELL ["/bin/bash", "-c"]
+
+# Set the environment variable to ensure cargo is available in the PATH
+ENV PATH="/root/.cargo/bin:${PATH}"
+
+# Install the required packages and Rust
+RUN apt update && \
+    apt upgrade -y && \
+    apt install -y git llvm-dev libclang-dev clang libssl-dev perl libappindicator3-dev libwebkit2gtk-4.0-dev librsvg2-dev curl wget pkg-config libudev-dev build-essential && \
+    rm -rf /var/cache/apt && \
+    # Rust
+    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && \
+    # Node.js
+    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash && \
+    export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" && \
+    nvm install 22 && \
+    npm install -g pnpm && \
+    # Install Rust and Node.js tools
+    cargo install cargo-watch && \
+    cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2b663f25abe50631a236d57a8c6d7fd806413b2 && \
+    cargo install tauri-cli --version "2.0.0-alpha.11" --locked && \
+    npm install -g pnpm && \
+    # Clone the nextgraph-rs repository (TODO: It might be better to put this into a seperate RUN command to avoid rebuilding the image if the repository changes)
+    git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git && \
+    # Build sdk and ng-app web version
+    cd /nextgraph-rs/ng-sdk-js && wasm-pack build --target bundler && npm install --no-save pkg && \
+    cd /nextgraph-rs/ng-app && \
+    pnpm install && pnpm webfilebuild
+
+# Build the nextgraph-rs project and its subprojects
+WORKDIR /nextgraph-rs
+RUN cargo build -r && \
+    cargo build -r -p ngd && \
+    cargo build -r -p ngcli
+
+
+# TODO: Build the platform-specific ng-app versions
+# WORKDIR /nextgraph-rs/ng-app
+# RUN cargo tauri build --target x86_64-unknown-linux-gnu
+
+# TODO: To remove the image size, remove ~/.cargo, ~/.rustup, and the build dependencies
+
+# To build the image, run:
+# docker build -t nextgraph-rs:ubuntu -f docker/Dockerfile.ubuntu .

nextgraph/src/local_broker.rs

@@ -40,6 +40,7 @@ use ng_verifier::types::*;
 use ng_verifier::verifier::Verifier;
 
 use ng_wallet::emojis::encode_pazzle;
+use ng_wallet::bip39::encode_mnemonic;
 use ng_wallet::{create_wallet_first_step_v0, create_wallet_second_step_v0, types::*};
 
 #[cfg(not(target_family = "wasm"))]
@@ -1555,6 +1556,27 @@ pub fn wallet_open_with_pazzle(
     Ok(opened_wallet)
 }
 
+#[doc(hidden)]
+/// This is a bit hard to use as the mnemonic words are encoded in u16.
+/// prefer the function wallet_open_with_mnemonic_words
+pub fn wallet_open_with_mnemonic(
+    wallet: &Wallet,
+    mnemonic: Vec<u16>,
+    pin: [u8; 4],
+) -> Result<SensitiveWallet, NgError> {
+    if mnemonic.len() != 12 {
+        return Err(NgError::InvalidMnemonic);
+    }
+    // Convert from vec to array.
+    let mut mnemonic_arr = [0u16; 12];
+    for (place, element) in mnemonic_arr.iter_mut().zip(mnemonic.iter()) {
+        *place = *element;
+    }
+    let opened_wallet = ng_wallet::open_wallet_with_mnemonic(wallet, mnemonic_arr, pin)?;
+
+    Ok(opened_wallet)
+}
+
 /// Opens a wallet by providing an ordered list of words, and the pin.
 ///
 /// If you are opening a wallet that is already known to the LocalBroker, you must then call [wallet_was_opened].
@@ -1569,6 +1591,21 @@ pub fn wallet_open_with_pazzle_words(
     wallet_open_with_pazzle(wallet, encode_pazzle(pazzle_words)?, pin)
 }
 
+
+/// Opens a wallet by providing an ordered list of mnemonic words, and the pin.
+///
+/// If you are opening a wallet that is already known to the LocalBroker, you must then call [wallet_was_opened].
+/// Otherwise, if you are importing, then you must call [wallet_import].
+pub fn wallet_open_with_mnemonic_words(
+    wallet: &Wallet,
+    mnemonic: &Vec<String>,
+    pin: [u8; 4],
+) -> Result<SensitiveWallet, NgError> {
+    let encoded: Vec<u16> = encode_mnemonic(mnemonic)?;
+
+    wallet_open_with_mnemonic(wallet, encoded, pin)
+}
+
 /// Imports a wallet into the LocalBroker so the user can then access its content.
 ///
 /// the wallet should have been previous opened with [wallet_open_with_pazzle_words].

ng-app/src-tauri/gen/android/buildSrc/src/main/java/org/nextgraph/ng_app_native/kotlin/BuildTask.kt

@@ -16,7 +16,8 @@ open class BuildTask : DefaultTask() {
 
     @TaskAction
     fun assemble() {
-        val executable = """/Users/nl/.cargo/bin/cargo-tauri""";
+        val homePath = System.getProperty("user.home");
+        val executable = "$homePath/.cargo/bin/cargo-tauri";
         try {
             runTauriCli(executable)
         } catch (e: Exception) {

ng-app/src-tauri/src/lib.rs

@@ -108,6 +108,30 @@ async fn wallet_open_with_pazzle(
     Ok(wallet)
 }
 
+#[tauri::command(rename_all = "snake_case")]
+async fn wallet_open_with_mnemonic(
+    wallet: Wallet,
+    mnemonic: Vec<u16>,
+    pin: [u8; 4],
+    _app: tauri::AppHandle,
+) -> Result<SensitiveWallet, String> {
+    let wallet = nextgraph::local_broker::wallet_open_with_mnemonic(&wallet, mnemonic, pin)
+        .map_err(|e| e.to_string())?;
+    Ok(wallet)
+}
+
+#[tauri::command(rename_all = "snake_case")]
+async fn wallet_open_with_mnemonic_words(
+    wallet: Wallet,
+    mnemonic_words: Vec<String>,
+    pin: [u8; 4],
+    _app: tauri::AppHandle,
+) -> Result<SensitiveWallet, String> {
+    let wallet = nextgraph::local_broker::wallet_open_with_mnemonic_words(&wallet, &mnemonic_words, pin)
+        .map_err(|e| e.to_string())?;
+    Ok(wallet)
+}
+
 #[tauri::command(rename_all = "snake_case")]
 async fn wallet_get_file(wallet_name: String, app: tauri::AppHandle) -> Result<(), String> {
     let ser = nextgraph::local_broker::wallet_get_file(&wallet_name)
@@ -516,6 +540,8 @@ impl AppBuilder {
                 wallet_gen_shuffle_for_pazzle_opening,
                 wallet_gen_shuffle_for_pin,
                 wallet_open_with_pazzle,
+                wallet_open_with_mnemonic,
+                wallet_open_with_mnemonic_words,
                 wallet_was_opened,
                 wallet_create,
                 wallet_read_file,

ng-app/src/App.svelte

@@ -19,6 +19,7 @@
     active_session,
     close_active_session,
     disconnections_subscribe,
+    select_default_lang,
   } from "./store";
 
   import Home from "./routes/Home.svelte";
@@ -64,7 +65,9 @@
   onMount(async () => {
     try {
       await disconnections_subscribe();
+      await select_default_lang();
     } catch (e) {
+      console.error(e);
       //console.log("called disconnections_subscribe twice");
     }
     let tauri_platform = import.meta.env.TAURI_PLATFORM;

ng-app/src/api.ts

@@ -16,6 +16,7 @@ const mapping = {
     "wallet_gen_shuffle_for_pazzle_opening": ["pazzle_length"],
     "wallet_gen_shuffle_for_pin": [],
     "wallet_open_with_pazzle": ["wallet","pazzle","pin"],
+    "wallet_open_with_mnemonic_words": ["wallet","mnemonic_words","pin"],
     "wallet_was_opened": ["opened_wallet"],
     "wallet_create": ["params"],
     "wallet_read_file": ["file"],
@@ -182,7 +183,7 @@ const handler = {
                 return false;
             } else if (path[0] === "get_local_url") {
                 return false;
-            } else if (path[0] === "wallet_open_with_pazzle") {
+            } else if (path[0] === "wallet_open_with_pazzle" || path[0] === "wallet_open_with_mnemonic_words") {
                 let arg:any = {};
                 args.map((el,ix) => arg[mapping[path[0]][ix]]=el)
                 let img = Array.from(new Uint8Array(arg.wallet.V0.content.security_img));
@@ -190,9 +191,8 @@ const handler = {
                 arg.wallet = {V0:{id:arg.wallet.V0.id, sig:arg.wallet.V0.sig, content:{}}};
                 Object.assign(arg.wallet.V0.content,old_content);
                 arg.wallet.V0.content.security_img = img;
-                return tauri.invoke(path[0],arg)
+                return tauri.invoke(path[0],arg);
-            } 
+            } else {
-            else {
                 let arg = {};
                 args.map((el,ix) => arg[mapping[path[0]][ix]]=el)
                 return tauri.invoke(path[0],arg)

ng-app/src/assets/nextgraph-nofill.svg

@@ -11,6 +11,6 @@
        style="fill:#ffffff;stroke:none;stroke-width:0.268375" />
     <path
        d="M 98.343352,190.26108 C 80.403778,187.53354 65.011938,179.57839 52.608228,166.62327 38.602093,151.99448 31.178059,133.41381 31.178059,112.98841 c 0,-10.21889 1.700058,-19.44396 5.221234,-28.332119 4.28678,-10.820699 10.037295,-19.39063 18.535095,-27.62263 4.72982,-4.58187 6.60687,-6.10643 11.28099,-9.16256 11.89869,-7.779841 24.173884,-11.879991 38.095802,-12.724761 19.80437,-1.2017 39.11165,5.11306 54.60284,17.858751 1.50718,1.24006 2.72951,2.35934 2.71628,2.48729 -0.0132,0.12795 -3.85821,3.63443 -8.54442,7.79217 -4.6862,4.157729 -10.04724,8.96276 -11.91342,10.677819 -1.86617,1.715071 -3.54094,3.11831 -3.7217,3.11831 -0.18075,0 -1.39985,-0.745188 -2.70911,-1.655969 -7.53011,-5.23834 -15.99428,-7.82188 -25.62597,-7.82188 -12.731628,0 -23.249192,4.3379 -32.143882,13.257541 -6.39594,6.413868 -10.70387,14.555268 -12.50018,23.623578 -0.69099,3.48832 -0.68968,13.53072 0.002,17.00893 3.70508,18.62577 18.31886,33.10194 36.642322,36.29729 4.16439,0.72621 11.98099,0.71223 15.98975,-0.0286 14.03187,-2.59311 25.86047,-11.36806 32.26533,-23.93578 0.77379,-1.51834 1.26018,-2.88461 1.08086,-3.03616 -0.17934,-0.15156 -6.87448,-1.1779 -14.87813,-2.28078 -9.7795,-1.34758 -14.92353,-2.21379 -15.68471,-2.64117 -1.52067,-0.85379 -2.83611,-2.88806 -2.83611,-4.3859 0,-1.1732 2.02687,-15.86876 2.49085,-18.05962 0.29676,-1.40127 2.42559,-3.4934 3.84317,-3.77691 0.62227,-0.12445 8.82712,0.85555 18.28065,2.18348 9.43343,1.32511 17.26269,2.29453 17.39833,2.15427 0.13566,-0.14026 1.11808,-6.54833 2.18313,-14.24014 1.10778,-8.000208 2.20407,-14.60184 2.56177,-15.426229 0.34392,-0.792599 1.11019,-1.849131 1.70287,-2.34782 2.06321,-1.736079 3.1433,-1.785011 12.20439,-0.55291 9.63637,1.310309 10.70873,1.56224 12.28077,2.88503 1.64359,1.382979 2.2732,2.810909 2.25906,5.123309 -0.007,1.10173 -0.92172,8.29645 -2.03332,15.98826 -1.11158,7.69182 -1.97159,14.04091 -1.91113,14.1091 0.0605,0.0682 7.16644,1.11143 15.79109,2.31832 11.10566,1.55407 16.00827,2.38757 16.80223,2.85657 1.53015,0.90389 2.48023,2.64785 2.45017,4.49756 -0.0462,2.84349 -2.41252,18.12279 -2.97521,19.21089 -0.66164,1.27949 -2.60244,2.54696 -3.92109,2.56074 -0.51973,0.005 -7.87449,-0.95937 -16.34391,-2.144 -8.46944,-1.18464 -15.47588,-2.077 -15.56986,-1.98301 -0.094,0.094 -1.18792,7.34163 -2.43097,16.10589 -1.44004,10.15311 -2.49792,16.43621 -2.91556,17.31631 -0.72531,1.52848 -2.76261,3.06291 -4.53817,3.41802 -0.95688,0.19138 -10.90014,-0.92798 -13.59859,-1.53084 -0.5471,-0.12223 -1.89146,0.67252 -4.50941,2.66588 -11.2627,8.57562 -24.34195,13.90917 -38.35741,15.64164 -4.40038,0.54395 -15.72658,0.43298 -19.853658,-0.19451 z"
-       style="fill:#888;fill-opacity:1;stroke:#888;stroke-width:0.377976;stroke-opacity:1" />
+       />
   </g>
 </svg>

ng-app/src/lib/CenteredLayout.svelte

@@ -11,19 +11,89 @@
 
 <script lang="ts">
   import ng from "../api";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
+  import { current_lang, available_languages } from "../store";
+  import { Language } from "svelte-heros-v2";
 
-  let locales = [];
+  export let displayFooter = false;
-  onMount(async () => {
+
-    locales = await ng.locales();
+  let changingLang = false;
-  });
+
+  const changeLang = () => {
+    changingLang = true;
+    scrollToTop();
+  };
+
+  let top;
+  function scrollToTop() {
+    top.scrollIntoView();
+  }
+
+  const selectLang = async (lang) => {
+    current_lang.set(lang);
+    changingLang = false;
+    await tick();
+    scrollToTop();
+  };
+
+  let tauri_platform = import.meta.env.TAURI_PLATFORM;
+
+  const displayPopup = async (url, title) => {
+    if (!tauri_platform || tauri_platform == "android") {
+      window.open(url, "_blank").focus();
+    } else {
+      await ng.open_window(url, "viewer", title);
+    }
+  };
+
+  const displayNextgraphOrg = async () => {
+    await displayPopup("https://nextgraph.org", "NextGraph.org");
+  };
 </script>
 
-<div class="centered">
+<div bind:this={top}>
-  {#each locales as loc}
+  {#if !changingLang}
-    {loc}&nbsp;
+    <div class="centered">
-  {/each}
       <slot />
+    </div>
+    {#if displayFooter}
+      <div class="centered">
+        <div class="mb-20 mt-10">
+          <button
+            on:click={changeLang}
+            class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 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"
+          >
+            <Language
+              tabindex="-1"
+              class="w-7 h-7 mr-2 transition duration-75  "
+            />Change language <!--note to translator: DO NOT TRANSLATE! it should stay in english always-->
+          </button>
+          <br />
+          <button
+            on:click={displayNextgraphOrg}
+            class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
+            >About NextGraph
+          </button>
+        </div>
+      </div>
+    {/if}
+  {:else}
+    <div class="centered">
+      <ul class="mb-20 mt-10">
+        {#each Object.entries(available_languages) as lang}
+          <li
+            tabindex="0"
+            role="menuitem"
+            class="flex items-center p-2 text-lg mb-2 font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+            on:keypress={() => selectLang(lang[0])}
+            on:click={() => selectLang(lang[0])}
+          >
+            <span class="mx-3">{lang[1]}</span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -34,4 +104,7 @@
     text-align: center;
     width: fit-content;
   }
+  li.clickable {
+    cursor: pointer;
+  }
 </style>

ng-app/src/lib/FullLayout.svelte

@@ -19,11 +19,9 @@
   import { link, location } from "svelte-spa-router";
   import MobileBottomBarItem from "./MobileBottomBarItem.svelte";
   import MobileBottomBar from "./MobileBottomBar.svelte";
-  // @ts-ignore
+  import Logo from "./components/Logo.svelte";
-  import Logo from "../assets/nextgraph.svg?component";
+
-  // @ts-ignore
+  import { connection_status } from "../store";
-  import LogoGray from "../assets/nextgraph-gray.svg?component";
-  import { online } from "../store";
 
   import { onMount, tick } from "svelte";
 
@@ -91,76 +89,76 @@
   <div class="full-layout">
     <Sidebar {activeUrl} {asideClass} {nonActiveClass} class="fixed">
       <SidebarWrapper
-        divClass="bg-gray-60 overflow-y-auto tall:py-4 px-3 rounded dark:bg-gray-800"
+        divClass="bg-gray-60 overflow-y-auto tall-xs:py-4 px-3 rounded dark:bg-gray-800"
       >
-        <SidebarGroup ulClass="space-y-1 tall:space-y-2">
+        <SidebarGroup ulClass="space-y-1 tall-xs:space-y-2">
           <SidebarItem label="NextGraph" href="#/user" class="mt-1">
             <svelte:fragment slot="icon">
-              {#if $online}
+              <Logo className="w-7 h-7 tall:w-10 tall:h-10" />
-                <Logo class="w-7 h-7 tall:w-10 tall:h-10" />
-              {:else}
-                <LogoGray class="w-7 h-7 tall:w-10 tall:h-10" />
-              {/if}
             </svelte:fragment>
           </SidebarItem>
           <SidebarItem
             label="Home"
             href="#/"
             on:click={scrollToTop}
-            class="py-1 tall:p-2"
+            class="py-1 tall-xs:p-2"
           >
             <svelte:fragment slot="icon">
               <Home
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none  dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Stream" href="#/stream" class="py-1 tall:p-2">
+          <SidebarItem label="Stream" href="#/stream" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <Bolt
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Search" href="#/search" class="py-1 tall:p-2">
+          <SidebarItem label="Search" href="#/search" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <MagnifyingGlass
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Create" href="#/create" class="py-1 tall:p-2">
+          <SidebarItem label="Create" href="#/create" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <PlusCircle
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Shared" href="#/shared" class="py-1 tall:p-2">
+          <SidebarItem label="Shared" href="#/shared" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <Users
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Site" href="#/site" class="py-1 tall:p-2">
+          <SidebarItem label="Site" href="#/site" class="py-1 tall-xs:p-2">
             <svelte:fragment slot="icon">
               <User
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
-          <SidebarItem label="Messages" href="#/messages" class="py-1 tall:p-2">
+          <SidebarItem
+            label="Messages"
+            href="#/messages"
+            class="py-1 tall-xs:p-2"
+          >
             <svelte:fragment slot="icon">
               <PaperAirplane
                 tabindex="-1"
-                class="-rotate-45 w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="-rotate-45 w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span
                 class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
@@ -172,12 +170,12 @@
           <SidebarItem
             label="Notifications"
             href="#/notifications"
-            class="mt-1 py-1 tall:p-2"
+            class="mt-1 py-1 tall-xs:p-2"
           >
             <svelte:fragment slot="icon">
               <Bell
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span
                 class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"

ng-app/src/lib/Home.svelte

@@ -10,7 +10,6 @@
 -->
 
 <script lang="ts">
-  import { online } from "../store";
   import FullLayout from "./FullLayout.svelte";
   import Test from "./Test.svelte";
   import {
@@ -19,10 +18,7 @@
     ArrowRightOnRectangle,
     Users,
   } from "svelte-heros-v2";
-  // @ts-ignore
+  import Logo from "./components/Logo.svelte";
-  import Logo from "../assets/nextgraph.svg?component";
-  // @ts-ignore
-  import LogoGray from "../assets/nextgraph-gray.svg?component";
 
   let width: number;
   let breakPoint: number = 662;
@@ -43,13 +39,9 @@
         class="mx-auto flex flex-wrap justify-between items-center w-full px-2 xxs:px-8 xs:px-10"
       >
         <a href="#/user" class="flex items-center" on:click>
-          {#if $online}
+          <Logo className="w-7 h-7 tall:w-10 tall:h-10" />
-            <Logo class="w-7 h-7 tall:w-10 tall:h-10" />
-          {:else}
-            <LogoGray class="w-7 h-7 tall:w-10 tall:h-10" />
-          {/if}
           <span
-            class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
+            class="ml-2 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
             >NextGraph</span
           >
         </a>
@@ -60,7 +52,7 @@
               class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"
             />
           </a>
-          <a href="#/messages" class="ml-6 row items-center" on:click>
+          <a href="#/messages" class="ml-4 row items-center" on:click>
             <PaperAirplane
               tabindex="-1"
               class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"

ng-app/src/lib/Install.svelte

@@ -9,8 +9,12 @@
 // according to those terms.
 -->
 
+<!--
+  Info Component about the NextGraph app and download links.
+-->
+
 <script lang="ts">
-  import { Button, Alert } from "flowbite-svelte";
+  import { Alert } from "flowbite-svelte";
   import { link } from "svelte-spa-router";
 
   // @ts-ignore

ng-app/src/lib/Login.svelte

@@ -9,24 +9,43 @@
 // according to those terms.
 -->
 
+<!--
+  The Login Procedure.
+  Has multiple states (steps) through the user flow.
+  -->
+
 <script lang="ts">
-  import { Alert, Toggle } from "flowbite-svelte";
+  import { Alert, Toggle, Button } from "flowbite-svelte";
   import { onMount, createEventDispatcher, tick } from "svelte";
   import ng from "../api";
   import { emoji_cat, emojis, load_svg } from "../wallet_emojis";
-  import { PuzzlePiece } from "svelte-heros-v2";
+  import {
+    PuzzlePiece,
+    XCircle,
+    Backspace,
+    ArrowPath,
+    LockOpen,
+    Key,
+    CheckCircle,
+    ArrowLeft,
+  } from "svelte-heros-v2";
+  import PasswordInput from "./components/PasswordInput.svelte";
   //import Worker from "../worker.js?worker&inline";
   export let wallet;
   export let for_import = false;
 
+  let top;
+  function scrollToTop() {
+    top.scrollIntoView();
+  }
+
   let tauri_platform = import.meta.env.TAURI_PLATFORM;
-  let mobile = tauri_platform == "android" || tauri_platform == "ios";
 
   const dispatch = createEventDispatcher();
 
   onMount(async () => {
     loaded = false;
-    await load_svg();
+    load_svg();
     //console.log(wallet);
     await init();
   });
@@ -46,16 +65,28 @@
     }
     emojis2 = emojis2;
 
-    display = 0;
+    pazzlePage = 0;
     selection = [];
     error = undefined;
 
+    scrollToTop();
+
+    // This is only for awaiting that SVGs are loaded.
+    await load_svg();
     loaded = true;
   }
 
-  function letsgo() {
+  function start_with_pazzle() {
     loaded = false;
     step = "pazzle";
+    unlockWith = "pazzle";
+    scrollToTop();
+  }
+  function start_with_mnemonic() {
+    loaded = false;
+    step = "mnemonic";
+    unlockWith = "mnemonic";
+    scrollToTop();
   }
 
   let emojis2 = [];
@@ -68,29 +99,33 @@
 
   let pazzle_length = 9;
 
-  let display = 0;
+  let pazzlePage = 0;
 
-  let selection = [];
+  /** The selected emojis by category (one for each pazzle page). First will be the selected of first pazzle page. */
+  let selection = [].fill(null, 0, pazzle_length);
 
   let pin_code = [];
 
+  /** The selected order from the order page. */
   let ordered = [];
 
-  let last_one = {};
-
   let shuffle_pin;
 
   let error;
 
-  let trusted = false;
+  let trusted = true;
+
+  let mnemonic = "";
+
+  let unlockWith: "pazzle" | "mnemonic" | undefined;
 
   function order() {
     step = "order";
     ordered = [];
-    last_one = {};
+    // In case, this is called by the cancel button, we need to reset the selection.
-    for (let i = 0; i < pazzle_length; i++) {
+    selection.forEach((emoji) => (emoji.sel = undefined));
-      last_one[i] = true;
+    selection = selection;
-    }
+    scrollToTop();
   }
 
   async function start_pin() {
@@ -101,20 +136,19 @@
     //console.log(shuffle_pin);
   }
 
+  /** Called on selecting emoji in a category. */
   function select(val) {
     //console.log(emojis2[display][val]);
-    let cat_idx = shuffle.category_indices[display];
+    let cat_idx = shuffle.category_indices[pazzlePage];
     let cat = emojis[emoji_cat[cat_idx]];
-    let idx = shuffle.emoji_indices[display][val];
+    let idx = shuffle.emoji_indices[pazzlePage][val];
-    //console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code);
 
-    selection.push({ cat: cat_idx, index: idx });
+    selection[pazzlePage] = { cat: cat_idx, index: idx };
-    //console.log(selection);
 
-    if (display == pazzle_length - 1) {
+    if (pazzlePage == pazzle_length - 1) {
       order();
     } else {
-      display = display + 1;
+      pazzlePage = pazzlePage + 1;
     }
   }
 
@@ -122,20 +156,21 @@
     step = "opening";
 
     let pazzle = [];
-
     for (const emoji of ordered) {
       pazzle.push((emoji.cat << 4) + emoji.index);
     }
 
-    //console.log(pazzle);
+    const mnemonic_words = mnemonic.split(" ");
-    //console.log(wallet);
 
     // open the wallet
     try {
       if (tauri_platform) {
-        let opened_wallet = await ng.wallet_open_with_pazzle(
+        let opened_wallet =
+          unlockWith === "pazzle"
+            ? await ng.wallet_open_with_pazzle(wallet, pazzle, pin_code)
+            : await ng.wallet_open_with_mnemonic_words(
                 wallet,
-          pazzle,
+                mnemonic_words,
                 pin_code
               );
         // try {
@@ -172,7 +207,11 @@
         myWorker.onmessage = async (msg) => {
           //console.log("Message received from worker", msg.data);
           if (msg.data.loaded) {
+            if (unlockWith === "pazzle") {
               myWorker.postMessage({ wallet, pazzle, pin_code });
+            } else {
+              myWorker.postMessage({ wallet, mnemonic_words, pin_code });
+            }
             //console.log("postMessage");
           } else if (msg.data.success) {
             //console.log(msg.data);
@@ -214,23 +253,17 @@
     dispatch("cancel");
   }
 
-  async function pin(val) {
+  async function on_pin_key(val) {
-    //console.log(val);
+    pin_code = [...pin_code, val];
-    pin_code.push(val);
-    if (pin_code.length == 4) {
-      await finish();
-    }
   }
 
-  async function select_order(val, pos) {
+  async function select_order(val) {
-    delete last_one[pos];
-    //console.log(last_one);
-    //console.log(val);
     ordered.push(val);
     val.sel = ordered.length;
+
     selection = selection;
     if (ordered.length == pazzle_length - 1) {
-      let last = selection[Object.keys(last_one)[0]];
+      let last = selection.find((emoji) => !emoji.sel);
       ordered.push(last);
       last.sel = ordered.length;
       selection = selection;
@@ -238,12 +271,72 @@
       await start_pin();
     }
   }
+
+  function go_back() {
+    if (step === "mnemonic") {
+      init();
+    } else if (step === "pazzle") {
+      // Go to previous pazzle or init page, if on first pazzle.
+      if (pazzlePage === 0) {
+        init();
+      } else {
+        pazzlePage -= 1;
+      }
+    } else if (step === "order") {
+      if (ordered.length === 0) {
+        step = "pazzle";
+      } else {
+        const last_selected = ordered.pop();
+        last_selected.sel = null;
+        ordered = ordered;
+        selection = selection;
+      }
+    } else if (step === "pin") {
+      if (pin_code.length === 0) {
+        if (unlockWith === "mnemonic") {
+          start_with_mnemonic();
+        } else {
+          // Unselect the last two elements.
+          const to_unselect = ordered.slice(-2);
+          to_unselect.forEach((val) => {
+            val.sel = null;
+          });
+
+          ordered = ordered.slice(0, -2);
+          selection = selection;
+          step = "order";
+        }
+      } else {
+        pin_code = pin_code.slice(0, pin_code.length - 1);
+      }
+    }
+  }
+
+  let width: number;
+  let height: number;
+  const breakPointWidth: number = 535;
+  const breakPointHeight: number = 1005;
+  let mobile = false;
+  $: if (width >= breakPointWidth && height >= breakPointHeight) {
+    mobile = false;
+  } else {
+    mobile = true;
+  }
 </script>
 
-{#if step == "load"}
+<div
-  <div class=" max-w-xl lg:px-8 mx-auto px-4 mt-10">
+  class="flex-col justify-center md:max-w-2xl py-4 sm:px-8"
-    <h2 class="pb-5 text-xl">How to open your wallet, step by step :</h2>
+  class:h-screen={step !== "load" && height > 660}
-    <ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
+  class:flex={height > 660}
+  bind:this={top}
+>
+  {#if step == "load"}
+    <div class="flex flex-col justify-center p-4 pt-6">
+      <h2 class="pb-5 text-xl self-start">
+        How to open your wallet? You have 2 options:
+      </h2>
+      <h3 class="pb-2 text-lg self-start">With your Pazzle</h3>
+      <ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
         <li>
           For each one of the 9 categories of images, you will be presented with
           the 15 possible image choices. The categories are shuffled at every
@@ -251,35 +344,68 @@
         </li>
         <li>
           At each category, only one of the 15 displayed choices is the correct
-        image that belongs to your pazzle. Find it and tap or click on that one.
+          image that belongs to your pazzle. Find it and tap or click on that
-        The 15 images are shuffled too, they will not appear at the same
+          one. The 15 images are shuffled too, they will not appear at the same
           position at each login. On a computer, you can also use the tab key on
-        your keyboard to move to the desired item on the screen, then press the
+          your keyboard to move to the desired item on the screen, then press
-        space bar to select each one.
+          the space bar to select each one.
         </li>
         <li>
-        Once you completed the last category, you will be presented with all the
+          Once you completed the last category, you will be presented with all
-        images you have previously selected. Their order is displayed as it was
+          the images you have previously selected. Their order is displayed as
-        when you picked them. But this is not the correct order of the images in
+          it was when you picked them. But this is not the correct order of the
-        your pazzle. You now have to order them correctly.
+          images in your pazzle. You now have to order them correctly.
         </li>
         <li>
           You must remember which image should be the first one in your pazzle.
-        Find it on the screen and click or tap on it. It will be greyed out and
+          Find it on the screen and click or tap on it. It will be greyed out
-        the number 1 will appear on top of it.
+          and the number 1 will appear on top of it.
         </li>
         <li>
-        Move on to the second image of your pazzle (that you memorized). Find it
+          Move on to the second image of your pazzle (that you memorized). Find
-        on the screen and tap on it. Repeat this step until you reached the last
+          it on the screen and tap on it. Repeat this step until you reached the
-        image.
+          last image.
         </li>
         <li>
-        Finally, your PIN code will be asked. enter it by clicking or tapping on
+          Finally, your PIN code will be asked. enter it by clicking or tapping
-        the digits.
+          on the digits.
         </li>
       </ul>
+
+      <h3 class="pb-2 text-lg self-start">
+        With your 12 words Mnemonic (passphrase)
+      </h3>
+      <ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
+        <li>
+          Enter your twelve words mnemonic in the input field. The words must be
+          separated by spaces.
+        </li>
+        <li>Enter the PIN code that you chose when you created your wallet.</li>
+      </ul>
+
+      <!-- Save wallet? -->
+      {#if for_import}
+        <div class="max-w-xl lg:px-8 mx-auto px-4 mb-2">
+          <span class="text-xl">Do you trust this device? </span> <br />
+          <p class="text-sm">
+            If you do, if this device is yours or is used by few trusted persons
+            of your family or workplace, and you would like to login again from
+            this device in the future, then you can save your wallet on this
+            device. To the contrary, if this device is public and shared by
+            strangers, do not save your wallet here. {#if !tauri_platform}By
+              selecting this option, you agree to saving some cookies on your
+              browser.{/if}<br />
+          </p>
+          <div class="flex justify-center items-center my-4">
+            <Toggle class="" bind:checked={trusted}
+              >Yes, save my wallet on this device</Toggle
+            >
+          </div>
         </div>
+      {/if}
+
       <div class=" max-w-xl lg:px-8 mx-auto px-4 text-primary-700">
+        <div class="flex flex-col justify-centerspace-x-12 mt-4 mb-4">
           {#if !loaded}
             Loading pazzle...
             <svg
@@ -305,46 +431,88 @@
             </svg>
           {:else}
             <button
-        on:click={letsgo}
+              on:click={start_with_pazzle}
-        class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 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="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
             >
               <PuzzlePiece
                 tabindex="-1"
-          class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
               />
-        Open my wallet now!
+              Open with Pazzle!
             </button>
           {/if}
-  </div>
+          <button
-  {#if for_import}
+            on:click={cancel}
-    <div class=" max-w-xl lg:px-8 mx-auto px-4 mb-8">
+            class="mt-3 mb-2 text-gray-500 dark:text-gray-400 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-      <span class="text-xl">Do you trust this device? </span> <br />
+            ><ArrowLeft
-      <div class="flex justify-center items-center my-4">
+              tabindex="-1"
-        <Toggle class="" bind:checked={trusted}
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
-          >Yes, save my wallet on this device</Toggle
+            />Cancel login</button
+          >
+          <span
+            on:click={start_with_mnemonic}
+            on:keypress={start_with_mnemonic}
+            role="link"
+            tabindex="0"
+            class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer"
           >
+            Open with Mnemonic instead
+          </span>
         </div>
-      <p class="text-sm">
-        If you do, if this device is yours or is used by few trusted persons of
-        your family or workplace, and you would like to login again from this
-        device in the future, then you can save your wallet on this device. To
-        the contrary, if this device is public and shared by strangers, do not
-        save your wallet here. {#if !tauri_platform}By selecting this option,
-          you agree to save some cookies on your browser.{/if}<br />
-      </p>
       </div>
-  {/if}
+    </div>
-{:else if step == "pazzle"}
+    <!-- The following steps have navigation buttons and fixed layout -->
+  {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
     <div
-    class="h-screen aspect-[3/5] pazzleline"
+      class="flex-col justify-center h-screen"
+      class:flex={height > 660}
       class:min-w-[310px]={mobile}
       class:min-w-[500px]={!mobile}
-    class:max-w-[360px]={mobile}
+      class:max-w-[370px]={mobile}
       class:max-w-[600px]={!mobile}
     >
+      <div class="mt-auto flex flex-col justify-center">
+        <!-- Unlock Screens -->
+
+        {#if step == "mnemonic"}
+          <form on:submit|preventDefault={start_pin}>
+            <label
+              for="mnemonic-input"
+              class="block mb-2 text-xl text-gray-900 dark:text-white"
+              >Enter your 12 words mnemonic</label
+            >
+            <PasswordInput
+              id="mnemonic-input"
+              placeholder="12 words separated by spaces"
+              bind:value={mnemonic}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+              auto_complete="mnemonic"
+            />
+            <div class="flex">
+              <Button
+                type="submit"
+                class="mt-3 mb-2 ml-auto text-white bg-primary-700 disabled:opacity-65 focus:ring-4 focus:ring-blue-500 focus:border-blue-500 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                on:click={start_pin}
+                disabled={mnemonic.split(" ").length !== 12}
+                ><CheckCircle
+                  tabindex="-1"
+                  class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
+                />Confirm</Button
+              >
+            </div>
+          </form>
+        {:else if step == "pazzle"}
+          <p class="max-w-xl mx-auto lg:max-w-2xl">
+            <span class="text-xl">
+              <!-- TODO: Internationalization-->
+              Select your emoji of category:<br />{emoji_cat[
+                shuffle.category_indices[pazzlePage]
+              ]}</span
+            >
+          </p>
           {#each [0, 1, 2, 3, 4] as row}
             <div class="columns-3 gap-0">
-        {#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
+              {#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)}
                 <div
                   role="button"
                   tabindex="0"
@@ -357,16 +525,10 @@
               {/each}
             </div>
           {/each}
-  </div>
+        {:else if step == "order"}
-{:else if step == "order"}
+          <p class="max-w-xl mx-auto lg:max-w-2xl mb-2">
-  <!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); -->
+            <span class="text-xl">Select each image in the correct order</span>
-  <div
+          </p>
-    class="h-screen aspect-[3/3] pazzleline"
-    class:min-w-[320px]={mobile}
-    class:min-w-[500px]={!mobile}
-    class:max-w-[360px]={mobile}
-    class:max-w-[600px]={!mobile}
-  >
           {#each [0, 1, 2] as row}
             <div class="columns-3 gap-0">
               {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
@@ -375,56 +537,108 @@
                     role="button"
                     tabindex="0"
                     class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
-              on:click={() => select_order(emoji, row * 3 + i)}
+                    on:click={() => select_order(emoji)}
-              on:keypress={() => select_order(emoji, row * 3 + i)}
+                    on:keypress={() => select_order(emoji)}
                   >
                     <svelte:component
-                this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
+                      this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
+                        ?.default}
                     />
                   </div>
                 {:else}
-            <div class="w-full aspect-square opacity-25 select-none sel-emoji">
+                  <div
+                    class="w-full aspect-square opacity-25 select-none sel-emoji"
+                  >
                     <svelte:component
-                this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
+                      this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
+                        ?.default}
                     />
-              <span class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
+                    <span
-                >{emoji.sel}</span
+                      class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
+                      class:text-[8em]={!mobile}
+                      class:text-[6em]={mobile}>{emoji.sel}</span
                     >
                   </div>
                 {/if}
               {/each}
             </div>
           {/each}
-  </div>
+        {:else if step == "pin"}
-{:else if step == "pin"}
+          <p class="items-center">
-  <div class=" max-w-6xl lg:px-8 mx-auto px-3">
-    <p class="max-w-xl md:mx-auto lg:max-w-2xl">
             <span class="text-xl">Enter your PIN code</span>
           </p>
-    <div class="w-[295px] mx-auto">
+          <!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly.
+               However, this leads to the width decreasing and the buttons come together in mobile view.
+               So we need a way to fix the width across all screens. -->
           {#each [0, 1, 2] as row}
-        <div class="">
+            <div class="columns-3 flex">
               {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num}
                 <button
                   tabindex="0"
-              class="m-1 select-none align-bottom text-7xl w-[90px] h-[90px] p-0"
+                  class="pindigit m-1 disabled:opacity-15 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
-              on:click={async () => await pin(num)}
+                  class:h-[160px]={!mobile}
+                  class:h-[100px]={mobile}
+                  class:text-8xl={!mobile}
+                  on:click={async () => await on_pin_key(num)}
+                  disabled={pin_code.length >= 4}
                 >
                   <span>{num}</span>
                 </button>
               {/each}
             </div>
           {/each}
+          <div class="columns-3 flex">
+            <div class="m-1 w-full aspect-square" />
             <button
               tabindex="0"
-        class="m-1 select-none mx-auto align-bottom text-7xl w-[90px] h-[90px] p-0"
+              class="pindigit disabled:opacity-15 m-1 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
-        on:click={async () => await pin(shuffle_pin[9])}
+              class:h-[160px]={!mobile}
+              class:h-[100px]={mobile}
+              class:text-8xl={!mobile}
+              on:click={async () => await on_pin_key(shuffle_pin[9])}
+              disabled={pin_code.length >= 4}
             >
               <span>{shuffle_pin[9]}</span>
             </button>
+            <Button
+              tabindex="0"
+              class="w-full bg-green-300 hover:bg-green-300/90 enabled:animate-bounce disabled:bg-gray-200 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 aspect-square border-0"
+              on:click={async () => await finish()}
+              disabled={pin_code.length < 4}
+            >
+              <LockOpen
+                tabindex="-1"
+                class="w-[50%] h-[50%] transition duration-75 focus:outline-none select-none group-hover:text-gray-900 dark:group-hover:text-white"
+              />
+            </Button>
           </div>
+          <span class="mt-3 text-9xl min-h-[8rem] text-center"
+            >{#each pin_code as pin_key}*{/each}</span
+          >
+        {/if}
       </div>
-{:else if step == "opening"}
+      <!-- Navigation Buttons for pazzle, order pin, mnemonic -->
+      <div class="flex justify-between mb-6 mt-auto">
+        <button
+          on:click={cancel}
+          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
+          ><XCircle
+            tabindex="-1"
+            class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
+          />Cancel</button
+        >
+        <button
+          class="mt-1 ml-2 min-w-[141px] focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
+          on:click={go_back}
+          ><Backspace
+            tabindex="-1"
+            class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
+          />{#if step === "mnemonic" || (step === "pazzle" && pazzlePage === 0)}Go
+            back{:else}Correct{/if}</button
+        >
+      </div>
+    </div>
+  {:else if step == "opening"}
     <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
       Opening your wallet...<br />
       Please wait
@@ -450,9 +664,10 @@
         />
       </svg>
     </div>
-{:else if step == "end"}
+  {:else if step == "end"}
     {#if error}
-    <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 text-red-800">
+        <div class="mt-auto max-w-6xl lg:px-8">
           An error occurred !
           <svg
             fill="none"
@@ -472,8 +687,27 @@
           <Alert color="red" class="mt-5">
             {error}
           </Alert>
-      <button class="mt-10 select-none" on:click={init}> Try again </button>
+        </div>
-      <button class="mt-10 ml-5 select-none" on:click={cancel}> Cancel </button>
+        <div class="flex justify-between mt-auto gap-4">
+          <button
+            on:click={cancel}
+            class="mt-10 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            ><XCircle
+              tabindex="-1"
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
+            />Cancel</button
+          >
+          <button
+            class="mt-10 ml-2 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            on:click={init}
+          >
+            <ArrowPath
+              tabindex="-1"
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
+            />
+            Try again
+          </button>
+        </div>
       </div>
     {:else}
       <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-green-800">
@@ -495,21 +729,31 @@
         </svg>
       </div>
     {/if}
-{/if}
+  {/if}
+</div>
+
+<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
 
 <style>
-  .pazzleline {
+  .pindigit {
+    min-height: 99px;
+  }
+
+  /* .pazzleline {
     margin-right: auto;
     margin-left: auto;
-  }
+  } */
 
   .sel {
     position: absolute;
+    display: flex;
     width: 100%;
-    top: 45%;
+    height: 100%;
+    top: 0;
     left: 0;
-    font-size: 100px;
     font-weight: 700;
+    justify-content: center;
+    align-items: center;
   }
 
   .sel-emoji {

ng-app/src/lib/NoWallet.svelte

@@ -9,6 +9,11 @@
 // according to those terms.
 -->
 
+<!--
+  Component to inform the user, that no wallet is registered on this device.
+  Offers login or create wallet buttons.
+-->
+
 <script>
   // @ts-ignore
   import Logo from "../assets/nextgraph.svg?component";
@@ -16,7 +21,7 @@
   import CenteredLayout from "./CenteredLayout.svelte";
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <div class="container3">
     <div class="row">
       <Logo class="logo block h-40" alt="NextGraph Logo" />

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

@@ -0,0 +1,78 @@
+<script lang="ts">
+  export let value: string = "";
+  export let id: string;
+
+  let has_success: boolean = false;
+
+  const tauri_platform = import.meta.env.TAURI_PLATFORM;
+  const setClipboard = async (text: string) => {
+    if (tauri_platform) {
+      // TODO: this won't work for tauri platform.
+      // const { writeText } = await import("@tauri-apps/api/clipboard");
+      // await writeText(text);
+    } else {
+      navigator.clipboard.writeText(text);
+    }
+  };
+
+  const on_click = (e) => {
+    has_success = true;
+    setTimeout(() => (has_success = false), 2_000);
+    setClipboard(value);
+  };
+</script>
+
+<div class="w-full mt-2">
+  <div class="relative">
+    <textarea
+      {id}
+      rows="3"
+      style="resize: none;"
+      {value}
+      class="col-span-6 pr-11 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      disabled
+      readonly
+    />
+    {#if !tauri_platform}
+      <button
+        on:click={on_click}
+        class="absolute inset-y-0 right-0 p-3 flex items-center text-sm leading-5 bg-transparent shadow-none"
+      >
+        <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>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,40 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<!--
+@component Logo
+The NextGraph Logo svg with color changing between blue and gray,
+depending on connection status:
+- connected: blue
+- connecting: pulse between blue and gray
+- disconnected: gray
+
+Provide classes using the `className` prop.
+-->
+
+<script lang="ts">
+  import { connection_status } from "../../store";
+  // @ts-ignore
+  import Logo from "../../assets/nextgraph-nofill.svg?component";
+
+  export let className: string = "";
+  let connection_status_class = "logo-blue";
+  // Color is adjusted to connection status.
+  $: if ($connection_status === "connecting") {
+    connection_status_class = "logo-pulse";
+  } else if ($connection_status === "disconnected") {
+    connection_status_class = "logo-gray";
+  } else {
+    connection_status_class = "logo-blue";
+  }
+</script>
+
+<Logo class={`${className} ${connection_status_class}`} />

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+  export let value: string | undefined = undefined;
+  export let placeholder: string | undefined = undefined;
+  export let className: string | undefined = undefined;
+  export let id: string | undefined = undefined;
+  export let auto_complete: string | undefined = undefined;
+
+  export let show: boolean = false;
+
+  let input;
+
+  let type: "password" | "text" = "password";
+  $: type = show ? "text" : "password";
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    value = target.value;
+  }
+
+  async function toggle() {
+    let { selectionStart, selectionEnd } = input;
+    show = !show;
+    input.focus();
+    setTimeout(function () {
+      input.selectionStart = selectionStart;
+      input.selectionEnd = selectionEnd;
+    }, 0);
+  }
+</script>
+
+<div class="relative">
+  <input
+    bind:this={input}
+    {value}
+    {placeholder}
+    {id}
+    {type}
+    on:input={handleInput}
+    class={`${className} pr-12 text-md block`}
+    autocomplete={auto_complete}
+  />
+
+  <div
+    class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5"
+  >
+    <svg
+      fill="none"
+      on:click={toggle}
+      on:keypress={toggle}
+      class={`${show ? "block" : "hidden"} h-6 text-gray-700`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewbox="0 0 576 512"
+    >
+      <path
+        fill="currentColor"
+        d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+      >
+      </path>
+    </svg>
+
+    <svg
+      fill="none"
+      class={`${!show ? "block" : "hidden"} h-6 text-gray-700`}
+      on:click={toggle}
+      on:keypress={toggle}
+      xmlns="http://www.w3.org/2000/svg"
+      viewbox="0 0 640 512"
+    >
+      <path
+        fill="currentColor"
+        d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
+      >
+      </path>
+    </svg>
+  </div>
+</div>

ng-app/src/routes/Home.svelte

@@ -9,18 +9,28 @@
 // according to those terms.
 -->
 
+<!--
+  Home page to display for logged in users.
+  Redirects to no-wallet or login page, if not logged in.
+-->
+
 <script>
-  import { Button } from "flowbite-svelte";
-  import { link } from "svelte-spa-router";
   import Home from "../lib/Home.svelte";
   import NoWallet from "../lib/NoWallet.svelte";
   import { push } from "svelte-spa-router";
   import { onMount, onDestroy } from "svelte";
-  import { active_wallet, has_wallets, derived } from "../store";
+  import {
+    active_wallet,
+    has_wallets,
+    derived,
+    cannot_load_offline,
+  } from "../store";
 
   let display_login_create = !$has_wallets || !$active_wallet;
   let unsubscribe;
   onMount(() => {
+    cannot_load_offline.set(false);
+    //setTimeout(function () {}, 2);
     const combined = derived([active_wallet, has_wallets], ([$s1, $s2]) => [
       $s1,
       $s2,

ng-app/src/routes/Install.svelte

@@ -25,6 +25,6 @@
   onDestroy(() => {});
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <Install {display_has_wallets_warning} />
 </CenteredLayout>

ng-app/src/routes/NotFound.svelte

@@ -14,7 +14,7 @@
   import CenteredLayout from "../lib/CenteredLayout.svelte";
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <div class="p-8">
     <Alert color="red">
       <span class="font-medium">404</span> Page not found.

ng-app/src/routes/User.svelte

@@ -136,7 +136,7 @@
             >
               <ArrowLeft
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">Back</span>
             </li>
@@ -147,7 +147,7 @@
               {#if $online}
                 <Signal
                   tabindex="-1"
-                  class="w-7 h-7 text-green-600 transition duration-75 dark:text-green-400 "
+                  class="w-7 h-7 text-green-600 transition duration-75 focus:outline-none dark:text-green-400 "
                 />
                 <span class="ml-3 text-green-600 dark:text-green-400"
                   >Online</span
@@ -155,7 +155,7 @@
               {:else}
                 <SignalSlash
                   tabindex="-1"
-                  class="w-7 h-7 text-red-600 transition duration-75 dark:text-red-400 "
+                  class="w-7 h-7 text-red-600 transition duration-75 focus:outline-none dark:text-red-400 "
                 />
                 <span class="ml-3 text-red-600 dark:text-red-400">Offline</span>
               {/if}
@@ -170,7 +170,7 @@
             >
               <ArrowRightOnRectangle
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">Logout</span>
             </li>
@@ -186,7 +186,6 @@
               />
               <span class="ml-3">Switch wallet</span>
             </li> -->
-
             <SidebarItem
               label="Settings"
               href="#/user/settings"
@@ -196,7 +195,7 @@
               <svelte:fragment slot="icon">
                 <Cog6Tooth
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -204,7 +203,7 @@
               <svelte:fragment slot="icon">
                 <PuzzlePiece
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -216,7 +215,7 @@
               <svelte:fragment slot="icon">
                 <Key
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -224,7 +223,7 @@
               <svelte:fragment slot="icon">
                 <User
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -285,7 +284,7 @@
             >
               <Gift
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">Donate to NextGraph</span>
             </li>
@@ -299,7 +298,7 @@
             >
               <InformationCircle
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">About NextGraph</span>
             </li>

ng-app/src/routes/UserRegistered.svelte

@@ -45,7 +45,7 @@
   });
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <div class="container3">
     <div class="row">
       <a href="#/">

ng-app/src/routes/WalletCreate.svelte

@@ -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("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;
@@ -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
+              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
               >
@@ -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
+                    documents you have been granted with, or that you have
-                  yourself.</span
+                    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
+                    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>
 
@@ -622,10 +744,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
                   >
@@ -671,9 +793,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">
@@ -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
+                    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>
@@ -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">
+            <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&nbsp;server</b>.
             </p>
           </div>
@@ -763,8 +886,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
                   >
@@ -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
+                    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">
@@ -808,8 +931,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">
@@ -830,9 +954,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">
@@ -852,8 +976,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
@@ -877,12 +1001,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">
@@ -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>
+            <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>
                 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"
+              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">
+            <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
+                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
@@ -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
+                  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
@@ -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
+                  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
@@ -1296,7 +1429,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
@@ -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
+              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"
@@ -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
+              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
@@ -1472,10 +1606,11 @@
               </svg>
             </div>
           {: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
-              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 />
+                  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}
@@ -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,
+                  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 />
-              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 />
+                <!-- 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}
+              </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
+              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
               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>

ng-app/src/routes/WalletLogin.svelte

@@ -10,7 +10,6 @@
 -->
 
 <!-- 
-  @component
   "Select a wallet to login with" page.
   This page is usually the first page the user sees when they visit the app.
   It allows the user to select a wallet to login with, create, or import a wallet.
@@ -193,7 +192,7 @@
 </script>
 
 <div bind:this={top}>
-  <CenteredLayout>
+  <CenteredLayout displayFooter={!wallet}>
     {#if error}
       <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
         <svg
@@ -239,7 +238,7 @@
         <Logo class="logo block h-40" alt="NextGraph Logo" />
       </div>
       <h2 class="pb-5 text-xl">Select a wallet to login with</h2>
-      <div class="flex flex-wrap justify-center gap-5 mb-20">
+      <div class="flex flex-wrap justify-center gap-5 mb-10">
         {#each Object.entries($wallets) as wallet_entry}
           <div
             class="wallet-box"

ng-app/src/store.ts

@@ -7,13 +7,41 @@
 // notice may not be copied, modified, or distributed except
 // according to those terms.
 
-import { writable, readable, readonly, derived, get } from "svelte/store";
+import { writable, readable, readonly, derived, get, type Writable } from "svelte/store";
 import ng from "./api";
 import { official_classes } from "./classes";
 import { official_apps, official_services } from "./zeras";
 
 let all_branches = {};
 
+export const available_languages = {
+    "en": "English",
+    "de": "Deutsch",
+    "fr": "Français",
+    "ru": "Русский",
+    "es": "Español",
+    "it": "Italiano",
+    "zh": "中文",
+    "pt": "Português",
+};
+
+export const current_lang = writable("en");
+
+export const select_default_lang = async() => {
+    let locales = await ng.locales();
+    for (let lo of locales) {
+        if (available_languages[lo]) {
+            // exact match (if locales is a 2 chars lang code, or if we support regionalized translations)
+            current_lang.set(lo);
+            return;
+        }
+        lo = lo.substr(0,2);
+        if (available_languages[lo]) {
+            current_lang.set(lo);
+            return;
+        }
+    }
+};
 
 let loaded_external_apps = {};
 
@@ -111,43 +139,74 @@ export const active_wallet = writable(undefined);
 
 export const wallets = writable({});
 
-export const connections = writable({});
+export const connections: Writable<Record<string, any>> = writable({});
 
 export const active_session = writable(undefined);
 
-let next_reconnect = null;
+export const connection_status: Writable<"disconnected" | "connected" | "connecting"> = writable("disconnected");
 
-export const online = derived(connections,($connections) => { 
+let next_reconnect: NodeJS.Timeout | null = null;
-    for (const cnx of Object.keys($connections)) {
+
-        if (!$connections[cnx].error) return true;
+const updateConnectionStatus = ($connections: Record<string, any> ) => {
-        else if ($connections[cnx].error=="PeerAlreadyConnected") { 
+    // Reset error state for PeerAlreadyConnected errors.
-            connections.update((c) => {
+    Object.entries($connections).forEach(([cnx, connection]) => {
+        if (connection.error === "PeerAlreadyConnected") {
+            connections.update(c => {
                 c[cnx].error = undefined;
                 return c;
             });
-            return true; }
+        }
-        else if ($connections[cnx].error=="ConnectionError" && !$connections[cnx].connecting && next_reconnect==null) {
+    });
+
+    // Check if any connection is active.
+    const is_connected = Object.values($connections).some(connection => !connection.error);
+
+    // Check if any connection is connecting.
+    const is_connecting = Object.values($connections).some(connection => connection.connecting);
+
+    // Check, if reconnect is needed.
+    const should_reconnect = !is_connecting && (next_reconnect === null) && Object.values($connections).some(
+        connection => connection.error === "ConnectionError"
+    );
+    if (should_reconnect) {
         console.log("will try reconnect in 20 sec");
-            next_reconnect = setTimeout(async ()=> {
+        next_reconnect = setTimeout(async () => {
             await reconnect();
-            },20000);
+            
+            next_reconnect = null;
+        }, 20000);
     }
+
+    if (is_connected) {
+        connection_status.set("connected");
+    } else if (is_connecting) {
+        connection_status.set("connecting");
+    } else {
+        connection_status.set("disconnected");
     }
-    return false;
+};
+connections.subscribe(($connections) => {
+    updateConnectionStatus($connections);
 });
 
+export const online = derived(connection_status,($connectionStatus) => $connectionStatus == "connected");
+
 export const cannot_load_offline = writable(false);
 
-if (!get(online) && !import.meta.env.TAURI_PLATFORM) {
+if (get(connection_status) == "disconnected" && !import.meta.env.TAURI_PLATFORM) {
     cannot_load_offline.set(true);
 
-    let unsubscribe = online.subscribe(async (value) => {
+    let unsubscribe = connection_status.subscribe(async (value) => {
-      if (value) {
+        if (value != "disconnected") {
             cannot_load_offline.set(false);
+            if (value == "connected") {
                 unsubscribe();
             }
-    });
+        } else {
+            cannot_load_offline.set(true);
         }
+    });
+}
 
 export const has_wallets = derived(wallets,($wallets) => Object.keys($wallets).length);
 
@@ -207,6 +266,7 @@ export const reconnect = async function() {
         return;
     }
     console.log("attempting to connect...");
+    if (!get(online)) connection_status.set("connecting");
     try {
         let info = await ng.client_info()
         //console.log("Connecting with",get(active_session).user);
@@ -215,8 +275,6 @@ export const reconnect = async function() {
             get(active_session).user,
             location.href
         ));
-        
-        
     }catch (e) {
         console.error(e)
     }

ng-app/src/styles.css

@@ -16,6 +16,34 @@
   padding-bottom: 1em;
 }
 
+@keyframes pulse-logo-color {
+  0%,
+  100% {
+    fill: rgb(73, 114, 165);
+    stroke: rgb(73, 114, 165);
+  }
+  50% {
+    /* Mid-transition color */
+    stroke: #bbb;
+    fill: #bbb;
+  }
+}
+
+.logo-pulse path {
+  animation: pulse-logo-color 2s infinite;
+  animation-timing-function: cubic-bezier(0.65, 0.01, 0.59, 0.83);
+}
+
+.logo-gray path {
+  fill: #bbb;
+  stroke: #bbb;
+}
+
+.logo-blue path {
+  fill: rgb(73, 114, 165);
+  stroke: rgb(73, 114, 165);
+}
+
 .container3 {
   margin: 0;
   min-width: 280px;

ng-app/src/wallet_emojis.ts

@@ -88,9 +88,9 @@ let face = [
     shortcode: "sleeping_face",
     code: "sleeping",
   },
-  ];
+];
 
-  let face_unwell = [
+let face_unwell = [
   {
     hexcode: "1f637",
     shortcode: "face_with_medical_mask",
@@ -171,9 +171,9 @@ let face = [
     shortcode: "face_with_steam_from_nose",
     code: "annoyed",
   },
-  ];
+];
 
-  let face_costume = [
+let face_costume = [
   {
     hexcode: "1f921",
     shortcode: "clown_face",
@@ -254,9 +254,9 @@ let face = [
     shortcode: "fairy",
     code: "fairy",
   },
-  ];
+];
 
-  let emotion = [
+let emotion = [
   {
     hexcode: "1f48c",
     shortcode: "love_letter",
@@ -337,9 +337,9 @@ let face = [
     shortcode: "folded_hands",
     code: "praying",
   },
-  ];
+];
 
-  let body = [
+let body = [
   {
     hexcode: "1f4aa",
     shortcode: "flexed_biceps",
@@ -420,9 +420,9 @@ let face = [
     shortcode: "running_shoe",
     code: "shoe",
   },
-  ];
+];
 
-  let sport = [
+let sport = [
   {
     hexcode: "1f93a",
     shortcode: "person_fencing",
@@ -503,9 +503,9 @@ let face = [
     shortcode: "martial_arts_uniform",
     code: "martial",
   },
-  ];
+];
 
-  let bigger_animal = [
+let bigger_animal = [
   {
     hexcode: "1f981",
     shortcode: "lion",
@@ -582,9 +582,9 @@ let face = [
     shortcode: "polar_bear",
     code: "bear",
   },
-  ];
+];
 
-  let smaller_animal = [
+let smaller_animal = [
   {
     hexcode: "1f413",
     shortcode: "rooster",
@@ -661,9 +661,9 @@ let face = [
     shortcode: "octopus",
     code: "octopus",
   },
-  ];
+];
 
-  let plants = [
+let plants = [
   {
     hexcode: "1f40c",
     shortcode: "snail",
@@ -743,9 +743,9 @@ let face = [
     shortcode: "mushroom",
     code: "mushroom",
   },
-  ];
+];
 
-  let fruits = [
+let fruits = [
   {
     hexcode: "1f347",
     shortcode: "grapes",
@@ -826,9 +826,9 @@ let face = [
     shortcode: "hot_pepper",
     code: "pepper",
   },
-  ];
+];
 
-  let food = [
+let food = [
   {
     hexcode: "1f950",
     shortcode: "croissant",
@@ -909,9 +909,9 @@ let face = [
     shortcode: "clinking_glasses",
     code: "two_glasses",
   },
-  ];
+];
 
-  let travel = [
+let travel = [
   {
     hexcode: "1f3d4",
     shortcode: "snow_capped_mountain",
@@ -992,9 +992,9 @@ let face = [
     shortcode: "rocket",
     code: "rocket",
   },
-  ];
+];
 
-  let sky = [
+let sky = [
   {
     hexcode: "2600",
     shortcode: "sun",
@@ -1075,9 +1075,9 @@ let face = [
     shortcode: "rainbow",
     code: "rainbow",
   },
-  ];
+];
 
-  let play = [
+let play = [
   {
     hexcode: "1f3b8",
     shortcode: "guitar",
@@ -1158,9 +1158,9 @@ let face = [
     shortcode: "diving_mask",
     code: "scuba_diving",
   },
-  ];
+];
 
-  let house = [
+let house = [
   {
     hexcode: "1f9f9",
     shortcode: "broom",
@@ -1241,10 +1241,16 @@ let face = [
     shortcode: "shopping_cart",
     code: "shopping_cart",
   },
-  ];
+];
 
+let svgs_loaded = Promise.resolve(false);
+/** Loads SVGs if they are not yet. TODO: This could probably be sped up by not awaiting sequentially. */
 export async function load_svg() {
+  if (await svgs_loaded) {
+    return;
+  }
 
+  svgs_loaded = new Promise(async (resolve) => {
     face[0].svg = await import("./assets/pazzle/emoji_u1f600.svg?component");
     face[1].svg = await import("./assets/pazzle/emoji_u1f602.svg?component");
     face[2].svg = await import("./assets/pazzle/emoji_u1f607.svg?component");
@@ -1371,48 +1377,28 @@ export async function load_svg() {
 
     /************** EMOTION *********************/
 
-    emotion[0].svg = await import(
+    emotion[0].svg = await import("./assets/pazzle/emoji_u1f48c.svg?component");
-      "./assets/pazzle/emoji_u1f48c.svg?component"
-    );
     emotion[1].svg = await import("./assets/pazzle/emoji_u2764.svg?component");
-    emotion[2].svg = await import(
+    emotion[2].svg = await import("./assets/pazzle/emoji_u1f495.svg?component");
-      "./assets/pazzle/emoji_u1f495.svg?component"
-    );
 
-    emotion[3].svg = await import(
+    emotion[3].svg = await import("./assets/pazzle/emoji_u1f48b.svg?component");
-      "./assets/pazzle/emoji_u1f48b.svg?component"
+    emotion[4].svg = await import("./assets/pazzle/emoji_u1f4af.svg?component");
-    );
+    emotion[5].svg = await import("./assets/pazzle/emoji_u1f4a5.svg?component");
-    emotion[4].svg = await import(
-      "./assets/pazzle/emoji_u1f4af.svg?component"
-    );
-    emotion[5].svg = await import(
-      "./assets/pazzle/emoji_u1f4a5.svg?component"
-    );
 
-    emotion[6].svg = await import(
+    emotion[6].svg = await import("./assets/pazzle/emoji_u1f4a6.svg?component");
-      "./assets/pazzle/emoji_u1f4a6.svg?component"
+    emotion[7].svg = await import("./assets/pazzle/emoji_u1f91d.svg?component");
-    );
+    emotion[8].svg = await import("./assets/pazzle/emoji_u1f590.svg?component");
-    emotion[7].svg = await import(
-      "./assets/pazzle/emoji_u1f91d.svg?component"
-    );
-    emotion[8].svg = await import(
-      "./assets/pazzle/emoji_u1f590.svg?component"
-    );
 
     emotion[9].svg = await import("./assets/pazzle/emoji_u270c.svg?component");
     emotion[10].svg = await import(
       "./assets/pazzle/emoji_u1f44d.svg?component"
     );
-    emotion[11].svg = await import(
+    emotion[11].svg = await import("./assets/pazzle/emoji_u270a.svg?component");
-      "./assets/pazzle/emoji_u270a.svg?component"
-    );
 
     emotion[12].svg = await import(
       "./assets/pazzle/emoji_u1f450.svg?component"
     );
-    emotion[13].svg = await import(
+    emotion[13].svg = await import("./assets/pazzle/emoji_u270d.svg?component");
-      "./assets/pazzle/emoji_u270d.svg?component"
-    );
     emotion[14].svg = await import(
       "./assets/pazzle/emoji_u1f64f.svg?component"
     );
@@ -1463,47 +1449,91 @@ export async function load_svg() {
 
     /************** BIGGER ANIMAL *********************/
 
-    bigger_animal[0].svg = await import("./assets/pazzle/emoji_u1f981.svg?component");
+    bigger_animal[0].svg = await import(
-    bigger_animal[1].svg = await import("./assets/pazzle/emoji_u1f406.svg?component");
+      "./assets/pazzle/emoji_u1f981.svg?component"
-    bigger_animal[2].svg = await import("./assets/pazzle/emoji_u1f434.svg?component");
+    );
+    bigger_animal[1].svg = await import(
+      "./assets/pazzle/emoji_u1f406.svg?component"
+    );
+    bigger_animal[2].svg = await import(
+      "./assets/pazzle/emoji_u1f434.svg?component"
+    );
 
-    bigger_animal[3].svg = await import("./assets/pazzle/emoji_u1f993.svg?component");
+    bigger_animal[3].svg = await import(
-    bigger_animal[4].svg = await import("./assets/pazzle/emoji_u1f416.svg?component");
+      "./assets/pazzle/emoji_u1f993.svg?component"
-    bigger_animal[5].svg = await import("./assets/pazzle/emoji_u1f410.svg?component");
+    );
+    bigger_animal[4].svg = await import(
+      "./assets/pazzle/emoji_u1f416.svg?component"
+    );
+    bigger_animal[5].svg = await import(
+      "./assets/pazzle/emoji_u1f410.svg?component"
+    );
 
-    bigger_animal[6].svg = await import("./assets/pazzle/emoji_u1f411.svg?component");
+    bigger_animal[6].svg = await import(
-    bigger_animal[7].svg = await import("./assets/pazzle/emoji_u1f42a.svg?component");
+      "./assets/pazzle/emoji_u1f411.svg?component"
-    bigger_animal[8].svg = await import("./assets/pazzle/emoji_u1f992.svg?component");
+    );
+    bigger_animal[7].svg = await import(
+      "./assets/pazzle/emoji_u1f42a.svg?component"
+    );
+    bigger_animal[8].svg = await import(
+      "./assets/pazzle/emoji_u1f992.svg?component"
+    );
 
-    bigger_animal[9].svg = await import("./assets/pazzle/emoji_u1f418.svg?component");
+    bigger_animal[9].svg = await import(
+      "./assets/pazzle/emoji_u1f418.svg?component"
+    );
     bigger_animal[10].svg = await import(
       "./assets/pazzle/emoji_u1f98f.svg?component"
     );
-    bigger_animal[11].svg = await import("./assets/pazzle/emoji_u1f9a9.svg?component");
+    bigger_animal[11].svg = await import(
+      "./assets/pazzle/emoji_u1f9a9.svg?component"
+    );
 
-    bigger_animal[12].svg = await import("./assets/pazzle/emoji_u1f433.svg?component");
+    bigger_animal[12].svg = await import(
-    bigger_animal[13].svg = await import("./assets/pazzle/emoji_u1f42c.svg?component");
+      "./assets/pazzle/emoji_u1f433.svg?component"
+    );
+    bigger_animal[13].svg = await import(
+      "./assets/pazzle/emoji_u1f42c.svg?component"
+    );
     bigger_animal[14].svg = await import(
       "./assets/pazzle/emoji_u1f43b_200d_2744.svg?component"
     );
 
     /************** SMALLER ANIMAL *********************/
 
-    smaller_animal[0].svg = await import("./assets/pazzle/emoji_u1f413.svg?component");
+    smaller_animal[0].svg = await import(
-    smaller_animal[1].svg = await import("./assets/pazzle/emoji_u1f423.svg?component");
+      "./assets/pazzle/emoji_u1f413.svg?component"
-    smaller_animal[2].svg = await import("./assets/pazzle/emoji_u1f985.svg?component");
+    );
+    smaller_animal[1].svg = await import(
+      "./assets/pazzle/emoji_u1f423.svg?component"
+    );
+    smaller_animal[2].svg = await import(
+      "./assets/pazzle/emoji_u1f985.svg?component"
+    );
 
-    smaller_animal[3].svg = await import("./assets/pazzle/emoji_u1f986.svg?component");
+    smaller_animal[3].svg = await import(
-    smaller_animal[4].svg = await import("./assets/pazzle/emoji_u1f989.svg?component");
+      "./assets/pazzle/emoji_u1f986.svg?component"
+    );
+    smaller_animal[4].svg = await import(
+      "./assets/pazzle/emoji_u1f989.svg?component"
+    );
     smaller_animal[5].svg = await import(
       "./assets/pazzle/emoji_u1f407.svg?component"
     );
 
-    smaller_animal[6].svg = await import("./assets/pazzle/emoji_u1f427.svg?component");
+    smaller_animal[6].svg = await import(
-    smaller_animal[7].svg = await import("./assets/pazzle/emoji_u1f98e.svg?component");
+      "./assets/pazzle/emoji_u1f427.svg?component"
-    smaller_animal[8].svg = await import("./assets/pazzle/emoji_u1f422.svg?component");
+    );
+    smaller_animal[7].svg = await import(
+      "./assets/pazzle/emoji_u1f98e.svg?component"
+    );
+    smaller_animal[8].svg = await import(
+      "./assets/pazzle/emoji_u1f422.svg?component"
+    );
 
-    smaller_animal[9].svg = await import("./assets/pazzle/emoji_u1f40d.svg?component");
+    smaller_animal[9].svg = await import(
+      "./assets/pazzle/emoji_u1f40d.svg?component"
+    );
     smaller_animal[10].svg = await import(
       "./assets/pazzle/emoji_u1f994.svg?component"
     );
@@ -1511,9 +1541,15 @@ export async function load_svg() {
       "./assets/pazzle/emoji_u1f987.svg?component"
     );
 
-    smaller_animal[12].svg = await import("./assets/pazzle/emoji_u1f41f.svg?component");
+    smaller_animal[12].svg = await import(
-    smaller_animal[13].svg = await import("./assets/pazzle/emoji_u1f41a.svg?component");
+      "./assets/pazzle/emoji_u1f41f.svg?component"
-    smaller_animal[14].svg = await import("./assets/pazzle/emoji_u1f419.svg?component");
+    );
+    smaller_animal[13].svg = await import(
+      "./assets/pazzle/emoji_u1f41a.svg?component"
+    );
+    smaller_animal[14].svg = await import(
+      "./assets/pazzle/emoji_u1f419.svg?component"
+    );
 
     /************** PLANTS *********************/
 
@@ -1552,22 +1588,12 @@ export async function load_svg() {
     fruits[8].svg = await import("./assets/pazzle/emoji_u1fad0.svg?component");
 
     fruits[9].svg = await import("./assets/pazzle/emoji_u1f95d.svg?component");
-    fruits[10].svg = await import(
+    fruits[10].svg = await import("./assets/pazzle/emoji_u1f951.svg?component");
-      "./assets/pazzle/emoji_u1f951.svg?component"
+    fruits[11].svg = await import("./assets/pazzle/emoji_u1f346.svg?component");
-    );
-    fruits[11].svg = await import(
-      "./assets/pazzle/emoji_u1f346.svg?component"
-    );
 
-    fruits[12].svg = await import(
+    fruits[12].svg = await import("./assets/pazzle/emoji_u1f955.svg?component");
-      "./assets/pazzle/emoji_u1f955.svg?component"
+    fruits[13].svg = await import("./assets/pazzle/emoji_u1f33d.svg?component");
-    );
+    fruits[14].svg = await import("./assets/pazzle/emoji_u1f336.svg?component");
-    fruits[13].svg = await import(
-      "./assets/pazzle/emoji_u1f33d.svg?component"
-    );
-    fruits[14].svg = await import(
-      "./assets/pazzle/emoji_u1f336.svg?component"
-    );
 
     /************** FOOD *********************/
 
@@ -1606,18 +1632,12 @@ export async function load_svg() {
     travel[8].svg = await import("./assets/pazzle/emoji_u1f682.svg?component");
 
     travel[9].svg = await import("./assets/pazzle/emoji_u1f695.svg?component");
-    travel[10].svg = await import(
+    travel[10].svg = await import("./assets/pazzle/emoji_u1f3cd.svg?component");
-      "./assets/pazzle/emoji_u1f3cd.svg?component"
-    );
     travel[11].svg = await import("./assets/pazzle/emoji_u26f5.svg?component");
 
     travel[12].svg = await import("./assets/pazzle/emoji_u2708.svg?component");
-    travel[13].svg = await import(
+    travel[13].svg = await import("./assets/pazzle/emoji_u1f681.svg?component");
-      "./assets/pazzle/emoji_u1f681.svg?component"
+    travel[14].svg = await import("./assets/pazzle/emoji_u1f680.svg?component");
-    );
-    travel[14].svg = await import(
-      "./assets/pazzle/emoji_u1f680.svg?component"
-    );
 
     /************** SKY *********************/
 
@@ -1685,6 +1705,8 @@ export async function load_svg() {
     house[13].svg = await import("./assets/pazzle/emoji_u1f9fd.svg?component");
     house[14].svg = await import("./assets/pazzle/emoji_u1f6d2.svg?component");
 
+    resolve(true);
+  });
 }
 
 export const emojis = {
@@ -1703,7 +1725,7 @@ export const emojis = {
   sky,
   play,
   house,
-  };
+};
 
 export const emoji_cat = [
   "face",
@@ -1725,12 +1747,21 @@ export const emoji_cat = [
   "emotion",
 ];
 
-export function display_pazzle(pazzle) {
+export function display_pazzle(pazzle: number[]) {
   let res = [];
   for (const emoji of pazzle) {
     let cat = (emoji & 240) >> 4;
     let idx = emoji & 15;
-    res.push(emoji_cat[cat] +": "+ emojis[emoji_cat[cat]][idx].code);
+    res.push(emoji_cat[cat] + ": " + emojis[emoji_cat[cat]][idx].code);
   }
   return res;
 }
+
+export function emojis_from_pazzle_ids(pazzle: number[]) {
+  return pazzle.map((emoji_id) => {
+    const cat_id = (emoji_id & 240) >> 4;
+    const cat_name = emoji_cat[cat_id];
+    let idx = emoji_id & 15;
+    return { cat: cat_name, ...emojis[cat_name][idx] };
+  });
+}

ng-app/src/worker.js

@@ -7,11 +7,20 @@ onmessage = (e) => {
   //console.log("Message received by worker", e.data);
   (async function() {
     try {
-      let secret_wallet = await ng.wallet_open_with_pazzle(
+      let secret_wallet;
+      if (e.data.pazzle) {
+         secret_wallet = await ng.wallet_open_with_pazzle(
             e.data.wallet,
             e.data.pazzle,
             e.data.pin_code
         );
+      } else if (e.data.mnemonic_words) {
+         secret_wallet = await ng.wallet_open_with_mnemonic_words(
+          e.data.wallet,
+          e.data.mnemonic_words,
+          e.data.pin_code
+        );
+      }
       postMessage({success:secret_wallet});
     } catch (e) {
       postMessage({error:e});

ng-app/tailwind.config.cjs

@@ -16,7 +16,15 @@ const config = {
       'xxs': '400px',
       'xs': '500px',
       ...defaultTheme.screens,
+      
       'tall': { 'raw': '(min-height: 450px)' },
+      'tall-xxs': { 'raw': '(min-height: 360px)' },
+      'tall-xs': { 'raw': '(min-height: 480px)' },
+      'tall-sm': { 'raw': '(min-height: 640px)' },
+      'tall-md': { 'raw': '(min-height: 800px)' },
+      'tall-l': { 'raw': '(min-height: 1000px)' },
+      'tall-xl': { 'raw': '(min-height: 1200px)' },
+      'tall-xxl': { 'raw': '(min-height: 1400px)' },
     },
   },
 

ng-oxigraph/src/oxigraph/sparql/update.rs

@@ -214,9 +214,7 @@ impl<'a, 'b: 'a> SimpleUpdateEvaluator<'a, 'b> {
             GraphName::NamedNode(graph_name) => graph_name.into(),
             GraphName::DefaultGraph => {
                 if let Some(default_graph) = &self.options.query_options.default_graph {
-                    crate::oxrdf::GraphNameRef::NamedNode(NamedNodeRef::new_unchecked(
+                    GraphNameRef::NamedNode(NamedNodeRef::new_unchecked(&default_graph))
-                        &default_graph,
-                    ))
                 } else {
                     return Err(EvaluationError::NoDefaultGraph);
                 }

ng-repo/src/errors.rs

@@ -37,6 +37,7 @@ pub enum NgError {
     InvalidArgument,
     PermissionDenied,
     InvalidPazzle,
+    InvalidMnemonic,
     CommitLoadError(CommitLoadError),
     ObjectParseError(ObjectParseError),
     StorageError(StorageError),

ng-sdk-js/src/lib.rs

@@ -140,6 +140,53 @@ pub fn wallet_open_with_pazzle(
     }
 }
 
+#[wasm_bindgen]
+pub fn wallet_open_with_mnemonic(
+    wallet: JsValue,
+    mnemonic: Vec<u16>,
+    pin: JsValue,
+) -> Result<JsValue, JsValue> {
+    let encrypted_wallet = serde_wasm_bindgen::from_value::<Wallet>(wallet)
+        .map_err(|_| "Deserialization error of wallet")?;
+    let pin = serde_wasm_bindgen::from_value::<[u8; 4]>(pin)
+        .map_err(|_| "Deserialization error of pin")?;
+    let res = nextgraph::local_broker::wallet_open_with_mnemonic(&encrypted_wallet, mnemonic, pin);
+    match res {
+        Ok(r) => Ok(r
+            .serialize(&serde_wasm_bindgen::Serializer::new().serialize_maps_as_objects(true))
+            .unwrap()),
+        Err(e) => Err(e.to_string().into()),
+    }
+}
+
+#[wasm_bindgen]
+pub fn wallet_open_with_mnemonic_words(
+    wallet: JsValue,
+    mnemonic_words: Array,
+    pin: JsValue,
+) -> Result<JsValue, JsValue> {
+    let encrypted_wallet = serde_wasm_bindgen::from_value::<Wallet>(wallet)
+        .map_err(|_| "Deserialization error of wallet")?;
+    let pin = serde_wasm_bindgen::from_value::<[u8; 4]>(pin)
+        .map_err(|_| "Deserialization error of pin")?;
+    let mnemonic_vec: Vec<String> = mnemonic_words
+        .iter()
+        .map(|word| word.as_string().unwrap())
+        .collect();
+
+    let res = nextgraph::local_broker::wallet_open_with_mnemonic_words(
+        &encrypted_wallet,
+        &mnemonic_vec,
+        pin,
+    );
+    match res {
+        Ok(r) => Ok(r
+            .serialize(&serde_wasm_bindgen::Serializer::new().serialize_maps_as_objects(true))
+            .unwrap()),
+        Err(e) => Err(e.to_string().into()),
+    }
+}
+
 #[wasm_bindgen]
 pub fn wallet_update(wallet_id: JsValue, operations: JsValue) -> Result<JsValue, JsValue> {
     let _wallet = serde_wasm_bindgen::from_value::<WalletId>(wallet_id)

ng-wallet/src/bip39.rs

@@ -1,3 +1,6 @@
+use ng_repo::errors::NgError;
+use std::collections::HashMap;
+
 #[allow(non_upper_case_globals)]
 pub const bip39_wordlist: [&str; 2048] = [
     "abandon", "ability", "able", "about", "above", "absent", "absorb", "abstract", "absurd",
@@ -212,3 +215,26 @@ pub const bip39_wordlist: [&str; 2048] = [
     "write", "wrong", "yard", "year", "yellow", "you", "young", "youth", "zebra", "zero", "zone",
     "zoo",
 ];
+
+lazy_static! {
+    pub static ref BIP39_WORD_MAP: HashMap<String, u16> = {
+        let mut m = HashMap::new();
+        for (i, word) in bip39_wordlist.iter().enumerate() {
+            m.insert(word.to_string(), i as u16);
+        }
+        m
+    };
+}
+
+/// Taking a list of bip39 words, returns a list of u16 codes
+pub fn encode_mnemonic(words: &Vec<String>) -> Result<Vec<u16>, NgError> {
+    let mut res = vec![];
+    for word in words {
+        res.push(
+            *BIP39_WORD_MAP
+                .get(word.as_str())
+                .ok_or(NgError::InvalidMnemonic)?,
+        );
+    }
+    Ok(res)
+}

ng-wallet/src/lib.rs

@@ -362,7 +362,7 @@ pub fn open_wallet_with_pazzle(
 }
 
 pub fn open_wallet_with_mnemonic(
-    wallet: Wallet,
+    wallet: &Wallet,
     mut mnemonic: [u16; 12],
     mut pin: [u8; 4],
 ) -> Result<SensitiveWallet, NgWalletError> {
@@ -388,7 +388,7 @@ pub fn open_wallet_with_mnemonic(
             mnemonic_key.zeroize();
 
             Ok(SensitiveWallet::V0(dec_encrypted_block(
-                v0.content.encrypted,
+                v0.content.encrypted.clone(),
                 master_key,
                 v0.content.peer_id,
                 v0.content.nonce,
@@ -786,6 +786,7 @@ pub async fn create_wallet_second_step_v0(
             wallet_file,
             pazzle,
             mnemonic: mnemonic.clone(),
+            mnemonic_str: display_mnemonic(&mnemonic),
             wallet_name: params.wallet_name.clone(),
             client: params.client.clone(),
             user,
@@ -893,7 +894,7 @@ mod test {
 
             let _opening_mnemonic = Instant::now();
 
-            let _w = open_wallet_with_mnemonic(Wallet::V0(v0.clone()), res.mnemonic, pin.clone())
+            let _w = open_wallet_with_mnemonic(&Wallet::V0(v0.clone()), res.mnemonic, pin.clone())
                 .expect("open with mnemonic");
             //log_debug!("encrypted part {:?}", w);
 

ng-wallet/src/types.rs

@@ -1303,6 +1303,8 @@ pub struct CreateWalletResultV0 {
     /// randomly generated mnemonic. It is an alternate way to open the wallet.
     /// A BIP39 list of 12 words. We argue that the Pazzle is easier to remember than this.
     pub mnemonic: [u16; 12],
+    /// The words of the mnemonic, in a human readable form.
+    pub mnemonic_str: Vec<String>,
     #[zeroize(skip)]
     /// a string identifying uniquely the wallet
     pub wallet_name: String,
@@ -1368,6 +1370,7 @@ pub enum NgWalletError {
     InvalidPin,
     InvalidPazzle,
     InvalidPazzleLength,
+    InvalidMnemonic,
     InvalidSecurityImage,
     InvalidSecurityText,
     SubmissionError,

ngaccount/.env

@@ -0,0 +1,5 @@
+NG_ACCOUNT_DOMAIN=
+NG_ACCOUNT_ADMIN=
+NG_ACCOUNT_LOCAL_PEER_KEY=
+NG_ACCOUNT_SERVER=127.0.0.1,1440,[the broker's peer ID]
+RUST_LOG=

ngaccount/README.md

@@ -12,16 +12,23 @@ pnpm --ignore-workspace install
 
 ## Dev
 
-```
+```bash
 cd web
 pnpm run dev --host
-// in another terminal
+
+# In another terminal...
 cd ../
-export NG_ACCOUNT_DOMAIN=[?]; export NG_ACCOUNT_ADMIN=[?]; export NG_ACCOUNT_LOCAL_PEER_KEY=[?]; export NG_ACCOUNT_SERVER=127.0.0.1,14400,[?]; export RUST_LOG=debug
+
+# Please set the required environment variables in the .env and then source it it with:
+source .env
+
 cargo watch -c -w src -x run
-// then open http://localhost:5173/
+# Then open http://localhost:5173/#/create
 ```
 
+> Currently, the ng-account server api is listening on http://127.0.0.1:3031 only which might cause you trouble (coded in `main.rs`, `Create.svelte` and `Delete.svelte`).
+> If you need to test from a (virtual) android device, you can use adb to tunnel the connection like: [`adb reverse tcp:3031 tcp:3031`](https://justinchips.medium.com/proxying-adb-client-connections-2ab495f774eb).
+
 ## Prod
 
 ```

ngaccount/src/main.rs

@@ -258,7 +258,7 @@ async fn main() -> anyhow::Result<()> {
         "Content-Security-Policy",
         HeaderValue::from_static(
             #[cfg(debug_assertions)]
-            "default-src 'self' data:; connect-src ipc: https://ipc.localhost 'self' http://192.168.192.2:3031",
+            "default-src 'self' data:; connect-src ipc: https://ipc.localhost 'self' http://localhost:3031",
             #[cfg(not(debug_assertions))]
             "default-src 'self' data:; connect-src ipc: https://ipc.localhost 'self'",
             
@@ -304,9 +304,10 @@ async fn main() -> anyhow::Result<()> {
     {
         log_debug!("CORS: any origin");
         cors = cors.allow_any_origin();
-        log::info!("Starting server on http://192.168.192.2:3031");
+        log::info!("Starting server on http://localhost:3031");
         warp::serve(api_v1.or(static_files).with(cors).with(incoming_log))
-            .run(([192, 168, 192, 2], 3031))
+            // TODO: Change this to local network ip?
+            .run(([127, 0, 0, 1], 3031))
             .await;
     }
 

ngaccount/web/src/routes/Create.svelte

@@ -27,7 +27,7 @@
   let top;
   const api_url = import.meta.env.PROD
     ? "api/v1/"
-    : "http://192.168.192.2:3031/api/v1/";
+    : "http://127.0.0.1:3031/api/v1/";
 
   async function register() {
     wait = true;
@@ -375,7 +375,7 @@
         </div>
       </div>
       {#if ca}
-        <div class="row mb-20">
+        <div class="row mb-10">
           <button
             on:click|once={accept}
             class="mr-5 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"

ngaccount/web/src/routes/Delete.svelte

@@ -27,7 +27,7 @@
   let top;
   const api_url = import.meta.env.PROD
     ? "api/v1/"
-    : "http://192.168.192.2:3031/api/v1/";
+    : "http://127.0.0.1:3031/api/v1/";
 
   async function bootstrap() {}
   let error;
@@ -154,7 +154,7 @@
         </ul>
       </div>
     </div>
-    <div class="row mb-20">
+    <div class="row mb-10">
       <button
         on:click|once={accept}
         class="mr-5 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"

ngone/web/src/routes/WalletCreate.svelte

@@ -51,7 +51,7 @@
     A <b>NextGraph Wallet</b> is unique to each person.<br /> It stores your
     credentials to access documents. You need one in order to start using
     NextGraph.<br />If you already have a wallet, you should not create a new
-    one, instead,
+    one. Instead,
     {#if display_note_on_local_wallets}
       <a href="/" use:link>login here with your existing wallet.</a>
     {:else}