From 38593e24155ddaa16499b0c6a45a694e79525e4f Mon Sep 17 00:00:00 2001
From: brenzi <brenzi@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:04:29 +0100
Subject: [PATCH] modularize pages to components and introduce messaging app
 (#88)

* makw wallet a walletTab component

* fixes

* cleanup

* move notes to pinia store

* move note fetching back to index

* hotswapping to gov, swap, messaging

* make teerdays a self-sustained tab too

* directory structure refactoring

* messaging app works

* fixes
---
 .../{ui => overlays}/ChooseWalletOverlay.vue  |    6 +-
 .../{ui => overlays}/HealthDetailsOverlay.vue |   10 +-
 .../{ui => overlays}/NoteDetailsOverlay.vue   |   14 +-
 .../{ui => overlays}/ObtainTokenOverlay.vue   |    2 +-
 components/{ui => overlays}/OverlayDialog.vue |    2 +-
 components/{ui => overlays}/StatusOverlay.vue |    0
 pages/gov.vue => components/tabs/GovTab.vue   |    4 -
 components/tabs/MessagingTab.vue              |  296 +++
 pages/swap.vue => components/tabs/SwapTab.vue |    4 -
 .../tabs/TeerDaysTab.vue                      |  126 +-
 components/tabs/WalletTab.vue                 | 1666 ++++++++++++++
 components/ui/HealthIndicator.vue             |    2 +-
 components/ui/PrivateMessageHistory.vue       |  243 +++
 components/ui/PrivateTxHistory.vue            |  266 +--
 helpers/date.ts                               |    8 +-
 layouts/default.vue                           |  162 +-
 lib/notes.ts                                  |   26 +
 nuxt.config.ts                                |    1 -
 pages/index.vue                               | 1924 +++--------------
 pages/teerdays-lp.vue                         |    4 +-
 store/notes.ts                                |   40 +
 store/systemHealth.ts                         |    6 +-
 22 files changed, 2804 insertions(+), 2008 deletions(-)
 rename components/{ui => overlays}/ChooseWalletOverlay.vue (96%)
 rename components/{ui => overlays}/HealthDetailsOverlay.vue (94%)
 rename components/{ui => overlays}/NoteDetailsOverlay.vue (80%)
 rename components/{ui => overlays}/ObtainTokenOverlay.vue (97%)
 rename components/{ui => overlays}/OverlayDialog.vue (97%)
 rename components/{ui => overlays}/StatusOverlay.vue (100%)
 rename pages/gov.vue => components/tabs/GovTab.vue (96%)
 create mode 100644 components/tabs/MessagingTab.vue
 rename pages/swap.vue => components/tabs/SwapTab.vue (95%)
 rename pages/teerdays.vue => components/tabs/TeerDaysTab.vue (93%)
 create mode 100644 components/tabs/WalletTab.vue
 create mode 100644 components/ui/PrivateMessageHistory.vue
 create mode 100644 store/notes.ts

diff --git a/components/ui/ChooseWalletOverlay.vue b/components/overlays/ChooseWalletOverlay.vue
similarity index 96%
rename from components/ui/ChooseWalletOverlay.vue
rename to components/overlays/ChooseWalletOverlay.vue
index ec4612d..1a9ac0c 100644
--- a/components/ui/ChooseWalletOverlay.vue
+++ b/components/overlays/ChooseWalletOverlay.vue
@@ -95,10 +95,10 @@ import {
   connectExtension,
   extensionAccounts,
   injectorForAddress,
-} from "@/lib/signerExtensionUtils";
-import OverlayDialog from "@/components/ui/OverlayDialog.vue";
+} from "~/lib/signerExtensionUtils";
+import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
 import { defineProps, computed, ref, watch } from "vue";
-import { useAccount } from "@/store/account.ts";
+import { useAccount } from "~/store/account.ts";
 
 const accountStore = useAccount();
 const selectedExtensionAccount = ref("");
diff --git a/components/ui/HealthDetailsOverlay.vue b/components/overlays/HealthDetailsOverlay.vue
similarity index 94%
rename from components/ui/HealthDetailsOverlay.vue
rename to components/overlays/HealthDetailsOverlay.vue
index 17d5948..072f99b 100644
--- a/components/ui/HealthDetailsOverlay.vue
+++ b/components/overlays/HealthDetailsOverlay.vue
@@ -109,14 +109,14 @@
 </template>
 
 <script setup lang="ts">
-import OverlayDialog from "@/components/ui/OverlayDialog.vue";
+import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
 import { computed, defineProps, ref, watch } from "vue";
-import { Health, useSystemHealth } from "@/store/systemHealth";
+import { Health, useSystemHealth } from "~/store/systemHealth";
 import { useInterval } from "@vueuse/core";
 import { useRouter } from "vue-router";
-import { useIncognitee } from "@/store/incognitee.ts";
-import { chainConfigs } from "@/configs/chains.ts";
-import { shieldingTarget, incogniteeShard } from "@/lib/environmentConfig";
+import { useIncognitee } from "~/store/incognitee.ts";
+import { chainConfigs } from "~/configs/chains.ts";
+import { shieldingTarget, incogniteeShard } from "~/lib/environmentConfig";
 
 const router = useRouter();
 const systemHealth = useSystemHealth();
diff --git a/components/ui/NoteDetailsOverlay.vue b/components/overlays/NoteDetailsOverlay.vue
similarity index 80%
rename from components/ui/NoteDetailsOverlay.vue
rename to components/overlays/NoteDetailsOverlay.vue
index aa724c4..80af45a 100644
--- a/components/ui/NoteDetailsOverlay.vue
+++ b/components/overlays/NoteDetailsOverlay.vue
@@ -27,12 +27,12 @@
 </template>
 
 <script setup lang="ts">
-import OverlayDialog from "@/components/ui/OverlayDialog.vue";
+import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
 import { defineProps } from "vue";
-import { Note, NoteDirection } from "@/lib/notes";
-import { formatMoment, formatDate } from "@/helpers/date";
+import { Note, NoteDirection } from "~/lib/notes";
+import { formatDate } from "~/helpers/date";
 import { divideBigIntToFloat } from "~/helpers/numbers";
-import { useAccount } from "@/store/account.ts";
+import { useAccount } from "~/store/account.ts";
 
 const accountStore = useAccount();
 
@@ -46,8 +46,10 @@ const props = defineProps({
     required: true,
   },
   note: {
-    type: Note,
-    required: true,
+    type: Object,
+    required: false,
+    default: null,
+    validator: (value) => value === null || value instanceof Note,
   },
 });
 </script>
diff --git a/components/ui/ObtainTokenOverlay.vue b/components/overlays/ObtainTokenOverlay.vue
similarity index 97%
rename from components/ui/ObtainTokenOverlay.vue
rename to components/overlays/ObtainTokenOverlay.vue
index e6a3ba6..187f8fc 100644
--- a/components/ui/ObtainTokenOverlay.vue
+++ b/components/overlays/ObtainTokenOverlay.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import OverlayDialog from "@/components/ui/OverlayDialog.vue";
+import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
 import { defineProps } from "vue";
 
 const props = defineProps({
diff --git a/components/ui/OverlayDialog.vue b/components/overlays/OverlayDialog.vue
similarity index 97%
rename from components/ui/OverlayDialog.vue
rename to components/overlays/OverlayDialog.vue
index 49adedd..d7cc305 100644
--- a/components/ui/OverlayDialog.vue
+++ b/components/overlays/OverlayDialog.vue
@@ -71,7 +71,7 @@ import {
   TransitionRoot,
 } from "@headlessui/vue";
 import { defineProps } from "vue";
-import TransitionChildSootGlass from "@/components/ui/TransitionChildSootGlass.vue";
+import TransitionChildSootGlass from "~/components/ui/TransitionChildSootGlass.vue";
 
 const props = defineProps({
   close: {
diff --git a/components/ui/StatusOverlay.vue b/components/overlays/StatusOverlay.vue
similarity index 100%
rename from components/ui/StatusOverlay.vue
rename to components/overlays/StatusOverlay.vue
diff --git a/pages/gov.vue b/components/tabs/GovTab.vue
similarity index 96%
rename from pages/gov.vue
rename to components/tabs/GovTab.vue
index b55ce10..e0595c5 100644
--- a/pages/gov.vue
+++ b/components/tabs/GovTab.vue
@@ -43,10 +43,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-// Import your components and add your setup logic here
-</script>
-
 <style scoped>
 h1 {
   font-size: 2em; /* Adjust as needed */
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
new file mode 100644
index 0000000..1ab16d9
--- /dev/null
+++ b/components/tabs/MessagingTab.vue
@@ -0,0 +1,296 @@
+<template>
+  <form class="mt-5" @submit.prevent="submitSendForm">
+    <div class="flex flex-col">
+      <label
+        for="recipientAddress"
+        class="text-sm font-medium leading-6 text-white text-left"
+        >Recipient</label
+      >
+      <div class="relative flex items-center rounded-lg">
+        <input
+          id="recipientAddress"
+          v-model="recipientAddress"
+          type="text"
+          required
+          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
+          style="border-color: #24ad7c"
+          placeholder="Recipient"
+        />
+        <div class="absolute right-3 flex space-x-2">
+          <div @click="openScanOverlay" class="cursor-pointer">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="h-6 w-6 text-white"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+              />
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Messages -->
+    <div class="flex flex-col">
+      <label
+        for="paymentNote"
+        class="text-sm font-medium leading-6 text-white text-left"
+        >Note</label
+      >
+      <div class="relative flex items-center rounded-lg">
+        <textarea
+          id="messages"
+          v-model="sendPrivateNote"
+          rows="2"
+          ref="messageTextarea"
+          name="messages"
+          placeholder="Enter a private note for the recipient"
+          :maxlength="140"
+          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
+        ></textarea>
+      </div>
+    </div>
+
+    <div class="mt-8 bottom-0 left-0 w-full bg-gray-800">
+      <button
+        type="submit"
+        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+      >
+        Send
+      </button>
+    </div>
+    <div>{{ txStatus }}</div>
+  </form>
+  <PrivateMessageHistory :show="true" />
+  <!-- Scan QR -->
+  <OverlayDialog
+    :show="showScanOverlay"
+    :close="closeScanOverlay"
+    title="Scan recipient's QR code"
+  >
+    <div class="mt-6 qrcode-container">
+      <qrcode-stream @detect="onDecode"></qrcode-stream>
+    </div>
+  </OverlayDialog>
+</template>
+
+<script setup lang="ts">
+import PrivateMessageHistory from "~/components/ui/PrivateMessageHistory.vue";
+import { incogniteeSidechain } from "~/lib/environmentConfig";
+import { formatDecimalBalance } from "~/helpers/numbers";
+import { INCOGNITEE_TX_FEE } from "~/configs/incognitee";
+import { Health, useSystemHealth } from "~/store/systemHealth";
+import { TypeRegistry, u32 } from "@polkadot/types";
+import { defineProps, ref, watch } from "vue";
+import { useAccount } from "~/store/account";
+import { useIncognitee } from "~/store/incognitee";
+import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
+import { QrcodeStream } from "vue-qrcode-reader";
+import { ApiPromise } from "@polkadot/api";
+import { useInterval } from "@vueuse/core";
+
+const recipientAddress = ref("");
+const sendPrivateNote = ref("");
+const txStatus = ref("");
+const accountStore = useAccount();
+const incogniteeStore = useIncognitee();
+const systemHealth = useSystemHealth();
+
+const pollCounter = useInterval(2000);
+watch(pollCounter, async () => {
+  console.debug("polling for new incognitee notes");
+  await props.updateNotes();
+});
+const submitSendForm = () => {
+  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
+    alert(
+      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
+    );
+    return;
+  }
+  sendPrivately();
+};
+
+const sendPrivately = async () => {
+  console.log("sending message on incognitee");
+  txStatus.value = "⌛ sending message privately on incognitee";
+  const amount = BigInt(0);
+  const account = accountStore.account;
+  const encoder = new TextEncoder();
+  const byteLength = encoder.encode(sendPrivateNote.value).length;
+  // fixme: https://github.com/encointer/encointer-js/issues/123
+  if (byteLength > 161) {
+    alert(
+      "Note is too long when encoded to UTF-8. Please keep it under 162 bytes.",
+    );
+    return;
+  }
+  const note = sendPrivateNote.value.length > 0 ? sendPrivateNote.value : null;
+  const nonce = new u32(
+    new TypeRegistry(),
+    accountStore.nonce[incogniteeSidechain.value],
+  );
+  console.log(
+    `sending message from ${account.address} privately to ${recipientAddress.value} with nonce ${nonce} and note: ${note}`,
+  );
+
+  await incogniteeStore.api
+    .trustedBalanceTransfer(
+      account,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      accountStore.getAddress,
+      recipientAddress.value,
+      amount,
+      note,
+      {
+        signer: accountStore.injector?.signer,
+        nonce: nonce,
+      },
+    )
+    .then((result) => handleTopResult(result, "😀 message sent successfully"))
+    .catch((err) => handleTopError(err));
+  //todo: manually inc nonce locally avoiding clashes with fetchIncogniteeBalance
+};
+
+const handleTopResult = (result, successMsg?) => {
+  console.log("TOP result: " + result);
+  if (result) {
+    if (result.status.isInSidechainBlock) {
+      if (successMsg) {
+        txStatus.value = successMsg;
+      } else {
+        txStatus.value =
+          "😀 included in sidechain block: " + result.status.asInSidechainBlock;
+      }
+      //update history to see successfuly action immediately
+      props.updateNotes();
+      return;
+    }
+    if (result.status.isInvalid) {
+      txStatus.value = "😞 Invalid (unspecified reason)";
+      return;
+    }
+  }
+  console.error(`unknown result: ${result}`);
+  txStatus.value = "😞 Unknown Result";
+};
+
+const handleTopError = (err) => {
+  console.error(`error: ${err}`);
+  txStatus.value = `😞 Submission Failed: ${err}`;
+};
+
+const scanResult = ref("No QR code data yet");
+const onDecode = (decodeResult) => {
+  console.log("QR scan decoded: " + decodeResult[0].rawValue);
+  scanResult.value = decodeResult[0].rawValue;
+  recipientAddress.value = decodeResult[0].rawValue;
+  closeScanOverlay();
+};
+const showScanOverlay = ref(false);
+const openScanOverlay = () => {
+  scanResult.value = "No QR code data yet";
+  showScanOverlay.value = true;
+};
+const closeScanOverlay = () => {
+  console.debug("closeScanOverlay");
+  showScanOverlay.value = false;
+};
+
+const props = defineProps({
+  isMobile: {
+    type: Boolean,
+    required: true,
+  },
+  updateNotes: {
+    type: Function,
+    required: true,
+  },
+});
+</script>
+
+<style scoped>
+.border-green-500 {
+  border-color: #24ad7c;
+}
+
+.bg-gray-800 {
+  background-color: #1f2937;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.truncate-input {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+h1 {
+  font-size: 1em; /* Adjust as needed */
+  font-weight: bold; /* Makes the text bold */
+  color: #999; /* Change color as needed */
+  text-align: center; /* Centers the text */
+  margin-bottom: 20px; /* Adds space below the heading */
+}
+
+hr {
+  border: none;
+  border-top: 1px #222; /* Change color as needed */
+  color: #111; /* Change color as needed */
+  background-color: #333; /* Change color as needed */
+  height: 1px; /* Adjust as needed */
+}
+
+.qrcode-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.form-container input {
+  background-color: #333;
+  color: #fff; /* You might want to change the text color to ensure it's readable against the dark background */
+}
+
+.form-container input#amount {
+  font-size: 2em; /* Make the font size twice as large */
+  text-align: center; /* Center the text */
+  width: 50%; /* Reduce the width by 50% */
+}
+
+.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>
diff --git a/pages/swap.vue b/components/tabs/SwapTab.vue
similarity index 95%
rename from pages/swap.vue
rename to components/tabs/SwapTab.vue
index 22177a6..d10e4a4 100644
--- a/pages/swap.vue
+++ b/components/tabs/SwapTab.vue
@@ -32,10 +32,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-// Import your components and add your setup logic here
-</script>
-
 <style scoped>
 h1 {
   font-size: 2em; /* Adjust as needed */
diff --git a/pages/teerdays.vue b/components/tabs/TeerDaysTab.vue
similarity index 93%
rename from pages/teerdays.vue
rename to components/tabs/TeerDaysTab.vue
index 1b5fd25..0218d42 100644
--- a/pages/teerdays.vue
+++ b/components/tabs/TeerDaysTab.vue
@@ -631,24 +631,24 @@ import { ApiPromise, WsProvider } from "@polkadot/api";
 import { cryptoWaitReady } from "@polkadot/util-crypto";
 import { onMounted, onUnmounted, computed, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import { useAccount } from "@/store/account.ts";
-import { formatDecimalBalance } from "@/helpers/numbers";
-import { useSystemHealth } from "@/store/systemHealth.ts";
-import { ChainId, chainConfigs } from "@/configs/chains.ts";
+import { useAccount } from "~/store/account.ts";
+import { formatDecimalBalance } from "~/helpers/numbers";
+import { useSystemHealth } from "~/store/systemHealth.ts";
+import { ChainId, chainConfigs } from "~/configs/chains.ts";
 import { useInterval } from "@vueuse/core";
 import { XMarkIcon } from "@heroicons/vue/20/solid";
-import { eventBus } from "@/helpers/eventBus";
-import { loadEnv, integriteeNetwork, isLive } from "@/lib/environmentConfig";
-import { Bond, PendingUnlock } from "@/lib/teerDays";
+import { eventBus } from "~/helpers/eventBus";
+import { loadEnv, integriteeNetwork, isLive } from "~/lib/environmentConfig";
+import { Bond, PendingUnlock } from "~/lib/teerDays";
 import {
   extensionAccounts,
   connectExtension,
   injectorForAddress,
-} from "@/lib/signerExtensionUtils";
+} from "~/lib/signerExtensionUtils";
 import { nextTick } from "vue";
-import ChooseWalletOverlay from "~/components/ui/ChooseWalletOverlay.vue";
+import ChooseWalletOverlay from "~/components/overlays/ChooseWalletOverlay.vue";
 import InfoBanner from "~/components/ui/InfoBanner.vue";
-import { formatBigDecimalBalance } from "@/helpers/numbers.ts";
+import { formatBigDecimalBalance } from "~/helpers/numbers.ts";
 
 const activeAccordion = ref(null);
 
@@ -677,8 +677,8 @@ const checkIfMobile = () => {
 };
 const dropSubscriptions = async () => {
   console.log("dropping subscriptions");
-  api?.disconnect();
-  api = null;
+  integriteeNetworkApi?.disconnect();
+  integriteeNetworkApi = null;
   accountStore.setInjector(null);
   isFetchingTeerBalance.value = false;
 };
@@ -699,7 +699,7 @@ const onExtensionAccountChange = async (selectedAddress) => {
     console.log("skipping api init. no address");
     return;
   }
-  await api.query.system.account(
+  await integriteeNetworkApi.query.system.account(
     accountStore.getAddress,
     ({
       data: {
@@ -719,7 +719,7 @@ const onExtensionAccountChange = async (selectedAddress) => {
       isFetchingTeerBalance.value = false;
     },
   );
-  await api.query.teerDays.teerDayBonds(
+  await integriteeNetworkApi.query.teerDays.teerDayBonds(
     accountStore.getAddress,
     ({ value: bond }) => {
       if (bond.value) {
@@ -748,7 +748,7 @@ const onExtensionAccountChange = async (selectedAddress) => {
       }
     },
   );
-  await api.query.teerDays.pendingUnlock(
+  await integriteeNetworkApi.query.teerDays.pendingUnlock(
     accountStore.getAddress,
     ({ value: timestamp_amount }) => {
       console.log("TEER pending unlock:" + timestamp_amount);
@@ -826,17 +826,17 @@ const connect = () => {
     });
 };
 
-let api: ApiPromise | null = null;
+let integriteeNetworkApi: ApiPromise | null = null;
 
 const subscribeToTeerDayStats = async () => {
   const wsProvider = new WsProvider(chainConfigs[integriteeNetwork.value].api);
   console.log(
     "trying to init api at " + chainConfigs[integriteeNetwork.value].api,
   );
-  api = await ApiPromise.create({ provider: wsProvider });
-  accountStore.setDecimals(Number(api.registry.chainDecimals));
-  accountStore.setSS58Format(Number(api.registry.chainSS58));
-  accountStore.setSymbol(String(api.registry.chainTokens));
+  integriteeNetworkApi = await ApiPromise.create({ provider: wsProvider });
+  accountStore.setDecimals(Number(integriteeNetworkApi.registry.chainDecimals));
+  accountStore.setSS58Format(Number(integriteeNetworkApi.registry.chainSS58));
+  accountStore.setSymbol(String(integriteeNetworkApi.registry.chainTokens));
   if (accountStore.hasInjector) {
     router.push({
       query: { address: accountStore.getAddress },
@@ -845,45 +845,47 @@ const subscribeToTeerDayStats = async () => {
   console.log("api initialized");
   allBonds.value = [];
   cryptoWaitReady().then(() => {
-    api.query.teerDays.teerDayBonds.entries().then((entries) => {
-      entries.forEach(([key, maybeBond]) => {
-        //console.debug(key.args + " " + maybeBond);
-        let account = key.args[0];
-        let lastUpdated = new Date(0);
-        let bond = maybeBond.unwrap();
-        lastUpdated.setUTCMilliseconds(bond.lastUpdated.toNumber());
-        let mybond = new Bond(
-          bond.value / Math.pow(10, accountStore.decimals),
-          lastUpdated,
-          bond.accumulatedTokentime /
-            Math.pow(10, accountStore.decimals) /
-            86400 /
-            1000,
+    integriteeNetworkApi.query.teerDays.teerDayBonds
+      .entries()
+      .then((entries) => {
+        entries.forEach(([key, maybeBond]) => {
+          //console.debug(key.args + " " + maybeBond);
+          let account = key.args[0];
+          let lastUpdated = new Date(0);
+          let bond = maybeBond.unwrap();
+          lastUpdated.setUTCMilliseconds(bond.lastUpdated.toNumber());
+          let mybond = new Bond(
+            bond.value / Math.pow(10, accountStore.decimals),
+            lastUpdated,
+            bond.accumulatedTokentime /
+              Math.pow(10, accountStore.decimals) /
+              86400 /
+              1000,
+          );
+          mybond.updateTeerDays();
+          //console.debug(mybond);
+          allBonds.value.push([
+            account,
+            mybond.teerBonded,
+            mybond.accumulatedTeerDays,
+            42,
+          ]);
+        });
+        // sort descending by value
+        allBonds.value = allBonds.value.sort((a, b) => b[2] - a[2]);
+        //console.debug(allBonds.value);
+        summaryTeerBonded.value = allBonds.value.reduce(
+          (acc, val) => acc + val[1],
+          0,
+        );
+        summaryTeerDays.value = allBonds.value.reduce(
+          (acc, val) => acc + val[2],
+          0,
         );
-        mybond.updateTeerDays();
-        //console.debug(mybond);
-        allBonds.value.push([
-          account,
-          mybond.teerBonded,
-          mybond.accumulatedTeerDays,
-          42,
-        ]);
+        summaryHolders.value = allBonds.value.length;
+        //console.log(summaryHolders.value);
       });
-      // sort descending by value
-      allBonds.value = allBonds.value.sort((a, b) => b[2] - a[2]);
-      //console.debug(allBonds.value);
-      summaryTeerBonded.value = allBonds.value.reduce(
-        (acc, val) => acc + val[1],
-        0,
-      );
-      summaryTeerDays.value = allBonds.value.reduce(
-        (acc, val) => acc + val[2],
-        0,
-      );
-      summaryHolders.value = allBonds.value.length;
-      //console.log(summaryHolders.value);
-    });
-    api.rpc.chain.subscribeNewHeads((lastHeader) => {
+    integriteeNetworkApi.rpc.chain.subscribeNewHeads((lastHeader) => {
       systemHealth.observeIntegriteeBlockNumber(lastHeader.number.toNumber());
     });
   });
@@ -918,7 +920,7 @@ const bondAmount = () => {
   openStatusOverlay();
   web3FromAddress(accountStore.getAddress).then((injector) => {
     if (currentBond.value?.getTeerBonded() > 0) {
-      api.tx.teerDays
+      integriteeNetworkApi.tx.teerDays
         .bondExtra(amount)
         .signAndSend(
           accountStore.getAddress,
@@ -927,7 +929,7 @@ const bondAmount = () => {
         )
         .catch(txErrHandlerIntegritee);
     } else {
-      api.tx.teerDays
+      integriteeNetworkApi.tx.teerDays
         .bond(amount)
         .signAndSend(
           accountStore.getAddress,
@@ -947,7 +949,7 @@ const unbondAmount = () => {
   txStatus.value = "⌛ Unbonding. Please sign the transaction in your wallet.";
   openStatusOverlay();
   web3FromAddress(accountStore.getAddress).then((injector) => {
-    api.tx.teerDays
+    integriteeNetworkApi.tx.teerDays
       .unbond(amount)
       .signAndSend(
         accountStore.getAddress,
@@ -965,7 +967,7 @@ const withdrawUnbonded = () => {
     "⌛ Withdrawing. Please sign the transaction in your wallet.";
   openStatusOverlay();
   web3FromAddress(accountStore.getAddress).then((injector) => {
-    api.tx.teerDays
+    integriteeNetworkApi.tx.teerDays
       .withdrawUnbonded()
       .signAndSend(
         accountStore.getAddress,
@@ -1024,7 +1026,7 @@ const txResHandlerIntegritee = ({ events = [], status, txHash }) => {
       // Decode the error
       if (dispatchError.isModule) {
         const mod = dispatchError.asModule;
-        const error = api.registry.findMetaError(
+        const error = integriteeNetworkApi.registry.findMetaError(
           new Uint8Array([
             mod.index.toNumber(),
             bnFromHex(mod.error.toHex().slice(0, 4)).toNumber(),
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
new file mode 100644
index 0000000..0954824
--- /dev/null
+++ b/components/tabs/WalletTab.vue
@@ -0,0 +1,1666 @@
+<template>
+  <WarningBanner
+    v-if="
+      isProd && accountStore.getAddress !== 'none' && !accountStore.hasInjector
+    "
+    :isMobile="isMobile"
+    textMobile="This is a temporary voucher with low security. Please use a <a href='https://docs.integritee.network/2-integritee-network/2.4-teer-token/2.4.1-how-to-set-up-a-wallet'>secure wallet</a>"
+    textDesktop="You are using a temporary voucher with low security. Everyone who knows your url (including the person who may have shared this url with you) could spend these funds. Please transfer funds to a <a href='https://docs.integritee.network/2-integritee-network/2.4-teer-token/2.4.1-how-to-set-up-a-wallet'>secure wallet</a>"
+  />
+  <div v-else>
+    <CampaignBanner
+      v-if="enableActions"
+      :onClick="openGuessTheNumberOverlay"
+      :isMobile="isMobile"
+      textMobile="Guess-The-Number"
+      textDesktop="Join the Guess-The-Number Campaign and win some juicy prizes."
+    />
+  </div>
+
+  <InfoBanner
+    v-if="!enableActions"
+    :isMobile="isMobile"
+    textMobile="This page is not yet live for mainnet"
+    textDesktop="This page is not yet live for mainnet. please visit <a href='https://try.incognitee.io'>try.incognitee.io</a> for the latest version of our paseo testnet wallet"
+  />
+
+  <InfoBanner
+    v-if="!enableActions"
+    :isMobile="isMobile"
+    textMobile="Looking for <a href='/teerdays'>TEERdays</a>?"
+    textDesktop="If you are looking for our TEERDAYS page, please follow <a href='/teerdays'>this link</a>"
+  />
+
+  <div class="mt-4"></div>
+
+  <NetworkSelector
+    :openAssetsInfo="openAssetsInfo"
+    :selectedNetwork="shieldingTarget"
+  />
+
+  <div>
+    <PublicPrivateBalanceSwitcher
+      :selectTab="selectTab"
+      :currentTab="currentTab"
+    />
+
+    <BalanceInteractorContainer>
+      <div v-if="currentTab === 'public'">
+        <!-- Public Balance Content -->
+
+        <div class="text-white mb-6 text-center">
+          <div class="">
+            <h3 class="text-sm mb-3">Public Transferable Balance</h3>
+            <div v-if="isFetchingShieldingTargetBalance" class="spinner"></div>
+            <div class="text-4xl font-semibold" v-else>
+              {{
+                formatDecimalBalance(
+                  accountStore.getDecimalBalanceTransferable(shieldingTarget),
+                )
+              }}
+              <span class="text-sm font-semibold">{{
+                accountStore.getSymbol
+              }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="mt-5">
+          <div
+            class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
+          >
+            <div
+              class="flex flex-col items-center text-center cursor-pointer"
+              @click="openShieldOverlay"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6 mx-auto mb-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
+              </svg>
+              <p class="text-xs">Shield</p>
+            </div>
+            <div
+              class="flex flex-col items-center text-center cursor-pointer"
+              @click="openFaucetOverlay"
+              v-if="faucetUrl"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6 mx-auto mb-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                />
+              </svg>
+              <p class="text-xs">Faucet</p>
+            </div>
+            <div
+              class="flex flex-col items-center text-center cursor-pointer"
+              @click="openObtainTokenOverlay"
+              v-else
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6 mx-auto mb-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                />
+              </svg>
+              <p class="text-xs">Get {{ accountStore.getSymbol }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <!-- Private Balance Content -->
+        <div class="text-white mb-6 text-center">
+          <h3 class="text-sm mb-3">
+            Private Balance
+            <span @click="openPrivacyInfo" class="cursor-pointer">ⓘ</span>
+          </h3>
+          <div v-if="isFetchingIncogniteeBalance" class="spinner"></div>
+          <div v-if="disableGetter">
+            getter disabled. please reconnect your account and sign the getter
+            request in your extension
+          </div>
+          <div
+            v-if="!isFetchingIncogniteeBalance && !disableGetter"
+            class="text-4xl font-semibold"
+          >
+            {{ accountStore.formatBalanceFree(incogniteeSidechain) }}
+            <span class="text-sm font-semibold">{{
+              accountStore.getSymbol
+            }}</span>
+          </div>
+        </div>
+        <div class="mt-5">
+          <div
+            class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
+          >
+            <div
+              class="flex flex-col items-center text-center cursor-pointer"
+              @click="openPrivateSendOverlay"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6 mx-auto mb-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
+                />
+              </svg>
+              <p class="text-xs">Send</p>
+            </div>
+
+            <div
+              class="flex flex-col items-center text-center cursor-pointer"
+              @click="openReceiveOverlay"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6 mx-auto mb-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                />
+              </svg>
+              <p class="text-xs">Receive</p>
+            </div>
+
+            <div
+              class="flex flex-col items-center text-center cursor-pointer"
+              @click="openUnshieldOverlay"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6 mx-auto mb-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                />
+              </svg>
+              <p class="text-xs">Unshield</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BalanceInteractorContainer>
+
+    <PrivateTxHistory
+      :show="currentTab === 'private'"
+      :fetchOlderBucket="props.fetchOlderBucket"
+    />
+  </div>
+
+  <!-- Assets Info -->
+  <OverlayDialog
+    :show="showAssetsInfo"
+    :close="closeAssetsInfo"
+    title="Other Assets"
+  >
+    <div class="mt-2">
+      <p class="text-sm text-gray-400 mt-4 text-left">
+        Incognitee is capable of shielding any fungible asset on any
+        substrate-based chain. Stay tuned for dedicated deployments for DOT,
+        KSM, USDC, USDT and others
+      </p>
+      <p class="text-sm text-gray-400 text-left my-4">
+        With further extension, Incognitee will be able to shield BTC, ETH and
+        any other token whose protocol supports light clients
+      </p>
+    </div>
+    <div class="w-full mt-8 bg-gray-800">
+      <button
+        type="button"
+        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+        @click="closeAssetsInfo"
+      >
+        Got it!
+      </button>
+    </div>
+  </OverlayDialog>
+
+  <!-- Privacy Info -->
+  <OverlayDialog
+    :show="showPrivacyInfo"
+    :close="closePrivacyInfo"
+    title="On Privacy"
+  >
+    <div class="mt-2">
+      <p class="text-sm text-gray-400 mt-4 text-justify">
+        Incognitee enhances your privacy while dealing with digital assets. But
+        what does privacy mean and how does incognitee improve privacy?
+      </p>
+      <p class="text-sm text-gray-400 text-justify my-4">
+        First, let's explore why digital assets are generally
+        <b>not</b> private. When dealing with crypto assets, your account is a
+        pseudonym on a public ledger, much like a bank account number. Every
+        single transaction this account does will be stored publicly forever and
+        you have no right for deletion of the trace you left. If, at a certain
+        point in time your pseudonym can be linked to your identity - i.e.
+        because you send tokens to someone else - your entire behavioral history
+        is revealed as is your balance.
+      </p>
+      <p class="text-sm text-gray-400 text-justify my-4">
+        <NuxtLink to="https://incognitee.io" class="color_blue"
+          >Incognitee
+        </NuxtLink>
+        is a privacy enhancing technology that allows you to shield your assets
+        and transfer them privately. This means that you can send tokens to
+        someone else without revealing your balance or transaction history. The
+        recipient will not be able to see your balance or transaction history
+        either. This is achieved by using a technology called
+        <NuxtLink
+          to="https://docs.integritee.network/2-integritee-network/2.7-privacy-technology-trusted-execution-environments"
+          class="color_blue"
+          >trusted execution environments (TEE)
+        </NuxtLink>
+        . The TEEs we use are a hardware feature of server CPU's called
+        <i>Intel SGX</i>. In addition, the
+        <NuxtLink
+          to="https://docs.integritee.network/2-integritee-network"
+          class="color_blue"
+          >Integritee Network
+        </NuxtLink>
+        , a Polkadot parachain, performs independent, decentralized remote
+        attestation of TEEs. Moreover, it gives finality to Incognitee sidechain
+        blocks.
+      </p>
+      <p class="text-sm text-gray-400 mt-4 text-justify">
+        Incognitee is a layer 2 solution, maintaining a private ledger secured
+        by TEE. All your transactions are confidential, only known to and the
+        person your transacting with. Sender, recipient and amount are invisible
+        to the public and even to the operators of Incognitee infrastructure.
+      </p>
+      <p class="text-sm text-gray-400 mt-4 text-justify">
+        For maximal privacy, we suggest to shield your assets to incognitee and
+        from then on transact them on incognitee only. If you need to unshield
+        back to L1, you can still benefit from k-anonymity: the public just sees
+        that someone out of <i>k</i> individuals is the originator of an
+        unshielding event. If <i>k</i> is large enough, you can plausibly deny
+        it was you. You can influence the size of <i>k</i> by choosing popular
+        amounts and timing.
+      </p>
+    </div>
+    <div class="mt-5 sm:mt-6">
+      <button
+        type="button"
+        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+        @click="closePrivacyInfo"
+      >
+        Got it!
+      </button>
+    </div>
+  </OverlayDialog>
+
+  <!-- Shielding -->
+  <OverlayDialog
+    :show="showShieldOverlay"
+    :close="closeShieldOverlay"
+    title="Shielding"
+  >
+    <p class="text-sm text-gray-400 text-left my-4">
+      Shielding is the process of moving naked, publicly visible balance on L1
+      to your private wallet on Incognitee.
+    </p>
+    <div v-if="shieldingLimit < Infinity">
+      <p class="text-sm text-gray-400 text-left my-4">
+        During beta phase, you can only shield up to
+        {{ shieldingLimit }} {{ accountStore.getSymbol }} which includes your
+        current private balance on incognitee.
+      </p>
+    </div>
+    <form
+      @submit.prevent="submitShieldForm"
+      class="flex-grow flex flex-col justify-between"
+    >
+      <div>
+        <div class="flex justify-between items-center mt-4">
+          <label
+            for="sendAmount"
+            class="text-sm font-medium leading-6 text-white"
+            >{{ accountStore.getSymbol }} Amount</label
+          >
+
+          <span class="text-xs text-gray-400"
+            >Available for shielding: {{ computedShieldingMax.toFixed(3) }}
+            {{ accountStore.getSymbol }}</span
+          >
+        </div>
+        <input
+          id="shieldAmount"
+          v-model="shieldAmount"
+          type="number"
+          step="1"
+          :min="1"
+          :max="computedShieldingMax"
+          required
+          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
+          style="border-color: #24ad7c"
+        />
+        <div class="text-right">
+          <span class="text-xs text-gray-400"
+            >Fee: ~16 m{{ accountStore.getSymbol }} for L1,
+            {{ formatDecimalBalance(INCOGNITEE_SHIELDING_FEE_FRACTION * 100) }}%
+            for Incognitee</span
+          >
+        </div>
+      </div>
+      <div class="bottom-0 left-0 w-full mt-8 bg-gray-800">
+        <button
+          type="submit"
+          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+          @click="submitShieldForm"
+        >
+          Shield
+        </button>
+      </div>
+    </form>
+  </OverlayDialog>
+
+  <!-- Faucet -->
+  <OverlayDialog
+    :show="showFaucetOverlay"
+    :close="closeFaucetOverlay"
+    title="Drip Faucet"
+  >
+    <p class="text-sm text-gray-400 text-left my-4">
+      The Paseo Faucet grants you PAS tokens every day. Just copy-paste your
+      address and solve a CAPTCHA to get free PAS tokens
+    </p>
+
+    <div class="flex flex-col mt-5">
+      <div class="relative flex items-center rounded-lg">
+        <input
+          id="accountAddress"
+          type="text"
+          :value="accountStore.getAddress"
+          readonly
+          class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
+          style="border-color: #24ad7c"
+        />
+        <div class="absolute right-3 flex space-x-2">
+          <div @click="copyOwnAddressToClipboard" class="cursor-pointer">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-5 sm:mt-6">
+      <a :href="faucetUrl" target="_blank">
+        <button
+          type="button"
+          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-3 mt-8 text-sm font-semibold text-white shadow-sm"
+        >
+          Get free PAS tokens from faucet
+        </button>
+      </a>
+    </div>
+  </OverlayDialog>
+
+  <ObtainTokenOverlay
+    :withdraw-to-address="accountStore.getAddress"
+    :token-symbol="accountStore.getSymbol"
+    :close="closeObtainTokenOverlay"
+    :show="showObtainTokenOverlay"
+  />
+
+  <!-- Unshield -->
+  <OverlayDialog
+    :show="showUnshieldOverlay && !showScanOverlay"
+    :close="closeUnshieldOverlay"
+    title="Unshield"
+  >
+    <p class="text-sm text-gray-400 text-left my-4">
+      Unshielding is the process of moving funds from your private balance on
+      Incognitee to publicly visible (naked) L1.
+    </p>
+    <div v-if="shieldingLimit < Infinity">
+      <p class="text-sm text-gray-400 text-left my-4">
+        During beta phase, you can only shield up to
+        {{ shieldingLimit }} {{ accountStore.getSymbol }} which includes your
+        current private balance on incognitee.
+      </p>
+    </div>
+    <form class="mt-5" @submit.prevent="submitUnshieldForm">
+      <div class="flex flex-col">
+        <label
+          for="recipientAddress"
+          class="text-sm font-medium leading-6 text-white text-left"
+          >Recipient</label
+        >
+        <div class="relative flex items-center rounded-lg">
+          <div class="absolute left-3 flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="h-6 w-6 text-white"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M11.9889 0L0.0222883 5.99115L0 18.0089L12.0111 24L23.9778 18.0089L24 5.99115L11.9889 0ZM11.9055 2.93685L15.012 4.49375V7.60754L11.9055 9.16444L8.79902 7.60754V4.49375L11.9055 2.93685ZM5.66099 6.0491L8.76754 7.606V10.7198L5.66099 12.2767L8.76749 13.8336V16.9489L5.66093 18.5058L2.55438 16.9489V13.8336L5.66087 12.2767L2.55438 10.7198V7.606L5.66087 6.0491H5.66099ZM18.1278 6.0491L21.2343 7.606V10.7198L18.1279 12.2767L21.2344 13.8336V16.9489L18.1279 18.5058L15.0214 16.9489V13.8336L18.1279 12.2767L15.0214 10.7198V7.606L18.1278 6.0491ZM11.9055 9.16928L15.012 10.7262V13.84L11.913 15.3937L15.012 16.9457V20.0611L11.9055 21.618L8.79902 20.0611V16.9457L11.898 15.3937L8.79902 13.84V10.7262L11.9055 9.16928H11.9055Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+          <input
+            id="recipientAddress"
+            v-model="recipientAddress"
+            type="text"
+            required
+            placeholder="Recipient"
+            class="w-full text-sm rounded-lg flex-grow pl-12 py-2 pr-20 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
+            style="border-color: #24ad7c"
+          />
+          <div class="absolute right-3 flex space-x-2">
+            <div @click="setRecipientAddressToSelf" class="cursor-pointer">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="h-6 w-6 text-white"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+                />
+              </svg>
+            </div>
+            <div @click="openScanOverlay" class="cursor-pointer">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="h-6 w-6 text-white"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class="text-sm text-gray-400 text-left mt-5">
+        For optimal k-anonymity, we advise you to unshield either exactly 10 or
+        100
+        {{ accountStore.getSymbol }} at the time. In the future we will provide
+        a score including timing and popular amounts to enhance unlinkability of
+        your actions.
+      </p>
+
+      <div class="flex justify-between items-center mt-5">
+        <label
+          for="unshieldAmount"
+          class="text-sm font-medium leading-6 text-white"
+          >{{ accountStore.getSymbol }} Amount</label
+        >
+
+        <span class="text-xs text-gray-400"
+          >Available private balance:
+          {{ accountStore.formatBalanceFree(incogniteeSidechain) }}</span
+        >
+      </div>
+      <input
+        id="unshieldAmount"
+        v-model="unshieldAmount"
+        type="number"
+        step="0.1"
+        :min="1.1"
+        :max="
+          Math.min(
+            accountStore.getDecimalBalanceFree(incogniteeSidechain) -
+              accountStore.getDecimalExistentialDeposit(incogniteeSidechain) -
+              0.1,
+            shieldingLimit,
+          )
+        "
+        required
+        class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
+        style="border-color: #24ad7c"
+      />
+      <!-- Fee description -->
+      <div class="text-right">
+        <span class="text-xs text-gray-400"
+          >Fee: {{ formatDecimalBalance(INCOGNITEE_UNSHIELDING_FEE) }}
+          {{ accountStore.getSymbol }} for Incognitee</span
+        >
+      </div>
+
+      <div class="mt-8 w-full bg-gray-800">
+        <button
+          type="submit"
+          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+        >
+          Unshield
+        </button>
+      </div>
+    </form>
+  </OverlayDialog>
+
+  <!-- Receive -->
+  <OverlayDialog
+    :show="showReceiveOverlay"
+    :close="closeReceiveOverlay"
+    title="Receive"
+  >
+    <div class="mt-5">
+      <p class="text-sm text-gray-400 text-left my-4">
+        Share your address with the sender. You can either have them scan this
+        QR code or send them a private message.
+      </p>
+    </div>
+    <div class="mt-5 qrcode-container">
+      <qrcode :value="accountStore.getAddress"></qrcode>
+    </div>
+
+    <div class="flex flex-col mt-5">
+      <div
+        class="w-full mt-5 mb-2 text-sm font-medium leading-6 text-white font-semibold"
+      >
+        Your address:
+      </div>
+      <div class="relative flex items-center rounded-lg">
+        <input
+          id="accountAddress"
+          type="text"
+          :value="accountStore.getAddress"
+          readonly
+          class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
+          style="border-color: #24ad7c"
+        />
+        <div class="absolute right-3 flex space-x-2">
+          <div @click="copyOwnAddressToClipboard" class="cursor-pointer">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </OverlayDialog>
+
+  <!-- Send Privately -->
+  <OverlayDialog
+    :show="showPrivateSendOverlay && !showScanOverlay"
+    :close="closePrivateSendOverlay"
+    title="Send Privately"
+  >
+    <div class="mt-5">
+      <p class="text-sm text-gray-400 text-left my-4">
+        Sending privately means that only you and the recipient know who sent
+        how much to whom.
+      </p>
+    </div>
+    <form class="mt-5" @submit.prevent="submitSendForm">
+      <div class="flex flex-col">
+        <label
+          for="recipientAddress"
+          class="text-sm font-medium leading-6 text-white text-left"
+          >Recipient</label
+        >
+        <div class="relative flex items-center rounded-lg">
+          <input
+            id="recipientAddress"
+            v-model="recipientAddress"
+            type="text"
+            required
+            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
+            style="border-color: #24ad7c"
+            placeholder="Recipient"
+          />
+          <div class="absolute right-3 flex space-x-2">
+            <div @click="openScanOverlay" class="cursor-pointer">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="h-6 w-6 text-white"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+                />
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mt-10">
+        <!-- Label and available balance -->
+        <div class="flex justify-between items-center">
+          <label
+            for="sendAmount"
+            class="text-sm font-medium leading-6 text-white"
+            >{{ accountStore.getSymbol }} Amount</label
+          >
+
+          <span class="text-xs text-gray-400"
+            >Available private balance:
+            {{ accountStore.formatBalanceFree(incogniteeSidechain) }}</span
+          >
+        </div>
+
+        <!-- Input field -->
+        <div>
+          <input
+            id="sendAmount"
+            v-model="sendAmount"
+            type="number"
+            step="0.01"
+            :min="0.1"
+            :max="
+              accountStore.getDecimalBalanceFree(incogniteeSidechain) -
+              accountStore.getDecimalExistentialDeposit(incogniteeSidechain) -
+              0.1
+            "
+            required
+            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
+            style="border-color: #24ad7c"
+            placeholder="Amount"
+          />
+        </div>
+
+        <!-- Fee description -->
+        <div class="text-right">
+          <span class="text-xs text-gray-400"
+            >Fee: {{ formatDecimalBalance(INCOGNITEE_TX_FEE) }}
+            {{ accountStore.getSymbol }} for Incognitee</span
+          >
+        </div>
+      </div>
+
+      <!-- Messages -->
+      <div class="flex flex-col">
+        <label
+          for="paymentNote"
+          class="text-sm font-medium leading-6 text-white text-left"
+          >Note</label
+        >
+        <div class="relative flex items-center rounded-lg">
+          <textarea
+            id="messages"
+            v-model="sendPrivateNote"
+            rows="2"
+            ref="messageTextarea"
+            name="messages"
+            placeholder="Enter a private note for the recipient"
+            :maxlength="140"
+            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
+          ></textarea>
+        </div>
+      </div>
+
+      <div class="mt-8 bottom-0 left-0 w-full bg-gray-800">
+        <button
+          type="submit"
+          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+        >
+          Transfer
+        </button>
+      </div>
+    </form>
+  </OverlayDialog>
+
+  <!-- Guess The Number -->
+  <OverlayDialog
+    :show="showGuessTheNumberOverlay"
+    :close="closeGuessTheNumberOverlay"
+    title="Guess The Number"
+  >
+    <div class="my-3 text-gray-300 text-sm text-center">
+      <p>
+        Guess a number between 0-10000 and win a weekly giveaway! You can place
+        up to 10 guesses per round.
+      </p>
+    </div>
+
+    <div class="mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-1 gap-6 items-start">
+        <div>
+          <div
+            class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-3"
+          >
+            <dl class="flex flex-wrap">
+              <!-- round info -->
+              <div class="w-full flex justify-between px-6 pt-3">
+                <div class="flex-auto text-left mb-4 md:mb-0">
+                  <dt
+                    class="text-sm text-left font-semibold leading-6 text-gray-300"
+                  >
+                    Prize
+                  </dt>
+                  <dd
+                    class="mt-1 text-left text-base font-semibold leading-6 text-white mr-1"
+                  >
+                    {{
+                      formatDecimalBalance(
+                        guessTheNumberInfo?.winnings /
+                          Math.pow(10, accountStore.decimals),
+                      )
+                    }}
+                    {{ accountStore.getSymbol }}
+                  </dd>
+                </div>
+
+                <div class="flex-auto text-right">
+                  <dt class="text-sm font-semibold leading-6 text-gray-300">
+                    Current round ends
+                  </dt>
+                  <dd class="mt-1 text-base font-semibold leading-6 text-white">
+                    {{
+                      formatMoment(
+                        guessTheNumberInfo?.next_round_timestamp.toNumber(),
+                      )
+                    }}
+                  </dd>
+                </div>
+              </div>
+              <!-- last round lucky number -->
+              <div
+                v-if="guessTheNumberInfo?.maybe_last_lucky_number.isSome"
+                class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
+              >
+                <div class="flex-auto text-left mb-4 md:mb-0">
+                  <dt
+                    class="text-sm text-left font-semibold leading-6 text-gray-300"
+                  >
+                    Last lucky number
+                  </dt>
+                  <dd
+                    class="mt-1 text-left text-base font-semibold leading-6 text-white"
+                  >
+                    {{
+                      guessTheNumberInfo?.maybe_last_lucky_number ?? "unknown"
+                    }}
+                  </dd>
+                </div>
+
+                <div
+                  v-if="guessTheNumberInfo?.maybe_last_winning_distance > 0"
+                  class="flex-auto text-right"
+                >
+                  <dt class="text-sm font-semibold leading-6 text-gray-300">
+                    Last winning distance
+                  </dt>
+                  <dd class="mt-1 text-base font-semibold leading-6 text-white">
+                    {{ guessTheNumberInfo?.maybe_last_winning_distance }}
+                  </dd>
+                </div>
+              </div>
+              <!-- last round winners -->
+              <div
+                v-if="guessTheNumberInfo?.maybe_last_lucky_number.isSome"
+                class="mt-3 flex flex-col w-full flex-none gap-y-4 border-t border-gray-700 px-6 pt-3"
+              >
+                <div class="text-sm font-semibold leading-6 text-gray-300">
+                  Last lucky winners
+                </div>
+
+                <!-- Winner's address displayed under the last lucky number -->
+                <div
+                  class="text-sm leading-6 text-gray-400"
+                  v-html="gtnWinners"
+                />
+              </div>
+            </dl>
+          </div>
+        </div>
+
+        <div>
+          <div></div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="
+        accountStore.getDecimalBalanceTransferable(incogniteeSidechain) >
+        INCOGNITEE_GTN_GUESS_FEE
+      "
+      class="mb-4"
+    >
+      <form class="" @submit.prevent="submitGuessForm">
+        <!-- Label for the input -->
+        <div class="flex justify-between mb-2">
+          <label for="guess" class="text-sm font-medium leading-6 text-white"
+            >Enter your guess</label
+          >
+        </div>
+
+        <!-- Flex container for input and button -->
+        <div class="flex items-center space-x-4">
+          <!-- Guess Input Field -->
+          <div class="flex-grow relative">
+            <input
+              id="guess"
+              v-model="guess"
+              type="number"
+              step="1"
+              :min="0"
+              :max="10000"
+              required
+              class="w-full text-sm rounded-lg bg-cool-900 text-white placeholder-gray-500 border border-green-500"
+              style="border-color: #24ad7c"
+              placeholder="guess"
+            />
+          </div>
+
+          <!-- Submit Button -->
+          <div class="flex items-center justify-center">
+            <button
+              type="submit"
+              class="btn btn_gradient rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+              style="margin-left: auto; margin-right: auto"
+            >
+              Submit
+            </button>
+          </div>
+        </div>
+        <!-- Fee description below input, right-aligned -->
+        <div class="text-left right-0 mb-0">
+          <span class="text-xs text-gray-400"
+            >Fee: {{ formatDecimalBalance(INCOGNITEE_GTN_GUESS_FEE) }}
+            {{ accountStore.getSymbol }} for Incognitee</span
+          >
+        </div>
+      </form>
+    </div>
+    <div v-else>
+      <div class="rounded-md bg-yellow-50 p-4">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <svg
+              class="h-5 w-5 text-yellow-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+              data-slot="icon"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <div class="ml-3">
+            <div class="text-left text-sm text-yellow-700">
+              <p>
+                You need at least
+                {{ formatDecimalBalance(INCOGNITEE_GTN_GUESS_FEE) }} private
+                {{ accountStore.getSymbol }} to participate in the game. Please
+                shield some first.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </OverlayDialog>
+
+  <!-- Scan QR -->
+  <OverlayDialog
+    :show="showScanOverlay"
+    :close="closeScanOverlay"
+    title="Scan recipient's QR code"
+  >
+    <div class="mt-6 qrcode-container">
+      <qrcode-stream @detect="onDecode"></qrcode-stream>
+    </div>
+  </OverlayDialog>
+
+  <StatusOverlay
+    :tx-status="txStatus"
+    :show="showStatusOverlay"
+    :close="closeStatusOverlay"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  INCOGNITEE_GTN_GUESS_FEE,
+  INCOGNITEE_SHIELDING_FEE_FRACTION,
+  INCOGNITEE_TX_FEE,
+  INCOGNITEE_UNSHIELDING_FEE,
+} from "~/configs/incognitee";
+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";
+import Qrcode from "vue-qrcode";
+import BalanceInteractorContainer from "~/components/ui/BalanceInteractorContainer.vue";
+import PrivateTxHistory from "~/components/ui/PrivateTxHistory.vue";
+import { computed, defineProps, ref, defineExpose } from "vue";
+import { encodeAddress } from "@polkadot/util-crypto";
+import { TypeRegistry, u32 } from "@polkadot/types";
+import { Health, useSystemHealth } from "~/store/systemHealth";
+import { useAccount } from "~/store/account";
+import { useIncognitee } from "~/store/incognitee";
+import StatusOverlay from "~/components/overlays/StatusOverlay.vue";
+import {
+  shieldingTarget,
+  shieldingLimit,
+  incogniteeSidechain,
+  isLive,
+} from "~/lib/environmentConfig";
+import { chainConfigs } from "~/configs/chains";
+import { QrcodeStream } from "vue-qrcode-reader";
+import { ApiPromise } from "@polkadot/api";
+import { formatMoment } from "~/helpers/date";
+
+const accountStore = useAccount();
+const incogniteeStore = useIncognitee();
+const systemHealth = useSystemHealth();
+const isSignerBusy = ref(false);
+const sendAmount = ref(1.0);
+const sendPrivateNote = ref("");
+const shieldAmount = ref(11.0);
+const unshieldAmount = ref(10.0);
+const recipientAddress = ref("");
+const guess = ref(null);
+const guessTheNumberInfo = ref(null);
+const currentTab = ref("public");
+const txStatus = ref("");
+const faucetUrl = ref(null);
+
+const selectTab = (tab) => {
+  currentTab.value = tab;
+  if (tab === "private") {
+    props.updateNotes();
+  }
+};
+
+defineExpose({
+  onWalletInfoInitialized: async () => {
+    console.log("onWalletInfoInitialized");
+    if (
+      accountStore.getDecimalBalanceTransferable(shieldingTarget.value) === 0
+    ) {
+      if (
+        accountStore.getDecimalBalanceTransferable(incogniteeSidechain.value) >
+        0
+      ) {
+        console.log("account has funds on incognitee. selecting private tab");
+        selectTab("private");
+      }
+    }
+    faucetUrl.value = chainConfigs[shieldingTarget.value].faucetUrl?.replace(
+      "ADDRESS",
+      accountStore.getAddress,
+    );
+    props.updateNotes();
+  },
+});
+const submitSendForm = () => {
+  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
+    alert(
+      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
+    );
+    return;
+  }
+  openStatusOverlay();
+  closePrivateSendOverlay();
+  sendPrivately();
+};
+const submitShieldForm = async () => {
+  // double check input values here
+  // fixme: why is this necessary? it seems computed max will not be enforced otherwise
+  if (shieldAmount.value > computedShieldingMax.value) {
+    alert(
+      `Shield amount exceeds the maximum allowed value of ${computedShieldingMax.value}`,
+    );
+    return;
+  }
+  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
+    alert(
+      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
+    );
+    return;
+  }
+  openStatusOverlay();
+  closeShieldOverlay();
+  await shield();
+};
+const submitUnshieldForm = async () => {
+  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
+    alert(
+      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
+    );
+    return;
+  }
+  openStatusOverlay();
+  closeUnshieldOverlay();
+  await unshield();
+};
+const submitGuessForm = async () => {
+  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
+    alert(
+      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
+    );
+    return;
+  }
+  openStatusOverlay();
+  closeGuessTheNumberOverlay();
+  await submitGuess();
+};
+
+const setRecipientAddressToSelf = () => {
+  recipientAddress.value = accountStore.getAddress;
+};
+const txResHandlerShieldingTarget = ({ events = [], status, txHash }) => {
+  status.isFinalized
+    ? (txStatus.value = `😀 Finalized. Finalized. You should see your Incognitee balance increase in seconds. Please move to the Private Balance tab`)
+    : (txStatus.value = `⌛ Current transaction status: ${status.type}. please be patient a few more seconds. you should see your L1 balance going down`);
+  isSignerBusy.value = false;
+  // Loop through Vec<EventRecord> to display all events
+  events.forEach(({ _, event: { data, method, section } }) => {
+    if (section + ":" + method === "system:ExtrinsicFailed") {
+      // extract the data for this event
+      const [dispatchError, dispatchInfo] = data;
+      console.log(`dispatchinfo: ${dispatchInfo}`);
+      let errorInfo;
+
+      // decode the error
+      if (dispatchError.isModule) {
+        // for module errors, we have the section indexed, lookup
+        // (For specific known errors, we can also do a check against the
+        // api.errors.<module>.<ErrorName>.is(dispatchError.asModule) guard)
+        const mod = dispatchError.asModule;
+        const error = props.api.registry.findMetaError(
+          new Uint8Array([
+            mod.index.toNumber(),
+            bnFromHex(mod.error.toHex().slice(0, 4)).toNumber(),
+          ]),
+        );
+        const message = `${error.section}.${error.name}${
+          Array.isArray(error.docs)
+            ? `(${error.docs.join("")})`
+            : error.docs || ""
+        }`;
+
+        errorInfo = `${message}`;
+        console.log(`Error-info::${JSON.stringify(error)}`);
+      } else {
+        // Other, CannotLookup, BadOrigin, no extra info
+        errorInfo = dispatchError.toString();
+      }
+      txStatus.value = `😞 Transaction Failed! ${section}.${method}::${errorInfo}`;
+    } else if (section + ":" + method === "system:ExtrinsicSuccess") {
+      console.log(
+        `✅ Transaction successful with status: ${status} hash: ${txHash}`,
+      );
+    }
+  });
+};
+
+const txErrHandlerShieldingTarget = (err) =>
+  (txStatus.value = `😞 Transaction Failed: ${err.toString()}`);
+
+const handleTopResult = (result, successMsg?) => {
+  console.log("TOP result: " + result);
+  if (result) {
+    if (result.status.isInSidechainBlock) {
+      if (successMsg) {
+        txStatus.value = successMsg;
+      } else {
+        txStatus.value =
+          "😀 included in sidechain block: " + result.status.asInSidechainBlock;
+      }
+      //update history to see successfuly action immediately
+      props.updateNotes();
+      return;
+    }
+    if (result.status.isInvalid) {
+      txStatus.value = "😞 Invalid (unspecified reason)";
+      return;
+    }
+  }
+  console.error(`unknown result: ${result}`);
+  txStatus.value = "😞 Unknown Result";
+};
+
+const handleTopError = (err) => {
+  console.error(`error: ${err}`);
+  txStatus.value = `😞 Submission Failed: ${err}`;
+};
+
+const shield = async () => {
+  console.log("shielding .....");
+  if (isSignerBusy.value) {
+    // fixme! this is a hack. don't know why extension pops up twice without this
+    console.log("signer busy. aborting repeated attempt...");
+    return;
+  }
+  isSignerBusy.value = true;
+  txStatus.value = "⌛ awaiting signature and connection";
+  console.log("local api ready: " + props.api?.isReady);
+  if (incogniteeStore.vault && props.api?.isReady) {
+    const amount = accountStore.decimalAmountToBigInt(shieldAmount.value);
+    console.log(`sending ${amount} to vault: ${incogniteeStore.vault}`);
+
+    await props.api.tx.balances
+      .transferKeepAlive(incogniteeStore.vault, amount)
+      .signAsync(accountStore.account, {
+        signer: accountStore.injector?.signer,
+      })
+      .then((tx) => tx.send(txResHandlerShieldingTarget))
+      .catch(txErrHandlerShieldingTarget);
+  }
+};
+
+const unshield = async () => {
+  console.log("will unshield 30% of your private funds to same account on L1");
+  txStatus.value = "⌛ will unshield to L1";
+  const amount = accountStore.decimalAmountToBigInt(unshieldAmount.value);
+  const account = accountStore.account;
+  const nonce = new u32(
+    new TypeRegistry(),
+    accountStore.nonce[incogniteeSidechain.value],
+  );
+  console.log(
+    `sending ${unshieldAmount.value} from ${accountStore.getAddress} publicly (nonce:${nonce}) to ${recipientAddress.value} on L1 (shard: ${incogniteeStore.shard})`,
+  );
+
+  await incogniteeStore.api
+    .balanceUnshieldFunds(
+      account,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      accountStore.getAddress,
+      recipientAddress.value,
+      amount,
+      {
+        signer: accountStore.injector?.signer,
+        nonce: nonce,
+      },
+    )
+    .then((result) =>
+      handleTopResult(
+        result,
+        "😀 Successfully triggered unshielding process. You should see the unshielded funds appear on L1 in seconds",
+      ),
+    )
+    .catch((err) => handleTopError(err));
+  //todo: manually inc nonce locally avoiding clashes with fetchIncogniteeBalance
+};
+
+const sendPrivately = async () => {
+  console.log("sending funds on incognitee");
+  txStatus.value = "⌛ sending funds privately on incognitee";
+  const amount = accountStore.decimalAmountToBigInt(sendAmount.value);
+  const account = accountStore.account;
+
+  const encoder = new TextEncoder();
+  const byteLength = encoder.encode(sendPrivateNote.value).length;
+  // fixme: https://github.com/encointer/encointer-js/issues/123
+  if (byteLength > 161) {
+    alert(
+      "Note is too long when encoded to UTF-8. Please keep it under 162 bytes.",
+    );
+    return;
+  }
+  const note = sendPrivateNote.value.length > 0 ? sendPrivateNote.value : null;
+  const nonce = new u32(
+    new TypeRegistry(),
+    accountStore.nonce[incogniteeSidechain.value],
+  );
+  console.log(
+    `sending ${sendAmount.value} from ${account.address} privately to ${recipientAddress.value} with nonce ${nonce} and note: ${note}`,
+  );
+
+  await incogniteeStore.api
+    .trustedBalanceTransfer(
+      account,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      accountStore.getAddress,
+      recipientAddress.value,
+      amount,
+      note,
+      {
+        signer: accountStore.injector?.signer,
+        nonce: nonce,
+      },
+    )
+    .then((result) => handleTopResult(result, "😀 Balance transfer successful"))
+    .catch((err) => handleTopError(err));
+  //todo: manually inc nonce locally avoiding clashes with fetchIncogniteeBalance
+};
+const submitGuess = async () => {
+  console.log("submit guess: ", guess.value);
+  txStatus.value = "⌛ privately submitting your guess to incognitee";
+  const account = accountStore.account;
+  const nonce = new u32(
+    new TypeRegistry(),
+    accountStore.nonce[incogniteeSidechain.value],
+  );
+  console.log(
+    `sending guess ${guess.value} from ${account.address} privately to incognitee`,
+  );
+
+  await incogniteeStore.api
+    .guessTheNumber(
+      account,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      guess.value,
+      {
+        signer: accountStore.injector?.signer,
+        nonce: nonce,
+      },
+    )
+    .then((result) => handleTopResult(result, "😀 Guess submission successful"))
+    .catch((err) => handleTopError(err));
+  //todo: manually inc nonce locally avoiding clashes with fetchIncogniteeBalance
+};
+const fetchGuessTheNumberInfo = async () => {
+  if (!incogniteeStore.apiReady) return;
+  console.log("fetch guess the number info");
+  const getter = incogniteeStore.api.guessTheNumberInfoGetter(
+    incogniteeStore.shard,
+  );
+  await getter.send().then((info) => {
+    console.log(`guess the number info: ${info}`);
+    guessTheNumberInfo.value = info;
+  });
+};
+
+const gtnWinners = computed(() => {
+  if (guessTheNumberInfo.value) {
+    const winners = [];
+    for (const winner of guessTheNumberInfo.value.last_winners) {
+      winners.push(
+        encodeAddress(winner, accountStore.getSs58Format).slice(0, 8) + "...",
+      );
+    }
+    return winners.join("<br>");
+  }
+  return "no one";
+});
+const copyOwnAddressToClipboard = () => {
+  navigator.clipboard
+    .writeText(accountStore.getAddress)
+    .then(() =>
+      alert(
+        "copied your account address to clipboard. Please paste it into the address field on the faucet.",
+      ),
+    );
+};
+
+const computedShieldingMax = computed(() => {
+  return Math.max(
+    0,
+    Math.min(
+      shieldingLimit.value -
+        accountStore.getDecimalBalanceFree(incogniteeSidechain.value),
+      accountStore.getDecimalBalanceTransferable(shieldingTarget.value) -
+        accountStore.getDecimalExistentialDeposit(shieldingTarget.value) -
+        0.1,
+    ),
+  );
+});
+
+const showAssetsInfo = ref(false);
+const openAssetsInfo = () => {
+  showAssetsInfo.value = true;
+};
+const closeAssetsInfo = () => {
+  showAssetsInfo.value = false;
+};
+
+const showPrivacyInfo = ref(false);
+const openPrivacyInfo = () => {
+  showPrivacyInfo.value = true;
+};
+const closePrivacyInfo = () => {
+  showPrivacyInfo.value = false;
+};
+
+const showObtainTokenOverlay = ref(false);
+const openObtainTokenOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  showObtainTokenOverlay.value = true;
+};
+const closeObtainTokenOverlay = () => {
+  showObtainTokenOverlay.value = false;
+};
+
+const showShieldOverlay = ref(false);
+const openShieldOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  shieldAmount.value = Math.floor(
+    Math.min(shieldAmount.value, computedShieldingMax.value),
+  );
+  showShieldOverlay.value = true;
+};
+const closeShieldOverlay = () => {
+  showShieldOverlay.value = false;
+};
+
+const showFaucetOverlay = ref(false);
+const openFaucetOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  showFaucetOverlay.value = true;
+};
+const closeFaucetOverlay = () => {
+  showFaucetOverlay.value = false;
+};
+
+const showUnshieldOverlay = ref(false);
+const openUnshieldOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  unshieldAmount.value = Math.floor(
+    Math.min(10, accountStore.getDecimalBalanceFree(incogniteeSidechain.value)),
+  );
+  showUnshieldOverlay.value = true;
+};
+const closeUnshieldOverlay = () => {
+  showUnshieldOverlay.value = false;
+};
+const showReceiveOverlay = ref(false);
+const openReceiveOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  showReceiveOverlay.value = true;
+};
+const closeReceiveOverlay = () => {
+  showReceiveOverlay.value = false;
+};
+const showPrivateSendOverlay = ref(false);
+const openPrivateSendOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  console.debug(
+    `openPrivateSendOverlay (scanoverlay=${showScanOverlay.value})`,
+  );
+  sendAmount.value = Math.floor(
+    Math.min(
+      sendAmount.value,
+      accountStore.getDecimalBalanceFree(incogniteeSidechain.value) - 0.1,
+    ),
+  );
+  showPrivateSendOverlay.value = true;
+};
+const closePrivateSendOverlay = () => {
+  console.debug("closePrivateSendOverlay");
+  showPrivateSendOverlay.value = false;
+};
+
+const showGuessTheNumberOverlay = ref(false);
+const openGuessTheNumberOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  console.log(
+    `openGuessTheNumberOverlay (scanoverlay=${showScanOverlay.value})`,
+  );
+  fetchGuessTheNumberInfo();
+  showGuessTheNumberOverlay.value = true;
+};
+const closeGuessTheNumberOverlay = () => {
+  console.log("closeGuessTheNumberOverlay");
+  showGuessTheNumberOverlay.value = false;
+};
+
+const scanResult = ref("No QR code data yet");
+const onDecode = (decodeResult) => {
+  console.log("QR scan decoded: " + decodeResult[0].rawValue);
+  scanResult.value = decodeResult[0].rawValue;
+  recipientAddress.value = decodeResult[0].rawValue;
+  closeScanOverlay();
+};
+const showScanOverlay = ref(false);
+const openScanOverlay = () => {
+  scanResult.value = "No QR code data yet";
+  showScanOverlay.value = true;
+};
+const closeScanOverlay = () => {
+  console.debug("closeScanOverlay");
+  showScanOverlay.value = false;
+};
+
+const showStatusOverlay = ref(false);
+const openStatusOverlay = () => {
+  showStatusOverlay.value = true;
+};
+const closeStatusOverlay = () => {
+  showStatusOverlay.value = false;
+  showPrivateSendOverlay.value = false;
+  showShieldOverlay.value = false;
+  showUnshieldOverlay.value = false;
+};
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
+  isProd: {
+    type: Boolean,
+    required: true,
+  },
+  isMobile: {
+    type: Boolean,
+    required: true,
+  },
+  isFetchingShieldingTargetBalance: {
+    type: Boolean,
+    required: true,
+  },
+  isFetchingIncogniteeBalance: {
+    type: Boolean,
+    required: true,
+  },
+  disableGetter: {
+    type: Boolean,
+    required: true,
+  },
+  api: {
+    type: Object,
+    required: false,
+    default: null,
+    validator: (value) => value === null || value instanceof ApiPromise,
+  },
+  updateNotes: {
+    type: Function,
+    required: true,
+  },
+  fetchOlderBucket: {
+    type: Function,
+    required: true,
+  },
+});
+
+const enableActions = computed(() => {
+  return isLive.value || forceLive.value;
+});
+</script>
+
+<style scoped>
+.border-green-500 {
+  border-color: #24ad7c;
+}
+
+.bg-gray-800 {
+  background-color: #1f2937;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.truncate-input {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+h1 {
+  font-size: 1em; /* Adjust as needed */
+  font-weight: bold; /* Makes the text bold */
+  color: #999; /* Change color as needed */
+  text-align: center; /* Centers the text */
+  margin-bottom: 20px; /* Adds space below the heading */
+}
+
+hr {
+  border: none;
+  border-top: 1px #222; /* Change color as needed */
+  color: #111; /* Change color as needed */
+  background-color: #333; /* Change color as needed */
+  height: 1px; /* Adjust as needed */
+}
+
+.qrcode-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.form-container input {
+  background-color: #333;
+  color: #fff; /* You might want to change the text color to ensure it's readable against the dark background */
+}
+
+.form-container input#amount {
+  font-size: 2em; /* Make the font size twice as large */
+  text-align: center; /* Center the text */
+  width: 50%; /* Reduce the width by 50% */
+}
+
+.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>
diff --git a/components/ui/HealthIndicator.vue b/components/ui/HealthIndicator.vue
index b35d786..6d54b28 100644
--- a/components/ui/HealthIndicator.vue
+++ b/components/ui/HealthIndicator.vue
@@ -35,7 +35,7 @@
 import { computed, ref } from "vue";
 import { useSystemHealth, Health } from "@/store/systemHealth.ts";
 import { useRouter } from "vue-router";
-import HealthDetailsOverlay from "@/components/ui/HealthDetailsOverlay.vue";
+import HealthDetailsOverlay from "~/components/overlays/HealthDetailsOverlay.vue";
 
 const systemHealth = useSystemHealth();
 const router = useRouter();
diff --git a/components/ui/PrivateMessageHistory.vue b/components/ui/PrivateMessageHistory.vue
new file mode 100644
index 0000000..58f6146
--- /dev/null
+++ b/components/ui/PrivateMessageHistory.vue
@@ -0,0 +1,243 @@
+<template>
+  <div v-if="show" class="mt-10 flex justify-between items-center">
+    <div class="title text-2xl font-bold tracking-tight text-white sm:text-2xl">
+      Messages
+    </div>
+  </div>
+  <div v-if="show" class="mb-10">
+    <!-- Neuer Abschnitt, der nur angezeigt wird, wenn der "Private Balance" Tab aktiv ist -->
+    <div v-if="show" class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
+      <div
+        v-for="(note, index) in noteStore.getMessages"
+        :key="index"
+        class="flex justify-between"
+      >
+        <div
+          v-if="note.direction === NoteDirection.Incoming"
+          class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8 bg-gray-700"
+        >
+          <div class="flex flex-col">
+            <div class="text-sm font-medium text-gray-500">
+              From: {{ note.account }}
+            </div>
+            <div
+              class="wallet-address mt-1 text-xs text-white whitespace-nowrap"
+            >
+              {{ note.note }}
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="note.direction === NoteDirection.Outgoing"
+          class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8 bg-gray-900"
+        >
+          <div class="flex flex-col">
+            <div class="text-sm font-medium text-gray-500">You</div>
+            <div
+              class="wallet-address mt-1 text-xs text-white whitespace-nowrap"
+            >
+              {{ note.note }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mt-5 flex justify-center text-gray-500">
+      <button @click="fetchOlderBucket">
+        fetch more events
+        {{ accountStore.hasInjector ? "(needs signature)" : "" }}
+      </button>
+    </div>
+    <!-- this is necessary to avoid the footer overlapping the text -->
+    <br /><br /><br /><br /><br /><br /><br />
+  </div>
+  <NoteDetailsOverlay
+    :show="showViewMore"
+    :note="showNote"
+    :close="closeViewMore"
+  />
+</template>
+
+<script setup lang="ts">
+import { formatDate } from "@/helpers/date";
+import { ref, defineProps, defineExpose } from "vue";
+import { useAccount } from "@/store/account.ts";
+import { useNotes } from "@/store/notes.ts";
+import { Note, NoteDirection } from "@/lib/notes";
+import { divideBigIntToFloat } from "@/helpers/numbers";
+import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
+
+const accountStore = useAccount();
+const noteStore = useNotes();
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const showNote = ref<Note>(null);
+const showViewMore = ref(false);
+const openViewMore = (note: Note) => {
+  showNote.value = note;
+  showViewMore.value = true;
+};
+const closeViewMore = () => {
+  showViewMore.value = false;
+};
+</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 */
+}
+
+/* Für mobile Bildschirme (max-width: 640px) */
+@media (max-width: 640px) {
+  .wallet-address {
+    max-width: 10ch;
+    /* Zeigt nur die ersten 5 Zeichen */
+  }
+}
+
+/* Für größere Bildschirme (ab 641px) */
+@media (min-width: 641px) {
+  .wallet-address {
+    max-width: none;
+    /* Zeigt die komplette Adresse an */
+  }
+}
+
+.walletdesktop-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;
+}
+
+textarea {
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  resize: none;
+  /* Verhindert manuelles Ändern der Größe */
+}
+
+.currency-box {
+  position: relative;
+  outline: none;
+  /* Keine Outline standardmäßig */
+}
+
+.currency-box:hover {
+  outline: 2px solid var(--incognitee-green);
+  /* Verwende outline statt border */
+}
+
+.text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.border-green-500 {
+  border-color: #24ad7c;
+}
+
+.bg-gray-800 {
+  background-color: #1f2937;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.truncate-input {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+h1 {
+  font-size: 1em;
+  /* Adjust as needed */
+  font-weight: bold;
+  /* Makes the text bold */
+  color: #999;
+  /* Change color as needed */
+  text-align: center;
+  /* Centers the text */
+  margin-bottom: 20px;
+  /* Adds space below the heading */
+}
+
+hr {
+  border: none;
+  border-top: 1px #222;
+  /* Change color as needed */
+  color: #111;
+  /* Change color as needed */
+  background-color: #333;
+  /* Change color as needed */
+  height: 1px;
+  /* Adjust as needed */
+}
+
+.qrcode-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.form-container input {
+  background-color: #333;
+  color: #fff;
+  /* You might want to change the text color to ensure it's readable against the dark background */
+}
+
+.form-container input#amount {
+  font-size: 2em;
+  /* Make the font size twice as large */
+  text-align: center;
+  /* Center the text */
+  width: 50%;
+  /* Reduce the width by 50% */
+}
+
+.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>
diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index ca53acd..ebd905f 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -10,7 +10,7 @@
       <table class="w-full whitespace-nowrap text-left">
         <tbody class="divide-y divide-white/10">
           <tr
-            v-for="(note, index) in allNotes"
+            v-for="(note, index) in noteStore.getFinancialNotes"
             :key="index"
             class="flex justify-between"
           >
@@ -125,280 +125,28 @@
 </template>
 
 <script setup lang="ts">
-import { formatMoment, formatDate } from "@/helpers/date";
+import { formatDate } from "@/helpers/date";
 import { ref, defineProps, defineExpose } from "vue";
-import { useIncognitee } from "@/store/incognitee.ts";
 import { useAccount } from "@/store/account.ts";
+import { useNotes } from "@/store/notes.ts";
 import { Note, NoteDirection } from "@/lib/notes";
-import { divideBigIntToFloat, formatDecimalBalance } from "@/helpers/numbers";
-import { encodeAddress } from "@polkadot/util-crypto";
-import NoteDetailsOverlay from "@/components/ui/NoteDetailsOverlay.vue";
+import { divideBigIntToFloat } from "@/helpers/numbers";
+import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
 
 const accountStore = useAccount();
-const incogniteeStore = useIncognitee();
-
-const getterMap: { [address: string]: any } = {};
-const disableGetter = ref(false);
-const noteBucketsInfo = ref(null);
-const allNotes = ref<Note[]>([]);
-const firstNoteBucketIndexFetched = ref(null);
-
-let lastAccount = null;
-let lastBucketIndex = null;
+const noteStore = useNotes();
 
 const props = defineProps({
   show: {
     type: Boolean,
     required: true,
   },
-  update: {
+  fetchOlderBucket: {
     type: Function,
     required: true,
   },
 });
 
-defineExpose({
-  updateNotes: async () => {
-    console.log("updateNotes called");
-    if (accountStore.account !== lastAccount) {
-      console.log("account changed, purging note history...");
-      allNotes.value = [];
-    }
-    lastAccount = accountStore.account;
-    await fetchNoteBucketsInfo();
-    if (noteBucketsInfo.value?.last.unwrap().index <= lastBucketIndex) {
-      console.log("bucket didn't change");
-    } else {
-      lastBucketIndex = noteBucketsInfo.value?.last.unwrap().index;
-      console.log("lastBucketIndex=" + lastBucketIndex);
-    }
-    await fetchIncogniteeNotes(lastBucketIndex, true);
-  },
-});
-const fetchNoteBucketsInfo = async () => {
-  if (!incogniteeStore.apiReady) return;
-  console.log("fetch note buckets info");
-  const getter = incogniteeStore.api.noteBucketsInfoGetter(
-    incogniteeStore.shard,
-  );
-  await getter.send().then((info) => {
-    console.log(`note buckets info: ${info}`);
-    noteBucketsInfo.value = info;
-  });
-};
-
-const fetchIncogniteeNotes = async (
-  bucketIndex: number,
-  skip_if_signer_needed: boolean,
-) => {
-  if (!incogniteeStore.apiReady) return;
-  if (!accountStore.account) return;
-
-  if (disableGetter.value == true) {
-    console.log(
-      "[fetchIncogniteeNotes] getter disabled. reconnect your account to enable again...",
-    );
-    return;
-  }
-  const mapKey = `notesFor:${accountStore.account}:${bucketIndex}`;
-  const injector = accountStore.hasInjector ? accountStore.injector : null;
-  try {
-    if (!getterMap[mapKey]) {
-      if (injector) {
-        if (skip_if_signer_needed) {
-          console.log(
-            "skipping automated fetchIncogniteeNotes because signer is needed",
-          );
-          return;
-        } else {
-          console.debug(
-            `fetching incognitee notes needs signing in extension: ${injector.name}`,
-          );
-        }
-      }
-      getterMap[mapKey] = await incogniteeStore.api.notesForTrustedGetter(
-        accountStore.account,
-        bucketIndex,
-        incogniteeStore.shard,
-        { signer: injector?.signer },
-      );
-    } else {
-      console.debug(`fetching incognitee notes using cached getter`);
-    }
-  } catch (e) {
-    // this will be the case if we click on cancel in the extension popup.
-    console.error(e);
-    disableGetter.value = true;
-    return;
-  }
-
-  await getterMap[mapKey]
-    .send()
-    .then((notes) => {
-      console.log(
-        `notes for ${accountStore.getAddress} on shard ${incogniteeStore.shard} in bucket ${bucketIndex}:`,
-      );
-      for (const note of notes) {
-        if (note.note.isSuccessfulTrustedCall) {
-          const call = incogniteeStore.api.createType(
-            "IntegriteeTrustedCall",
-            note.note.asSuccessfulTrustedCall,
-          );
-          if (call.isBalanceShield) {
-            const typedCall = call.asBalanceShield;
-            console.log(
-              `[${formatMoment(note.timestamp.toNumber())}] balance shield: ${typedCall}`,
-            );
-            allNotes.value.push({
-              category: "Shield",
-              direction: NoteDirection.Incoming,
-              account: typedCall[1],
-              amount: BigInt(typedCall[2]),
-              timestamp: new Date(note.timestamp.toNumber()),
-              note: null,
-            });
-          } else if (call.isBalanceUnshield) {
-            const typedCall = call.asBalanceUnshield;
-            console.log(
-              `[${formatMoment(note.timestamp.toNumber())}] balance unshield: ${typedCall}`,
-            );
-            const to = encodeAddress(typedCall[1], accountStore.getSs58Format);
-            allNotes.value.push({
-              category: "Unshield",
-              direction: NoteDirection.Outgoing,
-              account: to,
-              amount: BigInt(typedCall[2]),
-              timestamp: new Date(note.timestamp.toNumber()),
-              note: null,
-            });
-          } else if (call.isBalanceTransfer) {
-            const typedCall = call.asBalanceTransfer;
-            console.log(
-              `[${formatMoment(note.timestamp.toNumber())}] balance transfer: ${typedCall}`,
-            );
-            const from = encodeAddress(
-              typedCall[0],
-              accountStore.getSs58Format,
-            );
-            const to = encodeAddress(typedCall[1], accountStore.getSs58Format);
-            if (from === accountStore.getAddress) {
-              allNotes.value.push({
-                category: "Outgoing Transfer",
-                direction: NoteDirection.Outgoing,
-                account: to,
-                amount: BigInt(typedCall[2]),
-                timestamp: new Date(note.timestamp.toNumber()),
-                note: null,
-              });
-            } else if (to === accountStore.getAddress) {
-              allNotes.value.push({
-                category: "Incoming Transfer",
-                direction: NoteDirection.Incoming,
-                account: from,
-                amount: BigInt(typedCall[2]),
-                timestamp: new Date(note.timestamp.toNumber()),
-                note: null,
-              });
-            } else {
-              console.error(
-                `[${formatMoment(note.timestamp.toNumber())}] unknown relation to transfer: ${typedCall}`,
-              );
-            }
-          } else if (call.isBalanceTransferWithNote) {
-            const typedCall = call.asBalanceTransferWithNote;
-            console.log(
-              `[${formatMoment(note.timestamp.toNumber())}] balance transfer with note: ${typedCall}`,
-            );
-            const from = encodeAddress(
-              typedCall[0],
-              accountStore.getSs58Format,
-            );
-            const to = encodeAddress(typedCall[1], accountStore.getSs58Format);
-            if (from === accountStore.getAddress) {
-              allNotes.value.push({
-                category: "Outgoing Transfer",
-                direction: NoteDirection.Outgoing,
-                account: to,
-                amount: BigInt(typedCall[2]),
-                timestamp: new Date(note.timestamp.toNumber()),
-                note: typedCall[3].toString(),
-              });
-            } else if (to === accountStore.getAddress) {
-              allNotes.value.push({
-                category: "Incoming Transfer",
-                direction: NoteDirection.Incoming,
-                account: from,
-                amount: BigInt(typedCall[2]),
-                timestamp: new Date(note.timestamp.toNumber()),
-                note: typedCall[3].toString(),
-              });
-            } else {
-              console.error(
-                `[${formatMoment(note.timestamp.toNumber())}] unknown relation to transfer: ${typedCall}`,
-              );
-            }
-          } else if (call.isGuessTheNumber) {
-            const typedCall = call.asGuessTheNumber.asGuess;
-            console.log(
-              `[${formatMoment(note.timestamp.toNumber())}] guess the number: ${typedCall}`,
-            );
-            allNotes.value.push({
-              category: `Submit Guess (${typedCall[1]})`,
-              direction: NoteDirection.None,
-              account: null,
-              amount: null,
-              timestamp: new Date(note.timestamp.toNumber()),
-              note: null,
-            });
-          } else {
-            console.error(
-              `[${formatMoment(note.timestamp.toNumber())}] unknown call: ${call}`,
-            );
-          }
-        }
-      }
-    })
-    .catch((err) => {
-      console.error(`[fetchIncogniteeNotes] error ${err}`);
-    });
-  allNotes.value = removeDups(allNotes.value);
-  // sort descending by timestamp
-  allNotes.value = allNotes.value.sort(
-    (a, b) => b.timestamp.getTime() - a.timestamp.getTime(),
-  );
-  console.log(allNotes.value);
-  if (
-    firstNoteBucketIndexFetched.value !== null &&
-    firstNoteBucketIndexFetched.value <= bucketIndex
-  ) {
-    console.log("first note bucket fetched didn't change");
-  } else {
-    console.log("first note bucket fetched is now " + bucketIndex);
-    firstNoteBucketIndexFetched.value = bucketIndex;
-  }
-};
-
-const fetchOlderBucket = async () => {
-  const index = firstNoteBucketIndexFetched.value
-    ? firstNoteBucketIndexFetched.value - 1
-    : lastBucketIndex;
-  console.log("fetchOlderBuckets : " + firstNoteBucketIndexFetched.value);
-  await fetchIncogniteeNotes(index);
-  firstNoteBucketIndexFetched.value = index;
-};
-
-const removeDups = (notes: Note[]): Note[] => {
-  const uniqueNotes = new Set<string>();
-  return notes.filter((note) => {
-    const uniqueIdentifier = `${note.timestamp.getTime()}-${note.account}`;
-    if (!uniqueNotes.has(uniqueIdentifier)) {
-      uniqueNotes.add(uniqueIdentifier);
-      return true;
-    }
-    return false;
-  });
-};
-
 const showNote = ref<Note>(null);
 const showViewMore = ref(false);
 const openViewMore = (note: Note) => {
diff --git a/helpers/date.ts b/helpers/date.ts
index 7c2a07d..1b22c5c 100644
--- a/helpers/date.ts
+++ b/helpers/date.ts
@@ -6,10 +6,10 @@ export const parse = (date: string) => {
   return format(parseString(date), DATE_FORMAT);
 };
 
-export function formatMoment(moment: number): string {
-  return format(new Date(moment), DATETIME_FORMAT);
+export function formatMoment(moment: number | null): string {
+  return moment ? format(new Date(moment), DATETIME_FORMAT) : "undefined";
 }
 
-export function formatDate(moment: number): string {
-  return format(new Date(moment), DATETIME_FORMAT);
+export function formatDate(date: Date): string {
+  return format(new Date(date), DATETIME_FORMAT);
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 4589f1a..7494935 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -66,77 +66,97 @@
             <div class="container custom-border-gradient">
               <div class="inner-box">
                 <div class="flex justify-around text-white">
-                  <div class="flex flex-col items-center text-center">
-                    <nuxt-link :to="{ path: '/', query: $route.query }">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                        class="size-6 mx-auto mb-2"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-                        />
-                      </svg>
-                      <p class="text-xs">Wallet</p>
-                    </nuxt-link>
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="emitSwitchToWallet"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+                      />
+                    </svg>
+                    <p class="text-xs">Wallet</p>
                   </div>
 
-                  <div class="flex flex-col items-center text-center">
-                    <nuxt-link :to="{ path: '/swap', query: $route.query }">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                        class="size-6 mx-auto mb-2"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
-                        />
-                      </svg>
-                      <p class="text-xs">Swap</p>
-                    </nuxt-link>
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="emitSwitchToSwap"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+                      />
+                    </svg>
+                    <p class="text-xs">Swap</p>
                   </div>
 
-                  <div class="flex flex-col items-center text-center">
-                    <nuxt-link :to="{ path: '/gov', query: $route.query }">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                        class="size-6 mx-auto mb-2"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z"
-                        />
-                      </svg>
-                      <p class="text-xs cursor-pointer">Gov</p>
-                    </nuxt-link>
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="emitSwitchToGov"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z"
+                      />
+                    </svg>
+                    <p class="text-xs cursor-pointer">Gov</p>
                   </div>
                   <div
                     v-if="accountStore.getSymbol === 'TEER'"
                     class="flex flex-col items-center justify-center text-center"
+                    @click="emitSwitchToTeerDays"
+                  >
+                    <TEERdays class="w-6 h-6 mb-2" />
+                    <!-- Make TEERdays icon the same size as others -->
+                    <p class="text-xs cursor-pointer">TEERDays</p>
+                  </div>
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="emitSwitchToMessaging"
                   >
-                    <nuxt-link
-                      :to="{ path: '/teerdays', query: $route.query }"
-                      class="flex flex-col items-center justify-center"
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
                     >
-                      <TEERdays class="w-6 h-6 mb-2" />
-                      <!-- Make TEERdays icon the same size as others -->
-                      <p class="text-xs cursor-pointer">TEERDays</p>
-                    </nuxt-link>
+                      <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>
+
+                    <p class="text-xs cursor-pointer">Messages</p>
                   </div>
                 </div>
               </div>
@@ -163,6 +183,26 @@ const accountStore = useAccount();
 const emitAddressClicked = () => {
   eventBus.emit("addressClicked");
 };
+
+const emitSwitchToWallet = () => {
+  eventBus.emit("switchToWallet");
+};
+
+const emitSwitchToMessaging = () => {
+  eventBus.emit("switchToMessaging");
+};
+
+const emitSwitchToSwap = () => {
+  eventBus.emit("switchToSwap");
+};
+
+const emitSwitchToGov = () => {
+  eventBus.emit("switchToGov");
+};
+
+const emitSwitchToTeerDays = () => {
+  eventBus.emit("switchToTeerDays");
+};
 </script>
 
 <style scoped>
diff --git a/lib/notes.ts b/lib/notes.ts
index d4d1e92..c253866 100644
--- a/lib/notes.ts
+++ b/lib/notes.ts
@@ -11,4 +11,30 @@ export class Note {
   account: string | null;
   amount: BigInt | null;
   note: string | null;
+
+  constructor(
+    category: string,
+    direction: NoteDirection,
+    account: string | null,
+    amount: BigInt | null,
+    timestamp: Date,
+    note: string | null,
+  ) {
+    this.timestamp = timestamp;
+    this.direction = direction;
+    this.category = category;
+    this.account = account;
+    this.amount = amount;
+    this.note = note;
+  }
+  equals(other: Note): boolean {
+    return (
+      this.timestamp.getTime() === other.timestamp.getTime() &&
+      this.account === other.account &&
+      this.note === other.note &&
+      this.direction === other.direction &&
+      this.category === other.category &&
+      this.amount === other.amount
+    );
+  }
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d13f4d1..365020d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -82,7 +82,6 @@ export default defineNuxtConfig({
   },
   routeRules: {
     "/": { ssr: false },
-    "/teerdays": { ssr: false },
     "/gtn": { ssr: false },
     "/teerdays-lp": { ssr: false },
     "/referral": { ssr: false },
diff --git a/pages/index.vue b/pages/index.vue
index 01e9e2b..515d869 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,1007 +1,24 @@
 <template>
-  <WarningBanner
-    v-if="
-      isProd && accountStore.getAddress !== 'none' && !accountStore.hasInjector
-    "
-    :isMobile="isMobile"
-    textMobile="This is a temporary voucher with low security. Please use a <a href='https://docs.integritee.network/2-integritee-network/2.4-teer-token/2.4.1-how-to-set-up-a-wallet'>secure wallet</a>"
-    textDesktop="You are using a temporary voucher with low security. Everyone who knows your url (including the person who may have shared this url with you) could spend these funds. Please transfer funds to a <a href='https://docs.integritee.network/2-integritee-network/2.4-teer-token/2.4.1-how-to-set-up-a-wallet'>secure wallet</a>"
-  />
-  <div v-else>
-    <CampaignBanner
-      v-if="enableActions"
-      :onClick="openGuessTheNumberOverlay"
-      :isMobile="isMobile"
-      textMobile="Guess-The-Number"
-      textDesktop="Join the Guess-The-Number Campaign and win some juicy prizes."
-    />
-  </div>
-
-  <InfoBanner
-    v-if="!enableActions"
-    :isMobile="isMobile"
-    textMobile="This page is not yet live for mainnet"
-    textDesktop="This page is not yet live for mainnet. please visit <a href='https://try.incognitee.io'>try.incognitee.io</a> for the latest version of our paseo testnet wallet"
-  />
-
-  <InfoBanner
-    v-if="!enableActions"
-    :isMobile="isMobile"
-    textMobile="Looking for <a href='/teerdays'>TEERdays</a>?"
-    textDesktop="If you are looking for our TEERDAYS page, please follow <a href='/teerdays'>this link</a>"
-  />
-
-  <div class="mt-4"></div>
-
-  <NetworkSelector
-    :openAssetsInfo="openAssetsInfo"
-    :selectedNetwork="shieldingTarget"
-  />
-
-  <div>
-    <PublicPrivateBalanceSwitcher
-      :selectTab="selectTab"
-      :currentTab="currentTab"
-    />
-
-    <BalanceInteractorContainer>
-      <div v-if="currentTab === 'public'">
-        <!-- Public Balance Content -->
-
-        <div class="text-white mb-6 text-center">
-          <div class="">
-            <h3 class="text-sm mb-3">Public Transferable Balance</h3>
-            <div v-if="isFetchingShieldingTargetBalance" class="spinner"></div>
-            <div class="text-4xl font-semibold" v-else>
-              {{
-                formatDecimalBalance(
-                  accountStore.getDecimalBalanceTransferable(shieldingTarget),
-                )
-              }}
-              <span class="text-sm font-semibold">{{
-                accountStore.getSymbol
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="mt-5">
-          <div
-            class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
-          >
-            <div
-              class="flex flex-col items-center text-center cursor-pointer"
-              @click="openShieldOverlay"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-6 mx-auto mb-2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
-                />
-              </svg>
-              <p class="text-xs">Shield</p>
-            </div>
-            <div
-              class="flex flex-col items-center text-center cursor-pointer"
-              @click="openFaucetOverlay"
-              v-if="faucetUrl"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-6 mx-auto mb-2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
-                />
-              </svg>
-              <p class="text-xs">Faucet</p>
-            </div>
-            <div
-              class="flex flex-col items-center text-center cursor-pointer"
-              @click="openObtainTokenOverlay"
-              v-else
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-6 mx-auto mb-2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
-                />
-              </svg>
-              <p class="text-xs">Get {{ accountStore.getSymbol }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-else>
-        <!-- Private Balance Content -->
-        <div class="text-white mb-6 text-center">
-          <h3 class="text-sm mb-3">
-            Private Balance
-            <span @click="openPrivacyInfo" class="cursor-pointer">ⓘ</span>
-          </h3>
-          <div v-if="isFetchingIncogniteeBalance" class="spinner"></div>
-          <div v-if="disableGetter">
-            getter disabled. please reconnect your account and sign the getter
-            request in your extension
-          </div>
-          <div
-            v-if="!isFetchingIncogniteeBalance && !disableGetter"
-            class="text-4xl font-semibold"
-          >
-            {{ accountStore.formatBalanceFree(incogniteeSidechain) }}
-            <span class="text-sm font-semibold">{{
-              accountStore.getSymbol
-            }}</span>
-          </div>
-        </div>
-        <div class="mt-5">
-          <div
-            class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
-          >
-            <div
-              class="flex flex-col items-center text-center cursor-pointer"
-              @click="openPrivateSendOverlay"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-6 mx-auto mb-2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
-                />
-              </svg>
-              <p class="text-xs">Send</p>
-            </div>
-
-            <div
-              class="flex flex-col items-center text-center cursor-pointer"
-              @click="openReceiveOverlay"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-6 mx-auto mb-2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
-                />
-              </svg>
-              <p class="text-xs">Receive</p>
-            </div>
-
-            <div
-              class="flex flex-col items-center text-center cursor-pointer"
-              @click="openUnshieldOverlay"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-6 mx-auto mb-2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-                />
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-                />
-              </svg>
-              <p class="text-xs">Unshield</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </BalanceInteractorContainer>
-
-    <PrivateTxHistory
-      :show="currentTab === 'private'"
-      ref="privateTxHistoryRef"
-    />
-  </div>
-
-  <!-- Assets Info -->
-  <OverlayDialog
-    :show="showAssetsInfo"
-    :close="closeAssetsInfo"
-    title="Other Assets"
-  >
-    <div class="mt-2">
-      <p class="text-sm text-gray-400 mt-4 text-left">
-        Incognitee is capable of shielding any fungible asset on any
-        substrate-based chain. Stay tuned for dedicated deployments for DOT,
-        KSM, USDC, USDT and others
-      </p>
-      <p class="text-sm text-gray-400 text-left my-4">
-        With further extension, Incognitee will be able to shield BTC, ETH and
-        any other token whose protocol supports light clients
-      </p>
-    </div>
-    <div class="w-full mt-8 bg-gray-800">
-      <button
-        type="button"
-        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-        @click="closeAssetsInfo"
-      >
-        Got it!
-      </button>
-    </div>
-  </OverlayDialog>
-
-  <!-- Privacy Info -->
-  <OverlayDialog
-    :show="showPrivacyInfo"
-    :close="closePrivacyInfo"
-    title="On Privacy"
-  >
-    <div class="mt-2">
-      <p class="text-sm text-gray-400 mt-4 text-justify">
-        Incognitee enhances your privacy while dealing with digital assets. But
-        what does privacy mean and how does incognitee improve privacy?
-      </p>
-      <p class="text-sm text-gray-400 text-justify my-4">
-        First, let's explore why digital assets are generally
-        <b>not</b> private. When dealing with crypto assets, your account is a
-        pseudonym on a public ledger, much like a bank account number. Every
-        single transaction this account does will be stored publicly forever and
-        you have no right for deletion of the trace you left. If, at a certain
-        point in time your pseudonym can be linked to your identity - i.e.
-        because you send tokens to someone else - your entire behavioral history
-        is revealed as is your balance.
-      </p>
-      <p class="text-sm text-gray-400 text-justify my-4">
-        <NuxtLink to="https://incognitee.io" class="color_blue"
-          >Incognitee
-        </NuxtLink>
-        is a privacy enhancing technology that allows you to shield your assets
-        and transfer them privately. This means that you can send tokens to
-        someone else without revealing your balance or transaction history. The
-        recipient will not be able to see your balance or transaction history
-        either. This is achieved by using a technology called
-        <NuxtLink
-          to="https://docs.integritee.network/2-integritee-network/2.7-privacy-technology-trusted-execution-environments"
-          class="color_blue"
-          >trusted execution environments (TEE)
-        </NuxtLink>
-        . The TEEs we use are a hardware feature of server CPU's called
-        <i>Intel SGX</i>. In addition, the
-        <NuxtLink
-          to="https://docs.integritee.network/2-integritee-network"
-          class="color_blue"
-          >Integritee Network
-        </NuxtLink>
-        , a Polkadot parachain, performs independent, decentralized remote
-        attestation of TEEs. Moreover, it gives finality to Incognitee sidechain
-        blocks.
-      </p>
-      <p class="text-sm text-gray-400 mt-4 text-justify">
-        Incognitee is a layer 2 solution, maintaining a private ledger secured
-        by TEE. All your transactions are confidential, only known to and the
-        person your transacting with. Sender, recipient and amount are invisible
-        to the public and even to the operators of Incognitee infrastructure.
-      </p>
-      <p class="text-sm text-gray-400 mt-4 text-justify">
-        For maximal privacy, we suggest to shield your assets to incognitee and
-        from then on transact them on incognitee only. If you need to unshield
-        back to L1, you can still benefit from k-anonymity: the public just sees
-        that someone out of <i>k</i> individuals is the originator of an
-        unshielding event. If <i>k</i> is large enough, you can plausibly deny
-        it was you. You can influence the size of <i>k</i> by choosing popular
-        amounts and timing.
-      </p>
-    </div>
-    <div class="mt-5 sm:mt-6">
-      <button
-        type="button"
-        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-        @click="closePrivacyInfo"
-      >
-        Got it!
-      </button>
-    </div>
-  </OverlayDialog>
-
-  <!-- Shielding -->
-  <OverlayDialog
-    :show="showShieldOverlay"
-    :close="closeShieldOverlay"
-    title="Shielding"
-  >
-    <p class="text-sm text-gray-400 text-left my-4">
-      Shielding is the process of moving naked, publicly visible balance on L1
-      to your private wallet on Incognitee.
-    </p>
-    <div v-if="shieldingLimit < Infinity">
-      <p class="text-sm text-gray-400 text-left my-4">
-        During beta phase, you can only shield up to
-        {{ shieldingLimit }} {{ accountStore.getSymbol }} which includes your
-        current private balance on incognitee.
-      </p>
-    </div>
-    <form
-      @submit.prevent="submitShieldForm"
-      class="flex-grow flex flex-col justify-between"
-    >
-      <div>
-        <div class="flex justify-between items-center mt-4">
-          <label
-            for="sendAmount"
-            class="text-sm font-medium leading-6 text-white"
-            >{{ accountStore.getSymbol }} Amount</label
-          >
-
-          <span class="text-xs text-gray-400"
-            >Available for shielding: {{ computedShieldingMax.toFixed(3) }}
-            {{ accountStore.getSymbol }}</span
-          >
-        </div>
-        <input
-          id="shieldAmount"
-          v-model="shieldAmount"
-          type="number"
-          step="1"
-          :min="1"
-          :max="computedShieldingMax"
-          required
-          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
-          style="border-color: #24ad7c"
-        />
-        <div class="text-right">
-          <span class="text-xs text-gray-400"
-            >Fee: ~16 m{{ accountStore.getSymbol }} for L1,
-            {{ formatDecimalBalance(INCOGNITEE_SHIELDING_FEE_FRACTION * 100) }}%
-            for Incognitee</span
-          >
-        </div>
-      </div>
-      <div class="bottom-0 left-0 w-full mt-8 bg-gray-800">
-        <button
-          type="submit"
-          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-          @click="submitShieldForm"
-        >
-          Shield
-        </button>
-      </div>
-    </form>
-  </OverlayDialog>
-
-  <!-- Faucet -->
-  <OverlayDialog
-    :show="showFaucetOverlay"
-    :close="closeFaucetOverlay"
-    title="Drip Faucet"
-  >
-    <p class="text-sm text-gray-400 text-left my-4">
-      The Paseo Faucet grants you PAS tokens every day. Just copy-paste your
-      address and solve a CAPTCHA to get free PAS tokens
-    </p>
-
-    <div class="flex flex-col mt-5">
-      <div class="relative flex items-center rounded-lg">
-        <input
-          id="accountAddress"
-          type="text"
-          :value="accountStore.getAddress"
-          readonly
-          class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
-          style="border-color: #24ad7c"
-        />
-        <div class="absolute right-3 flex space-x-2">
-          <div @click="copyOwnAddressToClipboard" class="cursor-pointer">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-5 sm:mt-6">
-      <a :href="faucetUrl" target="_blank">
-        <button
-          type="button"
-          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-3 mt-8 text-sm font-semibold text-white shadow-sm"
-        >
-          Get free PAS tokens from faucet
-        </button>
-      </a>
-    </div>
-  </OverlayDialog>
-
-  <ObtainTokenOverlay
-    :withdraw-to-address="accountStore.getAddress"
-    :token-symbol="accountStore.getSymbol"
-    :close="closeObtainTokenOverlay"
-    :show="showObtainTokenOverlay"
-  />
-
-  <!-- Unshield -->
-  <OverlayDialog
-    :show="showUnshieldOverlay && !showScanOverlay"
-    :close="closeUnshieldOverlay"
-    title="Unshield"
-  >
-    <p class="text-sm text-gray-400 text-left my-4">
-      Unshielding is the process of moving funds from your private balance on
-      Incognitee to publicly visible (naked) L1.
-    </p>
-    <div v-if="shieldingLimit < Infinity">
-      <p class="text-sm text-gray-400 text-left my-4">
-        During beta phase, you can only shield up to
-        {{ shieldingLimit }} {{ accountStore.getSymbol }} which includes your
-        current private balance on incognitee.
-      </p>
-    </div>
-    <form class="mt-5" @submit.prevent="submitUnshieldForm">
-      <div class="flex flex-col">
-        <label
-          for="recipientAddress"
-          class="text-sm font-medium leading-6 text-white text-left"
-          >Recipient</label
-        >
-        <div class="relative flex items-center rounded-lg">
-          <div class="absolute left-3 flex items-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="h-6 w-6 text-white"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M11.9889 0L0.0222883 5.99115L0 18.0089L12.0111 24L23.9778 18.0089L24 5.99115L11.9889 0ZM11.9055 2.93685L15.012 4.49375V7.60754L11.9055 9.16444L8.79902 7.60754V4.49375L11.9055 2.93685ZM5.66099 6.0491L8.76754 7.606V10.7198L5.66099 12.2767L8.76749 13.8336V16.9489L5.66093 18.5058L2.55438 16.9489V13.8336L5.66087 12.2767L2.55438 10.7198V7.606L5.66087 6.0491H5.66099ZM18.1278 6.0491L21.2343 7.606V10.7198L18.1279 12.2767L21.2344 13.8336V16.9489L18.1279 18.5058L15.0214 16.9489V13.8336L18.1279 12.2767L15.0214 10.7198V7.606L18.1278 6.0491ZM11.9055 9.16928L15.012 10.7262V13.84L11.913 15.3937L15.012 16.9457V20.0611L11.9055 21.618L8.79902 20.0611V16.9457L11.898 15.3937L8.79902 13.84V10.7262L11.9055 9.16928H11.9055Z"
-                fill="white"
-              />
-            </svg>
-          </div>
-          <input
-            id="recipientAddress"
-            v-model="recipientAddress"
-            type="text"
-            required
-            placeholder="Recipient"
-            class="w-full text-sm rounded-lg flex-grow pl-12 py-2 pr-20 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
-            style="border-color: #24ad7c"
-          />
-          <div class="absolute right-3 flex space-x-2">
-            <div @click="setRecipientAddressToSelf" class="cursor-pointer">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="h-6 w-6 text-white"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
-                />
-              </svg>
-            </div>
-            <div @click="openScanOverlay" class="cursor-pointer">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="h-6 w-6 text-white"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
-                />
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <p class="text-sm text-gray-400 text-left mt-5">
-        For optimal k-anonymity, we advise you to unshield either exactly 10 or
-        100
-        {{ accountStore.getSymbol }} at the time. In the future we will provide
-        a score including timing and popular amounts to enhance unlinkability of
-        your actions.
-      </p>
-
-      <div class="flex justify-between items-center mt-5">
-        <label
-          for="unshieldAmount"
-          class="text-sm font-medium leading-6 text-white"
-          >{{ accountStore.getSymbol }} Amount</label
-        >
-
-        <span class="text-xs text-gray-400"
-          >Available private balance:
-          {{ accountStore.formatBalanceFree(incogniteeSidechain) }}</span
-        >
-      </div>
-      <input
-        id="unshieldAmount"
-        v-model="unshieldAmount"
-        type="number"
-        step="0.1"
-        :min="1.1"
-        :max="
-          Math.min(
-            accountStore.getDecimalBalanceFree(incogniteeSidechain) -
-              accountStore.getDecimalExistentialDeposit(incogniteeSidechain) -
-              0.1,
-            shieldingLimit,
-          )
-        "
-        required
-        class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
-        style="border-color: #24ad7c"
-      />
-      <!-- Fee description -->
-      <div class="text-right">
-        <span class="text-xs text-gray-400"
-          >Fee: {{ formatDecimalBalance(INCOGNITEE_UNSHIELDING_FEE) }}
-          {{ accountStore.getSymbol }} for Incognitee</span
-        >
-      </div>
-
-      <div class="mt-8 w-full bg-gray-800">
-        <button
-          type="submit"
-          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-        >
-          Unshield
-        </button>
-      </div>
-    </form>
-  </OverlayDialog>
-
-  <!-- Receive -->
-  <OverlayDialog
-    :show="showReceiveOverlay"
-    :close="closeReceiveOverlay"
-    title="Receive"
-  >
-    <div class="mt-5">
-      <p class="text-sm text-gray-400 text-left my-4">
-        Share your address with the sender. You can either have them scan this
-        QR code or send them a private message.
-      </p>
-    </div>
-    <div class="mt-5 qrcode-container">
-      <qrcode :value="accountStore.getAddress"></qrcode>
-    </div>
-
-    <div class="flex flex-col mt-5">
-      <div
-        class="w-full mt-5 mb-2 text-sm font-medium leading-6 text-white font-semibold"
-      >
-        Your address:
-      </div>
-      <div class="relative flex items-center rounded-lg">
-        <input
-          id="accountAddress"
-          type="text"
-          :value="accountStore.getAddress"
-          readonly
-          class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
-          style="border-color: #24ad7c"
-        />
-        <div class="absolute right-3 flex space-x-2">
-          <div @click="copyOwnAddressToClipboard" class="cursor-pointer">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </OverlayDialog>
-
-  <!-- Send Privately -->
-  <OverlayDialog
-    :show="showPrivateSendOverlay && !showScanOverlay"
-    :close="closePrivateSendOverlay"
-    title="Send Privately"
-  >
-    <div class="mt-5">
-      <p class="text-sm text-gray-400 text-left my-4">
-        Sending privately means that only you and the recipient know who sent
-        how much to whom.
-      </p>
-    </div>
-    <form class="mt-5" @submit.prevent="submitSendForm">
-      <div class="flex flex-col">
-        <label
-          for="recipientAddress"
-          class="text-sm font-medium leading-6 text-white text-left"
-          >Recipient</label
-        >
-        <div class="relative flex items-center rounded-lg">
-          <input
-            id="recipientAddress"
-            v-model="recipientAddress"
-            type="text"
-            required
-            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
-            style="border-color: #24ad7c"
-            placeholder="Recipient"
-          />
-          <div class="absolute right-3 flex space-x-2">
-            <div @click="openScanOverlay" class="cursor-pointer">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="h-6 w-6 text-white"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
-                />
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="mt-10">
-        <!-- Label and available balance -->
-        <div class="flex justify-between items-center">
-          <label
-            for="sendAmount"
-            class="text-sm font-medium leading-6 text-white"
-            >{{ accountStore.getSymbol }} Amount</label
-          >
-
-          <span class="text-xs text-gray-400"
-            >Available private balance:
-            {{ accountStore.formatBalanceFree(incogniteeSidechain) }}</span
-          >
-        </div>
-
-        <!-- Input field -->
-        <div>
-          <input
-            id="sendAmount"
-            v-model="sendAmount"
-            type="number"
-            step="0.01"
-            :min="0.1"
-            :max="
-              accountStore.getDecimalBalanceFree(incogniteeSidechain) -
-              accountStore.getDecimalExistentialDeposit(incogniteeSidechain) -
-              0.1
-            "
-            required
-            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
-            style="border-color: #24ad7c"
-            placeholder="Amount"
-          />
-        </div>
-
-        <!-- Fee description -->
-        <div class="text-right">
-          <span class="text-xs text-gray-400"
-            >Fee: {{ formatDecimalBalance(INCOGNITEE_TX_FEE) }}
-            {{ accountStore.getSymbol }} for Incognitee</span
-          >
-        </div>
-      </div>
-
-      <!-- Messages -->
-      <div class="flex flex-col">
-        <label
-          for="paymentNote"
-          class="text-sm font-medium leading-6 text-white text-left"
-          >Note</label
-        >
-        <div class="relative flex items-center rounded-lg">
-          <textarea
-            id="messages"
-            v-model="sendPrivateNote"
-            rows="2"
-            ref="messageTextarea"
-            name="messages"
-            placeholder="Enter a private note for the recipient"
-            :maxlength="140"
-            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
-          ></textarea>
-        </div>
-      </div>
-
-      <div class="mt-8 bottom-0 left-0 w-full bg-gray-800">
-        <button
-          type="submit"
-          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-        >
-          Transfer
-        </button>
-      </div>
-    </form>
-  </OverlayDialog>
-
-  <!-- Guess The Number -->
-  <OverlayDialog
-    :show="showGuessTheNumberOverlay"
-    :close="closeGuessTheNumberOverlay"
-    title="Guess The Number"
-  >
-    <div class="my-3 text-gray-300 text-sm text-center">
-      <p>
-        Guess a number between 0-10000 and win a weekly giveaway! You can place
-        up to 10 guesses per round.
-      </p>
-    </div>
-
-    <div class="mx-auto">
-      <div class="grid grid-cols-1 md:grid-cols-1 gap-6 items-start">
-        <div>
-          <div
-            class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-3"
-          >
-            <dl class="flex flex-wrap">
-              <!-- round info -->
-              <div class="w-full flex justify-between px-6 pt-3">
-                <div class="flex-auto text-left mb-4 md:mb-0">
-                  <dt
-                    class="text-sm text-left font-semibold leading-6 text-gray-300"
-                  >
-                    Prize
-                  </dt>
-                  <dd
-                    class="mt-1 text-left text-base font-semibold leading-6 text-white mr-1"
-                  >
-                    {{
-                      formatDecimalBalance(
-                        guessTheNumberInfo?.winnings /
-                          Math.pow(10, accountStore.decimals),
-                      )
-                    }}
-                    {{ accountStore.getSymbol }}
-                  </dd>
-                </div>
-
-                <div class="flex-auto text-right">
-                  <dt class="text-sm font-semibold leading-6 text-gray-300">
-                    Current round ends
-                  </dt>
-                  <dd class="mt-1 text-base font-semibold leading-6 text-white">
-                    {{
-                      formatTimestamp(guessTheNumberInfo?.next_round_timestamp)
-                    }}
-                  </dd>
-                </div>
-              </div>
-              <!-- last round lucky number -->
-              <div
-                v-if="guessTheNumberInfo?.maybe_last_lucky_number.isSome"
-                class="mt-3 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-3"
-              >
-                <div class="flex-auto text-left mb-4 md:mb-0">
-                  <dt
-                    class="text-sm text-left font-semibold leading-6 text-gray-300"
-                  >
-                    Last lucky number
-                  </dt>
-                  <dd
-                    class="mt-1 text-left text-base font-semibold leading-6 text-white"
-                  >
-                    {{
-                      guessTheNumberInfo?.maybe_last_lucky_number ?? "unknown"
-                    }}
-                  </dd>
-                </div>
-
-                <div
-                  v-if="guessTheNumberInfo?.maybe_last_winning_distance > 0"
-                  class="flex-auto text-right"
-                >
-                  <dt class="text-sm font-semibold leading-6 text-gray-300">
-                    Last winning distance
-                  </dt>
-                  <dd class="mt-1 text-base font-semibold leading-6 text-white">
-                    {{ guessTheNumberInfo?.maybe_last_winning_distance }}
-                  </dd>
-                </div>
-              </div>
-              <!-- last round winners -->
-              <div
-                v-if="guessTheNumberInfo?.maybe_last_lucky_number.isSome"
-                class="mt-3 flex flex-col w-full flex-none gap-y-4 border-t border-gray-700 px-6 pt-3"
-              >
-                <div class="text-sm font-semibold leading-6 text-gray-300">
-                  Last lucky winners
-                </div>
-
-                <!-- Winner's address displayed under the last lucky number -->
-                <div
-                  class="text-sm leading-6 text-gray-400"
-                  v-html="gtnWinners"
-                />
-              </div>
-            </dl>
-          </div>
-        </div>
-
-        <div>
-          <div></div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="
-        accountStore.getDecimalBalanceTransferable(incogniteeSidechain) >
-        INCOGNITEE_GTN_GUESS_FEE
-      "
-      class="mb-4"
-    >
-      <form class="" @submit.prevent="submitGuessForm">
-        <!-- Label for the input -->
-        <div class="flex justify-between mb-2">
-          <label for="guess" class="text-sm font-medium leading-6 text-white"
-            >Enter your guess</label
-          >
-        </div>
-
-        <!-- Flex container for input and button -->
-        <div class="flex items-center space-x-4">
-          <!-- Guess Input Field -->
-          <div class="flex-grow relative">
-            <input
-              id="guess"
-              v-model="guess"
-              type="number"
-              step="1"
-              :min="0"
-              :max="10000"
-              required
-              class="w-full text-sm rounded-lg bg-cool-900 text-white placeholder-gray-500 border border-green-500"
-              style="border-color: #24ad7c"
-              placeholder="guess"
-            />
-          </div>
-
-          <!-- Submit Button -->
-          <div class="flex items-center justify-center">
-            <button
-              type="submit"
-              class="btn btn_gradient rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-              style="margin-left: auto; margin-right: auto"
-            >
-              Submit
-            </button>
-          </div>
-        </div>
-        <!-- Fee description below input, right-aligned -->
-        <div class="text-left right-0 mb-0">
-          <span class="text-xs text-gray-400"
-            >Fee: {{ formatDecimalBalance(INCOGNITEE_GTN_GUESS_FEE) }}
-            {{ accountStore.getSymbol }} for Incognitee</span
-          >
-        </div>
-      </form>
-    </div>
-    <div v-else>
-      <div class="rounded-md bg-yellow-50 p-4">
-        <div class="flex">
-          <div class="flex-shrink-0">
-            <svg
-              class="h-5 w-5 text-yellow-400"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-              data-slot="icon"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div class="ml-3">
-            <div class="text-left text-sm text-yellow-700">
-              <p>
-                You need at least
-                {{ formatDecimalBalance(INCOGNITEE_GTN_GUESS_FEE) }} private
-                {{ accountStore.getSymbol }} to participate in the game. Please
-                shield some first.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </OverlayDialog>
-
-  <!-- Scan QR -->
-  <OverlayDialog
-    :show="showScanOverlay"
-    :close="closeScanOverlay"
-    title="Scan recipient's QR code"
-  >
-    <div class="mt-6 qrcode-container">
-      <qrcode-stream @detect="onDecode"></qrcode-stream>
-    </div>
-  </OverlayDialog>
-
+  <div v-if="activeApp === 'wallet'">
+    <WalletTab
+      :show="true"
+      :isProd="isProd"
+      :isMobile="isMobile"
+      :api="shieldingTargetApi"
+      :isFetchingShieldingTargetBalance="isFetchingShieldingTargetBalance"
+      :isFetchingIncogniteeBalance="isFetchingIncogniteeBalance"
+      :disableGetter="disableGetter"
+      ref="walletTabRef"
+      :updateNotes="updateNotes"
+      :fetchOlderBucket="fetchOlderBucket"
+    />
+  </div>
+  <div v-else-if="activeApp === 'messaging'">
+    <MessagingTab :isMobile="isMobile" :updateNotes="updateNotes" />
+  </div>
+  <div v-else-if="activeApp === 'swap'"><SwapTab /></div>
+  <div v-else-if="activeApp === 'gov'"><GovTab /></div>
+  <div v-else-if="activeApp === 'teerdays'"><TeerDaysTab /></div>
   <!-- New Wallet -->
   <OverlayDialog
     :show="showNewWalletOverlay"
@@ -1075,91 +92,64 @@
     :onExtensionAccountChange="onExtensionAccountChange"
     :showTrustedGetterHint="true"
   />
-
-  <StatusOverlay
-    :tx-status="txStatus"
-    :show="showStatusOverlay"
-    :close="closeStatusOverlay"
-  />
 </template>
 
 <script setup lang="ts">
-import NetworkSelector from "@/components/ui/NetworkSelector.vue";
-import PublicPrivateBalanceSwitcher from "@/components/ui/PublicPrivateBalanceSwitcher.vue";
-import BalanceInteractorContainer from "@/components/ui/BalanceInteractorContainer.vue";
-import PrivateTxHistory from "@/components/ui/PrivateTxHistory.vue";
-import StatusOverlay from "@/components/ui/StatusOverlay.vue";
-import ChooseWalletOverlay from "@/components/ui/ChooseWalletOverlay.vue";
+import WalletTab from "~/components/tabs/WalletTab.vue";
+import ChooseWalletOverlay from "~/components/overlays/ChooseWalletOverlay.vue";
 import { computed } from "vue";
 import { chainConfigs } from "@/configs/chains.ts";
 import { useAccount } from "@/store/account.ts";
 import { useIncognitee } from "@/store/incognitee.ts";
-import OverlayDialog from "@/components/ui/OverlayDialog.vue";
+import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
 import { ApiPromise, WsProvider } from "@polkadot/api";
 import { Keyring } from "@polkadot/keyring";
 import { hexToU8a, u8aToHex } from "@polkadot/util";
-import { encodeAddress } from "@polkadot/util-crypto";
-import { TypeRegistry, u32 } from "@polkadot/types";
 import {
   cryptoWaitReady,
+  encodeAddress,
   mnemonicGenerate,
   mnemonicToMiniSecret,
 } from "@polkadot/util-crypto";
 import { useInterval } from "@vueuse/core";
 import { onUnmounted, onMounted, ref, watch } from "vue";
-import Qrcode from "vue-qrcode";
-import { QrcodeStream } from "vue-qrcode-reader";
 import { useRouter } from "vue-router";
 import { eventBus } from "@/helpers/eventBus";
-import InfoBanner from "~/components/ui/InfoBanner.vue";
-import CampaignBanner from "~/components/ui/CampaignBanner.vue";
 import {
-  extensionAccounts,
   connectExtension,
   injectorForAddress,
 } from "@/lib/signerExtensionUtils";
 import {
   loadEnv,
   shieldingTarget,
-  shieldingLimit,
   incogniteeSidechain,
   incogniteeShard,
   isLive,
 } from "@/lib/environmentConfig";
-import ObtainTokenOverlay from "@/components/ui/ObtainTokenOverlay.vue";
-import { formatDecimalBalance } from "@/helpers/numbers";
-import {
-  INCOGNITEE_GTN_GUESS_FEE,
-  INCOGNITEE_SHIELDING_FEE_FRACTION,
-  INCOGNITEE_TX_FEE,
-  INCOGNITEE_UNSHIELDING_FEE,
-} from "../configs/incognitee";
-import { useSystemHealth, Health } from "@/store/systemHealth";
-import WarningBanner from "@/components/ui/WarningBanner.vue";
+import { useSystemHealth } from "@/store/systemHealth";
+import { useNotes } from "~/store/notes";
+import { formatMoment } from "~/helpers/date";
+import { Note, NoteDirection } from "~/lib/notes";
+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";
 
 const router = useRouter();
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
 const systemHealth = useSystemHealth();
-const privateTxHistoryRef = ref(null);
+
+const walletTabRef = ref(null);
 const isFetchingShieldingTargetBalance = ref(true);
 const isFetchingIncogniteeBalance = ref(true);
 const isUpdatingIncogniteeBalance = ref(false);
 const isChoosingAccount = ref(false);
 const disableGetter = ref(false);
-const isSignerBusy = ref(false);
-const txStatus = ref("");
-const recipientAddress = ref("");
-const sendAmount = ref(1.0);
-const sendPrivateNote = ref("");
-const shieldAmount = ref(11.0);
-const unshieldAmount = ref(10.0);
-const guess = ref(null);
-const guessTheNumberInfo = ref(null);
-const scanResult = ref("No QR code data yet");
+const activeApp = ref("wallet");
 const faucetUrl = ref(null);
 const forceLive = ref(false);
-
+const shieldingTargetApi = ref<ApiPromise | null>(null);
 const isProd = computed(
   () => chainConfigs[shieldingTarget.value].faucetUrl === undefined,
 );
@@ -1171,284 +161,6 @@ const onExtensionAccountChange = async (selectedAddress) => {
   isUpdatingIncogniteeBalance.value = false;
 };
 
-let api: ApiPromise | null = null;
-
-const currentTab = ref("public");
-
-const selectTab = (tab) => {
-  currentTab.value = tab;
-};
-
-const submitSendForm = () => {
-  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
-    alert(
-      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
-    );
-    return;
-  }
-  openStatusOverlay();
-  closePrivateSendOverlay();
-  sendPrivately();
-};
-const submitShieldForm = async () => {
-  // double check input values here
-  // fixme: why is this necessary? it seems computed max will not be enforced otherwise
-  if (shieldAmount.value > computedShieldingMax.value) {
-    alert(
-      `Shield amount exceeds the maximum allowed value of ${computedShieldingMax.value}`,
-    );
-    return;
-  }
-  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
-    alert(
-      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
-    );
-    return;
-  }
-  openStatusOverlay();
-  closeShieldOverlay();
-  await shield();
-};
-const submitUnshieldForm = async () => {
-  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
-    alert(
-      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
-    );
-    return;
-  }
-  openStatusOverlay();
-  closeUnshieldOverlay();
-  await unshield();
-};
-const submitGuessForm = async () => {
-  if (systemHealth.getSidechainSystemHealth.overall() !== Health.Healthy) {
-    alert(
-      "Sidechain health currently can't be assessed. Please wait for a green health indicator and try again",
-    );
-    return;
-  }
-  openStatusOverlay();
-  closeGuessTheNumberOverlay();
-  await submitGuess();
-};
-const setRecipientAddressToSelf = () => {
-  recipientAddress.value = accountStore.getAddress;
-};
-
-const onDecode = (decodeResult) => {
-  console.log("QR scan decoded: " + decodeResult[0].rawValue);
-  scanResult.value = decodeResult[0].rawValue;
-  recipientAddress.value = decodeResult[0].rawValue;
-  closeScanOverlay();
-};
-
-const txResHandlerShieldingTarget = ({ events = [], status, txHash }) => {
-  status.isFinalized
-    ? (txStatus.value = `😀 Finalized. Finalized. You should see your Incognitee balance increase in seconds. Please move to the Private Balance tab`)
-    : (txStatus.value = `⌛ Current transaction status: ${status.type}. please be patient a few more seconds. you should see your L1 balance going down`);
-  isSignerBusy.value = false;
-  // Loop through Vec<EventRecord> to display all events
-  events.forEach(({ _, event: { data, method, section } }) => {
-    if (section + ":" + method === "system:ExtrinsicFailed") {
-      // extract the data for this event
-      const [dispatchError, dispatchInfo] = data;
-      console.log(`dispatchinfo: ${dispatchInfo}`);
-      let errorInfo;
-
-      // decode the error
-      if (dispatchError.isModule) {
-        // for module errors, we have the section indexed, lookup
-        // (For specific known errors, we can also do a check against the
-        // api.errors.<module>.<ErrorName>.is(dispatchError.asModule) guard)
-        const mod = dispatchError.asModule;
-        const error = api.registry.findMetaError(
-          new Uint8Array([
-            mod.index.toNumber(),
-            bnFromHex(mod.error.toHex().slice(0, 4)).toNumber(),
-          ]),
-        );
-        const message = `${error.section}.${error.name}${
-          Array.isArray(error.docs)
-            ? `(${error.docs.join("")})`
-            : error.docs || ""
-        }`;
-
-        errorInfo = `${message}`;
-        console.log(`Error-info::${JSON.stringify(error)}`);
-      } else {
-        // Other, CannotLookup, BadOrigin, no extra info
-        errorInfo = dispatchError.toString();
-      }
-      txStatus.value = `😞 Transaction Failed! ${section}.${method}::${errorInfo}`;
-    } else if (section + ":" + method === "system:ExtrinsicSuccess") {
-      console.log(
-        `✅ Transaction successful with status: ${status} hash: ${txHash}`,
-      );
-    }
-  });
-};
-
-const txErrHandlerShieldingTarget = (err) =>
-  (txStatus.value = `😞 Transaction Failed: ${err.toString()}`);
-
-const handleTopResult = (result, successMsg?) => {
-  console.log("TOP result: " + result);
-  if (result) {
-    if (result.status.isInSidechainBlock) {
-      if (successMsg) {
-        txStatus.value = successMsg;
-      } else {
-        txStatus.value =
-          "😀 included in sidechain block: " + result.status.asInSidechainBlock;
-      }
-      //update history to see successfuly action immediately
-      privateTxHistoryRef.value?.updateNotes();
-      return;
-    }
-    if (result.status.isInvalid) {
-      txStatus.value = "😞 Invalid (unspecified reason)";
-      return;
-    }
-  }
-  console.error(`unknown result: ${result}`);
-  txStatus.value = "😞 Unknown Result";
-};
-
-const handleTopError = (err) => {
-  console.error(`error: ${err}`);
-  txStatus.value = `😞 Submission Failed: ${err}`;
-};
-
-const shield = async () => {
-  console.log("shielding .....");
-  if (isSignerBusy.value) {
-    // fixme! this is a hack. don't know why extension pops up twice without this
-    console.log("signer busy. aborting repeated attempt...");
-    return;
-  }
-  isSignerBusy.value = true;
-  txStatus.value = "⌛ awaiting signature and connection";
-  if (incogniteeStore.vault && api?.isReady) {
-    const amount = accountStore.decimalAmountToBigInt(shieldAmount.value);
-    console.log(`sending ${amount} to vault: ${incogniteeStore.vault}`);
-
-    await api.tx.balances
-      .transferKeepAlive(incogniteeStore.vault, amount)
-      .signAsync(accountStore.account, {
-        signer: accountStore.injector?.signer,
-      })
-      .then((tx) => tx.send(txResHandlerShieldingTarget))
-      .catch(txErrHandlerShieldingTarget);
-  }
-};
-
-const unshield = async () => {
-  console.log("will unshield 30% of your private funds to same account on L1");
-  txStatus.value = "⌛ will unshield to L1";
-  const amount = accountStore.decimalAmountToBigInt(unshieldAmount.value);
-  const account = accountStore.account;
-  const nonce = new u32(
-    new TypeRegistry(),
-    accountStore.nonce[incogniteeSidechain.value],
-  );
-  console.log(
-    `sending ${unshieldAmount.value} from ${accountStore.getAddress} publicly (nonce:${nonce}) to ${recipientAddress.value} on L1 (shard: ${incogniteeStore.shard})`,
-  );
-
-  await incogniteeStore.api
-    .balanceUnshieldFunds(
-      account,
-      incogniteeStore.shard,
-      incogniteeStore.fingerprint,
-      accountStore.getAddress,
-      recipientAddress.value,
-      amount,
-      {
-        signer: accountStore.injector?.signer,
-        nonce: nonce,
-      },
-    )
-    .then((result) =>
-      handleTopResult(
-        result,
-        "😀 Successfully triggered unshielding process. You should see the unshielded funds appear on L1 in seconds",
-      ),
-    )
-    .catch((err) => handleTopError(err));
-  //todo: manually inc nonce locally avoiding clashes with fetchIncogniteeBalance
-};
-
-const sendPrivately = async () => {
-  console.log("sending funds on incognitee");
-  txStatus.value = "⌛ sending funds privately on incognitee";
-  const amount = accountStore.decimalAmountToBigInt(sendAmount.value);
-  const account = accountStore.account;
-
-  const encoder = new TextEncoder();
-  const byteLength = encoder.encode(sendPrivateNote.value).length;
-  // fixme: https://github.com/encointer/encointer-js/issues/123
-  if (byteLength > 161) {
-    alert(
-      "Note is too long when encoded to UTF-8. Please keep it under 162 bytes.",
-    );
-    return;
-  }
-  const note = sendPrivateNote.value.length > 0 ? sendPrivateNote.value : null;
-  const nonce = new u32(
-    new TypeRegistry(),
-    accountStore.nonce[incogniteeSidechain.value],
-  );
-  console.log(
-    `sending ${sendAmount.value} from ${account.address} privately to ${recipientAddress.value} with nonce ${nonce} and note: ${note}`,
-  );
-
-  await incogniteeStore.api
-    .trustedBalanceTransfer(
-      account,
-      incogniteeStore.shard,
-      incogniteeStore.fingerprint,
-      accountStore.getAddress,
-      recipientAddress.value,
-      amount,
-      note,
-      {
-        signer: accountStore.injector?.signer,
-        nonce: nonce,
-      },
-    )
-    .then((result) => handleTopResult(result, "😀 Balance transfer successful"))
-    .catch((err) => handleTopError(err));
-  //todo: manually inc nonce locally avoiding clashes with fetchIncogniteeBalance
-};
-
-const submitGuess = async () => {
-  console.log("submit guess: ", guess.value);
-  txStatus.value = "⌛ privately submitting your guess to incognitee";
-  const account = accountStore.account;
-  const nonce = new u32(
-    new TypeRegistry(),
-    accountStore.nonce[incogniteeSidechain.value],
-  );
-  console.log(
-    `sending guess ${guess.value} from ${account.address} privately to incognitee`,
-  );
-
-  await incogniteeStore.api
-    .guessTheNumber(
-      account,
-      incogniteeStore.shard,
-      incogniteeStore.fingerprint,
-      guess.value,
-      {
-        signer: accountStore.injector?.signer,
-        nonce: nonce,
-      },
-    )
-    .then((result) => handleTopResult(result, "😀 Guess submission successful"))
-    .catch((err) => handleTopError(err));
-  //todo: manually inc nonce locally avoiding clashes with fetchIncogniteeBalance
-};
-
 const getterMap: { [address: string]: any } = {};
 
 const fetchIncogniteeBalance = async () => {
@@ -1521,41 +233,18 @@ const fetchIncogniteeBalance = async () => {
     });
 };
 
-const fetchGuessTheNumberInfo = async () => {
-  if (!incogniteeStore.apiReady) return;
-  console.log("fetch guess the number info");
-  const getter = incogniteeStore.api.guessTheNumberInfoGetter(
-    incogniteeStore.shard,
-  );
-  await getter.send().then((info) => {
-    console.log(`guess the number info: ${info}`);
-    guessTheNumberInfo.value = info;
-  });
-};
-
-const gtnWinners = computed(() => {
-  if (guessTheNumberInfo.value) {
-    const winners = [];
-    for (const winner of guessTheNumberInfo.value.last_winners) {
-      winners.push(
-        encodeAddress(winner, accountStore.getSs58Format).slice(0, 8) + "...",
-      );
-    }
-    return winners.join("<br>");
-  }
-  return "no one";
-});
-
 const fetchNetworkStatus = async () => {
   const promises = [];
-  if (api?.isReady) {
-    const p = api.rpc.chain.getFinalizedHead().then((head) => {
-      api.rpc.chain.getBlock(head).then((block) => {
-        console.log(
-          `finalized L1 block number, according to L1 api: ${block.block.header.number}`,
-        );
+  if (shieldingTargetApi.value?.isReady) {
+    const p = shieldingTargetApi.value.rpc.chain
+      .getFinalizedHead()
+      .then((head) => {
+        shieldingTargetApi.value.rpc.chain.getBlock(head).then((block) => {
+          console.log(
+            `finalized L1 block number, according to L1 api: ${block.block.header.number}`,
+          );
+        });
       });
-    });
     promises.push(p);
   }
   if (!incogniteeStore.apiReady) return;
@@ -1586,6 +275,247 @@ const fetchNetworkStatus = async () => {
   await Promise.all(promises);
 };
 
+const noteBucketsInfo = ref(null);
+const firstNoteBucketIndexFetched = ref(null);
+let lastAccount = null;
+let lastBucketIndex = null;
+const noteStore = useNotes();
+const updateNotes = async () => {
+  console.log("updateNotes called");
+  if (accountStore.account !== lastAccount) {
+    console.log("account changed, purging note history...");
+    noteStore.purgeAll();
+  }
+  lastAccount = accountStore.account;
+  await fetchNoteBucketsInfo();
+  if (noteBucketsInfo.value?.last.unwrap().index <= lastBucketIndex) {
+    console.log("bucket didn't change");
+  } else {
+    lastBucketIndex = noteBucketsInfo.value?.last.unwrap().index;
+    console.log("lastBucketIndex=" + lastBucketIndex);
+  }
+  await fetchIncogniteeNotes(lastBucketIndex, true);
+};
+const fetchNoteBucketsInfo = async () => {
+  if (!incogniteeStore.apiReady) return;
+  console.log("fetch note buckets info");
+  const getter = incogniteeStore.api.noteBucketsInfoGetter(
+    incogniteeStore.shard,
+  );
+  await getter.send().then((info) => {
+    console.log(`note buckets info: ${info}`);
+    noteBucketsInfo.value = info;
+  });
+};
+const fetchOlderBucket = async () => {
+  const index = firstNoteBucketIndexFetched.value
+    ? firstNoteBucketIndexFetched.value - 1
+    : lastBucketIndex;
+  console.log("fetchOlderBuckets : " + firstNoteBucketIndexFetched.value);
+  await fetchIncogniteeNotes(index);
+  firstNoteBucketIndexFetched.value = index;
+};
+
+const fetchIncogniteeNotes = async (
+  bucketIndex: number,
+  skip_if_signer_needed: boolean,
+) => {
+  if (!incogniteeStore.apiReady) return;
+  if (!accountStore.account) return;
+
+  if (disableGetter.value == true) {
+    console.log(
+      "[fetchIncogniteeNotes] getter disabled. reconnect your account to enable again...",
+    );
+    return;
+  }
+  const mapKey = `notesFor:${accountStore.account}:${bucketIndex}`;
+  const injector = accountStore.hasInjector ? accountStore.injector : null;
+  try {
+    if (!getterMap[mapKey]) {
+      if (injector) {
+        if (skip_if_signer_needed) {
+          console.log(
+            "skipping automated fetchIncogniteeNotes because signer is needed",
+          );
+          return;
+        } else {
+          console.debug(
+            `fetching incognitee notes needs signing in extension: ${injector.name}`,
+          );
+        }
+      }
+      getterMap[mapKey] = await incogniteeStore.api.notesForTrustedGetter(
+        accountStore.account,
+        bucketIndex,
+        incogniteeStore.shard,
+        { signer: injector?.signer },
+      );
+    } else {
+      console.debug(`fetching incognitee notes using cached getter`);
+    }
+  } catch (e) {
+    // this will be the case if we click on cancel in the extension popup.
+    console.error(e);
+    disableGetter.value = true;
+    return;
+  }
+
+  await getterMap[mapKey]
+    .send()
+    .then((notes) => {
+      console.debug(
+        `notes for ${accountStore.getAddress} on shard ${incogniteeStore.shard} in bucket ${bucketIndex}:`,
+      );
+      for (const note of notes) {
+        if (note.note.isSuccessfulTrustedCall) {
+          const call = incogniteeStore.api.createType(
+            "IntegriteeTrustedCall",
+            note.note.asSuccessfulTrustedCall,
+          );
+          if (call.isBalanceShield) {
+            const typedCall = call.asBalanceShield;
+            console.debug(
+              `[${formatMoment(note.timestamp?.toNumber())}] balance shield: ${typedCall}`,
+            );
+            const to = encodeAddress(typedCall[1], accountStore.getSs58Format);
+            noteStore.addNote(
+              new Note(
+                "Shield",
+                NoteDirection.Incoming,
+                to,
+                BigInt(typedCall[2]),
+                new Date(note.timestamp?.toNumber()),
+                null,
+              ),
+            );
+          } else if (call.isBalanceUnshield) {
+            const typedCall = call.asBalanceUnshield;
+            console.debug(
+              `[${formatMoment(note.timestamp?.toNumber())}] balance unshield: ${typedCall}`,
+            );
+            const to = encodeAddress(typedCall[1], accountStore.getSs58Format);
+            noteStore.addNote(
+              new Note(
+                "Unshield",
+                NoteDirection.Outgoing,
+                to,
+                BigInt(typedCall[2]),
+                new Date(note.timestamp?.toNumber()),
+                null,
+              ),
+            );
+          } else if (call.isBalanceTransfer) {
+            const typedCall = call.asBalanceTransfer;
+            console.debug(
+              `[${formatMoment(note.timestamp?.toNumber())}] balance transfer: ${typedCall}`,
+            );
+            const from = encodeAddress(
+              typedCall[0],
+              accountStore.getSs58Format,
+            );
+            const to = encodeAddress(typedCall[1], accountStore.getSs58Format);
+            if (from === accountStore.getAddress) {
+              noteStore.addNote(
+                new Note(
+                  "Outgoing Transfer",
+                  NoteDirection.Outgoing,
+                  to,
+                  BigInt(typedCall[2]),
+                  new Date(note.timestamp?.toNumber()),
+                  null,
+                ),
+              );
+            } else if (to === accountStore.getAddress) {
+              noteStore.addNote(
+                new Note(
+                  "Incoming Transfer",
+                  NoteDirection.Incoming,
+                  from,
+                  BigInt(typedCall[2]),
+                  new Date(note.timestamp?.toNumber()),
+                  null,
+                ),
+              );
+            } else {
+              console.error(
+                `[${formatMoment(note.timestamp?.toNumber())}] unknown relation to transfer: ${typedCall}`,
+              );
+            }
+          } else if (call.isBalanceTransferWithNote) {
+            const typedCall = call.asBalanceTransferWithNote;
+            console.debug(
+              `[${formatMoment(note.timestamp?.toNumber())}] balance transfer with note: ${typedCall}`,
+            );
+            const from = encodeAddress(
+              typedCall[0],
+              accountStore.getSs58Format,
+            );
+            const to = encodeAddress(typedCall[1], accountStore.getSs58Format);
+            if (from === accountStore.getAddress) {
+              noteStore.addNote(
+                new Note(
+                  "Outgoing Transfer",
+                  NoteDirection.Outgoing,
+                  to,
+                  BigInt(typedCall[2]),
+                  new Date(note.timestamp?.toNumber()),
+                  typedCall[3].toString(),
+                ),
+              );
+            } else if (to === accountStore.getAddress) {
+              noteStore.addNote(
+                new Note(
+                  "Incoming Transfer",
+                  NoteDirection.Incoming,
+                  from,
+                  BigInt(typedCall[2]),
+                  new Date(note.timestamp?.toNumber()),
+                  typedCall[3].toString(),
+                ),
+              );
+            } else {
+              console.error(
+                `[${formatMoment(note.timestamp?.toNumber())}] unknown relation to transfer: ${typedCall}`,
+              );
+            }
+          } else if (call.isGuessTheNumber) {
+            const typedCall = call.asGuessTheNumber.asGuess;
+            console.debug(
+              `[${formatMoment(note.timestamp?.toNumber())}] guess the number: ${typedCall}`,
+            );
+            noteStore.addNote(
+              new Note(
+                `Submit Guess (${typedCall[1]})`,
+                NoteDirection.None,
+                null,
+                null,
+                new Date(note.timestamp?.toNumber()),
+                null,
+              ),
+            );
+          } else {
+            console.error(
+              `[${formatMoment(note.timestamp?.toNumber())}] unknown call: ${call}`,
+            );
+          }
+        }
+      }
+    })
+    .catch((err) => {
+      console.error(`[fetchIncogniteeNotes] error ${err}`);
+    });
+  if (
+    firstNoteBucketIndexFetched.value !== null &&
+    firstNoteBucketIndexFetched.value <= bucketIndex
+  ) {
+    console.log("first note bucket fetched didn't change");
+  } else {
+    console.log("first note bucket fetched is now " + bucketIndex);
+    firstNoteBucketIndexFetched.value = bucketIndex;
+  }
+};
+
 const pollCounter = useInterval(2000);
 watch(pollCounter, async () => {
   await fetchIncogniteeBalance();
@@ -1599,7 +529,7 @@ watch(
 
 const subscribeWhatsReady = async () => {
   //todo! only reinitialize if account changes
-  if (api?.isReady) {
+  if (shieldingTargetApi.value?.isReady) {
     //console.log("skipping api init. It seems the ShieldingTarget api is already subscribed to balance changes");
     return;
   }
@@ -1608,24 +538,28 @@ const subscribeWhatsReady = async () => {
   console.log(
     "trying to init api at " + chainConfigs[shieldingTarget.value].api,
   );
-  api = await ApiPromise.create({ provider: wsProvider });
-  await api.isReady;
+  shieldingTargetApi.value = await ApiPromise.create({ provider: wsProvider });
+  await shieldingTargetApi.value.isReady;
   accountStore.setExistentialDeposit(
-    BigInt(api.consts.balances.existentialDeposit),
+    BigInt(shieldingTargetApi.value.consts.balances.existentialDeposit),
+  );
+  accountStore.setDecimals(
+    Number(shieldingTargetApi.value.registry.chainDecimals),
+  );
+  accountStore.setSS58Format(
+    Number(shieldingTargetApi.value.registry.chainSS58),
   );
-  accountStore.setDecimals(Number(api.registry.chainDecimals));
-  accountStore.setSS58Format(Number(api.registry.chainSS58));
-  accountStore.setSymbol(String(api.registry.chainTokens));
+  accountStore.setSymbol(String(shieldingTargetApi.value.registry.chainTokens));
   console.log(
     "api-reported genesis hash for shielding target: " +
-      api.genesisHash.toHex().toString(),
+      shieldingTargetApi.value.genesisHash.toHex().toString(),
   );
   systemHealth.setShieldingTargetApiGenesisHashHex(
-    api.genesisHash.toHex().toString(),
+    shieldingTargetApi.value.genesisHash.toHex().toString(),
   );
 
   // await is quick as we only subscribe
-  await api.rpc.chain.subscribeNewHeads((lastHeader) => {
+  await shieldingTargetApi.value.rpc.chain.subscribeNewHeads((lastHeader) => {
     systemHealth.observeShieldingTargetBlockNumber(
       lastHeader.number.toNumber(),
     );
@@ -1649,7 +583,7 @@ const subscribeWhatsReady = async () => {
   }
 
   const promises = [];
-  const p1 = api.query.system.account(
+  const p1 = shieldingTargetApi.value.query.system.account(
     accountStore.getAddress,
     ({
       data: {
@@ -1684,26 +618,28 @@ const subscribeWhatsReady = async () => {
     console.log("fetched incognitee balance"),
   );
   promises.push(p2);
-
   await Promise.all(promises);
+  walletTabRef.value?.onWalletInfoInitialized();
+};
 
-  if (accountStore.getDecimalBalanceTransferable(shieldingTarget.value) === 0) {
-    if (
-      accountStore.getDecimalBalanceTransferable(incogniteeSidechain.value) > 0
-    ) {
-      console.log("account has funds on incognitee. selecting private tab");
-      selectTab("private");
-    }
-  }
+const switchToWallet = () => {
+  activeApp.value = "wallet";
 };
-const copyOwnAddressToClipboard = () => {
-  navigator.clipboard
-    .writeText(accountStore.getAddress)
-    .then(() =>
-      alert(
-        "copied your account address to clipboard. Please paste it into the address field on the faucet.",
-      ),
-    );
+
+const switchToMessaging = () => {
+  activeApp.value = "messaging";
+};
+
+const switchToSwap = () => {
+  activeApp.value = "swap";
+};
+
+const switchToGov = () => {
+  activeApp.value = "gov";
+};
+
+const switchToTeerDays = () => {
+  activeApp.value = "teerdays";
 };
 
 onMounted(async () => {
@@ -1715,12 +651,22 @@ onMounted(async () => {
     incogniteeShard.value,
   );
   eventBus.on("addressClicked", openChooseWalletOverlay);
-  const seedHex = router.currentRoute.value.query.seed;
+  eventBus.on("switchToWallet", switchToWallet);
+  eventBus.on("switchToMessaging", switchToMessaging);
+  eventBus.on("switchToSwap", switchToSwap);
+  eventBus.on("switchToGov", switchToGov);
+  eventBus.on("switchToTeerDays", switchToTeerDays);
+
   const injectedAddress = router.currentRoute.value.query.address;
   if (router.currentRoute.value.query.forceLive) {
     forceLive.value = true;
     console.log("forcing live status to true");
   }
+  const initActiveApp = router.currentRoute.value.query.app;
+  if (initActiveApp) {
+    activeApp.value = initActiveApp;
+  }
+  const seedHex = router.currentRoute.value.query.seed;
   if (seedHex) {
     console.log("found seed in url: " + seedHex);
     await cryptoWaitReady().then(() => {
@@ -1748,7 +694,6 @@ onMounted(async () => {
     // if we move back from TEERdays, the account may already be selected and the subscription watcher won't trigger
     await subscribeWhatsReady();
   }
-  await privateTxHistoryRef.value?.updateNotes();
 });
 
 onUnmounted(() => {
@@ -1758,8 +703,8 @@ onUnmounted(() => {
 
 const dropSubscriptions = () => {
   console.log("dropping subscriptions");
-  api?.disconnect();
-  api = null;
+  shieldingTargetApi.value?.disconnect();
+  shieldingTargetApi.value = null;
   isFetchingIncogniteeBalance.value = true;
   disableGetter.value = false;
   accountStore.setInjector(null);
@@ -1792,35 +737,6 @@ const createTestingAccount = async () => {
   });
 };
 
-const computedShieldingMax = computed(() => {
-  return Math.max(
-    0,
-    Math.min(
-      shieldingLimit.value -
-        accountStore.getDecimalBalanceFree(incogniteeSidechain.value),
-      accountStore.getDecimalBalanceTransferable(shieldingTarget.value) -
-        accountStore.getDecimalExistentialDeposit(shieldingTarget.value) -
-        0.1,
-    ),
-  );
-});
-
-const showAssetsInfo = ref(false);
-const openAssetsInfo = () => {
-  showAssetsInfo.value = true;
-};
-const closeAssetsInfo = () => {
-  showAssetsInfo.value = false;
-};
-
-const showPrivacyInfo = ref(false);
-const openPrivacyInfo = () => {
-  showPrivacyInfo.value = true;
-};
-const closePrivacyInfo = () => {
-  showPrivacyInfo.value = false;
-};
-
 const showNewWalletOverlay = ref(false);
 const openNewWalletOverlay = () => {
   if (!enableActions.value) {
@@ -1848,150 +764,12 @@ const closeChooseWalletOverlay = () => {
   showChooseWalletOverlay.value = false;
 };
 
-const showShieldOverlay = ref(false);
-const openShieldOverlay = () => {
-  if (!enableActions.value) {
-    console.error("network not live");
-    return;
-  }
-  shieldAmount.value = Math.floor(
-    Math.min(shieldAmount.value, computedShieldingMax.value),
-  );
-  showShieldOverlay.value = true;
-};
-const closeShieldOverlay = () => {
-  showShieldOverlay.value = false;
-};
-
-const showFaucetOverlay = ref(false);
-const openFaucetOverlay = () => {
-  if (!enableActions.value) {
-    console.error("network not live");
-    return;
-  }
-  showFaucetOverlay.value = true;
-};
-const closeFaucetOverlay = () => {
-  showFaucetOverlay.value = false;
-};
-
-const showObtainTokenOverlay = ref(false);
-const openObtainTokenOverlay = () => {
-  if (!enableActions.value) {
-    console.error("network not live");
-    return;
-  }
-  showObtainTokenOverlay.value = true;
-};
-const closeObtainTokenOverlay = () => {
-  showObtainTokenOverlay.value = false;
-};
-
-const showUnshieldOverlay = ref(false);
-const openUnshieldOverlay = () => {
-  if (!enableActions.value) {
-    console.error("network not live");
-    return;
-  }
-  unshieldAmount.value = Math.floor(
-    Math.min(10, accountStore.getDecimalBalanceFree(incogniteeSidechain.value)),
-  );
-  showUnshieldOverlay.value = true;
-};
-const closeUnshieldOverlay = () => {
-  showUnshieldOverlay.value = false;
-};
-const showReceiveOverlay = ref(false);
-const openReceiveOverlay = () => {
-  if (!enableActions.value) {
-    console.error("network not live");
-    return;
-  }
-  showReceiveOverlay.value = true;
-};
-const closeReceiveOverlay = () => {
-  showReceiveOverlay.value = false;
-};
-const showPrivateSendOverlay = ref(false);
-const openPrivateSendOverlay = () => {
-  if (!enableActions.value) {
-    console.error("network not live");
-    return;
-  }
-  console.debug(
-    `openPrivateSendOverlay (scanoverlay=${showScanOverlay.value})`,
-  );
-  sendAmount.value = Math.floor(
-    Math.min(
-      sendAmount.value,
-      accountStore.getDecimalBalanceFree(incogniteeSidechain.value) - 0.1,
-    ),
-  );
-  showPrivateSendOverlay.value = true;
-};
-const closePrivateSendOverlay = () => {
-  console.debug("closePrivateSendOverlay");
-  showPrivateSendOverlay.value = false;
-};
-
-const showGuessTheNumberOverlay = ref(false);
-const openGuessTheNumberOverlay = () => {
-  if (!enableActions.value) {
-    console.error("network not live");
-    return;
-  }
-  console.log(
-    `openGuessTheNumberOverlay (scanoverlay=${showScanOverlay.value})`,
-  );
-  fetchGuessTheNumberInfo();
-  showGuessTheNumberOverlay.value = true;
-};
-const closeGuessTheNumberOverlay = () => {
-  console.log("closeGuessTheNumberOverlay");
-  showGuessTheNumberOverlay.value = false;
-};
-
-const showScanOverlay = ref(false);
-const openScanOverlay = () => {
-  scanResult.value = "No QR code data yet";
-  showScanOverlay.value = true;
-};
-const closeScanOverlay = () => {
-  console.debug("closeScanOverlay");
-  showScanOverlay.value = false;
-};
-const showStatusOverlay = ref(false);
-const openStatusOverlay = () => {
-  showStatusOverlay.value = true;
-};
-const closeStatusOverlay = () => {
-  showStatusOverlay.value = false;
-  showPrivateSendOverlay.value = false;
-  showShieldOverlay.value = false;
-  showUnshieldOverlay.value = false;
-};
-
 const isMobile = ref(false);
 
 // Überwache die Bildschirmgröße und aktualisiere den isMobile-Wert
 const checkIfMobile = () => {
   isMobile.value = window.matchMedia("(max-width: 768px)").matches;
 };
-const formatTimestamp = (timestamp: number | null) => {
-  if (!timestamp) return "undefined";
-  console.log("formatting epoch: " + timestamp);
-  const date = new Date(timestamp.toNumber());
-  const options: Intl.DateTimeFormatOptions = {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-    timeZoneName: "short",
-  };
-  return new Intl.DateTimeFormat("de-CH", options).format(date);
-};
 
 const enableActions = computed(() => {
   return isLive.value || forceLive.value;
@@ -1999,29 +777,10 @@ const enableActions = computed(() => {
 </script>
 
 <style scoped>
-.currency-box {
-  position: relative;
-  outline: none; /* Keine Outline standardmäßig */
-}
-
-.currency-box:hover {
-  outline: 2px solid var(--incognitee-green); /* Verwende outline statt border */
-}
-
-.text-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .border-green-500 {
   border-color: #24ad7c;
 }
 
-.bg-gray-800 {
-  background-color: #1f2937;
-}
-
 .text-white {
   color: #ffffff;
 }
@@ -2048,13 +807,6 @@ hr {
   height: 1px; /* Adjust as needed */
 }
 
-.qrcode-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-
 .form-container input {
   background-color: #333;
   color: #fff; /* You might want to change the text color to ensure it's readable against the dark background */
@@ -2066,16 +818,6 @@ hr {
   width: 50%; /* Reduce the width by 50% */
 }
 
-.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);
diff --git a/pages/teerdays-lp.vue b/pages/teerdays-lp.vue
index 0a29dc5..353a051 100644
--- a/pages/teerdays-lp.vue
+++ b/pages/teerdays-lp.vue
@@ -61,7 +61,7 @@
         </div>
       </div>
       <div class="mt-10 flex">
-        <a href="/teerdays" target="_blank">
+        <a href="/?app=teerdays" target="_blank">
           <button
             class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white mr-5"
           >
@@ -655,7 +655,7 @@ import { chainConfigs } from "@/configs/chains.ts";
 import { XMarkIcon } from "@heroicons/vue/20/solid";
 import { loadEnv, integriteeNetwork } from "@/lib/environmentConfig";
 import { Bond } from "@/lib/teerDays";
-import ChooseWalletOverlay from "~/components/ui/ChooseWalletOverlay.vue";
+import ChooseWalletOverlay from "~/components/overlays/ChooseWalletOverlay.vue";
 import InfoBanner from "~/components/ui/InfoBanner.vue";
 import { definePageMeta } from "#imports";
 import { formatBigDecimalBalance } from "@/helpers/numbers.ts";
diff --git a/store/notes.ts b/store/notes.ts
new file mode 100644
index 0000000..bf00b3e
--- /dev/null
+++ b/store/notes.ts
@@ -0,0 +1,40 @@
+import { defineStore } from "pinia";
+import { Note } from "@/lib/notes";
+export const useNotes = defineStore("notes", {
+  state: () => ({
+    notes: new Set<Note>(),
+  }),
+  getters: {
+    getSortedNotes() {
+      return Array.from(this.notes).sort(
+        (a, b) => b.timestamp.getTime() - a.timestamp.getTime(),
+      );
+    },
+    getFinancialNotes() {
+      return this.getSortedNotes.filter(
+        (note) => (note.amount > 0) | note.category.includes("Guess"),
+      );
+    },
+    getMessages() {
+      return this.getSortedNotes.filter(
+        (note) => note.note?.length > 0 && !(note.amount > 0),
+      );
+    },
+  },
+  actions: {
+    /// Add a note to the store, avoiding duplicates
+    addNote(note: Note) {
+      if (
+        ![...this.notes].some(
+          (existingNote) =>
+            existingNote instanceof Note && existingNote.equals(note),
+        )
+      ) {
+        this.notes.add(note);
+      }
+    },
+    purgeAll() {
+      this.notes.clear();
+    },
+  },
+});
diff --git a/store/systemHealth.ts b/store/systemHealth.ts
index 7dd221f..191d3e4 100644
--- a/store/systemHealth.ts
+++ b/store/systemHealth.ts
@@ -86,11 +86,11 @@ export const useSystemHealth = defineStore("system-health", {
         shieldingTargetLastBlockNumber?.value -
         shieldingTargetImportedBlockNumber?.value;
       let importHealth;
-      if (lag <= 6) {
+      if (lag <= 12) {
         importHealth = Health.Healthy;
-      } else if (lag < 12) {
+      } else if (lag < 24) {
         importHealth = Health.Warning;
-      } else if (lag >= 12) {
+      } else if (lag >= 24) {
         importHealth = Health.Critical;
       } else {
         importHealth = Health.Unknown;