From 1f7f9e383ca3516169a50edca7eacb8f9004b5b9 Mon Sep 17 00:00:00 2001
From: brenzi <brenzi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 14:09:27 +0100
Subject: [PATCH 1/7] session proxies (#100)

* WIP

* add session proxy works

* guessing with NonTransfer session key works

* fetch note history with sessionproxy if available

* cleanup

* do everything with session proxy if available

* allow optout of session keys

* logic for modifying session proxy role

* modify proxy role possible

* fix
---
 components/overlays/ChooseWalletOverlay.vue   |  77 +++-
 components/overlays/SessionProxiesOverlay.vue | 384 ++++++++++++++++++
 components/tabs/MessagingTab.vue              |  10 +-
 components/tabs/VouchersTab.vue               |   2 +
 components/tabs/WalletTab.vue                 |  40 +-
 configs/incognitee.ts                         |   2 +
 lib/sessionProxyStorage.ts                    |  34 ++
 package.json                                  |   4 +-
 pages/index.vue                               | 156 ++++++-
 store/account.ts                              |  78 ++++
 store/notes.ts                                |   5 +-
 yarn.lock                                     |  44 +-
 12 files changed, 763 insertions(+), 73 deletions(-)
 create mode 100644 components/overlays/SessionProxiesOverlay.vue
 create mode 100644 lib/sessionProxyStorage.ts

diff --git a/components/overlays/ChooseWalletOverlay.vue b/components/overlays/ChooseWalletOverlay.vue
index 1a9ac0c..bf2b322 100644
--- a/components/overlays/ChooseWalletOverlay.vue
+++ b/components/overlays/ChooseWalletOverlay.vue
@@ -76,15 +76,37 @@
           </option>
         </select>
       </div>
+      <div v-if="accountStore.hasInjector" class="mt-10">
+        <p class="text-sm text-gray-400 wrap-text">
+          your currently selected account is {{ accountStore.getAddress }}
+        </p>
+        <div
+          v-if="accountStore.sessionProxyForRole(SessionProxyRole.ReadBalance)"
+          class="mt-10"
+        >
+          <button
+            @click="changeSessionAuthorization"
+            class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+          >
+            Change Session Key Authorization
+          </button>
+        </div>
+      </div>
       <div
-        v-if="accountStore.hasInjector && showTrustedGetterHint"
+        v-if="
+          accountStore.hasInjector &&
+          showTrustedGetterHint &&
+          selectedExtensionAccountIsNew
+        "
         class="mt-10"
       >
-        <p>
+        <p class="text-sm text-gray-400">
           please allow this app to read your balance by signing the upcoming
           request in your extension
         </p>
-        <p>this window will close once a balance could be fetched</p>
+        <p class="mt-5 text-sm text-gray-400">
+          this window will close once a balance could be fetched
+        </p>
       </div>
     </div>
   </OverlayDialog>
@@ -94,15 +116,35 @@
 import {
   connectExtension,
   extensionAccounts,
-  injectorForAddress,
 } from "~/lib/signerExtensionUtils";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
-import { defineProps, computed, ref, watch } from "vue";
+import { computed, defineProps, ref, watch } from "vue";
 import { useAccount } from "~/store/account.ts";
+import { encodeAddress } from "@polkadot/util-crypto";
+import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 
 const accountStore = useAccount();
+const currentExtensionAccount = ref("");
 const selectedExtensionAccount = ref("");
 
+const selectedExtensionAccountIsNew = computed(() => {
+  try {
+    const selectedAddressEncoded = encodeAddress(
+      selectedExtensionAccount.value,
+      accountStore.getSs58Format,
+    );
+    console.log(
+      "comparing",
+      currentExtensionAccount.value,
+      " to ",
+      selectedAddressEncoded,
+    );
+    return selectedAddressEncoded !== currentExtensionAccount.value;
+  } catch (e) {
+    return false;
+  }
+});
+
 const props = defineProps({
   createTestingAccount: {
     type: Function,
@@ -124,7 +166,23 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  changeSessionAuthorization: {
+    type: Function,
+    required: false,
+  },
 });
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      console.log("current extension account: ", accountStore.getAddress);
+      currentExtensionAccount.value = accountStore.getAddress;
+      //selectedExtensionAccount.value = "";
+    }
+  },
+);
+
 const hasCreateTestingAccountFn = computed(
   () => typeof props.createTestingAccount === "function",
 );
@@ -139,10 +197,15 @@ const closeProxy = () => {
 };
 
 watch(selectedExtensionAccount, async (selectedAddress) => {
-  if (selectedAddress) {
+  if (selectedAddress && selectedExtensionAccountIsNew.value) {
     props.onExtensionAccountChange(selectedAddress);
   }
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.wrap-text {
+  white-space: normal;
+  word-wrap: break-word;
+}
+</style>
diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
new file mode 100644
index 0000000..2851369
--- /dev/null
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -0,0 +1,384 @@
+<template>
+  <OverlayDialog :show="show" :close="closeProxy" title="Session Authorization">
+    <div class="mt-2">
+      <p class="text-sm text-gray-400">
+        For a smooth experience with minimal signing interaction we recommend
+        that your authorize a session key. It will be cached confidentially on
+        Incognitee and loaded automatically on your next visit.
+      </p>
+      <p class="text-sm text-gray-400">
+        Registering a session key costs a fee of
+        {{ formatDecimalBalance(INCOGNITEE_TX_FEE) }}
+        {{ accountStore.getSymbol }} and a deposit of
+        {{ INCOGNITEE_SESSION_PROXY_DEPOSIT }} {{ accountStore.getSymbol }} will
+        be reserved.
+      </p>
+      <!--<p>you currently have a session key with role {{ bestSessionProxyRole }}</p>-->
+      <div class="flex flex-col mt-5">
+        <form @submit.prevent="updateAuthorization">
+          <label>Select an option:</label>
+          <!-- removing proxies not yet supported
+          <div v-if="bestSessionProxyRole !== null" class="radio-group">
+            <div>
+              <input
+                type="radio"
+                id="noProxy"
+                value="NoProxy"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <label for="noProxy">remove all authorizations</label>
+          </div> -->
+          <div class="radio-group">
+            <div v-if="'readBalance' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="readBalance"
+                value="ReadBalance"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
+            <label for="readBalance">allow reading balance</label>
+          </div>
+          <div class="radio-group">
+            <div v-if="'readAny' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="readAny"
+                value="ReadAny"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
+            <label for="readAny">full read access</label>
+          </div>
+          <div class="radio-group">
+            <div v-if="'nonTransfer' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="nonTransfer"
+                value="NonTransfer"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
+            <label for="nonTransfer">allow non-transfer actions</label>
+          </div>
+          <div class="radio-group">
+            <div v-if="'any' !== bestSessionProxyRole">
+              <input
+                type="radio"
+                id="any"
+                value="Any"
+                v-model="selectedSessionProxyRole"
+              />
+            </div>
+            <div v-else class="mr-4">✓</div>
+            <label for="any">allow all actions</label>
+          </div>
+          <!--
+                    <p class="text-sm text-gray-400">
+                      If this is your personal machine, we recommend to persist a session
+                      key in browser storage. This will avoid the initial authentication
+                      signature in the extension when you visit this site.
+                    </p>
+                    <div class="mt-2">
+                      <input
+                        type="checkbox"
+                        id="persistSession"
+                        v-model="persistSessionProxy"
+                      />
+                      <label for="persistSession"
+                      >Persist session key in browser storage</label
+                      >
+                    </div>-->
+          <p class="text-sm text-gray-400 mb-5">
+            the signer extension will pop up and ask you to sign this request
+          </p>
+
+          <button
+            type="submit"
+            class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+          >
+            Update Authorization
+          </button>
+        </form>
+        <div v-if="bestSessionProxyRole == null" class="mt-5">
+          <button
+            type="button"
+            @click="close(true)"
+            class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+          >
+            Continue Without Session Proxy
+          </button>
+        </div>
+      </div>
+    </div>
+  </OverlayDialog>
+  <StatusOverlay
+    :tx-status="txStatus"
+    :show="showStatusOverlay"
+    :close="closeStatusOverlay"
+  />
+</template>
+<script setup lang="ts">
+import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
+import { defineProps, ref, watch } from "vue";
+import { useAccount } from "~/store/account.ts";
+import {
+  cryptoWaitReady,
+  mnemonicGenerate,
+  mnemonicToMiniSecret,
+} from "@polkadot/util-crypto";
+import { Keyring } from "@polkadot/keyring";
+import StatusOverlay from "~/components/overlays/StatusOverlay.vue";
+import { formatDecimalBalance } from "~/helpers/numbers";
+import { SessionProxyRole } from "@/lib/sessionProxyStorage.ts";
+import {
+  INCOGNITEE_TX_FEE,
+  INCOGNITEE_SESSION_PROXY_DEPOSIT,
+} from "~/configs/incognitee";
+import { useIncognitee } from "~/store/incognitee";
+import { Health, useSystemHealth } from "~/store/systemHealth";
+import { TypeRegistry, u32 } from "@polkadot/types";
+import { incogniteeSidechain } from "~/lib/environmentConfig";
+
+const accountStore = useAccount();
+const incogniteeStore = useIncognitee();
+const systemHealth = useSystemHealth();
+
+const selectedSessionProxyRole = ref("NonTransfer");
+const persistSessionProxy = ref(false);
+const bestSessionProxy = ref(null);
+const bestSessionProxyRole = ref(null);
+const isSignerBusy = ref(false);
+
+const updateAuthorization = 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;
+  }
+  if (!props?.enableActions) {
+    console.error("network not live");
+    return;
+  }
+  console.log(
+    "updating authorization from ",
+    bestSessionProxyRole,
+    " to ",
+    selectedSessionProxyRole.value,
+  );
+  if (bestSessionProxyRole.value === null) {
+    props?.close();
+    await createSessionProxy();
+  } else if (bestSessionProxyRole.value !== selectedSessionProxyRole.value) {
+    props?.close();
+    await modifySessionProxyRole(
+      bestSessionProxy.value,
+      selectedSessionProxyRole.value,
+    );
+  } else {
+    console.log("ignoring authorization update request: no change in role");
+  }
+};
+
+const createSessionProxy = async () => {
+  txStatus.value = "creating session proxy....";
+  openStatusOverlay();
+  await cryptoWaitReady();
+  const generatedMnemonic = mnemonicGenerate();
+  const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
+  const sessionProxy = localKeyring.addFromMnemonic(generatedMnemonic, {
+    name: "fresh",
+  });
+  const seed = mnemonicToMiniSecret(generatedMnemonic);
+  console.log(
+    "creating session proxy " +
+      sessionProxy.address +
+      " with role: " +
+      selectedSessionProxyRole.value +
+      " localStorage: " +
+      persistSessionProxy.value,
+  );
+  await addSessionProxyFromSeed(seed);
+};
+
+const addSessionProxyFromSeed = async (seed: Uint8Array) => {
+  const injector = accountStore.hasInjector ? accountStore.injector : null;
+  const role = incogniteeStore.api.createType(
+    "SessionProxyRole",
+    selectedSessionProxyRole.value,
+  );
+  const now = new Date();
+  const expiryDate = new Date(now.getTime() + 40 * 24 * 60 * 60 * 1000);
+  const expiry = Math.floor(expiryDate.getTime());
+  console.log(
+    "create session proxy " +
+      proxy.address +
+      " with role: " +
+      role +
+      " expiry update to: " +
+      expiry,
+  );
+  const nonce = new u32(
+    new TypeRegistry(),
+    accountStore.nonce[incogniteeSidechain.value],
+  );
+  await incogniteeStore.api
+    .trustedAddSessionProxy(
+      accountStore.account,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      role,
+      sessionProxy.address,
+      expiry,
+      seed,
+      { signer: injector?.signer, nonce: nonce },
+    )
+    .then((result) =>
+      handleTopResult(result, "😀 session proxy registration successful"),
+    )
+    .catch((err) => handleTopError(err));
+};
+
+const modifySessionProxyRole = async (
+  proxy: AddressOrPair,
+  role: SessionProxyRole,
+) => {
+  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 = "modifying session proxy role....";
+  openStatusOverlay();
+  const injector = accountStore.hasInjector ? accountStore.injector : null;
+  const seed = accountStore.sessionProxySeed(proxy);
+  const now = new Date();
+  const expiryDate = new Date(now.getTime() + 40 * 24 * 60 * 60 * 1000);
+  const expiry = Math.floor(expiryDate.getTime());
+  console.log(
+    "modify session proxy " +
+      proxy.address +
+      " to role: " +
+      role +
+      " expiry update to: " +
+      expiry,
+  );
+  const nonce = new u32(
+    new TypeRegistry(),
+    accountStore.nonce[incogniteeSidechain.value],
+  );
+  await incogniteeStore.api
+    .trustedAddSessionProxy(
+      accountStore.account,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      role,
+      proxy.address,
+      expiry,
+      seed,
+      { signer: injector?.signer, nonce: nonce },
+    )
+    .then((result) =>
+      handleTopResult(result, "😀 session proxy registration successful"),
+    )
+    .catch((err) => handleTopError(err));
+};
+
+const txStatus = ref("");
+const handleTopResult = (result, successMsg?) => {
+  console.log("TOP result: " + result);
+  if (result) {
+    isSignerBusy.value = false;
+    if (result.status.isInSidechainBlock) {
+      if (successMsg) {
+        txStatus.value = successMsg;
+      } else {
+        txStatus.value =
+          "😀 included in sidechain block: " + result.status.asInSidechainBlock;
+      }
+      //update history to see successful 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 showStatusOverlay = ref(false);
+const openStatusOverlay = () => {
+  showStatusOverlay.value = true;
+};
+const closeStatusOverlay = () => {
+  showStatusOverlay.value = false;
+  // close self
+  props.close();
+};
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
+  close: {
+    type: Function,
+    required: true,
+  },
+  enableActions: {
+    type: Boolean,
+    required: true,
+  },
+  updateNotes: {
+    type: Function,
+    required: true,
+  },
+});
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show) {
+      isSignerBusy.value = false;
+      [bestSessionProxy.value, bestSessionProxyRole.value] =
+        accountStore.sessionProxyBest();
+      if (bestSessionProxyRole.value !== null) {
+        selectedSessionProxyRole.value = bestSessionProxyRole.value;
+      } else {
+        selectedSessionProxyRole.value = "NonTransfer";
+      }
+    }
+  },
+);
+// even if the same account stays selected and the overlay is manually closed
+// we need to call onExtensionAccountChange. otherwise the balance poll will wait forever
+const closeProxy = () => {
+  props.close();
+};
+</script>
+
+<style>
+.radio-group {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.radio-group input[type="radio"] {
+  margin-right: 10px;
+}
+</style>
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index 899144e..b125602 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -402,6 +402,7 @@ import { useNotes } from "@/store/notes.ts";
 import { Note, NoteDirection } from "@/lib/notes";
 import { divideBigIntToFloat } from "@/helpers/numbers";
 import NoteDetailsOverlay from "~/components/overlays/NoteDetailsOverlay.vue";
+import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 
 const identityLut = [...polkadotPeopleIdentities, ...wellKnownIdentities];
 
@@ -580,7 +581,6 @@ const submitSendForm = () => {
 const sendPrivately = async () => {
   console.log("sending message on incognitee");
   txStatus.value = "⌛ sending message privately on incognitee";
-  const amount = BigInt(0);
   const account = accountStore.account;
   if (
     accountStore.getDecimalBalanceTransferable(incogniteeSidechain.value) <
@@ -608,16 +608,18 @@ const sendPrivately = async () => {
   );
 
   await incogniteeStore.api
-    .trustedBalanceTransfer(
+    .trustedSendNote(
       account,
       incogniteeStore.shard,
       incogniteeStore.fingerprint,
       accountStore.getAddress,
       conversationAddress.value,
-      amount,
       note,
       {
         signer: accountStore.injector?.signer,
+        delegate: accountStore.sessionProxyForRole(
+          SessionProxyRole.NonTransfer,
+        ),
         nonce: nonce,
       },
     )
@@ -636,7 +638,7 @@ const handleTopResult = (result, successMsg?) => {
         txStatus.value =
           "😀 included in sidechain block: " + result.status.asInSidechainBlock;
       }
-      //update history to see successfuly action immediately
+      //update history to see successful action immediately
       props.updateNotes();
       return;
     }
diff --git a/components/tabs/VouchersTab.vue b/components/tabs/VouchersTab.vue
index 99241ec..bbafb42 100644
--- a/components/tabs/VouchersTab.vue
+++ b/components/tabs/VouchersTab.vue
@@ -378,6 +378,7 @@ import {
   forgetAllVouchersForShard,
   forgetVoucherForShard,
 } from "~/lib/voucherStorage";
+import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
@@ -488,6 +489,7 @@ const fundNewVoucher = async () => {
       note,
       {
         signer: accountStore.injector?.signer,
+        delegate: accountStore.sessionProxyForRole(SessionProxyRole.Any),
         nonce: nonce,
       },
     )
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index b16a6ed..08a85af 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -2,7 +2,7 @@
   <div v-if="show">
     <WarningBanner
       v-if="
-        isProd &&
+        accountStore.getSymbol === 'TEER' &&
         accountStore.getAddress !== 'none' &&
         !accountStore.hasInjector
       "
@@ -27,13 +27,6 @@
       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
@@ -1060,6 +1053,8 @@ import { chainConfigs } from "~/configs/chains";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { ApiPromise } from "@polkadot/api";
 import { formatMoment } from "~/helpers/date";
+import { SessionProxyRole } from "~/lib/sessionProxyStorage";
+import SessionProxiesOverlay from "~/components/overlays/SessionProxiesOverlay.vue";
 
 const accountStore = useAccount();
 const incogniteeStore = useIncognitee();
@@ -1219,7 +1214,7 @@ const handleTopResult = (result, successMsg?) => {
         txStatus.value =
           "😀 included in sidechain block: " + result.status.asInSidechainBlock;
       }
-      //update history to see successfuly action immediately
+      //update history to see successful action immediately
       props.updateNotes();
       return;
     }
@@ -1284,6 +1279,7 @@ const unshield = async () => {
       amount,
       {
         signer: accountStore.injector?.signer,
+        delegate: accountStore.sessionProxyForRole(SessionProxyRole.Any),
         nonce: nonce,
       },
     )
@@ -1332,6 +1328,7 @@ const sendPrivately = async () => {
       note,
       {
         signer: accountStore.injector?.signer,
+        delegate: accountStore.sessionProxyForRole(SessionProxyRole.Any),
         nonce: nonce,
       },
     )
@@ -1359,6 +1356,9 @@ const submitGuess = async () => {
       guess.value,
       {
         signer: accountStore.injector?.signer,
+        delegate: accountStore.sessionProxyForRole(
+          SessionProxyRole.NonTransfer,
+        ),
         nonce: nonce,
       },
     )
@@ -1431,7 +1431,7 @@ const closePrivacyInfo = () => {
 
 const showObtainTokenOverlay = ref(false);
 const openObtainTokenOverlay = () => {
-  if (!enableActions.value) {
+  if (!props?.enableActions) {
     console.error("network not live");
     return;
   }
@@ -1443,7 +1443,7 @@ const closeObtainTokenOverlay = () => {
 
 const showShieldOverlay = ref(false);
 const openShieldOverlay = () => {
-  if (!enableActions.value) {
+  if (!props?.enableActions) {
     console.error("network not live");
     return;
   }
@@ -1458,7 +1458,7 @@ const closeShieldOverlay = () => {
 
 const showFaucetOverlay = ref(false);
 const openFaucetOverlay = () => {
-  if (!enableActions.value) {
+  if (!props?.enableActions) {
     console.error("network not live");
     return;
   }
@@ -1470,7 +1470,7 @@ const closeFaucetOverlay = () => {
 
 const showUnshieldOverlay = ref(false);
 const openUnshieldOverlay = () => {
-  if (!enableActions.value) {
+  if (!props?.enableActions) {
     console.error("network not live");
     return;
   }
@@ -1484,7 +1484,7 @@ const closeUnshieldOverlay = () => {
 };
 const showReceiveOverlay = ref(false);
 const openReceiveOverlay = () => {
-  if (!enableActions.value) {
+  if (!props?.enableActions) {
     console.error("network not live");
     return;
   }
@@ -1495,7 +1495,7 @@ const closeReceiveOverlay = () => {
 };
 const showPrivateSendOverlay = ref(false);
 const openPrivateSendOverlay = () => {
-  if (!enableActions.value) {
+  if (!props?.enableActions) {
     console.error("network not live");
     return;
   }
@@ -1517,7 +1517,7 @@ const closePrivateSendOverlay = () => {
 
 const showGuessTheNumberOverlay = ref(false);
 const openGuessTheNumberOverlay = () => {
-  if (!enableActions.value) {
+  if (!props?.enableActions) {
     console.error("network not live");
     return;
   }
@@ -1599,10 +1599,10 @@ const props = defineProps({
     type: Function,
     required: true,
   },
-});
-
-const enableActions = computed(() => {
-  return isLive.value || forceLive.value;
+  enableActions: {
+    type: Boolean,
+    required: true,
+  },
 });
 </script>
 
diff --git a/configs/incognitee.ts b/configs/incognitee.ts
index e96cf10..9d8ed98 100644
--- a/configs/incognitee.ts
+++ b/configs/incognitee.ts
@@ -5,3 +5,5 @@ export const INCOGNITEE_GTN_GUESS_FEE = 0.1; // TEER or PAS, decimals are respec
 
 export const INCOGNITEE_UNSHIELDING_FEE = 3 * INCOGNITEE_TX_FEE; // TEER or PAS, decimals are respected
 export const INCOGNITEE_SHIELDING_FEE_FRACTION = 0.00175; // 0.175% of the shielding amount
+
+export const INCOGNITEE_SESSION_PROXY_DEPOSIT = 0.5; // TEER or PAS, decimals are respected
diff --git a/lib/sessionProxyStorage.ts b/lib/sessionProxyStorage.ts
new file mode 100644
index 0000000..9729649
--- /dev/null
+++ b/lib/sessionProxyStorage.ts
@@ -0,0 +1,34 @@
+export enum SessionProxyRole {
+  ReadBalance = "readBalance",
+  ReadAny = "readAny",
+  NonTransfer = "nonTransfer",
+  Any = "any",
+  TransferAllowance = "transferAllowance",
+}
+
+export const sessionProxyRoleOrder = [
+  SessionProxyRole.ReadBalance,
+  SessionProxyRole.ReadAny,
+  SessionProxyRole.NonTransfer,
+  SessionProxyRole.TransferAllowance,
+  SessionProxyRole.Any,
+];
+
+export function isRoleAtLeast(
+  role1: SessionProxyRole,
+  role2: SessionProxyRole,
+): boolean {
+  return roleOrder.indexOf(role1) >= roleOrder.indexOf(role2);
+}
+
+export class SessionProxyCredentials {
+  role: SessionProxyRole;
+  expiry: Date;
+  seed: Uint8Array;
+
+  constructor(role: SessionProxyRole, expiry: Date, seed: Uint8Array) {
+    this.role = role;
+    this.expiry = expiry;
+    this.seed = seed;
+  }
+}
diff --git a/package.json b/package.json
index fcc34cd..986b5b3 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,8 @@
     "vue-router": "^4.3.2"
   },
   "dependencies": {
-    "@encointer/util": "^0.18.0-alpha.2",
-    "@encointer/worker-api": "^0.18.0-alpha.2",
+    "@encointer/util": "^0.18.0",
+    "@encointer/worker-api": "^0.18.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@headlessui/vue": "^1.7.22",
     "@heroicons/vue": "^2.1.3",
diff --git a/pages/index.vue b/pages/index.vue
index 51448a8..007c60a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,6 +12,7 @@
       ref="walletTabRef"
       :updateNotes="updateNotes"
       :fetchOlderBucket="fetchOlderBucket"
+      :enableActions="enableActions"
     />
   </div>
   <!-- messgaing tab should always exist, just not be shown if inactive-->
@@ -97,6 +98,14 @@
     </div>
   </OverlayDialog>
 
+  <!-- AddSessionProxy -->
+  <SessionProxiesOverlay
+    :show="showAuthorizeSessionOverlay"
+    :close="closeAuthorizeSessionOverlay"
+    :enableActions="enableActions"
+    :updateNotes="updateNotes"
+  />
+
   <!-- Choose Wallet -->
   <ChooseWalletOverlay
     :show="showChooseWalletOverlay"
@@ -104,6 +113,7 @@
     :createTestingAccount="isProd ? undefined : createTestingAccount"
     :onExtensionAccountChange="onExtensionAccountChange"
     :showTrustedGetterHint="true"
+    :changeSessionAuthorization="changeSessionProxies"
   />
 </template>
 
@@ -111,7 +121,8 @@
 import WalletTab from "~/components/tabs/WalletTab.vue";
 import VouchersTab from "~/components/tabs/VouchersTab.vue";
 import ChooseWalletOverlay from "~/components/overlays/ChooseWalletOverlay.vue";
-import { computed } from "vue";
+import SessionProxiesOverlay from "~/components/overlays/SessionProxiesOverlay.vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { chainConfigs } from "@/configs/chains.ts";
 import { useAccount } from "@/store/account.ts";
 import { useIncognitee } from "@/store/incognitee.ts";
@@ -126,7 +137,6 @@ import {
   mnemonicToMiniSecret,
 } from "@polkadot/util-crypto";
 import { useInterval } from "@vueuse/core";
-import { onUnmounted, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { eventBus } from "@/helpers/eventBus";
 import {
@@ -134,16 +144,17 @@ import {
   injectorForAddress,
 } from "@/lib/signerExtensionUtils";
 import {
-  loadEnv,
-  shieldingTarget,
-  incogniteeSidechain,
   incogniteeShard,
+  incogniteeSidechain,
   isLive,
+  loadEnv,
+  shieldingTarget,
 } from "@/lib/environmentConfig";
 import { useSystemHealth } from "@/store/systemHealth";
 import { useNotes } from "~/store/notes";
 import { formatMoment } from "~/helpers/date";
 import { Note, NoteDirection } from "~/lib/notes";
+import { SessionProxyRole } from "@/lib/sessionProxyStorage.ts";
 import MessagingTab from "~/components/tabs/MessagingTab.vue";
 import SwapTab from "~/components/tabs/SwapTab.vue";
 import GovTab from "~/components/tabs/GovTab.vue";
@@ -168,9 +179,11 @@ const shieldingTargetApi = ref<ApiPromise | null>(null);
 const isProd = computed(
   () => chainConfigs[shieldingTarget.value].faucetUrl === undefined,
 );
+
 const onExtensionAccountChange = async (selectedAddress) => {
   dropSubscriptions();
   console.log("user selected extension account:", selectedAddress);
+  accountStore.resetState();
   accountStore.setAccount(selectedAddress.toString());
   accountStore.setInjector(await injectorForAddress(accountStore.getAddress));
   isUpdatingIncogniteeBalance.value = false;
@@ -205,7 +218,7 @@ const fetchIncogniteeBalance = async () => {
         );
       }
       getterMap[accountStore.account] =
-        await incogniteeStore.api.accountInfoGetter(
+        await incogniteeStore.api.accountInfoAndSessionProxiesGetter(
           accountStore.account,
           incogniteeStore.shard,
           { signer: injector?.signer },
@@ -226,10 +239,14 @@ const fetchIncogniteeBalance = async () => {
 
   await getterMap[accountStore.account]
     .send()
-    .then((accountInfo) => {
+    .then((accountInfoAndSessionProxies) => {
+      const accountInfo = accountInfoAndSessionProxies.account_info;
+      const proxies = accountInfoAndSessionProxies.session_proxies;
       console.debug(
         `current account info L2: ${accountInfo} on shard ${incogniteeStore.shard}`,
       );
+      console.debug(`session proxies: ${proxies}`);
+      storeSessionProxies(proxies);
       accountStore.setBalanceFree(
         BigInt(accountInfo.data.free),
         incogniteeSidechain.value,
@@ -241,6 +258,15 @@ const fetchIncogniteeBalance = async () => {
       isFetchingIncogniteeBalance.value = false;
       isUpdatingIncogniteeBalance.value = false;
       isChoosingAccount.value = false;
+      if (
+        proxies.length == 0 &&
+        accountStore.hasInjector &&
+        !accountStore.hasDeclinedSessionProxy &&
+        accountStore.getDecimalBalanceFree(incogniteeSidechain.value) > 0
+      ) {
+        openAuthorizeSessionOverlay();
+      }
+      //openAuthorizeSessionOverlay();
     })
     .catch((err) => {
       console.error(`[fetchIncogniteeBalance] error ${err}`);
@@ -248,6 +274,18 @@ const fetchIncogniteeBalance = async () => {
     });
 };
 
+const storeSessionProxies = (proxies) => {
+  for (const proxy of proxies) {
+    const localKeyring = new Keyring({ type: "sr25519" });
+    const seed = hexToU8a(proxy.seed.toString());
+    const account = localKeyring.addFromSeed(seed);
+    accountStore.addSessionProxy(
+      account,
+      seed,
+      proxy.role.toString() as SessionProxyRole,
+    );
+  }
+};
 const fetchNetworkStatus = async () => {
   const promises = [];
   if (shieldingTargetApi.value?.isReady) {
@@ -335,10 +373,9 @@ const fetchOlderBucket = async () => {
 
 /// returns the date as moment before which all notes have been purged from sidechain state
 const oldestMomentInNoteBuckets = computed(() => {
-  console.log(
-    "oldest moment is " + noteBucketsInfo.value?.first.unwrap().begins_at,
-  );
-  return noteBucketsInfo.value?.first.unwrap().begins_at?.toNumber();
+  const beginsAt = noteBucketsInfo.value?.first.unwrap().begins_at;
+  console.log("oldest moment is " + beginsAt?.toNumber());
+  return beginsAt ? beginsAt.toNumber() : NaN;
 });
 
 const bucketsCount = computed(() => {
@@ -352,10 +389,12 @@ const bucketsCount = computed(() => {
 
 const unfetchedBucketsCount = computed(() => {
   if (!noteBucketsInfo.value) return 0;
-  return (
-    firstNoteBucketIndexFetched.value ? firstNoteBucketIndexFetched.value -
-    noteBucketsInfo.value.first.unwrap().index : noteBucketsInfo.value.last.unwrap().index - noteBucketsInfo.value.first.unwrap().index +1
-  );
+  return firstNoteBucketIndexFetched.value
+    ? firstNoteBucketIndexFetched.value -
+        noteBucketsInfo.value.first.unwrap().index
+    : noteBucketsInfo.value.last.unwrap().index -
+        noteBucketsInfo.value.first.unwrap().index +
+        1;
 });
 
 const fetchIncogniteeNotes = async (
@@ -372,10 +411,17 @@ const fetchIncogniteeNotes = async (
     return;
   }
   const mapKey = `notesFor:${accountStore.account}:${bucketIndex}`;
+  const sessionProxy = accountStore.sessionProxyForRole(
+    SessionProxyRole.ReadAny,
+  );
+  console.debug(
+    "[fetchIncogniteeNotes] sessionProxy: " + sessionProxy?.address,
+  );
   const injector = accountStore.hasInjector ? accountStore.injector : null;
+  console.debug("[fetchIncogniteeNotes] injector: " + injector);
   try {
     if (!getterMap[mapKey]) {
-      if (injector) {
+      if (injector && sessionProxy == null) {
         if (skip_if_signer_needed) {
           console.log(
             "skipping automated fetchIncogniteeNotes because signer is needed",
@@ -391,7 +437,7 @@ const fetchIncogniteeNotes = async (
         accountStore.account,
         bucketIndex,
         incogniteeStore.shard,
-        { signer: injector?.signer },
+        { delegate: sessionProxy, signer: injector?.signer },
       );
     } else {
       console.debug(`fetching incognitee notes using cached getter`);
@@ -521,6 +567,43 @@ const fetchIncogniteeNotes = async (
                 `[${formatMoment(note.timestamp?.toNumber())}] unknown relation to transfer: ${typedCall}`,
               );
             }
+          } else if (call.isSendNote) {
+            const typedCall = call.asSendNote;
+            console.debug(
+              `[${formatMoment(note.timestamp?.toNumber())}] send 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 Note",
+                  NoteDirection.Outgoing,
+                  to,
+                  BigInt(0),
+                  new Date(note.timestamp?.toNumber()),
+                  typedCall[2].toString(),
+                ),
+              );
+            } else if (to === accountStore.getAddress) {
+              noteStore.addNote(
+                new Note(
+                  "Incoming Note",
+                  NoteDirection.Incoming,
+                  from,
+                  BigInt(0),
+                  new Date(note.timestamp?.toNumber()),
+                  typedCall[2].toString(),
+                ),
+              );
+            } else {
+              console.error(
+                `[${formatMoment(note.timestamp?.toNumber())}] unknown relation to transfer: ${typedCall}`,
+              );
+            }
           } else if (call.isGuessTheNumber) {
             const typedCall = call.asGuessTheNumber.asGuess;
             console.debug(
@@ -536,6 +619,25 @@ const fetchIncogniteeNotes = async (
                 null,
               ),
             );
+          } else if (call.isAddSessionProxy) {
+            const typedCall = call.asAddSessionProxy;
+            const proxy = encodeAddress(
+              typedCall[1],
+              accountStore.getSs58Format,
+            );
+            console.debug(
+              `[${formatMoment(note.timestamp?.toNumber())}] add session proxy: ${typedCall}`,
+            );
+            noteStore.addNote(
+              new Note(
+                `Add Session Proxy (${typedCall[2].role})`,
+                NoteDirection.None,
+                proxy,
+                null,
+                new Date(note.timestamp?.toNumber()),
+                null,
+              ),
+            );
           } else {
             console.error(
               `[${formatMoment(note.timestamp?.toNumber())}] unknown call: ${call}`,
@@ -787,6 +889,12 @@ const dropSubscriptions = () => {
   accountStore.setInjector(null);
 };
 
+const changeSessionProxies = () => {
+  closeChooseWalletOverlay();
+  isUpdatingIncogniteeBalance.value = false;
+  openAuthorizeSessionOverlay();
+};
+
 const createTestingAccount = async () => {
   await cryptoWaitReady().then(() => {
     dropSubscriptions();
@@ -826,6 +934,20 @@ const closeNewWalletOverlay = () => {
   showNewWalletOverlay.value = false;
 };
 
+const showAuthorizeSessionOverlay = ref(false);
+const openAuthorizeSessionOverlay = () => {
+  if (!enableActions.value) {
+    console.error("network not live");
+    return;
+  }
+  showAuthorizeSessionOverlay.value = true;
+};
+const closeAuthorizeSessionOverlay = (optout: boolean) => {
+  if (optout) {
+    accountStore.declineSessionProxy();
+  }
+  showAuthorizeSessionOverlay.value = false;
+};
 const showChooseWalletOverlay = ref(false);
 const openChooseWalletOverlay = () => {
   if (!enableActions.value) {
diff --git a/store/account.ts b/store/account.ts
index 5aebd56..575de1f 100644
--- a/store/account.ts
+++ b/store/account.ts
@@ -5,6 +5,10 @@ import type { InjectedExtension } from "@polkadot/extension-inject/types";
 import { ChainId } from "@/configs/chains";
 import { encodeAddress } from "@polkadot/util-crypto";
 import { divideBigIntToFloat, formatDecimalBalance } from "@/helpers/numbers";
+import {
+  SessionProxyRole,
+  sessionProxyRoleOrder,
+} from "@/lib/sessionProxyStorage.ts";
 
 export const useAccount = defineStore("account", {
   state: () => ({
@@ -12,6 +16,12 @@ export const useAccount = defineStore("account", {
     account: <AddressOrPair | null>null,
     // optional signer extension
     injector: <InjectedExtension | null>null,
+    // optional session proxy credentials
+    sessionProxies: <Record<SessionProxyRole, AddressOrPair>>{},
+    // optional session proxy minisecrets
+    sessionProxySeeds: <Record<AddressOrPair, Uint8Array>>{},
+    // remember if the user has declined creating a proxy
+    sessionProxyDeclined: <boolean>false,
     // free balance per chain
     balanceFree: <Record<ChainId, BigInt>>{},
     // reserved balance per chain
@@ -54,6 +64,53 @@ export const useAccount = defineStore("account", {
     hasInjector({ injector }): boolean {
       return injector != null;
     },
+    hasSessionProxyForRole({
+      sessionProxies,
+    }): (role: SessionProxyRole) => boolean {
+      return (role: SessionProxyRole): boolean => {
+        return sessionProxies[role] != null;
+      };
+    },
+    hasDeclinedSessionProxy({ sessionProxyDeclined }): boolean {
+      return sessionProxyDeclined;
+    },
+    /// Returns the weakest session proxy which is authorized for at least the requested role
+    sessionProxyForRole({
+      sessionProxies,
+    }): (role: SessionProxyRole) => AddressOrPair | null {
+      return (role: SessionProxyRole): AddressOrPair | null => {
+        const startIndex = sessionProxyRoleOrder.indexOf(role);
+        if (startIndex === -1) return null;
+        for (let i = startIndex; i < sessionProxyRoleOrder.length; i++) {
+          const currentRole = sessionProxyRoleOrder[i];
+          if (sessionProxies[currentRole]) {
+            return sessionProxies[currentRole];
+          }
+        }
+        return null;
+      };
+    },
+    /// Returns the most powerful session proxy
+    sessionProxyBest({
+      sessionProxies,
+    }): () => [AddressOrPair | null, SessionProxyRole | null] {
+      return (): [AddressOrPair | null, SessionProxyRole | null] => {
+        for (let i = sessionProxyRoleOrder.length - 1; i >= 0; i--) {
+          const currentRole = sessionProxyRoleOrder[i];
+          if (sessionProxies[currentRole]) {
+            return [sessionProxies[currentRole], currentRole];
+          }
+        }
+        return [null, null];
+      };
+    },
+    sessionProxySeed({
+      sessionProxySeeds,
+    }): (proxy: AddressOrPair) => Uint8Array {
+      return (proxy: AddressOrPair): Uint8Array => {
+        return sessionProxySeeds[proxy];
+      };
+    },
     formatBalanceFree({ balanceFree, decimals }) {
       return (chain: ChainId): string => {
         if (!balanceFree[chain]) return "0.000";
@@ -117,12 +174,33 @@ export const useAccount = defineStore("account", {
     },
   },
   actions: {
+    /// call this when account changes to clear all account-related state
+    resetState() {
+      this.sessionProxyDeclined = false;
+      this.sessionProxies = {};
+      this.injector = null;
+      this.BalanceFree = {};
+      this.BalanceReserved = {};
+      this.BalanceFrozen = {};
+    },
     setAccount(account: AddressOrPair) {
       this.account = account;
     },
     setInjector(injector: InjectedExtension) {
       this.injector = injector;
     },
+    /// sticky decline for adding session proxies
+    declineSessionProxy() {
+      this.sessionProxyDeclined = true;
+    },
+    addSessionProxy(
+      sessionProxy: AddressOrPair,
+      seed: Uint8Array,
+      role: SessionProxyRole,
+    ) {
+      this.sessionProxies[role] = sessionProxy;
+      this.sessionProxySeeds[sessionProxy] = seed;
+    },
     setBalanceFree(balance: BigInt, chain: ChainId) {
       this.balanceFree[chain] = balance;
     },
diff --git a/store/notes.ts b/store/notes.ts
index ce4e934..2e6737f 100644
--- a/store/notes.ts
+++ b/store/notes.ts
@@ -17,7 +17,10 @@ export const useNotes = defineStore("notes", {
     },
     getFinancialNotes() {
       return this.getSortedNotesNewestFirst.filter(
-        (note) => (note.amount > 0) | note.category.includes("Guess"),
+        (note) =>
+          (note.amount > 0) |
+          note.category.includes("Guess") |
+          note.category.includes("Session Proxy"),
       );
     },
     getConversationCounterparties() {
diff --git a/yarn.lock b/yarn.lock
index 2d55e21..900f629 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -531,32 +531,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@encointer/node-api@npm:^0.18.0-alpha.2":
-  version: 0.18.0-alpha.2
-  resolution: "@encointer/node-api@npm:0.18.0-alpha.2"
+"@encointer/node-api@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "@encointer/node-api@npm:0.18.0"
   dependencies:
-    "@encointer/types": "npm:^0.18.0-alpha.2"
+    "@encointer/types": "npm:^0.18.0"
     "@polkadot/api": "npm:^11.2.1"
     tslib: "npm:^2.6.2"
-  checksum: 10c0/383ac0109d83e5b908e0a33c648dee678773a674b86234f03f0694f5de7d370dac20bcde45f49335a2e5ddbfcd7ed62422fe8528b00cc7a9cd1acecae57616b3
+  checksum: 10c0/e9cbf01b15a622b5d4a5c1b30e0257ce3d5aaeb5decf9aee05f6cc9c178c36b3efe1bf454422becf0150f86eedbc4f12948387e01e3e6e0a7489d8e3eb9c50e9
   languageName: node
   linkType: hard
 
-"@encointer/types@npm:^0.18.0-alpha.2":
-  version: 0.18.0-alpha.2
-  resolution: "@encointer/types@npm:0.18.0-alpha.2"
+"@encointer/types@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "@encointer/types@npm:0.18.0"
   dependencies:
     "@polkadot/api": "npm:^11.2.1"
     "@polkadot/types": "npm:^11.2.1"
     "@polkadot/types-codec": "npm:^11.2.1"
     "@polkadot/util": "npm:^12.6.2"
-  checksum: 10c0/dc4ba196329103de0cd3326f0d72eefee57b1dc347ceb59dfbac37828cb837c47a581bad10b4b483b7536fb5a8fd8a29fe055862a70092703507ab9169b528ac
+  checksum: 10c0/6001f1c4f76e55013e685c3b0ecb3da5cede271450e115974fbe2df68ccd868f9b2b67947e3bb38a8072e4666020c9cb394c9887f15be28fae6ec1b9b44add90
   languageName: node
   linkType: hard
 
-"@encointer/util@npm:^0.18.0-alpha.2":
-  version: 0.18.0-alpha.2
-  resolution: "@encointer/util@npm:0.18.0-alpha.2"
+"@encointer/util@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "@encointer/util@npm:0.18.0"
   dependencies:
     "@babel/runtime": "npm:^7.18.9"
     "@polkadot/util": "npm:^12.6.2"
@@ -564,17 +564,17 @@ __metadata:
     "@types/bn.js": "npm:^5.1.5"
     assert: "npm:^2.0.0"
     bn.js: "npm:^5.2.1"
-  checksum: 10c0/128a8b3835afd403cace1de6ea102bdfd88c64e3a360ea09ccfeeb513c365d978699d44110f3a2ff4b5197594ea1065bb3a179c1cc0774ba6d89ed983ebec95f
+  checksum: 10c0/ad51ce72bb6acca6313f18fd02b33fc6365806b779c8acc653dc784ee9d6661a90d332aac0188e7afc0c0076daaf36ca7fde4ba9b917bfa09c8cdf376925a1cc
   languageName: node
   linkType: hard
 
-"@encointer/worker-api@npm:^0.18.0-alpha.2":
-  version: 0.18.0-alpha.2
-  resolution: "@encointer/worker-api@npm:0.18.0-alpha.2"
+"@encointer/worker-api@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "@encointer/worker-api@npm:0.18.0"
   dependencies:
-    "@encointer/node-api": "npm:^0.18.0-alpha.2"
-    "@encointer/types": "npm:^0.18.0-alpha.2"
-    "@encointer/util": "npm:^0.18.0-alpha.2"
+    "@encointer/node-api": "npm:^0.18.0"
+    "@encointer/types": "npm:^0.18.0"
+    "@encointer/util": "npm:^0.18.0"
     "@peculiar/webcrypto": "npm:^1.4.6"
     "@polkadot/api": "npm:^11.2.1"
     "@polkadot/keyring": "npm:^12.6.2"
@@ -589,7 +589,7 @@ __metadata:
     tslib: "npm:^2.6.2"
   peerDependencies:
     "@polkadot/x-randomvalues": ^12.3.2
-  checksum: 10c0/3d2f835527d75c6b1b31550c0e7dbaeb98c97248d2bffc6b766fea8ac219d52e50ed57832c44a77c07f9e055c3eb7cf6f93a6cb14f27ba33600e9d5113df7b17
+  checksum: 10c0/0c0332ff48f3e11b47817d6eff9e8b1bf75ec1c014e350f65733390a72fe92da6c750a1d43a3ddc2c6f87bc2a7f2403feaf0dd3fcd70a72a6ef44c5f41a3c1ee
   languageName: node
   linkType: hard
 
@@ -10006,8 +10006,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "nuxt-app@workspace:."
   dependencies:
-    "@encointer/util": "npm:^0.18.0-alpha.2"
-    "@encointer/worker-api": "npm:^0.18.0-alpha.2"
+    "@encointer/util": "npm:^0.18.0"
+    "@encointer/worker-api": "npm:^0.18.0"
     "@esbuild-plugins/node-globals-polyfill": "npm:^0.2.3"
     "@headlessui/vue": "npm:^1.7.22"
     "@heroicons/vue": "npm:^2.1.3"

From 8816197408bfaa6a93a319f8be28ae5fcfc3a686 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Fri, 13 Dec 2024 13:51:29 +0100
Subject: [PATCH 2/7] fix initial session proxy creation

---
 components/overlays/SessionProxiesOverlay.vue |  6 +++++-
 components/tabs/MessagingTab.vue              |  4 +++-
 lib/wellKnownIdentites.ts                     | 12 ++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index 2851369..77b655e 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -207,6 +207,10 @@ const createSessionProxy = async () => {
 };
 
 const addSessionProxyFromSeed = async (seed: Uint8Array) => {
+  const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
+  const sessionProxy = localKeyring.addFromSeed(seed, {
+    name: "fresh",
+  });
   const injector = accountStore.hasInjector ? accountStore.injector : null;
   const role = incogniteeStore.api.createType(
     "SessionProxyRole",
@@ -217,7 +221,7 @@ const addSessionProxyFromSeed = async (seed: Uint8Array) => {
   const expiry = Math.floor(expiryDate.getTime());
   console.log(
     "create session proxy " +
-      proxy.address +
+      sessionProxy.address +
       " with role: " +
       role +
       " expiry update to: " +
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index b125602..0ffa316 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -528,7 +528,9 @@ watch(isInitializing, () => {
 const filteredLut = computed(() => {
   if (!conversationAddress.value) return [];
   return identityLut.filter((entry) =>
-    entry.username.includes(conversationAddress.value),
+    entry.username
+      .toLowerCase()
+      .includes(conversationAddress.value.toLowerCase()),
   );
 });
 
diff --git a/lib/wellKnownIdentites.ts b/lib/wellKnownIdentites.ts
index cc46b67..9a0a501 100644
--- a/lib/wellKnownIdentites.ts
+++ b/lib/wellKnownIdentites.ts
@@ -16,4 +16,16 @@ export const identities = [
     username: "Tester2",
     address: "13ueD4C3hvyagpap431WTPnNr4spEYCVv8gKr8gKDz88j9f5",
   },
+  {
+    username: "ExtensionTester1",
+    address: "1414CvA9uDs9tASKCizPo35JM2a1uWvHqAZtY9dWP45UGzj3",
+  },
+  {
+    username: "ExtensionTester2",
+    address: "12mU141fbeoK1N2zd5UEWLgWXfEEL1TAgCNCDe3yppMQy4JM",
+  },
+  {
+    username: "ExtensionTester3",
+    address: "15JmfZMWYeTEdBDCErte22Sup5FA6PMMkS9A3KeLkaf4a4HM",
+  },
 ];

From 651ed6843e18f71378ca513bfabf312ed4f5aa8b Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Fri, 13 Dec 2024 18:40:07 +0100
Subject: [PATCH 3/7] fix session proxy role downgrade cache inconsistency

---
 components/overlays/SessionProxiesOverlay.vue | 9 +++++++++
 store/account.ts                              | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index 77b655e..e3d2c45 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -273,6 +273,9 @@ const modifySessionProxyRole = async (
       " expiry update to: " +
       expiry,
   );
+  // clear the cached proxy entry at old role. it will be added again with the new role
+  // at the next fetchIncogniteeBalance
+  accountStore.removeProxyForRole(bestSessionProxyRole.value);
   const nonce = new u32(
     new TypeRegistry(),
     accountStore.nonce[incogniteeSidechain.value],
@@ -360,6 +363,12 @@ watch(
       isSignerBusy.value = false;
       [bestSessionProxy.value, bestSessionProxyRole.value] =
         accountStore.sessionProxyBest();
+      console.log(
+        "best session proxy: ",
+        bestSessionProxy.value.address,
+        " role: ",
+        bestSessionProxyRole.value,
+      );
       if (bestSessionProxyRole.value !== null) {
         selectedSessionProxyRole.value = bestSessionProxyRole.value;
       } else {
diff --git a/store/account.ts b/store/account.ts
index 575de1f..2f3a595 100644
--- a/store/account.ts
+++ b/store/account.ts
@@ -201,6 +201,10 @@ export const useAccount = defineStore("account", {
       this.sessionProxies[role] = sessionProxy;
       this.sessionProxySeeds[sessionProxy] = seed;
     },
+    removeProxyForRole(role: SessionProxyRole) {
+      delete this.sessionProxies[role];
+      delete this.sessionProxySeeds[role];
+    },
     setBalanceFree(balance: BigInt, chain: ChainId) {
       this.balanceFree[chain] = balance;
     },

From c9eba93fbb9a92b40cea644f44b9aef5edcadda3 Mon Sep 17 00:00:00 2001
From: Alex <32063118+alex-byteport@users.noreply.github.com>
Date: Tue, 17 Dec 2024 09:25:10 +0100
Subject: [PATCH 4/7] New sidebar with navigation added: UI changes and small
 fixes (#101)

* new sidebar with navigation added. ui changes and small fixes.

* prettier

* fix warnings

* fix dangling session proxies hwn changing role

---------

Co-authored-by: Alexey Popov <a.popov@tantumpay.com>
Co-authored-by: Alain Brenzikofer <alain@integritee.network>
---
 app.vue                                       |  11 +-
 assets/img/.DS_Store                          | Bin 6148 -> 8196 bytes
 assets/img/incognitee-full-logo.svg           |   1 +
 components/Logo/incognitee-logo.vue           |   2 +-
 components/overlays/SessionProxiesOverlay.vue |   3 -
 components/tabs/MessagingTab.vue              |  78 ++-
 components/tabs/SwapTab.vue                   |  32 +-
 components/tabs/VouchersTab.vue               | 613 +++++++++---------
 components/tabs/WalletTab.vue                 |  17 +-
 components/ui/CampaignBanner.vue              |   2 +-
 components/ui/HealthIndicator.vue             |   8 +-
 components/ui/InfoBanner.vue                  |   2 +-
 components/ui/NetworkSelector.vue             |   4 +-
 components/ui/PrivateMessageHistory.vue       |  17 +-
 components/ui/PrivateTxHistory.vue            |   6 +-
 components/ui/Sidebar.vue                     | 222 +++++++
 helpers/eventBus.ts                           |   6 +-
 layouts/default.vue                           | 277 ++------
 package.json                                  |   3 +-
 pages/index.vue                               |  27 +-
 public/.DS_Store                              | Bin 6148 -> 8196 bytes
 public/img/.DS_Store                          | Bin 6148 -> 6148 bytes
 public/img/index/.DS_Store                    | Bin 8196 -> 10244 bytes
 23 files changed, 728 insertions(+), 603 deletions(-)
 create mode 100644 assets/img/incognitee-full-logo.svg
 create mode 100644 components/ui/Sidebar.vue

diff --git a/app.vue b/app.vue
index 5cd504e..d3971a3 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts"></script>
 
 <template>
-  <NuxtLayout />
+  <div>
+    <NuxtLoadingIndicator />
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+
+    <UNotifications />
+    <UModals />
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store
index 65e8314d814e81c870588fe50d355e645f695a20..0806ef0b14a7c64d77767872fa0e0c7e44f9742e 100644
GIT binary patch
literal 8196
zcmeHML2DC16n@jD?S|4)QK2Bx1+TRxMbscdOe5meh#pjGl8xz-%}(ehO`#NW*8kui
z@Zi-y;7?FI`VTyN((lbo>m<9WLP3h12{UiA^S<|HzxQ@FZ$m_)G6;%9t3>3Xvs_uk
zkkNRad#cTtGglx5@I-ZLQlFAXk!+^4-3iBlW56-s7;p?Y2F?NlcxH3+rabrctQ#Ez
zj)8N@0PhbzI?J+=BQ4d|fkBl3kU5-I4acYh6vj8QY~)Bw1%*vrJqQC8ro<2$j(MNe
zA<IUNwA64C8cxD^7N$ZG$~$nrQYTT?(v6M*$3U6^uH8LU?UG_t?pFQYh-3qEd^_Do
z-}tE-jxzKc!=z{QKQ?+%nDh&UFJfjkH#fiFdETP;vbH0KwSK)nNGkQ+=lt!7lu_g8
zxZZdgwuaj)m$qcwuZMAKR{_GH1(g@i!Z?t_iX6m2qOdhR;pOxB?UmJogIlF_zj*V`
z;ktiN+$?Oa`?pJ_!^6CH`Pz-UkGDHfH<oYI%1M~*gO>F7<MD0Qbp=T?YG9qLl_Du>
z7i&$~?P(MFds#YNS*;pkyye0iJ$(O($xPYm%HXf`dONnyGP_RM+N<rxk&N4z<BPpW
zAwtUmZbOC$atoj9)J3op>d*$pJ!<nS8!O}=fV4wCr>q1(?vHDVtJ5|AleDm|{WUUz
z6M~7gPLHL++J0wz)=q-2-;a~P!rS4`))))?+BZ0`{ZEA4qez8oN^k||x*gml=yQ5V
zq(x}<g3PoKKPHgN)Kh8HQrIIanb;XlNZacLU?n_vU?IR!AKp*4@Oi?*0#a9Ey&)__
z`mN*d6rSBWS$iyIl;?;}*t6rdoSQ$oc~e@}tvgj~EPhmgGweVEtUti||8U)E|9xle
zzl?UxF>qQ2X0?G;uKyoQfB%14HxBO@a15Mb21Kq}t5&c;eh6kYuC;yiSLobWZ=|Jy
rU{K{aq$<ZDkN+^lu@6<ol#Lu|i8E;b{6&EIwcwurihehoQwDwk73Q4*

delta 143
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjUEV6q~50D9Q(t2a6>#Br}vS6sHs?=WHxo
z&dA6&*-%hqvWDQ2$$G-mCw~>0u(4EzWidMkhafXh4-g1&0|{4<SsM$#Gf(E1aRgZg
TGK~d9GeK+vi*1hQnZpbK6%-fk

diff --git a/assets/img/incognitee-full-logo.svg b/assets/img/incognitee-full-logo.svg
new file mode 100644
index 0000000..cd059a2
--- /dev/null
+++ b/assets/img/incognitee-full-logo.svg
@@ -0,0 +1 @@
+<svg data-v-bfd8894c="" data-v-433a9abd="" width="234" height="30" viewBox="0 0 236 30" xmlns="http://www.w3.org/2000/svg"><path class="blue-hover show-on-hover" d="M62 7.39438C61.8841 13.2019 61.0444 18.6842 58.4869 23.779C57.6472 25.4513 56.6038 26.9813 55.1652 28.1933C52.8518 30.1428 50.2784 30.5604 47.575 29.2222C45.9695 28.4279 44.5045 27.3492 42.9535 26.4376C41.3076 25.469 39.6652 24.4881 37.9683 23.6156C33.2625 21.1934 28.5127 21.197 23.8578 23.6991C21.1544 25.1527 18.5617 26.8179 15.9391 28.4208C14.3512 29.3893 12.7053 30.1126 10.8029 29.9491C8.71084 29.7696 7.10357 28.666 5.76858 27.1128C3.42355 24.3833 2.18165 21.1028 1.2981 17.6695C0.184429 13.3458 -0.189721 8.94399 0.0878175 4.48353C0.129975 3.7958 0.35306 3.27689 0.874762 2.82196C2.86672 1.07864 5.22755 0.271848 7.79039 0.0852548C13.0935 -0.303925 18.0804 0.916928 22.86 3.20403C24.4989 3.98772 26.194 4.6559 27.8838 5.32408C29.9952 6.15753 32.1365 6.1291 34.2321 5.27966C36.1591 4.49774 38.0597 3.64652 39.9638 2.80596C44.5695 0.774761 49.3492 -0.353684 54.3975 0.0994714C56.8849 0.321606 59.186 1.12485 61.1094 2.8344C61.5837 3.25556 61.856 3.72294 61.87 4.37157C61.8928 5.43604 61.9596 6.49873 62 7.39438ZM36.6175 14.0193C37.9016 15.704 39.3314 17.1221 41.0968 18.1688C43.3065 19.4785 45.5813 19.7078 47.9281 18.558C49.9429 17.5699 51.5378 16.0701 52.901 14.3054C53.0011 14.1757 52.9589 13.8008 52.843 13.6515C51.7311 12.2067 50.4312 10.9628 48.8854 9.99425C46.5755 8.54948 44.1901 8.25804 41.7098 9.52688C39.6529 10.5789 38.0368 12.1445 36.6175 14.0193ZM25.3684 14.0211C23.8332 12.0148 22.0907 10.3301 19.8054 9.31363C18.6425 8.7965 17.4182 8.56014 16.1499 8.8036C12.9459 9.4167 10.8099 11.5581 8.82677 14.0069C10.283 15.9155 11.9254 17.5131 14.0403 18.5527C16.2553 19.642 18.4352 19.5176 20.5853 18.3341C22.4876 17.2856 23.9965 15.7964 25.3684 14.0229V14.0211Z" fill="url(#paint0_linear_431_37837)" data-v-inspector="components/Logo/incognitee-logo.vue:9:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M219.12 15.1342C219.12 9.8775 222.556 6.29492 227.16 6.29492C231.964 6.29492 234.966 9.91098 234.966 14.8663C234.966 15.3686 234.933 15.7703 234.9 16.1387H223.157C223.29 19.3529 224.958 20.7592 227.26 20.7592C229.395 20.7592 230.563 19.4869 231.33 17.7458L235 19.1186C233.832 22.065 231.363 23.9735 227.227 23.9735C222.323 23.9735 219.12 20.6587 219.12 15.1342ZM223.29 13.1253H230.863C230.73 10.7146 229.295 9.34179 227.16 9.34179C225.125 9.34179 223.59 10.7146 223.29 13.1253Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:14:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M200.55 15.1342C200.55 9.8775 203.986 6.29492 208.59 6.29492C213.394 6.29492 216.397 9.91098 216.397 14.8663C216.397 15.3686 216.363 15.7703 216.33 16.1387H204.587C204.72 19.3529 206.388 20.7592 208.69 20.7592C210.825 20.7592 211.993 19.4869 212.76 17.7458L216.43 19.1186C215.262 22.065 212.794 23.9735 208.657 23.9735C203.753 23.9735 200.55 20.6587 200.55 15.1342ZM204.72 13.1253H212.293C212.16 10.7146 210.725 9.34179 208.59 9.34179C206.555 9.34179 205.021 10.7146 204.72 13.1253Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:19:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M189.702 9.97724H186.099V6.79645H189.702V1.57324H193.772V6.79645H198.175V9.97724H193.772V18.5821C193.772 19.6201 194.272 20.1223 195.306 20.1223H198.843V23.4705H193.905C191.203 23.4705 189.702 21.8969 189.702 19.2183V9.97724Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:24:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M178.908 4.15178V0H183.245V4.15178H178.908ZM179.074 23.4709V6.79686H183.111V23.4709H179.074Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:29:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M163.434 23.4712H159.364V6.79715H163.134C163.101 7.76813 162.433 9.27483 161.499 10.6476H163.401C164.101 8.40429 165.87 6.29492 168.605 6.29492C172.375 6.29492 174.31 8.60518 174.31 12.4891V23.4712H170.24V13.2927C170.24 10.882 169.139 9.71009 167.237 9.71009C163.768 9.71009 163.434 13.0583 163.434 15.8373V23.4712Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:34:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M137.664 26.9199C137.664 25.5471 138.631 24.5092 139.965 24.0069V22.6007C138.898 22.2324 138.197 21.4958 138.197 20.4244C138.197 19.0181 139.065 18.0136 140.833 17.3775V16.0047C139.599 15.0672 138.931 14.0293 138.931 12.2547C138.931 8.87304 141.834 6.29492 145.637 6.29492C148.606 6.29492 150.741 7.6342 151.508 9.67661H152.843C153.076 7.6342 153.81 6.79715 155.445 6.79715H156.412V9.97795H154.778C153.543 9.97795 153.21 10.2458 153.043 12.0538L152.976 12.5561C152.609 16.2726 149.907 18.5159 146.037 18.5159C144.603 18.5159 143.502 18.315 142.734 17.9132C141.834 18.2145 141.367 18.6833 141.367 19.286C141.367 19.8552 141.9 20.1565 142.968 20.1565H150.141C153.477 20.1565 155.745 22.2324 155.745 25.0449C155.745 28.2257 153.377 30.0002 150.141 30.0002H141.767C138.798 30.0002 137.664 28.4266 137.664 26.9199ZM149.24 12.4891C149.24 10.5806 148.005 9.20786 146.037 9.20786C144.069 9.20786 142.835 10.5806 142.835 12.4891C142.835 14.3976 144.036 15.7034 146.037 15.7034C147.939 15.7034 149.24 14.3976 149.24 12.4891ZM142.968 26.8864H149.44C150.941 26.8864 151.709 26.3172 151.709 25.1453C151.709 24.0404 150.941 23.4712 149.44 23.4712H141.967C141.433 23.7726 140.933 24.4757 140.933 25.2458C140.933 26.3507 141.6 26.8864 142.968 26.8864Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:39:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M118.645 15.1342C118.645 9.94447 122.115 6.29492 127.019 6.29492C131.923 6.29492 135.393 9.94447 135.393 15.1342C135.393 20.3909 131.823 23.9735 127.019 23.9735C122.215 23.9735 118.645 20.2235 118.645 15.1342ZM131.189 15.2012C131.189 11.5516 129.454 9.60965 127.019 9.60965C124.483 9.60965 122.849 11.5516 122.849 15.2012C122.849 18.8172 124.483 20.6587 127.019 20.6587C129.554 20.6587 131.189 18.8172 131.189 15.2012Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:44:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M100.173 15.1007C100.173 9.8775 103.876 6.29492 108.714 6.29492C112.583 6.29492 115.219 8.40429 116.253 11.2503L112.517 12.5896C111.85 10.7146 110.515 9.60965 108.614 9.60965C106.178 9.60965 104.31 11.4846 104.31 15.1007C104.31 18.7503 106.212 20.6587 108.647 20.6587C110.782 20.6587 112.05 19.4534 112.75 17.277L116.587 18.6498C115.386 21.8641 112.583 23.9735 108.714 23.9735C103.743 23.9735 100.173 20.4244 100.173 15.1007Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:49:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M85.7002 23.4712H81.6301V6.79715H85.3999C85.3666 7.76813 84.6993 9.27483 83.7652 10.6476H85.6668C86.3674 8.40429 88.1355 6.29492 90.8711 6.29492C94.6409 6.29492 96.5759 8.60518 96.5759 12.4891V23.4712H92.5058V13.2927C92.5058 10.882 91.4049 9.71009 89.5033 9.71009C86.0338 9.71009 85.7002 13.0583 85.7002 15.8373V23.4712Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:54:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M72 23.4707V0.0332031H76.3369V23.4707H72Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:59:5" data-v-bfd8894c=""/><defs data-v-inspector="components/Logo/incognitee-logo.vue:64:5" data-v-bfd8894c=""><linearGradient id="paint0_linear_431_37837" x1="62" y1="15" x2="0" y2="15" gradientUnits="userSpaceOnUse" data-v-inspector="components/Logo/incognitee-logo.vue:65:7" data-v-bfd8894c=""><stop offset="0.0913122" stop-color="#24AD7C" data-v-inspector="components/Logo/incognitee-logo.vue:73:9" data-v-bfd8894c=""/><stop offset="1" stop-color="#1845B9" data-v-inspector="components/Logo/incognitee-logo.vue:74:9" data-v-bfd8894c=""/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/components/Logo/incognitee-logo.vue b/components/Logo/incognitee-logo.vue
index 30199bd..3819e2f 100644
--- a/components/Logo/incognitee-logo.vue
+++ b/components/Logo/incognitee-logo.vue
@@ -2,7 +2,7 @@
   <svg
     width="234"
     height="30"
-    viewBox="0 0 330 30"
+    viewBox="0 0 236 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index e3d2c45..2e5dd5b 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -273,9 +273,6 @@ const modifySessionProxyRole = async (
       " expiry update to: " +
       expiry,
   );
-  // clear the cached proxy entry at old role. it will be added again with the new role
-  // at the next fetchIncogniteeBalance
-  accountStore.removeProxyForRole(bestSessionProxyRole.value);
   const nonce = new u32(
     new TypeRegistry(),
     accountStore.nonce[incogniteeSidechain.value],
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index 0ffa316..3a24a2a 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -50,16 +50,23 @@
     </div>
     <!-- Overlay End -->
 
-    <div class="bg-gray-900 text-white max-h-[650px] flex mt-10">
+    <div class="bg-incognitee-blue text-white flex">
       <!-- Form starts here -->
 
       <!-- Sidebar -->
       <div
         v-if="!isMobile || !showChatDetail"
         :class="isMobile ? 'w-full' : 'md:w-1/3'"
-        class="bg-gray-800 border-r border-gray-700 flex flex-col"
+        class="bg-incognitee-blue border-r border-gray-700 flex flex-col"
       >
         <div class="px-4 py-4 flex items-center justify-between">
+          <!-- Sidebar-Button -->
+          <button
+            @click="eventBus.emit('toggleSidebar')"
+            class="lg:hidden text-white focus:outline-none text-2xl"
+          >
+            ☰
+          </button>
           <!-- Linksbündiger Titel -->
           <div
             class="title text-2xl font-bold tracking-tight text-white sm:text-2xl"
@@ -168,7 +175,7 @@
       <div
         v-if="!isMobile || showChatDetail"
         :class="isMobile ? 'w-full' : 'md:w-2/3'"
-        class="bg-gray-900 flex flex-col"
+        class="bg-incognitee-blue flex flex-col h-screen relative"
       >
         <!-- Header -->
         <div
@@ -184,30 +191,27 @@
           <h2 class="text-lg font-bold">
             {{
               recipientValid(conversationAddress)
-                ? "Chat with " +
-                  (maybeUsername(conversationAddress) || "") +
+                ? (maybeUsername(conversationAddress) || "") +
                   " " +
-                  conversationAddress.slice(0, 12) +
-                  "..."
+                  (isMobile
+                    ? conversationAddress.slice(0, 10) + "..." // Mobile: Abgekürzt
+                    : conversationAddress) // Desktop: Vollständige Adresse
                 : "Chat"
             }}
           </h2>
         </div>
         <!-- Chat Messages -->
-        <div class="flex-1 overflow-y-auto">
+        <div class="flex-1 overflow-y-auto" style="height: calc(100vh - 12rem)">
           <div
             v-if="eventHorizon"
-            class="ml-5 mt-5 flex justify-center text-gray-500"
+            class="my-5 mx-5 flex text-center text-xs text-gray-500"
           >
-            <i
-              >messages before {{ formatMoment(eventHorizon) }} have been purged
-              from Incognitee state. more recent messages can be polled in
-              batches</i
-            >
+            messages before {{ formatMoment(eventHorizon) }} have been purged
+            from Incognitee state. more recent messages can be polled in batches
           </div>
           <div
             v-if="unfetchedBucketsCount > 0"
-            class="mt-5 flex justify-center text-gray-500"
+            class="my-5 mx-5 flex text-center text-xs text-gray-500"
           >
             <button @click="fetchOlderBucket">
               query more messages
@@ -228,7 +232,7 @@
         <!-- Input Box -->
         <div
           v-if="recipientValid(conversationAddress)"
-          class="border-t border-gray-700"
+          class="border-t border-gray-700 bg-gray-800 absolute bottom-0 left-0 right-0 z-10"
         >
           <div class="flex items-center bg-gray-800 px-4 py-2">
             <form class="flex w-full" @submit.prevent="submitSendForm">
@@ -385,10 +389,11 @@
 <script setup lang="ts">
 import PrivateMessageHistory from "~/components/ui/PrivateMessageHistory.vue";
 import { incogniteeSidechain } from "~/lib/environmentConfig";
+import { eventBus } from "@/helpers/eventBus";
 import { INCOGNITEE_TX_FEE } from "~/configs/incognitee";
 import { Health, useSystemHealth } from "~/store/systemHealth";
 import { TypeRegistry, u32 } from "@polkadot/types";
-import { defineProps, ref, watch, computed, onMounted } from "vue";
+import { defineProps, ref, watch, computed, onMounted, onUnmounted } from "vue";
 import { useAccount } from "~/store/account";
 import { useIncognitee } from "~/store/incognitee";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
@@ -709,47 +714,60 @@ const inputText = ref("");
 
 <style scoped>
 textarea {
-  resize: none; /* Disable resizing for better layout control */
+  resize: none;
+  /* Disable resizing for better layout control */
 }
 
 .relative {
-  position: relative; /* Ensure the counter is positioned relative to the input */
+  position: relative;
+  /* Ensure the counter is positioned relative to the input */
 }
+
 .bg-opacity-75 {
   background-color: rgba(0, 0, 0, 0.828);
 }
 
 .fixed {
-  z-index: 50; /* Ensure overlay is on top */
+  z-index: 50;
+  /* Ensure overlay is on top */
 }
 
 .pointer-events-none {
   pointer-events: none;
 }
+
 /* Für Webkit-basierte Browser (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
-  width: 5px; /* Breite der Scrollbar */
+  width: 5px;
+  /* Breite der Scrollbar */
 }
 
 ::-webkit-scrollbar-track {
-  background: #1f293700; /* Hintergrund des Tracks */
+  background: #1f293700;
+  /* Hintergrund des Tracks */
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #4b556300; /* Farbe der Scrollbar */
-  border-radius: 6px; /* Runde Ecken */
-  border: 3px solid #1f2937; /* Abstand zur Scrollspur */
+  background-color: #4b556300;
+  /* Farbe der Scrollbar */
+  border-radius: 6px;
+  /* Runde Ecken */
+  border: 3px solid #1f2937;
+  /* Abstand zur Scrollspur */
 }
 
 /* Für Firefox */
 * {
-  scrollbar-width: thin; /* Dünne Scrollbar */
-  scrollbar-color: #4b5563 #1f293700; /* Daumen- und Trackfarben */
+  scrollbar-width: thin;
+  /* Dünne Scrollbar */
+  scrollbar-color: #4b5563 #1f293700;
+  /* Daumen- und Trackfarben */
 }
 
 /* Optional: Hover-Effekt auf der Scrollbar */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #6b7280; /* Hover-Farbe der Scrollbar */
+  background-color: #6b7280;
+  /* Hover-Farbe der Scrollbar */
 }
 
 .wallet-address {
@@ -760,14 +778,14 @@ textarea {
   /* Versteckt überlaufenden Text */
   text-overflow: ellipsis;
   /* Zeigt '...' bei zu langem Text an */
-  max-width: 15ch;
+  max-width: 10ch;
   /* Maximale Länge: 10 Zeichen */
 }
 
 /* Für größere Bildschirme (ab 641px) */
 @media (min-width: 641px) {
   .wallet-address {
-    max-width: 15ch;
+    max-width: 10ch;
     /* Begrenze auch hier auf 10 Zeichen */
   }
 }
diff --git a/components/tabs/SwapTab.vue b/components/tabs/SwapTab.vue
index d10e4a4..757b42a 100644
--- a/components/tabs/SwapTab.vue
+++ b/components/tabs/SwapTab.vue
@@ -1,37 +1,47 @@
 <template>
-  <div class="mt-3 text-center sm:mt-5">
+  <div class="mt-3 sm:mt-5 px-3">
+    <button
+      @click="eventBus.emit('toggleSidebar')"
+      class="lg:hidden text-white focus:outline-none text-2xl"
+    >
+      ☰
+    </button>
+  </div>
+  <div class="mt-3 text-center sm:mt-5 px-3">
     <span as="h3" class="text-base font-semibold leading-6 text-white"
       >Private Swaps
     </span>
 
     <div class="mt-2">
-      <p class="text-sm text-gray-400 text-justify">COMING SOON<sup>TM</sup></p>
-      <p class="text-sm text-gray-400 text-justify">
+      <div class="text-sm text-gray-400 text-justify">
+        COMING SOON<sup>TM</sup>
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         Whenever you use a centralized exchange (CEX), you trust them to operate
         a fair market and protect your data. Even worse, you hand over custody
         over your assets to them. The upside is: fast trading and something like
         privacy (in the best case your exposing your data and behavior to one
         entity only, not to the public)
-      </p>
-      <p class="text-sm text-gray-400 text-justify">
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         If you need more autonomy, you may want to use decentralized exchanges
         (DEX). There, you keep custody over your assets and no single entity has
         the power to deny you access to the trading platform. However, this
         freedom comes with downsides: High latency and front-running
-      </p>
-      <p class="text-sm text-gray-400 text-justify">
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         Incognitee can support shielding of various digital assets and offer
         automated market makers (AMM, similar to uniswap) on L2. This will
         prevent front-running because no one can see the transactions before
         they are executed. It also offers enhanced speed because of subsecond
         block times on Incognitee
-      </p>
-      <!-- this is necessary to avoid the footer overlapping the text -->
-      <br /><br /><br /><br /><br /><br /><br />
+      </div>
     </div>
   </div>
 </template>
-
+<script setup lang="ts">
+import { eventBus } from "@/helpers/eventBus";
+</script>
 <style scoped>
 h1 {
   font-size: 2em; /* Adjust as needed */
diff --git a/components/tabs/VouchersTab.vue b/components/tabs/VouchersTab.vue
index bbafb42..1e12988 100644
--- a/components/tabs/VouchersTab.vue
+++ b/components/tabs/VouchersTab.vue
@@ -1,351 +1,361 @@
 <template>
-  <NetworkSelector
-    :openAssetsInfo="() => {}"
-    :selectedNetwork="shieldingTarget"
-  />
-  <div class="text-center mt-10 mb-5">
-    <span class="text-2xl font-black">Vouchers</span>
-    <p class="mt-2 text-sm text-gray-400">
-      Here you can create new vouchers to share tokens with your friends in
-      seconds. <br />Your friend doesn’t need an existing wallet but can redeem
-      the voucher to a secure wallet later at their convenience.​
-    </p>
+  <div class="mt-3 sm:mt-5 px-3">
     <button
-      @click="openCreateVoucher"
-      type="button"
-      class="my-10 bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+      @click="eventBus.emit('toggleSidebar')"
+      class="lg:hidden text-white focus:outline-none text-2xl"
     >
-      Create Voucher​
+      ☰
     </button>
   </div>
+  <div class="p-3">
+    <NetworkSelector
+      :openAssetsInfo="() => {}"
+      :selectedNetwork="shieldingTarget"
+    />
+    <div class="text-center mt-10 mb-5">
+      <span class="text-2xl font-black">Vouchers</span>
+      <p class="mt-2 text-sm text-gray-400">
+        Here you can create new vouchers to share tokens with your friends in
+        seconds. <br />Your friend doesn’t need an existing wallet but can
+        redeem the voucher to a secure wallet later at their convenience.​
+      </p>
+      <button
+        @click="openCreateVoucher"
+        type="button"
+        class="my-10 bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+      >
+        Create Voucher​
+      </button>
+    </div>
 
-  <div
-    v-if="allVouchers?.length > 0"
-    class="flex items-center justify-between text-2xl font-bold tracking-tight text-white sm:text-2xl"
-  >
-    <!-- Linke Seite: Überschrift -->
-    <div>History</div>
-
-    <!-- Rechte Seite: Button -->
-    <button
-      @click="openDeleteModal('all')"
-      type="button"
-      class="text-sm font-semibold hover:text-incognitee-green"
+    <div
+      v-if="allVouchers?.length > 0"
+      class="flex items-center justify-between text-2xl font-bold tracking-tight text-white sm:text-2xl"
     >
-      Clear all history
-    </button>
-  </div>
+      <!-- Linke Seite: Überschrift -->
+      <div>History</div>
+
+      <!-- Rechte Seite: Button -->
+      <button
+        @click="openDeleteModal('all')"
+        type="button"
+        class="text-sm font-semibold hover:text-incognitee-green"
+      >
+        Clear all history
+      </button>
+    </div>
 
-  <div class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
-    <table class="w-full whitespace-nowrap text-left">
-      <tbody class="divide-y divide-white/10">
-        <tr
-          v-for="(voucher, index) in allVouchers"
-          :key="index"
-          class="flex justify-between"
-        >
-          <!-- Linksbündige Zelle mit Icon, Text und "New"-Badge -->
-          <td
-            class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8"
+    <div class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
+      <table class="w-full whitespace-nowrap text-left">
+        <tbody class="divide-y divide-white/10">
+          <tr
+            v-for="(voucher, index) in allVouchers"
+            :key="index"
+            class="flex justify-between"
           >
-            <div class="flex flex-col">
-              <div class="flex items-start gap-x-3">
-                <div class="text-sm font-medium text-white wallet-address">
-                  {{ voucher.address }}
+            <!-- Linksbündige Zelle mit Icon, Text und "New"-Badge -->
+            <td
+              class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8"
+            >
+              <div class="flex flex-col">
+                <div class="flex items-start gap-x-3">
+                  <div class="text-sm font-medium text-white wallet-address">
+                    {{ voucher.address }}
+                  </div>
                 </div>
+                <div class="mt-1 text-xs text-gray-500">{{ voucher.note }}</div>
               </div>
-              <div class="mt-1 text-xs text-gray-500">{{ voucher.note }}</div>
-            </div>
-          </td>
+            </td>
 
-          <!-- Rechtsbündige Zelle für TEER Betrag und Datum -->
-          <td
-            class="flex flex-col items-end py-4 pr-4 text-right text-sm text-white sm:pr-6 lg:pr-8"
-          >
-            <div class="text-sm font-medium text-white">
-              {{ voucher.amount }} {{ accountStore.getSymbol }}
-            </div>
-            <time class="mt-1 text-xs text-gray-500">{{
-              formatDate(voucher.timestamp)
-            }}</time>
-          </td>
-          <td
-            class="py-4 pl-0 pr-4 text-right text-sm/6 text-white sm:table-cell sm:pr-6 lg:pr-8"
-          >
-            <!-- Desktop Ansicht -->
-            <div class="flex items-center gap-4">
-              <svg
-                @click="showVoucher(voucher)"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                class="size-5 cursor-pointer"
-              >
-                <path
-                  d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
-                />
-                <path
-                  fill-rule="evenodd"
-                  d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
-                  clip-rule="evenodd"
-                />
-                <path
-                  d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
-                />
-              </svg>
-              <svg
-                @click="openDeleteModal(voucher)"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                class="size-5 cursor-pointer"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div>
-    <!-- this is necessary to avoid the footer overlapping the text -->
-    <br /><br /><br /><br /><br /><br /><br />
-  </div>
+            <!-- Rechtsbündige Zelle für TEER Betrag und Datum -->
+            <td
+              class="flex flex-col items-end py-4 pr-4 text-right text-sm text-white sm:pr-6 lg:pr-8"
+            >
+              <div class="text-sm font-medium text-white">
+                {{ voucher.amount }} {{ accountStore.getSymbol }}
+              </div>
+              <time class="mt-1 text-xs text-gray-500">{{
+                formatDate(voucher.timestamp)
+              }}</time>
+            </td>
+            <td
+              class="py-4 pl-0 pr-4 text-right text-sm/6 text-white sm:table-cell sm:pr-6 lg:pr-8"
+            >
+              <!-- Desktop Ansicht -->
+              <div class="flex items-center gap-4">
+                <svg
+                  @click="showVoucher(voucher)"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="size-5 cursor-pointer"
+                >
+                  <path
+                    d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
+                    clip-rule="evenodd"
+                  />
+                  <path
+                    d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
+                  />
+                </svg>
+                <svg
+                  @click="openDeleteModal(voucher)"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="size-5 cursor-pointer"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <!-- this is necessary to avoid the footer overlapping the text -->
+      <br /><br /><br /><br /><br /><br /><br />
+    </div>
 
-  <!-- Delete Popup -->
-  <div
-    v-if="isDeleteModalOpen"
-    class="relative z-10"
-    aria-labelledby="modal-title"
-    role="dialog"
-    aria-modal="true"
-  >
+    <!-- Delete Popup -->
     <div
-      class="fixed inset-0 bg-gray-500/75 transition-opacity"
-      aria-hidden="true"
-    ></div>
-
-    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+      v-if="isDeleteModalOpen"
+      class="relative z-10"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
       <div
-        class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
-      >
+        class="fixed inset-0 bg-gray-500/75 transition-opacity"
+        aria-hidden="true"
+      ></div>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
         <div
-          class="w-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+          class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
         >
-          <!-- Close Button (X) -->
-          <button
-            @click="closeDeleteModal"
-            type="button"
-            class="absolute top-3 right-3 text-white bg-transparent hover:text-gray-300"
+          <div
+            class="w-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-incognitee-gray sm:mx-0 sm:size-10"
+            <!-- Close Button (X) -->
+            <button
+              @click="closeDeleteModal"
+              type="button"
+              class="absolute top-3 right-3 text-white bg-transparent hover:text-gray-300"
             >
               <svg
-                class="size-6 text-green"
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6"
                 fill="none"
                 viewBox="0 0 24 24"
-                stroke-width="1.5"
                 stroke="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
+                stroke-width="2"
               >
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                  d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
-            </div>
-            <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-              <h3 class="text-base font-semibold text-white" id="modal-title">
-                Forget voucher(s)
-              </h3>
-              <div class="mt-2">
-                <p class="text-sm text-gray-500">
-                  You are only clearing the entry, funds remain on the address
-                  and are accessible via the link if you shared or saved it
-                </p>
+            </button>
+
+            <div class="sm:flex sm:items-start">
+              <div
+                class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-incognitee-gray sm:mx-0 sm:size-10"
+              >
+                <svg
+                  class="size-6 text-green"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                  data-slot="icon"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                  />
+                </svg>
+              </div>
+              <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                <h3 class="text-base font-semibold text-white" id="modal-title">
+                  Forget voucher(s)
+                </h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500">
+                    You are only clearing the entry, funds remain on the address
+                    and are accessible via the link if you shared or saved it
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="relative group">
-            <div class="relative inline-block group"></div>
-          </div>
-          <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <button
-              @click="doForgetVoucher()"
-              type="button"
-              class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
-            >
-              Forget
-            </button>
+            <div class="relative group">
+              <div class="relative inline-block group"></div>
+            </div>
+            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+              <button
+                @click="doForgetVoucher()"
+                type="button"
+                class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+              >
+                Forget
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <OverlayDialog
-    :show="showCreateVoucher"
-    :close="closeCreateVoucher"
-    title="Create new Voucher"
-  >
-    <div class="mt-5">
-      <p class="text-sm text-gray-400 text-left my-4">
-        We will create a new temporary keypair where you can transfer funds to.
-        In the next step, you'll be able to share your new voucher
-      </p>
-    </div>
-    <form class="mt-5" @submit.prevent="submitGenerateVoucherForm">
-      <div class="mt-10">
-        <!-- Label and available balance -->
-        <div class="flex justify-between items-center">
-          <label
-            for="CreateVoucher"
-            class="text-sm font-medium leading-6 text-white"
-            >{{ accountStore.getSymbol }} Amount</label
-          >
+    <OverlayDialog
+      :show="showCreateVoucher"
+      :close="closeCreateVoucher"
+      title="Create new Voucher"
+    >
+      <div class="mt-5">
+        <p class="text-sm text-gray-400 text-left my-4">
+          We will create a new temporary keypair where you can transfer funds
+          to. In the next step, you'll be able to share your new voucher
+        </p>
+      </div>
+      <form class="mt-5" @submit.prevent="submitGenerateVoucherForm">
+        <div class="mt-10">
+          <!-- Label and available balance -->
+          <div class="flex justify-between items-center">
+            <label
+              for="CreateVoucher"
+              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>
+            <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="
-              Math.max(
-                0,
-                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-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input text-right"
-            placeholder="Amount"
-          />
-        </div>
+          <!-- Input field -->
+          <div>
+            <input
+              id="sendAmount"
+              v-model="sendAmount"
+              type="number"
+              step="0.01"
+              :min="0.1"
+              :max="
+                Math.max(
+                  0,
+                  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-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input text-right"
+              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
+          <!-- 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="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-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input"
+          ></textarea>
+        </div>
+        <div class="mt-8 bottom-0 left-0 w-full bg-gray-800">
+          <button
+            type="submit"
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
           >
+            Generate Voucher
+          </button>
         </div>
+      </form>
+    </OverlayDialog>
+
+    <!-- share QR Voucher -->
+    <OverlayDialog
+      :show="showShareVoucher"
+      :close="closeShareVoucher"
+      title="Share Voucher"
+    >
+      <div class="mt-5">
+        <p class="text-sm text-gray-400 text-left my-4">
+          Share this voucher with your friend. You can either have them scan
+          this QR code or send them the link via private message. Make sure no
+          one else has access to this voucher as any holder can redeem the funds
+        </p>
       </div>
-      <!-- Messages -->
-      <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-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input"
-        ></textarea>
-      </div>
-      <div class="mt-8 bottom-0 left-0 w-full bg-gray-800">
-        <button
-          type="submit"
-          class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
-        >
-          Generate Voucher
-        </button>
+      <div class="mt-5 flex justify-center items-center qrcode-container">
+        <qrcode :value="selectedVoucher?.url"></qrcode>
       </div>
-    </form>
-  </OverlayDialog>
-
-  <!-- share QR Voucher -->
-  <OverlayDialog
-    :show="showShareVoucher"
-    :close="closeShareVoucher"
-    title="Share Voucher"
-  >
-    <div class="mt-5">
-      <p class="text-sm text-gray-400 text-left my-4">
-        Share this voucher with your friend. You can either have them scan this
-        QR code or send them the link via private message. Make sure no one else
-        has access to this voucher as any holder can redeem the funds
-      </p>
-    </div>
-    <div class="mt-5 flex justify-center items-center qrcode-container">
-      <qrcode :value="selectedVoucher?.url"></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"
-      >
-        Voucher URL:
-      </div>
-      <div class="relative flex items-center rounded-lg">
-        <input
-          id="voucherAddress"
-          type="text"
-          :value="selectedVoucher?.url"
-          readonly
-          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input pr-12"
-        />
-        <div class="absolute right-3 flex space-x-2">
-          <div @click="copyVoucherUrlToClipboard" 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 class="flex flex-col mt-5">
+        <div
+          class="w-full mt-5 mb-2 text-sm font-medium leading-6 text-white font-semibold"
+        >
+          Voucher URL:
+        </div>
+        <div class="relative flex items-center rounded-lg">
+          <input
+            id="voucherAddress"
+            type="text"
+            :value="selectedVoucher?.url"
+            readonly
+            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input pr-12"
+          />
+          <div class="absolute right-3 flex space-x-2">
+            <div @click="copyVoucherUrlToClipboard" 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>
-  </OverlayDialog>
-  <StatusOverlay
-    :tx-status="txStatus"
-    :show="showStatusOverlay"
-    :close="closeStatusOverlay"
-  />
+    </OverlayDialog>
+    <StatusOverlay
+      :tx-status="txStatus"
+      :show="showStatusOverlay"
+      :close="closeStatusOverlay"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -378,6 +388,7 @@ import {
   forgetAllVouchersForShard,
   forgetVoucherForShard,
 } from "~/lib/voucherStorage";
+import { eventBus } from "@/helpers/eventBus";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 
 const accountStore = useAccount();
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index 08a85af..2386dbc 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show">
+  <div v-if="show" class="p-3">
     <WarningBanner
       v-if="
         accountStore.getSymbol === 'TEER' &&
@@ -11,6 +11,14 @@
       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>
+      <div class="mb-3">
+        <button
+          @click="eventBus.emit('toggleSidebar')"
+          class="lg:hidden text-white focus:outline-none text-2xl"
+        >
+          ☰
+        </button>
+      </div>
       <CampaignBanner
         v-if="enableActions"
         :onClick="openGuessTheNumberOverlay"
@@ -629,7 +637,11 @@
         </p>
       </div>
       <div class="mt-5 qrcode-container">
-        <qrcode :value="accountStore.getAddress"></qrcode>
+        <qrcode
+          :value="accountStore.getAddress"
+          :color="{ dark: '#000000', light: '#ffffff' }"
+          type="image/png"
+        ></qrcode>
       </div>
 
       <div class="flex flex-col mt-5">
@@ -1053,6 +1065,7 @@ import { chainConfigs } from "~/configs/chains";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { ApiPromise } from "@polkadot/api";
 import { formatMoment } from "~/helpers/date";
+import { eventBus } from "@/helpers/eventBus";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 import SessionProxiesOverlay from "~/components/overlays/SessionProxiesOverlay.vue";
 
diff --git a/components/ui/CampaignBanner.vue b/components/ui/CampaignBanner.vue
index a4c7cc7..b71ee84 100644
--- a/components/ui/CampaignBanner.vue
+++ b/components/ui/CampaignBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col lg:flex-row container p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
+    class="flex flex-col lg:flex-row p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
   >
     <div
       class="flex w-full justify-between items-center"
diff --git a/components/ui/HealthIndicator.vue b/components/ui/HealthIndicator.vue
index 6d54b28..b4d1e2d 100644
--- a/components/ui/HealthIndicator.vue
+++ b/components/ui/HealthIndicator.vue
@@ -2,25 +2,25 @@
   <div @click="openHealthDetailsOverlay" class="cursor-pointer">
     <div v-if="contextualHealth === Health.Healthy">
       <div
-        class="bg-green-500 w-4 h-4 rounded-full"
+        class="bg-green-500 w-3 h-3 rounded-full"
         title="system health: all good"
       ></div>
     </div>
     <div v-else-if="contextualHealth === Health.Warning">
       <div
-        class="bg-yellow-500 w-4 h-4 rounded-full"
+        class="bg-yellow-500 w-3 h-3 rounded-full"
         title="system health: warnings"
       ></div>
     </div>
     <div v-else-if="contextualHealth === Health.Critical">
       <div
-        class="bg-red-500 w-4 h-4 rounded-full"
+        class="bg-red-500 w-3 h-3 rounded-full"
         title="system health: critical"
       ></div>
     </div>
     <div v-else>
       <div
-        class="bg-gray-500 w-4 h-4 rounded-full"
+        class="bg-gray-500 w-3 h-3 rounded-full"
         title="health unknown"
       ></div>
     </div>
diff --git a/components/ui/InfoBanner.vue b/components/ui/InfoBanner.vue
index 71bdb4f..0659f9f 100644
--- a/components/ui/InfoBanner.vue
+++ b/components/ui/InfoBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col lg:flex-row container p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
+    class="flex flex-col lg:flex-row p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
   >
     <div
       class="flex w-full justify-between items-center"
diff --git a/components/ui/NetworkSelector.vue b/components/ui/NetworkSelector.vue
index bf22904..864e5c8 100644
--- a/components/ui/NetworkSelector.vue
+++ b/components/ui/NetworkSelector.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex flex-row justify-between w-full text-center gap-4 container mb-4"
-  >
+  <div class="flex flex-row justify-between w-full text-center gap-4 mb-4">
     <!-- TEER Box -->
     <div
       class="currency-box gap-2 p-3 basis-1/3 relative cursor-pointer"
diff --git a/components/ui/PrivateMessageHistory.vue b/components/ui/PrivateMessageHistory.vue
index 5361c0c..0f2c341 100644
--- a/components/ui/PrivateMessageHistory.vue
+++ b/components/ui/PrivateMessageHistory.vue
@@ -2,7 +2,10 @@
   <div v-if="show" class="flex justify-between items-center"></div>
   <div class="mb-10">
     <!-- Neuer Abschnitt, der nur angezeigt wird, wenn der "Private Balance" Tab aktiv ist -->
-    <div ref="chatWindow" class="flex-1 overflow-y-auto bg-gray-900 rounded-md">
+    <div
+      ref="chatWindow"
+      class="flex-1 overflow-y-auto bg-incognitee-blue rounded-md"
+    >
       <div
         v-for="(note, index) in noteStore.getMessagesWith(counterparty)"
         :key="index"
@@ -11,15 +14,15 @@
         <!-- Ausgehende Nachrichten -->
         <div
           v-if="note.direction === NoteDirection.Outgoing"
-          class="chat chat-end"
+          class="chat chat-end mb-3"
         >
-          <div class="chat-header text-xs text-gray-500">You</div>
+          <div class="chat-header text-xs text-gray-500 mb-1">You</div>
           <div
             class="chat-bubble message-box max-w-xs shadow-md bg-blue-500 text-white"
           >
             {{ note.note }}
           </div>
-          <div class="chat-footer text-xs text-gray-500">
+          <div class="chat-footer text-xs text-gray-500 mt-1">
             {{ formatDate(note.timestamp) }}
           </div>
         </div>
@@ -27,9 +30,9 @@
         <!-- Eingehende Nachrichten -->
         <div
           v-if="note.direction === NoteDirection.Incoming"
-          class="chat chat-start"
+          class="chat chat-start mb-3"
         >
-          <div class="chat-header wallet-address text-xs text-gray-500">
+          <div class="chat-header wallet-address text-xs text-gray-500 mb-1">
             {{ note.account }}
           </div>
           <div
@@ -37,7 +40,7 @@
           >
             {{ note.note }}
           </div>
-          <div class="chat-footer text-xs text-gray-500">
+          <div class="chat-footer text-xs text-gray-500 mt-1">
             {{ formatDate(note.timestamp) }}
           </div>
         </div>
diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index 5edd4d1..1ca9d86 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -116,14 +116,12 @@
           </div>
         </div>
       </div>
-      <div class="mt-5 flex justify-center text-gray-500">
+      <div class="mt-5 flex text-xs font-bold justify-center text-white">
         <button @click="fetchOlderBucket">
-          fetch more events
+          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>
   </div>
   <NoteDetailsOverlay
diff --git a/components/ui/Sidebar.vue b/components/ui/Sidebar.vue
new file mode 100644
index 0000000..eacb025
--- /dev/null
+++ b/components/ui/Sidebar.vue
@@ -0,0 +1,222 @@
+<!-- components/Sidebar.vue -->
+<template>
+  <!-- Sidebar -->
+  <div
+    :class="[
+      'bg-incognitee-blue border-r border-gray-800 fixed top-0 left-0 h-full transform transition-transform lg:translate-x-0 w-64 z-50 flex flex-col justify-between text-white',
+      isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
+    ]"
+  >
+    <!-- Sidebar Header -->
+    <div>
+      <div class="p-4 flex items-center justify-between">
+        <Incognitee class="h-5" />
+        <button
+          @click="eventBus.emit('toggleSidebar')"
+          class="lg:hidden text-white focus:outline-none"
+        >
+          ✕
+        </button>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="mt-8">
+        <ul class="space-y-4">
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToWallet');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 12.75H3M21 9.75h-4.5M3 12.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v5.25m-18 0h18m-18 0V16.5A2.25 2.25 0 0 0 5.25 18.75h13.5A2.25 2.25 0 0 0 21 16.5v-3.75"
+                />
+              </svg>
+              Wallet
+            </button>
+          </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToSwap');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+                />
+              </svg>
+              Swap
+            </button>
+          </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToVouchers');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
+                />
+              </svg>
+              Vouchers
+            </button>
+          </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToMessaging');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="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>
+              Messages
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <!-- Footer Content -->
+    <div class="px-4 space-y-4 mb-4">
+      <div class="flex items-center text-xs" @click="toggleSidebar">
+        <span class="mr-2">System Health</span>
+        <HealthIndicator />
+      </div>
+      <div class="text-sm flex flex-col space-y-1">
+        <div v-if="accountStore.getAddress === 'none'">
+          <button
+            @click="
+              () => {
+                emitEvent('addressClicked');
+                toggleSidebar();
+              }
+            "
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+          >
+            Connect Wallet
+          </button>
+        </div>
+        <div v-else>
+          <div class="text-xs text-white">Connected with</div>
+          <div
+            class="text-xs text-gray-600 break-all cursor-pointer"
+            @click="
+              () => {
+                emitEvent('addressClicked');
+                toggleSidebar();
+              }
+            "
+          >
+            {{ accountStore.getAddress }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Overlay: Hintergrund abdunkeln -->
+  <!-- Overlay: Hintergrund abdunkeln nur in mobiler Ansicht -->
+  <div
+    v-if="isSidebarOpen"
+    class="fixed inset-0 bg-black bg-opacity-90 z-40 lg:hidden"
+    @click="toggleSidebar"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import HealthIndicator from "@/components/ui/HealthIndicator.vue";
+import { useAccount } from "@/store/account";
+import { eventBus } from "@/helpers/eventBus";
+import Incognitee from "@/assets/img/incognitee-full-logo.svg";
+
+// Sidebar-State (local)
+const isSidebarOpen = ref(false);
+
+// Event-Handler für Sidebar-Toggle
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value;
+};
+
+const emitAddressClicked = () => {
+  eventBus.emit("addressClicked");
+};
+
+// Event-Abonnement bei Mounten und Entfernen bei Unmounten
+onMounted(() => {
+  eventBus.on("toggleSidebar", toggleSidebar);
+});
+
+onUnmounted(() => {
+  eventBus.off("toggleSidebar", toggleSidebar);
+});
+
+// Account Store für Wallet-Adresse
+const accountStore = useAccount();
+
+// Event-Emitter-Funktionen
+const emitEvent = (eventName: string) => {
+  eventBus.emit(eventName);
+};
+</script>
+
+<style scoped>
+/* Optional: zusätzliche Styles für die Sidebar */
+</style>
diff --git a/helpers/eventBus.ts b/helpers/eventBus.ts
index 34c3187..a3a3a11 100644
--- a/helpers/eventBus.ts
+++ b/helpers/eventBus.ts
@@ -1,5 +1,7 @@
 import mitt from "mitt";
 
-const eventBus = mitt();
+type Events = {
+  toggleSidebar: void;
+};
 
-export { eventBus };
+export const eventBus = mitt<Events>();
diff --git a/layouts/default.vue b/layouts/default.vue
index 94f1200..96f312d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,221 +1,58 @@
 <template>
-  <div class="container layout">
-    <header class="header bg-gray-800 text-white py-1">
-      <div class="header-content mx-auto flex items-center justify-between">
-        <!-- Logo -->
-        <Incognitee class="logo" />
-
-        <!-- Flex container for network health, indicator, and wallet information -->
-        <div class="flex items-center gap-4">
-          <!-- gap-4 steuert den Abstand zwischen den Elementen -->
-          <!-- Network health text and health indicator -->
-          <div class="flex items-center gap-2 ml-1 mr-1">
-            <!-- gap-2 für den Abstand zwischen Network Health und Indikator -->
-            <HealthIndicator />
-          </div>
-
-          <!-- SVG icon -->
-          <div v-if="accountStore.getAddress !== 'none'"></div>
-
-          <!-- Address and Connect Wallet button -->
-          <div
-            class="text-white text-sm cursor-pointer"
-            @click="emitAddressClicked"
-          >
-            <!-- Full address on larger screens and short address on mobile -->
-            <div v-if="accountStore.getAddress === 'none'">
-              <button
-                class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
-              >
-                Connect Wallet
-              </button>
-            </div>
-            <div v-else class="flex">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="w-6 h-6"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M21 12.75H3M21 9.75h-4.5M3 12.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v5.25m-18 0h18m-18 0V16.5A2.25 2.25 0 0 0 5.25 18.75h13.5A2.25 2.25 0 0 0 21 16.5v-3.75"
-                />
-              </svg>
-              <span class="hidden md:inline ml-1 mt-0.5">{{
-                accountStore.getAddress
-              }}</span>
-              <span class="inline md:hidden ml-1 mt-0.5">{{
-                accountStore.getShortAddress
-              }}</span>
-            </div>
-          </div>
-        </div>
+  <div class="flex bg-incognitee-blue text-white">
+    <Sidebar />
+
+    <!-- Content Area -->
+    <div class="flex h-screen w-screen bg-incognitee-blue text-white">
+      <!-- Sidebarplatzhalter für Desktop -->
+      <aside
+        class="bg-incognitee-blue border-r border-gray-800 w-64 hidden lg:block"
+      ></aside>
+      <!-- Main Content -->
+      <div class="flex flex-col flex-1">
+        <main class="flex-1">
+          <NuxtPage />
+        </main>
       </div>
-    </header>
-    <!-- Main Content -->
-    <main class="main flex-grow overflow-auto">
-      <NuxtPage />
-    </main>
-    <footer class="footer bg-incognitee-blue">
-      <nav class="footer-content container mx-auto">
-        <div class="container">
-          <div
-            class="flex mt-10 fixed left-0 right-0 bottom-10 w-full px-4 rounded justify-around z-20"
-          >
-            <div class="container custom-border-gradient">
-              <div class="inner-box">
-                <div class="flex justify-around text-white">
-                  <div
-                    class="flex flex-col items-center cursor-pointer 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 cursor-pointer 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 cursor-pointer text-center"
-                    @click="emitSwitchToVouchers"
-                  >
-                    <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="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
-                      />
-                    </svg>
-
-                    <p class="text-xs">Vouchers</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
-                    v-if="accountStore.getSymbol === 'PAS'"
-                    class="flex flex-col items-center cursor-pointer text-center"
-                    @click="emitSwitchToMessaging"
-                  >
-                    <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 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>
-            </div>
-          </div>
-        </div>
-      </nav>
-    </footer>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Incognitee from "@/assets/img/incognitee-mask.svg";
-import TEERdays from "@/public/img/index/TEERdays-icon-white.svg";
-import { useAccount } from "@/store/account.ts";
-import { eventBus } from "@/helpers/eventBus";
+import { ref, onMounted, onUnmounted } from "vue";
 import HealthIndicator from "@/components/ui/HealthIndicator.vue";
+import Sidebar from "@/components/ui/Sidebar.vue";
+import { useAccount } from "@/store/account";
+import { eventBus } from "@/helpers/eventBus";
+import Incognitee from "@/assets/img/incognitee-full-logo.svg";
 
-const accountStore = useAccount();
-
-const emitAddressClicked = () => {
-  eventBus.emit("addressClicked");
-};
+// Sidebar-State (local)
+const isSidebarOpen = ref(false);
 
-const emitSwitchToWallet = () => {
-  eventBus.emit("switchToWallet");
+// Event-Handler für Sidebar-Toggle
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value;
 };
 
-const emitSwitchToMessaging = () => {
-  eventBus.emit("switchToMessaging");
-};
+// Event-Abonnement bei Mounten und Entfernen bei Unmounten
+onMounted(() => {
+  eventBus.on("toggleSidebar", toggleSidebar);
+});
 
-const emitSwitchToSwap = () => {
-  eventBus.emit("switchToSwap");
-};
+onUnmounted(() => {
+  eventBus.off("toggleSidebar", toggleSidebar);
+});
 
-const emitSwitchToGov = () => {
-  eventBus.emit("switchToGov");
-};
-
-const emitSwitchToVouchers = () => {
-  eventBus.emit("switchToVouchers");
-};
+// Account Store für Wallet-Adresse
+const accountStore = useAccount();
 
-const emitSwitchToTeerDays = () => {
-  eventBus.emit("switchToTeerDays");
+// Event-Emitter-Funktionen
+const emitEvent = (eventName: string) => {
+  eventBus.emit(eventName);
 };
 </script>
 
 <style scoped>
-.address {
-  font-size: 0.875rem; /* Small text size */
-  color: white; /* Adjust as necessary for your theme */
-}
 .layout {
   display: flex;
   flex-direction: column;
@@ -228,11 +65,6 @@ const emitSwitchToTeerDays = () => {
   flex-shrink: 0;
 }
 
-.header,
-.footer {
-  flex-shrink: 0;
-}
-
 .header-content,
 .footer-content {
   display: flex;
@@ -241,34 +73,39 @@ const emitSwitchToTeerDays = () => {
   width: 100%;
 }
 
-.logo {
-  height: 50px;
-  width: 50px;
-}
-
 .main {
   flex-grow: 1;
   overflow-y: auto;
 }
 
-.address {
-  font-size: 0.875rem;
-  color: white;
-}
-
 .bg-green-500 {
-  background-color: #2dad24; /* Adjust the color as needed */
+  background-color: #2dad24;
 }
 
 .w-4 {
-  width: 1rem; /* Adjust the size as needed */
+  width: 1rem;
 }
 
 .h-4 {
-  height: 1rem; /* Adjust the size as needed */
+  height: 1rem;
+}
+.logo {
 }
-
 .rounded-full {
-  border-radius: 9999px; /* Makes the element a circle */
+  border-radius: 9999px;
+}
+.wallet-address {
+  display: block;
+  white-space: nowrap; /* Verhindert Zeilenumbruch */
+  overflow: hidden; /* Versteckt überlaufenden Text */
+  text-overflow: ellipsis; /* Zeigt '...' bei zu langem Text an */
+  max-width: 10ch; /* Maximale Länge: 10 Zeichen */
+}
+
+/* Für größere Bildschirme (ab 641px) */
+@media (min-width: 641px) {
+  .wallet-address {
+    max-width: 10ch; /* Begrenze auch hier auf 10 Zeichen */
+  }
 }
 </style>
diff --git a/package.json b/package.json
index 986b5b3..dffd6e9 100644
--- a/package.json
+++ b/package.json
@@ -75,5 +75,6 @@
     "vue-qrcode-reader": "^5.5.4",
     "vue3-form-wizard": "^0.2.3",
     "vuetify": "^3.7.0"
-  }
+  },
+  "packageManager": "yarn@4.5.3+sha512.3003a14012e2987072d244c720506549c1aab73ee728208f1b2580a9fd67b92d61ba6b08fe93f6dce68fd771e3af1e59a0afa28dd242dd0940d73b95fedd4e90"
 }
diff --git a/pages/index.vue b/pages/index.vue
index 007c60a..d75bb38 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -154,7 +154,10 @@ import { useSystemHealth } from "@/store/systemHealth";
 import { useNotes } from "~/store/notes";
 import { formatMoment } from "~/helpers/date";
 import { Note, NoteDirection } from "~/lib/notes";
-import { SessionProxyRole } from "@/lib/sessionProxyStorage.ts";
+import {
+  SessionProxyRole,
+  sessionProxyRoleOrder,
+} from "@/lib/sessionProxyStorage.ts";
 import MessagingTab from "~/components/tabs/MessagingTab.vue";
 import SwapTab from "~/components/tabs/SwapTab.vue";
 import GovTab from "~/components/tabs/GovTab.vue";
@@ -275,16 +278,18 @@ const fetchIncogniteeBalance = async () => {
 };
 
 const storeSessionProxies = (proxies) => {
-  for (const proxy of proxies) {
-    const localKeyring = new Keyring({ type: "sr25519" });
-    const seed = hexToU8a(proxy.seed.toString());
-    const account = localKeyring.addFromSeed(seed);
-    accountStore.addSessionProxy(
-      account,
-      seed,
-      proxy.role.toString() as SessionProxyRole,
-    );
-  }
+  // Add the first entry for each role in proxies to the store
+  sessionProxyRoleOrder.forEach((role) => {
+    const proxy = proxies.find((p) => p.role.toString() === role);
+    if (proxy) {
+      const localKeyring = new Keyring({ type: "sr25519" });
+      const seed = hexToU8a(proxy.seed.toString());
+      const account = localKeyring.addFromSeed(seed);
+      accountStore.addSessionProxy(account, seed, role);
+    } else {
+      accountStore.removeProxyForRole(role);
+    }
+  });
 };
 const fetchNetworkStatus = async () => {
   const promises = [];
diff --git a/public/.DS_Store b/public/.DS_Store
index 2df834dece04146da8756a60971fb2b38947670a..fc8968c52b3704873d6c5af5d5ec7c19f482f730 100644
GIT binary patch
literal 8196
zcmeHML2DC16n@*px}gfGwonSfg4ebtQCou`F^va75RB+SrOhU3vbfm^*`%qKLQWp^
z<`3}V!Gi}c9{dIV1N{O1i=Om*Gt;=)B<e*gbf(O_-I@2jdHc<q*}N?gS;by0OSD8p
zHY&^X9GVG*$GMJ`8QrrCX#r0p$fFvqQk9xx+NQ%WU>GnA7zPXjhJpWq0lc%h*i+v7
zYSgrb0mHzFWPr~H2bE<(%Yl;e=s+V=0LUb|Wx+M_0Euz5END4UQbJ)<We=8yS~|tB
z6ddCYt3wvF94M*aWGOgVdS**!D3+WZI7h0JRZ!Bjh5^ICI0Kx!FH?mA<n5i2{GIPw
zR7W<Sr99<mPs=rGL%VU?7gg66F7UkNZlbPzmjze9x0$1>v<{m}PPX|WW^)04w(;jn
zue$KBC%-hT;;TaycL7bbV_k^ZnI~61Yo9_`>S*i^tTbR@4^QonKArU{W+4f-1aM(Y
z?{J!4Ev)*k5I)9n;Aybm$d;?3)#gq*bN6+0tR+e%O|L!s?%9hw8=sltA+{xIzZ`Ej
zqqesJrFq%`fxAPpcwu=7xSdGcOarLsqMjeK@CVD7*o;{j_v5k*FK#FM@g-(qF6PIY
zdZy9EkRkad5|RmMwZ;OMgKUD9+Yj5C|4(k)_rh)_^VOP3Bu~wrwrzXPeo}6Vez{xe
z_QGPN^N8>6V}aeH>x%optM|9k3!5V7R=l9zkpQn&hsxuJUQiSLqUZ&+P-4q!z)q!7
zTj{0!{q_8clf827V8z+b<}$ezXCt3KI7r!x7cX7ExAoL-1>z+<N3rx9k<P07Vaq|Q
zpZO^KSXFn81mE7bk3UDEp*Mf{{%z}q3_XpD2HyDSNZ37>u4vqDxfA#z;E-Z3Z0urz
z{U)&FA%Ze?p2$5LU6ylLx{$h9Lbdy|I6pEncv(&i8@X$vHWp!_B15MGJF7TJJe(N;
z&H(;q*~OSU#T(w&QA=r9@_?vAzmL|1cYKC=uwG|BM?+C=q$pkzV;aN2u`-ZQvoCS}
ze{1^p|6}#hOl}x34E$XNtYoQNDq@bKUlQ@@IM;Siw^6yU-attSK_k;~NSTg94*y|@
fYX_=~DQG!R5<MvY{6hf$2sZD3$-QY#E(1RR5-Ev?

delta 131
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjUEV6q~50D98np2Z^N=C+8&P=jUuJT+PVH
zH91Xi!sJ)N%^S;Juq<Zh;1Fa6ssjQ6ZXn?b(!a6rJM(0I8Ap%>AQM<XG!w)Iu-N8!
Ho;l0_EaDb$

diff --git a/public/img/.DS_Store b/public/img/.DS_Store
index d5b6d84c9b54e1d463ab9c59bff41e2e79434bc9..e3f891194c517aa36cae16f99c7b70f7139c329b 100644
GIT binary patch
delta 338
zcmZoMXfc@JFDk&mz`)4B0HhKbay)bLlaq4tlQs)-EN6}eNwG1cGvqMjGbABP1I0md
zjzFyU9}IvjG_^_P#RVXvfZ{un3UV@wOAHLIF)}f;u(Gjpa7@0*60Ob2880AFU2SHm
zqhM%aQLCd+ZD?d*q@!SNX<1v#$sww&Zygk$os*lF-!(abRi3eXG7rlVClnWz1sCPz
z<maUWZ2@|Mft4YXA&()2A(f#5<`tkQ$gS&v80OZ=YgnX&sphE74XjR#o7p-3@&f?4
CrC8Mf

delta 150
zcmZoMXfc@JFUrHfz`)4BAi%(o$dHp#oSc)CpP#c?kYhPBBhO?W)+L&(44Djh3@Hq$
z3>8V`#RW+@`AI-6JCh1>GK)(L46ZRUF|)9;v2(CbmS>CB;oyuHkgTpYw6N4sFg7-+
z)lsN6G&BZs%!~|bYdJYYmG!NI;<Iyd^YXhVzhRMQ?Ad&j&53bigDc}^c8<UN0Mari
AH~;_u

diff --git a/public/img/index/.DS_Store b/public/img/index/.DS_Store
index df9314cfd95c96a1e04d29fa7b596f96e963c9f3..dd0a16082783aefe1dabf205e3c10c28e5c2363d 100644
GIT binary patch
literal 10244
zcmeHM&u<$=6n>kyiA_osNK0rX=n8~XiKLB_Dru;MOzIwrIK>qlpi0-V<t(;$EdQu!
zqDVe*01ogER6^p;wcOyse^4Y&T+5XkT;O{%+x5(P)`0^N5;NBBvv=Nm^Sw9kz1bNP
zk+(Cb6^VQz%Hv|XcosKH<9@y-+D!c9T~H75M1nq{tJI;08WY^^f%Aa#fb)R!fb)R!
zz<<F5ShKn17Zi1O=K<#d=YhlnTpxT~OiM8xDJn|`ZgL9%n!{t+@E!XADdWeq6w{HS
zQWQGX?!k*iy?Be^DRK1s%nn+L=}1u}PM#7cFCN*8cPO459df>8C$FTayE_j!4@`Q1
z_wLV875nv7+_nAtotD_IwnP>EoKo-Ly85SV_%<oiqX*PT$$XoVDbPMfXyY@$2|-AG
zdT2^`ubeE=Y7{H`qTOK-G<*0n?iRgmQ7*^m^H;iupT4*CBU@nQto=>S&VfGi2<o7(
zMs;dY0RIKBM^HCq(dXdO{brFcETUJxvg_3?y7)-5XaYf7j4hhZX;`ER?i?M++3CZs
zv@O4<Y%zFED_;5yyhgu{|HW?-{3)I>@+=+;<|V{ZBx9=)$5kEZR}p6c^{9yxDNA(D
z@ClVZGZ!+n456ikPaX3cpKY0QJo6-_DJMq;CX;XWRu*4%*z3g6`ncL@g}wgT+E3oh
zZ0^k5d_JFF$lt3Rh+(B4^as72p!*^Jx+_Gh`s{m9eLt)Z_ZH9J5>Y=0qk2~ggta<Y
zKKdYxYGSw}22rgiWh<&9Unmsz7GFL(+T338i`Q=)ulPsB^|kdCe`|aD__&b2@cOlz
zyL-)6I})D(JDL|Szx2HNo!mLj6T6LAxO{F`@6+Sp7dm>DnTf0(y|#X1{xACsAd!7g
z=|(LP@ys&L^N0q4x)dN5^jTcRYzkzout$chb&s@KH;)s|fV!CfXfi8^tK1ZB!xyy7
z^)#hV_s9=(iAN^5#<`KrWq3zr^b*huSlomSHGJ#S$H<2hd>|{aZq*#Lbde#4@IcRu
zYmetXlUIxF?@m3oFCw-#wpRT0%}p8H#cf3T=JkzKaI*nunZf-9It>SylltpMx?i8t
zJC~9vHFW5Kp2cHKr+T$LgJ~GZa+ID1F3<WjXq+bA<)`4(dUdp4zm}jiIL5(e=P;0}
zz*|6=?aSgB;MF1oX3LT<%dn0*L&~&Zz6%R7I1OvwOsvV|)+{@b+hXMstQ^3;e^g@R
zlA&Au0@9L~nGo7|*@{j|P`Q}s8kXrU-Nt7ZNgmKcnc|^b6j@glx&!>mSPZ%3dFQl}
zcWJ7&24awlNr++)$z{>9z;a<UbWTS&#ES>VN8MhOxgZ(Z=D^Dm{8v*t6Ohl@yk;bg
zZpz%%bm{T){k0^1jPdl`&Ehd*<x32Moa0x-CVMSaLXo=$VvW<pd-e@ekB;`nTM1fC
zUdL+ZFp>I<v>=yFjz^9r%Zn}Nt%2AgVIp68Y}cz>@Z{~p0*gM~lIffli*k4c!0S0R
zP0w>C8g?XnCi>MsfIjKdF+VLQn6>_KRk8J(_}19tt~n2!vIl0>c>V(D?d<>mPZ^aP
z&UwIj;50qp<;s=v4o2inv#s%2yN~NWE^f>>QdElI#w`3?9>?PcAID#bpC#)X`b+V%
ek)l!@a#9>ro#y}Re+IbyzuW(7hg<*0{r_Ld>lRu7

delta 183
zcmZn(XmOBWU|?W$DortDU;r^WfEYvza8E20o2aKK3KVBx1o9aeN*VGPG8sx3Ds$2|
z7EWWI*ucA)or8sg(QvYYpxER+0t+Vh3C@}vB2+y&T%=-htmuTz@nRW_lRt|0Ox`Rp
zbMgnN$&=SgcT7%~nKoHf_LU$r&|n~t;06+|APYAZerKM{uM)@sv<~D9hRN|fQzze*
J$Vb!q8~~OlF}eT%


From 1cc2f23a60ea46055c8fd730412423d86975a607 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Tue, 17 Dec 2024 10:14:36 +0100
Subject: [PATCH 5/7] fix teerdays and grey out swap in sidebar

---
 components/tabs/TeerDaysTab.vue | 1093 ++++++++++++++++---------------
 components/tabs/WalletTab.vue   |   16 +-
 components/ui/Sidebar.vue       |   35 +-
 3 files changed, 592 insertions(+), 552 deletions(-)

diff --git a/components/tabs/TeerDaysTab.vue b/components/tabs/TeerDaysTab.vue
index 0218d42..35757d1 100644
--- a/components/tabs/TeerDaysTab.vue
+++ b/components/tabs/TeerDaysTab.vue
@@ -1,268 +1,283 @@
 <template>
-  <InfoBanner
-    v-if="!accountStore.hasInjector"
-    :isMobile="isMobile"
-    textMobile="You need some signer extension to use this page. Please make sure to
+  <div class="p-3">
+    <div class="mb-3">
+      <button
+        @click="eventBus.emit('toggleSidebar')"
+        class="lg:hidden text-white focus:outline-none text-2xl"
+      >
+        ☰
+      </button>
+    </div>
+    <InfoBanner
+      v-if="!accountStore.hasInjector"
+      :isMobile="isMobile"
+      textMobile="You need some signer extension to use this page. Please make sure to
         enable your extension and reload the page in case the connect button
         doesn't work."
-    textDesktop="You need some signer extension to use this page. Please make sure to
+      textDesktop="You need some signer extension to use this page. Please make sure to
         enable your extension and reload the page in case the connect button
         doesn't work."
-  />
+    />
 
-  <div class="container">
-    <!-- interaction with the wallet -->
-    <div
-      v-if="accountStore.hasInjector"
-      ref="walletSection"
-      id="wallet"
-      class="py-10 sm:py-10"
-    >
-      <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
-        <div class="mx-auto max-w-2xl lg:max-w-none">
-          <h1
-            class="title mt-2 text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl"
-          >
-            My TEERdays
-          </h1>
+    <div class="container">
+      <!-- interaction with the wallet -->
+      <div
+        v-if="accountStore.hasInjector"
+        ref="walletSection"
+        id="wallet"
+        class="py-10 sm:py-10"
+      >
+        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+          <div class="mx-auto max-w-2xl lg:max-w-none">
+            <h1
+              class="title mt-2 text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl"
+            >
+              My TEERdays
+            </h1>
 
-          <div class="mt-5">
-            <div v-if="isFetchingTeerBalance">
-              <div
-                class="spinner border-t-transparent border-solid animate-spin rounded-full border-gray-400 border-4 h-8 w-8"
-              ></div>
-            </div>
-            <div v-else class="mx-auto">
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
-                <div>
-                  <div
-                    class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-5"
-                  >
-                    <dl class="flex flex-wrap">
-                      <div
-                        class="w-full flex flex-col md:flex-row justify-between px-6 pt-6"
-                      >
-                        <div class="flex-auto mb-4 md:mb-0">
+            <div class="mt-5">
+              <div v-if="isFetchingTeerBalance">
+                <div
+                  class="spinner border-t-transparent border-solid animate-spin rounded-full border-gray-400 border-4 h-8 w-8"
+                ></div>
+              </div>
+              <div v-else class="mx-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+                  <div>
+                    <div
+                      class="rounded-lg bg-gray-800 shadow-sm ring-1 ring-gray-700 pb-5"
+                    >
+                      <dl class="flex flex-wrap">
+                        <div
+                          class="w-full flex flex-col md:flex-row justify-between px-6 pt-6"
+                        >
+                          <div class="flex-auto mb-4 md:mb-0">
+                            <dt
+                              class="text-sm font-semibold leading-6 text-gray-300"
+                            >
+                              Current bond
+                            </dt>
+                            <dd
+                              class="mt-1 text-base font-semibold leading-6 text-white"
+                            >
+                              {{
+                                currentBond ? currentBond.getTeerBonded() : 0
+                              }}
+                              TEER
+                            </dd>
+                          </div>
+
+                          <div class="flex-auto text-left md:text-right">
+                            <dt
+                              class="text-sm font-semibold leading-6 text-gray-300"
+                            >
+                              Accumulated TEERdays
+                            </dt>
+                            <dd
+                              class="mt-1 text-base font-semibold leading-6 text-white"
+                            >
+                              {{ currentBond ? currentBond.getTeerDays() : 0 }}
+                              TEERdays
+                            </dd>
+                          </div>
+                        </div>
+
+                        <div
+                          class="mt-6 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-6"
+                        >
                           <dt
                             class="text-sm font-semibold leading-6 text-gray-300"
                           >
-                            Current bond
+                            Transferrable
                           </dt>
-                          <dd
-                            class="mt-1 text-base font-semibold leading-6 text-white"
-                          >
-                            {{ currentBond ? currentBond.getTeerBonded() : 0 }}
-                            TEER
+                          <dd class="text-sm leading-6 text-gray-400">
+                            <time datetime="2023-01-31"
+                              >{{ transferableBalance }} TEER</time
+                            >
                           </dd>
                         </div>
 
-                        <div class="flex-auto text-left md:text-right">
+                        <div
+                          v-if="
+                            accountStore.getDecimalBalanceFrozen(
+                              integriteeNetwork,
+                            ) > 0
+                          "
+                          class="flex w-full flex-none gap-x-4 px-6"
+                        >
                           <dt
                             class="text-sm font-semibold leading-6 text-gray-300"
                           >
-                            Accumulated TEERdays
+                            Locked
                           </dt>
-                          <dd
-                            class="mt-1 text-base font-semibold leading-6 text-white"
-                          >
-                            {{ currentBond ? currentBond.getTeerDays() : 0 }}
-                            TEERdays
+                          <dd class="text-sm leading-6 text-gray-400">
+                            <time datetime="2023-01-31"
+                              >{{
+                                accountStore.formatBalanceFrozen(
+                                  integriteeNetwork,
+                                )
+                              }}
+                              TEER</time
+                            >
                           </dd>
                         </div>
-                      </div>
 
-                      <div
-                        class="mt-6 flex w-full flex-none gap-x-4 border-t border-gray-700 px-6 pt-6"
-                      >
-                        <dt
-                          class="text-sm font-semibold leading-6 text-gray-300"
+                        <div
+                          v-if="
+                            accountStore.getDecimalBalanceReserved(
+                              integriteeNetwork,
+                            ) > 0
+                          "
+                          class="flex w-full flex-none gap-x-4 px-6"
                         >
-                          Transferrable
-                        </dt>
-                        <dd class="text-sm leading-6 text-gray-400">
-                          <time datetime="2023-01-31"
-                            >{{ transferableBalance }} TEER</time
+                          <dt
+                            class="text-sm font-semibold leading-6 text-gray-300"
                           >
-                        </dd>
-                      </div>
+                            Reserved
+                          </dt>
+                          <dd class="text-sm leading-6 text-gray-400">
+                            <time datetime="2023-01-31"
+                              >{{
+                                accountStore.formatBalanceReserved(
+                                  integriteeNetwork,
+                                )
+                              }}
+                              TEER</time
+                            >
+                          </dd>
+                        </div>
 
-                      <div
-                        v-if="
-                          accountStore.getDecimalBalanceFrozen(
-                            integriteeNetwork,
-                          ) > 0
-                        "
-                        class="flex w-full flex-none gap-x-4 px-6"
-                      >
-                        <dt
-                          class="text-sm font-semibold leading-6 text-gray-300"
+                        <div
+                          v-if="pendingUnlock"
+                          class="w-full flex justify-between flex-col md:flex-row px-6 pt-6"
                         >
-                          Locked
-                        </dt>
-                        <dd class="text-sm leading-6 text-gray-400">
-                          <time datetime="2023-01-31"
-                            >{{
-                              accountStore.formatBalanceFrozen(
-                                integriteeNetwork,
-                              )
-                            }}
-                            TEER</time
+                          <div class="flex-auto mb-4 md:mb-0">
+                            <div class="flex w-full flex-none gap-x-4">
+                              <dt
+                                class="text-sm font-semibold leading-6 text-gray-300"
+                              >
+                                Pending unlock
+                              </dt>
+                              <dd class="text-sm leading-6 text-gray-400">
+                                <time datetime="2023-01-31"
+                                  >{{
+                                    pendingUnlock
+                                      ? pendingUnlock.getTeerToUnlock()
+                                      : 0
+                                  }}
+                                  TEER</time
+                                >
+                              </dd>
+                            </div>
+
+                            <div class="flex w-full flex-none gap-x-4">
+                              <dt
+                                class="text-sm font-semibold leading-6 text-gray-300"
+                              >
+                                Unlocked on
+                              </dt>
+                              <dd class="text-sm leading-6 text-gray-400">
+                                <time datetime="2023-01-31">{{
+                                  pendingUnlock?.getDueDateStr()
+                                }}</time>
+                              </dd>
+                            </div>
+                          </div>
+
+                          <div
+                            v-if="pendingUnlock?.canWithdraw()"
+                            class="flex-auto text-left md:text-right gap-x-4"
                           >
-                        </dd>
-                      </div>
+                            <button
+                              @click="withdrawUnbonded"
+                              class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white btn btn_gradient"
+                            >
+                              Withdraw!
+                            </button>
+                          </div>
+                        </div>
+                      </dl>
+                    </div>
+                  </div>
 
+                  <div>
+                    <div>
+                      <div class="text-sm font-medium leading-6 text-gray-300">
+                        Bond TEER to accumulate TEERdays
+                      </div>
                       <div
-                        v-if="
-                          accountStore.getDecimalBalanceReserved(
-                            integriteeNetwork,
-                          ) > 0
-                        "
-                        class="flex w-full flex-none gap-x-4 px-6"
+                        v-if="transferableBalance < 0.0001"
+                        class="text-sm text-red-500"
                       >
-                        <dt
-                          class="text-sm font-semibold leading-6 text-gray-300"
-                        >
-                          Reserved
-                        </dt>
-                        <dd class="text-sm leading-6 text-gray-400">
-                          <time datetime="2023-01-31"
-                            >{{
-                              accountStore.formatBalanceReserved(
-                                integriteeNetwork,
-                              )
-                            }}
-                            TEER</time
-                          >
-                        </dd>
+                        Not enough transferable TEER.
                       </div>
-
                       <div
-                        v-if="pendingUnlock"
-                        class="w-full flex justify-between flex-col md:flex-row px-6 pt-6"
+                        v-else-if="pendingUnlock"
+                        class="text-sm text-red-500"
                       >
-                        <div class="flex-auto mb-4 md:mb-0">
-                          <div class="flex w-full flex-none gap-x-4">
-                            <dt
-                              class="text-sm font-semibold leading-6 text-gray-300"
-                            >
-                              Pending unlock
-                            </dt>
-                            <dd class="text-sm leading-6 text-gray-400">
-                              <time datetime="2023-01-31"
-                                >{{
-                                  pendingUnlock
-                                    ? pendingUnlock.getTeerToUnlock()
-                                    : 0
-                                }}
-                                TEER</time
-                              >
-                            </dd>
-                          </div>
-
-                          <div class="flex w-full flex-none gap-x-4">
-                            <dt
-                              class="text-sm font-semibold leading-6 text-gray-300"
+                        Can't bond more during unbonding period
+                      </div>
+                      <div v-else>
+                        <form @submit.prevent="bondAmount" class="space-y-2">
+                          <div class="flex flex-col sm:flex-row sm:space-x-2">
+                            <input
+                              type="number"
+                              v-model="amountToBond"
+                              placeholder="Enter amount to bond"
+                              step="0.1"
+                              :min="0.1"
+                              :max="transferableBalance - 0.1"
+                              required
+                              class="flex-grow rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
+                            />
+                            <button
+                              type="submit"
+                              class="w-full sm:w-40 mt-5 sm:mt-0 inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 btn btn_gradient"
                             >
-                              Unlocked on
-                            </dt>
-                            <dd class="text-sm leading-6 text-gray-400">
-                              <time datetime="2023-01-31">{{
-                                pendingUnlock?.getDueDateStr()
-                              }}</time>
-                            </dd>
+                              Bond!
+                            </button>
                           </div>
-                        </div>
-
-                        <div
-                          v-if="pendingUnlock?.canWithdraw()"
-                          class="flex-auto text-left md:text-right gap-x-4"
-                        >
-                          <button
-                            @click="withdrawUnbonded"
-                            class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white btn btn_gradient"
-                          >
-                            Withdraw!
-                          </button>
-                        </div>
+                        </form>
                       </div>
-                    </dl>
-                  </div>
-                </div>
-
-                <div>
-                  <div>
-                    <div class="text-sm font-medium leading-6 text-gray-300">
-                      Bond TEER to accumulate TEERdays
-                    </div>
-                    <div
-                      v-if="transferableBalance < 0.0001"
-                      class="text-sm text-red-500"
-                    >
-                      Not enough transferable TEER.
-                    </div>
-                    <div v-else-if="pendingUnlock" class="text-sm text-red-500">
-                      Can't bond more during unbonding period
                     </div>
-                    <div v-else>
-                      <form @submit.prevent="bondAmount" class="space-y-2">
-                        <div class="flex flex-col sm:flex-row sm:space-x-2">
-                          <input
-                            type="number"
-                            v-model="amountToBond"
-                            placeholder="Enter amount to bond"
-                            step="0.1"
-                            :min="0.1"
-                            :max="transferableBalance - 0.1"
-                            required
-                            class="flex-grow rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
-                          />
-                          <button
-                            type="submit"
-                            class="w-full sm:w-40 mt-5 sm:mt-0 inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 btn btn_gradient"
-                          >
-                            Bond!
-                          </button>
-                        </div>
-                      </form>
-                    </div>
-                  </div>
 
-                  <div class="form-container mt-8" v-if="currentBond">
-                    <div class="text-sm font-medium leading-6 text-gray-300">
-                      Unbond TEER
-                    </div>
+                    <div class="form-container mt-8" v-if="currentBond">
+                      <div class="text-sm font-medium leading-6 text-gray-300">
+                        Unbond TEER
+                      </div>
 
-                    <div v-if="pendingUnlock" class="text-sm text-red-500">
-                      Not possible until pending unlock expired and withdrawn.
-                    </div>
+                      <div v-if="pendingUnlock" class="text-sm text-red-500">
+                        Not possible until pending unlock expired and withdrawn.
+                      </div>
 
-                    <div v-else class="space-y-2">
-                      <form @submit.prevent="unbondAmount" class="space-y-2">
-                        <div class="flex flex-col sm:flex-row sm:space-x-2">
-                          <input
-                            type="number"
-                            v-model="amountToUnbond"
-                            placeholder="Enter amount to unbond"
-                            step="0.1"
-                            :min="0.1"
-                            :max="currentBond.teerBonded"
-                            required
-                            class="flex-grow rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
-                          />
-                          <button
-                            type="submit"
-                            class="w-full sm:w-40 mt-5 sm:mt-0 inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 btn btn_gradient"
-                          >
-                            Unbond!
-                          </button>
-                        </div>
-                      </form>
-                      <p
-                        class="mt-2 text-xs text-gray-500"
-                        id="email-description"
-                      >
-                        Unbonded TEER will be locked for 7 days.
-                      </p>
+                      <div v-else class="space-y-2">
+                        <form @submit.prevent="unbondAmount" class="space-y-2">
+                          <div class="flex flex-col sm:flex-row sm:space-x-2">
+                            <input
+                              type="number"
+                              v-model="amountToUnbond"
+                              placeholder="Enter amount to unbond"
+                              step="0.1"
+                              :min="0.1"
+                              :max="currentBond.teerBonded"
+                              required
+                              class="flex-grow rounded-md border-0 bg-gray-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-gray-700 focus:ring-1 focus:ring-inset focus:ring-incognitee-green sm:text-sm sm:leading-6"
+                            />
+                            <button
+                              type="submit"
+                              class="w-full sm:w-40 mt-5 sm:mt-0 inline-flex justify-center items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 btn btn_gradient"
+                            >
+                              Unbond!
+                            </button>
+                          </div>
+                        </form>
+                        <p
+                          class="mt-2 text-xs text-gray-500"
+                          id="email-description"
+                        >
+                          Unbonded TEER will be locked for 7 days.
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -271,346 +286,356 @@
           </div>
         </div>
       </div>
-    </div>
 
-    <hr
-      class="my-20 border-0 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent"
-    />
+      <hr
+        class="my-20 border-0 h-px bg-gradient-to-r from-transparent via-gray-700 to-transparent"
+      />
 
-    <div class="mb-20">
-      <dl
-        class="mt-5 grid grid-cols-1 divide-y divide-gray-700 overflow-hidden rounded-lg bg-gray-800 shadow md:grid-cols-3 md:divide-x md:divide-y-0"
-      >
-        <div class="px-4 py-5 sm:p-6">
-          <svg
-            class="h-6 w-6 mb-3 text-white"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            aria-hidden="true"
+      <div class="mb-20">
+        <dl
+          class="mt-5 grid grid-cols-1 divide-y divide-gray-700 overflow-hidden rounded-lg bg-gray-800 shadow md:grid-cols-3 md:divide-x md:divide-y-0"
+        >
+          <div class="px-4 py-5 sm:p-6">
+            <svg
+              class="h-6 w-6 mb-3 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+              />
+            </svg>
+            <dt class="text-base font-normal text-gray-300">TEERday holders</dt>
+            <dd
+              class="mt-1 flex items-baseline justify-between md:block lg:flex"
+            >
+              <div
+                class="flex items-baseline text-2xl font-semibold text-incognitee-green"
+              >
+                {{ summaryHolders }}
+              </div>
+            </dd>
+          </div>
+          <div class="px-4 py-5 sm:p-6">
+            <svg
+              class="h-6 w-6 mb-3 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
+              />
+            </svg>
+            <dt class="text-base font-normal text-gray-300">
+              Total TEER bonded
+            </dt>
+            <dd
+              class="mt-1 flex items-baseline justify-between md:block lg:flex"
+            >
+              <div
+                class="flex items-baseline text-2xl font-semibold text-incognitee-green"
+              >
+                {{ formatBigDecimalBalance(summaryTeerBonded) }}
+              </div>
+            </dd>
+          </div>
+          <div class="px-4 py-5 sm:p-6">
+            <svg
+              class="h-6 w-6 mb-3 text-white"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+              />
+            </svg>
+            <dt class="text-base font-normal text-gray-300">
+              Total TEERdays active
+            </dt>
+            <dd
+              class="mt-1 flex items-baseline justify-between md:block lg:flex"
+            >
+              <div
+                class="flex items-baseline text-2xl font-semibold text-incognitee-green"
+              >
+                {{ formatBigDecimalBalance(summaryTeerDays) }}
+              </div>
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 my-10">
+        <!-- Accordion 1: TEERdays Intro -->
+        <div class="sm:col-span-6">
+          <button
+            class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
+            @click="toggleAccordion(1)"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
-            />
-          </svg>
-          <dt class="text-base font-normal text-gray-300">TEERday holders</dt>
-          <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+            <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
+              TEERdays Intro
+            </h2>
+          </button>
+          <transition name="smooth-accordion">
             <div
-              class="flex items-baseline text-2xl font-semibold text-incognitee-green"
+              v-show="activeAccordion === 1"
+              class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
             >
-              {{ summaryHolders }}
+              <p class="text-gray-300 mt-4">
+                By bonding your TEER now, you can already accumulate TEERdays
+                prior to the launch of Incognitee. TEERdays are calculated by
+                multiplying the amount of TEER by the number of days bonded. You
+                can unbond your TEER anytime within 7 days, but you will lose a
+                fraction of the accumulated TEERdays if you do. TEERdays are
+                non-transferable. Start now to get the best position for the
+                Incognitee launch.
+              </p>
             </div>
-          </dd>
+          </transition>
         </div>
-        <div class="px-4 py-5 sm:p-6">
-          <svg
-            class="h-6 w-6 mb-3 text-white"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            aria-hidden="true"
+
+        <!-- Accordion 2: Why collect TEERdays? -->
+        <div class="sm:col-span-6">
+          <button
+            class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
+            @click="toggleAccordion(2)"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
-            />
-          </svg>
-          <dt class="text-base font-normal text-gray-300">Total TEER bonded</dt>
-          <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+            <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
+              Why collect TEERdays?
+            </h2>
+          </button>
+          <transition name="smooth-accordion">
             <div
-              class="flex items-baseline text-2xl font-semibold text-incognitee-green"
+              v-show="activeAccordion === 2"
+              class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
             >
-              {{ formatBigDecimalBalance(summaryTeerBonded) }}
+              <p class="text-gray-300 mt-4">
+                TEERdays can be used to increase your revenue share for the
+                launch of Incognitee on Polkadot/Kusama and will also increase
+                your governance voting power for future decisions related to
+                Incognitee.
+              </p>
             </div>
-          </dd>
+          </transition>
         </div>
-        <div class="px-4 py-5 sm:p-6">
-          <svg
-            class="h-6 w-6 mb-3 text-white"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            aria-hidden="true"
+
+        <!-- Accordion 3: How to participate? -->
+        <div class="sm:col-span-6">
+          <button
+            class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
+            @click="toggleAccordion(3)"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
-            />
-          </svg>
-          <dt class="text-base font-normal text-gray-300">
-            Total TEERdays active
-          </dt>
-          <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+            <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
+              How to participate?
+            </h2>
+          </button>
+          <transition name="smooth-accordion">
             <div
-              class="flex items-baseline text-2xl font-semibold text-incognitee-green"
+              v-show="activeAccordion === 3"
+              class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
             >
-              {{ formatBigDecimalBalance(summaryTeerDays) }}
+              <p class="text-gray-300 mt-4">
+                1. First, you need to possess some TEER. Grab them at one of the
+                avenues like
+                <a
+                  href="https://www.kraken.com/prices/integritee?quote=usd&interval=24h"
+                  class="text-blue-400 underline"
+                  >Kraken</a
+                >,
+                <a
+                  href="https://www.gate.io/de/trade/TEER_USDT"
+                  class="text-blue-400 underline"
+                  >Gate</a
+                >, or
+                <a
+                  href="https://app.basilisk.cloud/trade?assetIn=1&assetOut=17"
+                  class="text-blue-400 underline"
+                  >Basilisk</a
+                >. <br />
+                2. Get one of the supported wallets and connect your wallet.
+                <br />
+                3. Transfer TEER to your wallet. <br />
+                4. Bond your TEER using this current page. <br />
+                5. Start automatically collecting TEERdays. <br />
+                6. Refer a friend (coming soon).
+              </p>
             </div>
-          </dd>
+          </transition>
         </div>
-      </dl>
-    </div>
-
-    <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 my-10">
-      <!-- Accordion 1: TEERdays Intro -->
-      <div class="sm:col-span-6">
-        <button
-          class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
-          @click="toggleAccordion(1)"
-        >
-          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
-            TEERdays Intro
-          </h2>
-        </button>
-        <transition name="smooth-accordion">
-          <div
-            v-show="activeAccordion === 1"
-            class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
-          >
-            <p class="text-gray-300 mt-4">
-              By bonding your TEER now, you can already accumulate TEERdays
-              prior to the launch of Incognitee. TEERdays are calculated by
-              multiplying the amount of TEER by the number of days bonded. You
-              can unbond your TEER anytime within 7 days, but you will lose a
-              fraction of the accumulated TEERdays if you do. TEERdays are
-              non-transferable. Start now to get the best position for the
-              Incognitee launch.
-            </p>
-          </div>
-        </transition>
-      </div>
-
-      <!-- Accordion 2: Why collect TEERdays? -->
-      <div class="sm:col-span-6">
-        <button
-          class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
-          @click="toggleAccordion(2)"
-        >
-          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
-            Why collect TEERdays?
-          </h2>
-        </button>
-        <transition name="smooth-accordion">
-          <div
-            v-show="activeAccordion === 2"
-            class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
-          >
-            <p class="text-gray-300 mt-4">
-              TEERdays can be used to increase your revenue share for the launch
-              of Incognitee on Polkadot/Kusama and will also increase your
-              governance voting power for future decisions related to
-              Incognitee.
-            </p>
-          </div>
-        </transition>
-      </div>
 
-      <!-- Accordion 3: How to participate? -->
-      <div class="sm:col-span-6">
-        <button
-          class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
-          @click="toggleAccordion(3)"
-        >
-          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
-            How to participate?
-          </h2>
-        </button>
-        <transition name="smooth-accordion">
-          <div
-            v-show="activeAccordion === 3"
-            class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
+        <!-- Accordion 4: Rules -->
+        <div class="sm:col-span-6">
+          <button
+            class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
+            @click="toggleAccordion(4)"
           >
-            <p class="text-gray-300 mt-4">
-              1. First, you need to possess some TEER. Grab them at one of the
-              avenues like
-              <a
-                href="https://www.kraken.com/prices/integritee?quote=usd&interval=24h"
-                class="text-blue-400 underline"
-                >Kraken</a
-              >,
-              <a
-                href="https://www.gate.io/de/trade/TEER_USDT"
-                class="text-blue-400 underline"
-                >Gate</a
-              >, or
-              <a
-                href="https://app.basilisk.cloud/trade?assetIn=1&assetOut=17"
-                class="text-blue-400 underline"
-                >Basilisk</a
-              >. <br />
-              2. Get one of the supported wallets and connect your wallet.
-              <br />
-              3. Transfer TEER to your wallet. <br />
-              4. Bond your TEER using this current page. <br />
-              5. Start automatically collecting TEERdays. <br />
-              6. Refer a friend (coming soon).
-            </p>
-          </div>
-        </transition>
-      </div>
-
-      <!-- Accordion 4: Rules -->
-      <div class="sm:col-span-6">
-        <button
-          class="accordion-header text-left text-white bg-gray-800 w-full p-4 rounded-md"
-          @click="toggleAccordion(4)"
-        >
-          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Rules</h2>
-        </button>
-        <transition name="smooth-accordion">
-          <div
-            v-show="activeAccordion === 4"
-            class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
-          >
-            <ul class="list-disc list-outside text-gray-300 mt-6 px-4">
-              <li>You can bond as many TEER as you like</li>
-              <li>You can unbond any time with a 7-day unbonding period</li>
-              <li>
-                You will not accumulate any TEERdays during the unbonding period
-              </li>
-              <li>
-                You can’t bond any additional TEER during the unbonding period
-              </li>
-              <li>
-                You will lose a % of your TEERdays if you unbond your TEER pro
-                rata of the unbonded amount
-              </li>
-              <li>TEERdays are non-transferable</li>
-              <li>
-                TEERdays are calculated as follows:<br />
-                Amount of TEER times the number of days bonded = TEERdays <br />
-                Example: 20 TEER * 7 days = 140 TEERdays
-              </li>
-            </ul>
-          </div>
-        </transition>
+            <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Rules</h2>
+          </button>
+          <transition name="smooth-accordion">
+            <div
+              v-show="activeAccordion === 4"
+              class="accordion-content p-6 border border-incognitee-green bg-gray-900 rounded-md shadow-2xl shadow-blue-500/20"
+            >
+              <ul class="list-disc list-outside text-gray-300 mt-6 px-4">
+                <li>You can bond as many TEER as you like</li>
+                <li>You can unbond any time with a 7-day unbonding period</li>
+                <li>
+                  You will not accumulate any TEERdays during the unbonding
+                  period
+                </li>
+                <li>
+                  You can’t bond any additional TEER during the unbonding period
+                </li>
+                <li>
+                  You will lose a % of your TEERdays if you unbond your TEER pro
+                  rata of the unbonded amount
+                </li>
+                <li>TEERdays are non-transferable</li>
+                <li>
+                  TEERdays are calculated as follows:<br />
+                  Amount of TEER times the number of days bonded = TEERdays
+                  <br />
+                  Example: 20 TEER * 7 days = 140 TEERdays
+                </li>
+              </ul>
+            </div>
+          </transition>
+        </div>
       </div>
-    </div>
 
-    <div class="my-40 mx-auto max-w-7xl">
-      <div class="sm:flex sm:items-center">
-        <div class="sm:flex-auto">
-          <div class="mt-10">
-            <h1
-              class="title text-3xl font-bold tracking-tight text-white sm:text-4xl"
-            >
-              Leaderboard​​
-            </h1>
-            <!-- Verwende kleinere obere Randabstände auf mobilen Geräten -->
-            <div class="mt-4 sm:mt-10 overflow-x-auto">
-              <table class="rounded-table min-w-full">
-                <thead>
-                  <tr>
-                    <th
-                      scope="col"
-                      class="px-4 py-4 text-left text-sm font-semibold text-white"
-                    >
-                      Rank
-                    </th>
-                    <th
-                      scope="col"
-                      class="px-4 py-4 text-right text-sm font-semibold text-white"
-                    >
-                      TEERdays
-                    </th>
-                    <th
-                      scope="col"
-                      class="px-4 py-4 text-left text-sm font-semibold text-white"
-                    >
-                      Wallet
-                    </th>
-                    <th
-                      scope="col"
-                      class="px-4 py-4 text-right text-sm font-semibold text-white"
-                    >
-                      TEER bonded
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="(entry, index) in allBonds.slice(0, 10)"
-                    :key="index"
-                    :class="{
-                      'bg-gray-700': index % 2 === 0, // Jede zweite Zeile grau
-                      'bg-gray-800': index % 2 !== 0, // Jede andere Zeile dunkelgrau
-                    }"
-                    class="rounded-lg shadow"
-                  >
-                    <td
-                      class="whitespace-nowrap px-4 py-4 text-sm font-medium text-white text-left"
-                    >
-                      {{ index + 1 }}
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-4 py-4 text-sm text-gray-300 text-right"
-                    >
-                      {{ formatBigDecimalBalance(entry[2]) }}
-                    </td>
-                    <td
-                      class="wallet-address whitespace-nowrap px-4 py-4 text-sm text-gray-300 text-left"
-                    >
-                      {{ entry[0] }}
-                    </td>
-                    <td
-                      class="whitespace-nowrap px-4 py-4 text-sm text-gray-300 text-right"
+      <div class="my-40 mx-auto max-w-7xl">
+        <div class="sm:flex sm:items-center">
+          <div class="sm:flex-auto">
+            <div class="mt-10">
+              <h1
+                class="title text-3xl font-bold tracking-tight text-white sm:text-4xl"
+              >
+                Leaderboard​​
+              </h1>
+              <!-- Verwende kleinere obere Randabstände auf mobilen Geräten -->
+              <div class="mt-4 sm:mt-10 overflow-x-auto">
+                <table class="rounded-table min-w-full">
+                  <thead>
+                    <tr>
+                      <th
+                        scope="col"
+                        class="px-4 py-4 text-left text-sm font-semibold text-white"
+                      >
+                        Rank
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-4 text-right text-sm font-semibold text-white"
+                      >
+                        TEERdays
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-4 text-left text-sm font-semibold text-white"
+                      >
+                        Wallet
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-4 py-4 text-right text-sm font-semibold text-white"
+                      >
+                        TEER bonded
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(entry, index) in allBonds.slice(0, 10)"
+                      :key="index"
+                      :class="{
+                        'bg-gray-700': index % 2 === 0, // Jede zweite Zeile grau
+                        'bg-gray-800': index % 2 !== 0, // Jede andere Zeile dunkelgrau
+                      }"
+                      class="rounded-lg shadow"
                     >
-                      {{ formatBigDecimalBalance(entry[1]) }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+                      <td
+                        class="whitespace-nowrap px-4 py-4 text-sm font-medium text-white text-left"
+                      >
+                        {{ index + 1 }}
+                      </td>
+                      <td
+                        class="whitespace-nowrap px-4 py-4 text-sm text-gray-300 text-right"
+                      >
+                        {{ formatBigDecimalBalance(entry[2]) }}
+                      </td>
+                      <td
+                        class="wallet-address whitespace-nowrap px-4 py-4 text-sm text-gray-300 text-left"
+                      >
+                        {{ entry[0] }}
+                      </td>
+                      <td
+                        class="whitespace-nowrap px-4 py-4 text-sm text-gray-300 text-right"
+                      >
+                        {{ formatBigDecimalBalance(entry[1]) }}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <div
-    aria-live="assertive"
-    class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
-  >
-    <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
-      <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
-      <transition
-        enter-active-class="transform ease-out duration-300 transition"
-        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-        leave-active-class="transition ease-in duration-100"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <div
-          v-if="showStatusOverlay"
-          class="bg-cover bg-no-repeat shadow-blue-500/20 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-gray-800 border-incognitee-green shadow-lg ring-1 ring-incognitee-green"
+    <div
+      aria-live="assertive"
+      class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
+    >
+      <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
+        <transition
+          enter-active-class="transform ease-out duration-300 transition"
+          enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+          enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+          leave-active-class="transition ease-in duration-100"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
         >
-          <div class="p-4">
-            <div class="flex items-start">
-              <div class="ml-3 w-0 flex-1 pt-0.5">
-                <p class="mt-1 text-sm text-gray-300">{{ txStatus }}</p>
-              </div>
-              <div class="ml-4 flex flex-shrink-0">
-                <button
-                  type="button"
-                  @click="showStatusOverlay = false"
-                  class="inline-flex rounded-md bg-gray-800 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                  <span class="sr-only">Close</span>
-                  <XMarkIcon class="h-5 w-5" aria-hidden="true" />
-                </button>
+          <div
+            v-if="showStatusOverlay"
+            class="bg-cover bg-no-repeat shadow-blue-500/20 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-gray-800 border-incognitee-green shadow-lg ring-1 ring-incognitee-green"
+          >
+            <div class="p-4">
+              <div class="flex items-start">
+                <div class="ml-3 w-0 flex-1 pt-0.5">
+                  <p class="mt-1 text-sm text-gray-300">{{ txStatus }}</p>
+                </div>
+                <div class="ml-4 flex flex-shrink-0">
+                  <button
+                    type="button"
+                    @click="showStatusOverlay = false"
+                    class="inline-flex rounded-md bg-gray-800 text-gray-400 hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  >
+                    <span class="sr-only">Close</span>
+                    <XMarkIcon class="h-5 w-5" aria-hidden="true" />
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </transition>
+        </transition>
+      </div>
     </div>
   </div>
   <!-- Choose Wallet -->
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index 2386dbc..bd9e559 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -1,5 +1,13 @@
 <template>
   <div v-if="show" class="p-3">
+    <div class="mb-3">
+      <button
+        @click="eventBus.emit('toggleSidebar')"
+        class="lg:hidden text-white focus:outline-none text-2xl"
+      >
+        ☰
+      </button>
+    </div>
     <WarningBanner
       v-if="
         accountStore.getSymbol === 'TEER' &&
@@ -11,14 +19,6 @@
       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>
-      <div class="mb-3">
-        <button
-          @click="eventBus.emit('toggleSidebar')"
-          class="lg:hidden text-white focus:outline-none text-2xl"
-        >
-          ☰
-        </button>
-      </div>
       <CampaignBanner
         v-if="enableActions"
         :onClick="openGuessTheNumberOverlay"
diff --git a/components/ui/Sidebar.vue b/components/ui/Sidebar.vue
index eacb025..1aa3fcf 100644
--- a/components/ui/Sidebar.vue
+++ b/components/ui/Sidebar.vue
@@ -54,7 +54,7 @@
               class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
-                  emitEvent('switchToSwap');
+                  emitEvent('switchToVouchers');
                   toggleSidebar();
                 }
               "
@@ -70,10 +70,10 @@
                 <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"
+                  d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
                 />
               </svg>
-              Swap
+              Vouchers
             </button>
           </li>
           <li class="px-4">
@@ -81,7 +81,7 @@
               class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
-                  emitEvent('switchToVouchers');
+                  emitEvent('switchToMessaging');
                   toggleSidebar();
                 }
               "
@@ -97,18 +97,32 @@
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
+                  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>
-              Vouchers
+              Messages
             </button>
           </li>
-          <li class="px-4">
+          <li v-if="accountStore.getSymbol === 'TEER'" class="px-4">
             <button
               class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
               @click="
                 () => {
-                  emitEvent('switchToMessaging');
+                  emitEvent('switchToTeerDays');
+                  toggleSidebar();
+                }
+              "
+            >
+              <TEERdays class="w-6 h-6 mb-2 mr-2" />
+              TeerDays
+            </button>
+          </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold text-gray-500 hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToSwap');
                   toggleSidebar();
                 }
               "
@@ -124,10 +138,10 @@
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+                  d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
                 />
               </svg>
-              Messages
+              Swap
             </button>
           </li>
         </ul>
@@ -186,6 +200,7 @@ import HealthIndicator from "@/components/ui/HealthIndicator.vue";
 import { useAccount } from "@/store/account";
 import { eventBus } from "@/helpers/eventBus";
 import Incognitee from "@/assets/img/incognitee-full-logo.svg";
+import TEERdays from "@/public/img/index/TEERdays-icon-white.svg";
 
 // Sidebar-State (local)
 const isSidebarOpen = ref(false);

From 635212df10a84620917a86e3fa47560bb1247515 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Tue, 17 Dec 2024 10:24:49 +0100
Subject: [PATCH 6/7] fix status typos

---
 components/overlays/SessionProxiesOverlay.vue |  8 +++----
 components/tabs/MessagingTab.vue              |  6 ++---
 components/tabs/TeerDaysTab.vue               |  4 ++--
 components/tabs/VouchersTab.vue               |  8 +++----
 components/tabs/WalletTab.vue                 | 22 +++++++++----------
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index 2e5dd5b..22ecb11 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -186,7 +186,7 @@ const updateAuthorization = async () => {
 };
 
 const createSessionProxy = async () => {
-  txStatus.value = "creating session proxy....";
+  txStatus.value = "Creating session proxy....";
   openStatusOverlay();
   await cryptoWaitReady();
   const generatedMnemonic = mnemonicGenerate();
@@ -258,7 +258,7 @@ const modifySessionProxyRole = async (
     return;
   }
   isSignerBusy.value = true;
-  txStatus.value = "modifying session proxy role....";
+  txStatus.value = "Modifying session proxy role....";
   openStatusOverlay();
   const injector = accountStore.hasInjector ? accountStore.injector : null;
   const seed = accountStore.sessionProxySeed(proxy);
@@ -316,12 +316,12 @@ const handleTopResult = (result, successMsg?) => {
     }
   }
   console.error(`unknown result: ${result}`);
-  txStatus.value = "😞 Unknown Result";
+  txStatus.value = "😞 Unknown result";
 };
 
 const handleTopError = (err) => {
   console.error(`error: ${err}`);
-  txStatus.value = `😞 Submission Failed: ${err}`;
+  txStatus.value = `😞 Submission failed: ${err}.`;
 };
 
 const showStatusOverlay = ref(false);
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index 3a24a2a..e44dcb2 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -587,7 +587,7 @@ const submitSendForm = () => {
 
 const sendPrivately = async () => {
   console.log("sending message on incognitee");
-  txStatus.value = "⌛ sending message privately on incognitee";
+  txStatus.value = "⌛ Sending message privately on incognitee";
   const account = accountStore.account;
   if (
     accountStore.getDecimalBalanceTransferable(incogniteeSidechain.value) <
@@ -655,12 +655,12 @@ const handleTopResult = (result, successMsg?) => {
     }
   }
   console.error(`unknown result: ${result}`);
-  txStatus.value = "😞 Unknown Result";
+  txStatus.value = "😞 Unknown result";
 };
 
 const handleTopError = (err) => {
   console.error(`error: ${err}`);
-  txStatus.value = `😞 Submission Failed: ${err}`;
+  txStatus.value = `😞 Submission failed: ${err}.`;
 };
 
 const scanResult = ref("No QR code data yet");
diff --git a/components/tabs/TeerDaysTab.vue b/components/tabs/TeerDaysTab.vue
index 35757d1..f01a5cc 100644
--- a/components/tabs/TeerDaysTab.vue
+++ b/components/tabs/TeerDaysTab.vue
@@ -1069,7 +1069,7 @@ const txResHandlerIntegritee = ({ events = [], status, txHash }) => {
         // Other, CannotLookup, BadOrigin, no extra info
         errorInfo = dispatchError.toString();
       }
-      txStatus.value = `😞 Transaction Failed! ${section}.${method}::${errorInfo}`;
+      txStatus.value = `😞 Transaction failed! ${section}.${method}::${errorInfo}.`;
     } else if (section + ":" + method === "system:ExtrinsicSuccess") {
       txStatus.value = `❤️️ Transaction successful!`;
       // Close the overlay automatically after 5 seconds if successful
@@ -1079,7 +1079,7 @@ const txResHandlerIntegritee = ({ events = [], status, txHash }) => {
 };
 
 const txErrHandlerIntegritee = (err) => {
-  txStatus.value = `😞 Transaction Failed: ${err.toString()}`;
+  txStatus.value = `😞 Transaction failed: ${err.toString()}.`;
 };
 
 const showChooseWalletOverlay = ref(false);
diff --git a/components/tabs/VouchersTab.vue b/components/tabs/VouchersTab.vue
index 1e12988..ac92708 100644
--- a/components/tabs/VouchersTab.vue
+++ b/components/tabs/VouchersTab.vue
@@ -466,7 +466,7 @@ const doForgetVoucher = () => {
 
 const fundNewVoucher = async () => {
   console.log("sending funds on incognitee");
-  txStatus.value = "⌛ sending funds privately on incognitee";
+  txStatus.value = "⌛ Sending funds privately on incognitee.";
   const amount = accountStore.decimalAmountToBigInt(sendAmount.value);
   const account = accountStore.account;
   const encoder = new TextEncoder();
@@ -555,16 +555,16 @@ const handleTopResult = (result, successMsg?) => {
       return;
     }
     if (result.status.isInvalid) {
-      txStatus.value = "😞 Invalid (unspecified reason)";
+      txStatus.value = "😞 Invalid (unspecified reason).";
       return;
     }
   }
   console.error(`unknown result: ${result}`);
-  txStatus.value = "😞 Unknown Result";
+  txStatus.value = "😞 Unknown result.";
 };
 const handleTopError = (err) => {
   console.error(`error: ${err}`);
-  txStatus.value = `😞 Submission Failed: ${err}`;
+  txStatus.value = `😞 Submission failed: ${err}.`;
 };
 
 const showShareVoucher = ref(false);
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index bd9e559..a7e62d4 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -1170,8 +1170,8 @@ const setRecipientAddressToSelf = () => {
 };
 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`);
+    ? (txStatus.value = `😀 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 } }) => {
@@ -1205,7 +1205,7 @@ const txResHandlerShieldingTarget = ({ events = [], status, txHash }) => {
         // Other, CannotLookup, BadOrigin, no extra info
         errorInfo = dispatchError.toString();
       }
-      txStatus.value = `😞 Transaction Failed! ${section}.${method}::${errorInfo}`;
+      txStatus.value = `😞 Transaction failed! ${section}.${method}::${errorInfo}.`;
     } else if (section + ":" + method === "system:ExtrinsicSuccess") {
       console.log(
         `✅ Transaction successful with status: ${status} hash: ${txHash}`,
@@ -1215,7 +1215,7 @@ const txResHandlerShieldingTarget = ({ events = [], status, txHash }) => {
 };
 
 const txErrHandlerShieldingTarget = (err) =>
-  (txStatus.value = `😞 Transaction Failed: ${err.toString()}`);
+  (txStatus.value = `😞 Transaction failed: ${err.toString()}.`);
 
 const handleTopResult = (result, successMsg?) => {
   console.log("TOP result: " + result);
@@ -1232,17 +1232,17 @@ const handleTopResult = (result, successMsg?) => {
       return;
     }
     if (result.status.isInvalid) {
-      txStatus.value = "😞 Invalid (unspecified reason)";
+      txStatus.value = "😞 Invalid (unspecified reason).";
       return;
     }
   }
   console.error(`unknown result: ${result}`);
-  txStatus.value = "😞 Unknown Result";
+  txStatus.value = "😞 Unknown result.";
 };
 
 const handleTopError = (err) => {
   console.error(`error: ${err}`);
-  txStatus.value = `😞 Submission Failed: ${err}`;
+  txStatus.value = `😞 Submission failed: ${err}.`;
 };
 
 const shield = async () => {
@@ -1253,7 +1253,7 @@ const shield = async () => {
     return;
   }
   isSignerBusy.value = true;
-  txStatus.value = "⌛ awaiting signature and connection";
+  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);
@@ -1271,7 +1271,7 @@ const shield = async () => {
 
 const unshield = async () => {
   console.log("will unshield 30% of your private funds to same account on L1");
-  txStatus.value = "⌛ will unshield to L1";
+  txStatus.value = "⌛ Will unshield to L1.";
   const amount = accountStore.decimalAmountToBigInt(unshieldAmount.value);
   const account = accountStore.account;
   const nonce = new u32(
@@ -1308,7 +1308,7 @@ const unshield = async () => {
 
 const sendPrivately = async () => {
   console.log("sending funds on incognitee");
-  txStatus.value = "⌛ sending funds privately on incognitee";
+  txStatus.value = "⌛ Sending funds privately on Incognitee.";
   const amount = accountStore.decimalAmountToBigInt(sendAmount.value);
   const account = accountStore.account;
 
@@ -1351,7 +1351,7 @@ const sendPrivately = async () => {
 };
 const submitGuess = async () => {
   console.log("submit guess: ", guess.value);
-  txStatus.value = "⌛ privately submitting your guess to incognitee";
+  txStatus.value = "⌛ Privately submitting your guess to Incognitee.";
   const account = accountStore.account;
   const nonce = new u32(
     new TypeRegistry(),

From 52da761a7c440c5aec37d12e290bb3fecc3c2f43 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Tue, 17 Dec 2024 11:14:10 +0100
Subject: [PATCH 7/7] fix messaging window height resize

---
 components/tabs/MessagingTab.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index e44dcb2..669a6e9 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -176,6 +176,7 @@
         v-if="!isMobile || showChatDetail"
         :class="isMobile ? 'w-full' : 'md:w-2/3'"
         class="bg-incognitee-blue flex flex-col h-screen relative"
+        :style="{ height: chatWindowHeight }"
       >
         <!-- Header -->
         <div
@@ -419,9 +420,21 @@ const closeStartOverlay = () => {
   showStartOverlay.value = false;
 };
 
+const chatWindowHeight = ref("calc(100vh - 12rem)");
+
+const adjustChatWindowHeight = () => {
+  const viewportHeight = window.innerHeight;
+  chatWindowHeight.value = `${viewportHeight}px`;
+};
 // Ensure overlay is shown on reload
 onMounted(() => {
   showStartOverlay.value = false;
+  window.addEventListener("resize", adjustChatWindowHeight);
+  adjustChatWindowHeight();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", adjustChatWindowHeight);
 });
 
 // Reaktive Variable für das Overlay
@@ -593,6 +606,7 @@ const sendPrivately = async () => {
     accountStore.getDecimalBalanceTransferable(incogniteeSidechain.value) <
     3 * INCOGNITEE_TX_FEE
   ) {
+    txStatus.value = "";
     alert("Insufficient balance");
     return;
   }