From 7250f75dfed69b130835817744d34968caafe1bc Mon Sep 17 00:00:00 2001
From: Alex <32063118+alex-byteport@users.noreply.github.com>
Date: Tue, 21 Jan 2025 17:06:41 +0100
Subject: [PATCH 01/11] new sidebar ui, wallet and token selector dropdown
 (#104)

* new sidebar ui, wallet and token selector dropdown

* prettier

* cleanup sidebar and make session proxy open work

* make token selector work and remove NetworkSelector header

* change UX for loading older messages

* calculate fee from message length

* remove create test wallet for prod

* add health indicator and token logog to header for mobile

* mobile header for vouchers and messages too

* prettier

* add missing dep

* add missing dep

* add missing dep

---------

Co-authored-by: Alexey Popov <a.popov@tantumpay.com>
Co-authored-by: Alain Brenzikofer <alain@integritee.network>
---
 components/overlays/ChooseWalletOverlay.vue   | 158 ++-
 components/overlays/SessionProxiesOverlay.vue | 263 ++---
 components/tabs/FaqTab.vue                    |   9 +
 components/tabs/MessagingTab.vue              | 116 ++-
 components/tabs/VouchersTab.vue               |  13 +-
 components/tabs/WalletTab.vue                 |  15 +-
 components/ui/Sidebar.vue                     | 283 +++++-
 components/ui/TokenIndicator.vue              |  59 ++
 configs/incognitee.ts                         |   2 +-
 env.testnet.pas                               |   1 +
 nuxt.config.ts                                |   2 +
 package.json                                  |  15 +-
 pages/index.vue                               |  13 +
 pages/pas.vue                                 |   7 +
 public/env.testnet.pas                        |   6 +
 yarn.lock                                     | 920 +++++-------------
 16 files changed, 970 insertions(+), 912 deletions(-)
 create mode 100644 components/tabs/FaqTab.vue
 create mode 100644 components/ui/TokenIndicator.vue
 create mode 120000 env.testnet.pas
 create mode 100644 pages/pas.vue
 create mode 100644 public/env.testnet.pas

diff --git a/components/overlays/ChooseWalletOverlay.vue b/components/overlays/ChooseWalletOverlay.vue
index bf2b322..0a2eb64 100644
--- a/components/overlays/ChooseWalletOverlay.vue
+++ b/components/overlays/ChooseWalletOverlay.vue
@@ -1,72 +1,73 @@
 <template>
   <OverlayDialog :show="show" :close="closeProxy" title="Access Your Wallet!">
-    <div class="mt-2">
+    <div class="my-2">
       <div v-if="hasCreateTestingAccountFn" class="mt-4">
-        <p class="text-sm text-gray-400">How would you like to connect?</p>
-        <br />
-        <button
-          @click="createTestingAccount"
-          class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+        <p
+          v-if="!isConnected && extensionAccounts.length < 1"
+          class="text-sm my-5 mb-5 text-gray-400"
         >
-          Create a New Account for Testing
-        </button>
-        <p class="mt-4">or</p>
+          How would you like to connect?
+        </p>
       </div>
-      <div v-if="extensionAccounts.length < 1" class="mt-4 flex flex-col">
+      <div
+        :class="{
+          'flex items-start space-x-4': extensionAccounts.length < 1,
+          'flex flex-col items-center space-y-5': extensionAccounts.length > 0,
+        }"
+      >
+        <!-- Left Column -->
         <div
-          class="mx-auto grid max-w-lg grid-cols-2 gap-x-3 gap-y-3 sm:max-w-xl sm:grid-cols-4 sm:gap-x-3 lg:mx-0 lg:max-w-none lg:grid-cols-4"
+          v-if="hasCreateTestingAccountFn"
+          :class="{
+            'text-center': extensionAccounts.length > 0,
+            'flex-1 text-left': extensionAccounts.length < 1,
+          }"
         >
-          <a href="https://talisman.xyz/download"
-            ><img
-              class="col-span-1 max-h-10 w-full object-contain lg:col-span-1"
-              src="/img/index/talisman-logo.svg"
-              alt="talisman"
-          /></a>
-          <a href="https://novawallet.io/"
-            ><img
-              class="col-span-1 max-h-7 w-full object-contain lg:col-span-1"
-              src="/img/index/nova-wallet-logo.svg"
-              alt="nova wallet"
-          /></a>
-          <a href="https://www.subwallet.app/"
-            ><img
-              class="col-span-1 max-h-10 w-full object-contain lg:col-span-1"
-              src="/img/index/sub-wallet-logo.svg"
-              alt="sub wallet"
-          /></a>
-          <a href="https://polkadot.js.org/extension/"
-            ><img
-              class="col-span-1 max-h-7 w-full object-contain lg:col-span-1"
-              src="/img/index/polkadotjs-logo.svg"
-              alt="polkajs"
-          /></a>
+          <p class="text-sm mb-3 text-gray-400">Create a new testing wallet:</p>
+          <button
+            @click="createTestingAccount"
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue rounded-md text-sm font-semibold text-white py-1.5 w-full hover:shadow-lg hover:shadow-incognitee-green/50"
+          >
+            Create Wallet
+          </button>
         </div>
-        <div class="mt-10">
+
+        <!-- Vertical Divider -->
+        <div
+          v-if="hasCreateTestingAccountFn"
+          class="w-px bg-gray-700 h-auto self-stretch"
+        ></div>
+        <!-- Right Column -->
+        <div v-if="extensionAccounts.length < 1" class="flex-1 text-left">
+          <p class="text-sm mb-3 text-gray-400">
+            Connect using a browser extension:
+          </p>
           <button
             @click="connectExtension"
-            class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue rounded-md text-sm font-semibold text-white py-1.5 w-full hover:shadow-lg hover:shadow-incognitee-green/50"
           >
-            Connect Signer Extension
+            Connect
           </button>
         </div>
       </div>
+
+      <!-- Choose Account Section -->
       <div
         v-if="extensionAccounts.length > 0"
         ref="walletSection"
         id="wallet"
-        class="py-12 sm:py-16"
+        class="py-5 sm:py-5 w-full text-center"
       >
-        <p class="text-sm text-gray-400">
-          Choose one of your extension accounts
+        <p class="text-sm mb-2 text-gray-400">
+          Choose one of your extension accounts:
         </p>
         <select
           v-model="selectedExtensionAccount"
           id="account.address"
           name="account.address"
-          placeholder="account.address"
           class="w-full rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
         >
-          <option disabled value="">choose...</option>
+          <option disabled value="">Choose...</option>
           <option
             v-for="account in extensionAccounts"
             :key="account.address"
@@ -76,22 +77,70 @@
           </option>
         </select>
       </div>
-      <div v-if="accountStore.hasInjector" class="mt-10">
-        <p class="text-sm text-gray-400 wrap-text">
-          your currently selected account is {{ accountStore.getAddress }}
-        </p>
+
+      <!-- Supported Extensions Section -->
+      <div v-if="!isConnected && extensionAccounts.length < 1" class="mt-5">
+        <p class="text-sm text-gray-400">Supported extensions:</p>
+        <div
+          class="mt-3 grid grid-cols-2 gap-x-3 gap-y-3 sm:grid-cols-4 sm:gap-x-3 lg:grid-cols-4"
+        >
+          <a href="https://talisman.xyz/download">
+            <img
+              class="max-h-10 w-full object-contain"
+              src="/img/index/talisman-logo.svg"
+              alt="talisman"
+            />
+          </a>
+          <a href="https://novawallet.io/">
+            <img
+              class="max-h-7 w-full object-contain"
+              src="/img/index/nova-wallet-logo.svg"
+              alt="nova wallet"
+            />
+          </a>
+          <a href="https://www.subwallet.app/">
+            <img
+              class="max-h-10 w-full object-contain"
+              src="/img/index/sub-wallet-logo.svg"
+              alt="sub wallet"
+            />
+          </a>
+          <a href="https://polkadot.js.org/extension/">
+            <img
+              class="max-h-7 w-full object-contain"
+              src="/img/index/polkadotjs-logo.svg"
+              alt="polkajs"
+            />
+          </a>
+        </div>
+      </div>
+
+      <!-- Currently Selected Account Section -->
+      <div v-if="accountStore.hasInjector">
+        <div
+          class="text-sm text-gray-400 wrap-text p-4 bg-gray-900 border border-gray-800 rounded-md text-center"
+        >
+          <span> Your currently selected account is:<br /></span>
+          <span class="text-white">{{ accountStore.getAddress }}</span>
+        </div>
+
         <div
           v-if="accountStore.sessionProxyForRole(SessionProxyRole.ReadBalance)"
-          class="mt-10"
+          class="mt-7"
         >
+          <p class="text-sm mb-2 text-gray-400">
+            Would you like to update your session key authorization settings?
+          </p>
           <button
             @click="changeSessionAuthorization"
-            class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue rounded-md text-sm font-semibold text-white py-1.5 w-full hover:shadow-lg hover:shadow-incognitee-green/50"
           >
-            Change Session Key Authorization
+            Update Session Key Role
           </button>
         </div>
       </div>
+
+      <!-- Trusted Getter Hint Section -->
       <div
         v-if="
           accountStore.hasInjector &&
@@ -101,11 +150,11 @@
         class="mt-10"
       >
         <p class="text-sm text-gray-400">
-          please allow this app to read your balance by signing the upcoming
+          Please allow this app to read your balance by signing the upcoming
           request in your extension
         </p>
         <p class="mt-5 text-sm text-gray-400">
-          this window will close once a balance could be fetched
+          This window will close once a balance could be fetched
         </p>
       </div>
     </div>
@@ -122,6 +171,11 @@ import { computed, defineProps, ref, watch } from "vue";
 import { useAccount } from "~/store/account.ts";
 import { encodeAddress } from "@polkadot/util-crypto";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
+const isConnected = ref(false);
+
+const handleConnect = () => {
+  isConnected.value = true;
+};
 
 const accountStore = useAccount();
 const currentExtensionAccount = ref("");
diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index 9e2f0fc..79206e2 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -1,140 +1,155 @@
 <template>
-  <OverlayDialog :show="show" :close="closeProxy" title="Session Authorization">
-    <div class="mt-2">
-      <p class="text-sm text-gray-400">
-        For a smooth experience with minimal signing interaction we recommend
-        that your authorize a session key. It will be cached confidentially on
-        Incognitee and loaded automatically on your next visit.
-      </p>
-      <p class="text-sm text-gray-400">
-        Registering a session key costs a fee of
-        {{ formatDecimalBalance(INCOGNITEE_TX_FEE) }}
-        {{ accountStore.getSymbol }} and a deposit of
-        {{ INCOGNITEE_SESSION_PROXY_DEPOSIT }} {{ accountStore.getSymbol }} will
-        be reserved.
-      </p>
-      <!--<p>you currently have a session key with role {{ bestSessionProxyRole }}</p>-->
-      <div class="flex flex-col mt-5">
+  <OverlayDialog
+    :show="show"
+    :close="closeProxy"
+    title="Session Key Authorization"
+  >
+    <div class="mt-2 space-y-6">
+      <!-- Authorization Details -->
+      <div>
+        <p class="text-sm text-gray-400">
+          For a smooth experience with minimal signing interaction, we recommend
+          that you authorize a session key. It will be cached confidentially on
+          Incognitee and loaded automatically on your next visit.
+        </p>
+        <p class="text-sm text-gray-400 mt-2">
+          Registering a session key costs a fee of
+          <span class="font-semibold">{{
+            formatDecimalBalance(INCOGNITEE_TX_FEE)
+          }}</span>
+          {{ accountStore.getSymbol }} and a deposit of
+          <span class="font-semibold">{{
+            INCOGNITEE_SESSION_PROXY_DEPOSIT
+          }}</span>
+          {{ accountStore.getSymbol }} will be reserved.
+        </p>
+      </div>
+
+      <!-- Options -->
+      <div class="grid grid-cols-1 gap-4">
         <form @submit.prevent="updateAuthorization">
-          <label>Select an option:</label>
           <!-- removing proxies not yet supported
-          <div v-if="bestSessionProxyRole !== null" class="radio-group">
-            <div>
-              <input
-                type="radio"
-                id="noProxy"
-                value="NoProxy"
-                v-model="selectedSessionProxyRole"
-              />
-            </div>
-            <label for="noProxy">remove all authorizations</label>
-          </div> -->
-          <div class="radio-group">
-            <div v-if="'readBalance' !== bestSessionProxyRole">
-              <input
-                type="radio"
-                id="readBalance"
-                value="ReadBalance"
-                v-model="selectedSessionProxyRole"
-              />
-            </div>
-            <div v-else class="mr-4">✓</div>
-            <label for="readBalance">allow reading balance</label>
-          </div>
-          <div class="radio-group">
-            <div v-if="'readAny' !== bestSessionProxyRole">
-              <input
-                type="radio"
-                id="readAny"
-                value="ReadAny"
-                v-model="selectedSessionProxyRole"
-              />
-            </div>
-            <div v-else class="mr-4">✓</div>
-            <label for="readAny">full read access</label>
+<div v-if="bestSessionProxyRole !== null" class="radio-group">
+  <div>
+    <input
+      type="radio"
+      id="noProxy"
+      value="NoProxy"
+      v-model="selectedSessionProxyRole"
+    />
+  </div>
+  <label for="noProxy">remove all authorizations</label>
+</div> -->
+          <div
+            class="p-4 my-1 border border-gray-700 rounded-md hover:bg-gray-800 transition"
+          >
+            <label class="flex items-center space-x-3">
+              <div v-if="'readBalance' !== bestSessionProxyRole">
+                <input
+                  type="radio"
+                  id="readBalance"
+                  value="ReadBalance"
+                  v-model="selectedSessionProxyRole"
+                />
+              </div>
+              <div v-else class="mr-4">✓</div>
+              <span class="text-sm text-gray-400">Allow reading balance</span>
+            </label>
           </div>
-          <div class="radio-group">
-            <div v-if="'nonTransfer' !== bestSessionProxyRole">
-              <input
-                type="radio"
-                id="nonTransfer"
-                value="NonTransfer"
-                v-model="selectedSessionProxyRole"
-              />
-            </div>
-            <div v-else class="mr-4">✓</div>
-            <label for="nonTransfer">allow non-transfer actions</label>
+          <div
+            class="p-4 my-1 border border-gray-700 rounded-md hover:bg-gray-800 transition"
+          >
+            <label class="flex items-center space-x-3">
+              <div v-if="'readAny' !== bestSessionProxyRole">
+                <input
+                  type="radio"
+                  id="readAny"
+                  value="ReadAny"
+                  v-model="selectedSessionProxyRole"
+                />
+              </div>
+              <div v-else class="mr-4">✓</div>
+              <span class="text-sm text-gray-400">Full read access</span>
+            </label>
           </div>
-          <div class="radio-group">
-            <div v-if="'any' !== bestSessionProxyRole">
-              <input
-                type="radio"
-                id="any"
-                value="Any"
-                v-model="selectedSessionProxyRole"
-              />
-            </div>
-            <div v-else class="mr-4">✓</div>
-            <label for="any">allow all actions</label>
+          <div
+            class="p-4 my-1 border border-gray-700 rounded-md hover:bg-gray-800 transition"
+          >
+            <label class="flex items-center space-x-3">
+              <div v-if="'nonTransfer' !== bestSessionProxyRole">
+                <input
+                  type="radio"
+                  id="nonTransfer"
+                  value="NonTransfer"
+                  v-model="selectedSessionProxyRole"
+                />
+              </div>
+              <div v-else class="mr-4">✓</div>
+              <span class="text-sm text-gray-400"
+                >Allow non-transfer actions</span
+              >
+            </label>
           </div>
-          <!--
-                    <p class="text-sm text-gray-400">
-                      If this is your personal machine, we recommend to persist a session
-                      key in browser storage. This will avoid the initial authentication
-                      signature in the extension when you visit this site.
-                    </p>
-                    <div class="mt-2">
-                      <input
-                        type="checkbox"
-                        id="persistSession"
-                        v-model="persistSessionProxy"
-                      />
-                      <label for="persistSession"
-                      >Persist session key in browser storage</label
-                      >
-                    </div>-->
-
           <div
-            v-if="
-              accountStore.getDecimalBalanceFree(incogniteeSidechain) <
-                INCOGNITEE_SESSION_PROXY_DEPOSIT + INCOGNITEE_TX_FEE &&
-              bestSessionProxyRole == null
-            "
-            class="mt-5"
+            class="p-4 my-1 border border-gray-700 rounded-md hover:bg-gray-800 transition"
           >
-            <p class="text-sm text-yellow-400">
-              You need at least
-              {{
-                formatDecimalBalance(
-                  INCOGNITEE_SESSION_PROXY_DEPOSIT + INCOGNITEE_TX_FEE,
-                )
-              }}
-              {{ accountStore.getSymbol }} private balance to register a session
-              proxy. You have
-              {{ accountStore.formatBalanceFree(incogniteeSidechain) }}.
-            </p>
+            <label class="flex items-center space-x-3">
+              <div v-if="'any' !== bestSessionProxyRole">
+                <input
+                  type="radio"
+                  id="any"
+                  value="Any"
+                  v-model="selectedSessionProxyRole"
+                />
+              </div>
+              <div v-else class="mr-4">✓</div>
+              <span class="text-sm text-gray-400">Allow all actions</span>
+            </label>
           </div>
-          <div v-else>
-            <p class="text-sm text-gray-400 mb-5">
-              the signer extension will pop up and ask you to sign this request
-            </p>
-            <button
-              type="submit"
-              class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+          <!--
+          <p class="text-sm text-gray-400">
+            If this is your personal machine, we recommend to persist a session
+            key in browser storage. This will avoid the initial authentication
+            signature in the extension when you visit this site.
+          </p>
+          <div class="mt-2">
+            <input
+              type="checkbox"
+              id="persistSession"
+              v-model="persistSessionProxy"
+            />
+            <label for="persistSession"
+            >Persist session key in browser storage</label
             >
-              Update Authorization
-            </button>
-          </div>
-        </form>
-        <div v-if="bestSessionProxyRole == null" class="mt-5">
+          </div>-->
+          <p class="text-sm text-gray-400 my-4">
+            The signer extension will pop up and ask you to sign this request.
+          </p>
           <button
-            type="button"
-            @click="close(true)"
-            class="rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+            type="submit"
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue rounded-md text-sm font-semibold text-white py-2 w-full hover:shadow-lg hover:shadow-incognitee-green/50"
           >
-            Continue Without Session Proxy
+            Update Authorization
           </button>
-        </div>
+        </form>
+      </div>
+
+      <!-- Continue Without Proxy -->
+      <div
+        v-if="bestSessionProxyRole == null"
+        class="mt-10 p-4 bg-gray-900 border border-gray-800 rounded-md text-center"
+      >
+        <p class="text-sm text-gray-400">
+          You can continue without session authorization, but it may require
+          more frequent signing interactions.
+        </p>
+        <button
+          type="button"
+          @click="close(true)"
+          class="mt-4 bg-gray-800 text-white px-4 py-2 rounded-md text-sm font-semibold hover:bg-gray-700 transition"
+        >
+          Continue Without Session Proxy
+        </button>
       </div>
     </div>
   </OverlayDialog>
diff --git a/components/tabs/FaqTab.vue b/components/tabs/FaqTab.vue
new file mode 100644
index 0000000..6849d60
--- /dev/null
+++ b/components/tabs/FaqTab.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="text-white">TEST</div>
+</template>
+
+<script></script>
+
+<style scoped>
+/* No custom styles needed as we are using Tailwind CSS */
+</style>
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index 6a7b56b..f94d369 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -67,12 +67,17 @@
           >
             ☰
           </button>
+
           <!-- Linksbündiger Titel -->
           <div
             class="title text-2xl font-bold tracking-tight text-white sm:text-2xl"
           >
             Chats
           </div>
+          <div class="lg:hidden">
+            <HealthIndicator />
+          </div>
+          <TokenIndicator class="lg:hidden" />
 
           <!-- Rechtsbündiges "Neue Nachricht" Icon -->
           <!-- Button zum Öffnen des Overlays -->
@@ -204,55 +209,96 @@
         <!-- Chat Messages -->
         <div class="flex-1 overflow-y-auto" style="height: calc(100vh - 12rem)">
           <div
-            v-if="eventHorizon"
-            class="my-5 mx-5 flex text-center text-xs text-gray-500"
+            v-if="eventHorizon && unfetchedBucketsCount === 0"
+            class="my-5 mx-5 flex text-center text-blue justify-center text-xs text-gray-500"
           >
             messages before {{ formatMoment(eventHorizon) }} have been purged
-            from Incognitee state. more recent messages can be polled in batches
+            from Incognitee state.
           </div>
           <div
             v-if="unfetchedBucketsCount > 0"
-            class="my-5 mx-5 flex text-center text-xs text-gray-500"
+            class="my-5 mx-5 flex text-center justify-center text-xs text-gray-500"
           >
-            <button @click="fetchOlderBucket">
-              query more messages
+            <div
+              @click="fetchOlderBucket"
+              class="flex items-center cursor-pointer text-blue"
+            >
+              <svg
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                class="w-3 h-3 text-blue-600 mr-2"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+              load older messages
               {{
-                accountStore.hasInjector
+                accountStore.hasInjector &&
+                !accountStore.hasSessionProxyForRole(SessionProxyRole.ReadAny)
                   ? "(needs signature in extension)"
                   : ""
-              }}: fetch older batch {{ bucketsCount - unfetchedBucketsCount }} /
-              {{ bucketsCount }}
-            </button>
-            <div v-if="isUpdatingNotes" class="spinner"></div>
+              }}
+              ({{ bucketsCount - unfetchedBucketsCount }} /
+              {{ bucketsCount }} buckets)
+            </div>
+            <div v-if="isUpdatingNotes" class="spinner ml-4"></div>
           </div>
           <PrivateMessageHistory
             :show="true"
             :counterparty="conversationAddress"
           />
         </div>
-        <!-- Input Box -->
         <div
           v-if="recipientValid(conversationAddress)"
           class="border-t border-gray-700 bg-gray-800 absolute bottom-0 left-0 right-0 z-10"
         >
           <div class="flex items-center bg-gray-800 px-4 py-2">
             <form class="flex w-full" @submit.prevent="submitSendForm">
-              <div class="relative w-full">
-                <textarea
-                  id="newMessage"
-                  v-model="sendPrivateNote"
-                  rows="1"
-                  maxlength="140"
-                  name="newMessage"
-                  required
-                  placeholder="Enter message"
-                  class="w-full text-sm rounded-lg py-2 pr-12 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue"
-                ></textarea>
-                <!-- Zeichen-Counter -->
-                <div
-                  class="absolute top-1/2 right-3 transform -translate-y-1/2 text-gray-400 text-xs"
-                >
-                  {{ sendPrivateNote.length }}/140
+              <!-- Div für Input-Feld und Balance/Fee -->
+              <div class="flex-1">
+                <!-- Eingabefeld -->
+                <div class="relative">
+                  <textarea
+                    id="newMessage"
+                    v-model="sendPrivateNote"
+                    rows="1"
+                    maxlength="140"
+                    name="newMessage"
+                    required
+                    placeholder="Enter message"
+                    class="w-full text-sm rounded-lg py-2 pr-12 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue"
+                  ></textarea>
+                  <!-- Zeichen-Counter -->
+                  <div
+                    class="absolute top-1/2 right-2 transform -translate-y-1/2 text-gray-400 text-xs"
+                  >
+                    {{ sendPrivateNote.length }}/140
+                  </div>
+                </div>
+                <div class="flex justify-between mt-1 text-xs text-gray-400">
+                  <!-- Links: Placeholder -->
+                  <div class="flex items-center" />
+
+                  <!-- Rechts: Balance und Fee -->
+                  <div class="text-right">
+                    <span>
+                      Private balance:
+                      {{ accountStore.formatBalanceFree(incogniteeSidechain) }}
+                    </span>
+                    &nbsp;&nbsp;
+                    <span>
+                      Fee: ~{{
+                        (
+                          INCOGNITEE_TX_FEE +
+                          INCOGNITEE_BYTE_FEE * sendPrivateNote.length
+                        ).toFixed(4)
+                      }}
+                      {{ accountStore.getSymbol }} for Incognitee
+                    </span>
+                  </div>
                 </div>
               </div>
               <!-- Senden-Button -->
@@ -391,10 +437,10 @@
 import PrivateMessageHistory from "~/components/ui/PrivateMessageHistory.vue";
 import { incogniteeSidechain } from "~/lib/environmentConfig";
 import { eventBus } from "@/helpers/eventBus";
-import { INCOGNITEE_TX_FEE } from "~/configs/incognitee";
+import { INCOGNITEE_BYTE_FEE, INCOGNITEE_TX_FEE } from "~/configs/incognitee";
 import { Health, useSystemHealth } from "~/store/systemHealth";
 import { TypeRegistry, u32 } from "@polkadot/types";
-import { defineProps, ref, watch, computed, onMounted, onUnmounted } from "vue";
+import { computed, defineProps, onMounted, onUnmounted, ref, watch } from "vue";
 import { useAccount } from "~/store/account";
 import { useIncognitee } from "~/store/incognitee";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
@@ -405,10 +451,10 @@ import { identities as polkadotPeopleIdentities } from "@/lib/polkadotPeopleIden
 import { identities as wellKnownIdentities } from "@/lib/wellKnownIdentites";
 import { formatMoment } from "@/helpers/date";
 import { useNotes } from "@/store/notes.ts";
-import { Note, NoteDirection } from "@/lib/notes";
-import { divideBigIntToFloat } from "@/helpers/numbers";
-import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
+import { Note } from "@/lib/notes";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
+import HealthIndicator from "~/components/ui/HealthIndicator.vue";
+import TokenIndicator from "~/components/ui/TokenIndicator.vue";
 
 const identityLut = [...polkadotPeopleIdentities, ...wellKnownIdentities];
 
@@ -822,6 +868,10 @@ textarea {
   color: #ffffff;
 }
 
+.text-blue {
+  color: #2563eb;
+}
+
 .truncate-input {
   white-space: nowrap;
   overflow: hidden;
diff --git a/components/tabs/VouchersTab.vue b/components/tabs/VouchersTab.vue
index ac92708..c018878 100644
--- a/components/tabs/VouchersTab.vue
+++ b/components/tabs/VouchersTab.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="mt-3 sm:mt-5 px-3">
+  <div class="mt-3 sm:mt-5 px-3 flex justify-between items-center">
     <button
       @click="eventBus.emit('toggleSidebar')"
       class="lg:hidden text-white focus:outline-none text-2xl"
     >
       ☰
     </button>
+    <div class="lg:hidden">
+      <HealthIndicator />
+    </div>
+    <TokenIndicator class="lg:hidden" />
   </div>
   <div class="p-3">
-    <NetworkSelector
-      :openAssetsInfo="() => {}"
-      :selectedNetwork="shieldingTarget"
-    />
     <div class="text-center mt-10 mb-5">
       <span class="text-2xl font-black">Vouchers</span>
       <p class="mt-2 text-sm text-gray-400">
@@ -359,7 +359,6 @@
 </template>
 
 <script setup lang="ts">
-import NetworkSelector from "~/components/ui/NetworkSelector.vue";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
 import { watch, ref, onMounted } from "vue";
 import Qrcode from "vue-qrcode";
@@ -390,6 +389,8 @@ import {
 } from "~/lib/voucherStorage";
 import { eventBus } from "@/helpers/eventBus";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
+import HealthIndicator from "~/components/ui/HealthIndicator.vue";
+import TokenIndicator from "~/components/ui/TokenIndicator.vue";
 
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index e2ee2df..6342817 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -1,12 +1,16 @@
 <template>
   <div v-if="show" class="p-3">
-    <div class="mb-3">
+    <div class="mb-3 flex justify-between items-center">
       <button
         @click="eventBus.emit('toggleSidebar')"
         class="lg:hidden text-white focus:outline-none text-2xl"
       >
         ☰
       </button>
+      <div class="lg:hidden">
+        <HealthIndicator />
+      </div>
+      <TokenIndicator class="lg:hidden" />
     </div>
     <WarningBanner
       v-if="
@@ -38,11 +42,6 @@
 
     <div class="mt-4"></div>
 
-    <NetworkSelector
-      :openAssetsInfo="openAssetsInfo"
-      :selectedNetwork="shieldingTarget"
-    />
-
     <div>
       <PublicPrivateBalanceSwitcher
         :selectTab="selectTab"
@@ -1043,7 +1042,6 @@ import { formatDecimalBalance } from "~/helpers/numbers";
 import WarningBanner from "~/components/ui/WarningBanner.vue";
 import CampaignBanner from "~/components/ui/CampaignBanner.vue";
 import ObtainTokenOverlay from "~/components/overlays/ObtainTokenOverlay.vue";
-import NetworkSelector from "~/components/ui/NetworkSelector.vue";
 import InfoBanner from "~/components/ui/InfoBanner.vue";
 import PublicPrivateBalanceSwitcher from "~/components/ui/PublicPrivateBalanceSwitcher.vue";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
@@ -1070,6 +1068,9 @@ import { formatMoment } from "~/helpers/date";
 import { eventBus } from "@/helpers/eventBus";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 import SessionProxiesOverlay from "~/components/overlays/SessionProxiesOverlay.vue";
+import HealthIndicator from "~/components/ui/HealthIndicator.vue";
+import IncogniteeLogo from "~/components/Logo/incognitee-logo.vue";
+import TokenIndicator from "~/components/ui/TokenIndicator.vue";
 
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
diff --git a/components/ui/Sidebar.vue b/components/ui/Sidebar.vue
index e0411e4..100c34d 100644
--- a/components/ui/Sidebar.vue
+++ b/components/ui/Sidebar.vue
@@ -21,10 +21,10 @@
 
       <!-- Navigation -->
       <nav class="mt-8">
-        <ul class="space-y-4">
+        <ul>
           <li class="px-4">
             <button
-              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              class="flex items-center w-full text-left text-sm text-gray-400 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
                   emitEvent('switchToWallet');
@@ -51,7 +51,7 @@
           </li>
           <li class="px-4">
             <button
-              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              class="flex items-center w-full text-left text-sm text-gray-400 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
                   emitEvent('switchToVouchers');
@@ -78,7 +78,7 @@
           </li>
           <li class="px-4">
             <button
-              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              class="flex items-center w-full text-left text-sm text-gray-400 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
                   emitEvent('switchToMessaging');
@@ -97,9 +97,10 @@
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+                  d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
                 />
               </svg>
+
               Messages
             </button>
           </li>
@@ -111,7 +112,7 @@
             class="px-4"
           >
             <button
-              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              class="flex items-center w-full text-left text-sm text-gray-400 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
                   emitEvent('switchToTeerDays');
@@ -125,7 +126,7 @@
           </li>
           <li class="px-4">
             <button
-              class="flex items-center w-full text-left text-sm font-semibold text-gray-500 hover:bg-gray-800 px-2 py-2 rounded-md"
+              class="flex items-center w-full text-left text-sm text-gray-600 hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
                   emitEvent('switchToSwap');
@@ -150,6 +151,77 @@
               Swap
             </button>
           </li>
+          <UDivider
+            class="flex border-gray-800 w-full border-t-1 border-solid my-5"
+          />
+          <li class="px-4" v-if="accountStore.hasInjector">
+            <span
+              class="flex items-center w-full text-left text-sm font-semibold text-gray-500 mb-2"
+            >
+              SETTINGS
+            </span>
+          </li>
+          <li class="px-4" v-if="accountStore.hasInjector">
+            <button
+              @click="
+                () => {
+                  emitEvent('openSessionProxiesOverlay');
+                  toggleSidebar();
+                }
+              "
+              class="flex items-center w-full text-left text-sm text-gray-400 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+                />
+              </svg>
+
+              Session Key
+            </button>
+          </li>
+          <UDivider
+            v-if="accountStore.hasInjector"
+            class="flex border-gray-800 w-full border-t-1 border-solid my-5"
+          />
+          <li class="px-4">
+            <span
+              class="flex items-center w-full text-left text-sm font-semibold text-gray-500 mb-2"
+            >
+              COMMUNITY & SUPPORT
+            </span>
+          </li>
+          <li class="px-4">
+            <a
+              href="mailto:support@integritee.network"
+              class="flex items-center w-full text-left text-sm text-gray-400 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+                />
+              </svg>
+              Contact support
+            </a>
+          </li>
         </ul>
       </nav>
     </div>
@@ -157,7 +229,7 @@
     <!-- Footer Content -->
     <div class="px-4 space-y-4 mb-4">
       <div class="flex items-center text-xs" @click="toggleSidebar">
-        <span class="mr-2">System Health</span>
+        <span class="mr-2 text-gray-500">System Health</span>
         <HealthIndicator />
       </div>
       <div class="text-sm flex flex-col space-y-1">
@@ -175,23 +247,105 @@
           </button>
         </div>
         <div v-else>
-          <div class="text-xs text-white">Connected with</div>
-          <div
-            class="text-xs text-gray-600 break-all cursor-pointer"
-            @click="
-              () => {
-                emitEvent('addressClicked');
-                toggleSidebar();
-              }
-            "
-          >
-            {{ accountStore.getAddress }}
+          <div class="text-xs text-gray-500 mb-1">Select Token:</div>
+          <div class="relative group mb-3">
+            <!-- Dropdown Trigger -->
+            <div
+              class="flex items-center w-full rounded-md border border-gray-700 bg-gray-800 py-1.5 px-3 text-xs text-gray-400 hover:ring-1 hover:ring-incognitee-green focus-within:ring-1 focus-within:ring-incognitee-green cursor-pointer"
+              @click="toggleTokenDropdown"
+            >
+              <TEER
+                v-if="selectedToken === 'TEER'"
+                class="w-[14px] h-[14px] mr-2"
+              />
+              <Paseo
+                v-else-if="selectedToken === 'PAS'"
+                class="w-[14px] h-[14px] mr-2"
+              />
+              <DOT
+                v-else-if="selectedToken === 'DOT'"
+                class="w-[14px] h-[14px] mr-2"
+              />
+              <span class="truncate">{{ selectedToken }}</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                :class="['w-3 h-3 ml-auto', isOpen ? 'rotate-180' : '']"
+                class="transition-transform text-gray-500 hover:text-incognitee-green"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+
+            <!-- Dropdown Menu -->
+            <div
+              v-show="isOpen"
+              class="absolute bottom-full mb-2 w-full rounded-md bg-gray-800 border border-gray-700 shadow-lg text-gray-400 z-10"
+            >
+              <div
+                v-for="item in tokenSelectorItems"
+                :key="item.value"
+                class="flex text-xs items-center px-3 py-2 hover:bg-gray-700 hover:text-white cursor-pointer"
+                @click="redirect(item)"
+              >
+                <component :is="item.icon" class="w-[14px] h-[14px] mr-2" />
+                <span>{{ item.label }}</span>
+              </div>
+            </div>
+
+            <!-- Dropdown Menu -->
+            <div
+              v-show="isOpen"
+              class="absolute bottom-full mb-2 w-full rounded-md bg-gray-800 border border-gray-700 shadow-lg text-gray-400 z-10"
+            >
+              <div
+                v-for="item in tokenSelectorItems"
+                :key="item.value"
+                class="flex text-xs items-center px-3 py-2 hover:bg-gray-700 hover:text-white cursor-pointer"
+                @click="selectToken(item)"
+              >
+                <component :is="item.icon" class="w-[14px] h-[14px] mr-2" />
+                <span>{{ item.label }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="text-xs text-gray-500 mb-1">Connected with:</div>
+          <div class="relative group">
+            <div
+              class="flex items-center w-full rounded-md border border-gray-700 bg-gray-800 py-1.5 px-3 text-xs text-gray-400 hover:ring-1 hover:ring-incognitee-green focus-within:ring-1 focus-within:ring-incognitee-green"
+              @click="
+                () => {
+                  emitEvent('addressClicked');
+                  toggleSidebar();
+                }
+              "
+            >
+              <span class="truncate">{{ accountStore.getAddress }}</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                class="w-5 h-5 text-gray-500 ml-auto hover:text-incognitee-green"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <!-- Overlay: Hintergrund abdunkeln -->
+
   <!-- Overlay: Hintergrund abdunkeln nur in mobiler Ansicht -->
   <div
     v-if="isSidebarOpen"
@@ -201,12 +355,74 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, computed, defineProps, watch } from "vue";
 import HealthIndicator from "@/components/ui/HealthIndicator.vue";
 import { useAccount } from "@/store/account";
 import { eventBus } from "@/helpers/eventBus";
 import Incognitee from "@/assets/img/incognitee-full-logo.svg";
 import TEERdays from "@/public/img/index/TEERdays-icon-white.svg";
+import Paseo from "assets/img/paseo-logo.svg";
+import DOT from "@/assets/img/polkadot-logo.svg";
+import TEER from "@/assets/img/logo-icon.svg";
+import { useRouter } from "vue-router";
+
+const isOpen = ref(false);
+const selectedToken = ref("PAS");
+const router = useRouter();
+const accountStore = useAccount();
+
+const tokenSelectorItems = [
+  { label: "TEER", value: "TEER", icon: TEER },
+  { label: "PAS", value: "PAS", icon: Paseo },
+  { label: "DOT", value: "DOT", icon: DOT },
+];
+
+const toggleTokenDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const selectToken = (item) => {
+  const currentQuery = { ...router.currentRoute.value.query };
+  // replace the last part of the url path with the selected token
+  let newPath = router.currentRoute.value.path.replace(
+    /\/[^/]*$/,
+    `/${item.label.toLowerCase()}`,
+  );
+  router
+    .push({
+      path: newPath,
+      query: currentQuery,
+    })
+    .then(() => {
+      if (selectedToken.value !== item.value) {
+        window.location.reload();
+      }
+    });
+  //selectedToken.value = item.label;
+  //isOpen.value = false; // Close dropdown after selection
+  //toggleSidebar()
+};
+
+watch(
+  () => accountStore.getSymbol,
+  (newValue) => {
+    selectedToken.value = newValue;
+  },
+);
+
+// Neuer Zustand und Methode für Menü
+const isMenuOpen = ref(false);
+
+const closeMenu = () => {
+  isMenuOpen.value = false;
+};
+
+const handleOutsideClick = (event) => {
+  const dropdown = document.getElementById("menu-button");
+  if (dropdown && !dropdown.contains(event.target)) {
+    closeMenu();
+  }
+};
 
 // Sidebar-State (local)
 const isSidebarOpen = ref(false);
@@ -216,22 +432,18 @@ const toggleSidebar = () => {
   isSidebarOpen.value = !isSidebarOpen.value;
 };
 
-const emitAddressClicked = () => {
-  eventBus.emit("addressClicked");
-};
-
 // Event-Abonnement bei Mounten und Entfernen bei Unmounten
 onMounted(() => {
   eventBus.on("toggleSidebar", toggleSidebar);
+  document.addEventListener("click", handleOutsideClick);
+  selectedToken.value = accountStore.getSymbol;
 });
 
 onUnmounted(() => {
   eventBus.off("toggleSidebar", toggleSidebar);
+  document.removeEventListener("click", handleOutsideClick);
 });
 
-// Account Store für Wallet-Adresse
-const accountStore = useAccount();
-
 // Event-Emitter-Funktionen
 const emitEvent = (eventName: string) => {
   eventBus.emit(eventName);
@@ -239,5 +451,18 @@ const emitEvent = (eventName: string) => {
 </script>
 
 <style scoped>
-/* Optional: zusätzliche Styles für die Sidebar */
+.wallet-address {
+  display: block;
+  white-space: nowrap; /* Verhindert Zeilenumbruch */
+  overflow: hidden; /* Versteckt überlaufenden Text */
+  text-overflow: ellipsis; /* Zeigt '...' bei zu langem Text an */
+  max-width: 10ch; /* Maximale Länge: 10 Zeichen */
+}
+
+/* Für größere Bildschirme (ab 641px) */
+@media (min-width: 641px) {
+  .wallet-address {
+    max-width: 10ch; /* Begrenze auch hier auf 10 Zeichen */
+  }
+}
 </style>
diff --git a/components/ui/TokenIndicator.vue b/components/ui/TokenIndicator.vue
new file mode 100644
index 0000000..000aae5
--- /dev/null
+++ b/components/ui/TokenIndicator.vue
@@ -0,0 +1,59 @@
+<template>
+  <div v-if="accountStore.getSymbol === 'TEER'">
+    <TEER class="w-[30px] h-[30px]" />
+  </div>
+  <div v-else-if="accountStore.getSymbol === 'DOT'">
+    <DOT class="w-[30px] h-[30px]" />
+  </div>
+  <div v-else-if="accountStore.getSymbol === 'PAS'">
+    <Paseo class="w-[30px] h-[30px]" />
+  </div>
+  <div v-else>unknown token</div>
+</template>
+
+<script setup lang="ts">
+import Paseo from "@/assets/img/paseo-logo.svg";
+import TEER from "@/assets/img/logo-icon.svg";
+import DOT from "@/assets/img/polkadot-logo.svg";
+import { useAccount } from "~/store/account";
+
+const accountStore = useAccount();
+</script>
+
+<style scoped>
+.ribbon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 75px;
+  height: 75px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.ribbon span {
+  position: absolute;
+  display: block;
+  width: 100px;
+  padding: 0px 0;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  transform: rotate(45deg);
+  top: 9px;
+  right: -33px;
+}
+
+.ribbon.red span {
+  background-color: var(--integritee-red);
+}
+
+.ribbon.blue span {
+  background-color: var(--integritee-blue);
+}
+
+.ribbon.gray span {
+  background-color: var(--integritee-gray);
+}
+</style>
diff --git a/configs/incognitee.ts b/configs/incognitee.ts
index 3ee6c6c..30d9983 100644
--- a/configs/incognitee.ts
+++ b/configs/incognitee.ts
@@ -7,7 +7,7 @@ export const INCOGNITEE_UNSHIELDING_FEE = 3 * INCOGNITEE_TX_FEE; // TEER or PAS,
 export const INCOGNITEE_SHIELDING_FEE_FRACTION = 0.00175; // 0.175% of the shielding amount
 
 export const INCOGNITEE_SESSION_PROXY_DEPOSIT = 0.1; // TEER or PAS, decimals are respected
-
+export const INCOGNITEE_BYTE_FEE = 0.0001; // per byte of message
 export const minUnshieldingAmount = (token: string): number => {
   if (token === "TEER") {
     return 1.1;
diff --git a/env.testnet.pas b/env.testnet.pas
new file mode 120000
index 0000000..f3cbde7
--- /dev/null
+++ b/env.testnet.pas
@@ -0,0 +1 @@
+public/env.testnet.pas
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c09c351..a4527bd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -85,10 +85,12 @@ export default defineNuxtConfig({
     "/": { ssr: false },
     "/dot": { ssr: false },
     "/teer": { ssr: false },
+    "/pas": { ssr: false },
     "/gtn": { ssr: false },
     "/teerdays-lp": { ssr: false },
     "/referral": { ssr: false },
     "/referraltc": { ssr: false },
+    "/faq": { ssr: false },
   },
   imports: {
     autoImport: false,
diff --git a/package.json b/package.json
index f7de73b..3a377e4 100644
--- a/package.json
+++ b/package.json
@@ -14,24 +14,29 @@
     "lintfix": "eslint . --fix && prettier --write --list-different ."
   },
   "devDependencies": {
+    "@egoist/tailwindcss-icons": "^1.0.0",
     "@nuxt/devtools": "^1.2.0",
     "@nuxt/eslint": "^0.3.10",
     "@nuxtjs/tailwindcss": "^6.12.0",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/lodash": "^4.14.195",
     "@types/node": "^20.12.7",
     "@types/nodemailer": "^6.4.8",
     "@types/qrcode": "^1",
-    "autoprefixer": "^10.4.17",
-    "daisyui": "^4.12.14",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.23",
     "esbuild": "^0.20.2",
     "eslint": "^9.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "install": "^0.13.0",
     "nuxt": "^3.11.2",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.49",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
     "vite-svg-loader": "^5.1.0",
@@ -42,6 +47,7 @@
     "@encointer/util": "^0.18.0",
     "@encointer/worker-api": "^0.18.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.22",
     "@heroicons/vue": "^2.1.3",
     "@material-tailwind/html": "^2.2.2",
@@ -56,6 +62,7 @@
     "@polkadot/util-crypto": "^12.6.2",
     "@polkadot/wasm-util": "^7.3.2",
     "@polkadot/x-randomvalues": "^12.6.2",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^10.9.0",
diff --git a/pages/index.vue b/pages/index.vue
index 3a35aaa..62dd919 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -30,6 +30,7 @@
   </div>
   <!-- all following tabs can be unmounted if unselected -->
   <div v-if="activeApp === 'vouchers'"><VouchersTab /></div>
+  <div v-else-if="activeApp === 'faq'"><FaqTab /></div>
   <div v-else-if="activeApp === 'swap'"><SwapTab /></div>
   <div v-else-if="activeApp === 'gov'"><GovTab /></div>
   <div v-else-if="activeApp === 'teerdays'">
@@ -164,6 +165,7 @@ import MessagingTab from "~/components/tabs/MessagingTab.vue";
 import SwapTab from "~/components/tabs/SwapTab.vue";
 import GovTab from "~/components/tabs/GovTab.vue";
 import TeerDaysTab from "~/components/tabs/TeerDaysTab.vue";
+import FaqTab from "~/components/tabs/FaqTab.vue";
 
 const router = useRouter();
 const accountStore = useAccount();
@@ -827,6 +829,15 @@ const switchToTeerDays = () => {
   });
 };
 
+const switchToFaq = () => {
+  activeApp.value = "faq";
+  const query = { ...router.currentRoute.value.query };
+  query.app = activeApp.value;
+  router.push({
+    query: query,
+  });
+};
+
 onMounted(async () => {
   checkIfMobile();
   window.addEventListener("resize", checkIfMobile);
@@ -842,6 +853,8 @@ onMounted(async () => {
   eventBus.on("switchToGov", switchToGov);
   eventBus.on("switchToVouchers", switchToVouchers);
   eventBus.on("switchToTeerDays", switchToTeerDays);
+  eventBus.on("switchToFaq", switchToFaq);
+  eventBus.on("openSessionProxiesOverlay", openAuthorizeSessionOverlay);
 
   const injectedAddress = router.currentRoute.value.query.address;
   if (router.currentRoute.value.query.forceLive) {
diff --git a/pages/pas.vue b/pages/pas.vue
new file mode 100644
index 0000000..650a94a
--- /dev/null
+++ b/pages/pas.vue
@@ -0,0 +1,7 @@
+<template>
+  <IndexPage envFile="/env.testnet.pas" />
+</template>
+
+<script setup>
+import IndexPage from "./index.vue";
+</script>
diff --git a/public/env.testnet.pas b/public/env.testnet.pas
new file mode 100644
index 0000000..aadba80
--- /dev/null
+++ b/public/env.testnet.pas
@@ -0,0 +1,6 @@
+SHIELDING_TARGET=PaseoRelay
+INCOGNITEE_SIDECHAIN=IncogniteePaseoRelay
+TEERDAYS_NETWORK=IntegriteePaseo
+SHARD=5wePd1LYa5M49ghwgZXs55cepKbJKhj5xfzQGfPeMS7d
+SHIELDING_LIMIT=50
+LIVE=true
diff --git a/yarn.lock b/yarn.lock
index e81fae1..2739c72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22,20 +22,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@antfu/install-pkg@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "@antfu/install-pkg@npm:0.1.1"
+"@antfu/install-pkg@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "@antfu/install-pkg@npm:0.4.1"
   dependencies:
-    execa: "npm:^5.1.1"
-    find-up: "npm:^5.0.0"
-  checksum: 10c0/ae3116cc0918765ad356901b9c8825340be27deac03eb4c8969377eab9731a3b41d96e920fa0b08adf91fba27a808d08c68852b110775ff79ba40481422cc8ba
+    package-manager-detector: "npm:^0.2.0"
+    tinyexec: "npm:^0.3.0"
+  checksum: 10c0/af47a84e77f3f69077ec464e0a9e82791666693380fc8ed9867f388f5c0cd8421e2642b9deefc7d4adb7b8cfb9dd1a715b25f9a974d023b10779cad0885439ef
   languageName: node
   linkType: hard
 
-"@antfu/utils@npm:^0.7.7, @antfu/utils@npm:^0.7.8":
-  version: 0.7.8
-  resolution: "@antfu/utils@npm:0.7.8"
-  checksum: 10c0/f18f6864a1812414d0617a9a022198bf7d7ff074820494146fdb52b62139c0226d6c3053c09c80a906b9d6fcf2e23cc4bc52c102bc49ebde6bc07e028e25983b
+"@antfu/utils@npm:^0.7.10, @antfu/utils@npm:^0.7.7, @antfu/utils@npm:^0.7.8":
+  version: 0.7.10
+  resolution: "@antfu/utils@npm:0.7.10"
+  checksum: 10c0/98991f66a4752ef097280b4235b27d961a13a2c67ef8e5b716a120eb9823958e20566516711204e2bfb08f0b935814b715f49ecd79c3b9b93ce32747ac297752
   languageName: node
   linkType: hard
 
@@ -267,13 +267,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.24.6":
-  version: 7.24.6
-  resolution: "@babel/helper-string-parser@npm:7.24.6"
-  checksum: 10c0/95115bf676e92c4e99166395649108d97447e6cabef1fabaec8cdbc53a43f27b5df2268ff6534439d405bc1bd06685b163eb3b470455bd49f69159dada414145
-  languageName: node
-  linkType: hard
-
 "@babel/helper-string-parser@npm:^7.24.8":
   version: 7.24.8
   resolution: "@babel/helper-string-parser@npm:7.24.8"
@@ -281,14 +274,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.24.5, @babel/helper-validator-identifier@npm:^7.24.6":
-  version: 7.24.6
-  resolution: "@babel/helper-validator-identifier@npm:7.24.6"
-  checksum: 10c0/d29d2e3fca66c31867a009014169b93f7bc21c8fc1dd7d0b9d85d7a4000670526ff2222d966febb75a6e12f9859a31d1e75b558984e28ecb69651314dd0a6fd1
-  languageName: node
-  linkType: hard
-
-"@babel/helper-validator-identifier@npm:^7.24.7":
+"@babel/helper-validator-identifier@npm:^7.24.5, @babel/helper-validator-identifier@npm:^7.24.6, @babel/helper-validator-identifier@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-validator-identifier@npm:7.24.7"
   checksum: 10c0/87ad608694c9477814093ed5b5c080c2e06d44cb1924ae8320474a74415241223cc2a725eea2640dd783ff1e3390e5f95eede978bc540e870053152e58f1d651
@@ -324,16 +310,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.22.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.24.6":
-  version: 7.24.6
-  resolution: "@babel/parser@npm:7.24.6"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10c0/cbef70923078a20fe163b03f4a6482be65ed99d409a57f3091a23ce3a575ee75716c30e7ea9f40b692ac5660f34055f4cbeb66a354fad15a6cf1fca35c3496c5
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.25.3":
+"@babel/parser@npm:^7.22.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.24.6, @babel/parser@npm:^7.25.3":
   version: 7.25.6
   resolution: "@babel/parser@npm:7.25.6"
   dependencies:
@@ -426,7 +403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.24.1":
+"@babel/runtime@npm:^7.18.9":
   version: 7.24.6
   resolution: "@babel/runtime@npm:7.24.6"
   dependencies:
@@ -471,18 +448,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.24.6, @babel/types@npm:^7.8.3":
-  version: 7.24.6
-  resolution: "@babel/types@npm:7.24.6"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.24.6"
-    "@babel/helper-validator-identifier": "npm:^7.24.6"
-    to-fast-properties: "npm:^2.0.0"
-  checksum: 10c0/1d94d92d97ef49030ad7f9e14cfccfeb70b1706dabcaa69037e659ec9d2c3178fb005d2088cce40d88dfc1306153d9157fe038a79ea2be92e5e6b99a59ef80cc
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.25.6":
+"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.24.6, @babel/types@npm:^7.25.6":
   version: 7.25.6
   resolution: "@babel/types@npm:7.25.6"
   dependencies:
@@ -520,14 +486,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@egoist/tailwindcss-icons@npm:^1.8.0":
-  version: 1.8.0
-  resolution: "@egoist/tailwindcss-icons@npm:1.8.0"
+"@egoist/tailwindcss-icons@npm:^1.0.0, @egoist/tailwindcss-icons@npm:^1.8.0":
+  version: 1.8.2
+  resolution: "@egoist/tailwindcss-icons@npm:1.8.2"
   dependencies:
-    "@iconify/utils": "npm:^2.1.23"
+    "@iconify/utils": "npm:^2.2.0"
   peerDependencies:
     tailwindcss: "*"
-  checksum: 10c0/8d5b908a64c10d8f07f2cd9dc2de0a0ed324cfc5d5ec0461d955bde58a2a3c2c80eaaec02be3c7b93bd4207dd45146769a470b0c44c3614f896aa4685f75504e
+  checksum: 10c0/2318a1fc643ca8ae5523b26c6b0e293aa4450b58eaeca34a4374a95f2314874bd57d3969db735114cb275ccc0559fc894a85800110528c29208e97a56963e2d3
   languageName: node
   linkType: hard
 
@@ -868,7 +834,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@headlessui/tailwindcss@npm:^0.2.0":
+"@headlessui/tailwindcss@npm:^0.2.0, @headlessui/tailwindcss@npm:^0.2.1":
   version: 0.2.1
   resolution: "@headlessui/tailwindcss@npm:0.2.1"
   peerDependencies:
@@ -954,18 +920,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@iconify/utils@npm:^2.1.23":
-  version: 2.1.24
-  resolution: "@iconify/utils@npm:2.1.24"
+"@iconify/utils@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "@iconify/utils@npm:2.2.1"
   dependencies:
-    "@antfu/install-pkg": "npm:^0.1.1"
-    "@antfu/utils": "npm:^0.7.7"
+    "@antfu/install-pkg": "npm:^0.4.1"
+    "@antfu/utils": "npm:^0.7.10"
     "@iconify/types": "npm:^2.0.0"
-    debug: "npm:^4.3.4"
+    debug: "npm:^4.4.0"
+    globals: "npm:^15.13.0"
     kolorist: "npm:^1.8.0"
-    local-pkg: "npm:^0.5.0"
-    mlly: "npm:^1.6.1"
-  checksum: 10c0/4ad3f6ecf4e4255c56f3c5355bdba2ce2596ad884cc7c786a6d013101f94743e5297d6afca44ed282c0acd62927ab2c43e500e133a153bc210b27a7b2ec3e2e6
+    local-pkg: "npm:^0.5.1"
+    mlly: "npm:^1.7.3"
+  checksum: 10c0/c2c59eadb9efc611f0cfff73b996e7dbc9894ed426d98e5f2ee39a81677bf0e6c3b2264ba7a2762a22d85267730ca75782629cac75a33bb4dd7dd0cb0174383a
   languageName: node
   linkType: hard
 
@@ -1036,14 +1003,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
-  version: 1.4.15
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
-  checksum: 10c0/0c6b5ae663087558039052a626d2d7ed5208da36cfd707dcc5cea4a07cfc918248403dcb5989a8f7afaf245ce0573b7cc6fd94c4a30453bd10e44d9363940ba5
-  languageName: node
-  linkType: hard
-
-"@jridgewell/sourcemap-codec@npm:^1.5.0":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
   version: 1.5.0
   resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
   checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18
@@ -2168,21 +2128,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-augment@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/api-augment@npm:11.2.1"
-  dependencies:
-    "@polkadot/api-base": "npm:11.2.1"
-    "@polkadot/rpc-augment": "npm:11.2.1"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/types-augment": "npm:11.2.1"
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/bd1c28d48a4f41c16395b6932b3e7478e7f8e67ad24d5f263be48620445ee8c94327856233b2fcb75f047007529e6ba8b692960f120bd99a52d80b095dda7273
-  languageName: node
-  linkType: hard
-
 "@polkadot/api-augment@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/api-augment@npm:11.3.1"
@@ -2198,19 +2143,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-base@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/api-base@npm:11.2.1"
-  dependencies:
-    "@polkadot/rpc-core": "npm:11.2.1"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    rxjs: "npm:^7.8.1"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/2fcf57ce1657387ae3c20cf9a74198ae21636ab8b97daf2bb3f53d51fc0ed8c136a3df57e066e0033ca69b8b1c6ff10b6982435c36734b63d502427748a4dc0b
-  languageName: node
-  linkType: hard
-
 "@polkadot/api-base@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/api-base@npm:11.3.1"
@@ -2224,24 +2156,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/api-derive@npm:11.2.1"
-  dependencies:
-    "@polkadot/api": "npm:11.2.1"
-    "@polkadot/api-augment": "npm:11.2.1"
-    "@polkadot/api-base": "npm:11.2.1"
-    "@polkadot/rpc-core": "npm:11.2.1"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    "@polkadot/util-crypto": "npm:^12.6.2"
-    rxjs: "npm:^7.8.1"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/c020aa400de51ff957631f85c8e40a3d7d6dbae3d217069d1855deaf2019e0cc1696f433f923e245a11f5109004054674066b8086214945e9de626a35db80b7e
-  languageName: node
-  linkType: hard
-
 "@polkadot/api-derive@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/api-derive@npm:11.3.1"
@@ -2260,32 +2174,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:11.2.1, @polkadot/api@npm:^11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/api@npm:11.2.1"
-  dependencies:
-    "@polkadot/api-augment": "npm:11.2.1"
-    "@polkadot/api-base": "npm:11.2.1"
-    "@polkadot/api-derive": "npm:11.2.1"
-    "@polkadot/keyring": "npm:^12.6.2"
-    "@polkadot/rpc-augment": "npm:11.2.1"
-    "@polkadot/rpc-core": "npm:11.2.1"
-    "@polkadot/rpc-provider": "npm:11.2.1"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/types-augment": "npm:11.2.1"
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/types-create": "npm:11.2.1"
-    "@polkadot/types-known": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    "@polkadot/util-crypto": "npm:^12.6.2"
-    eventemitter3: "npm:^5.0.1"
-    rxjs: "npm:^7.8.1"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/be64b38b56626ed59ba7d0171866aecbbf372052d304b417536a62c523ac62e2073a730f97655d2050c0c839bd41b1e73f011551e628a6ea291daa0bf1e52c39
-  languageName: node
-  linkType: hard
-
-"@polkadot/api@npm:11.3.1, @polkadot/api@npm:^11.3.1":
+"@polkadot/api@npm:11.3.1, @polkadot/api@npm:^11.2.1, @polkadot/api@npm:^11.3.1":
   version: 11.3.1
   resolution: "@polkadot/api@npm:11.3.1"
   dependencies:
@@ -2369,19 +2258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-augment@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/rpc-augment@npm:11.2.1"
-  dependencies:
-    "@polkadot/rpc-core": "npm:11.2.1"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/72b1505892353846489403b64b3a1a2001ea98289325d565e7a42d03b2c74d265ac4e9d067310f1b1a0100f5c58ed0ce267c3a80a7d2e6f98850d932db37f67d
-  languageName: node
-  linkType: hard
-
 "@polkadot/rpc-augment@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/rpc-augment@npm:11.3.1"
@@ -2395,20 +2271,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-core@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/rpc-core@npm:11.2.1"
-  dependencies:
-    "@polkadot/rpc-augment": "npm:11.2.1"
-    "@polkadot/rpc-provider": "npm:11.2.1"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    rxjs: "npm:^7.8.1"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/817539744e4a9ae7126bd6ee3172a7d4090c824d87ae3f067ead3ff20d3e729dfc14d256db10d25211e428f8fde2a60990d9526863babed2f3567779a17297c2
-  languageName: node
-  linkType: hard
-
 "@polkadot/rpc-core@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/rpc-core@npm:11.3.1"
@@ -2423,30 +2285,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/rpc-provider@npm:11.2.1"
-  dependencies:
-    "@polkadot/keyring": "npm:^12.6.2"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/types-support": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    "@polkadot/util-crypto": "npm:^12.6.2"
-    "@polkadot/x-fetch": "npm:^12.6.2"
-    "@polkadot/x-global": "npm:^12.6.2"
-    "@polkadot/x-ws": "npm:^12.6.2"
-    "@substrate/connect": "npm:0.8.10"
-    eventemitter3: "npm:^5.0.1"
-    mock-socket: "npm:^9.3.1"
-    nock: "npm:^13.5.0"
-    tslib: "npm:^2.6.2"
-  dependenciesMeta:
-    "@substrate/connect":
-      optional: true
-  checksum: 10c0/54ad5a4ae95c6332b69c9413f5487dcc3a55d5d64cbe0889d7b24692a47fbe7a914950bd522d4a210a934dacd1f68e2f38c2db3e1538b9b7c4667d2d0c6b656c
-  languageName: node
-  linkType: hard
-
 "@polkadot/rpc-provider@npm:11.3.1, @polkadot/rpc-provider@npm:^11.3.1":
   version: 11.3.1
   resolution: "@polkadot/rpc-provider@npm:11.3.1"
@@ -2471,18 +2309,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-augment@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/types-augment@npm:11.2.1"
-  dependencies:
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/eb7e8e370037dbb0301fbafe80d9355153d929f247f75c2206b1cc4f6e035d30bda546af73b60b810c09ba133505de06b03de11b23243b2ea70e74491b1a5b5d
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-augment@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/types-augment@npm:11.3.1"
@@ -2495,18 +2321,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-codec@npm:11.2.1, @polkadot/types-codec@npm:^11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/types-codec@npm:11.2.1"
-  dependencies:
-    "@polkadot/util": "npm:^12.6.2"
-    "@polkadot/x-bigint": "npm:^12.6.2"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/a5e65e8350800eb0d4278c821bc811ae37918be24bbbb67dd9db956cf3251e6f4adcf48b50ffe044e0366a2dd08c0983254e67c4b7f9e8c698fc5469d20ea5c0
-  languageName: node
-  linkType: hard
-
-"@polkadot/types-codec@npm:11.3.1":
+"@polkadot/types-codec@npm:11.3.1, @polkadot/types-codec@npm:^11.2.1":
   version: 11.3.1
   resolution: "@polkadot/types-codec@npm:11.3.1"
   dependencies:
@@ -2517,17 +2332,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-create@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/types-create@npm:11.2.1"
-  dependencies:
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/a9fa6ddc4b4c70d68d096503488bde59d5593d64a91596de38f41fb02d2fd5a8df4e283c201dd07731094efa2d05ff1f401963ec34ec3d43bb13e76be56a19b1
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-create@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/types-create@npm:11.3.1"
@@ -2539,20 +2343,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/types-known@npm:11.2.1"
-  dependencies:
-    "@polkadot/networks": "npm:^12.6.2"
-    "@polkadot/types": "npm:11.2.1"
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/types-create": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/271d442c7471aa2a586a326413eb3a2aa59c72ccfef5939bc3b770d125f44734724de37da8d2e98d6c68e17c14cd6f6af42d7a19d1def0b8e012442393df843a
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-known@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/types-known@npm:11.3.1"
@@ -2567,16 +2357,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-support@npm:11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/types-support@npm:11.2.1"
-  dependencies:
-    "@polkadot/util": "npm:^12.6.2"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/9c6a2f1f6d5a5bdc30e51a7a27294c4c9debcb51dbae23e5b9c8bedfe33d024eca3d3ff4b4c94ba5ec7cb687c57b2ef1dac634ad7f5064eb8c2d30a465341086
-  languageName: node
-  linkType: hard
-
 "@polkadot/types-support@npm:11.3.1":
   version: 11.3.1
   resolution: "@polkadot/types-support@npm:11.3.1"
@@ -2587,23 +2367,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:11.2.1, @polkadot/types@npm:^11.2.1":
-  version: 11.2.1
-  resolution: "@polkadot/types@npm:11.2.1"
-  dependencies:
-    "@polkadot/keyring": "npm:^12.6.2"
-    "@polkadot/types-augment": "npm:11.2.1"
-    "@polkadot/types-codec": "npm:11.2.1"
-    "@polkadot/types-create": "npm:11.2.1"
-    "@polkadot/util": "npm:^12.6.2"
-    "@polkadot/util-crypto": "npm:^12.6.2"
-    rxjs: "npm:^7.8.1"
-    tslib: "npm:^2.6.2"
-  checksum: 10c0/2754f81b06421747632c1deef011698323673c8769cc6b9af8bfdd368a5a3c011fec442ee405bea81ac0834af78fc360645c3c4071250224ffeba2950d1f2d54
-  languageName: node
-  linkType: hard
-
-"@polkadot/types@npm:11.3.1, @polkadot/types@npm:^11.3.1":
+"@polkadot/types@npm:11.3.1, @polkadot/types@npm:^11.2.1, @polkadot/types@npm:^11.3.1":
   version: 11.3.1
   resolution: "@polkadot/types@npm:11.3.1"
   dependencies:
@@ -3341,20 +3105,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/forms@npm:^0.5.7":
-  version: 0.5.7
-  resolution: "@tailwindcss/forms@npm:0.5.7"
+"@tailwindcss/forms@npm:^0.5.10, @tailwindcss/forms@npm:^0.5.7":
+  version: 0.5.10
+  resolution: "@tailwindcss/forms@npm:0.5.10"
   dependencies:
     mini-svg-data-uri: "npm:^1.2.3"
   peerDependencies:
-    tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1"
-  checksum: 10c0/cd29e0c978402ae87a923ae802dcff43f7b050595666cb067321cac2e37a52f61b9d73385cb0a10455548581ddd0d3886815bd6c64a1da06247c0057fa9f4601
+    tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
+  checksum: 10c0/235cbf08edf09362418808ebddcc767c9e151fba55f3d7d2d5c47862c715b6169204b9277461036707b4c30f3fb1e217933278f80525840e198f8e7dd9168e0d
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/line-clamp@npm:^0.4.4":
+  version: 0.4.4
+  resolution: "@tailwindcss/line-clamp@npm:0.4.4"
+  peerDependencies:
+    tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+  checksum: 10c0/53e74e75bff066469501b784ab70af444fa460d556a3adf95cb14ccf1a56b1e63c106f0c4bb94463ba0310f2ce1f71350f9b18a556048655cfd2a0ad308ccfb8
   languageName: node
   linkType: hard
 
-"@tailwindcss/typography@npm:^0.5.13":
-  version: 0.5.13
-  resolution: "@tailwindcss/typography@npm:0.5.13"
+"@tailwindcss/typography@npm:^0.5.13, @tailwindcss/typography@npm:^0.5.16":
+  version: 0.5.16
+  resolution: "@tailwindcss/typography@npm:0.5.16"
   dependencies:
     lodash.castarray: "npm:^4.4.0"
     lodash.isplainobject: "npm:^4.0.6"
@@ -3362,7 +3135,7 @@ __metadata:
     postcss-selector-parser: "npm:6.0.10"
   peerDependencies:
     tailwindcss: "*"
-  checksum: 10c0/6c01287e7492c001595cd5a39765f313e48e1d2997ea78823919edabd692300d144c42b6e16dee6e077a683e635b9164ff985d5a0f8eeff7824b2d119151899e
+  checksum: 10c0/35a7387876810c23c270a23848b920517229b707c8ead6a63c8bb7d6720a62f23728c3117f0a93b422a66d1e5ee9c7ad8a6c3f0fbf5255b535c0e4971ffa0158
   languageName: node
   linkType: hard
 
@@ -3856,20 +3629,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.4.27, @vue/compiler-core@npm:^3.4.21":
-  version: 3.4.27
-  resolution: "@vue/compiler-core@npm:3.4.27"
-  dependencies:
-    "@babel/parser": "npm:^7.24.4"
-    "@vue/shared": "npm:3.4.27"
-    entities: "npm:^4.5.0"
-    estree-walker: "npm:^2.0.2"
-    source-map-js: "npm:^1.2.0"
-  checksum: 10c0/fbc9a4a6c467fa47609df3337c1b2012a55e3b07adbffc45a31435237ec1169d0a4ece22f3538607364427b779ce04154b86a0e8dd40d3bd4aa03358d4db136d
-  languageName: node
-  linkType: hard
-
-"@vue/compiler-core@npm:3.5.1":
+"@vue/compiler-core@npm:3.5.1, @vue/compiler-core@npm:^3.4.21":
   version: 3.5.1
   resolution: "@vue/compiler-core@npm:3.5.1"
   dependencies:
@@ -3882,17 +3642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.4.27, @vue/compiler-dom@npm:^3.3.4":
-  version: 3.4.27
-  resolution: "@vue/compiler-dom@npm:3.4.27"
-  dependencies:
-    "@vue/compiler-core": "npm:3.4.27"
-    "@vue/shared": "npm:3.4.27"
-  checksum: 10c0/ceb8aef314b6b7df1ab6cd3c7c1290e5b60363a6092bbffc3ee6aca42f6f5247a070b0dcbe71530751e840d01beec00a6268e3663abcf4a6ac297a32bfb90e49
-  languageName: node
-  linkType: hard
-
-"@vue/compiler-dom@npm:3.5.1":
+"@vue/compiler-dom@npm:3.5.1, @vue/compiler-dom@npm:^3.3.4":
   version: 3.5.1
   resolution: "@vue/compiler-dom@npm:3.5.1"
   dependencies:
@@ -3902,24 +3652,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.4.27, @vue/compiler-sfc@npm:^3.4.15, @vue/compiler-sfc@npm:^3.4.27":
-  version: 3.4.27
-  resolution: "@vue/compiler-sfc@npm:3.4.27"
-  dependencies:
-    "@babel/parser": "npm:^7.24.4"
-    "@vue/compiler-core": "npm:3.4.27"
-    "@vue/compiler-dom": "npm:3.4.27"
-    "@vue/compiler-ssr": "npm:3.4.27"
-    "@vue/shared": "npm:3.4.27"
-    estree-walker: "npm:^2.0.2"
-    magic-string: "npm:^0.30.10"
-    postcss: "npm:^8.4.38"
-    source-map-js: "npm:^1.2.0"
-  checksum: 10c0/2ccb852c521bf799cf2b118ee8d2aa0eeaaaab1a2e8d3a4a0bd9db5aaccb6224d6673c0c8e39ff8a04e3a99b21128bdaa6ee643e08562af36d75803801cfd641
-  languageName: node
-  linkType: hard
-
-"@vue/compiler-sfc@npm:3.5.1":
+"@vue/compiler-sfc@npm:3.5.1, @vue/compiler-sfc@npm:^3.4.15, @vue/compiler-sfc@npm:^3.4.27":
   version: 3.5.1
   resolution: "@vue/compiler-sfc@npm:3.5.1"
   dependencies:
@@ -3936,16 +3669,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-ssr@npm:3.4.27":
-  version: 3.4.27
-  resolution: "@vue/compiler-ssr@npm:3.4.27"
-  dependencies:
-    "@vue/compiler-dom": "npm:3.4.27"
-    "@vue/shared": "npm:3.4.27"
-  checksum: 10c0/5c51a43481e5faa3f4e66a01a19a5de8a0c25db5df25183d7f9227853740d8ea75c12b1b89f47198f840de852d2e4c258be114528c0c322aff50c5982a973e1f
-  languageName: node
-  linkType: hard
-
 "@vue/compiler-ssr@npm:3.5.1":
   version: 3.5.1
   resolution: "@vue/compiler-ssr@npm:3.5.1"
@@ -4039,15 +3762,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.4.27":
-  version: 3.4.27
-  resolution: "@vue/reactivity@npm:3.4.27"
-  dependencies:
-    "@vue/shared": "npm:3.4.27"
-  checksum: 10c0/5a30fa92cb1b467f56c467d9851a9d594475c80952a600db444c38a8fe2dfc53e4aa09fed6b0e6074eca667c915c730d02b386be26d5f7a0565e70ae04fe92b7
-  languageName: node
-  linkType: hard
-
 "@vue/reactivity@npm:3.5.1":
   version: 3.5.1
   resolution: "@vue/reactivity@npm:3.5.1"
@@ -4057,16 +3771,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-core@npm:3.4.27":
-  version: 3.4.27
-  resolution: "@vue/runtime-core@npm:3.4.27"
-  dependencies:
-    "@vue/reactivity": "npm:3.4.27"
-    "@vue/shared": "npm:3.4.27"
-  checksum: 10c0/dc02dfefebeec49c6b8aab9e133551b6cedef3c55e7441732a696aba66b865945549ba0f92a97a0f4ab080b828bca2cc2ce669ad7c6d2ee129d5050948f03817
-  languageName: node
-  linkType: hard
-
 "@vue/runtime-core@npm:3.5.1":
   version: 3.5.1
   resolution: "@vue/runtime-core@npm:3.5.1"
@@ -4077,17 +3781,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-dom@npm:3.4.27":
-  version: 3.4.27
-  resolution: "@vue/runtime-dom@npm:3.4.27"
-  dependencies:
-    "@vue/runtime-core": "npm:3.4.27"
-    "@vue/shared": "npm:3.4.27"
-    csstype: "npm:^3.1.3"
-  checksum: 10c0/2ace60cab29400c4d466b6743552ae3af360f908d7716316c23a641bd5adce7aa05d2b4522ecf3b6b2f912bb525c8e055708db11791e50aea24ff6b2a71e0a8e
-  languageName: node
-  linkType: hard
-
 "@vue/runtime-dom@npm:3.5.1":
   version: 3.5.1
   resolution: "@vue/runtime-dom@npm:3.5.1"
@@ -4100,18 +3793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.4.27":
-  version: 3.4.27
-  resolution: "@vue/server-renderer@npm:3.4.27"
-  dependencies:
-    "@vue/compiler-ssr": "npm:3.4.27"
-    "@vue/shared": "npm:3.4.27"
-  peerDependencies:
-    vue: 3.4.27
-  checksum: 10c0/5e6761ecd74c0a9ca9fd991f7a980140d2e09427712dbdc74b536bc5a9b97c06825ca4fa006b4a7cd6ba224fdb13c1c6a600e7d039d2a40f036b13ed611aa20f
-  languageName: node
-  linkType: hard
-
 "@vue/server-renderer@npm:3.5.1":
   version: 3.5.1
   resolution: "@vue/server-renderer@npm:3.5.1"
@@ -4124,14 +3805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.4.27, @vue/shared@npm:^3.4.21":
-  version: 3.4.27
-  resolution: "@vue/shared@npm:3.4.27"
-  checksum: 10c0/4a21918858270bcc654bb94b3429d9acbe95af097ea3063e192b36bd502dc896ca47778fa74a863b01f677ec271b189eb90f8b372943c10e52725a6bdc7f6cd5
-  languageName: node
-  linkType: hard
-
-"@vue/shared@npm:3.5.1":
+"@vue/shared@npm:3.5.1, @vue/shared@npm:^3.4.21":
   version: 3.5.1
   resolution: "@vue/shared@npm:3.5.1"
   checksum: 10c0/fe54f4861eb0e2962fd11d9607cb2b02ffd162ccd31264f3fa3949cd4673eb9704bab7c1a9c7f4f59fbeb2eebc5d579729c2aeab7cb77a0654d2bd865a732c57
@@ -4346,7 +4020,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:8.11.3, acorn@npm:^8.11.3, acorn@npm:^8.6.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:8.11.3":
   version: 8.11.3
   resolution: "acorn@npm:8.11.3"
   bin:
@@ -4355,6 +4029,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.11.3, acorn@npm:^8.14.0, acorn@npm:^8.6.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+  version: 8.14.0
+  resolution: "acorn@npm:8.14.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10c0/6d4ee461a7734b2f48836ee0fbb752903606e576cc100eb49340295129ca0b452f3ba91ddd4424a1d4406a98adfb2ebb6bd0ff4c49d7a0930c10e462719bbfd7
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:6":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -4627,21 +4310,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.4.17, autoprefixer@npm:^10.4.19":
-  version: 10.4.19
-  resolution: "autoprefixer@npm:10.4.19"
+"autoprefixer@npm:^10.4.19, autoprefixer@npm:^10.4.20":
+  version: 10.4.20
+  resolution: "autoprefixer@npm:10.4.20"
   dependencies:
-    browserslist: "npm:^4.23.0"
-    caniuse-lite: "npm:^1.0.30001599"
+    browserslist: "npm:^4.23.3"
+    caniuse-lite: "npm:^1.0.30001646"
     fraction.js: "npm:^4.3.7"
     normalize-range: "npm:^0.1.2"
-    picocolors: "npm:^1.0.0"
+    picocolors: "npm:^1.0.1"
     postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
     postcss: ^8.1.0
   bin:
     autoprefixer: bin/autoprefixer
-  checksum: 10c0/fe0178eb8b1da4f15c6535cd329926609b22d1811e047371dccce50563623f8075dd06fb167daff059e4228da651b0bdff6d9b44281541eaf0ce0b79125bfd19
+  checksum: 10c0/e1f00978a26e7c5b54ab12036d8c13833fad7222828fc90914771b1263f51b28c7ddb5803049de4e77696cbd02bb25cfc3634e80533025bb26c26aacdf938940
   languageName: node
   linkType: hard
 
@@ -4780,17 +4463,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.22.2, browserslist@npm:^4.23.0":
-  version: 4.23.0
-  resolution: "browserslist@npm:4.23.0"
+"browserslist@npm:^4.0.0, browserslist@npm:^4.22.2, browserslist@npm:^4.23.0, browserslist@npm:^4.23.3":
+  version: 4.24.4
+  resolution: "browserslist@npm:4.24.4"
   dependencies:
-    caniuse-lite: "npm:^1.0.30001587"
-    electron-to-chromium: "npm:^1.4.668"
-    node-releases: "npm:^2.0.14"
-    update-browserslist-db: "npm:^1.0.13"
+    caniuse-lite: "npm:^1.0.30001688"
+    electron-to-chromium: "npm:^1.5.73"
+    node-releases: "npm:^2.0.19"
+    update-browserslist-db: "npm:^1.1.1"
   bin:
     browserslist: cli.js
-  checksum: 10c0/8e9cc154529062128d02a7af4d8adeead83ca1df8cd9ee65a88e2161039f3d68a4d40fea7353cab6bae4c16182dec2fdd9a1cf7dc2a2935498cee1af0e998943
+  checksum: 10c0/db7ebc1733cf471e0b490b4f47e3e2ea2947ce417192c9246644e92c667dd56a71406cc58f62ca7587caf828364892e9952904a02b7aead752bc65b62a37cfe9
   languageName: node
   linkType: hard
 
@@ -4964,10 +4647,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001599":
-  version: 1.0.30001625
-  resolution: "caniuse-lite@npm:1.0.30001625"
-  checksum: 10c0/26752c65c775ce24b8cfd39a241a4ce33accf2d2e2982f37827c2f94caac3520a3493419e096c42578d372073a2e9f4359f0122ca4c00e51cb02463c512fc6b3
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001688":
+  version: 1.0.30001692
+  resolution: "caniuse-lite@npm:1.0.30001692"
+  checksum: 10c0/fca5105561ea12f3de593f3b0f062af82f7d07519e8dbcb97f34e7fd23349bcef1b1622a9a6cd2164d98e3d2f20059ef7e271edae46567aef88caf4c16c7708a
   languageName: node
   linkType: hard
 
@@ -5284,10 +4967,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"confbox@npm:^0.1.3, confbox@npm:^0.1.7":
-  version: 0.1.7
-  resolution: "confbox@npm:0.1.7"
-  checksum: 10c0/18b40c2f652196a833f3f1a5db2326a8a579cd14eacabfe637e4fc8cb9b68d7cf296139a38c5e7c688ce5041bf46f9adce05932d43fde44cf7e012840b5da111
+"confbox@npm:^0.1.3, confbox@npm:^0.1.8":
+  version: 0.1.8
+  resolution: "confbox@npm:0.1.8"
+  checksum: 10c0/fc2c68d97cb54d885b10b63e45bd8da83a8a71459d3ecf1825143dd4c7f9f1b696b3283e07d9d12a144c1301c2ebc7842380bdf0014e55acc4ae1c9550102418
   languageName: node
   linkType: hard
 
@@ -5585,15 +5268,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"daisyui@npm:^4.12.14":
-  version: 4.12.14
-  resolution: "daisyui@npm:4.12.14"
+"daisyui@npm:^4.12.23":
+  version: 4.12.23
+  resolution: "daisyui@npm:4.12.23"
   dependencies:
     css-selector-tokenizer: "npm:^0.8"
     culori: "npm:^3"
     picocolors: "npm:^1"
     postcss-js: "npm:^4"
-  checksum: 10c0/8b665e285cea4fa8775428ea6b6ca5f86b41077ac37db2faae9566bc97c9dc4fc637243791a795ba3db17fe62beeef01fb02092d26323cab90e93ce2768b7d14
+  checksum: 10c0/7699d294c6193800fc1a0671d67f1a5ea46059cd36702a4326a82c6b0bb823de8ba485aca20beac970ee2a47949c5411df8ea60a40c3e00989d7ce2214e6c196
   languageName: node
   linkType: hard
 
@@ -5638,15 +5321,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2":
-  version: 4.3.4
-  resolution: "debug@npm:4.3.4"
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "debug@npm:4.4.0"
   dependencies:
-    ms: "npm:2.1.2"
+    ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/cedbec45298dd5c501d01b92b119cd3faebe5438c3917ff11ae1bff86a6c722930ac9c8659792824013168ba6db7c4668225d845c633fbdafbbf902a6389f736
+  checksum: 10c0/db94f1a182bf886f57b4755f85b3a74c39b5114b9377b7ab375dc2cfa3454f09490cc6c30f829df3fc8042bc8b8995f6567ce5cd96f3bc3688bd24027197d9de
   languageName: node
   linkType: hard
 
@@ -5659,6 +5342,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:~4.3.1, debug@npm:~4.3.2":
+  version: 4.3.4
+  resolution: "debug@npm:4.3.4"
+  dependencies:
+    ms: "npm:2.1.2"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10c0/cedbec45298dd5c501d01b92b119cd3faebe5438c3917ff11ae1bff86a6c722930ac9c8659792824013168ba6db7c4668225d845c633fbdafbbf902a6389f736
+  languageName: node
+  linkType: hard
+
 "decamelize@npm:^1.2.0":
   version: 1.2.0
   resolution: "decamelize@npm:1.2.0"
@@ -5951,14 +5646,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv@npm:^16.4.5":
-  version: 16.4.5
-  resolution: "dotenv@npm:16.4.5"
-  checksum: 10c0/48d92870076832af0418b13acd6e5a5a3e83bb00df690d9812e94b24aff62b88ade955ac99a05501305b8dc8f1b0ee7638b18493deb6fe93d680e5220936292f
-  languageName: node
-  linkType: hard
-
-"dotenv@npm:^16.4.7":
+"dotenv@npm:^16.4.5, dotenv@npm:^16.4.7":
   version: 16.4.7
   resolution: "dotenv@npm:16.4.7"
   checksum: 10c0/be9f597e36a8daf834452daa1f4cc30e5375a5968f98f46d89b16b983c567398a330580c88395069a77473943c06b877d1ca25b4afafcdd6d4adb549e8293462
@@ -5986,10 +5674,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.4.668":
-  version: 1.4.787
-  resolution: "electron-to-chromium@npm:1.4.787"
-  checksum: 10c0/fa509ca710186461dd53e31773a7b06af3a958ab9b06b2e3d1d64de35204df2ff6f2050c94186adf4b850583666a50d30a6912103a0e3f5bcfc97864712ff424
+"electron-to-chromium@npm:^1.5.73":
+  version: 1.5.80
+  resolution: "electron-to-chromium@npm:1.5.80"
+  checksum: 10c0/6aaf1891e1b05251efac6f4a63c0ddccf567f0f76506cf0cb284f11413762423fddd7786558066f74c3a95e2a533dad7a97bebe38779b46b7a799d8dd20cea53
   languageName: node
   linkType: hard
 
@@ -6207,10 +5895,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.1, escalade@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "escalade@npm:3.1.2"
-  checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287
+"escalade@npm:^3.1.1, escalade@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "escalade@npm:3.2.0"
+  checksum: 10c0/ced4dd3a78e15897ed3be74e635110bbf3b08877b0a41be50dcb325ee0e0b5f65fc2d50e9845194d7c4633f327e2e1c6cce00a71b617c5673df0374201d67f65
   languageName: node
   linkType: hard
 
@@ -6598,23 +6286,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "execa@npm:5.1.1"
-  dependencies:
-    cross-spawn: "npm:^7.0.3"
-    get-stream: "npm:^6.0.0"
-    human-signals: "npm:^2.1.0"
-    is-stream: "npm:^2.0.0"
-    merge-stream: "npm:^2.0.0"
-    npm-run-path: "npm:^4.0.1"
-    onetime: "npm:^5.1.2"
-    signal-exit: "npm:^3.0.3"
-    strip-final-newline: "npm:^2.0.0"
-  checksum: 10c0/c8e615235e8de4c5addf2fa4c3da3e3aa59ce975a3e83533b4f6a71750fb816a2e79610dc5f1799b6e28976c9ae86747a36a606655bf8cb414a74d8d507b304f
-  languageName: node
-  linkType: hard
-
 "execa@npm:^7.2.0":
   version: 7.2.0
   resolution: "execa@npm:7.2.0"
@@ -6696,7 +6367,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -7044,7 +6715,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-stream@npm:^6.0.0, get-stream@npm:^6.0.1":
+"get-stream@npm:^6.0.1":
   version: 6.0.1
   resolution: "get-stream@npm:6.0.1"
   checksum: 10c0/49825d57d3fd6964228e6200a58169464b8e8970489b3acdc24906c782fb7f01f9f56f8e6653c4a50713771d6658f7cfe051e5eb8c12e334138c9c918b296341
@@ -7210,10 +6881,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^15.2.0":
-  version: 15.3.0
-  resolution: "globals@npm:15.3.0"
-  checksum: 10c0/edbef1c528185d02636ed6d72a1688168b922d6176031904386214f8b59d893f1d0a28da519b95665f557d366b17ea1affb9f433ea451e7372e2808fb31079d7
+"globals@npm:^15.13.0, globals@npm:^15.2.0":
+  version: 15.14.0
+  resolution: "globals@npm:15.14.0"
+  checksum: 10c0/039deb8648bd373b7940c15df9f96ab7508fe92b31bbd39cbd1c1a740bd26db12457aa3e5d211553b234f30e9b1db2fee3683012f543a01a6942c9062857facb
   languageName: node
   linkType: hard
 
@@ -7355,7 +7026,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.0":
+"hasown@npm:^2.0.0, hasown@npm:^2.0.2":
   version: 2.0.2
   resolution: "hasown@npm:2.0.2"
   dependencies:
@@ -7625,13 +7296,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"human-signals@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "human-signals@npm:2.1.0"
-  checksum: 10c0/695edb3edfcfe9c8b52a76926cd31b36978782062c0ed9b1192b36bebc75c4c87c82e178dfcb0ed0fc27ca59d434198aac0bd0be18f5781ded775604db22304a
-  languageName: node
-  linkType: hard
-
 "human-signals@npm:^4.3.0":
   version: 4.3.1
   resolution: "human-signals@npm:4.3.1"
@@ -7861,12 +7525,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.13.0, is-core-module@npm:^2.8.1":
-  version: 2.13.1
-  resolution: "is-core-module@npm:2.13.1"
+"is-core-module@npm:^2.13.0, is-core-module@npm:^2.16.0, is-core-module@npm:^2.8.1":
+  version: 2.16.1
+  resolution: "is-core-module@npm:2.16.1"
   dependencies:
-    hasown: "npm:^2.0.0"
-  checksum: 10c0/2cba9903aaa52718f11c4896dabc189bab980870aae86a62dc0d5cedb546896770ee946fb14c84b7adf0735f5eaea4277243f1b95f5cefa90054f92fbcac2518
+    hasown: "npm:^2.0.2"
+  checksum: 10c0/898443c14780a577e807618aaae2b6f745c8538eca5c7bc11388a3f2dc6de82b9902bcc7eb74f07be672b11bbe82dd6a6edded44a00cb3d8f933d0459905eedd
   languageName: node
   linkType: hard
 
@@ -8039,7 +7703,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-stream@npm:^2.0.0, is-stream@npm:^2.0.1":
+"is-stream@npm:^2.0.1":
   version: 2.0.1
   resolution: "is-stream@npm:2.0.1"
   checksum: 10c0/7c284241313fc6efc329b8d7f08e16c0efeb6baab1b4cd0ba579eb78e5af1aa5da11e68559896a2067cd6c526bd29241dda4eb1225e627d5aa1a89a76d4635a5
@@ -8123,12 +7787,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.21.0":
-  version: 1.21.0
-  resolution: "jiti@npm:1.21.0"
+"jiti@npm:^1.21.0, jiti@npm:^1.21.6":
+  version: 1.21.7
+  resolution: "jiti@npm:1.21.7"
   bin:
     jiti: bin/jiti.js
-  checksum: 10c0/7f361219fe6c7a5e440d5f1dba4ab763a5538d2df8708cdc22561cf25ea3e44b837687931fca7cdd8cdd9f567300e90be989dd1321650045012d8f9ed6aab07f
+  checksum: 10c0/77b61989c758ff32407cdae8ddc77f85e18e1a13fc4977110dbd2e05fc761842f5f71bce684d9a01316e1c4263971315a111385759951080bbfe17cbb5de8f7a
   languageName: node
   linkType: hard
 
@@ -8443,17 +8107,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "lilconfig@npm:2.1.0"
-  checksum: 10c0/64645641aa8d274c99338e130554abd6a0190533c0d9eb2ce7ebfaf2e05c7d9961f3ffe2bfa39efd3b60c521ba3dd24fa236fe2775fc38501bf82bf49d4678b8
-  languageName: node
-  linkType: hard
-
-"lilconfig@npm:^3.0.0, lilconfig@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "lilconfig@npm:3.1.1"
-  checksum: 10c0/311b559794546894e3fe176663427326026c1c644145be9e8041c58e268aa9328799b8dfe7e4dd8c6a4ae305feae95a1c9e007db3569f35b42b6e1bc8274754c
+"lilconfig@npm:^3.0.0, lilconfig@npm:^3.1.1, lilconfig@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "lilconfig@npm:3.1.3"
+  checksum: 10c0/f5604e7240c5c275743561442fbc5abf2a84ad94da0f5adc71d25e31fa8483048de3dcedcb7a44112a942fed305fd75841cdf6c9681c7f640c63f1049e9a5dcc
   languageName: node
   linkType: hard
 
@@ -8507,13 +8164,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"local-pkg@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "local-pkg@npm:0.5.0"
+"local-pkg@npm:^0.5.0, local-pkg@npm:^0.5.1":
+  version: 0.5.1
+  resolution: "local-pkg@npm:0.5.1"
   dependencies:
-    mlly: "npm:^1.4.2"
-    pkg-types: "npm:^1.0.3"
-  checksum: 10c0/f61cbd00d7689f275558b1a45c7ff2a3ddf8472654123ed880215677b9adfa729f1081e50c27ffb415cdb9fa706fb755fec5e23cdd965be375c8059e87ff1cc9
+    mlly: "npm:^1.7.3"
+    pkg-types: "npm:^1.2.1"
+  checksum: 10c0/ade8346f1dc04875921461adee3c40774b00d4b74095261222ebd4d5fd0a444676e36e325f76760f21af6a60bc82480e154909b54d2d9f7173671e36dacf1808
   languageName: node
   linkType: hard
 
@@ -8639,16 +8296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.0, magic-string@npm:^0.30.10, magic-string@npm:^0.30.3, magic-string@npm:^0.30.4, magic-string@npm:^0.30.8, magic-string@npm:^0.30.9":
-  version: 0.30.10
-  resolution: "magic-string@npm:0.30.10"
-  dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-  checksum: 10c0/aa9ca17eae571a19bce92c8221193b6f93ee8511abb10f085e55ffd398db8e4c089a208d9eac559deee96a08b7b24d636ea4ab92f09c6cf42a7d1af51f7fd62b
-  languageName: node
-  linkType: hard
-
-"magic-string@npm:^0.30.11":
+"magic-string@npm:^0.30.0, magic-string@npm:^0.30.10, magic-string@npm:^0.30.11, magic-string@npm:^0.30.3, magic-string@npm:^0.30.4, magic-string@npm:^0.30.8, magic-string@npm:^0.30.9":
   version: 0.30.11
   resolution: "magic-string@npm:0.30.11"
   dependencies:
@@ -9257,13 +8905,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
-  version: 4.0.7
-  resolution: "micromatch@npm:4.0.7"
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "micromatch@npm:4.0.8"
   dependencies:
     braces: "npm:^3.0.3"
     picomatch: "npm:^2.3.1"
-  checksum: 10c0/58fa99bc5265edec206e9163a1d2cec5fabc46a5b473c45f4a700adce88c2520456ae35f2b301e4410fb3afb27e9521fb2813f6fc96be0a48a89430e0916a772
+  checksum: 10c0/166fa6eb926b9553f32ef81f5f531d27b4ce7da60e5baf8c021d043b27a388fb95e46a8038d5045877881e673f8134122b59624d5cecbd16eb50a42e7a6b5ca8
   languageName: node
   linkType: hard
 
@@ -9310,13 +8958,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mimic-fn@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "mimic-fn@npm:2.1.0"
-  checksum: 10c0/b26f5479d7ec6cc2bce275a08f146cf78f5e7b661b18114e2506dd91ec7ec47e7a25bf4360e5438094db0560bcc868079fb3b1fb3892b833c1ecbf63f80c95a4
-  languageName: node
-  linkType: hard
-
 "mimic-fn@npm:^4.0.0":
   version: 4.0.0
   resolution: "mimic-fn@npm:4.0.0"
@@ -9509,15 +9150,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mlly@npm:^1.3.0, mlly@npm:^1.4.2, mlly@npm:^1.6.1, mlly@npm:^1.7.0":
-  version: 1.7.0
-  resolution: "mlly@npm:1.7.0"
+"mlly@npm:^1.3.0, mlly@npm:^1.4.2, mlly@npm:^1.6.1, mlly@npm:^1.7.0, mlly@npm:^1.7.3, mlly@npm:^1.7.4":
+  version: 1.7.4
+  resolution: "mlly@npm:1.7.4"
   dependencies:
-    acorn: "npm:^8.11.3"
-    pathe: "npm:^1.1.2"
-    pkg-types: "npm:^1.1.0"
-    ufo: "npm:^1.5.3"
-  checksum: 10c0/0b90e5b86e35897fd830624635b30052d0dfeb01b62a021fff4c0a5f46fbc617db685acfbc8c1c7cdcf687d9ffb8d54f3c1b0087ab953232cb3c158a2fb2d770
+    acorn: "npm:^8.14.0"
+    pathe: "npm:^2.0.1"
+    pkg-types: "npm:^1.3.0"
+    ufo: "npm:^1.5.4"
+  checksum: 10c0/69e738218a13d6365caf930e0ab4e2b848b84eec261597df9788cefb9930f3e40667be9cb58a4718834ba5f97a6efeef31d3b5a95f4388143fd4e0d0deff72ff
   languageName: node
   linkType: hard
 
@@ -9556,7 +9197,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.3, ms@npm:^2.1.1":
+"ms@npm:2.1.3, ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: 10c0/d924b57e7312b3b63ad21fc5b3dc0af5e78d61a1fc7cfb5457edaf26326bf62be5307cc87ffb6862ef1c2b33b0233cdb5d4f01c4c958cc0d660948b65a287a48
@@ -9805,10 +9446,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-releases@npm:^2.0.14":
-  version: 2.0.14
-  resolution: "node-releases@npm:2.0.14"
-  checksum: 10c0/199fc93773ae70ec9969bc6d5ac5b2bbd6eb986ed1907d751f411fef3ede0e4bfdb45ceb43711f8078bea237b6036db8b1bf208f6ff2b70c7d615afd157f3ab9
+"node-releases@npm:^2.0.19":
+  version: 2.0.19
+  resolution: "node-releases@npm:2.0.19"
+  checksum: 10c0/52a0dbd25ccf545892670d1551690fe0facb6a471e15f2cfa1b20142a5b255b3aa254af5f59d6ecb69c2bec7390bc643c43aa63b13bf5e64b6075952e716b1aa
   languageName: node
   linkType: hard
 
@@ -10013,9 +9654,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "nuxt-app@workspace:."
   dependencies:
+    "@egoist/tailwindcss-icons": "npm:^1.0.0"
     "@encointer/util": "npm:^0.18.0"
     "@encointer/worker-api": "npm:^0.18.0"
     "@esbuild-plugins/node-globals-polyfill": "npm:^0.2.3"
+    "@headlessui/tailwindcss": "npm:^0.2.1"
     "@headlessui/vue": "npm:^1.7.22"
     "@heroicons/vue": "npm:^2.1.3"
     "@material-tailwind/html": "npm:^2.2.2"
@@ -10033,6 +9676,11 @@ __metadata:
     "@polkadot/util-crypto": "npm:^12.6.2"
     "@polkadot/wasm-util": "npm:^7.3.2"
     "@polkadot/x-randomvalues": "npm:^12.6.2"
+    "@tailwindcss/aspect-ratio": "npm:^0.4.2"
+    "@tailwindcss/container-queries": "npm:^0.1.1"
+    "@tailwindcss/forms": "npm:^0.5.10"
+    "@tailwindcss/line-clamp": "npm:^0.4.4"
+    "@tailwindcss/typography": "npm:^0.5.16"
     "@types/lodash": "npm:^4.14.195"
     "@types/node": "npm:^20.12.7"
     "@types/nodemailer": "npm:^6.4.8"
@@ -10040,9 +9688,9 @@ __metadata:
     "@vuelidate/core": "npm:^2.0.3"
     "@vuelidate/validators": "npm:^2.0.4"
     "@vueuse/core": "npm:^10.9.0"
-    autoprefixer: "npm:^10.4.17"
+    autoprefixer: "npm:^10.4.20"
     clsx: "npm:^2.1.1"
-    daisyui: "npm:^4.12.14"
+    daisyui: "npm:^4.12.23"
     date-fns: "npm:^3.6.0"
     dotenv: "npm:^16.4.7"
     esbuild: "npm:^0.20.2"
@@ -10057,12 +9705,12 @@ __metadata:
     nuxt: "npm:^3.11.2"
     nuxt-svgo: "npm:^4.0.0"
     pinia: "npm:^2.1.7"
-    postcss: "npm:^8.4.38"
+    postcss: "npm:^8.4.49"
     prettier: "npm:^3.2.5"
     qrcode: "npm:^1.5.3"
     sass: "npm:^1.75.0"
     tailwind-merge: "npm:^2.5.2"
-    tailwindcss: "npm:^3.4.3"
+    tailwindcss: "npm:^3.4.17"
     typescript: "npm:^5.4.5"
     vite: "npm:^5.2.10"
     vite-svg-loader: "npm:^5.1.0"
@@ -10280,15 +9928,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"onetime@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "onetime@npm:5.1.2"
-  dependencies:
-    mimic-fn: "npm:^2.1.0"
-  checksum: 10c0/ffcef6fbb2692c3c40749f31ea2e22677a876daea92959b8a80b521d95cca7a668c884d8b2045d1d8ee7d56796aa405c405462af112a1477594cc63531baeb8f
-  languageName: node
-  linkType: hard
-
 "onetime@npm:^6.0.0":
   version: 6.0.0
   resolution: "onetime@npm:6.0.0"
@@ -10438,6 +10077,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"package-manager-detector@npm:^0.2.0":
+  version: 0.2.8
+  resolution: "package-manager-detector@npm:0.2.8"
+  checksum: 10c0/2d24dd6e50a196a0b1e3ce7bf6db8aff403bdbe333cf81383bec54fa441dac958ec87a7e6865cf86e614704f349c7effaf8d0c2474a6a50a164e6218689f02db
+  languageName: node
+  linkType: hard
+
 "pacote@npm:^18.0.6":
   version: 18.0.6
   resolution: "pacote@npm:18.0.6"
@@ -10633,6 +10279,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^2.0.1":
+  version: 2.0.2
+  resolution: "pathe@npm:2.0.2"
+  checksum: 10c0/21fce96ca9cebf037b075de8e5cc4ac6aa1009bce57946a72695f47ded84cf4b29f03bed721ea0f6e39b69eb1a0620bcee1f72eca46086765214a2965399b83a
+  languageName: node
+  linkType: hard
+
 "perfect-debounce@npm:^1.0.0":
   version: 1.0.0
   resolution: "perfect-debounce@npm:1.0.0"
@@ -10640,20 +10293,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1":
+"picocolors@npm:^1, picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
   checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "picocolors@npm:1.0.1"
-  checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
-  languageName: node
-  linkType: hard
-
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -10701,14 +10347,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pkg-types@npm:^1.0.3, pkg-types@npm:^1.1.0, pkg-types@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "pkg-types@npm:1.1.1"
+"pkg-types@npm:^1.0.3, pkg-types@npm:^1.1.0, pkg-types@npm:^1.1.1, pkg-types@npm:^1.2.1, pkg-types@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "pkg-types@npm:1.3.1"
   dependencies:
-    confbox: "npm:^0.1.7"
-    mlly: "npm:^1.7.0"
-    pathe: "npm:^1.1.2"
-  checksum: 10c0/c7d167935de7207479e5829086040d70bea289f31fc1331f17c83e996a4440115c9deba2aa96de839ea66e1676d083c9ca44b33886f87bffa6b49740b67b6fcb
+    confbox: "npm:^0.1.8"
+    mlly: "npm:^1.7.4"
+    pathe: "npm:^2.0.1"
+  checksum: 10c0/19e6cb8b66dcc66c89f2344aecfa47f2431c988cfa3366bdfdcfb1dd6695f87dcce37fbd90fe9d1605e2f4440b77f391e83c23255347c35cf84e7fd774d7fcea
   languageName: node
   linkType: hard
 
@@ -10842,7 +10488,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-load-config@npm:^4.0.1":
+"postcss-load-config@npm:^4.0.2":
   version: 4.0.2
   resolution: "postcss-load-config@npm:4.0.2"
   dependencies:
@@ -10934,14 +10580,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-nested@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "postcss-nested@npm:6.0.1"
+"postcss-nested@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "postcss-nested@npm:6.2.0"
   dependencies:
-    postcss-selector-parser: "npm:^6.0.11"
+    postcss-selector-parser: "npm:^6.1.1"
   peerDependencies:
     postcss: ^8.2.14
-  checksum: 10c0/2a50aa36d5d103c2e471954830489f4c024deed94fa066169101db55171368d5f80b32446b584029e0471feee409293d0b6b1d8ede361f6675ba097e477b3cbd
+  checksum: 10c0/7f9c3f2d764191a39364cbdcec350f26a312431a569c9ef17408021424726b0d67995ff5288405e3724bb7152a4c92f73c027e580ec91e798800ed3c52e2bc6e
   languageName: node
   linkType: hard
 
@@ -11101,13 +10747,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.15, postcss-selector-parser@npm:^6.0.16, postcss-selector-parser@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "postcss-selector-parser@npm:6.1.0"
+"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.15, postcss-selector-parser@npm:^6.0.16, postcss-selector-parser@npm:^6.1.0, postcss-selector-parser@npm:^6.1.1, postcss-selector-parser@npm:^6.1.2":
+  version: 6.1.2
+  resolution: "postcss-selector-parser@npm:6.1.2"
   dependencies:
     cssesc: "npm:^3.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/91e9c6434772506bc7f318699dd9d19d32178b52dfa05bed24cb0babbdab54f8fb765d9920f01ac548be0a642aab56bce493811406ceb00ae182bbb53754c473
+  checksum: 10c0/523196a6bd8cf660bdf537ad95abd79e546d54180f9afb165a4ab3e651ac705d0f8b8ce6b3164fb9e3279ce482c5f751a69eb2d3a1e8eb0fd5e82294fb3ef13e
   languageName: node
   linkType: hard
 
@@ -11141,25 +10787,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.23, postcss@npm:^8.4.38":
-  version: 8.4.38
-  resolution: "postcss@npm:8.4.38"
-  dependencies:
-    nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.0"
-    source-map-js: "npm:^1.2.0"
-  checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.4.44":
-  version: 8.4.45
-  resolution: "postcss@npm:8.4.45"
+"postcss@npm:^8.4.38, postcss@npm:^8.4.44, postcss@npm:^8.4.47, postcss@npm:^8.4.49":
+  version: 8.4.49
+  resolution: "postcss@npm:8.4.49"
   dependencies:
     nanoid: "npm:^3.3.7"
-    picocolors: "npm:^1.0.1"
-    source-map-js: "npm:^1.2.0"
-  checksum: 10c0/ad6f8b9b1157d678560373696109745ab97a947d449f8a997acac41c7f1e4c0f3ca4b092d6df1387f430f2c9a319987b1780dbdc27e35800a88cde9b606c1e8f
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/f1b3f17aaf36d136f59ec373459f18129908235e65dbdc3aee5eef8eba0756106f52de5ec4682e29a2eab53eb25170e7e871b3e4b52a8f1de3d344a514306be3
   languageName: node
   linkType: hard
 
@@ -11719,29 +11354,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.22.1, resolve@npm:^1.22.2, resolve@npm:^1.22.4":
-  version: 1.22.8
-  resolution: "resolve@npm:1.22.8"
+"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
+  version: 1.22.10
+  resolution: "resolve@npm:1.22.10"
   dependencies:
-    is-core-module: "npm:^2.13.0"
+    is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/07e179f4375e1fd072cfb72ad66d78547f86e6196c4014b31cb0b8bb1db5f7ca871f922d08da0fbc05b94e9fd42206f819648fa3b5b873ebbc8e1dc68fec433a
+  checksum: 10c0/8967e1f4e2cc40f79b7e080b4582b9a8c5ee36ffb46041dccb20e6461161adf69f843b43067b4a375de926a2cd669157e29a29578191def399dd5ef89a1b5203
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
-  version: 1.22.8
-  resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
+"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+  version: 1.22.10
+  resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
-    is-core-module: "npm:^2.13.0"
+    is-core-module: "npm:^2.16.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 10c0/0446f024439cd2e50c6c8fa8ba77eaa8370b4180f401a96abf3d1ebc770ac51c1955e12764cde449fde3fff480a61f84388e3505ecdbab778f4bef5f8212c729
+  checksum: 10c0/52a4e505bbfc7925ac8f4cd91fd8c4e096b6a89728b9f46861d3b405ac9a1ccf4dcbf8befb4e89a2e11370dacd0160918163885cbc669369590f2f31f4c58939
   languageName: node
   linkType: hard
 
@@ -12104,7 +11739,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
+"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
   checksum: 10c0/25d272fa73e146048565e08f3309d5b942c1979a6f4a58a8c59d5fa299728e9c2fcd1a759ec870863b1fd38653670240cd420dad2ad9330c71f36608a6a1c912
@@ -12264,10 +11899,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "source-map-js@npm:1.2.0"
-  checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
   languageName: node
   linkType: hard
 
@@ -12487,13 +12122,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-final-newline@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "strip-final-newline@npm:2.0.0"
-  checksum: 10c0/bddf8ccd47acd85c0e09ad7375409d81653f645fda13227a9d459642277c253d877b68f2e5e4d819fe75733b0e626bac7e954c04f3236f6d196f79c94fa4a96f
-  languageName: node
-  linkType: hard
-
 "strip-final-newline@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-final-newline@npm:3.0.0"
@@ -12538,7 +12166,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sucrase@npm:^3.32.0":
+"sucrase@npm:^3.35.0":
   version: 3.35.0
   resolution: "sucrase@npm:3.35.0"
   dependencies:
@@ -12657,52 +12285,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-merge@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "tailwind-merge@npm:2.3.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.24.1"
-  checksum: 10c0/5ea308e23c3ab1cf4c3f35f0a471753f4d3ed232d63dd7c09151a74428737321902203d90e9f0cb76ea5c3978e71b0adbc503dc455e56cda967a7674ae4b94b5
-  languageName: node
-  linkType: hard
-
-"tailwind-merge@npm:^2.5.2":
+"tailwind-merge@npm:^2.3.0, tailwind-merge@npm:^2.5.2":
   version: 2.5.2
   resolution: "tailwind-merge@npm:2.5.2"
   checksum: 10c0/e43a9a468f7ba4ed5b4a399558d96d6270a3d8131dca111cccc803e71cc23885060d18d721f312a24fff0a75c567dbb30b2a87c18aba25eb4255df197d8170ab
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.4.3, tailwindcss@npm:~3.4.3":
-  version: 3.4.3
-  resolution: "tailwindcss@npm:3.4.3"
+"tailwindcss@npm:^3.4.17, tailwindcss@npm:^3.4.3, tailwindcss@npm:~3.4.3":
+  version: 3.4.17
+  resolution: "tailwindcss@npm:3.4.17"
   dependencies:
     "@alloc/quick-lru": "npm:^5.2.0"
     arg: "npm:^5.0.2"
-    chokidar: "npm:^3.5.3"
+    chokidar: "npm:^3.6.0"
     didyoumean: "npm:^1.2.2"
     dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.0"
+    fast-glob: "npm:^3.3.2"
     glob-parent: "npm:^6.0.2"
     is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.21.0"
-    lilconfig: "npm:^2.1.0"
-    micromatch: "npm:^4.0.5"
+    jiti: "npm:^1.21.6"
+    lilconfig: "npm:^3.1.3"
+    micromatch: "npm:^4.0.8"
     normalize-path: "npm:^3.0.0"
     object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.23"
+    picocolors: "npm:^1.1.1"
+    postcss: "npm:^8.4.47"
     postcss-import: "npm:^15.1.0"
     postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.1"
-    postcss-nested: "npm:^6.0.1"
-    postcss-selector-parser: "npm:^6.0.11"
-    resolve: "npm:^1.22.2"
-    sucrase: "npm:^3.32.0"
+    postcss-load-config: "npm:^4.0.2"
+    postcss-nested: "npm:^6.2.0"
+    postcss-selector-parser: "npm:^6.1.2"
+    resolve: "npm:^1.22.8"
+    sucrase: "npm:^3.35.0"
   bin:
     tailwind: lib/cli.js
     tailwindcss: lib/cli.js
-  checksum: 10c0/11e5546494f2888f693ebaa271b218b3a8e52fe59d7b629e54f2dffd6eaafd5ded2e9f0c37ad04e6a866dffb2b116d91becebad77e1441beee8bf016bb2392f9
+  checksum: 10c0/cc42c6e7fdf88a5507a0d7fea37f1b4122bec158977f8c017b2ae6828741f9e6f8cb90282c6bf2bd5951fd1220a53e0a50ca58f5c1c00eb7f5d9f8b80dc4523c
   languageName: node
   linkType: hard
 
@@ -12793,6 +12412,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyexec@npm:^0.3.0":
+  version: 0.3.2
+  resolution: "tinyexec@npm:0.3.2"
+  checksum: 10c0/3efbf791a911be0bf0821eab37a3445c2ba07acc1522b1fa84ae1e55f10425076f1290f680286345ed919549ad67527d07281f1c19d584df3b74326909eb1f90
+  languageName: node
+  linkType: hard
+
 "to-fast-properties@npm:^2.0.0":
   version: 2.0.0
   resolution: "to-fast-properties@npm:2.0.0"
@@ -12959,10 +12585,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ufo@npm:^1.1.2, ufo@npm:^1.4.0, ufo@npm:^1.5.3":
-  version: 1.5.3
-  resolution: "ufo@npm:1.5.3"
-  checksum: 10c0/1df10702582aa74f4deac4486ecdfd660e74be057355f1afb6adfa14243476cf3d3acff734ccc3d0b74e9bfdefe91d578f3edbbb0a5b2430fe93cd672370e024
+"ufo@npm:^1.1.2, ufo@npm:^1.4.0, ufo@npm:^1.5.3, ufo@npm:^1.5.4":
+  version: 1.5.4
+  resolution: "ufo@npm:1.5.4"
+  checksum: 10c0/b5dc4dc435c49c9ef8890f1b280a19ee4d0954d1d6f9ab66ce62ce64dd04c7be476781531f952a07c678d51638d02ad4b98e16237be29149295b0f7c09cda765
   languageName: node
   linkType: hard
 
@@ -13306,17 +12932,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.0.13":
-  version: 1.0.16
-  resolution: "update-browserslist-db@npm:1.0.16"
+"update-browserslist-db@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "update-browserslist-db@npm:1.1.2"
   dependencies:
-    escalade: "npm:^3.1.2"
-    picocolors: "npm:^1.0.1"
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.1"
   peerDependencies:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 10c0/5995399fc202adbb51567e4810e146cdf7af630a92cc969365a099150cb00597e425cc14987ca7080b09a4d0cfd2a3de53fbe72eebff171aed7f9bb81f9bf405
+  checksum: 10c0/9cb353998d6d7d6ba1e46b8fa3db888822dd972212da4eda609d185eb5c3557a93fd59780ceb757afd4d84240518df08542736969e6a5d6d6ce2d58e9363aac6
   languageName: node
   linkType: hard
 
@@ -13792,7 +13418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:>=2.0.0":
+"vue@npm:>=2.0.0, vue@npm:^3.4.21, vue@npm:^3.4.26":
   version: 3.5.1
   resolution: "vue@npm:3.5.1"
   dependencies:
@@ -13810,24 +13436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^3.4.21, vue@npm:^3.4.26":
-  version: 3.4.27
-  resolution: "vue@npm:3.4.27"
-  dependencies:
-    "@vue/compiler-dom": "npm:3.4.27"
-    "@vue/compiler-sfc": "npm:3.4.27"
-    "@vue/runtime-dom": "npm:3.4.27"
-    "@vue/server-renderer": "npm:3.4.27"
-    "@vue/shared": "npm:3.4.27"
-  peerDependencies:
-    typescript: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/73349e05cf554891d5e0076be10083150c92831c1cffdeee1e25c2222a8a4d8291630825a897049add753c4925e1c916c3614fe8d9c0392d9ff0186e553fe24b
-  languageName: node
-  linkType: hard
-
 "vuetify@npm:^3.7.0":
   version: 3.7.0
   resolution: "vuetify@npm:3.7.0"

From df81aea2bb5893aa5835553ab04e7516ad47441c Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Tue, 21 Jan 2025 20:31:07 +0100
Subject: [PATCH 02/11] automate bucket history fetching if possible

---
 components/tabs/MessagingTab.vue   |  5 +--
 components/tabs/WalletTab.vue      | 10 +++++
 components/ui/PrivateTxHistory.vue | 59 ++++++++++++++++++++++++++----
 pages/index.vue                    | 22 ++++++++++-
 4 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index f94d369..fe964d8 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -234,12 +234,11 @@
                   clip-rule="evenodd"
                 />
               </svg>
-              load older messages
               {{
                 accountStore.hasInjector &&
                 !accountStore.hasSessionProxyForRole(SessionProxyRole.ReadAny)
-                  ? "(needs signature in extension)"
-                  : ""
+                  ? "load older messages (needs signature in extension. Add session key to automate!)"
+                  : "loading older messages"
               }}
               ({{ bucketsCount - unfetchedBucketsCount }} /
               {{ bucketsCount }} buckets)
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index 6342817..38afc69 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -241,6 +241,9 @@
       <PrivateTxHistory
         :show="currentTab === 'private'"
         :fetchOlderBucket="props.fetchOlderBucket"
+        :eventHorizon="props.eventHorizon"
+        :bucketsCount="props.bucketsCount"
+        :unfetchedBucketsCount="props.unfetchedBucketsCount"
       />
     </div>
 
@@ -1071,6 +1074,7 @@ import SessionProxiesOverlay from "~/components/overlays/SessionProxiesOverlay.v
 import HealthIndicator from "~/components/ui/HealthIndicator.vue";
 import IncogniteeLogo from "~/components/Logo/incognitee-logo.vue";
 import TokenIndicator from "~/components/ui/TokenIndicator.vue";
+import MessagingTab from "~/components/tabs/MessagingTab.vue";
 
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
@@ -1615,6 +1619,12 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  eventHorizon: {
+    type: Number,
+    required: true,
+  },
+  bucketsCount: { type: Number, required: true },
+  unfetchedBucketsCount: { type: Number, required: true },
   enableActions: {
     type: Boolean,
     required: true,
diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index df0fafb..20d52f1 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -117,10 +117,43 @@
         </div>
       </div>
       <div class="mt-5 flex text-xs font-bold justify-center text-white">
-        <button @click="fetchOlderBucket">
-          Fetch more events
-          {{ accountStore.hasInjector ? "(needs signature)" : "" }}
-        </button>
+        <div
+          v-if="eventHorizon && unfetchedBucketsCount === 0"
+          class="my-5 mx-5 flex text-center text-blue justify-center text-xs text-gray-500"
+        >
+          events before {{ formatMoment(eventHorizon) }} have been purged from
+          Incognitee state.
+        </div>
+        <div
+          v-if="unfetchedBucketsCount > 0"
+          class="my-5 mx-5 flex text-center justify-center text-xs text-gray-500"
+        >
+          <div
+            @click="fetchOlderBucket"
+            class="flex items-center cursor-pointer text-blue"
+          >
+            <svg
+              viewBox="0 0 16 16"
+              fill="currentColor"
+              class="w-3 h-3 text-blue-600 mr-2"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            {{
+              accountStore.hasInjector &&
+              !accountStore.hasSessionProxyForRole(SessionProxyRole.ReadAny)
+                ? "load older events (needs signature in extension. Add session key to automate!)"
+                : "loading older events"
+            }}
+            ({{ bucketsCount - unfetchedBucketsCount }} /
+            {{ bucketsCount }} buckets)
+          </div>
+          <div v-if="isUpdatingNotes" class="spinner ml-4"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -132,16 +165,16 @@
 </template>
 
 <script setup lang="ts">
-import { formatDate } from "@/helpers/date";
-import { ref, defineProps, computed, defineExpose } from "vue";
+import { formatDate, formatMoment } from "@/helpers/date";
+import { computed, defineProps, ref } from "vue";
 import { useAccount } from "@/store/account.ts";
 import { useNotes } from "@/store/notes.ts";
-import { decodeAddress, encodeAddress } from "@polkadot/util-crypto";
+import { encodeAddress } from "@polkadot/util-crypto";
 import { Note, NoteDirection } from "@/lib/notes";
 import { divideBigIntToFloat } from "@/helpers/numbers";
 import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
-import { identities as polkadotPeopleIdentities } from "@/lib/polkadotPeopleIdentities";
 import { identities as wellKnownIdentities } from "@/lib/wellKnownIdentites";
+import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 
 //const identityLut = [...polkadotPeopleIdentities, ...wellKnownIdentities];
 const identityLut = wellKnownIdentities;
@@ -172,6 +205,12 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  eventHorizon: {
+    type: Number,
+    required: true,
+  },
+  bucketsCount: { type: Number, required: true },
+  unfetchedBucketsCount: { type: Number, required: true },
 });
 
 const showNote = ref<Note>(null);
@@ -223,6 +262,10 @@ const closeViewMore = () => {
   max-width: 10ch;
 }
 
+.text-blue {
+  color: #2563eb;
+}
+
 textarea {
   width: 100%;
   box-sizing: border-box;
diff --git a/pages/index.vue b/pages/index.vue
index 62dd919..08e2e00 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,6 +12,9 @@
       ref="walletTabRef"
       :updateNotes="updateNotes"
       :fetchOlderBucket="fetchOlderBucket"
+      :eventHorizon="oldestMomentInNoteBuckets"
+      :bucketsCount="bucketsCount"
+      :unfetchedBucketsCount="unfetchedBucketsCount"
       :enableActions="enableActions"
     />
   </div>
@@ -398,7 +401,7 @@ const bucketsCount = computed(() => {
 
 const unfetchedBucketsCount = computed(() => {
   if (!noteBucketsInfo.value) return 0;
-  return firstNoteBucketIndexFetched.value
+  return firstNoteBucketIndexFetched.value >= 0
     ? firstNoteBucketIndexFetched.value -
         noteBucketsInfo.value.first.unwrap().index
     : noteBucketsInfo.value.last.unwrap().index -
@@ -407,7 +410,7 @@ const unfetchedBucketsCount = computed(() => {
 });
 
 const fetchIncogniteeNotes = async (
-  bucketIndex: number,
+  maybeBucketIndex: number | null,
   skip_if_signer_needed: boolean,
 ) => {
   if (!incogniteeStore.apiReady) return;
@@ -419,6 +422,7 @@ const fetchIncogniteeNotes = async (
     );
     return;
   }
+  const bucketIndex = maybeBucketIndex ? maybeBucketIndex : 0;
   const mapKey = `notesFor:${accountStore.account}:${bucketIndex}`;
   const sessionProxy = accountStore.sessionProxyForRole(
     SessionProxyRole.ReadAny,
@@ -673,6 +677,20 @@ const pollCounter = useInterval(2000);
 watch(pollCounter, async () => {
   await fetchIncogniteeBalance();
   await fetchNetworkStatus();
+  // autofetch history slowly
+  try {
+    if (
+      accountStore.hasSessionProxyForRole(SessionProxyRole.ReadAny) ||
+      !accountStore.hasInjector
+    ) {
+      console.debug("unfetchedBucketsCount is " + unfetchedBucketsCount.value);
+      if (unfetchedBucketsCount.value > 0) {
+        await fetchOlderBucket();
+      }
+    }
+  } catch (error) {
+    console.warn("error auto-fetching older incognitee note buckets: " + error);
+  }
 });
 
 watch(

From ec2f4954e93a1efecaa709c8248ea05b2ee85739 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Tue, 21 Jan 2025 20:35:06 +0100
Subject: [PATCH 03/11] restore session proxy warning if balance low

---
 components/overlays/SessionProxiesOverlay.vue | 69 ++++++++++++-------
 1 file changed, 46 insertions(+), 23 deletions(-)

diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index 79206e2..bf205ff 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -107,30 +107,53 @@
             </label>
           </div>
           <!--
-          <p class="text-sm text-gray-400">
-            If this is your personal machine, we recommend to persist a session
-            key in browser storage. This will avoid the initial authentication
-            signature in the extension when you visit this site.
-          </p>
-          <div class="mt-2">
-            <input
-              type="checkbox"
-              id="persistSession"
-              v-model="persistSessionProxy"
-            />
-            <label for="persistSession"
-            >Persist session key in browser storage</label
-            >
-          </div>-->
-          <p class="text-sm text-gray-400 my-4">
-            The signer extension will pop up and ask you to sign this request.
-          </p>
-          <button
-            type="submit"
-            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue rounded-md text-sm font-semibold text-white py-2 w-full hover:shadow-lg hover:shadow-incognitee-green/50"
+                    <p class="text-sm text-gray-400">
+                      If this is your personal machine, we recommend to persist a session
+                      key in browser storage. This will avoid the initial authentication
+                      signature in the extension when you visit this site.
+                    </p>
+                    <div class="mt-2">
+                      <input
+                        type="checkbox"
+                        id="persistSession"
+                        v-model="persistSessionProxy"
+                      />
+                      <label for="persistSession"
+                      >Persist session key in browser storage</label
+                      >
+                    </div>-->
+
+          <div
+            v-if="
+              accountStore.getDecimalBalanceFree(incogniteeSidechain) <
+                INCOGNITEE_SESSION_PROXY_DEPOSIT + INCOGNITEE_TX_FEE &&
+              bestSessionProxyRole == null
+            "
+            class="mt-5"
           >
-            Update Authorization
-          </button>
+            <p class="text-sm text-yellow-400">
+              You need at least
+              {{
+                formatDecimalBalance(
+                  INCOGNITEE_SESSION_PROXY_DEPOSIT + INCOGNITEE_TX_FEE,
+                )
+              }}
+              {{ accountStore.getSymbol }} private balance to register a session
+              proxy. You have
+              {{ accountStore.formatBalanceFree(incogniteeSidechain) }}.
+            </p>
+          </div>
+          <div v-else>
+            <p class="text-sm text-gray-400 mb-5">
+              the signer extension will pop up and ask you to sign this request
+            </p>
+            <button
+              type="submit"
+              class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+            >
+              Update Authorization
+            </button>
+          </div>
         </form>
       </div>
 

From ca641b3e856b28f116e87dd64d6f04e16f0a13c2 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Tue, 21 Jan 2025 21:10:26 +0100
Subject: [PATCH 04/11] autoscroll to last message

---
 components/ui/PrivateMessageHistory.vue | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/components/ui/PrivateMessageHistory.vue b/components/ui/PrivateMessageHistory.vue
index 0f2c341..34248eb 100644
--- a/components/ui/PrivateMessageHistory.vue
+++ b/components/ui/PrivateMessageHistory.vue
@@ -2,13 +2,15 @@
   <div v-if="show" class="flex justify-between items-center"></div>
   <div class="mb-10">
     <!-- Neuer Abschnitt, der nur angezeigt wird, wenn der "Private Balance" Tab aktiv ist -->
-    <div
-      ref="chatWindow"
-      class="flex-1 overflow-y-auto bg-incognitee-blue rounded-md"
-    >
+    <div class="flex-1 overflow-y-auto bg-incognitee-blue rounded-md">
       <div
         v-for="(note, index) in noteStore.getMessagesWith(counterparty)"
         :key="index"
+        :id="
+          index === noteStore.getMessagesWith(counterparty).length - 1
+            ? 'lastMessage'
+            : null
+        "
         class="py-2 px-4"
       >
         <!-- Ausgehende Nachrichten -->
@@ -75,17 +77,16 @@ const props = defineProps({
     required: true,
   },
 });
-const chatWindow = ref(null);
 
 watch(
-  () => noteStore.getMessagesWith(props.counterparty),
+  () => props.counterparty,
   async () => {
     await nextTick();
-    if (chatWindow.value) {
-      console.log("scrolling to bottom");
-      chatWindow.value.scrollTop = chatWindow.value.scrollHeight;
-    }
+    document
+      .getElementById("lastMessage")
+      ?.scrollIntoView({ behavior: "smooth" });
   },
+  { immediate: true },
 );
 
 const showNote = ref<Note>(null);

From 50d38cd17aefea6f42cad814825c290019a834f5 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Wed, 22 Jan 2025 08:40:24 +0100
Subject: [PATCH 05/11] fix role check for autofetching history

---
 components/tabs/MessagingTab.vue   | 3 ++-
 components/ui/PrivateTxHistory.vue | 3 ++-
 pages/index.vue                    | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index fe964d8..d2d6162 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -236,7 +236,8 @@
               </svg>
               {{
                 accountStore.hasInjector &&
-                !accountStore.hasSessionProxyForRole(SessionProxyRole.ReadAny)
+                accountStore.sessionProxyForRole(SessionProxyRole.ReadAny) ===
+                  null
                   ? "load older messages (needs signature in extension. Add session key to automate!)"
                   : "loading older messages"
               }}
diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index 20d52f1..9b983df 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -145,7 +145,8 @@
             </svg>
             {{
               accountStore.hasInjector &&
-              !accountStore.hasSessionProxyForRole(SessionProxyRole.ReadAny)
+              accountStore.sessionProxyForRole(SessionProxyRole.ReadAny) ===
+                null
                 ? "load older events (needs signature in extension. Add session key to automate!)"
                 : "loading older events"
             }}
diff --git a/pages/index.vue b/pages/index.vue
index 08e2e00..24a2436 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -680,7 +680,7 @@ watch(pollCounter, async () => {
   // autofetch history slowly
   try {
     if (
-      accountStore.hasSessionProxyForRole(SessionProxyRole.ReadAny) ||
+      accountStore.sessionProxyForRole(SessionProxyRole.ReadAny) !== null ||
       !accountStore.hasInjector
     ) {
       console.debug("unfetchedBucketsCount is " + unfetchedBucketsCount.value);

From ba124aac24118e6563430b7c1cdefb27b76406b2 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Wed, 22 Jan 2025 13:36:20 +0100
Subject: [PATCH 06/11] fix url token path

---
 components/ui/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ui/Sidebar.vue b/components/ui/Sidebar.vue
index 100c34d..85618ca 100644
--- a/components/ui/Sidebar.vue
+++ b/components/ui/Sidebar.vue
@@ -385,7 +385,7 @@ const selectToken = (item) => {
   const currentQuery = { ...router.currentRoute.value.query };
   // replace the last part of the url path with the selected token
   let newPath = router.currentRoute.value.path.replace(
-    /\/[^/]*$/,
+    /\/[^/?]*(?=\/|\?|$)/,
     `/${item.label.toLowerCase()}`,
   );
   router

From 8a57285529cede64d2cd1edc3e577b1e1be79e9a Mon Sep 17 00:00:00 2001
From: Alex <32063118+alex-byteport@users.noreply.github.com>
Date: Thu, 23 Jan 2025 13:10:17 +0100
Subject: [PATCH 07/11] new page FAQ (#106)

* new sidebar ui, wallet and token selector dropdown

* prettier

* cleanup and fix warnings

---------

Co-authored-by: Alexey Popov <a.popov@tantumpay.com>
Co-authored-by: Alain Brenzikofer <alain@integritee.network>
---
 components/tabs/FaqTab.vue         | 195 ++++++++++++++++++++++++++++-
 components/tabs/MessagingTab.vue   |   9 +-
 components/tabs/VouchersTab.vue    |   4 +
 components/tabs/WalletTab.vue      |  11 +-
 components/ui/HealthIndicator.vue  |  17 ++-
 components/ui/PrivateTxHistory.vue |   4 +
 components/ui/Sidebar.vue          | 101 +++++++++++----
 components/ui/TokenIndicator.vue   |   8 +-
 components/ui/WalletIndicator.vue  |  53 ++++++++
 pages/index.vue                    |   1 +
 10 files changed, 364 insertions(+), 39 deletions(-)
 create mode 100644 components/ui/WalletIndicator.vue

diff --git a/components/tabs/FaqTab.vue b/components/tabs/FaqTab.vue
index 6849d60..fd34c6c 100644
--- a/components/tabs/FaqTab.vue
+++ b/components/tabs/FaqTab.vue
@@ -1,9 +1,198 @@
 <template>
-  <div class="text-white">TEST</div>
+  <div class="mt-3 sm:mt-5 px-3">
+    <button
+      @click="eventBus.emit('toggleSidebar')"
+      class="lg:hidden text-white focus:outline-none text-2xl"
+    >
+      ☰
+    </button>
+  </div>
+  <div class="px-5 py-5 sm:py-5 lg:px-5 lg:py-5">
+    <h2 class="flex text-2xl font-bold tracking-tight text-white sm:text-2xl">
+      Frequently Asked Questions
+    </h2>
+
+    <div
+      class="flex mt-5 text-xl font-bold tracking-tight text-white sm:text-xl"
+    >
+      Introduction
+    </div>
+    <p class="my-4 mb-10 text-sm text-gray-400">
+      Welcome to the FAQ section for Incognitee, your blockchain-based solution
+      for private transfers and messages on the Polkadot network. Below, you'll
+      find answers to the most common questions about our product, its features,
+      and how it can benefit you.
+    </p>
+    <div v-for="(section, index) in faqSections" :key="index" class="mt-8">
+      <h3
+        class="flex text-lg font-bold tracking-tight text-green-400 sm:text-lg mb-5"
+      >
+        {{ section.title }}
+      </h3>
+
+      <!-- Fragen und Antworten -->
+      <dl class="space-y-6 divide-y divide-white/10 px-4 py-2">
+        <Disclosure
+          as="div"
+          v-for="faq in section.questions"
+          :key="faq.question"
+          v-slot="{ open }"
+        >
+          <dt>
+            <DisclosureButton
+              class="flex w-full justify-between text-left text-white my-5"
+            >
+              <span class="font-semibold">{{ faq.question }}</span>
+              <span class="ml-6 flex h-7 items-center">
+                <PlusSmallIcon
+                  v-if="!open"
+                  class="w-6 h-6"
+                  aria-hidden="true"
+                />
+                <MinusSmallIcon v-else class="w-6 h-6" aria-hidden="true" />
+              </span>
+            </DisclosureButton>
+          </dt>
+          <DisclosurePanel as="dd" class="mt-2 mb-5 pr-12">
+            <p class="text-sm text-gray-400">{{ faq.answer }}</p>
+          </DisclosurePanel>
+        </Disclosure>
+      </dl>
+    </div>
+    <div
+      class="flex mt-5 text-xl font-bold tracking-tight text-white sm:text-xl"
+    >
+      Need More Help?
+    </div>
+    <p class="my-4 mb-10 text-sm text-gray-400">
+      If you have any additional questions or need support, please contact us at
+      <a
+        href="mailto:support@incognitee.io"
+        class="text-incognitee-green hover:underline"
+        >support@integritee.network</a
+      >
+      or via the full documentation at<a
+        href="https://docs.incognitee.io"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-incognitee-green hover:underline"
+      >
+        docs.incognitee.io</a
+      >.
+    </p>
+  </div>
 </template>
 
-<script></script>
+<script lang="ts">
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
+import { MinusSmallIcon, PlusSmallIcon } from "@heroicons/vue/24/outline";
+import { eventBus } from "~/helpers/eventBus";
+import HealthIndicator from "~/components/ui/HealthIndicator.vue";
+import WalletIndicator from "~/components/ui/WalletIndicator.vue";
+import TokenIndicator from "~/components/ui/TokenIndicator.vue";
+
+export default {
+  computed: {
+    eventBus() {
+      return eventBus;
+    },
+  },
+  components: {
+    TokenIndicator,
+    WalletIndicator,
+    HealthIndicator,
+    Disclosure,
+    DisclosureButton,
+    DisclosurePanel,
+    MinusSmallIcon,
+    PlusSmallIcon,
+  },
+  data() {
+    return {
+      faqSections: [
+        {
+          title: "General Questions",
+          questions: [
+            {
+              question: "What is Incognitee, and how does it work?",
+              answer:
+                "Incognitee is a decentralized platform that enables secure and private messages and transfers of digital assets using blockchain technology.",
+            },
+            {
+              question:
+                "Why did you choose Polkadot as the underlying blockchain?",
+              answer:
+                "Polkadot provides unmatched scalability, interoperability, and security. Its unique parachain architecture allows Incognitee to operate efficiently.",
+            },
+          ],
+        },
+        {
+          title: "Features and Benefits",
+          questions: [
+            {
+              question: "What are the key features of Incognitee?",
+              answer:
+                "Privacy, scalability, low fees, and interoperability are key features of Incognitee.",
+            },
+            {
+              question: "How does Incognitee ensure private transactions?",
+              answer:
+                "We utilize special servers with hardware encryption called TEEs to protect the details of your transactions.",
+            },
+          ],
+        },
+        {
+          title: "Privacy and Security",
+          questions: [
+            {
+              question:
+                "How does Incognitee guarantee the security of transactions?",
+              answer:
+                "We use state-of-the-art hardware encryption and decentralized architecture to ensure that your transactions remain secure.",
+            },
+            {
+              question: "Is my data private, and who has access to it?",
+              answer:
+                "Your data is completely private by default. No one else, including us, can access your transaction details.",
+            },
+          ],
+        },
+        {
+          title: "Technical Details",
+          questions: [
+            {
+              question: "What are Session Keys?",
+              answer:
+                "Session keys allow minimal signing interaction and provide a smooth experience. They can be cached confidentially.",
+            },
+            {
+              question: "What is the transaction speed and cost?",
+              answer:
+                "Transactions on Incognitee are near-instantaneous thanks to one-second block times and cost just cents.",
+            },
+          ],
+        },
+        {
+          title: "Usage and Accessibility",
+          questions: [
+            {
+              question: "How do I get started with Incognitee?",
+              answer:
+                "Getting started is easy. Create an account, connect your wallet, and follow the setup guide to initiate your first private transfer.",
+            },
+            {
+              question: "What wallets or tools do I need to use this product?",
+              answer:
+                "Incognitee supports major wallets compatible with Polkadot, such as Polkadot.js, Talisman, Subwallet, and Nova Wallet.",
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+</script>
 
 <style scoped>
-/* No custom styles needed as we are using Tailwind CSS */
+/* Optional: Additional styles */
 </style>
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index d2d6162..377dedb 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -69,11 +69,7 @@
           </button>
 
           <!-- Linksbündiger Titel -->
-          <div
-            class="title text-2xl font-bold tracking-tight text-white sm:text-2xl"
-          >
-            Chats
-          </div>
+          <div class="text-2xl font-bold tracking-tight text-white">Chats</div>
           <div class="lg:hidden">
             <HealthIndicator />
           </div>
@@ -287,6 +283,7 @@
                     <span>
                       Private balance:
                       {{ accountStore.formatBalanceFree(incogniteeSidechain) }}
+                      {{ accountStore.getSymbol }}
                     </span>
                     &nbsp;&nbsp;
                     <span>
@@ -296,7 +293,7 @@
                           INCOGNITEE_BYTE_FEE * sendPrivateNote.length
                         ).toFixed(4)
                       }}
-                      {{ accountStore.getSymbol }} for Incognitee
+                      {{ accountStore.getSymbol }}
                     </span>
                   </div>
                 </div>
diff --git a/components/tabs/VouchersTab.vue b/components/tabs/VouchersTab.vue
index c018878..4c1bc91 100644
--- a/components/tabs/VouchersTab.vue
+++ b/components/tabs/VouchersTab.vue
@@ -9,6 +9,9 @@
     <div class="lg:hidden">
       <HealthIndicator />
     </div>
+    <div class="lg:hidden">
+      <WalletIndicator />
+    </div>
     <TokenIndicator class="lg:hidden" />
   </div>
   <div class="p-3">
@@ -391,6 +394,7 @@ import { eventBus } from "@/helpers/eventBus";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 import HealthIndicator from "~/components/ui/HealthIndicator.vue";
 import TokenIndicator from "~/components/ui/TokenIndicator.vue";
+import WalletIndicator from "~/components/ui/WalletIndicator.vue";
 
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index 38afc69..e6e399c 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="show" class="p-3">
-    <div class="mb-3 flex justify-between items-center">
+    <div class="flex justify-between items-center">
       <button
         @click="eventBus.emit('toggleSidebar')"
         class="lg:hidden text-white focus:outline-none text-2xl"
@@ -10,6 +10,9 @@
       <div class="lg:hidden">
         <HealthIndicator />
       </div>
+      <div class="lg:hidden">
+        <WalletIndicator />
+      </div>
       <TokenIndicator class="lg:hidden" />
     </div>
     <WarningBanner
@@ -244,6 +247,7 @@
         :eventHorizon="props.eventHorizon"
         :bucketsCount="props.bucketsCount"
         :unfetchedBucketsCount="props.unfetchedBucketsCount"
+        :isUpdatingNotes="props.isUpdatingNotes"
       />
     </div>
 
@@ -1075,6 +1079,7 @@ import HealthIndicator from "~/components/ui/HealthIndicator.vue";
 import IncogniteeLogo from "~/components/Logo/incognitee-logo.vue";
 import TokenIndicator from "~/components/ui/TokenIndicator.vue";
 import MessagingTab from "~/components/tabs/MessagingTab.vue";
+import WalletIndicator from "~/components/ui/WalletIndicator.vue";
 
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
@@ -1625,6 +1630,10 @@ const props = defineProps({
   },
   bucketsCount: { type: Number, required: true },
   unfetchedBucketsCount: { type: Number, required: true },
+  isUpdatingNotes: {
+    type: Boolean,
+    required: true,
+  },
   enableActions: {
     type: Boolean,
     required: true,
diff --git a/components/ui/HealthIndicator.vue b/components/ui/HealthIndicator.vue
index 42bf2ab..4c60baa 100644
--- a/components/ui/HealthIndicator.vue
+++ b/components/ui/HealthIndicator.vue
@@ -1,24 +1,33 @@
 <template>
   <div @click="openHealthDetailsOverlay" class="cursor-pointer">
-    <div v-if="contextualHealth === Health.Healthy">
+    <div
+      class="flex items-center text-xs"
+      v-if="contextualHealth === Health.Healthy"
+    >
       <div
         class="bg-green-500 w-3 h-3 rounded-full"
         title="system health: all good"
       ></div>
     </div>
-    <div v-else-if="contextualHealth === Health.Warning">
+    <div
+      class="flex items-center text-xs"
+      v-else-if="contextualHealth === Health.Warning"
+    >
       <div
         class="bg-yellow-500 w-3 h-3 rounded-full"
         title="system health: warnings"
       ></div>
     </div>
-    <div v-else-if="contextualHealth === Health.Critical">
+    <div
+      class="flex items-center text-xs"
+      v-else-if="contextualHealth === Health.Critical"
+    >
       <div
         class="bg-red-500 w-3 h-3 rounded-full"
         title="system health: critical"
       ></div>
     </div>
-    <div v-else>
+    <div class="flex items-center text-xs" v-else>
       <div
         class="bg-gray-500 w-3 h-3 rounded-full"
         title="health unknown"
diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index 9b983df..0ea788a 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -212,6 +212,10 @@ const props = defineProps({
   },
   bucketsCount: { type: Number, required: true },
   unfetchedBucketsCount: { type: Number, required: true },
+  isUpdatingNotes: {
+    type: Boolean,
+    required: true,
+  },
 });
 
 const showNote = ref<Note>(null);
diff --git a/components/ui/Sidebar.vue b/components/ui/Sidebar.vue
index 85618ca..0f67698 100644
--- a/components/ui/Sidebar.vue
+++ b/components/ui/Sidebar.vue
@@ -222,6 +222,34 @@
               Contact support
             </a>
           </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm text-gray-400 hover:text-white hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToFaq');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
+                />
+              </svg>
+
+              FAQ
+            </button>
+          </li>
         </ul>
       </nav>
     </div>
@@ -229,7 +257,7 @@
     <!-- Footer Content -->
     <div class="px-4 space-y-4 mb-4">
       <div class="flex items-center text-xs" @click="toggleSidebar">
-        <span class="mr-2 text-gray-500">System Health</span>
+        <span class="mr-2 text-gray-400">System Health</span>
         <HealthIndicator />
       </div>
       <div class="text-sm flex flex-col space-y-1">
@@ -254,6 +282,7 @@
               class="flex items-center w-full rounded-md border border-gray-700 bg-gray-800 py-1.5 px-3 text-xs text-gray-400 hover:ring-1 hover:ring-incognitee-green focus-within:ring-1 focus-within:ring-incognitee-green cursor-pointer"
               @click="toggleTokenDropdown"
             >
+              <!-- Token Icon -->
               <TEER
                 v-if="selectedToken === 'TEER'"
                 class="w-[14px] h-[14px] mr-2"
@@ -266,12 +295,36 @@
                 v-else-if="selectedToken === 'DOT'"
                 class="w-[14px] h-[14px] mr-2"
               />
+
+              <!-- Token Name -->
               <span class="truncate">{{ selectedToken }}</span>
+
+              <!-- Badge -->
+              <span
+                v-if="selectedToken === 'TEER'"
+                class="inline-flex items-center rounded-md bg-yellow-400/10 px-2 py-1 text-xs font-medium text-yellow-500 ring-1 ring-yellow-400/20 ring-inset ml-auto"
+              >
+                Beta
+              </span>
+              <span
+                v-else-if="selectedToken === 'PAS'"
+                class="inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-blue-400/30 ring-inset ml-auto"
+              >
+                Test
+              </span>
+              <span
+                v-else-if="selectedToken === 'DOT'"
+                class="inline-flex items-center rounded-md bg-green-400/10 px-2 py-1 text-xs font-medium text-green-400 ring-1 ring-green-400/30 ring-inset ml-auto"
+              >
+                Beta
+              </span>
+
+              <!-- Dropdown Arrow -->
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
                 viewBox="0 0 24 24"
-                :class="['w-3 h-3 ml-auto', isOpen ? 'rotate-180' : '']"
+                :class="['w-3 h-3 ml-2', isOpen ? 'rotate-180' : '']"
                 class="transition-transform text-gray-500 hover:text-incognitee-green"
               >
                 <path
@@ -290,27 +343,33 @@
               <div
                 v-for="item in tokenSelectorItems"
                 :key="item.value"
-                class="flex text-xs items-center px-3 py-2 hover:bg-gray-700 hover:text-white cursor-pointer"
-                @click="redirect(item)"
-              >
-                <component :is="item.icon" class="w-[14px] h-[14px] mr-2" />
-                <span>{{ item.label }}</span>
-              </div>
-            </div>
-
-            <!-- Dropdown Menu -->
-            <div
-              v-show="isOpen"
-              class="absolute bottom-full mb-2 w-full rounded-md bg-gray-800 border border-gray-700 shadow-lg text-gray-400 z-10"
-            >
-              <div
-                v-for="item in tokenSelectorItems"
-                :key="item.value"
-                class="flex text-xs items-center px-3 py-2 hover:bg-gray-700 hover:text-white cursor-pointer"
+                class="flex items-center justify-between text-xs px-3 py-2 hover:bg-gray-700 hover:text-white cursor-pointer"
                 @click="selectToken(item)"
               >
-                <component :is="item.icon" class="w-[14px] h-[14px] mr-2" />
-                <span>{{ item.label }}</span>
+                <!-- Linke Seite mit Icon und Token-Name -->
+                <div class="flex items-center">
+                  <component :is="item.icon" class="w-[14px] h-[14px] mr-2" />
+                  <span>{{ item.label }}</span>
+                </div>
+                <!-- Rechte Seite mit Badge -->
+                <span
+                  v-if="item.label === 'TEER'"
+                  class="inline-flex items-center rounded-md bg-yellow-400/10 px-2 py-1 text-xs font-medium text-yellow-500 ring-1 ring-yellow-400/20 ring-inset"
+                >
+                  Beta
+                </span>
+                <span
+                  v-else-if="item.label === 'DOT'"
+                  class="inline-flex items-center rounded-md bg-yellow-400/10 px-2 py-1 text-xs font-medium text-yellow-500 ring-1 ring-yellow-400/20 ring-inset"
+                >
+                  Beta
+                </span>
+                <span
+                  v-else-if="item.label === 'PAS'"
+                  class="inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-blue-400/30 ring-inset"
+                >
+                  Test
+                </span>
               </div>
             </div>
           </div>
diff --git a/components/ui/TokenIndicator.vue b/components/ui/TokenIndicator.vue
index 000aae5..8bf2d7c 100644
--- a/components/ui/TokenIndicator.vue
+++ b/components/ui/TokenIndicator.vue
@@ -1,14 +1,14 @@
 <template>
   <div v-if="accountStore.getSymbol === 'TEER'">
-    <TEER class="w-[30px] h-[30px]" />
+    <TEER class="w-[23px] h-[23px]" />
   </div>
   <div v-else-if="accountStore.getSymbol === 'DOT'">
-    <DOT class="w-[30px] h-[30px]" />
+    <DOT class="w-[23px] h-[23px]" />
   </div>
   <div v-else-if="accountStore.getSymbol === 'PAS'">
-    <Paseo class="w-[30px] h-[30px]" />
+    <Paseo class="w-[23px] h-[23px]" />
   </div>
-  <div v-else>unknown token</div>
+  <div v-else class="spinner"></div>
 </template>
 
 <script setup lang="ts">
diff --git a/components/ui/WalletIndicator.vue b/components/ui/WalletIndicator.vue
new file mode 100644
index 0000000..8208ce1
--- /dev/null
+++ b/components/ui/WalletIndicator.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="flex items-center text-xs gap-1"
+    @click="emitEvent('addressClicked')"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="size-4 text-gray-400"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3"
+      />
+    </svg>
+    <span class="text-xs wallet-address text-gray-400">{{
+      accountStore.getAddress
+    }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAccount } from "~/store/account";
+import { eventBus } from "@/helpers/eventBus";
+
+const accountStore = useAccount();
+
+// Event-Emitter-Funktionen
+const emitEvent = (eventName: string) => {
+  eventBus.emit(eventName);
+};
+</script>
+
+<style scoped>
+.wallet-address {
+  display: block;
+  white-space: nowrap; /* Verhindert Zeilenumbruch */
+  overflow: hidden; /* Versteckt überlaufenden Text */
+  text-overflow: ellipsis; /* Zeigt '...' bei zu langem Text an */
+  max-width: 10ch; /* Maximale Länge: 10 Zeichen */
+}
+
+/* Für größere Bildschirme (ab 641px) */
+@media (min-width: 641px) {
+  .wallet-address {
+    max-width: 10ch; /* Begrenze auch hier auf 10 Zeichen */
+  }
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 24a2436..97c3b48 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,6 +15,7 @@
       :eventHorizon="oldestMomentInNoteBuckets"
       :bucketsCount="bucketsCount"
       :unfetchedBucketsCount="unfetchedBucketsCount"
+      :isUpdatingNotes="isUpdatingNotes"
       :enableActions="enableActions"
     />
   </div>

From aff347b44a05d19104ef9d9eaafc9d5abd3b85bf Mon Sep 17 00:00:00 2001
From: brenzi <brenzi@users.noreply.github.com>
Date: Thu, 23 Jan 2025 13:22:21 +0100
Subject: [PATCH 08/11] recommend session key role (#105)

* recommend session key role and warn about any

* tone down
---
 components/overlays/SessionProxiesOverlay.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index bf205ff..79279c1 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -52,8 +52,8 @@
                   v-model="selectedSessionProxyRole"
                 />
               </div>
-              <div v-else class="mr-4">✓</div>
-              <span class="text-sm text-gray-400">Allow reading balance</span>
+              <div v-else class="mr-1">✓</div>
+              <span class="text-sm text-gray-400">Read balance</span>
             </label>
           </div>
           <div
@@ -68,7 +68,7 @@
                   v-model="selectedSessionProxyRole"
                 />
               </div>
-              <div v-else class="mr-4">✓</div>
+              <div v-else class="mr-1">✓</div>
               <span class="text-sm text-gray-400">Full read access</span>
             </label>
           </div>
@@ -84,9 +84,9 @@
                   v-model="selectedSessionProxyRole"
                 />
               </div>
-              <div v-else class="mr-4">✓</div>
+              <div v-else class="mr-1">✓</div>
               <span class="text-sm text-gray-400"
-                >Allow non-transfer actions</span
+                >Non-transfer actions <b>(recommended)</b></span
               >
             </label>
           </div>
@@ -103,7 +103,7 @@
                 />
               </div>
               <div v-else class="mr-4">✓</div>
-              <span class="text-sm text-gray-400">Allow all actions</span>
+              <span class="text-sm text-gray-400">All actions</span>
             </label>
           </div>
           <!--

From 7fcc7894e2400391b10f401aa829e0dd31cef918 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Thu, 23 Jan 2025 16:59:43 +0100
Subject: [PATCH 09/11] replace alerts with inline warnings if extension not
 found

---
 components/overlays/ChooseWalletOverlay.vue | 10 +++-
 lib/signerExtensionUtils.ts                 | 60 +++++++++------------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/components/overlays/ChooseWalletOverlay.vue b/components/overlays/ChooseWalletOverlay.vue
index 0a2eb64..e041d26 100644
--- a/components/overlays/ChooseWalletOverlay.vue
+++ b/components/overlays/ChooseWalletOverlay.vue
@@ -43,11 +43,14 @@
             Connect using a browser extension:
           </p>
           <button
-            @click="connectExtension"
+            @click="tryConnectExtension"
             class="bg-gradient-to-r from-incognitee-green to-incognitee-blue rounded-md text-sm font-semibold text-white py-1.5 w-full hover:shadow-lg hover:shadow-incognitee-green/50"
           >
             Connect
           </button>
+          <div v-if="maybeWarning" class="text-yellow-400 text-sm mt-2">
+            {{ maybeWarning }}
+          </div>
         </div>
       </div>
 
@@ -180,6 +183,7 @@ const handleConnect = () => {
 const accountStore = useAccount();
 const currentExtensionAccount = ref("");
 const selectedExtensionAccount = ref("");
+const maybeWarning = ref(null);
 
 const selectedExtensionAccountIsNew = computed(() => {
   try {
@@ -250,6 +254,10 @@ const closeProxy = () => {
   props.close();
 };
 
+const tryConnectExtension = async () => {
+  maybeWarning.value = await connectExtension();
+};
+
 watch(selectedExtensionAccount, async (selectedAddress) => {
   if (selectedAddress && selectedExtensionAccountIsNew.value) {
     props.onExtensionAccountChange(selectedAddress);
diff --git a/lib/signerExtensionUtils.ts b/lib/signerExtensionUtils.ts
index 19e1e83..42ce72c 100644
--- a/lib/signerExtensionUtils.ts
+++ b/lib/signerExtensionUtils.ts
@@ -9,40 +9,32 @@ import { ref } from "vue";
 
 export const extensionAccounts = ref([]);
 export const selectedExtensionAccount = ref(null);
-export const connectExtension = () => {
-  return web3Enable("Integritee Dapp")
-    .then((extensions) => {
-      console.log("Enabled extensions:", extensions);
-
-      if (extensions.length === 0) {
-        console.error(
-          "No wallet extensions found. Please install or enable a wallet.",
-        );
-        alert("No wallet extensions found. Please install or enable a wallet.");
-        return;
-      }
-
-      return web3Accounts();
-    })
-    .then((accountsList) => {
-      if (!accountsList) {
-        console.error("No accounts found. Please unlock your wallet.");
-        alert("No accounts found. Please unlock your wallet.");
-        return;
-      }
-
-      extensionAccounts.value = accountsList;
-      console.log("Found accounts:", accountsList);
-
-      if (accountsList.length < 1) {
-        console.error(
-          "No accounts detected in extension. Please unlock your wallet, check visibility or create an account.",
-        );
-        alert(
-          "No accounts detected in extension. Please unlock your wallet, check visibility or create an account.",
-        );
-      }
-    });
+export const connectExtension = async () => {
+  const extensions = await web3Enable("Integritee Dapp");
+  console.log("Enabled extensions:", extensions);
+
+  if (extensions.length === 0) {
+    console.error("No wallet extensions found.");
+    return "Please install a wallet extension and make sure it is enabled";
+  }
+
+  const accountsList = await web3Accounts();
+  if (!accountsList) {
+    console.error("No accounts found. Please unlock your wallet.");
+    return "No accounts found. Please unlock your wallet.";
+  }
+
+  extensionAccounts.value = accountsList;
+  console.log("Found accounts:", accountsList);
+
+  if (accountsList.length < 1) {
+    console.error(
+      "No accounts detected in extension. Please unlock your wallet, check visibility or create an account.",
+    );
+    return "No accounts detected in extension. Please unlock your wallet, check visibility or create an account.";
+  }
+
+  return null; // No issues, return null
 };
 
 export const injectorForAddress = async (address) => {

From e5b19e0273ad9d4f909a5f067b871a6a52eb904c Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Thu, 23 Jan 2025 17:14:02 +0100
Subject: [PATCH 10/11] add spinner while waiting for signature in extension to
 connect wallet and read balance

---
 components/overlays/ChooseWalletOverlay.vue | 29 +++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/components/overlays/ChooseWalletOverlay.vue b/components/overlays/ChooseWalletOverlay.vue
index e041d26..eea3968 100644
--- a/components/overlays/ChooseWalletOverlay.vue
+++ b/components/overlays/ChooseWalletOverlay.vue
@@ -159,6 +159,9 @@
         <p class="mt-5 text-sm text-gray-400">
           This window will close once a balance could be fetched
         </p>
+        <div class="spinner-container">
+          <div class="spinner"></div>
+        </div>
       </div>
     </div>
   </OverlayDialog>
@@ -270,4 +273,30 @@ watch(selectedExtensionAccount, async (selectedAddress) => {
   white-space: normal;
   word-wrap: break-word;
 }
+
+.spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%; /* Adjust as needed */
+}
+
+.spinner {
+  border: 2px solid #f3f3f3; /* Light grey */
+  border-top: 2px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 1em; /* Adjust the size here */
+  height: 1em; /* Adjust the size here */
+  animation: spin 2s linear infinite;
+  vertical-align: middle; /* Align with the text */
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>

From 03289639aab0493835b28dee6e112f96b67e2c4b Mon Sep 17 00:00:00 2001
From: Alex <32063118+alex-byteport@users.noreply.github.com>
Date: Fri, 24 Jan 2025 08:39:00 +0100
Subject: [PATCH 11/11] small faq fixes and ui fixes (#107)

* small faq fixes and ui fixes

* small faq fixes and ui fixes

* prettier

* tiny faq edits

---------

Co-authored-by: Alexey Popov <a.popov@tantumpay.com>
Co-authored-by: Alain Brenzikofer <alain@integritee.network>
---
 components/tabs/FaqTab.vue      | 143 ++++++++++++++++++++++++++------
 components/tabs/TeerDaysTab.vue |   8 +-
 components/tabs/WalletTab.vue   |   4 +-
 components/ui/Sidebar.vue       |   4 +-
 nuxt.config.ts                  |   1 -
 5 files changed, 128 insertions(+), 32 deletions(-)

diff --git a/components/tabs/FaqTab.vue b/components/tabs/FaqTab.vue
index fd34c6c..63de043 100644
--- a/components/tabs/FaqTab.vue
+++ b/components/tabs/FaqTab.vue
@@ -1,17 +1,27 @@
 <template>
   <div class="mt-3 sm:mt-5 px-3">
-    <button
-      @click="eventBus.emit('toggleSidebar')"
-      class="lg:hidden text-white focus:outline-none text-2xl"
-    >
-      ☰
-    </button>
+    <div class="flex justify-between items-center">
+      <button
+        @click="eventBus.emit('toggleSidebar')"
+        class="lg:hidden text-white focus:outline-none text-2xl"
+      >
+        ☰
+      </button>
+      <div class="lg:hidden">
+        <HealthIndicator />
+      </div>
+      <div class="lg:hidden">
+        <WalletIndicator />
+      </div>
+      <div class="lg:hidden">
+        <TokenIndicator />
+      </div>
+    </div>
   </div>
   <div class="px-5 py-5 sm:py-5 lg:px-5 lg:py-5">
     <h2 class="flex text-2xl font-bold tracking-tight text-white sm:text-2xl">
       Frequently Asked Questions
     </h2>
-
     <div
       class="flex mt-5 text-xl font-bold tracking-tight text-white sm:text-xl"
     >
@@ -25,11 +35,10 @@
     </p>
     <div v-for="(section, index) in faqSections" :key="index" class="mt-8">
       <h3
-        class="flex text-lg font-bold tracking-tight text-green-400 sm:text-lg mb-5"
+        class="flex text-lg font-bold tracking-tight text-incognitee-blue sm:text-lg mb-5"
       >
         {{ section.title }}
       </h3>
-
       <!-- Fragen und Antworten -->
       <dl class="space-y-6 divide-y divide-white/10 px-4 py-2">
         <Disclosure
@@ -54,7 +63,7 @@
             </DisclosureButton>
           </dt>
           <DisclosurePanel as="dd" class="mt-2 mb-5 pr-12">
-            <p class="text-sm text-gray-400">{{ faq.answer }}</p>
+            <p class="text-sm text-gray-400" v-html="faq.answer"></p>
           </DisclosurePanel>
         </Disclosure>
       </dl>
@@ -83,13 +92,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 import { MinusSmallIcon, PlusSmallIcon } from "@heroicons/vue/24/outline";
-import { eventBus } from "~/helpers/eventBus";
+import { eventBus } from "@/helpers/eventBus";
 import HealthIndicator from "~/components/ui/HealthIndicator.vue";
-import WalletIndicator from "~/components/ui/WalletIndicator.vue";
 import TokenIndicator from "~/components/ui/TokenIndicator.vue";
+import WalletIndicator from "~/components/ui/WalletIndicator.vue";
 
 export default {
   computed: {
@@ -116,13 +125,24 @@ export default {
             {
               question: "What is Incognitee, and how does it work?",
               answer:
-                "Incognitee is a decentralized platform that enables secure and private messages and transfers of digital assets using blockchain technology.",
+                "Incognitee is a decentralized platform that enables secure and private messages and transfers of digital assets using blockchain technology. Built on the Polkadot network, it leverages Trusted Execution Environments to offer convenient privacy enhancements for an unmatched digital asset experience.",
             },
             {
               question:
                 "Why did you choose Polkadot as the underlying blockchain?",
               answer:
-                "Polkadot provides unmatched scalability, interoperability, and security. Its unique parachain architecture allows Incognitee to operate efficiently.",
+                "Polkadot provides unmatched scalability, interoperability, and security. Its unique parachain architecture allows Incognitee to operate efficiently while benefiting from the shared security of the Polkadot relay chain.",
+            },
+            {
+              question: "Who can use Incognitee?",
+              answer:
+                "Incognitee is designed for individuals, businesses, and organizations seeking a secure and private way to transfer assets and messages. Whether you're a tech-savvy crypto user or new to blockchain, our platform is accessible to everyone.",
+            },
+            {
+              question:
+                "How is this different from other blockchain transfer solutions?",
+              answer:
+                "Unlike traditional solutions, Incognitee prioritizes privacy by default. We use Trusted Execution Environments and the Polkadot ecosystem to ensure that your transactions remain confidential and efficient.",
             },
           ],
         },
@@ -131,13 +151,30 @@ export default {
           questions: [
             {
               question: "What are the key features of Incognitee?",
-              answer:
-                "Privacy, scalability, low fees, and interoperability are key features of Incognitee.",
+              answer: `
+          <ul>
+            <li><strong>Privacy:</strong> Ensures complete confidentiality of transactions.</li>
+            <li><strong>Scalability:</strong> Supports high transaction throughput with minimal latency.</li>
+            <li><strong>Low Fees:</strong> Cost-efficient transactions compared to traditional systems.</li>
+            <li><strong>Interoperability:</strong> Seamlessly integrates with other Polkadot parachains.</li>
+          </ul>
+        `,
             },
             {
               question: "How does Incognitee ensure private transactions?",
               answer:
-                "We utilize special servers with hardware encryption called TEEs to protect the details of your transactions.",
+                "We utilize special servers with hardware encryption called TEEs to protect the details of your transactions, including the sender, receiver, and amount.",
+            },
+            {
+              question:
+                "What benefits does this product offer over traditional transfer systems?",
+              answer:
+                "Our platform eliminates intermediaries, reducing costs and increasing speed. Transactions are secure, immutable, and private, unlike traditional systems which often compromise privacy.",
+            },
+            {
+              question: "Can Incognitee handle high transaction volumes?",
+              answer:
+                "Yes, Incognitee is built to handle high volumes of transactions without compromising speed or security, thanks to Polkadot's and Integritee's scalable architecture.",
             },
           ],
         },
@@ -148,12 +185,17 @@ export default {
               question:
                 "How does Incognitee guarantee the security of transactions?",
               answer:
-                "We use state-of-the-art hardware encryption and decentralized architecture to ensure that your transactions remain secure.",
+                "We use state-of-the-art hardware encryption and decentralized architecture to ensure that your transactions remain secure and tamper-proof without depending on a trusted third-party.",
             },
             {
               question: "Is my data private, and who has access to it?",
               answer:
-                "Your data is completely private by default. No one else, including us, can access your transaction details.",
+                "Your data and metadata are completely private by default. No one else, including us, can access your transaction details, as they remain encrypted even while being processed.",
+            },
+            {
+              question: "What happens if the blockchain is compromised?",
+              answer:
+                "Polkadot’s robust design and decentralized consensus mechanisms make it highly resilient to attacks. Additionally, our platform incorporates multi-layered security measures to safeguard your data.",
             },
           ],
         },
@@ -162,14 +204,26 @@ export default {
           questions: [
             {
               question: "What are Session Keys?",
-              answer:
-                "Session keys allow minimal signing interaction and provide a smooth experience. They can be cached confidentially.",
+              answer: `
+          For a smooth experience with minimal signing interaction, we recommend that you authorize a session key. It will be cached confidentially on Incognitee and loaded automatically on your next visit from the same or a different device. You can choose from the following options:</br></br>
+          <ul>
+            <li>- Allow reading balance</li>
+            <li>- Full read access → including transaction history and messages</li>
+            <li>- Allow non-transfer actions → recommended, including sending messages</li>
+            <li>- Allow all actions → including transactions of tokens. Only use on trusted devices.</li>
+          </ul>
+        `,
             },
             {
               question: "What is the transaction speed and cost?",
               answer:
                 "Transactions on Incognitee are near-instantaneous thanks to one-second block times and cost just cents.",
             },
+            {
+              question: "Can this product integrate with existing systems?",
+              answer:
+                "Yes, Incognitee provides a json-rpc API and libraries for Rust and Typescript that make integration with existing systems and tools straightforward.",
+            },
           ],
         },
         {
@@ -183,7 +237,45 @@ export default {
             {
               question: "What wallets or tools do I need to use this product?",
               answer:
-                "Incognitee supports major wallets compatible with Polkadot, such as Polkadot.js, Talisman, Subwallet, and Nova Wallet.",
+                "Incognitee supports major wallets compatible with Polkadot, such as Polkadot.js, Talisman, Subwallet and Nova Wallet.",
+            },
+            {
+              question: "Is there a mobile or desktop application available?",
+              answer:
+                "We offer a web app that supports both mobile and desktop views to ensure you can access Incognitee wherever you are.",
+            },
+            {
+              question: "Which tokens or networks are supported?",
+              answer: `
+          Currently, we support the following Tokens and Networks as of 22.01.2025:
+          <ul>
+            <li>DOT - Asset Hub Polkadot (Beta)</li>
+            <li>TEER - Integritee Network (Beta)</li>
+            <li>PAS - Paseo Network (Testing)</li>
+          </ul>
+        `,
+            },
+            {
+              question: "What are the fees of Incognitee?",
+              answer: `
+          Current fees:
+          <ul>
+            <li>Shielding: 0.175% of the amount</li>
+            <li>Private Transfer: 0.01 DOT</li>
+            <li>Unshielding: 0.03 DOT</li>
+            <li>Session Proxy Deposit: 0.1 DOT</li>
+          </ul>
+        `,
+            },
+            {
+              question: "Are there any limits or restrictions?",
+              answer: `
+          While in <i>beta</i> status, limits will apply to the amount of funds you can shield to Incognitee:
+          <ul>
+            <li>Shielding limit: 111 DOT</li>
+            <li>Shielding limit: 1000 TEER</li>
+          </ul>
+        `,
             },
           ],
         },
@@ -192,7 +284,4 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-/* Optional: Additional styles */
-</style>
+<style scoped></style>
diff --git a/components/tabs/TeerDaysTab.vue b/components/tabs/TeerDaysTab.vue
index db91430..68d5a87 100644
--- a/components/tabs/TeerDaysTab.vue
+++ b/components/tabs/TeerDaysTab.vue
@@ -1,12 +1,15 @@
 <template>
   <div class="p-3">
-    <div class="mb-3">
+    <div class="flex mb-3 justify-between items-center">
       <button
         @click="eventBus.emit('toggleSidebar')"
         class="lg:hidden text-white focus:outline-none text-2xl"
       >
         ☰
       </button>
+      <div class="lg:hidden">
+        <WalletNumber />
+      </div>
     </div>
     <InfoBanner
       v-if="!accountStore.hasInjector"
@@ -663,6 +666,9 @@ import { teerdaysNetwork } from "~/lib/environmentConfig";
 import { Bond, PendingUnlock } from "~/lib/teerDays";
 import InfoBanner from "~/components/ui/InfoBanner.vue";
 import { formatBigDecimalBalance } from "~/helpers/numbers.ts";
+import HealthIndicator from "~/components/ui/HealthIndicator.vue";
+import TokenIndicator from "~/components/ui/TokenIndicator.vue";
+import WalletNumber from "~/components/ui/WalletIndicator.vue";
 
 const activeAccordion = ref(null);
 
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index e6e399c..f0578e1 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -13,7 +13,9 @@
       <div class="lg:hidden">
         <WalletIndicator />
       </div>
-      <TokenIndicator class="lg:hidden" />
+      <div class="lg:hidden">
+        <TokenIndicator />
+      </div>
     </div>
     <WarningBanner
       v-if="
diff --git a/components/ui/Sidebar.vue b/components/ui/Sidebar.vue
index 0f67698..5cd5503 100644
--- a/components/ui/Sidebar.vue
+++ b/components/ui/Sidebar.vue
@@ -243,7 +243,7 @@
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
+                  d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
                 />
               </svg>
 
@@ -377,7 +377,7 @@
           <div class="text-xs text-gray-500 mb-1">Connected with:</div>
           <div class="relative group">
             <div
-              class="flex items-center w-full rounded-md border border-gray-700 bg-gray-800 py-1.5 px-3 text-xs text-gray-400 hover:ring-1 hover:ring-incognitee-green focus-within:ring-1 focus-within:ring-incognitee-green"
+              class="flex cursor-pointer items-center w-full rounded-md border border-gray-700 bg-gray-800 py-1.5 px-3 text-xs text-gray-400 hover:ring-1 hover:ring-incognitee-green focus-within:ring-1 focus-within:ring-incognitee-green"
               @click="
                 () => {
                   emitEvent('addressClicked');
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a4527bd..d1fa131 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -90,7 +90,6 @@ export default defineNuxtConfig({
     "/teerdays-lp": { ssr: false },
     "/referral": { ssr: false },
     "/referraltc": { ssr: false },
-    "/faq": { ssr: false },
   },
   imports: {
     autoImport: false,