From 7136804c01a97790d1d202521079070a8f7aad1f Mon Sep 17 00:00:00 2001
From: brenzi <brenzi@users.noreply.github.com>
Date: Thu, 13 Jun 2024 10:09:05 +0200
Subject: [PATCH] Ab/wallet root (#42)

* bump dependencies

* fix bricked unshielding form

* make wallet root path

* clarify amount

* purge unused legacy files

* info hint

* trademark sup

* fmt
---
 app.vue                              |   10 +-
 components/.DS_Store                 |  Bin 8196 -> 0 bytes
 components/CheckWalletTab.vue        |  149 --
 components/Contacts/Form.vue         |  483 ------
 components/Contacts/Info.vue         |   94 --
 components/Contacts/index.vue        |   89 --
 components/CreateWalletTab.vue       |   74 -
 components/Docs/Texts.vue            |   84 --
 components/Docs/index.vue            |  350 -----
 components/Footer/index.vue          |  445 ------
 components/Global/LineLink.vue       |   78 -
 components/Global/RadialGradient.vue |   19 -
 components/Global/Simple.vue         |  160 --
 components/Header/Menu.vue           |   73 -
 components/Header/Menu.vue.bkp       |   56 -
 components/Header/index.vue          |  339 -----
 components/Header/index.vue.bkp      |  209 ---
 components/Index/Community.vue       |   92 --
 components/Index/Delegator.vue       |  133 --
 components/Index/Hunter.vue          |  131 --
 components/Index/Main.vue            |  180 ---
 components/Index/News.vue            |   60 -
 components/Index/Partner.vue         |  129 --
 components/Index/Prizes.vue          |  146 --
 components/Index/Rules.vue           |  172 ---
 components/Index/Scalability.vue     |  147 --
 components/Index/Steps.vue           |  179 ---
 components/Index/Validator.vue       |  133 --
 components/Index/Work.vue            |  124 --
 components/InviteFriendTab.vue       |  183 ---
 components/Logo/index.vue            |   96 --
 components/LogoIntegritee/index.vue  |  126 --
 components/PublishonxTab.vue         |  166 ---
 components/Socials/Section.vue       |  153 --
 components/Socials/index.vue         |   50 -
 components/UnshieldTab.vue           |   99 --
 layouts/default.vue                  |    2 +-
 package.json                         |    4 +-
 pages/gov.vue                        |    2 +-
 pages/index.vue                      | 2009 ++++++++++++++++++++++++-
 pages/swap.vue                       |    2 +-
 pages/wallet.vue                     | 2015 --------------------------
 store/paseo.ts                       |    7 -
 yarn.lock                            |   62 +-
 44 files changed, 2027 insertions(+), 7287 deletions(-)
 delete mode 100644 components/.DS_Store
 delete mode 100644 components/CheckWalletTab.vue
 delete mode 100644 components/Contacts/Form.vue
 delete mode 100644 components/Contacts/Info.vue
 delete mode 100644 components/Contacts/index.vue
 delete mode 100644 components/CreateWalletTab.vue
 delete mode 100644 components/Docs/Texts.vue
 delete mode 100644 components/Docs/index.vue
 delete mode 100644 components/Footer/index.vue
 delete mode 100644 components/Global/LineLink.vue
 delete mode 100644 components/Global/RadialGradient.vue
 delete mode 100644 components/Global/Simple.vue
 delete mode 100644 components/Header/Menu.vue
 delete mode 100644 components/Header/Menu.vue.bkp
 delete mode 100644 components/Header/index.vue
 delete mode 100644 components/Header/index.vue.bkp
 delete mode 100644 components/Index/Community.vue
 delete mode 100644 components/Index/Delegator.vue
 delete mode 100644 components/Index/Hunter.vue
 delete mode 100644 components/Index/Main.vue
 delete mode 100644 components/Index/News.vue
 delete mode 100644 components/Index/Partner.vue
 delete mode 100644 components/Index/Prizes.vue
 delete mode 100644 components/Index/Rules.vue
 delete mode 100644 components/Index/Scalability.vue
 delete mode 100644 components/Index/Steps.vue
 delete mode 100644 components/Index/Validator.vue
 delete mode 100644 components/Index/Work.vue
 delete mode 100644 components/InviteFriendTab.vue
 delete mode 100644 components/Logo/index.vue
 delete mode 100644 components/LogoIntegritee/index.vue
 delete mode 100644 components/PublishonxTab.vue
 delete mode 100644 components/Socials/Section.vue
 delete mode 100644 components/Socials/index.vue
 delete mode 100644 components/UnshieldTab.vue
 delete mode 100644 pages/wallet.vue
 delete mode 100644 store/paseo.ts

diff --git a/app.vue b/app.vue
index 216dd87..5cd504e 100644
--- a/app.vue
+++ b/app.vue
@@ -1,12 +1,4 @@
-<script setup lang="ts">
-import DefaultLayout from "./layouts/default.vue";
-import { defineAsyncComponent } from "vue";
-import { useAsyncData } from "#imports";
-import Footer from "@/components/Footer";
-
-const exports = {};
-const Header = defineAsyncComponent(() => import("@/components/Header"));
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <NuxtLayout />
diff --git a/components/.DS_Store b/components/.DS_Store
deleted file mode 100644
index 9ee0ca2d37bb5cf2f098dffdeb8e880a58187fd5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 8196
zcmeHMv2GJV5S=B)Sc(Kmmja|!6h#y%F!XSQBMA}(k~^xzc4R;{X9W<E5a>RF51^w6
zKaeI}z93!1cTghU>~8L6eRq%!glDDQv2Nbnd;4x<Yc51&Hs1}qL@Pwp!Q{BKh^1z5
zo@ZrT30Kw-4eE*ZXh3i2&3M%9RnU4t9Z(0<0d+tfPzU}62k@KCqto!a@3Xq91M0wB
zI>6r#7L#KVV(z2+>cHY!0K^t9yMfQ>16+*_F$ppE(Usz!zI!mC)Pxqp_;Tbe!x57Z
zb02*<8DCB&Fq_b!7{`t}>)>P(A9Ym+)Pbr4+`D(^5oPomoxAAY2iaum;djsLFq14z
z`{S(7x&B(4wvSF9*5ihk!cAXvdnM;HrfyLRT?79<q0BuvlR2qlW24Yf)K0RJzb;?H
z+omn>X7FR54)|S0$-TM`?kFGe-z)fMFhWBECf0F>_m7*=7&`iRF5_6o^7d?A>iBwJ
z=n(giUNm89b?m^2JsMX1xWNyqO(HLK{M-^cB24K=6DHPSK|@#R2~H`iIE>wR{xQx<
z4X?i6Iyw60&ZelBPShh}{x8hmqNjKoBg$g-o69mMxsRvC{)<}4T$hh|E%RQ#;C1`w
zQ#qmodg;#Reyrv8=Re`4K6+p1`z?pmeA$|KAMQL~qaOSlKsnCy>|gcL2PmIGNUc9U
z6<RB(@-#K0Vm%gQI@E!=c3{Epeuex0$Ib8m=h`FPygKl|J78LAFWtm0LvLN#FZbFO
va~G2b<8mKe2^QCmBf54RvG|7}K3hP!CJ8b35mzw&&Wix+xOGtn=GB2;-S`>l

diff --git a/components/CheckWalletTab.vue b/components/CheckWalletTab.vue
deleted file mode 100644
index 85bab57..0000000
--- a/components/CheckWalletTab.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<!-- components/CreateWalletTab.vue -->
-<template>
-  <section id="steps">
-    <div class="block steps">
-      <div class="container">
-        <div class="grid gap-4">
-          <div class="text-4xl mt-10">Shield PAS tokens to Incognitee</div>
-          <div class="text-lg">
-            <template
-              v-if="
-                accountStore.paseoBalance > existential_deposit * 10 ||
-                (accountStore.paseoBalance > 0 && txStatus != '')
-              "
-            >
-              Shielding your tokens means that you send them from Paseo to
-              Incognitee where you can then transfer them privately
-
-              <div>
-                <NuxtLink
-                  target="blank"
-                  class="mb-5 mt-8 btn btn_gradient"
-                  @click="shield"
-                  >Shield PAS to Incognitee
-                </NuxtLink>
-                <div>{{ txStatus }}</div>
-              </div>
-            </template>
-
-            <template v-else>
-              You don’t have enough Paseo PAS on your account. Copy your address
-              <span style="word-break: break-word; overflow-wrap: break-word">
-                <code>{{ accountStore.getAddress }}</code>
-              </span>
-              and follow the link below to obtain some PAS for free from the
-              Paseo faucet.
-
-              <div class="container mx-auto mt-10">
-                <div class="flex space-x-4 justify-center mt-10">
-                  <a class="button btn" @click="copyToClipboard">
-                    Copy My Address
-                  </a>
-                  <a
-                    href="https://faucet.polkadot.io/paseo"
-                    target="_blank"
-                    class="btn btn_gradient"
-                  >
-                    Get free PAS tokens
-                  </a>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { useAccount } from "@/store/account.ts";
-import { useIncognitee } from "@/store/incognitee.ts";
-import { ref } from "vue";
-import { ApiPromise, WsProvider } from "@polkadot/api";
-
-const existential_deposit = 10000000000;
-const txStatus = ref("");
-const accountStore = useAccount();
-const incogniteeStore = useIncognitee();
-const emit = defineEmits(["change-tab"]);
-const txResHandler = ({ events = [], status, txHash }) => {
-  status.isFinalized
-    ? (txStatus.value = `😀 Finalized. You should see your Incognitee balance increase in seconds. Please proceed to the next tab and invite a friend`)
-    : (txStatus.value = `⌛ Current transaction status: ${status.type}. please be patient a few more seconds. you should see your Paseo balance going down`);
-
-  // Loop through Vec<EventRecord> to display all events
-  events.forEach(({ _, event: { data, method, section } }) => {
-    if (section + ":" + method === "system:ExtrinsicFailed") {
-      // extract the data for this event
-      const [dispatchError, dispatchInfo] = data;
-      console.log(`dispatchinfo: ${dispatchInfo}`);
-      let errorInfo;
-
-      // decode the error
-      if (dispatchError.isModule) {
-        // for module errors, we have the section indexed, lookup
-        // (For specific known errors, we can also do a check against the
-        // api.errors.<module>.<ErrorName>.is(dispatchError.asModule) guard)
-        const mod = dispatchError.asModule;
-        const error = api.registry.findMetaError(
-          new Uint8Array([
-            mod.index.toNumber(),
-            bnFromHex(mod.error.toHex().slice(0, 4)).toNumber(),
-          ]),
-        );
-        const message = `${error.section}.${error.name}${
-          Array.isArray(error.docs)
-            ? `(${error.docs.join("")})`
-            : error.docs || ""
-        }`;
-
-        errorInfo = `${message}`;
-        console.log(`Error-info::${JSON.stringify(error)}`);
-      } else {
-        // Other, CannotLookup, BadOrigin, no extra info
-        errorInfo = dispatchError.toString();
-      }
-      txStatus.value = `😞 Transaction Failed! ${section}.${method}::${errorInfo}`;
-    } else if (section + ":" + method === "system:ExtrinsicSuccess") {
-      txStatus.value`❤️️ Transaction successful! please proceed to the next tab and invite a friend`;
-    }
-  });
-};
-
-const txErrHandler = (err) =>
-  (txStatus.value = `😞 Transaction Failed: ${err.toString()}`);
-const shield = async () => {
-  console.log("shielding 90% of all your PAS");
-  txStatus.value = "⌛ connecting to Paseo....please be patient";
-  if (incogniteeStore.vault) {
-    const balance = accountStore.paseoBalance;
-    const amount = Math.floor(0.9 * balance);
-    if (balance - amount < existential_deposit) {
-      alert(
-        "Your PAS balance would fall below the existential deposit. Please obtain more PAS from the faucet",
-      );
-      txStatus.value = "";
-      return;
-    }
-    console.log(`sending ${amount} to vault: ${incogniteeStore.vault}`);
-    const wsProvider = new WsProvider("wss://rpc.ibp.network/paseo");
-    const api = await ApiPromise.create({ provider: wsProvider });
-    console.log("api initialized for shielding");
-    await api.tx.balances
-      .transferKeepAlive(incogniteeStore.vault, amount)
-      .signAndSend(accountStore.account, txResHandler)
-      .catch(txErrHandler);
-  }
-};
-
-const copyToClipboard = () => {
-  navigator.clipboard
-    .writeText(accountStore.getAddress)
-    .then(() =>
-      alert(
-        "copied your account address to clipboard. Please paste it into the address field on the Paseo faucet.",
-      ),
-    );
-};
-</script>
diff --git a/components/Contacts/Form.vue b/components/Contacts/Form.vue
deleted file mode 100644
index 96149be..0000000
--- a/components/Contacts/Form.vue
+++ /dev/null
@@ -1,483 +0,0 @@
-<template>
-  <form class="form" @submit.prevent="onSubmit()">
-    <div class="form__row row jcsb">
-      <div
-        class="form__field"
-        :class="{
-          error: v$.$errors.length > 0 && v$.$errors[0].$property === 'name',
-          active: formData.name !== '',
-        }"
-      >
-        <input
-          :value="formData.name"
-          type="text"
-          class="paragraph_medium form__input"
-          @input="onFieldChange('name', $event.target.value)"
-        />
-        <label
-          :class="{ active: formData.name !== '' }"
-          class="form__label paragraph_medium"
-          >Name</label
-        >
-        <div class="form__field_caption">
-          {{ v$.$errors.length > 0 && v$.$errors[0].$message }}
-        </div>
-      </div>
-      <div
-        class="form__field"
-        :class="{
-          error: v$.$errors.length > 0 && v$.$errors[0].$property === 'email',
-          active: formData.email !== '',
-        }"
-      >
-        <input
-          :value="formData.email"
-          type="text"
-          class="paragraph_medium form__input"
-          @input="onFieldChange('email', $event.target.value)"
-        />
-        <label
-          :class="{ active: formData.email !== '' }"
-          class="form__label paragraph_medium"
-          >Email</label
-        >
-        <div class="form__field_caption">
-          {{ v$.$errors.length > 0 && v$.$errors[0].$message }}
-        </div>
-      </div>
-      <div
-        class="form__field"
-        :class="{
-          error: v$.$errors.length > 0 && v$.$errors[0].$property === 'subject',
-          active: formData.subject !== '',
-        }"
-      >
-        <input
-          maxlength="80"
-          :value="formData.subject"
-          type="text"
-          class="paragraph_medium form__input"
-          @input="onFieldChange('subject', $event.target.value)"
-        />
-        <label
-          :class="{ active: formData.subject !== '' }"
-          class="form__label paragraph_medium"
-          >Subject</label
-        >
-        <div class="form__field_caption">
-          {{ v$.$errors.length > 0 && v$.$errors[0].$message }}
-        </div>
-        <span class="form__count">{{ getCount(formData.subject) }}/80</span>
-      </div>
-      <div
-        class="form__field"
-        :class="{
-          error: v$.$errors.length > 0 && v$.$errors[0].$property === 'message',
-          active: formData.message !== '',
-        }"
-      >
-        <textarea
-          maxlength="200"
-          :value="formData.message"
-          class="paragraph_medium form__textarea scrollbar"
-          @input="onFieldChange('message', $event.target.value)"
-        />
-        <label
-          :class="{ active: formData.message !== '' }"
-          class="form__label paragraph_medium"
-          >Message</label
-        >
-        <div class="form__field_caption">
-          {{ v$.$errors.length > 0 && v$.$errors[0].$message }}
-        </div>
-        <span class="form__count">{{ getCount(formData.message) }}/200</span>
-      </div>
-      <div class="btn__row row">
-        <button
-          type="submit"
-          class="btn btn_gradient form__button"
-          :disabled="isSending"
-        >
-          Submit
-        </button>
-        <div :class="{ active: isSuccess }" class="form__success">
-          <div class="form__success-icon" />
-          <div class="form__success-text">Form completed. Thanks!</div>
-          <div class="form__success-close" @click="onCloseHandler" />
-        </div>
-      </div>
-    </div>
-  </form>
-</template>
-
-<script>
-import { ref } from "vue";
-import useVuelidate from "@vuelidate/core";
-import { required, minLength, email, maxLength } from "@vuelidate/validators";
-
-export default {
-  setup() {
-    const formData = ref({
-      name: "",
-      email: "",
-      subject: "",
-      message: "",
-    });
-
-    const isSuccess = ref(false);
-    const isSending = ref(false);
-
-    const rules = {
-      name: { required, minLength: minLength(2) },
-      email: { required, email },
-      subject: { required, minLength: minLength(2) },
-      message: { required, minLength: minLength(2) },
-    };
-
-    const v$ = useVuelidate(rules, formData);
-
-    const resetForm = () => {
-      formData.value = {
-        name: "",
-        email: "",
-        subject: "",
-        message: "",
-      };
-      v$.value.$reset();
-    };
-
-    const onSubmit = async () => {
-      const result = await v$.value.$validate();
-      if (result) {
-        isSending.value = true;
-        try {
-          await $fetch("/api/mail", {
-            method: "POST",
-            body: formData.value,
-          });
-          resetForm();
-          isSuccess.value = true;
-        } catch (err) {
-          console.log(err);
-        } finally {
-          isSending.value = false;
-        }
-      }
-    };
-
-    const onCloseHandler = () => {
-      isSuccess.value = false;
-    };
-
-    const getCount = (str) => {
-      return str.length;
-    };
-
-    const onFieldChange = (propertyName, value) => {
-      formData.value = { ...formData.value, [propertyName]: value };
-    };
-
-    return {
-      formData,
-      isSuccess,
-      v$,
-      onSubmit,
-      onCloseHandler,
-      getCount,
-      onFieldChange,
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.form {
-  padding: 60px;
-  width: 700px;
-  background: rgba(81, 81, 81, 0.246);
-  backdrop-filter: blur(38.335px);
-  border-radius: 24px;
-
-  @include lg {
-    padding: 60px;
-    width: 600px;
-  }
-
-  @include slg {
-    width: 540px;
-  }
-
-  @include md {
-    width: 100%;
-    margin-top: 48px;
-  }
-
-  @include sm {
-    padding: 40px;
-    margin-top: 32px;
-  }
-
-  &__row {
-    flex-wrap: wrap;
-  }
-
-  &__field {
-    position: relative;
-    margin-bottom: 86px;
-    width: 100%;
-    transition: 0.4s;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-
-    @include sm {
-      margin-bottom: 76px;
-    }
-
-    &:nth-child(1),
-    &:nth-child(2) {
-      width: 274px;
-
-      @include lg {
-        width: 224px;
-      }
-
-      @include slg {
-        width: 100%;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 57px;
-
-      @include sm {
-        margin-bottom: 54px;
-      }
-    }
-
-    &_caption {
-      font-family: "Inter";
-      width: 100%;
-      position: absolute;
-      top: 110%;
-      left: 0;
-      font-weight: 400;
-      font-size: 0.875rem;
-      line-height: 150%;
-      color: #e54f45;
-      opacity: 0;
-      transition: 0.4s;
-    }
-
-    &.error {
-      border-bottom: 1px solid rgba(229, 79, 69, 0.2);
-
-      input,
-      textarea {
-        color: #e54f45;
-      }
-
-      .form__field_caption {
-        opacity: 1;
-      }
-    }
-
-    &.active {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-
-      input,
-      textarea {
-        color: #fff;
-      }
-    }
-
-    &:focus-within {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
-    }
-  }
-
-  &__label {
-    position: absolute;
-    bottom: 32px;
-    left: 0;
-    transition: 0.4s;
-    pointer-events: none;
-
-    @include sm {
-      bottom: 18px;
-    }
-
-    &.active {
-      bottom: calc(100% + 8px);
-      font-size: 14px;
-      opacity: 0.4;
-
-      @include sm {
-        bottom: calc(100% + 4px);
-        font-size: 12px;
-      }
-    }
-  }
-
-  &__input,
-  &__textarea {
-    width: 100%;
-    background: transparent;
-    padding-bottom: 32px;
-    border: 0;
-    outline: none;
-    color: #fff;
-
-    @include sm {
-      padding-bottom: 18px;
-    }
-
-    &:focus {
-      + label {
-        bottom: calc(100% + 8px);
-        font-size: 14px;
-        opacity: 0.4;
-
-        @include sm {
-          bottom: calc(100% + 4px);
-          font-size: 12px;
-        }
-      }
-    }
-  }
-
-  &__textarea {
-    height: 81px;
-    resize: none;
-
-    @include lg {
-      height: 108px;
-    }
-
-    @include sm {
-      height: 63px;
-    }
-  }
-
-  button {
-    position: relative;
-    color: #fff;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-  }
-
-  &__success {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 8px 18px;
-    gap: 8px;
-    width: 267px;
-    height: 40px;
-    background: rgba(81, 81, 81, 0.8);
-    backdrop-filter: blur(35px);
-    border-radius: 12px;
-    margin-left: 18px;
-    transition: 0.4s;
-    opacity: 0;
-
-    @include sm {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      padding: 9px 12px;
-      width: 222px;
-      height: 36px;
-      border-radius: 10px;
-      margin-left: 0;
-    }
-
-    &.active {
-      opacity: 1;
-    }
-  }
-
-  &__success-text {
-    font-family: "Inter";
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 150%;
-    color: #ffffff;
-    width: 170px;
-    text-align: center;
-
-    @include sm {
-      width: 146px;
-      font-size: 12px;
-    }
-  }
-
-  &__success-icon {
-    width: 21px;
-    height: 21px;
-    background: url("@/assets/img/contacts/success-icon.svg");
-    background-size: cover;
-
-    @include sm {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &__success-close {
-    width: 24px;
-    height: 24px;
-    background: url("@/assets/img/contacts/close-icon.svg");
-    background-size: cover;
-    cursor: pointer;
-
-    @include sm {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &__count {
-    position: absolute;
-    bottom: -25px;
-    right: 0;
-    font-family: "Inter";
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 150%;
-    text-align: right;
-    color: #ffffff;
-    opacity: 0.4;
-
-    @include sm {
-      bottom: -22px;
-      font-size: 12px;
-    }
-  }
-
-  &__button {
-    @include sm {
-      width: 100%;
-    }
-  }
-}
-
-.btn__row {
-  position: relative;
-  width: 100%;
-  align-items: center;
-}
-
-.scrollbar::-webkit-scrollbar {
-  width: 1px;
-}
-
-.scrollbar::-webkit-scrollbar-track {
-  background-color: rgba(255, 255, 255, 0.3);
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 1);
-}
-</style>
diff --git a/components/Contacts/Info.vue b/components/Contacts/Info.vue
deleted file mode 100644
index dc83cbb..0000000
--- a/components/Contacts/Info.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div class="info">
-    <div class="info__column">
-      <slot name="title" />
-      <slot name="items" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped>
-.info {
-  width: 100%;
-  :slotted(.info__link) {
-    display: block;
-    line-height: 150%;
-    margin-bottom: 14px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__column {
-    width: 100%;
-  }
-
-  :slotted(.info__row) {
-    display: block;
-
-    @include md {
-      display: flex;
-    }
-
-    @include xsm {
-      display: block;
-    }
-  }
-
-  :slotted(.info__icon) {
-    width: 48px;
-    height: 48px;
-    background: url("@/assets/img/contacts/contact.svg");
-    background-size: cover;
-
-    @include sm {
-      width: 32px;
-      height: 32px;
-    }
-  }
-
-  :slotted(.contact__icon) {
-    width: 48px;
-    height: 48px;
-    background: url("@/assets/img/contacts/contact.svg");
-    background-size: cover;
-    @include sm {
-      width: 32px;
-      height: 32px;
-    }
-  }
-
-  :slotted(.address__icon) {
-    width: 48px;
-    height: 48px;
-    background: url("@/assets/img/contacts/address-icon.svg");
-    background-size: cover;
-    @include sm {
-      width: 32px;
-      height: 32px;
-    }
-  }
-
-  :slotted(.info__item) {
-    margin-bottom: 32px;
-
-    @include md {
-      width: 384px;
-      margin-bottom: 0;
-      margin-right: 32px;
-    }
-
-    @include sm {
-      width: 254px;
-    }
-
-    @include xsm {
-      margin-bottom: 32px;
-      margin-right: 0;
-    }
-  }
-}
-</style>
diff --git a/components/Contacts/index.vue b/components/Contacts/index.vue
deleted file mode 100644
index 339ce16..0000000
--- a/components/Contacts/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="contacts">
-    <Desc>
-      <template #title>
-        <span>Build</span> and
-        <span class="text-gradient_purple-blue">deploy</span> a new generation
-        of data-driven platforms with Integritee
-      </template>
-    </Desc>
-    <div class="block">
-      <div class="container">
-        <div class="contacts__row row jcsb">
-          <div class="contacts__column">
-            <Info>
-              <template #title>
-                <h2 class="title title_h2 margin_large">
-                  Get in touch<br />
-                  with Integritee
-                </h2>
-              </template>
-              <template #items>
-                <div class="info__row">
-                  <div class="info__item">
-                    <div class="contact__icon margin_medium" />
-                    <p class="title_sub margin_medium">Contact Us</p>
-                    <p class="paragraph_large">
-                      <a
-                        href="mailto: hello@integritee.network"
-                        class="text-link info__link"
-                        >hello@integritee.network</a
-                      >
-                      <a
-                        href="mailto: support@integritee.network"
-                        class="text-link info__link"
-                        >support@integritee.network</a
-                      >
-                    </p>
-                  </div>
-                  <div class="info__item">
-                    <div class="address__icon margin_medium" />
-                    <p class="title_sub margin_medium">Integritee AG</p>
-                    <p class="paragraph_large">
-                      Technoparkstrasse 1, 8005 Zurich, Switzerland
-                    </p>
-                  </div>
-                </div>
-              </template>
-            </Info>
-          </div>
-          <Form />
-        </div>
-      </div>
-    </div>
-    <Socials />
-  </div>
-</template>
-
-<script setup>
-import Desc from "@/components/Desc";
-import Info from "@/components/Contacts/Info.vue";
-import Form from "@/components/Contacts/Form.vue";
-import Socials from "@/components/Socials/Section.vue";
-</script>
-<style lang="scss" scoped>
-.contacts {
-  position: relative;
-
-  &__row {
-    @include md {
-      display: block;
-    }
-  }
-
-  &__column {
-    width: 500px;
-
-    @include slg {
-      width: 350px;
-    }
-
-    @include md {
-      width: 100%;
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/CreateWalletTab.vue b/components/CreateWalletTab.vue
deleted file mode 100644
index 5b54d60..0000000
--- a/components/CreateWalletTab.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<!-- components/CreateWalletTab.vue -->
-<template>
-  <section id="steps">
-    <div class="block steps">
-      <div class="container">
-        <div class="grid grid-rows-3 grid-flow-col gap-4">
-          <div class="text-4xl mt-10">Create a Wallet</div>
-          <div class="text-lg">
-            By clicking the “Create Wallet” button, you will create a new wallet
-            on Paseo and Incognitee.
-          </div>
-          <div>
-            <a class="btn btn_gradient" @click="createWallet">
-              Create a Wallet
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { useAccount } from "@/store/account.ts";
-import { Keyring } from "@polkadot/keyring";
-import { hexToU8a, u8aToHex } from "@polkadot/util";
-import {
-  cryptoWaitReady,
-  mnemonicGenerate,
-  mnemonicToMiniSecret,
-} from "@polkadot/util-crypto";
-import { defineComponent, onMounted } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-const accountStore = useAccount();
-
-const emit = defineEmits(["change-tab"]);
-const createWallet = async () => {
-  console.log("creating fresh wallet");
-  await cryptoWaitReady();
-  const generatedMnemonic = mnemonicGenerate();
-  const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
-  const newAccount = localKeyring.addFromMnemonic(generatedMnemonic, {
-    name: "fresh",
-  });
-  const seed = mnemonicToMiniSecret(generatedMnemonic);
-  const privateKeyHex = u8aToHex(seed);
-  console.log(`Private Key in Hex: ${privateKeyHex}`);
-  // change url to contain new seed to allow bookmarking
-  await router.push({
-    query: { seed: privateKeyHex },
-  });
-  accountStore.setAccount(newAccount);
-  emit("change-tab", 1);
-};
-
-onMounted(() => {
-  const seedHex = router.currentRoute.value.query.seed;
-  if (seedHex) {
-    console.log("found seed in url: " + seedHex);
-    cryptoWaitReady().then(() => {
-      const localKeyring = new Keyring({ type: "sr25519" });
-      const account = localKeyring.addFromSeed(hexToU8a(seedHex));
-      accountStore.setAccount(account);
-      emit("change-tab", 1);
-    });
-  }
-});
-
-defineComponent({
-  emits: ["change-tab"],
-});
-</script>
diff --git a/components/Docs/Texts.vue b/components/Docs/Texts.vue
deleted file mode 100644
index 1bb9123..0000000
--- a/components/Docs/Texts.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="container">
-    <div class="text-block">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup></script>
-
-<style scoped lang="scss">
-.text-block {
-  width: 715px;
-  @include lg {
-    width: 645px;
-  }
-  @include slg {
-    width: 605px;
-  }
-  @include md {
-    margin-top: 154px;
-    width: 100%;
-  }
-  :slotted(h1) {
-    color: #fff;
-    font-family: "WhyteInktrap";
-    font-size: 4em;
-    font-weight: 500;
-    line-height: 110%;
-    margin-bottom: 28px;
-    @include slg {
-      font-size: 3em;
-    }
-    @include sm {
-      font-size: 2.25em;
-      margin-bottom: 24px;
-    }
-  }
-  :slotted(h2) {
-    color: #fff;
-    font-family: "Inter";
-    font-size: 2em;
-    font-weight: 500;
-    line-height: 120%;
-    margin-top: 54px;
-    margin-bottom: 22px;
-    @include slg {
-      font-size: 2em;
-      margin-top: 46px;
-    }
-    @include sm {
-      font-size: 1.5em;
-      margin-top: 32px;
-      margin-left: 10px;
-    }
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-  :slotted(p) {
-    color: #fff;
-    font-family: "Inter";
-    font-size: 1.125em;
-    font-weight: 400;
-    line-height: 150%;
-    margin-bottom: 15px;
-    @include slg {
-      font-size: 1em;
-      margin-bottom: 12px;
-    }
-    @include sm {
-      font-size: 0.875em;
-      margin-bottom: 10px;
-    }
-    span {
-      font-size: 1.5em;
-      font-weight: 500;
-      @include sm {
-        font-size: 0.875em;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Docs/index.vue b/components/Docs/index.vue
deleted file mode 100644
index 462c6c1..0000000
--- a/components/Docs/index.vue
+++ /dev/null
@@ -1,350 +0,0 @@
-<template>
-  <div class="docs">
-    <div class="container">
-      <div class="docs__row">
-        <div class="docs__column">
-          <div class="docs__info-wrap">
-            <Info>
-              <template #items>
-                <div class="info__row">
-                  <div class="info__item">
-                    <div class="address__icon margin_medium" />
-                    <p class="title_sub margin_medium">Integritee AG</p>
-                    <p class="paragraph_large">
-                      Technoparkstrasse 1, 8005 Zurich, Switzerland
-                    </p>
-                  </div>
-                  <div class="info__item">
-                    <div class="contact__icon margin_medium" />
-                    <p class="title_sub margin_medium">Contact Us</p>
-                    <p class="paragraph_large">
-                      <a
-                        href="mailto: hello@integritee.network"
-                        class="text-link info__link"
-                        >hello@integritee.network</a
-                      >
-                      <a
-                        href="mailto: support@integritee.network"
-                        class="text-link info__link"
-                        >support@integritee.network</a
-                      >
-                    </p>
-                  </div>
-                </div>
-              </template>
-            </Info>
-          </div>
-        </div>
-        <Texts>
-          <h1>Privacy Policy</h1>
-          <h2>1. About this privacy policy</h2>
-          <p>
-            This is the Privacy Policy for Integritee AG (a company incorporated
-            in Switzerland and operating at Technoparkstrasse 1, 8005 Zurich,
-            Switzerland).
-          </p>
-          <p>
-            This Privacy Policy describes how we may collect, use, disclose and
-            process your personal data when you:access or use our website and
-            network solution and services; and/orprovide us with your personal
-            data.We will only use your personal data where you have given us
-            your consent or where we have other lawful basis for doing so, and
-            in the manner set out in this Privacy Policy.
-          </p>
-          <p>
-            By providing us with personal data, you acknowledge that our
-            collection, use, disclosure and processing of personal data will be
-            in accordance with this Policy, including, for the avoidance of
-            doubt, the cross-jurisdictional transfer of your data. DO NOT
-            provide any personal data to us if you do not accept this Privacy
-            Policy.
-          </p>
-          <p>
-            This Privacy Policy supplements but does not supersede or replace
-            any consents you may have provided to us, or any other agreements or
-            arrangements that you may have with us, in respect of your personal
-            data.If you have any feedback or issues in relation to your personal
-            data, or about this Privacy Policy, or wish to make a complaint to
-            us, you may contact us at by Email: hello@integritee.network
-          </p>
-          <p>
-            This does not affect your statutory rights. For example, if the GDPR
-            applies to you, you may also have a right to lodge a complaint with
-            a European supervisory authority, in particular in the Member State
-            in the European Union where you are habitually resident, where you
-            work or where an alleged infringement of Data Protection law has
-            taken place.
-          </p>
-          <p>
-            When you contact us, we may require that you submit certain forms or
-            provide certain information, including verification of your
-            identity, before we are able to respond.
-          </p>
-          <h2>2. Amendments to this privacy policy</h2>
-          <p>
-            We may amend this Privacy Policy from time to time without notice to
-            you, in compliance with applicable laws or as we update our data
-            usage and handling processes. The updated policy will supersede
-            earlier versions and will apply to personal data provided to us
-            previously. The updated Privacy Policy will take effect when made
-            available on integritee.network/privacy-policy
-          </p>
-          <p>
-            If we make a change that significantly affects your rights or, to
-            the extent we are permitted to do so, significantly changes how or
-            why we use personal data, we will notify you by way of a prominent
-            notice on our website or, if we have your email address, by email.
-          </p>
-          <h2>3. What personal data we collect</h2>
-          <p>
-            <span>What is personal data.</span><br />"Personal data" is data
-            that can be used to identify a natural person. Examples of personal
-            data include name, address, contact details, identification numbers,
-            financial information, transactional information based on your
-            activities on our website, network solution, telephone numbers,
-            email address, images, and any other information of a personal
-            nature.
-          </p>
-          <p>
-            <span>Voluntary provision of personal data.</span><br />We may
-            collect personal data (1) that you voluntarily provide to us; or (2)
-            from third parties. What personal data we collect depends on the
-            purposes for which the personal data is collected and what you have
-            chosen to provide.
-          </p>
-          <p>
-            When our collection is based on consent, you can choose not to
-            provide us with personal data. You also have the right to withdraw
-            your consent for us to continue collecting, using, disclosing and
-            processing your personal data, by contacting us in accordance by
-            E-Mail: hello@integritee.network.
-          </p>
-          <p>
-            <span>Providing personal data belonging to others.</span><br />In
-            certain circumstances, you may also provide us with personal data of
-            persons other than yourself (such as your family members and
-            next-of-kin). If you do so, you represent and warrant that you have
-            brought this Privacy Policy to his/her attention, informed him/her
-            of the purposes for which we are collecting his/her personal data
-            and that he/she has consented to your disclosure of his/her personal
-            data to us for those purposes and accepts this Privacy Policy. You
-            agree to indemnify and hold us harmless from and against any and all
-            claims by such individuals relating to our collection, use and
-            disclosure of such personal data in accordance with the terms of
-            this Privacy Policy.
-          </p>
-          <p>
-            <span>Accuracy and completeness of personal data.</span><br />You
-            are responsible for ensuring that all personal data that you provide
-            to us is true, accurate and complete. You are responsible for
-            informing us of any changes to your personal data.
-          </p>
-          <h2>4. How we collect personal data</h2>
-          <p>
-            <span>Personal data you provide.</span>We collect personal data that
-            is relevant to our relationship with you. We may collect your
-            personal data directly or indirectly through various channels, such
-            as when: you request to be included in an e-mail or our mailing
-            list; when you submit your personal data to us for through our
-            contact form
-          </p>
-          <p>
-            <span>Personal data provided by others.</span>Depending on your
-            relationship with us, we may also collect your personal data from
-            third party sources, for example, from: any third parties whom you
-            have authorised us to obtain your personal data from; entities in
-            which you (or a party connected to you) have an interest; our
-            business partners such as third parties providing services to us;
-            your family members or friends who provide your personal data to us
-            on your behalf; and/orpublic agencies or other public sources.
-          </p>
-          <h2>5. What we do with your personal data</h2>
-          <p>
-            <span>What we do.</span><br />We collect, use, disclose and process
-            your personal data where:you have given us consent;necessary to
-            comply with our legal or regulatory obligations, e.g. responding to
-            valid requests from public authorities;necessary to support our
-            legitimate business interests, provided that this does not override
-            your interests or rights; and
-          </p>
-          <p>
-            <span>General purposes.</span><br />We collect, use, disclose and
-            process your personal data for purposes connected or relevant to our
-            business, to manage your relationship with us. Such purposes would
-            include:communicating with you, and assisting you with your queries,
-            requests, applications, complaints, and feedback;carrying out
-            research and statistical analysis, including development of new
-            products and services or evaluation and improvement of our existing
-            products and services;managing and engaging third parties or data
-            processors that provide services to us, e.g. IT services,
-            technological services, delivery services, and other professional
-            services;such purposes that may be informed to you when your
-            personal data is collected; and/orany other reasonable purposes
-            related to the aforesaid.
-          </p>
-          <p>
-            <span>Legitimate business interests.</span><br />We may also
-            collect, use, disclose and process your personal data for the
-            following purposes to support our legitimate business interests,
-            provided that this does not override your interests or rights, which
-            include:managing our business and relationship with you, and
-            providing services to our customers;assistance of carrying out
-            corporate restructuring plans;complying with internal policies, and
-            procedures;protecting our rights and interests, and those of our
-            customers;enforcing our terms and conditions, and obligations owed
-            to us, or protecting ourselves from legal liability; managing our
-            investor and shareholder relations; andprocess or share your
-            personal data to facilitate acquisitions, mergers, or transfers of
-            our business.
-          </p>
-          <p>
-            <span>Marketing purposes.</span><br />In order for us to market
-            products, events and services which are of specific interest and
-            relevance to you, we may analyse and rely on your personal data
-            provided to us, or data collected from your interactions with us
-            However, no marketing, using your personal data in non-aggregated
-            and/or identifiable form would be carried out unless you have
-            provided us with your consent to use your personal data for such
-            marketing purposes.If you do not want us to use your personal data
-            for the purposes of marketing you can withdraw your consent at any
-            time by contacting us in accordance with paragraph 1 above.
-          </p>
-          <p>
-            <span>Use permitted under applicable laws.</span><br />We may also
-            collect, use, disclose and process your personal data for other
-            purposes, without your knowledge or consent, where this is required
-            or permitted by law. Your personal data may be processed if it is
-            necessary on reasonable request by a law enforcement or regulatory
-            authority, body or agency or in the defence of a legal claim. We
-            will not delete personal data if relevant to an investigation or a
-            dispute. It will continue to be stored until those issues are fully
-            resolved.
-          </p>
-          <p>
-            <span>Contacting you.</span><br />When we contact or send you
-            information for the above purposes and purposes for which you have
-            consented, we may do so by e-mail, SMS, telephone or such other
-            means provided by you. If you do not wish to receive any
-            communication or information from us, or wish to restrict the manner
-            by which we may contact or send you information, you may contact us
-            in accordance with paragraph 1 above.
-          </p>
-          <h2>6. Disclosure of personal data</h2>
-          <p>
-            <span>Disclosure to related parties.</span><br />We may disclose or
-            share your personal data with our related parties (including any
-            IntegriTEE entity as set out in paragraph 1 above) in order to
-            provide our services to you, manage our shareholder and investor
-            returns, for management and compliance purposes, and to utilise
-            shared group IT functions.
-          </p>
-          <p>
-            When disclosing personal data to third parties, we will (where
-            appropriate and permissible) enter into contracts with these third
-            parties to protect your personal data in a manner that is consistent
-            with all applicable laws and/or ensure that they only process your
-            personal data in accordance with our instructions.
-          </p>
-          <h2>7. Security and retention of personal data</h2>
-          <p>
-            <span>Unauthorised access.</span><br />While we take reasonable
-            precautions to safeguard your personal data in our possession or
-            under our control, you agree not to hold us liable or responsible
-            for any loss or damage resulting from unauthorised or unintended
-            access that is beyond our control, such as hacking or cybercrimes.
-          </p>
-          <p>
-            <span>Vulnerabilities.</span><br />We do not make any warranty,
-            guarantee, or representation that your use of our network solution
-            is safe and protected from malware, and other vulnerabilities. We
-            also do not guarantee the security of data that you choose to send
-            us electronically. Sending such data is entirely at your own risk.
-          </p>
-          <p>
-            <span>Period of retention.</span><br />We retain your personal data
-            only for as long as is necessary to fulfil the purposes we collected
-            it for, and to satisfy our business and/or legal purposes, including
-            data analytics, audit, accounting or reporting purposes. How long we
-            keep your personal data depends on the nature of the data, e.g. we
-            keep personal data for at least the duration of the limitation
-            period for bringing claims if the personal data may be required to
-            commence or defend legal proceedings. Some information may also be
-            retained for longer, e.g. where we are required to do so by law.
-          </p>
-        </Texts>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Texts from "~/components/Docs/Texts.vue";
-import Info from "~/components/Contacts/Info.vue";
-</script>
-
-<style lang="scss" scoped>
-.docs {
-  padding-top: 104px;
-  padding-bottom: 180px;
-
-  @include slg {
-    padding-top: 122px;
-    padding-bottom: 140px;
-  }
-
-  @include md {
-    padding-top: 108px;
-  }
-
-  @include sm {
-    padding-top: 68px;
-    padding-bottom: 100px;
-  }
-
-  &__info-wrap {
-    position: sticky;
-    top: 104px;
-  }
-
-  &__row {
-    display: flex;
-    justify-content: space-between;
-
-    @include md {
-      display: block;
-    }
-  }
-
-  &__column {
-    width: 465px;
-
-    @include lg {
-      width: 454px;
-    }
-
-    @include slg {
-      width: 315px;
-    }
-
-    @include md {
-      width: 100%;
-    }
-  }
-}
-
-.info__row {
-  display: block !important;
-}
-
-.info__item {
-  margin-bottom: 32px !important;
-
-  @include md {
-    width: 100% !important;
-  }
-
-  @include sm {
-    margin-bottom: 24px !important;
-  }
-}
-</style>
diff --git a/components/Footer/index.vue b/components/Footer/index.vue
deleted file mode 100644
index b234712..0000000
--- a/components/Footer/index.vue
+++ /dev/null
@@ -1,445 +0,0 @@
-<template>
-  <footer class="footer">
-    <div class="container">
-      <div class="footer__row">
-        <div class="footer__column footer__column_about">
-          <NuxtLink to="/" class="footer__logo">
-            <LogoIntegritee />
-          </NuxtLink>
-          <p class="footer__description">
-            The fastest, most scalable and secure Web3 network bringing the
-            vision of a trustless, decentralized future for all.
-          </p>
-          <Socials />
-        </div>
-        <div class="footer__columns-row">
-          <div class="footer__column">
-            <div class="footer__column-title">TEER Token</div>
-            <div class="footer__column-list">
-              <a
-                :href="KRAKEN_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Kraken
-              </a>
-              <a
-                :href="GATE_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Gate.io
-              </a>
-              <a
-                :href="COIN_MARKET_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                CoinMarketCap
-              </a>
-              <a
-                :href="COIN_GECKO_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                CoinGecko
-              </a>
-              <a
-                :href="TRADING_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                TradingView
-              </a>
-            </div>
-          </div>
-          <div class="footer__column">
-            <div class="footer__column-title">Network</div>
-            <div class="footer__column-list">
-              <a
-                :href="GOVERNANCE_FOOTER_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Governance
-              </a>
-              <a
-                :href="SUBSCAN_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Integritee Subscan
-              </a>
-              <a
-                :href="INTEGRITEE_NETWORK_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Integritee Network
-              </a>
-            </div>
-          </div>
-          <div class="footer__column">
-            <div class="footer__column-title">Resources</div>
-            <div class="footer__column-list">
-              <a
-                :href="TOKENOMICS_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Tokenomics
-              </a>
-              <a
-                :href="DOCS_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Documentation
-              </a>
-              <a
-                :href="LIGHTPAPER_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Lightpaper
-              </a>
-              <a
-                :href="HELP_CENTER_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Help Center
-              </a>
-            </div>
-          </div>
-          <div class="footer__column">
-            <div class="footer__column-title">Community</div>
-            <div class="footer__column-list">
-              <a
-                :href="WATERCOOLER_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Watercooler
-              </a>
-              <a
-                :href="SUBSOCIAL_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Subsocial
-              </a>
-              <a
-                :href="YOUTUBE_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                YouTube
-              </a>
-              <a
-                :href="MEDIUM_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Medium
-              </a>
-              <a
-                :href="REDDIT_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Reddit
-              </a>
-            </div>
-          </div>
-          <div class="footer__column">
-            <div class="footer__column-title">Company</div>
-            <div class="footer__column-list">
-              <NuxtLink
-                to="https://www.integritee.network/about#join"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Jobs
-              </NuxtLink>
-              <NuxtLink
-                to="https://www.integritee.network/about#roadmap"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                Roadmap
-              </NuxtLink>
-              <a
-                :href="LINKEDIN_LINK"
-                target="_blank"
-                class="footer__column-link text-link"
-              >
-                LinkedIn
-              </a>
-              <!--              <a href="/" target="_blank" class="footer__column-link text-link">-->
-              <!--                Contacts-->
-              <!--              </a>-->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="footer__bottom">
-        <span class="paragraph_medium"
-          >©{{ new Date().getFullYear() }} Integritee, Inc.</span
-        >
-        <span>
-          <NuxtLink
-            to="https://www.integritee.network/privacy-policy"
-            class="blue paragraph_medium"
-            >Imprint and Privacy Policy</NuxtLink
-          >
-        </span>
-      </div>
-    </div>
-  </footer>
-</template>
-
-<script setup lang="ts">
-import Socials from "@/components/Socials/index.vue";
-import {
-  COIN_GECKO_LINK,
-  COIN_MARKET_LINK,
-  DOCS_LINK,
-  GATE_LINK,
-  GOVERNANCE_FOOTER_LINK,
-  HELP_CENTER_LINK,
-  INTEGRITEE_NETWORK_LINK,
-  KRAKEN_LINK,
-  LIGHTPAPER_LINK,
-  LINKEDIN_LINK,
-  MEDIUM_LINK,
-  REDDIT_LINK,
-  SUBSCAN_LINK,
-  SUBSOCIAL_LINK,
-  TOKENOMICS_LINK,
-  TRADING_LINK,
-  WATERCOOLER_LINK,
-  YOUTUBE_LINK,
-} from "@/configs/app.config";
-</script>
-
-<style lang="scss" scoped>
-.footer {
-  &__logo {
-    display: block;
-    width: 191px;
-    height: 40px;
-    margin-bottom: 19px;
-
-    @include slg {
-      width: 117px;
-      height: 24px;
-      margin-bottom: 26px;
-    }
-
-    @include md {
-      margin-bottom: 0;
-      width: 144px;
-      height: 30px;
-      flex-shrink: 0;
-    }
-
-    @include sm {
-      margin-bottom: 24px;
-      width: 117px;
-      height: 24px;
-    }
-
-    svg {
-      width: 100%;
-      height: auto;
-    }
-  }
-
-  &__row {
-    display: flex;
-    gap: 48px;
-
-    @include md {
-      display: block;
-    }
-  }
-
-  &__column {
-    @media screen and (max-width: 660px) {
-      margin-bottom: 24px;
-      width: 50%;
-
-      &:first-child {
-        width: 100%;
-
-        .footer__column-list {
-          display: flex;
-          flex-wrap: wrap;
-        }
-
-        .footer__column-link {
-          width: 50%;
-        }
-      }
-
-      &:nth-last-child(1),
-      &:nth-last-child(2) {
-        margin-bottom: 0;
-      }
-    }
-
-    @include xsm {
-      &:first-child {
-        width: 100% !important;
-
-        .footer__column-link {
-          width: 125px;
-        }
-
-        .footer__column-list {
-          justify-content: space-between;
-        }
-      }
-
-      width: 125px !important;
-    }
-
-    &_about {
-      flex-shrink: 0;
-      max-width: 255px;
-      font-size: 1.125em;
-
-      @include slg {
-        font-size: 0.875em;
-      }
-
-      @include md {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        max-width: 100%;
-        width: 100%;
-        gap: 24px;
-        margin-bottom: 35px;
-        font-size: 0.75em;
-      }
-
-      @include sm {
-        display: block;
-        margin-bottom: 24px !important;
-        font-size: 0.875em;
-      }
-    }
-
-    &:last-child {
-      width: auto;
-
-      @media screen and (max-width: 660px) {
-        width: 50%;
-      }
-    }
-  }
-
-  &__column-link {
-    display: block;
-    line-height: 150%;
-    margin-bottom: 14px;
-    font-size: 1.125em;
-
-    @include slg {
-      font-size: 1em;
-    }
-
-    @include sm {
-      font-size: 0.875em;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__columns-row {
-    display: flex;
-    gap: 82px;
-
-    @include lg {
-      gap: 52px;
-    }
-
-    @include slg {
-      gap: 32px;
-    }
-
-    @include md {
-      justify-content: space-between;
-    }
-
-    @media screen and (max-width: 660px) {
-      gap: 0;
-      flex-wrap: wrap;
-    }
-  }
-
-  &__description {
-    line-height: 150%;
-    margin-bottom: 19px;
-
-    @include slg {
-      margin-bottom: 26px;
-    }
-
-    @include md {
-      margin-bottom: 0;
-      max-width: 415px;
-      margin-right: auto;
-    }
-
-    @include sm {
-      margin-bottom: 24px;
-      max-width: 100%;
-    }
-  }
-
-  &__column-title {
-    color: $gray;
-    margin-bottom: 32px;
-    line-height: 150%;
-    font-size: 1.125em;
-
-    @include slg {
-      margin-bottom: 24px;
-    }
-
-    @include md {
-      margin-bottom: 16px;
-    }
-
-    @include sm {
-      font-size: 0.875em;
-    }
-  }
-
-  &__bottom {
-    display: flex;
-    justify-content: space-between;
-    padding: 36px 0;
-    margin-top: 36px;
-    border-top: 2px solid $alphaGray;
-
-    @include md {
-      padding: 24px 0;
-      margin-top: 24px;
-    }
-
-    a {
-      transition: 0.3s ease;
-
-      &:hover {
-        color: #7ca8ff;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Global/LineLink.vue b/components/Global/LineLink.vue
deleted file mode 100644
index f8878f9..0000000
--- a/components/Global/LineLink.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <a :href="link" class="line-link" target="_blank">
-    <span class="line-link__text paragraph_large">{{ text }}</span>
-    <LinkIcon class="line-link__icon" />
-    <div class="line-link__underline" />
-  </a>
-</template>
-<script setup>
-import LinkIcon from "@/assets/img/link.svg";
-
-const props = defineProps({
-  link: {
-    type: String,
-    required: true,
-  },
-  text: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-<style lang="scss" scoped>
-.line-link {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding-bottom: 32px;
-
-  @include sm {
-    padding-bottom: 24px;
-  }
-
-  &:hover {
-    .line-link__underline {
-      &:before {
-        width: 100%;
-      }
-    }
-  }
-
-  &__icon {
-    width: 32px;
-    height: 32px;
-
-    @include sm {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &__underline {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-    background: rgba(255, 255, 255, 0.2);
-    transition: 0.6s ease;
-
-    &:before {
-      position: absolute;
-      content: "";
-      inset: 0;
-      width: 0%;
-      height: 100%;
-      transition: width 0.6s ease;
-      background: linear-gradient(
-        90deg,
-        #b000fd 0.01%,
-        #b000fd 0.02%,
-        #30daff 97.96%
-      );
-    }
-  }
-}
-</style>
diff --git a/components/Global/RadialGradient.vue b/components/Global/RadialGradient.vue
deleted file mode 100644
index 37b1507..0000000
--- a/components/Global/RadialGradient.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div class="radial-gradient" />
-</template>
-<style lang="scss">
-.radial-gradient {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.5;
-  background: radial-gradient(
-    50% 50% at 50% 50%,
-    rgba(36, 173, 124, 0.5) 0%,
-    rgba(24, 69, 185, 0) 100%
-  );
-  z-index: -1;
-}
-</style>
diff --git a/components/Global/Simple.vue b/components/Global/Simple.vue
deleted file mode 100644
index bdb41d7..0000000
--- a/components/Global/Simple.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-  <div class="block simple">
-    <div class="simple__text">
-      <p class="simple__item-title margin_medium">
-        {{ item.title }}
-      </p>
-      <p class="simple__item-text paragraph paragraph_medium">
-        {{ item.text }}
-      </p>
-    </div>
-    <div class="simple__image-wrapper">
-      <div class="simple__image">
-        <img :src="item.img" />
-        <GlobalRadialGradient class="simple__image-gradient" />
-      </div>
-    </div>
-    <!-- <component :is='item.img' /> -->
-  </div>
-</template>
-<script setup lang="ts">
-defineProps<{
-  item: {
-    title: string;
-    text: string;
-    img: string;
-  };
-}>();
-</script>
-<style lang="scss" scoped>
-.simple {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  gap: 75px;
-
-  @include lg {
-    gap: 50px;
-  }
-
-  @include sm {
-    flex-direction: column-reverse;
-    gap: 0;
-  }
-
-  &__text {
-    width: 600px;
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include md {
-      width: 350px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__item-title {
-    position: relative;
-    z-index: 2;
-    font-family: "WhyteInktrap";
-    font-weight: 500;
-    font-size: $tDef;
-    line-height: 110%;
-    color: #ffffff;
-
-    @include slg {
-      font-size: $sm_tMd;
-    }
-
-    @include sm {
-      font-size: 1.688em;
-    }
-  }
-
-  &__item-text {
-    position: relative;
-    z-index: 2;
-  }
-
-  &__image-wrapper {
-    position: relative;
-    width: 100%;
-  }
-
-  &__image {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include sm {
-      position: relative;
-      text-align: center;
-      margin-bottom: 40px;
-    }
-
-    img {
-      width: 100%;
-      max-height: 420px;
-      z-index: 2;
-      object-fit: contain;
-
-      @include lg {
-        max-height: 390px;
-      }
-
-      @include slg {
-        max-height: 350px;
-      }
-
-      @include md {
-        max-height: 310px;
-      }
-
-      @include sm {
-        position: relative;
-        height: 100%;
-        max-width: 80%;
-        max-height: 300px;
-        width: auto;
-      }
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 900px;
-    height: 900px;
-
-    @include lg {
-      width: 850px;
-      height: 850px;
-    }
-
-    @include slg {
-      width: 800px;
-      height: 800px;
-    }
-
-    @include md {
-      width: 600px;
-      height: 600px;
-    }
-  }
-}
-</style>
diff --git a/components/Header/Menu.vue b/components/Header/Menu.vue
deleted file mode 100644
index 87adc4d..0000000
--- a/components/Header/Menu.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <Transition name="menu-toggle">
-    <div v-show="active" class="menu">
-      <nav class="menu__nav">
-        <NuxtLink class="text-link paragraph_smll">
-          <span class="gradient gradient_one">Wallet Address </span>
-          <p>xxxxxxxx...</p></NuxtLink
-        >
-
-        <NuxtLink class="text-link paragraph_smll">
-          <span class="gradient gradient_two">Paseo Balance </span>
-          <p>0.0000000 PAS</p></NuxtLink
-        >
-
-        <NuxtLink class="text-link paragraph_smll">
-          <span class="gradient gradient_one">Incognitee Balance </span>
-          <p>0.0000000 PAS</p></NuxtLink
-        >
-
-        <NuxtLink class="text-link paragraph_smll">
-          <span class="gradient gradient_two">Incognitee Status </span>
-          <p><UBadge label="Online" /></p
-        ></NuxtLink>
-      </nav>
-    </div>
-  </Transition>
-</template>
-<script setup>
-const props = defineProps({
-  active: {
-    type: Boolean,
-    required: true,
-    default: false,
-  },
-  clickHandler: {
-    type: Function,
-    required: true,
-  },
-});
-</script>
-<style lang="scss" scoped>
-.menu {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  background: $darkBlue;
-  z-index: 4;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 64px;
-
-  &__button {
-    font-size: $pDef;
-  }
-
-  &__nav {
-    a {
-      display: block;
-      text-align: center;
-      font-size: $pDef;
-      margin-bottom: 24px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Header/Menu.vue.bkp b/components/Header/Menu.vue.bkp
deleted file mode 100644
index 4eb4a6e..0000000
--- a/components/Header/Menu.vue.bkp
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
- <Transition name="menu-toggle">
-    <div v-show="active" class="menu">
-      <nav class="menu__nav">
-        
-      </nav>
- 
-    </div>
-  </Transition>
-</template>
-<script setup>
-const props = defineProps({
-  active: {
-    type: Boolean,
-    required: true,
-    default: false
-  },
-  clickHandler: {
-    type: Function,
-    required: true
-  }
-})
-</script>
-<style lang="scss" scoped>
-.menu {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  background: $darkBlue;
-  z-index: 4;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 64px;
-
-  &__button {
-    font-size: $pDef;
-  }
-
-  &__nav {
-    a {
-      display: block;
-      text-align: center;
-      font-size: $pDef;
-      margin-bottom: 24px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Header/index.vue b/components/Header/index.vue
deleted file mode 100644
index 021ea2c..0000000
--- a/components/Header/index.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<template>
-  <header class="header" :class="{ 'header_no-bg': active }">
-    <div class="container">
-      <NuxtLink to="/" class="header__logo">
-        <Logo />
-      </NuxtLink>
-      <div class="header__nav grid grid-cols-4 gap-8 content-start">
-        <NuxtLink class="text-link paragraph_smll">
-          <span class="gradient gradient_one">Wallet Address</span>
-          <p>{{ accountStore.getShortAddress }}</p>
-        </NuxtLink>
-
-        <NuxtLink class="text-link paragraph_smll">
-          <span class="gradient gradient_two">Paseo Balance</span>
-          <div
-            v-if="
-              isFetchingPaseoBalance && accountStore.getShortAddress != 'none'
-            "
-            class="spinner"
-          />
-          <div v-else>{{ accountStore.getPaseoHumanBalance }}</div>
-        </NuxtLink>
-
-        <NuxtLink class="text-link paragraph_smll">
-          <span class="gradient gradient_one">Incognitee Balance</span>
-          <div
-            v-if="
-              isFetchingIncogniteeBalance &&
-              accountStore.getShortAddress != 'none'
-            "
-            class="spinner"
-          />
-          <div v-else>{{ accountStore.getIncogniteeHumanBalance }}</div>
-        </NuxtLink>
-
-        <NuxtLink
-          v-if="width > breakpoints.slg"
-          class="text-link paragraph_smll"
-        >
-          <span class="gradient gradient_two">Incognitee Status</span>
-          <template v-if="incogniteeStore.apiReady">
-            <p>
-              <UBadge label="Online" />
-            </p>
-          </template>
-          <template v-else>
-            <p>
-              <UBadge label="checking..." color="orange" />
-            </p>
-          </template>
-        </NuxtLink>
-      </div>
-      <div v-if="width > breakpoints.slg" class="header__nav-right">
-        <Socials />
-
-        <button
-          v-if="width <= breakpoints.slg"
-          class="header__burger"
-          :class="{
-            active: active,
-          }"
-          type="button"
-          @click="toggleMenu()"
-        >
-          <div class="header__burger-line" />
-          <div class="header__burger-line" />
-          <div class="header__burger-line" />
-        </button>
-      </div>
-    </div>
-  </header>
-  <Menu
-    v-if="width <= breakpoints.slg"
-    :active="active"
-    :click-handler="toggleMenu"
-  />
-</template>
-
-<script setup lang="ts">
-import { useNuxtApp, useRoute } from "#imports";
-import Menu from "@/components/Header/Menu.vue";
-import Logo from "@/components/Logo";
-import Socials from "@/components/Socials";
-import { breakpoints } from "@/configs/app.config";
-import { useAccount } from "@/store/account.ts";
-import { useIncognitee } from "@/store/incognitee.ts";
-import { ApiPromise, WsProvider } from "@polkadot/api";
-import { useInterval, useWindowScroll, useWindowSize } from "@vueuse/core";
-import { onMounted, ref, watch } from "vue";
-
-const pollCounter = useInterval(2000);
-
-const accountStore = useAccount();
-const incogniteeStore = useIncognitee();
-
-const active = ref(false);
-const isFetchingPaseoBalance = ref(true);
-const isFetchingIncogniteeBalance = ref(true);
-
-const { width } = useWindowSize();
-const { y } = useWindowScroll();
-
-const { $lockScroll } = useNuxtApp();
-
-const route = useRoute();
-
-const toggleMenu = () => {
-  active.value = !active.value;
-  $lockScroll(active.value);
-};
-
-watch(route, () => {
-  active.value = false;
-  $lockScroll(false);
-});
-
-watch(pollCounter, async () => {
-  console.log("ping: " + pollCounter.value);
-  await fetchIncogniteeBalance();
-});
-
-const fetchIncogniteeBalance = async () => {
-  if (!incogniteeStore.apiReady) return;
-  if (!accountStore.account) return;
-  incogniteeStore.api
-    .getBalance(accountStore.account, incogniteeStore.shard)
-    .then((balance) => {
-      console.log(
-        `current account balance L2: ${balance} on shard ${incogniteeStore.shard}`,
-      );
-      accountStore.setIncogniteeBalance(balance);
-      isFetchingIncogniteeBalance.value = false;
-    });
-};
-
-let api: ApiPromise | null = null;
-
-watch(accountStore, async () => {
-  //todo! only reinitilize if account changes
-  if (accountStore.getAddress === "none") {
-    console.log("skipping api init. no address");
-    return;
-  }
-  if (api?.isReady) {
-    console.log(
-      "skipping api init. I seems the Paseo api is already subscribed to balance changes",
-    );
-    return;
-  }
-
-  console.log("trying to init api");
-  const wsProvider = new WsProvider("wss://rpc.ibp.network/paseo");
-  api = await ApiPromise.create({ provider: wsProvider });
-  api.query.system.account(
-    accountStore.account.address,
-    ({ data: { free: currentFree } }) => {
-      console.log("paseo balance:" + currentFree);
-      accountStore.paseoBalance = Number(currentFree);
-      isFetchingPaseoBalance.value = false;
-    },
-  );
-  // for quicker responsiveness we dont wait until the next regular poll, but trigger the balance fetch here
-  fetchIncogniteeBalance().then(() =>
-    console.log("fetched incognitee balance"),
-  );
-});
-
-onMounted(() => {
-  incogniteeStore.initializeApi();
-});
-</script>
-
-<style lang="scss">
-.header__button {
-  display: block;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-radius: 9px;
-  padding: 10px 16px;
-}
-
-.gradient {
-  display: inline-block;
-
-  &_one {
-    background: linear-gradient(90deg, #24ad7c -12.5%, #1845b9 41%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  &_two {
-    background: linear-gradient(90deg, #1845b9, #24ad7c);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.header {
-  position: fixed;
-  background: linear-gradient(180deg, #0a0a0f 0%, rgba(10, 10, 15, 0) 100%);
-  backdrop-filter: blur(4px);
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 25px 0;
-  z-index: 10;
-  transition: 0.3s ease;
-
-  @include slg {
-    padding: 21px 0;
-  }
-
-  .container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__logo {
-    @include xsm {
-      width: 118px;
-    }
-
-    svg {
-      width: 100%;
-    }
-
-    &:hover {
-      svg {
-        &.blue-hover {
-          background: #5b92ff;
-        }
-      }
-    }
-  }
-
-  &__nav {
-    @include slg {
-      display: none;
-    }
-
-    a {
-      font-size: 0.875em;
-
-      @include lg {
-        margin-left: 18px;
-      }
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
-    a.router-link-active {
-      color: #5b92ff;
-    }
-  }
-
-  &__nav-right {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-  }
-
-  &__burger {
-    width: 17px;
-    cursor: pointer;
-    background: 0;
-    border: 0;
-    padding: 0;
-    flex-shrink: 0;
-
-    &.active {
-      .header__burger-line {
-        &:nth-child(1) {
-          transform: rotate(45deg);
-          top: 3px;
-        }
-
-        &:nth-child(2) {
-          display: none;
-        }
-
-        &:nth-child(3) {
-          transform: rotate(-45deg);
-          bottom: 3px;
-        }
-      }
-    }
-  }
-
-  &__burger-line {
-    position: relative;
-    width: 100%;
-    height: 2px;
-    margin-bottom: 4px;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 40px;
-    /* transition: .3s ease; */
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &_no-bg {
-    background: rgba(81, 81, 81, 0) !important;
-  }
-}
-
-.header__nav {
-  display: flex;
-  flex-direction: row; // default to horizontal layout
-
-  @media screen and (max-width: 660px) {
-    flex-direction: column; // switch to vertical layout on mobile
-  }
-}
-
-.spinner {
-  border: 2px solid #f3f3f3; /* Light grey */
-  border-top: 2px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 1em; /* Adjust the size here */
-  height: 1em; /* Adjust the size here */
-  animation: spin 2s linear infinite;
-  vertical-align: middle; /* Align with the text */
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/components/Header/index.vue.bkp b/components/Header/index.vue.bkp
deleted file mode 100644
index 5fca5e4..0000000
--- a/components/Header/index.vue.bkp
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-<header class="header" :class="{ 'header_no-bg': active }">
-    <div class="container">
-      <NuxtLink to="/" class="header__logo">
-        <Logo />
-      </NuxtLink>
-      <div v-if="width > breakpoints.slg" class="header__nav">
-
-      </div>
-      <div class="header__nav-right">
-        <NuxtLink to="/products" class="text-link paragraph_smll">
-          <span class="gradient gradient_one">Wallet Address
-        </span><br>xxxxxxxx...</NuxtLink>
-        <NuxtLink to="/usecases" class="text-link paragraph_smll">
-          <span class="gradient gradient_two">Paseo Balance</span><br>0.0000000 ROC
-        </NuxtLink>
-        <NuxtLink to="/technology" class="text-link paragraph_smll"><span class="gradient gradient_one">Incognitee Balance</span><br>0.0000000 pROC</NuxtLink>
-        <NuxtLink to="/technology" class="text-link paragraph_smll"><span class="gradient gradient_two">Incognitee Status</span><br>
-          <UBadge label="Online" />
-  </NuxtLink>
-        <Socials />
-
-        <button v-if="width <= breakpoints.slg" class="header__burger" :class="{
-          active: active,
-        }" type="button" @click="toggleMenu()">
-          <div class="header__burger-line" />
-          <div class="header__burger-line" />
-          <div class="header__burger-line" />
-        </button>
-      </div>
-    </div>
-  </header>
-  <Menu v-if="width <= breakpoints.slg" :active="active" :clickHandler='toggleMenu' />
-</template>
-
-<script setup>
-// import Logo from '@/assets/img/logo.svg'
-import { useNuxtApp, useRoute } from '#imports'
-import Menu from '@/components/Header/Menu.vue'
-import Logo from '@/components/Logo'
-import Socials from '@/components/Socials'
-import { breakpoints } from '@/configs/app.config'
-import { useWindowScroll, useWindowSize } from '@vueuse/core'
-import { ref, watch } from 'vue'
-
-const active = ref(false)
-
-const { width } = useWindowSize()
-const { y } = useWindowScroll()
-
-const { $lockScroll } = useNuxtApp()
-
-const route = useRoute()
-
-const toggleMenu = () => {
-  active.value = !active.value
-  $lockScroll(active.value)
-}
-
-watch(
-  route,
-  () => {
-    active.value = false
-    $lockScroll(false)
-  },
-)
-</script>
-
-<style lang="scss">
-.header__button {
-  display: block;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-radius: 9px;
-  padding: 10px 16px;
-}
-.gradient {
-  display: inline-block;
-
-  &_one {
-    background: linear-gradient(90deg, #24ad7c -12.5%, #1845b9 41%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  &_two {
-    background: linear-gradient(90deg, #1845b9, #24ad7c);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.header {
-  position: fixed;
-  background: linear-gradient(180deg, #0a0a0f 0%, rgba(10, 10, 15, 0) 100%);
-  backdrop-filter: blur(4px);
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 25px 0;
-  z-index: 10;
-  transition: 0.3s ease;
-
-  @include slg {
-    padding: 21px 0;
-  }
-
-  .container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  &__logo {
-
-
-    @include xsm {
-      width: 118px;
-    }
-
-    svg {
-      width: 100%;
-    }
-
-    &:hover {
-      svg {
-        &.blue-hover {
-          background: #5B92FF;
-        }
-      }
-    }
-  }
-
-  &__nav {
-    @include slg {
-      display: none;
-    }
-
-    a {
-      font-size: 0.875em;
-      margin-left: 24px;
-
-      @include lg {
-        margin-left: 18px;
-      }
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
-    a.router-link-active {
-      color: #5B92FF;
-    }
-  }
-
-  &__nav-right {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-  }
-
-  &__burger {
-    width: 17px;
-    cursor: pointer;
-    background: 0;
-    border: 0;
-    padding: 0;
-    flex-shrink: 0;
-
-    &.active {
-      .header__burger-line {
-        &:nth-child(1) {
-          transform: rotate(45deg);
-          top: 3px;
-        }
-
-        &:nth-child(2) {
-          display: none;
-        }
-
-        &:nth-child(3) {
-          transform: rotate(-45deg);
-          bottom: 3px;
-        }
-      }
-    }
-  }
-
-  &__burger-line {
-    position: relative;
-    width: 100%;
-    height: 2px;
-    margin-bottom: 4px;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 40px;
-    /* transition: .3s ease; */
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &_no-bg {
-    background: rgba(81, 81, 81, 0) !important;
-  }
-}
-</style>
diff --git a/components/Index/Community.vue b/components/Index/Community.vue
deleted file mode 100644
index 0b09ed9..0000000
--- a/components/Index/Community.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <section id="community">
-    <div class="block community">
-      <div class="container blur-gradient row jcsb community__row">
-        <div class="column column_medium community__column">
-          <h2 class="title title_h2 community__title">
-            Join our developer community <br />
-            and start your Integritee journey
-          </h2>
-          <div class="community__text">
-            <p class="paragraph paragraph_medium margin_large">
-              Developers are building amazing DApps that utilize our expanding
-              suite of tools. Join us on Discord where we’re building a
-              community of forward thinking devs like you.
-            </p>
-          </div>
-          <a :href="DISCORD_LINK" target="_blank" class="btn btn_gradient"
-            >Join Discord</a
-          >
-        </div>
-        <img class="community__image" src="/img/index/community/image.jpg" />
-      </div>
-    </div>
-  </section>
-</template>
-<script setup lang="ts">
-import { DISCORD_LINK } from "@/configs/app.config";
-</script>
-<style lang="scss">
-.community {
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-
-  &__column {
-    @include slg {
-      width: 480px;
-    }
-
-    @include md {
-      width: 420px;
-    }
-
-    @include sm {
-      width: 100%;
-      order: 2;
-    }
-  }
-
-  &__row {
-    @include sm {
-      flex-wrap: wrap;
-    }
-  }
-
-  &__image {
-    display: block;
-    width: 580px;
-    height: 530px;
-    border: 1px dashed #000;
-    object-fit: cover;
-    border-radius: 24px;
-
-    @include lg {
-      width: 505px;
-      height: 462px;
-    }
-
-    @include slg {
-      width: 433px;
-      height: 394px;
-    }
-
-    @include md {
-      width: 339px;
-      height: 310px;
-    }
-
-    @include sm {
-      max-width: 540px;
-      height: auto;
-      width: 100%;
-      margin-bottom: 24px;
-      order: 1;
-    }
-  }
-}
-</style>
diff --git a/components/Index/Delegator.vue b/components/Index/Delegator.vue
deleted file mode 100644
index b6cf9ec..0000000
--- a/components/Index/Delegator.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <section id="delegator">
-    <div class="block delegator">
-      <div class="container">
-        <div class="column column_medium delegator__column">
-          <h2 class="title title_h2 delegator__title">Become a delegator</h2>
-          <p
-            class="paragraph paragraph_medium margin_large delegator__description"
-          >
-            Earn from locking your TEER: Validators receive transaction fees and
-            can share them with TEER holders via Delegation.<br /><br />
-            Join the Delegator Program: TEER holders can delegate their TEER
-            tokens to existing Validators to help securing Incognitee’s
-            backbone.
-          </p>
-          <NuxtLink
-            to="https://docs.incognitee.io
-/4.-want-to-join-or-support-incognitee/4.2-become-a-delegator"
-            target="blank"
-            class="btn btn_gradient"
-            >Become a delegator</NuxtLink
-          >
-        </div>
-        <div class="delegator__image-wrapper">
-          <!-- <img src="/img/index/delegator/polygons.svg" class="delegator__image" alt="Polygons" /> -->
-          <img
-            src="/img/index/delagator/become-a-delegator-picture.svg"
-            class="delegator__image"
-            alt="Polygons"
-          />
-          <GlobalRadialGradient class="work__image-gradient" />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup></script>
-<style lang="scss">
-.delegator {
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 653px;
-    height: 520px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Index/Hunter.vue b/components/Index/Hunter.vue
deleted file mode 100644
index ec799a8..0000000
--- a/components/Index/Hunter.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <section id="hunter">
-    <div class="block hunter">
-      <div class="container">
-        <div class="column column_medium hunter__column">
-          <h2 class="title title_h2 hunter__title">Are you a bounty hunter?</h2>
-          <p
-            class="paragraph paragraph_medium margin_large hunter__description"
-          >
-            We want to make our platform as secure as possible, that's why we
-            will launch a bug bounty to attract the best talents to battle test
-            our solution.
-          </p>
-          <NuxtLink
-            to="https://docs.incognitee.io
-/4.-want-to-join-or-support-incognitee/4.4-become-a-bug-hunter"
-            target="blank"
-            class="btn btn_gradient"
-            >Start Hunting</NuxtLink
-          >
-        </div>
-        <div class="hunter__image-wrapper">
-          <!-- <img src="/img/index/hunter/polygons.svg" class="hunter__image" alt="Polygons" /> -->
-          <img
-            src="/img/index/hunter/bounty-hunter-picture.svg"
-            class="hunter__image"
-            alt="Polygons"
-          />
-          <GlobalRadialGradient class="work__image-gradient" />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup></script>
-<style lang="scss">
-.hunter {
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 653px;
-    height: 520px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Index/Main.vue b/components/Index/Main.vue
deleted file mode 100644
index 52d390e..0000000
--- a/components/Index/Main.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <section id="main">
-    <div class="block main">
-      <div class="container">
-        <div class="column column_large main__column">
-          <h1 class="title title_hero main__title margin_medium">
-            <span class="gradient gradient_one">Welcome to</span> our<br />
-            Incognitee <span class="gradient gradient_two"> Beta</span> <br />
-            <span class="gradient gradient_one">Test</span> Campaign
-          </h1>
-          <p class="paragraph paragraph_medium main__description margin_large">
-            Integritee ran a test campaign for Incognitee from May 7th to 21st
-            2024. The campaign is over and the
-            <NuxtLink
-              to="https://x.com/integri_t_e_e/status/1795431400469835777"
-              class="color_blue"
-              >winners have been announced on X</NuxtLink
-            >
-          </p>
-          <p class="color_blue">
-            <b
-              >please stay tuned while we prepare a full wallet experience for
-              you here on this page</b
-            >
-          </p>
-
-          <p class="mt-3">
-            for your reference, we keep the content of our past campaign
-            available until we launch the wallet beta
-          </p>
-
-          <p
-            class="paragraph paragraph_medium main__description margin_large mt-8"
-          >
-            <a href="https://incognitee.io/"> Incognitee</a> is a fast and
-            scalable privacy enhancement for
-            <a href="https://polkadot.network">Polkadot</a>, and we are
-            approaching production readiness. Help us testing and do some
-            private token transfers to win a prize! You are going to obtain free
-            PAS tokens (Polkadot Testnet Tokens) and convert them to private
-            Incognitee Tokens - a process we call token shielding. Afterwards
-            you can transfer them to a friend privately via invite link or
-            convert them back to PAS tokens without disclosing any transfer
-            history - cool isn't it?
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup lang="ts"></script>
-<style lang="scss" scoped>
-.main {
-  padding-top: 90px;
-
-  @include xsm {
-    padding-top: 70px;
-  }
-
-  .container {
-    @include sm {
-      display: flex;
-    }
-  }
-
-  .container {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__title {
-    line-height: 110%;
-  }
-
-  &__description {
-    @include md {
-      br {
-        display: none;
-      }
-    }
-  }
-
-  .gradient {
-    display: inline-block;
-
-    &_one {
-      background: linear-gradient(90deg, #24ad7c -12.5%, #1845b9 41%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    &_two {
-      background: linear-gradient(90deg, #1845b9, #24ad7c);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  }
-
-  &__scheme {
-    position: absolute;
-    right: 38px;
-    top: -5px;
-    width: 284px;
-
-    @include slg {
-      right: -380px;
-      top: -81px;
-      width: 741px;
-    }
-
-    @include md {
-      right: -411px;
-      top: -50px;
-    }
-
-    @include sm {
-      display: none;
-    }
-
-    @include xsm {
-      width: 550px;
-      left: 150px;
-    }
-  }
-
-  &__img-gradient {
-    width: 456px;
-    height: 456px;
-    left: -320px;
-    top: -30px;
-
-    @include slg {
-      width: 407px;
-      height: 407px;
-      left: -400px;
-      top: -70px;
-    }
-
-    @include md {
-      left: -370px;
-      top: -40px;
-    }
-
-    @include sm {
-      left: 20px;
-    }
-  }
-
-  &__column {
-    @include lg {
-      width: 730px;
-    }
-
-    @include slg {
-      width: 600px;
-    }
-
-    @include md {
-      width: 440px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__img-wrapper {
-    position: relative;
-
-    @include sm {
-      display: none;
-    }
-
-    @include xsm {
-      height: 320px;
-    }
-  }
-}
-</style>
diff --git a/components/Index/News.vue b/components/Index/News.vue
deleted file mode 100644
index d788baa..0000000
--- a/components/Index/News.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <section id="news">
-    <div class="block news">
-      <div class="container">
-        <h2 class="title title_h2 news__title margin_large">
-          Network <NuxtLink to="/blog" class="color_blue">news</NuxtLink>
-        </h2>
-        <div class="row news__list">
-          <New
-            v-for="post in data"
-            :key="post.id"
-            :post="post"
-            class="news__item"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup lang="ts">
-import { useWpApi } from "@/api/wordpress";
-import New from "@/components/Blog/New.vue";
-
-const wpApi = useWpApi();
-
-const { data, error } = await wpApi.getPosts({
-  limit: 3,
-});
-</script>
-<style lang="scss">
-.news {
-  &__title {
-    a {
-      display: inline-block;
-    }
-  }
-
-  &__list {
-    gap: 20px;
-
-    @include md {
-      gap: 10px;
-    }
-
-    @include sm {
-      display: block;
-    }
-  }
-
-  &__item {
-    @include sm {
-      margin-bottom: 18px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Index/Partner.vue b/components/Index/Partner.vue
deleted file mode 100644
index 842affd..0000000
--- a/components/Index/Partner.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <section id="partner">
-    <div class="block partner">
-      <div class="container">
-        <div class="column column_medium partner__column">
-          <h2 class="title title_h2 partner__title">Become a partner</h2>
-          <p
-            class="paragraph paragraph_medium margin_large partner__description"
-          >
-            If you are a wallet provider, an exchange or an validator operator,
-            get in touch with us.
-          </p>
-          <NuxtLink
-            to="https://docs.incognitee.io
-/4.-want-to-join-or-support-incognitee/4.3-become-a-partner"
-            target="blank"
-            class="btn btn_gradient"
-            >Contact</NuxtLink
-          >
-        </div>
-        <div class="partner__image-wrapper">
-          <!-- <img src="/img/index/partner/polygons.svg" class="partner__image" alt="Polygons" /> -->
-          <img
-            src="/img/index/partner/become-a-partner-picture.svg"
-            class="partner__image"
-            alt="Polygons"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup></script>
-<style lang="scss">
-.partner {
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 950px;
-    height: 445px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Index/Prizes.vue b/components/Index/Prizes.vue
deleted file mode 100644
index 6fb39a9..0000000
--- a/components/Index/Prizes.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-  <section id="prizes">
-    <div class="block prizes">
-      <div class="container">
-        <div class="column column_medium prizes__column">
-          <h2 class="title title_h2 prizes__title">Prizes</h2>
-
-          <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8">
-            <img
-              src="/img/index/prizes/prize1.svg"
-              class="prize__image"
-              alt="Polygons"
-            />
-            <img
-              src="/img/index/prizes/prize2.svg"
-              class="prize__image"
-              alt="Polygons"
-            />
-            <img
-              src="/img/index/prizes/prize3.svg"
-              class="prize__image"
-              alt="Polygons"
-            />
-          </div>
-        </div>
-        <div class="prizes__image-wrapper">
-          <!-- <img src="/img/index/prizes/polygons.svg" class="prizes__image" alt="Polygons" /> -->
-          <img
-            src="/img/index/prizes/prizes.svg"
-            class="prizes__image"
-            alt="Polygons"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup></script>
-<style lang="scss">
-.prizes {
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 950px;
-    height: 445px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-
-.prize {
-  &__image {
-    justify-content: space-between;
-    padding-right: 20px;
-    width: 200px;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-}
-</style>
diff --git a/components/Index/Rules.vue b/components/Index/Rules.vue
deleted file mode 100644
index 6baf47d..0000000
--- a/components/Index/Rules.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-  <section id="partner">
-    <div class="block partner">
-      <div class="container">
-        <div class="column column_medium partner__column">
-          <h2 class="title title_h2 partner__title">Rules</h2>
-
-          <li>Every shielding event will give you 1 Point</li>
-          <li>Every unshield event will give you 2 Points</li>
-          <li>
-            Perform step 5 to be considered as a participant and get additional
-            5 points
-          </li>
-          <li>
-            Don’t post multiple times with the same X account. However, sending
-            us a message over simpleX and posting on nostr will give you
-            additional 5 points each
-          </li>
-          <li>
-            You can perform steps 2-4 repeatedly until you run out of funds
-          </li>
-          <li>
-            This campaign aims to test the limits of incognitee by generating
-            substantial traffic. Should the chain reach its limit and maybe even
-            become inoperable at any point, the campaign will conclude. Winners
-            will then be determined based on the data available up to that
-            moment.
-          </li>
-          <li>The top 3 participants will win a prize.</li>
-          <li>
-            Winners will be announced latest 2 weeks after the event via X
-          </li>
-          <div class="mt-10"></div>
-          <h2 class="title title_h2 partner__title">Info</h2>
-          <li>
-            Your invites to other people are invisible even to us, but you'll
-            get good karma for sure!
-          </li>
-          <li>
-            If you open up an invite friend link, make sure to check wether your
-            incognitee balance shows an available amount
-          </li>
-          <li>
-            Once exhausted, you can refund your Paseo balance every 24h using
-            the faucet in step 2
-          </li>
-          <li>
-            Don't close your browser tab without saving the link. Otherwise you
-            may lose access to your testing wallet. (This is a static webpage
-            and we store no cookies to protect your privacy)
-          </li>
-          <li>The event starts on the 7th May and ends 21st May</li>
-          <li>
-            Winners will be announced latest 2 weeks after the event via X.
-          </li>
-          <li>
-            If you encounter issues, please send a mail with a description to
-            <a href="mailto:hello@integritee.network"
-              >hello@integritee.network</a
-            >
-            or contact us via Discord
-          </li>
-        </div>
-        <div class="partner__image-wrapper">
-          <!-- <img src="/img/index/partner/polygons.svg" class="partner__image" alt="Polygons" /> -->
-          <img
-            src="/img/index/rules/rules.svg"
-            class="partner__image"
-            alt="Polygons"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup></script>
-<style lang="scss">
-.partner {
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 950px;
-    height: 445px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Index/Scalability.vue b/components/Index/Scalability.vue
deleted file mode 100644
index 948e577..0000000
--- a/components/Index/Scalability.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <section id="scalability">
-    <div class="block scalability">
-      <div class="container">
-        <div class="row scalability__row">
-          <div
-            class="column column_medium scalability__column scalability__column_left"
-          >
-            <h2 class="title title_h2 scalability__title">
-              Scalability <br />
-              and performance without sacrificing trust
-            </h2>
-            <p class="paragraph paragraph_medium margin_large">
-              Integritee utilizes the blockchain to create security and trust
-              without the computational compromises. Centralized approaches to
-              data-driven services tend to be fast and convenient, but involve
-              big compromises of user privacy and data security.
-            </p>
-            <NuxtLink to="/technology" class="btn btn_gradient"
-              >Learn more</NuxtLink
-            >
-          </div>
-          <div class="column scalability__column_icons">
-            <div class="scalability__item margin_large">
-              <div class="scalability__item-icon margin_small">
-                <Guard />
-              </div>
-              <h3 class="scalability__item-title title_sub margin_medium">
-                Privacy & security
-              </h3>
-              <p
-                class="paragraph paragraph_medium scalability__item-description"
-              >
-                The security and trust of the blockchain with the speed and
-                power of enterprise grade confidential computing hardware.
-              </p>
-            </div>
-            <div class="scalability__item">
-              <div class="scalability__item-icon margin_small">
-                <Speed />
-              </div>
-              <h3 class="scalability__item-title title_sub margin_medium">
-                Speed & scalabillity
-              </h3>
-              <p
-                class="paragraph paragraph_medium scalability__item-description"
-              >
-                The scalability of second-layer technology based on substrate
-                for building state of the art data-driven dApps and services.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup>
-import Guard from "@/assets/img/index/scalability/guard.svg";
-import Speed from "@/assets/img/index/scalability/speed.svg";
-</script>
-<style lang="scss">
-.scalability {
-  margin-bottom: 200px;
-
-  @include lg {
-    margin-bottom: 170px;
-  }
-
-  @include slg {
-    margin-bottom: 140px;
-  }
-
-  @include md {
-    margin-bottom: 100px;
-  }
-
-  &__item {
-    @include md {
-      margin-bottom: 48px;
-    }
-
-    @include sm {
-      margin-bottom: 32px;
-    }
-
-    @include xsm {
-      margin-bottom: 24px;
-    }
-  }
-
-  &__item-icon {
-    width: 64px;
-    height: 64px;
-
-    @include md {
-      width: 48px;
-      height: 48px;
-    }
-  }
-
-  &__item-title {
-    @include md {
-      font-size: $pLg;
-    }
-  }
-
-  &__row {
-    gap: 135px;
-
-    @include lg {
-      gap: 55px;
-    }
-
-    @include slg {
-      gap: 100px;
-    }
-
-    @include md {
-      gap: 52px;
-    }
-
-    @include sm {
-      display: block;
-    }
-  }
-
-  &__column_left {
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include md {
-      width: 420px;
-    }
-
-    @include sm {
-      width: 100%;
-      margin-bottom: 42px;
-    }
-  }
-}
-</style>
diff --git a/components/Index/Steps.vue b/components/Index/Steps.vue
deleted file mode 100644
index 2595d62..0000000
--- a/components/Index/Steps.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <div class="container flex flex-col">
-    <div class="">
-      <h2 class="title title_h2 partner__title text-left">Campaign</h2>
-    </div>
-    <div class="">
-      <UTabs v-model="currentTabIndex" :items="items" class="w-full">
-        <template #default="{ item, index, selected }">
-          <div
-            :class="{ 'text-gray-400': !selected }"
-            class="relative truncate"
-            @click="currentTabIndex = index"
-          >
-            <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
-            <span
-              v-if="selected"
-              class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400"
-            />
-          </div>
-        </template>
-      </UTabs>
-    </div>
-    <div class="tab-content mt-4">
-      <component
-        :is="items[currentTabIndex].component"
-        @change-tab="(i) => (currentTabIndex = i)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import CheckWalletTab from "~/components/CheckWalletTab.vue";
-import CreateWalletTab from "~/components/CreateWalletTab.vue";
-import InviteFriendTab from "~/components/InviteFriendTab.vue";
-import PublishonxTab from "~/components/PublishonxTab.vue";
-import UnshieldTab from "~/components/UnshieldTab.vue";
-
-export default {
-  components: {
-    CreateWalletTab,
-    CheckWalletTab,
-    InviteFriendTab,
-    UnshieldTab,
-    PublishonxTab,
-  },
-  data() {
-    return {
-      currentTabIndex: 0,
-      items: [
-        {
-          label: "Create",
-          component: CreateWalletTab,
-        },
-        {
-          label: "Shield",
-          component: CheckWalletTab,
-        },
-        {
-          label: "Invite",
-          component: InviteFriendTab,
-        },
-        {
-          label: "Unshield",
-          component: UnshieldTab,
-        },
-        {
-          label: "Share",
-          component: PublishonxTab,
-        },
-      ],
-    };
-  },
-  mounted() {
-    this.currentComponent = this.items[0].component;
-  },
-  methods: {
-    onTabChanged(tabIndex) {
-      this.currentComponent = this.items[tabIndex].component;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.steps {
-  .container {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 653px;
-    height: 520px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Index/Validator.vue b/components/Index/Validator.vue
deleted file mode 100644
index 19a396d..0000000
--- a/components/Index/Validator.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <section id="validator">
-    <div class="block validator">
-      <div class="container">
-        <div class="column column_medium validator__column">
-          <h2 class="title title_h2 validator__title">Become a validator</h2>
-          <p
-            class="paragraph paragraph_medium margin_large validator__description"
-          >
-            Earn from Transactions: Validators receive a proportional amount of
-            every transaction they validate, creating an opportunity for
-            continual rewards in line with Incognitee’s activity.<br /><br />
-            Join the Validator Program: Aspiring validators have to participate
-            in the Testnet phase to be eligible for the main net launch to
-            become a part of Incognitee’s backbone.
-          </p>
-          <NuxtLink
-            to="https://docs.incognitee.io
-/4.-want-to-join-or-support-incognitee/4.1-become-a-validator"
-            target="blank"
-            class="btn btn_gradient"
-            >Become a Validator</NuxtLink
-          >
-        </div>
-        <div class="validator__image-wrapper">
-          <!-- <img src="/img/index/validator/polygons.svg" class="validator__image" alt="Polygons" /> -->
-          <img
-            src="/img/index/validator/become-a-validator-picture.svg"
-            class="validator__image"
-            alt="Polygons"
-          />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup></script>
-<style lang="scss">
-.validator {
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 950px;
-    height: 445px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/Index/Work.vue b/components/Index/Work.vue
deleted file mode 100644
index b1ce125..0000000
--- a/components/Index/Work.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <section id="work">
-    <div class="block work">
-      <div class="container">
-        <div class="column column_medium work__column">
-          <h2 class="title title_h2 work__title">How does it work</h2>
-          <p class="paragraph paragraph_medium margin_large work__description">
-            Alice would like to transfer funds to Bob privately or participate
-            in on-chain Governance without revealing her pseudonym. She uses
-            Incognitee to obtain a privacy shield without traces back to her
-            account. Our TEE technology keeps sensitive data away from the chain
-            and provides full privacy without security concerns.
-          </p>
-        </div>
-        <div class="work__image-wrapper">
-          <!-- <img src="/img/index/work/polygons.svg" class="work__image" alt="Polygons" /> -->
-          <img
-            src="/img/index/work/how-does-it-work-picture.svg"
-            class="work__image"
-            alt="Polygons"
-          />
-          <GlobalRadialGradient class="work__image-gradient" />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup></script>
-<style lang="scss">
-.work {
-  .container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 50px;
-
-    @include md {
-      gap: 15px;
-    }
-
-    @include sm {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__image {
-    width: 100%;
-
-    @include sm {
-      width: 90%;
-    }
-  }
-
-  &__image-wrapper {
-    position: relative;
-
-    @include sm {
-      text-align: center;
-      margin-bottom: 70px;
-    }
-
-    @include xsm {
-      margin-bottom: 50px;
-    }
-  }
-
-  &__image-gradient {
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    width: 653px;
-    height: 520px;
-
-    @include slg {
-      height: 338px;
-      width: 676px;
-    }
-
-    @include md {
-      height: 309px;
-      width: 618px;
-    }
-
-    @include sm {
-      height: 330px;
-      width: 660px;
-    }
-
-    @include xsm {
-      height: 258px;
-      width: 516px;
-    }
-  }
-
-  &__column {
-    flex-shrink: 0;
-
-    @include lg {
-      width: 560px;
-    }
-
-    @include slg {
-      width: 480px;
-    }
-
-    @include slg {
-      width: 410px;
-    }
-
-    @include sm {
-      width: 100%;
-    }
-  }
-
-  &__title {
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/InviteFriendTab.vue b/components/InviteFriendTab.vue
deleted file mode 100644
index c7221ed..0000000
--- a/components/InviteFriendTab.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<!-- components/CreateWalletTab.vue -->
-<template>
-  <section id="steps">
-    <div class="block steps">
-      <div class="container">
-        <div class="">
-          <div class="text-4xl mt-10 mb-10">Invite a friend</div>
-
-          <div class="text-lg">
-            By clicking the ”Invite Friend” button, you perform a private
-            transfer of 10% of your available PAS from your Incognitee wallet to
-            another wallet with an invite link. You can share this with your
-            friends and let them participate.
-          </div>
-          <div>
-            <qrcode :value="accountStore.getAddress"></qrcode>
-          </div>
-          <div>
-            <qrcode-stream @detect="onDecode"></qrcode-stream>
-            <p>QRcode result: {{ result }}</p>
-          </div>
-          <div class="mt-10 mb-8">
-            <template
-              v-if="accountStore.incogniteeBalance > min_incognitee_balance"
-            >
-              <UButton class="btn btn_gradient" @click="inviteFriend">
-                Invite Friend
-              </UButton>
-              <div class="mt-4">{{ topStatus }}</div>
-              <template v-if="inviteUrl">
-                <div class="mt-10 mb-3">
-                  <p class="text-sm text-green-700">
-                    {{ inviteUrl }}
-                  </p>
-                </div>
-                <div class="flex space-x-4 mt-10">
-                  <a class="btn btn_gradient" @click="copyToClipboard">
-                    Copy Link
-                  </a>
-                </div>
-              </template>
-            </template>
-            <template
-              v-if="accountStore.incogniteeBalance <= min_incognitee_balance"
-            >
-              <div class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <ExclamationTriangleIcon
-                      class="h-5 w-5 text-yellow-400"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div class="ml-3">
-                    <p class="text-sm text-yellow-700">
-                      You don't have enough balance on Incognitee to invite
-                      someone. Please go back to step 2.
-                      {{ " " }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { ExclamationTriangleIcon } from "@heroicons/vue/20/solid";
-import { Keyring } from "@polkadot/keyring";
-import { formatBalance, u8aToHex } from "@polkadot/util";
-import { mnemonicGenerate, mnemonicToMiniSecret } from "@polkadot/util-crypto";
-import { ref } from "vue";
-import { QrcodeStream } from "vue-qrcode-reader";
-import Qrcode from "vue-qrcode";
-import { useAccount } from "@/store/account.ts";
-import { useIncognitee } from "@/store/incognitee.ts";
-
-const accountStore = useAccount();
-const incogniteeStore = useIncognitee();
-const topStatus = ref("");
-
-const inviteUrl = ref("");
-
-const min_incognitee_balance = 0.02 * 10 ** 10;
-
-formatBalance.setDefaults({
-  decimals: 10,
-  unit: "PAS",
-});
-
-const copyToClipboard = () => {
-  navigator.clipboard
-    .writeText(inviteUrl.value)
-    .then(() =>
-      alert("copied invite url to clipboard. please share it with your friend"),
-    );
-};
-const inviteFriend = () => {
-  console.log("creating wallet for your friend");
-  topStatus.value =
-    "⌛ sending 10% of your funds to a fresh wallet for your friend. you should see your incognitee balance decrease. make sure to copy the url below and share it with your friend";
-  const generatedMnemonic = mnemonicGenerate();
-  const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
-  const newAccount = localKeyring.addFromMnemonic(generatedMnemonic, {
-    name: "fresh",
-  });
-  const seed = mnemonicToMiniSecret(generatedMnemonic);
-  const privateKeyHex = u8aToHex(seed);
-  console.log(
-    `friend account ${newAccount.address} with private key in hex: ${privateKeyHex}`,
-  );
-  inviteUrl.value =
-    window.location.protocol +
-    "//" +
-    window.location.hostname +
-    (window.location.port ? `:${window.location.port}` : "") +
-    "/?seed=" +
-    privateKeyHex;
-
-  console.log("sending 10% of your funds to your friend's account");
-  const balance = accountStore.incogniteeBalance;
-  // todo! instead of sending 10% we should check fees explicitly and handle edge cases
-  const amount = Math.floor(0.1 * balance);
-  const signer = accountStore.account;
-  console.log(
-    `sending ${formatBalance(amount)} from ${signer.address} privately to ${newAccount.address}`,
-  );
-  incogniteeStore.api
-    .trustedBalanceTransfer(
-      signer,
-      incogniteeStore.shard,
-      incogniteeStore.fingerprint,
-      signer.address,
-      newAccount.address,
-      amount,
-    )
-    .then((hash) => {
-      console.log(`trustedOperationHash: ${hash}`);
-      topStatus.value =
-        "😀 Success: sent 10% of your funds to a fresh wallet for your friend. you should see your incognitee balance decrease. Please copy the url below and share it with your friend. It's all they need";
-    });
-};
-
-const result = ref("No QR code data yet");
-const onDecode = (decodeResult) => {
-  result.value = decodeResult[0].rawValue;
-};
-</script>
-
-<style>
-.button {
-  display: flex;
-  padding: 14px 24px;
-  align-items: flex-start;
-  gap: 10px;
-  border-radius: 12px;
-  border: 2px solid var(--Transparent-White-20, rgba(255, 255, 255, 0.2));
-  backdrop-filter: blur(30px);
-}
-
-.dynamic-width::after {
-  width: 500px;
-  border-radius: 8px;
-  border-color: #24ad7c;
-  height: 55px;
-}
-
-.dynamic-width {
-  width: 500px;
-  border-radius: 8px;
-  border-color: #24ad7c;
-  height: 55px;
-}
-
-.text-sm.text-green-700 {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-</style>
diff --git a/components/Logo/index.vue b/components/Logo/index.vue
deleted file mode 100644
index 2a46379..0000000
--- a/components/Logo/index.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <svg
-    width="330"
-    height="30"
-    viewBox="0 0 330 30"
-    fill="none"
-    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)"
-    />
-    <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"
-    />
-    <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"
-    />
-    <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"
-    />
-    <path
-      class="blue-hover show-on-hover"
-      d="M178.908 4.15178V0H183.245V4.15178H178.908ZM179.074 23.4709V6.79686H183.111V23.4709H179.074Z"
-      fill="white"
-    />
-    <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"
-    />
-    <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"
-    />
-    <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"
-    />
-    <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"
-    />
-    <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"
-    />
-    <path
-      class="blue-hover show-on-hover"
-      d="M72 23.4707V0.0332031H76.3369V23.4707H72Z"
-      fill="white"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear_431_37837"
-        x1="62"
-        y1="15"
-        x2="0"
-        y2="15"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.0913122" stop-color="#24AD7C" />
-        <stop offset="1" stop-color="#1845B9" />
-      </linearGradient>
-    </defs>
-  </svg>
-</template>
-<style lang="scss" scoped>
-svg,
-path {
-  transition: 0.3s ease;
-}
-
-svg {
-  &:hover {
-    .blue-hover {
-      fill: #24ad7c;
-    }
-
-    .show-on-hover {
-      fill-opacity: 1;
-    }
-  }
-}
-</style>
diff --git a/components/LogoIntegritee/index.vue b/components/LogoIntegritee/index.vue
deleted file mode 100644
index 1e8f5ba..0000000
--- a/components/LogoIntegritee/index.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <svg
-    width="144"
-    height="30"
-    viewBox="0 0 144 30"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      class="blue-hover"
-      d="M39 23.0178H42.5455V6.44773H39V23.0178Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M45.5413 23.0178H48.8536V17.4076C48.8536 16.153 48.8769 13.5965 51.1862 13.5965C52.3291 13.5965 53.0523 14.2593 53.0523 15.8216V23.0178H56.3645V15.1825C56.3645 12.555 54.965 10.827 52.3991 10.827C50.533 10.827 49.3668 12.2236 48.8303 13.9043H47.384C48.0138 12.9811 48.5037 11.9632 48.527 11.182H45.5413V23.0178Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M63.1449 23.0178H67.0404V20.3429H64.5212C63.798 20.3429 63.4948 20.0115 63.4948 19.3014V13.7386H66.5272V11.182H63.4948V7.46561H60.1825V11.182H57.7333V13.7386H60.1825V19.9168C60.1825 21.7632 61.2555 23.0178 63.1449 23.0178Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M73.6815 23.3965C77.2271 23.3965 78.6966 21.4555 79.3497 19.9405L76.3873 18.7806C75.8975 19.8931 75.1744 20.84 73.6815 20.84C72.2586 20.84 71.1623 19.9878 71.069 17.9047H79.3031C79.6296 13.9516 77.577 10.827 73.6582 10.827C70.2759 10.827 67.7567 13.3598 67.7567 17.0762C67.7567 20.9584 70.0893 23.3965 73.6815 23.3965ZM71.1856 15.5376C71.4189 14.0463 72.3286 13.2415 73.6582 13.2415C75.0577 13.2415 75.8975 14.07 76.0374 15.5376H71.1856Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M83.2758 27.6337H89.2706C91.5565 27.6337 93.3293 26.3555 93.3293 23.9646C93.3293 22.0473 91.7664 20.3902 89.2706 20.3902H84.2555C83.579 20.3902 83.0892 20.3902 83.0892 19.8695C83.0892 19.4907 83.3224 19.2303 83.9756 19.041C84.6753 19.3487 85.5384 19.4434 86.4015 19.4434C89.1306 19.4434 91.16 17.8811 91.4399 15.3245L91.4632 15.1115C91.6031 13.9043 91.7898 13.7386 92.5129 13.7386H93.7958V11.182H93.1893C92.0697 11.182 91.5332 11.5844 91.3466 13.3125H90.3435C89.7371 11.5844 87.9876 10.827 86.0749 10.827C83.3458 10.827 81.2231 12.6023 81.2231 15.0878C81.2231 16.2951 81.7363 16.9579 82.5527 17.5497V18.6149C81.5497 18.9463 80.6399 19.5617 80.6399 20.84C80.6399 21.6922 81.2231 22.213 81.9695 22.426V23.5149C81.1298 23.7753 80.36 24.4617 80.36 25.4086C80.36 26.5448 81.0598 27.6337 83.2758 27.6337ZM86.3781 17.2419C85.1419 17.2419 84.3254 16.4371 84.3254 15.2299C84.3254 13.9989 85.1419 13.0994 86.3781 13.0994C87.6144 13.0994 88.4308 13.9989 88.4308 15.2299C88.4308 16.4371 87.6144 17.2419 86.3781 17.2419ZM84.0689 25.1956C83.4391 25.1956 82.9026 24.8405 82.9026 24.083C82.9026 23.6096 83.2291 23.1835 83.509 23.0178H88.6174C89.7137 23.0178 90.0636 23.5386 90.0636 24.083C90.0636 24.7458 89.7137 25.1956 88.6174 25.1956H84.0689Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M95.2475 23.0178H98.5597V18.4729C98.5597 15.2772 99.6094 14.354 101.989 14.354C102.385 14.354 102.805 14.3777 103.272 14.425V10.969C103.085 10.9453 102.922 10.9453 102.572 10.9453C100.099 10.9453 99.1429 12.3419 98.6297 14.7801H97.2302C97.7667 13.8806 98.2332 12.413 98.2332 11.182H95.2475V23.0178Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M104.664 9.57237H108.186V6.40039H104.664V9.57237ZM104.78 23.0178H108.093V11.182H104.78V23.0178Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M114.959 23.0178H118.854V20.3429H116.335C115.612 20.3429 115.309 20.0115 115.309 19.3014V13.7386H118.341V11.182H115.309V7.46561H111.996V11.182H109.547V13.7386H111.996V19.9168C111.996 21.7632 113.069 23.0178 114.959 23.0178Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M125.495 23.3965C129.041 23.3965 130.51 21.4555 131.163 19.9405L128.201 18.7806C127.711 19.8931 126.988 20.84 125.495 20.84C124.072 20.84 122.976 19.9878 122.883 17.9047H131.117C131.443 13.9516 129.391 10.827 125.472 10.827C122.09 10.827 119.57 13.3598 119.57 17.0762C119.57 20.9584 121.903 23.3965 125.495 23.3965ZM122.999 15.5376C123.233 14.0463 124.142 13.2415 125.472 13.2415C126.871 13.2415 127.711 14.07 127.851 15.5376H122.999Z"
-      fill="white"
-    />
-    <path
-      class="blue-hover"
-      d="M138.332 23.3965C141.877 23.3965 143.347 21.4555 144 19.9405L141.038 18.7806C140.548 19.8931 139.825 20.84 138.332 20.84C136.909 20.84 135.813 19.9878 135.719 17.9047H143.953C144.28 13.9516 142.227 10.827 138.308 10.827C134.926 10.827 132.407 13.3598 132.407 17.0762C132.407 20.9584 134.74 23.3965 138.332 23.3965ZM135.836 15.5376C136.069 14.0463 136.979 13.2415 138.308 13.2415C139.708 13.2415 140.548 14.07 140.688 15.5376H135.836Z"
-      fill="white"
-    />
-    <path
-      d="M4.44434 11V24.6176C4.44396 24.7841 4.4885 24.9478 4.57343 25.0919C4.65836 25.2361 4.78073 25.3556 4.92797 25.4384C6.32268 26.2243 10.3873 28.5162 12.6222 29.7711C12.8089 29.8774 13.0983 30.0514 13.2327 29.9855C13.9796 29.6191 14.7114 29.1739 15.5087 28.7232C15.2996 28.5821 15.1913 28.4997 15.0718 28.4319C12.3621 26.8893 9.65289 25.3467 6.94438 23.8042V21.0561L9.1083 22.2818C11.8803 23.8488 14.6529 25.4133 17.4262 26.9754C17.6316 27.0909 17.9377 27.2759 18.0852 27.2063C18.8955 26.8161 19.6722 26.3562 20.5666 25.8615L6.93691 18.1028V15.3804C8.1169 16.0436 9.29132 16.7142 10.4713 17.3792C14.5229 19.6656 18.5738 21.9526 22.6241 24.2402C22.7455 24.3103 22.8838 24.3472 23.0246 24.3472C23.1654 24.3472 23.3037 24.3103 23.4251 24.2402C24.1308 23.8298 24.841 23.4255 25.5554 23.0274L22.6988 21.395L4.44434 11Z"
-      fill="url(#paint0_linear_392_6457)"
-    />
-    <path
-      d="M27.304 7.25435C25.4762 6.27499 23.6636 5.27415 21.8472 4.27871L18.9882 2.71316L16.4812 4.08036C19.2424 5.58157 22.0043 7.08038 24.7667 8.57683C24.9268 8.64208 25.0617 8.75249 25.1528 8.89294C25.2439 9.03339 25.2868 9.19703 25.2757 9.36141C25.2757 10.0382 25.2757 10.7149 25.2757 11.3916L25.253 11.3791C23.8736 10.6428 19.6069 8.4428 18.237 7.69219C16.8672 6.94159 15.4481 6.16595 14.0536 5.40284L11.3933 6.85403C15.0659 8.85028 21.4082 12.1708 25.2833 14.2689C25.2833 15.1649 25.2864 16.0585 25.2927 16.9497C25.2476 16.9188 25.2009 16.8902 25.1527 16.8639C19.8794 13.9919 11.7188 9.66698 6.4531 6.77715L8.85416 5.46719L11.5239 4.01242L13.9382 2.69352L16.4491 1.32274L14.3507 0.177191C14.1785 0.0842584 13.9079 -0.0461866 13.783 0.0163639C13.3725 0.214738 12.9714 0.427417 12.5627 0.649024L3.60543 5.52614L3.49577 5.57976L3.09462 5.80495L0.445685 7.24719C0.302456 7.3082 0.18291 7.40977 0.103574 7.53787C0.0242376 7.66596 -0.010926 7.81423 0.00296373 7.96206C0.0168391 12.6861 0.0199557 17.4096 0.0123873 22.1324C-0.00103709 22.2896 0.037378 22.4468 0.122421 22.5825C0.207464 22.7182 0.334914 22.8257 0.48726 22.8902C1.17598 23.2476 1.86094 23.6265 2.54399 24V20.8761C2.53155 20.7968 2.5252 20.7167 2.52505 20.6366C2.54776 16.7298 2.54589 12.8231 2.54778 8.91637L3.7758 8.24619C8.36792 10.7482 14.4151 13.9651 19.8189 16.8549L19.8605 16.8764C21.4915 17.7521 23.0638 18.5974 24.5207 19.3784L27.7373 21.1048C27.7373 16.7418 27.7499 12.3787 27.7751 8.01568C27.7886 7.85848 27.7506 7.70116 27.6663 7.56501C27.5821 7.42885 27.4556 7.32043 27.304 7.25435Z"
-      fill="url(#paint1_linear_392_6457)"
-    />
-
-    <path
-      class="show-on-hover"
-      fill-opacity="0"
-      d="M4.44446 11V24.6176C4.44409 24.7841 4.48862 24.9478 4.57355 25.0919C4.65848 25.2361 4.78085 25.3556 4.9281 25.4384C6.3228 26.2243 10.3874 28.5162 12.6223 29.7711C12.809 29.8774 13.0984 30.0514 13.2329 29.9855C13.9797 29.6191 14.7116 29.1739 15.5088 28.7232C15.2997 28.5821 15.1914 28.4997 15.0719 28.4319C12.3622 26.8893 9.65301 25.3467 6.9445 23.8042V21.0561L9.10842 22.2818C11.8804 23.8488 14.6531 25.4133 17.4263 26.9754C17.6317 27.0909 17.9378 27.2759 18.0853 27.2063C18.8957 26.8161 19.6724 26.3562 20.5667 25.8615L6.93703 18.1028V15.3804C8.11702 16.0436 9.29145 16.7142 10.4714 17.3792C14.523 19.6656 18.5739 21.9526 22.6242 24.2402C22.7456 24.3103 22.8839 24.3472 23.0247 24.3472C23.1655 24.3472 23.3038 24.3103 23.4252 24.2402C24.131 23.8298 24.8411 23.4255 25.5556 23.0274L22.6989 21.395L4.44446 11Z"
-      fill="#5B92FF"
-    />
-    <path
-      class="show-on-hover"
-      fill-opacity="0"
-      d="M27.304 7.25435C25.4762 6.27499 23.6636 5.27415 21.8472 4.27871L18.9882 2.71316L16.4812 4.08036C19.2424 5.58157 22.0043 7.08038 24.7667 8.57683C24.9268 8.64208 25.0617 8.75249 25.1528 8.89294C25.2439 9.03339 25.2868 9.19703 25.2757 9.36141C25.2757 10.0382 25.2757 10.7149 25.2757 11.3916L25.253 11.3791C23.8736 10.6428 19.6069 8.4428 18.237 7.69219C16.8672 6.94159 15.4481 6.16595 14.0536 5.40284L11.3933 6.85403C15.0659 8.85028 21.4082 12.1708 25.2833 14.2689C25.2833 15.1649 25.2864 16.0585 25.2927 16.9497C25.2476 16.9188 25.2009 16.8902 25.1527 16.8639C19.8794 13.9919 11.7188 9.66698 6.4531 6.77715L8.85416 5.46719L11.5239 4.01242L13.9382 2.69352L16.4491 1.32274L14.3507 0.177191C14.1785 0.0842584 13.9079 -0.0461866 13.783 0.0163639C13.3725 0.214738 12.9714 0.427417 12.5627 0.649024L3.60543 5.52614L3.49577 5.57976L3.09462 5.80495L0.445685 7.24719C0.302456 7.3082 0.18291 7.40977 0.103574 7.53787C0.0242376 7.66596 -0.010926 7.81423 0.00296373 7.96206C0.0168391 12.6861 0.0199557 17.4096 0.0123873 22.1324C-0.00103709 22.2896 0.037378 22.4468 0.122421 22.5825C0.207464 22.7182 0.334914 22.8257 0.48726 22.8902C1.17598 23.2476 1.86094 23.6265 2.54399 24V20.8761C2.53155 20.7968 2.5252 20.7167 2.52505 20.6366C2.54776 16.7298 2.54589 12.8231 2.54778 8.91637L3.7758 8.24619C8.36792 10.7482 14.4151 13.9651 19.8189 16.8549L19.8605 16.8764C21.4915 17.7521 23.0638 18.5974 24.5207 19.3784L27.7373 21.1048C27.7373 16.7418 27.7499 12.3787 27.7751 8.01568C27.7886 7.85848 27.7506 7.70116 27.6663 7.56501C27.5821 7.42885 27.4556 7.32043 27.304 7.25435Z"
-      fill="#5B92FF"
-    />
-
-    <defs>
-      <linearGradient
-        id="paint0_linear_392_6457"
-        x1="4.44659"
-        y1="20.5093"
-        x2="25.5462"
-        y2="20.5093"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#B000FD" />
-        <stop offset="0.0001" stop-color="#B000FD" />
-        <stop offset="0.98" stop-color="#30DAFF" />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear_392_6457"
-        x1="0.0029638"
-        y1="12.0118"
-        x2="27.7657"
-        y2="12.0118"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#B000FD" />
-        <stop offset="0.0001" stop-color="#B000FD" />
-        <stop offset="0.98" stop-color="#30DAFF" />
-      </linearGradient>
-    </defs>
-  </svg>
-</template>
-<style lang="scss" scoped>
-svg,
-path {
-  transition: 0.3s ease;
-}
-
-svg {
-  &:hover {
-    .blue-hover {
-      fill: #5b92ff;
-    }
-
-    .show-on-hover {
-      fill-opacity: 1;
-    }
-  }
-}
-</style>
diff --git a/components/PublishonxTab.vue b/components/PublishonxTab.vue
deleted file mode 100644
index 300d7a6..0000000
--- a/components/PublishonxTab.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <section id="steps">
-    <div class="block steps">
-      <div class="container">
-        <div class="">
-          <div class="text-4xl mt-10 mb-10">Tell the World - or Stay Anon</div>
-          <div class="text-lg">
-            <div v-if="accountStore.incogniteeBalance == 0">
-              <div class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <ExclamationTriangleIcon
-                      class="h-5 w-5 text-yellow-400"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div class="ml-3">
-                    <p class="text-sm text-yellow-700">
-                      You have no balance on Incognitee. Please go back to step
-                      2 to collect more points
-                      {{ " " }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else-if="accountStore.paseoBalance == 0">
-              <div class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <ExclamationTriangleIcon
-                      class="h-5 w-5 text-yellow-400"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div class="ml-3">
-                    <p class="text-sm text-yellow-700">
-                      You have no balance on Paseo. Please go back to step 2 to
-                      collect more points
-                      {{ " " }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="text-lg mt-4">
-            To be eligible for our prices, please either tweet or send us a
-            message over SimpleX. Tell the world about your successful test
-            using the button below. Make sure to include hashtag #incognitee and
-            your account
-            <div class="mt-5">
-              <template v-if="!isTwitterLinkDisabled">
-                <NuxtLink
-                  :to="twitterLinkUrl"
-                  target="blank"
-                  class="btn btn_gradient"
-                  >tweet about your success
-                </NuxtLink>
-              </template>
-              <template v-else>
-                <NuxtLink to="" target="blank" class="btn btn_border"
-                  >No account with a balance yet</NuxtLink
-                >
-              </template>
-            </div>
-            <div class="mt-5">
-              If X is too centralized for you, we also accept posts on Nostr
-              mentioning our profile and your test account
-            </div>
-            <div class="mt-5">
-              <template v-if="!isTwitterLinkDisabled">
-                <NuxtLink
-                  to="https://njump.me/npub1teerer7l6q4aweperlunlgrn9jd5y956cuxkrpju6tmj3qsulvast0weax"
-                  target="blank"
-                  class="btn btn_gradient"
-                  >post a note on nostr
-                </NuxtLink>
-                <div class="mt-5">
-                  <p class="text-sm text-green-700">
-                    I have successfully tested #incognitee private token
-                    transfers on https://try.incognitee.io by @integritee with
-                    my account {{ accountStore.getAddress }}
-                  </p>
-                </div>
-              </template>
-              <template v-else>
-                <NuxtLink to="" target="blank" class="btn btn_border">
-                  No account with a balance yet
-                </NuxtLink>
-              </template>
-            </div>
-
-            <div class="mt-5">
-              Or, if you prefer to stay anonymous, use one of the best private
-              messengers out there.
-            </div>
-            <div class="mt-5">
-              <template v-if="!isTwitterLinkDisabled">
-                <NuxtLink
-                  to="https://simplex.chat/contact#/?v=2-5&smp=smp%3A%2F%2F1OwYGt-yqOfe2IyVHhxz3ohqo3aCCMjtB-8wn4X_aoY%3D%40smp11.simplex.im%2FbXnLZ9ksJdcW3G_yRoo_0GZefWNjVzMI%23%2F%3Fv%3D1-2%26dh%3DMCowBQYDK2VuAyEAkEgKgkeLKpJi-1y8iW19tvIIRYL6CiObZbp7pWR-4UE%253D%26srv%3D6ioorbm6i3yxmuoezrhjk6f6qgkc4syabh7m3so74xunb5nzr4pwgfqd.onion"
-                  target="blank"
-                  class="btn btn_gradient"
-                  >send us a simpleX message
-                </NuxtLink>
-                <div class="mt-5">
-                  <p class="text-sm text-green-700">
-                    Dear Integritee team. I have participated in the incognitee
-                    beta campaign with account {{ accountStore.getAddress }}
-                  </p>
-                </div>
-              </template>
-              <template v-else>
-                <NuxtLink to="" target="blank" class="btn btn_border">
-                  No account with a balance yet
-                </NuxtLink>
-              </template>
-            </div>
-            <div class="mt-5">
-              In case of a win, we will reach out to you over the same channel
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useAccount } from "@/store/account.ts";
-import { ExclamationTriangleIcon } from "@heroicons/vue/20/solid";
-
-const accountStore = useAccount();
-
-const indexerLinkUrl = ref("");
-const twitterLinkUrl = ref("");
-const isIndexerLinkDisabled = ref(true);
-const isTwitterLinkDisabled = ref(true);
-
-const updateLinks = () => {
-  if (accountStore.account) {
-    const url = `https://paseo.subscan.io/account/${accountStore.getAddress}?tab=transfer`;
-    console.log("setting publish link to " + url);
-    indexerLinkUrl.value = url;
-    isIndexerLinkDisabled.value = false;
-
-    const incogniteeUrl = encodeURIComponent("https://try.incognitee.io");
-    const text = encodeURIComponent(
-      `Just aced the #incognitee private token transfers test with my account ${accountStore.getAddress}! Join me and explore the beta test campaign run by @integri_t_e_e. Let's shape the future of @polkadot #privacy together!`,
-    );
-    // todo! upload a tweet image using twitter API
-    twitterLinkUrl.value = `https://twitter.com/intent/tweet?url=${incogniteeUrl}&text=${text}`;
-    isTwitterLinkDisabled.value = false;
-  }
-};
-watch(accountStore, updateLinks);
-
-onMounted(updateLinks);
-</script>
-<style scoped>
-.text-sm.text-green-700 {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-</style>
diff --git a/components/Socials/Section.vue b/components/Socials/Section.vue
deleted file mode 100644
index 7498b71..0000000
--- a/components/Socials/Section.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-  <section id="socials">
-    <div class="block socials">
-      <div class="container">
-        <div class="row jcsb socials__row">
-          <div class="socials__text">
-            <h2 class="title title_h2 margin_medium socials__title">
-              Powered by Integritee
-            </h2>
-          </div>
-          <div class="column_medium socials__list">
-            <a :href="TELEGRAM_LINK" target="_blank" class="socials__list-item">
-              <Telegram class="socials__list-item-icon" />
-              <span class="socials__list-item-name">Telegram</span>
-            </a>
-            <a :href="DISCORD_LINK" target="_blank" class="socials__list-item">
-              <Discord class="socials__list-item-icon" />
-              <span class="socials__list-item-name">Discord</span>
-            </a>
-            <a :href="TWITTER_LINK" target="_blank" class="socials__list-item">
-              <Twitter class="socials__list-item-icon" />
-              <span class="socials__list-item-name paragraph_medium"
-                >Twitter</span
-              >
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-<script setup lang="ts">
-import Discord from "@/assets/img/socials/discord.svg";
-import Twitter from "@/assets/img/socials/twitter.svg";
-import Telegram from "@/assets/img/socials/telegram.svg";
-import {
-  TELEGRAM_LINK,
-  TWITTER_LINK,
-  DISCORD_LINK,
-} from "@/configs/app.config";
-</script>
-<style lang="scss">
-.socials__list-item-icon {
-  path {
-    fill-opacity: 1;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.socials {
-  &__title {
-    //line-height: unset;
-    @include md {
-      line-height: 110%;
-    }
-  }
-  &__description {
-    line-height: 150%;
-
-    @include slg {
-      br {
-        display: none;
-      }
-    }
-  }
-
-  &__row {
-    gap: 60px;
-
-    @include lg {
-      gap: 30px;
-    }
-
-    @include sm {
-      display: block;
-    }
-  }
-
-  &__text {
-    @include lg {
-      width: 560px;
-      flex-shrink: 0;
-    }
-
-    @include slg {
-      width: 450px;
-    }
-
-    @include md {
-      width: 340px;
-    }
-
-    @include sm {
-      width: 100%;
-      margin-bottom: 28px;
-    }
-  }
-
-  &__list {
-    display: flex;
-    gap: 20px;
-
-    @include lg {
-      flex: 1;
-      width: 100%;
-    }
-
-    @include md {
-      gap: 10px;
-    }
-  }
-
-  &__list-item-icon {
-    width: 48px;
-    height: 48px;
-    display: block;
-    margin-bottom: 24px;
-
-    @include sm {
-      width: 32px;
-      height: 32px;
-      margin-bottom: 8px;
-    }
-  }
-
-  &__list-item {
-    width: 33.33333%;
-    background: rgba(81, 81, 81, 0.24);
-    backdrop-filter: blur(12px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    border-radius: 24px;
-    transition: 0.3s ease;
-
-    @include lg {
-      height: 179px;
-    }
-
-    @include sm {
-      height: 150px;
-      font-size: $sm_pDef;
-      border-radius: 14px;
-    }
-
-    &:hover {
-      background: rgba(120, 120, 120, 0.24);
-    }
-  }
-}
-</style>
diff --git a/components/Socials/index.vue b/components/Socials/index.vue
deleted file mode 100644
index 07f35ae..0000000
--- a/components/Socials/index.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="socials">
-    <a :href="DISCORD_LINK" target="_blank">
-      <Discord />
-    </a>
-    <a :href="TWITTER_LINK" target="_blank">
-      <Twitter />
-    </a>
-    <a :href="TELEGRAM_LINK" target="_blank">
-      <Telegram />
-    </a>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Discord from "@/assets/img/socials/discord.svg";
-import Twitter from "@/assets/img/socials/twitter.svg";
-import Telegram from "@/assets/img/socials/telegram.svg";
-import {
-  TELEGRAM_LINK,
-  TWITTER_LINK,
-  DISCORD_LINK,
-} from "@/configs/app.config";
-</script>
-
-<style lang="scss" scoped>
-.socials {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  svg {
-    display: inline-block;
-    width: 24px;
-    transition: 0.3s ease;
-  }
-
-  a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-      svg {
-        fill-opacity: 1;
-      }
-    }
-  }
-}
-</style>
diff --git a/components/UnshieldTab.vue b/components/UnshieldTab.vue
deleted file mode 100644
index f59d88f..0000000
--- a/components/UnshieldTab.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <section id="steps">
-    <div class="block steps">
-      <div class="container">
-        <div class="grid gap-4">
-          <div class="text-4xl mt-10">Unshield</div>
-          <div class="mt-4">
-            By clicking the ”Unshield” button, you perform a transfer of 30% of
-            your Incognitee balance to your wallet on Paseo.
-          </div>
-          <div class="text-lg">
-            <div
-              v-if="accountStore.incogniteeBalance < existential_deposit * 4"
-            >
-              <div class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
-                <div class="flex">
-                  <div class="flex-shrink-0">
-                    <ExclamationTriangleIcon
-                      class="h-5 w-5 text-yellow-400"
-                      aria-hidden="true"
-                    />
-                  </div>
-                  <div class="ml-3">
-                    <p class="text-sm text-yellow-700">
-                      Your balance on Incognitee is too low. Please go back to
-                      step 2 to top up
-                      {{ " " }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else>
-              <div>
-                <UButton class="mt-10 btn btn_gradient" @click="unshieldFunds">
-                  Unshield Funds
-                </UButton>
-                <div class="mt-4">{{ topStatus }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { formatBalance } from "@polkadot/util";
-
-import { useAccount } from "@/store/account.ts";
-import { useIncognitee } from "@/store/incognitee.ts";
-import { ref } from "vue";
-
-const accountStore = useAccount();
-const incogniteeStore = useIncognitee();
-const topStatus = ref("");
-const existential_deposit = 10000000000;
-
-const emit = defineEmits(["change-tab"]);
-
-formatBalance.setDefaults({
-  decimals: 10,
-  unit: "PAS",
-});
-const unshieldFunds = () => {
-  console.log("will unshield 30% of your private funds to same account on L1");
-  topStatus.value =
-    "⌛ will unshield 30% of your private funds to same account on L1";
-  const balance = accountStore.incogniteeBalance;
-  // todo! instead of sending 30% we should check fees explicitly and handle edge cases
-  const amount = Math.floor(0.3 * balance);
-  const signer = accountStore.account;
-  console.log(
-    `sending ${formatBalance(amount)} from ${
-      signer.address
-    } privately to self on L1 (shard: ${incogniteeStore.shard}`,
-  );
-  incogniteeStore.api
-    .balanceUnshieldFunds(
-      signer,
-      incogniteeStore.shard,
-      incogniteeStore.fingerprint,
-      signer.address,
-      signer.address,
-      amount,
-    )
-    .then((hash) => {
-      topStatus.value =
-        "😀 Triggered unshielding of funds successfully. please proceed to step 5";
-      console.log(`trustedOperationHash: ${hash}`);
-      // todo! wait for evidence on L1
-      // emit('change-tab', 4);
-    });
-
-  // todo! remove this and only change tab upon success above
-  // emit('change-tab', 4);
-};
-</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 2659cd5..95c1584 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,7 +16,7 @@
               <div class="inner-box">
                 <div class="flex justify-around text-white">
                   <div class="flex flex-col items-center text-center">
-                    <nuxt-link :to="{ path: '/wallet', query: $route.query }">
+                    <nuxt-link :to="{ path: '/', query: $route.query }">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
diff --git a/package.json b/package.json
index 05f140a..8fe3995 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "vue-router": "^4.3.2"
   },
   "dependencies": {
-    "@encointer/worker-api": "^0.14.1",
+    "@encointer/worker-api": "^0.14.2",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@headlessui/vue": "^1.7.22",
     "@heroicons/vue": "^2.1.3",
@@ -46,7 +46,7 @@
     "@nuxt/http": "^0.6.4",
     "@nuxt/ui": "^2.15.2",
     "@pinia/nuxt": "^0.5.1",
-    "@polkadot/api": "^11.0.2",
+    "@polkadot/api": "^11.2.1",
     "@polkadot/keyring": "^12.6.2",
     "@polkadot/util": "^12.6.2",
     "@polkadot/util-crypto": "^12.6.2",
diff --git a/pages/gov.vue b/pages/gov.vue
index 48e3445..b55ce10 100644
--- a/pages/gov.vue
+++ b/pages/gov.vue
@@ -5,7 +5,7 @@
     </span>
 
     <div class="mt-2">
-      <p class="text-sm text-gray-400 text-justify">COMING SOON(TM)</p>
+      <p class="text-sm text-gray-400 text-justify">COMING SOON<sup>TM</sup></p>
       <p class="text-sm text-gray-400 text-justify">
         If you participate in OpenGov on Polkadot and Kusama or onchain
         governance on any of their parachains, you inevitably expose your voting
diff --git a/pages/index.vue b/pages/index.vue
index 1bd1adf..7c1d80e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,34 +1,2005 @@
 <template>
-  <div class="home-section">
-    <Main />
-    <Rules />
-    <Prizes />
-    <Socials />
-    <Footer />
+  <div class="mt-10 incognitee-border-gradient">
+    <div
+      class="flex flex-row justify-between w-full text-center gap-4 container mb-10"
+    >
+      <div class="currency-box p-3 gap-2 basis-1/2" @click="openAssetsInfo">
+        <Polkadot class="w-[30px] h-[30px]" />
+        <p class="text-xs">Polkadot</p>
+        <span
+          class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
+          >coming soon</span
+        >
+      </div>
+      <div
+        class="currency-box gap-2 p-3 basis-1/2 border-2 border-incognitee-green"
+      >
+        <Paseo class="w-[30px] h-[30px]" />
+        <p class="text-xs">PAS<br />PASEO</p>
+      </div>
+      <div class="currency-box gap-2 p-3 basis-1/2" @click="openAssetsInfo">
+        <USDC class="w-[30px] h-[30px]" />
+        <p class="text-xs">USDC</p>
+        <span
+          class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
+          >coming soon</span
+        >
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="w-full bg-incognitee-blue mt-10">
+        <div
+          class="border bg-incognitee-blue border-incognitee-green rounded-lg p-1"
+        >
+          <nav class="flex space-x-4" aria-label="Tabs">
+            <button
+              @click="selectTab('public')"
+              :class="[
+                currentTab === 'public'
+                  ? 'bg-gray-800 text-white'
+                  : 'text-gray-500 hover:text-gray-700',
+                'flex-1 py-2 text-sm font-medium   rounded-lg',
+              ]"
+            >
+              Public Balance
+            </button>
+            <button
+              @click="selectTab('private')"
+              :class="[
+                currentTab === 'private'
+                  ? 'bg-gray-800 text-white'
+                  : 'text-gray-500 hover:text-gray-700',
+                'flex-1 py-2 text-sm font-medium rounded-lg',
+              ]"
+            >
+              Private Balance
+            </button>
+          </nav>
+        </div>
+      </div>
+
+      <div class="bg-gray-900 flex mt-2">
+        <div class="custom-border-gradient">
+          <div class="inner-box">
+            <div v-if="currentTab === 'public'">
+              <!-- Public Balance Content -->
+
+              <div class="text-white mb-6 text-center">
+                <div class="">
+                  <h3 class="text-sm mb-3">Public Balance</h3>
+                  <div v-if="isFetchingPaseoBalance" class="spinner"></div>
+                  <div class="text-4xl font-semibold" v-else>
+                    {{ accountStore.getPaseoHumanBalance }}
+                    <span class="text-sm font-semibold">PAS</span>
+                  </div>
+                </div>
+              </div>
+              <div class="mt-10">
+                <div
+                  class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
+                >
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="openShieldOverlay"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+                      />
+                    </svg>
+                    <p class="text-xs">Shield</p>
+                  </div>
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="openFaucetOverlay"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                      />
+                    </svg>
+                    <p class="text-xs">Faucet</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else>
+              <!-- Private Balance Content -->
+              <div class="text-white mb-6 text-center">
+                <h3 class="text-sm mb-3" @click="openPrivacyInfo">
+                  Private Balance ⓘ
+                </h3>
+                <div v-if="isFetchingIncogniteeBalance" class="spinner"></div>
+                <div class="text-4xl font-semibold" v-else>
+                  {{ accountStore.getIncogniteeHumanBalance }}
+                  <span class="text-sm font-semibold">PAS</span>
+                </div>
+              </div>
+              <div class="mt-10">
+                <div
+                  class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
+                >
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="openPrivateSendOverlay"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
+                      />
+                    </svg>
+                    <p class="text-xs">Send</p>
+                  </div>
+
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="openReceiveOverlay"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                      />
+                    </svg>
+                    <p class="text-xs">Receive</p>
+                  </div>
+
+                  <div
+                    class="flex flex-col items-center text-center"
+                    @click="openUnshieldOverlay"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      class="size-6 mx-auto mb-2"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+                      />
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                      />
+                    </svg>
+                    <p class="text-xs">Unshield</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <TransitionRoot as="template" :show="showAssetsInfo">
+      <Dialog class="relative z-10" @close="closeAssetsInfo">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="w-full h-full relative transform overflow-hidden rounded-xl bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <div class="absolute right-0 top-0 pr-4 pt-4">
+                  <button
+                    type="button"
+                    class="text-gray-400 hover:text-gray-500"
+                    @click="closeAssetsInfo"
+                  >
+                    <span class="sr-only">Close</span>
+                    <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>
+                <div>
+                  <div class="mt-3 text-center sm:mt-5">
+                    <DialogTitle
+                      as="h3"
+                      class="text-base font-semibold leading-6 text-white"
+                      >Other Assets
+                    </DialogTitle>
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-400 mt-4 text-left">
+                        Incognitee is capable of shielding any fungible asset on
+                        any substrate-based chain. Stay tuned for dedicated
+                        deployments for DOT, KSM, USDC, USDT and others
+                      </p>
+                      <p class="text-sm text-gray-400 text-left my-4">
+                        With further extension, Incognitee will be able to
+                        shield BTC, ETH and any other token whose protocol
+                        supports light clients
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div class="absolute bottom-0 left-0 w-full p-4 bg-gray-800">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+                    @click="closeAssetsInfo"
+                  >
+                    Got it!
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showPrivacyInfo">
+      <Dialog class="relative z-10" @close="closeOnOutsideClick">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                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-sm sm:p-6"
+              >
+                <div class="absolute right-0 top-0 pr-4 pt-4">
+                  <button
+                    type="button"
+                    class="text-gray-400 hover:text-gray-500"
+                    @click="closePrivacyInfo"
+                  >
+                    <span class="sr-only">Close</span>
+                    <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>
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-white"
+                    >On Privacy
+                  </DialogTitle>
+
+                  <div class="mt-2">
+                    <p class="text-sm text-gray-400 mt-4 text-justify">
+                      Incognitee enhances your privacy while dealing with
+                      digital assets. But what does privacy mean and how does
+                      incognitee improve privacy?
+                    </p>
+                    <p class="text-sm text-gray-400 text-justify my-4">
+                      First, let's explore why digital assets are generally
+                      <b>not</b> private. When dealing with crypto assets, your
+                      account is a pseudonym on a public ledger, much like a
+                      bank account number. Every single transaction this account
+                      does will be stored publicly forever and you have no right
+                      for deletion of the trace you left. If, at a certain point
+                      in time your pseudonym can be linked to your identity -
+                      i.e. because you send tokens to someone else - your entire
+                      behavioral history is revealed as is your balance.
+                    </p>
+                    <p class="text-sm text-gray-400 text-justify my-4">
+                      <NuxtLink to="https://incognitee.io" class="color_blue"
+                        >Incognitee
+                      </NuxtLink>
+                      is a privacy enhancing technology that allows you to
+                      shield your assets and transfer them privately. This means
+                      that you can send tokens to someone else without revealing
+                      your balance or transaction history. The recipient will
+                      not be able to see your balance or transaction history
+                      either. This is achieved by using a technology called
+                      <NuxtLink
+                        to="https://docs.integritee.network/2-integritee-network/2.7-privacy-technology-trusted-execution-environments"
+                        class="color_blue"
+                        >trusted execution environments (TEE)
+                      </NuxtLink>
+                      . The TEEs we use are a hardware feature of server CPU's
+                      called <i>Intel SGX</i>. In addition, the
+                      <NuxtLink
+                        to="https://docs.integritee.network/2-integritee-network"
+                        class="color_blue"
+                        >Integritee Network
+                      </NuxtLink>
+                      , a Polkadot parachain, performs independent,
+                      decentralized remote attestation of TEEs. Moreover, it
+                      gives finality to Incognitee sidechain blocks.
+                    </p>
+                    <p class="text-sm text-gray-400 mt-4 text-justify">
+                      Incognitee is a layer 2 solution, maintaining a private
+                      ledger secured by TEE. All your transactions are
+                      confidential, only known to and the person your
+                      transacting with. Sender, recipient and amount are
+                      invisible to the public and even to the operators of
+                      Incognitee infrastructure.
+                    </p>
+                    <p class="text-sm text-gray-400 mt-4 text-justify">
+                      For maximal privacy, we suggest to shield your assets to
+                      incognitee and from then on transact them on incognitee
+                      only. If you need to unshield back to L1, you can still
+                      benefit from k-anonymity: the public just sees that
+                      someone out of <i>k</i> individuals is the originator of
+                      an unshielding event. If <i>k</i> is large enough, you can
+                      plausibly deny it was you. You can influence the size of
+                      <i>k</i> by choosing popular amounts and timing.
+                    </p>
+                  </div>
+                </div>
+                <div class="mt-5 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+                    @click="closePrivacyInfo"
+                  >
+                    Got it!
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showShieldOverlay">
+      <Dialog class="relative z-20" @close="closeShieldOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div
+          class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel
+              class="w-full h-full relative transform overflow-hidden rounded-xl bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+            >
+              <div class="absolute right-0 top-0 pr-4 pt-4">
+                <button
+                  type="button"
+                  class="text-gray-400 hover:text-gray-500"
+                  @click="closeShieldOverlay"
+                >
+                  <span class="sr-only">Close</span>
+                  <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>
+              <div class="mt-3 text-center sm:mt-5 flex-grow">
+                <DialogTitle
+                  as="h3"
+                  class="text-base font-semibold leading-6 text-white"
+                  >Shield PAS
+                </DialogTitle>
+
+                <p class="text-sm text-gray-400 text-left my-4">
+                  Shielding is the process of moving naked, publicly visible
+                  balance on Paseo to your private wallet on Incognitee.
+                </p>
+
+                <form
+                  @submit.prevent="submitShieldForm"
+                  class="flex-grow flex flex-col justify-between"
+                >
+                  <div>
+                    <div class="flex justify-between items-center">
+                      <label
+                        for="sendAmount"
+                        class="text-sm font-medium leading-6 text-white"
+                        >PAS Amount</label
+                      >
+
+                      <span class="text-xs text-gray-400"
+                        >Available public balance:
+                        {{ accountStore.getPaseoHumanBalance }}</span
+                      >
+                    </div>
+                    <input
+                      id="shieldAmount"
+                      v-model="shieldAmount"
+                      type="number"
+                      step="0.01"
+                      :min="0.1"
+                      :max="
+                        (accountStore.paseoBalance -
+                          existential_deposit_paseo) /
+                          Math.pow(10, 10) -
+                        0.1
+                      "
+                      required
+                      class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
+                      style="border-color: #24ad7c"
+                    />
+                    <div class="text-right">
+                      <span class="text-xs text-gray-400"
+                        >Fee: 16 mPAS for Paseo, 0.175% for Incognitee</span
+                      >
+                    </div>
+                  </div>
+                  <div class="absolute bottom-0 left-0 w-full p-4 bg-gray-800">
+                    <button
+                      type="submit"
+                      class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+                      @click="submitShieldForm"
+                    >
+                      Shield
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showFaucetOverlay">
+      <Dialog class="relative z-20" @close="closeFaucetOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div
+          class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel
+              class="w-full h-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+            >
+              <div class="absolute right-0 top-0 pr-4 pt-4">
+                <button
+                  type="button"
+                  class="text-gray-400 hover:text-gray-500"
+                  @click="closeFaucetOverlay"
+                >
+                  <span class="sr-only">Close</span>
+                  <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>
+              <div class="flex-grow">
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-white"
+                    >Drip Faucet
+                  </DialogTitle>
+                  <div class="mt-2">
+                    <p class="text-sm text-gray-400">
+                      The Paseo Faucet grants you PAS tokens every day. Just
+                      copy-paste your address and solve a CAPTCHA to get free
+                      PAS tokens
+                    </p>
+
+                    <div class="flex flex-col mt-5">
+                      <div class="relative flex items-center rounded-lg">
+                        <input
+                          id="accountAddress"
+                          type="text"
+                          :value="accountStore.getAddress"
+                          readonly
+                          class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
+                          style="border-color: #24ad7c"
+                        />
+                        <div class="absolute right-3 flex space-x-2">
+                          <div
+                            @click="copyOwnAddressToClipboard"
+                            class="cursor-pointer"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke-width="1.5"
+                              stroke="currentColor"
+                              class="size-6"
+                            >
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="mt-5 sm:mt-6">
+                <a href="https://faucet.polkadot.io/paseo" target="_blank">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+                  >
+                    Get free PAS tokens from faucet
+                  </button>
+                </a>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot
+      as="template"
+      :show="showUnshieldOverlay && !showScanOverlay"
+    >
+      <Dialog
+        class="fixed inset-0 z-20 flex items-center justify-center"
+        @close="closeUnshieldOverlay"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="fixed inset-0 z-10 w-full h-full flex items-start justify-center p-4"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="relative w-full h-full max-w-sm mx-auto bg-gray-800 rounded-lg shadow-xl flex flex-col px-4 pb-4 pt-5 text-left transition-all sm:my-8 sm:max-w-sm sm:p-6"
+              >
+                <div class="absolute right-0 top-0 pr-4 pt-4">
+                  <button
+                    type="button"
+                    class="text-gray-400 hover:text-gray-500"
+                    @click="closeUnshieldOverlay"
+                  >
+                    <span class="sr-only">Close</span>
+                    <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>
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-white"
+                    >Unshield PAS
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <p class="text-sm text-gray-400 text-left my-4">
+                      Unshielding is the process of moving funds from your
+                      private balance on Incognitee to publicly visible (naked)
+                      Paseo.
+                    </p>
+                  </div>
+                  <form class="mt-5" @submit.prevent="submitUnshieldForm">
+                    <div class="flex flex-col">
+                      <label
+                        for="recipientAddress"
+                        class="text-sm font-medium leading-6 text-white text-left"
+                        >Recipient</label
+                      >
+                      <div class="relative flex items-center rounded-lg">
+                        <div class="absolute left-3 flex items-center">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="h-6 w-6 text-white"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              d="M11.9889 0L0.0222883 5.99115L0 18.0089L12.0111 24L23.9778 18.0089L24 5.99115L11.9889 0ZM11.9055 2.93685L15.012 4.49375V7.60754L11.9055 9.16444L8.79902 7.60754V4.49375L11.9055 2.93685ZM5.66099 6.0491L8.76754 7.606V10.7198L5.66099 12.2767L8.76749 13.8336V16.9489L5.66093 18.5058L2.55438 16.9489V13.8336L5.66087 12.2767L2.55438 10.7198V7.606L5.66087 6.0491H5.66099ZM18.1278 6.0491L21.2343 7.606V10.7198L18.1279 12.2767L21.2344 13.8336V16.9489L18.1279 18.5058L15.0214 16.9489V13.8336L18.1279 12.2767L15.0214 10.7198V7.606L18.1278 6.0491ZM11.9055 9.16928L15.012 10.7262V13.84L11.913 15.3937L15.012 16.9457V20.0611L11.9055 21.618L8.79902 20.0611V16.9457L11.898 15.3937L8.79902 13.84V10.7262L11.9055 9.16928H11.9055Z"
+                              fill="white"
+                            />
+                          </svg>
+                        </div>
+                        <input
+                          id="recipientAddress"
+                          v-model="recipientAddress"
+                          type="text"
+                          required
+                          placeholder="Recipient"
+                          class="w-full text-sm rounded-lg flex-grow pl-12 py-2 pr-20 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
+                          style="border-color: #24ad7c"
+                        />
+                        <div class="absolute right-3 flex space-x-2">
+                          <div
+                            @click="setRecipientAddressToSelf"
+                            class="cursor-pointer"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke-width="1.5"
+                              stroke="currentColor"
+                              class="h-6 w-6 text-white"
+                            >
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
+                              />
+                            </svg>
+                          </div>
+                          <div @click="openScanOverlay" class="cursor-pointer">
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke-width="1.5"
+                              stroke="currentColor"
+                              class="h-6 w-6 text-white"
+                            >
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+                              />
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <p class="text-sm text-gray-400 text-left mt-5">
+                      For optimal k-anonymity, we advise you to unshield exactly
+                      10 PAS at the time. In the future we will provide a score
+                      including timing and popular amounts to enhance
+                      unlinkability of your actions.
+                    </p>
+
+                    <div class="flex justify-between items-center mt-5">
+                      <label
+                        for="unshieldAmount"
+                        class="text-sm font-medium leading-6 text-white"
+                        >PAS Amount</label
+                      >
+
+                      <span class="text-xs text-gray-400"
+                        >Available private balance:
+                        {{ accountStore.getIncogniteeHumanBalance }}</span
+                      >
+                    </div>
+                    <input
+                      id="unshieldAmount"
+                      v-model="unshieldAmount"
+                      type="number"
+                      step="0.1"
+                      :min="1.1"
+                      :max="
+                        accountStore.incogniteeBalance / Math.pow(10, 10) - 0.1
+                      "
+                      required
+                      class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
+                      style="border-color: #24ad7c"
+                    />
+                    <!-- Fee description -->
+                    <div class="text-right">
+                      <span class="text-xs text-gray-400"
+                        >Fee: 30m PAS for Incognitee</span
+                      >
+                    </div>
+
+                    <div
+                      class="absolute bottom-0 left-0 w-full p-4 bg-gray-800"
+                    >
+                      <button
+                        type="submit"
+                        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+                      >
+                        Unshield
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showReceiveOverlay">
+      <Dialog
+        class="fixed inset-0 z-20 flex items-center justify-center"
+        @close="closeReceiveOverlay"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div
+          class="fixed inset-0 z-10 w-full h-full flex items-start justify-center p-4"
+        >
+          <!-- Anpassung hier -->
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel
+              class="relative w-full h-full max-w-sm mx-auto bg-gray-800 rounded-lg shadow-xl flex flex-col px-4 pb-4 pt-5 text-left transition-all sm:my-8 sm:max-w-sm sm:p-6"
+            >
+              <div class="absolute right-0 top-0 pr-4 pt-4">
+                <button
+                  type="button"
+                  class="text-gray-400 hover:text-gray-500"
+                  @click="closeReceiveOverlay"
+                >
+                  <span class="sr-only">Close</span>
+                  <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>
+              <div class="flex-grow flex flex-col justify-start">
+                <!-- Anpassung hier -->
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-white"
+                  >
+                    Receive
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <p class="text-sm text-gray-400 text-left my-4">
+                      Share your address with the sender. You can either have
+                      them scan this QR code or send them a private message.
+                    </p>
+                  </div>
+                  <div class="mt-5 qrcode-container">
+                    <qrcode :value="accountStore.getAddress"></qrcode>
+                  </div>
+
+                  <div class="flex flex-col mt-5">
+                    <div
+                      class="w-full mt-5 mb-2 text-sm font-medium leading-6 text-white font-semibold"
+                    >
+                      Your address:
+                    </div>
+                    <div class="relative flex items-center rounded-lg">
+                      <input
+                        id="accountAddress"
+                        type="text"
+                        :value="accountStore.getAddress"
+                        readonly
+                        class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
+                        style="border-color: #24ad7c"
+                      />
+                      <div class="absolute right-3 flex space-x-2">
+                        <div
+                          @click="copyOwnAddressToClipboard"
+                          class="cursor-pointer"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke-width="1.5"
+                            stroke="currentColor"
+                            class="size-6"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot
+      as="template"
+      :show="showPrivateSendOverlay && !showScanOverlay"
+    >
+      <Dialog class="relative z-20" @close="closePrivateSendOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed mb-5 p-4 inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div
+          class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel
+              class="w-full h-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+            >
+              <div class="absolute right-0 top-0 pr-4 pt-4">
+                <button
+                  type="button"
+                  class="text-gray-400 hover:text-gray-500"
+                  @click="closePrivateSendOverlay"
+                >
+                  <span class="sr-only">Close</span>
+                  <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>
+              <div class="flex-grow">
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-white"
+                    >Send Privately
+                  </DialogTitle>
+                  <div class="mt-5">
+                    <p class="text-sm text-gray-400 text-left my-4">
+                      Sending privately means that only you and the recipient
+                      know who sent how much to whom.
+                    </p>
+                  </div>
+                  <form class="mt-5" @submit.prevent="submitSendForm">
+                    <div class="flex flex-col">
+                      <label
+                        for="recipientAddress"
+                        class="text-sm font-medium leading-6 text-white text-left"
+                        >Recipient</label
+                      >
+                      <div class="relative flex items-center rounded-lg">
+                        <input
+                          id="recipientAddress"
+                          v-model="recipientAddress"
+                          type="text"
+                          required
+                          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
+                          style="border-color: #24ad7c"
+                          placeholder="Recipient"
+                        />
+                        <div class="absolute right-3 flex space-x-2">
+                          <div @click="openScanOverlay" class="cursor-pointer">
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke-width="1.5"
+                              stroke="currentColor"
+                              class="h-6 w-6 text-white"
+                            >
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+                              />
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="mt-10">
+                      <!-- Label and available balance -->
+                      <div class="flex justify-between items-center">
+                        <label
+                          for="sendAmount"
+                          class="text-sm font-medium leading-6 text-white"
+                          >PAS Amount</label
+                        >
+
+                        <span class="text-xs text-gray-400"
+                          >Available private balance:
+                          {{ accountStore.getIncogniteeHumanBalance }}</span
+                        >
+                      </div>
+
+                      <!-- Input field -->
+                      <div>
+                        <input
+                          id="sendAmount"
+                          v-model="sendAmount"
+                          type="number"
+                          step="0.01"
+                          :min="0.1"
+                          :max="
+                            accountStore.incogniteeBalance / Math.pow(10, 10) -
+                            0.1
+                          "
+                          required
+                          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
+                          style="border-color: #24ad7c"
+                          placeholder="Amount"
+                        />
+                      </div>
+
+                      <!-- Fee description -->
+                      <div class="text-right">
+                        <span class="text-xs text-gray-400"
+                          >Fee: 10m PAS for Incognitee</span
+                        >
+                      </div>
+                    </div>
+
+                    <div
+                      class="absolute bottom-0 left-0 w-full p-4 bg-gray-800"
+                    >
+                      <button
+                        type="submit"
+                        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+                      >
+                        Transfer
+                      </button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showScanOverlay">
+      <Dialog class="relative z-20" @close="closeScanOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-20 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                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-sm sm:p-6"
+              >
+                <div class="absolute right-0 top-0 pr-4 pt-4">
+                  <button
+                    type="button"
+                    class="text-gray-400 hover:text-gray-500"
+                    @click="closeScanOverlay"
+                  >
+                    <span class="sr-only">Close</span>
+                    <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>
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-white"
+                    >Scan recipient's QR code
+                  </DialogTitle>
+
+                  <div class="mt-6 qrcode-container">
+                    <qrcode-stream @detect="onDecode"></qrcode-stream>
+                  </div>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showNewWalletOverlay">
+      <Dialog class="relative z-10" @close="closeNewWalletOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="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-sm sm:p-6"
+              >
+                <div class="absolute right-0 top-0 pr-4 pt-4">
+                  <button
+                    type="button"
+                    class="text-gray-400 hover:text-gray-500"
+                    @click="closeNewWalletOverlay"
+                  >
+                    <span class="sr-only">Close</span>
+                    <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>
+                <div>
+                  <div
+                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"
+                  >
+                    <CheckIcon
+                      class="h-6 w-6 text-green-600"
+                      aria-hidden="true"
+                    />
+                  </div>
+
+                  <div class="mt-3 text-center sm:mt-5">
+                    <DialogTitle
+                      as="h3"
+                      class="text-base font-semibold leading-6 text-white"
+                      >New Wallet!
+                    </DialogTitle>
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-400">
+                        We have created a new wallet for you.
+                      </p>
+
+                      <div class="flex flex-col mt-5">
+                        <div class="relative flex items-center rounded-lg">
+                          <input
+                            id="accountAddress"
+                            type="text"
+                            :value="accountStore.getAddress"
+                            readonly
+                            class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
+                            style="border-color: #24ad7c"
+                          />
+                          <div class="absolute right-3 flex space-x-2">
+                            <div
+                              @click="copyOwnAddressToClipboard"
+                              class="cursor-pointer"
+                            >
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke-width="1.5"
+                                stroke="currentColor"
+                                class="size-6"
+                              >
+                                <path
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+                                />
+                              </svg>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="mt-5">
+                        <a
+                          href="https://faucet.polkadot.io/paseo"
+                          target="_blank"
+                        >
+                          <button
+                            type="button"
+                            class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
+                          >
+                            Get free PAS tokens from faucet
+                          </button>
+                        </a>
+                      </div>
+                      <p class="text-sm text-gray-400 mt-4 text-left">
+                        In order to keep your wallet, please store a bookmark to
+                        the current url which includes your secret
+                        <strong>NOW</strong>. (i.e. type Ctrl+D to bookmark this
+                        page). If you lose the bookmark, you will lose access to
+                        your wallet. If you share your personal url with others,
+                        they can spend your funds. The purpose of this demo is
+                        not security but optimal user experience for testing
+                        purposes.
+                      </p>
+                      <p class="text-sm text-gray-400 text-left my-4">
+                        You will have zero funds. Please tap "Get free PAS
+                        tokens from faucet" and go to Paseo Faucet to get your
+                        first PAS tokens.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <div v-if="showStatusOverlay" class="status-overlay">
+      <div class="status">
+        <div class="spinner" />
+        <div>{{ txStatus }}</div>
+        <button @click="closeStatusOverlay" class="mt-8">close</button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Main from "~/components/Index/Main.vue";
-import Prizes from "~/components/Index/Prizes.vue";
-import Rules from "~/components/Index/Rules.vue";
-import Footer from "~/components/Footer/index.vue";
-import Socials from "~/components/Socials/Section.vue";
-import { generateSEO } from "~/helpers/generateSEO";
-
-generateSEO({
-  title: "Incognitee - Home",
-  description:
-    "Transfer digital assets privately. Welcome to Incognitee - an exclusive and discreet hub in the heart of Web3.",
+import Paseo from "@/assets/img/paseo-logo.svg";
+import Polkadot from "@/assets/img/polkadot-logo.svg";
+import USDC from "@/assets/img/usdc-logo.svg";
+
+import { useAccount } from "@/store/account.ts";
+import { useIncognitee } from "@/store/incognitee.ts";
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { CheckIcon } from "@heroicons/vue/24/outline";
+import { ApiPromise, WsProvider } from "@polkadot/api";
+import { Keyring } from "@polkadot/keyring";
+import { formatBalance, hexToU8a, u8aToHex } from "@polkadot/util";
+import {
+  cryptoWaitReady,
+  mnemonicGenerate,
+  mnemonicToMiniSecret,
+} from "@polkadot/util-crypto";
+import { useInterval } from "@vueuse/core";
+import { onMounted, ref, watch } from "vue";
+import Qrcode from "vue-qrcode";
+import { QrcodeStream } from "vue-qrcode-reader";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const accountStore = useAccount();
+const incogniteeStore = useIncognitee();
+const isFetchingPaseoBalance = ref(true);
+const isFetchingIncogniteeBalance = ref(true);
+
+const existential_deposit_paseo = 10000000000;
+const txStatus = ref("");
+const recipientAddress = ref("");
+const sendAmount = ref(1.0);
+const shieldAmount = ref(1.0);
+const unshieldAmount = ref(10.0);
+const scanResult = ref("No QR code data yet");
+
+let api: ApiPromise | null = null;
+
+const tabs = [
+  { name: "Public Balance", href: "#", current: true },
+  { name: "Private Balance", href: "#", current: false },
+];
+
+const currentTab = ref("public");
+
+const selectTab = (tab) => {
+  currentTab.value = tab;
+};
+
+const submitSendForm = () => {
+  // Handle the form submission here
+  console.log("submitting send form");
+  openStatusOverlay();
+  closePrivateSendOverlay();
+  sendPrivately();
+};
+const submitShieldForm = () => {
+  // Handle the form submission here
+  openStatusOverlay();
+  closeShieldOverlay();
+  shield();
+};
+const submitUnshieldForm = () => {
+  // Handle the form submission here
+  openStatusOverlay();
+  closeUnshieldOverlay();
+  unshield();
+};
+
+const setRecipientAddressToSelf = () => {
+  recipientAddress.value = accountStore.getAddress;
+};
+
+const onDecode = (decodeResult) => {
+  console.log("QR scan decoded: " + decodeResult[0].rawValue);
+  scanResult.value = decodeResult[0].rawValue;
+  recipientAddress.value = decodeResult[0].rawValue;
+  closeScanOverlay();
+};
+
+const txResHandlerPaseo = ({ events = [], status, txHash }) => {
+  status.isFinalized
+    ? (txStatus.value = `😀 Finalized. You should see your Incognitee balance increase in seconds. Please proceed to the next tab and invite a friend`)
+    : (txStatus.value = `⌛ Current transaction status: ${status.type}. please be patient a few more seconds. you should see your Paseo balance going down`);
+
+  // Loop through Vec<EventRecord> to display all events
+  events.forEach(({ _, event: { data, method, section } }) => {
+    if (section + ":" + method === "system:ExtrinsicFailed") {
+      // extract the data for this event
+      const [dispatchError, dispatchInfo] = data;
+      console.log(`dispatchinfo: ${dispatchInfo}`);
+      let errorInfo;
+
+      // decode the error
+      if (dispatchError.isModule) {
+        // for module errors, we have the section indexed, lookup
+        // (For specific known errors, we can also do a check against the
+        // api.errors.<module>.<ErrorName>.is(dispatchError.asModule) guard)
+        const mod = dispatchError.asModule;
+        const error = api.registry.findMetaError(
+          new Uint8Array([
+            mod.index.toNumber(),
+            bnFromHex(mod.error.toHex().slice(0, 4)).toNumber(),
+          ]),
+        );
+        const message = `${error.section}.${error.name}${
+          Array.isArray(error.docs)
+            ? `(${error.docs.join("")})`
+            : error.docs || ""
+        }`;
+
+        errorInfo = `${message}`;
+        console.log(`Error-info::${JSON.stringify(error)}`);
+      } else {
+        // Other, CannotLookup, BadOrigin, no extra info
+        errorInfo = dispatchError.toString();
+      }
+      txStatus.value = `😞 Transaction Failed! ${section}.${method}::${errorInfo}`;
+    } else if (section + ":" + method === "system:ExtrinsicSuccess") {
+      txStatus.value`❤️️ Transaction successful! please proceed to the next tab and invite a friend`;
+    }
+  });
+};
+
+const txErrHandlerPaseo = (err) =>
+  (txStatus.value = `😞 Transaction Failed: ${err.toString()}`);
+const shield = async () => {
+  console.log("shielding .....");
+  txStatus.value = "⌛ connecting to Paseo....please be patient";
+  if (incogniteeStore.vault) {
+    const balance = accountStore.paseoBalance;
+    const amount = Math.pow(10, 10) * shieldAmount.value;
+    console.log(`sending ${amount} to vault: ${incogniteeStore.vault}`);
+    const wsProvider = new WsProvider("wss://rpc.ibp.network/paseo");
+    const api = await ApiPromise.create({ provider: wsProvider });
+    console.log("api initialized for shielding");
+    await api.tx.balances
+      .transferKeepAlive(incogniteeStore.vault, amount)
+      .signAndSend(accountStore.account, txResHandlerPaseo)
+      .catch(txErrHandlerPaseo);
+  }
+};
+
+const unshield = () => {
+  console.log("will unshield 30% of your private funds to same account on L1");
+  txStatus.value = "⌛ will unshield to L1";
+  const balance = accountStore.incogniteeBalance;
+  const amount = Math.pow(10, 10) * unshieldAmount.value;
+  const signer = accountStore.account;
+  console.log(
+    `sending ${formatBalance(amount)} from ${
+      signer.address
+    } privately to ${recipientAddress.value} on L1 (shard: ${incogniteeStore.shard}`,
+  );
+  incogniteeStore.api
+    .balanceUnshieldFunds(
+      signer,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      signer.address,
+      recipientAddress.value,
+      amount,
+    )
+    .then((hash) => {
+      txStatus.value = "😀 Triggered unshielding of funds successfully.";
+      console.log(`trustedOperationHash: ${hash}`);
+    });
+};
+
+const sendPrivately = () => {
+  console.log("sending funds on incognitee");
+  txStatus.value = "⌛ sending funds privately on incognitee";
+  const amount = Math.pow(10, 10) * sendAmount.value;
+  const signer = accountStore.account;
+  console.log(
+    `sending ${formatBalance(amount)} from ${signer.address} privately to ${recipientAddress.value}`,
+  );
+  incogniteeStore.api
+    .trustedBalanceTransfer(
+      signer,
+      incogniteeStore.shard,
+      incogniteeStore.fingerprint,
+      signer.address,
+      recipientAddress.value,
+      amount,
+    )
+    .then((hash) => {
+      console.log(`trustedOperationHash: ${hash}`);
+      txStatus.value = "😀 Success";
+    });
+};
+
+const fetchIncogniteeBalance = async () => {
+  if (!incogniteeStore.apiReady) return;
+  if (!accountStore.account) return;
+  incogniteeStore.api
+    .getBalance(accountStore.account, incogniteeStore.shard)
+    .then((balance) => {
+      console.log(
+        `current account balance L2: ${balance} on shard ${incogniteeStore.shard}`,
+      );
+      accountStore.setIncogniteeBalance(balance);
+      isFetchingIncogniteeBalance.value = false;
+    });
+};
+
+const pollCounter = useInterval(2000);
+
+watch(pollCounter, async () => {
+  console.log("ping: " + pollCounter.value);
+  await fetchIncogniteeBalance();
 });
+
+watch(accountStore, async () => {
+  //todo! only reinitialize if account changes
+  if (accountStore.getAddress === "none") {
+    console.log("skipping api init. no address");
+    return;
+  }
+  if (api?.isReady) {
+    console.log(
+      "skipping api init. It seems the Paseo api is already subscribed to balance changes",
+    );
+    return;
+  }
+
+  console.log("trying to init api");
+  const wsProvider = new WsProvider("wss://rpc.ibp.network/paseo");
+  api = await ApiPromise.create({ provider: wsProvider });
+  api.query.system.account(
+    accountStore.account.address,
+    ({ data: { free: currentFree } }) => {
+      console.log("paseo balance:" + currentFree);
+      accountStore.paseoBalance = Number(currentFree);
+      isFetchingPaseoBalance.value = false;
+    },
+  );
+  // for quicker responsiveness we dont wait until the next regular poll, but trigger the balance fetch here
+  fetchIncogniteeBalance().then(() =>
+    console.log("fetched incognitee balance"),
+  );
+});
+
+const copyOwnAddressToClipboard = () => {
+  navigator.clipboard
+    .writeText(accountStore.getAddress)
+    .then(() =>
+      alert(
+        "copied your account address to clipboard. Please paste it into the address field on the Paseo faucet.",
+      ),
+    );
+};
+
+onMounted(() => {
+  incogniteeStore.initializeApi();
+
+  const seedHex = router.currentRoute.value.query.seed;
+  if (seedHex) {
+    console.log("found seed in url: " + seedHex);
+    cryptoWaitReady().then(() => {
+      const localKeyring = new Keyring({ type: "sr25519" });
+      const account = localKeyring.addFromSeed(hexToU8a(seedHex));
+      accountStore.setAccount(account);
+    });
+  } else {
+    console.log("no seed found in url. will automatically create fresh wallet");
+    cryptoWaitReady().then(() => {
+      const generatedMnemonic = mnemonicGenerate();
+      const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
+      const newAccount = localKeyring.addFromMnemonic(generatedMnemonic, {
+        name: "fresh",
+      });
+      const seed = mnemonicToMiniSecret(generatedMnemonic);
+      const privateKeyHex = u8aToHex(seed);
+      console.log(`Private Key in Hex: ${privateKeyHex}`);
+      // change url to contain new seed to allow bookmarking
+      router.push({
+        query: { seed: privateKeyHex },
+      });
+      accountStore.setAccount(newAccount);
+      openNewWalletOverlay();
+    });
+  }
+});
+
+const open = ref(true);
+
+const showAssetsInfo = ref(false);
+const openAssetsInfo = () => {
+  showAssetsInfo.value = true;
+};
+const closeAssetsInfo = () => {
+  showAssetsInfo.value = false;
+};
+
+const showPrivacyInfo = ref(false);
+const openPrivacyInfo = () => {
+  showPrivacyInfo.value = true;
+};
+const closePrivacyInfo = () => {
+  showPrivacyInfo.value = false;
+};
+const privacyInfo = ref(null);
+const closeOnOutsideClick = (event) => {
+  if (event.target === privacyInfo.value) {
+    showPrivacyInfo.value = false;
+  }
+};
+
+const showNewWalletOverlay = ref(false);
+const openNewWalletOverlay = () => {
+  showNewWalletOverlay.value = true;
+};
+const closeNewWalletOverlay = () => {
+  showNewWalletOverlay.value = false;
+};
+const showShieldOverlay = ref(false);
+const openShieldOverlay = () => {
+  showShieldOverlay.value = true;
+};
+const closeShieldOverlay = () => {
+  showShieldOverlay.value = false;
+};
+
+const showFaucetOverlay = ref(false);
+const openFaucetOverlay = () => {
+  showFaucetOverlay.value = true;
+};
+const closeFaucetOverlay = () => {
+  showFaucetOverlay.value = false;
+};
+
+const showUnshieldOverlay = ref(false);
+const openUnshieldOverlay = () => {
+  unshieldAmount.value = 10;
+  showUnshieldOverlay.value = true;
+};
+const closeUnshieldOverlay = () => {
+  showUnshieldOverlay.value = false;
+};
+const showReceiveOverlay = ref(false);
+const openReceiveOverlay = () => {
+  showReceiveOverlay.value = true;
+};
+const closeReceiveOverlay = () => {
+  showReceiveOverlay.value = false;
+};
+const showPrivateSendOverlay = ref(false);
+const openPrivateSendOverlay = () => {
+  console.log(`openSendOverlay (scanoverlay=${showScanOverlay.value})`);
+  showPrivateSendOverlay.value = true;
+};
+const closePrivateSendOverlay = () => {
+  console.log("closePrivateSendOverlay");
+  showPrivateSendOverlay.value = false;
+};
+
+const showScanOverlay = ref(false);
+const openScanOverlay = () => {
+  scanResult.value = "No QR code data yet";
+  showScanOverlay.value = true;
+};
+const closeScanOverlay = () => {
+  console.log("closeScanOverlay");
+  showScanOverlay.value = false;
+};
+const showStatusOverlay = ref(false);
+const openStatusOverlay = () => {
+  showStatusOverlay.value = true;
+};
+const closeStatusOverlay = () => {
+  showStatusOverlay.value = false;
+  showPrivateSendOverlay.value = false;
+  showShieldOverlay.value = false;
+  showUnshieldOverlay.value = false;
+};
 </script>
 
-<style lang="scss">
-.home-section {
+<style scoped>
+.border-green-500 {
+  border-color: #24ad7c;
+}
+
+.bg-gray-800 {
+  background-color: #1f2937;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.wallet {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   flex-grow: 1;
 }
+
+.truncate-input {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.balance {
+  font-size: 48px;
+  padding: 20px 20px;
+}
+
+.balance-naked {
+  font-size: 24px;
+  padding: 20px 20px;
+}
+
+h1 {
+  font-size: 1em; /* Adjust as needed */
+  font-weight: bold; /* Makes the text bold */
+  color: #999; /* Change color as needed */
+  text-align: center; /* Centers the text */
+  margin-bottom: 20px; /* Adds space below the heading */
+}
+
+.currency-selector {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+}
+
+.currency-logo {
+  height: 50px; /* Adjust as needed */
+  width: 50px; /* Adjust as needed */
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+}
+
+hr {
+  border: none;
+  border-top: 1px #222; /* Change color as needed */
+  color: #111; /* Change color as needed */
+  background-color: #333; /* Change color as needed */
+  height: 1px; /* Adjust as needed */
+}
+
+.privacy-separator {
+  width: 90%;
+  text-align: center;
+  color: #555;
+}
+
+.alert-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alert {
+  background: #222;
+  padding: 20px;
+  width: 90%;
+  border-radius: 10px;
+  overflow: auto;
+  max-height: 90%;
+}
+
+.action-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.action {
+  background: #222;
+  padding: 20px;
+  width: 90%;
+  border-radius: 10px;
+  overflow: auto;
+  max-height: 90%;
+}
+
+.status-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.status {
+  background: #269;
+  padding: 20px;
+  width: 90%;
+  border-radius: 10px;
+}
+
+.qrcode-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.qrcode {
+  width: min(90vw, 80vh);
+  height: min(90vw, 80vh);
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.form-container input {
+  background-color: #333;
+  color: #fff; /* You might want to change the text color to ensure it's readable against the dark background */
+}
+
+.form-container input#amount {
+  font-size: 2em; /* Make the font size twice as large */
+  text-align: center; /* Center the text */
+  width: 50%; /* Reduce the width by 50% */
+}
+
+.incognitee-border-gradient {
+  width: 100%;
+  height: 100%;
+  background: url("/img/global/bg-line.svg") no-repeat center center;
+  background-size: cover;
+}
+
+.spinner {
+  border: 2px solid #f3f3f3; /* Light grey */
+  border-top: 2px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 1em; /* Adjust the size here */
+  height: 1em; /* Adjust the size here */
+  animation: spin 2s linear infinite;
+  vertical-align: middle; /* Align with the text */
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/pages/swap.vue b/pages/swap.vue
index 41e707c..22177a6 100644
--- a/pages/swap.vue
+++ b/pages/swap.vue
@@ -5,7 +5,7 @@
     </span>
 
     <div class="mt-2">
-      <p class="text-sm text-gray-400 text-justify">COMING SOON(TM)</p>
+      <p class="text-sm text-gray-400 text-justify">COMING SOON<sup>TM</sup></p>
       <p class="text-sm text-gray-400 text-justify">
         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
diff --git a/pages/wallet.vue b/pages/wallet.vue
deleted file mode 100644
index d9e558f..0000000
--- a/pages/wallet.vue
+++ /dev/null
@@ -1,2015 +0,0 @@
-<template>
-  <div class="mt-10 incognitee-border-gradient">
-    <div
-      class="flex flex-row justify-between w-full text-center gap-4 container mb-10"
-    >
-      <div class="currency-box p-3 gap-2 basis-1/2" @click="openAssetsInfo">
-        <Polkadot class="w-[30px] h-[30px]" />
-        <p class="text-xs">Polkadot</p>
-        <span
-          class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
-          >coming soon</span
-        >
-      </div>
-      <div
-        class="currency-box gap-2 p-3 basis-1/2 border-2 border-incognitee-green"
-      >
-        <Paseo class="w-[30px] h-[30px]" />
-        <p class="text-xs">PASEO</p>
-      </div>
-      <div class="currency-box gap-2 p-3 basis-1/2" @click="openAssetsInfo">
-        <USDC class="w-[30px] h-[30px]" />
-        <p class="text-xs">Kusama</p>
-        <span
-          class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
-          >coming soon</span
-        >
-      </div>
-    </div>
-
-    <div class="container">
-      <div class="w-full bg-incognitee-blue mt-10">
-        <div
-          class="border bg-incognitee-blue border-incognitee-green rounded-lg p-1"
-        >
-          <nav class="flex space-x-4" aria-label="Tabs">
-            <button
-              @click="selectTab('public')"
-              :class="[
-                currentTab === 'public'
-                  ? 'bg-gray-800 text-white'
-                  : 'text-gray-500 hover:text-gray-700',
-                'flex-1 py-2 text-sm font-medium   rounded-lg',
-              ]"
-            >
-              Public Balance
-            </button>
-            <button
-              @click="selectTab('private')"
-              :class="[
-                currentTab === 'private'
-                  ? 'bg-gray-800 text-white'
-                  : 'text-gray-500 hover:text-gray-700',
-                'flex-1 py-2 text-sm font-medium rounded-lg',
-              ]"
-            >
-              Private Balance
-            </button>
-          </nav>
-        </div>
-      </div>
-
-      <div class="bg-gray-900 flex mt-2">
-        <div class="custom-border-gradient">
-          <div class="inner-box">
-            <div v-if="currentTab === 'public'">
-              <!-- Public Balance Content -->
-
-              <div class="text-white mb-6 text-center">
-                <div class="">
-                  <h3 class="text-sm mb-3">Public Balance</h3>
-                  <div v-if="isFetchingPaseoBalance" class="spinner"></div>
-                  <div class="text-4xl font-semibold" v-else>
-                    {{ accountStore.getPaseoHumanBalance }}
-                    <span class="text-sm font-semibold">PAS</span>
-                  </div>
-                </div>
-              </div>
-              <div class="mt-10">
-                <div
-                  class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
-                >
-                  <div
-                    class="flex flex-col items-center text-center"
-                    @click="openShieldOverlay"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
-                      />
-                    </svg>
-                    <p class="text-xs">Shield</p>
-                  </div>
-                  <div
-                    class="flex flex-col items-center text-center"
-                    @click="openFaucetOverlay"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
-                      />
-                    </svg>
-                    <p class="text-xs">Faucet</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-else>
-              <!-- Private Balance Content -->
-              <div class="text-white mb-6 text-center">
-                <h3 class="text-sm mb-3" @click="openPrivacyInfo">
-                  Private Balance
-                </h3>
-                <div v-if="isFetchingIncogniteeBalance" class="spinner"></div>
-                <div class="text-4xl font-semibold" v-else>
-                  {{ accountStore.getIncogniteeHumanBalance }}
-                  <span class="text-sm font-semibold">PAS</span>
-                </div>
-              </div>
-              <div class="mt-10">
-                <div
-                  class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
-                >
-                  <div
-                    class="flex flex-col items-center text-center"
-                    @click="openPrivateSendOverlay"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
-                      />
-                    </svg>
-                    <p class="text-xs">Send</p>
-                  </div>
-
-                  <div
-                    class="flex flex-col items-center text-center"
-                    @click="openReceiveOverlay"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
-                      />
-                    </svg>
-                    <p class="text-xs">Receive</p>
-                  </div>
-
-                  <div
-                    class="flex flex-col items-center text-center"
-                    @click="openUnshieldOverlay"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-                      />
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-                      />
-                    </svg>
-                    <p class="text-xs">Unshield</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <TransitionRoot as="template" :show="showAssetsInfo">
-      <Dialog class="relative z-10" @close="closeAssetsInfo">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-          <div
-            class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
-          >
-            <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogPanel
-                class="w-full h-full relative transform overflow-hidden rounded-xl bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
-              >
-                <div class="absolute right-0 top-0 pr-4 pt-4">
-                  <button
-                    type="button"
-                    class="text-gray-400 hover:text-gray-500"
-                    @click="closeAssetsInfo"
-                  >
-                    <span class="sr-only">Close</span>
-                    <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>
-                <div>
-                  <div class="mt-3 text-center sm:mt-5">
-                    <DialogTitle
-                      as="h3"
-                      class="text-base font-semibold leading-6 text-white"
-                      >Other Assets
-                    </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-sm text-gray-400 mt-4 text-left">
-                        Incognitee is capable of shielding any fungible asset on
-                        any substrate-based chain. Stay tuned for dedicated
-                        deployments for DOT, KSM, USDC, USDT and others
-                      </p>
-                      <p class="text-sm text-gray-400 text-left my-4">
-                        With further extension, Incognitee will be able to
-                        shield BTC, ETH and any other token whose protocol
-                        supports light clients
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div class="absolute bottom-0 left-0 w-full p-4 bg-gray-800">
-                  <button
-                    type="button"
-                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-                    @click="closeAssetsInfo"
-                  >
-                    Got it!
-                  </button>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot as="template" :show="showPrivacyInfo">
-      <Dialog class="relative z-10" @close="closeOnOutsideClick">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-          <div
-            class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
-          >
-            <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogPanel
-                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-sm sm:p-6"
-              >
-                <div class="absolute right-0 top-0 pr-4 pt-4">
-                  <button
-                    type="button"
-                    class="text-gray-400 hover:text-gray-500"
-                    @click="closePrivacyInfo"
-                  >
-                    <span class="sr-only">Close</span>
-                    <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>
-                <div class="mt-3 text-center sm:mt-5">
-                  <DialogTitle
-                    as="h3"
-                    class="text-base font-semibold leading-6 text-white"
-                    >On Privacy
-                  </DialogTitle>
-
-                  <div class="mt-2">
-                    <p class="text-sm text-gray-400 mt-4 text-justify">
-                      Incognitee enhances your privacy while dealing with
-                      digital assets. But what does privacy mean and how does
-                      incognitee improve privacy?
-                    </p>
-                    <p class="text-sm text-gray-400 text-justify my-4">
-                      First, let's explore why digital assets are generally
-                      <b>not</b> private. When dealing with crypto assets, your
-                      account is a pseudonym on a public ledger, much like a
-                      bank account number. Every single transaction this account
-                      does will be stored publicly forever and you have no right
-                      for deletion of the trace you left. If, at a certain point
-                      in time your pseudonym can be linked to your identity -
-                      i.e. because you send tokens to someone else - your entire
-                      behavioral history is revealed as is your balance.
-                    </p>
-                    <p class="text-sm text-gray-400 text-justify my-4">
-                      <NuxtLink to="https://incognitee.io" class="color_blue"
-                        >Incognitee
-                      </NuxtLink>
-                      is a privacy enhancing technology that allows you to
-                      shield your assets and transfer them privately. This means
-                      that you can send tokens to someone else without revealing
-                      your balance or transaction history. The recipient will
-                      not be able to see your balance or transaction history
-                      either. This is achieved by using a technology called
-                      <NuxtLink
-                        to="https://docs.integritee.network/2-integritee-network/2.7-privacy-technology-trusted-execution-environments"
-                        class="color_blue"
-                        >trusted execution environments (TEE)
-                      </NuxtLink>
-                      . The TEEs we use are a hardware feature of server CPU's
-                      called <i>Intel SGX</i>. In addition, the
-                      <NuxtLink
-                        to="https://docs.integritee.network/2-integritee-network"
-                        class="color_blue"
-                        >Integritee Network
-                      </NuxtLink>
-                      , a Polkadot parachain, performs independent,
-                      decentralized remote attestation of TEEs. Moreover, it
-                      gives finality to Incognitee sidechain blocks.
-                    </p>
-                    <p class="text-sm text-gray-400 mt-4 text-justify">
-                      Incognitee is a layer 2 solution, maintaining a private
-                      ledger secured by TEE. All your transactions are
-                      confidential, only known to and the person your
-                      transacting with. Sender, recipient and amount are
-                      invisible to the public and even to the operators of
-                      Incognitee infrastructure.
-                    </p>
-                    <p class="text-sm text-gray-400 mt-4 text-justify">
-                      For maximal privacy, we suggest to shield your assets to
-                      incognitee and from then on transact them on incognitee
-                      only. If you need to unshield back to L1, you can still
-                      benefit from k-anonymity: the public just sees that
-                      someone out of <i>k</i> individuals is the originator of
-                      an unshielding event. If <i>k</i> is large enough, you can
-                      plausibly deny it was you. You can influence the size of
-                      <i>k</i> by choosing popular amounts and timing.
-                    </p>
-                  </div>
-                </div>
-                <div class="mt-5 sm:mt-6">
-                  <button
-                    type="button"
-                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-                    @click="closePrivacyInfo"
-                  >
-                    Got it!
-                  </button>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot as="template" :show="showShieldOverlay">
-      <Dialog class="relative z-20" @close="closeShieldOverlay">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div
-          class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
-        >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <DialogPanel
-              class="w-full h-full relative transform overflow-hidden rounded-xl bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
-            >
-              <div class="absolute right-0 top-0 pr-4 pt-4">
-                <button
-                  type="button"
-                  class="text-gray-400 hover:text-gray-500"
-                  @click="closeShieldOverlay"
-                >
-                  <span class="sr-only">Close</span>
-                  <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>
-              <div class="mt-3 text-center sm:mt-5 flex-grow">
-                <DialogTitle
-                  as="h3"
-                  class="text-base font-semibold leading-6 text-white"
-                  >Shield PAS
-                </DialogTitle>
-
-                <p class="text-sm text-gray-400 text-left my-4">
-                  Shielding is the process of moving naked, publicly visible
-                  balance on Paseo to your private wallet on Incognitee.
-                </p>
-
-                <form
-                  @submit.prevent="submitShieldForm"
-                  class="flex-grow flex flex-col justify-between"
-                >
-                  <div>
-                    <div class="flex justify-between items-center">
-                      <label
-                        for="sendAmount"
-                        class="text-sm font-medium leading-6 text-white"
-                        >Amount</label
-                      >
-
-                      <span class="text-xs text-gray-400"
-                        >Available public balance:
-                        {{ accountStore.getPaseoHumanBalance }}</span
-                      >
-                    </div>
-                    <input
-                      id="shieldAmount"
-                      v-model="shieldAmount"
-                      type="number"
-                      step="0.01"
-                      :min="0.1"
-                      :max="
-                        (accountStore.paseoBalance -
-                          existential_deposit_paseo) /
-                          Math.pow(10, 10) -
-                        0.1
-                      "
-                      required
-                      class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
-                      style="border-color: #24ad7c"
-                    />
-                    <div class="text-right">
-                      <span class="text-xs text-gray-400"
-                        >Fee: 16 mPAS for Paseo, 0.175% for Incognitee</span
-                      >
-                    </div>
-                  </div>
-                  <div class="absolute bottom-0 left-0 w-full p-4 bg-gray-800">
-                    <button
-                      type="submit"
-                      class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-                      @click="submitShieldForm"
-                    >
-                      Shield
-                    </button>
-                  </div>
-                </form>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot as="template" :show="showFaucetOverlay">
-      <Dialog class="relative z-20" @close="closeFaucetOverlay">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div
-          class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
-        >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <DialogPanel
-              class="w-full h-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
-            >
-              <div class="absolute right-0 top-0 pr-4 pt-4">
-                <button
-                  type="button"
-                  class="text-gray-400 hover:text-gray-500"
-                  @click="closeFaucetOverlay"
-                >
-                  <span class="sr-only">Close</span>
-                  <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>
-              <div class="flex-grow">
-                <div class="mt-3 text-center sm:mt-5">
-                  <DialogTitle
-                    as="h3"
-                    class="text-base font-semibold leading-6 text-white"
-                    >Drip Faucet
-                  </DialogTitle>
-                  <div class="mt-2">
-                    <p class="text-sm text-gray-400">
-                      The Paseo Faucet grants you PAS tokens every day. Just
-                      copy-paste your address and solve a CAPTCHA to get free
-                      PAS tokens
-                    </p>
-
-                    <div class="flex flex-col mt-5">
-                      <div class="relative flex items-center rounded-lg">
-                        <input
-                          id="accountAddress"
-                          type="text"
-                          :value="accountStore.getAddress"
-                          readonly
-                          class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
-                          style="border-color: #24ad7c"
-                        />
-                        <div class="absolute right-3 flex space-x-2">
-                          <div
-                            @click="copyOwnAddressToClipboard"
-                            class="cursor-pointer"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke-width="1.5"
-                              stroke="currentColor"
-                              class="size-6"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="mt-5 sm:mt-6">
-                <a href="https://faucet.polkadot.io/paseo" target="_blank">
-                  <button
-                    type="button"
-                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-                  >
-                    Get free PAS tokens from faucet
-                  </button>
-                </a>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot
-      as="template"
-      :show="showUnshieldOverlay && !showScanOverlay"
-    >
-      <Dialog
-        class="fixed inset-0 z-20 flex items-center justify-center"
-        @close="closeUnshieldOverlay"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-          <div
-            class="fixed inset-0 z-10 w-full h-full flex items-start justify-center p-4"
-          >
-            <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogPanel
-                class="relative w-full h-full max-w-sm mx-auto bg-gray-800 rounded-lg shadow-xl flex flex-col px-4 pb-4 pt-5 text-left transition-all sm:my-8 sm:max-w-sm sm:p-6"
-              >
-                <div class="absolute right-0 top-0 pr-4 pt-4">
-                  <button
-                    type="button"
-                    class="text-gray-400 hover:text-gray-500"
-                    @click="closeUnshieldOverlay"
-                  >
-                    <span class="sr-only">Close</span>
-                    <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>
-                <div class="mt-3 text-center sm:mt-5">
-                  <DialogTitle
-                    as="h3"
-                    class="text-base font-semibold leading-6 text-white"
-                    >Unshield PAS
-                  </DialogTitle>
-                  <div class="mt-5">
-                    <p class="text-sm text-gray-400 text-left my-4">
-                      Unshielding is the process of moving funds from your
-                      private balance on Incognitee to publicly visible (naked)
-                      Paseo.
-                    </p>
-                  </div>
-
-                  <form @submit.prevent="submitUnshieldForm">
-                    <div class="mt-5">
-                      <form @submit.prevent="submitUnshieldForm">
-                        <div class="mt-5">
-                          <div class="flex flex-col">
-                            <label
-                              for="recipientAddress"
-                              class="text-sm font-medium leading-6 text-white text-left"
-                              >Recipient</label
-                            >
-                            <div class="relative flex items-center rounded-lg">
-                              <div class="absolute left-3 flex items-center">
-                                <svg
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  fill="none"
-                                  viewBox="0 0 24 24"
-                                  stroke-width="1.5"
-                                  stroke="currentColor"
-                                  class="h-6 w-6 text-white"
-                                >
-                                  <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    d="M11.9889 0L0.0222883 5.99115L0 18.0089L12.0111 24L23.9778 18.0089L24 5.99115L11.9889 0ZM11.9055 2.93685L15.012 4.49375V7.60754L11.9055 9.16444L8.79902 7.60754V4.49375L11.9055 2.93685ZM5.66099 6.0491L8.76754 7.606V10.7198L5.66099 12.2767L8.76749 13.8336V16.9489L5.66093 18.5058L2.55438 16.9489V13.8336L5.66087 12.2767L2.55438 10.7198V7.606L5.66087 6.0491H5.66099ZM18.1278 6.0491L21.2343 7.606V10.7198L18.1279 12.2767L21.2344 13.8336V16.9489L18.1279 18.5058L15.0214 16.9489V13.8336L18.1279 12.2767L15.0214 10.7198V7.606L18.1278 6.0491ZM11.9055 9.16928L15.012 10.7262V13.84L11.913 15.3937L15.012 16.9457V20.0611L11.9055 21.618L8.79902 20.0611V16.9457L11.898 15.3937L8.79902 13.84V10.7262L11.9055 9.16928H11.9055Z"
-                                    fill="white"
-                                  />
-                                </svg>
-                              </div>
-                              <input
-                                id="recipientAddress"
-                                v-model="recipientAddress"
-                                type="text"
-                                required
-                                placeholder="Recipient"
-                                class="w-full text-sm rounded-lg flex-grow pl-12 py-2 pr-20 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
-                                style="border-color: #24ad7c"
-                              />
-                              <div class="absolute right-3 flex space-x-2">
-                                <div
-                                  @click="setRecipientAddressToSelf"
-                                  class="cursor-pointer"
-                                >
-                                  <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke-width="1.5"
-                                    stroke="currentColor"
-                                    class="h-6 w-6 text-white"
-                                  >
-                                    <path
-                                      stroke-linecap="round"
-                                      stroke-linejoin="round"
-                                      d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
-                                    />
-                                  </svg>
-                                </div>
-                                <div
-                                  @click="openScanOverlay"
-                                  class="cursor-pointer"
-                                >
-                                  <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke-width="1.5"
-                                    stroke="currentColor"
-                                    class="h-6 w-6 text-white"
-                                  >
-                                    <path
-                                      stroke-linecap="round"
-                                      stroke-linejoin="round"
-                                      d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
-                                    />
-                                    <path
-                                      stroke-linecap="round"
-                                      stroke-linejoin="round"
-                                      d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
-                                    />
-                                  </svg>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </form>
-                      <p class="text-sm text-gray-400 text-left mt-5">
-                        For optimal k-anonymity, we advise you to unshield
-                        exactly 10 PAS at the time. In the future we will
-                        provide a score including timing and popular amounts to
-                        enhance unlinkability of your actions.
-                      </p>
-
-                      <div class="flex justify-between items-center mt-5">
-                        <label
-                          for="unshieldAmount"
-                          class="text-sm font-medium leading-6 text-white"
-                          >Amount</label
-                        >
-
-                        <span class="text-xs text-gray-400"
-                          >Available private balance:
-                          {{ accountStore.getIncogniteeHumanBalance }}</span
-                        >
-                      </div>
-                      <input
-                        id="unshieldAmount"
-                        v-model="unshieldAmount"
-                        type="number"
-                        step="0.1"
-                        :min="1.1"
-                        :max="
-                          accountStore.incogniteeBalance / Math.pow(10, 10) -
-                          0.1
-                        "
-                        required
-                        class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
-                        style="border-color: #24ad7c"
-                      />
-                      <!-- Fee description -->
-                      <div class="text-right">
-                        <span class="text-xs text-gray-400"
-                          >Fee: 30m PAS for Incognitee</span
-                        >
-                      </div>
-
-                      <div
-                        class="absolute bottom-0 left-0 w-full p-4 bg-gray-800"
-                      >
-                        <button
-                          type="submit"
-                          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-                        >
-                          Unshield
-                        </button>
-                      </div>
-                    </div>
-                  </form>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot as="template" :show="showReceiveOverlay">
-      <Dialog
-        class="fixed inset-0 z-20 flex items-center justify-center"
-        @close="closeReceiveOverlay"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div
-          class="fixed inset-0 z-10 w-full h-full flex items-start justify-center p-4"
-        >
-          <!-- Anpassung hier -->
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <DialogPanel
-              class="relative w-full h-full max-w-sm mx-auto bg-gray-800 rounded-lg shadow-xl flex flex-col px-4 pb-4 pt-5 text-left transition-all sm:my-8 sm:max-w-sm sm:p-6"
-            >
-              <div class="absolute right-0 top-0 pr-4 pt-4">
-                <button
-                  type="button"
-                  class="text-gray-400 hover:text-gray-500"
-                  @click="closeReceiveOverlay"
-                >
-                  <span class="sr-only">Close</span>
-                  <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>
-              <div class="flex-grow flex flex-col justify-start">
-                <!-- Anpassung hier -->
-                <div class="mt-3 text-center sm:mt-5">
-                  <DialogTitle
-                    as="h3"
-                    class="text-base font-semibold leading-6 text-white"
-                  >
-                    Receive
-                  </DialogTitle>
-                  <div class="mt-5">
-                    <p class="text-sm text-gray-400 text-left my-4">
-                      Share your address with the sender. You can either have
-                      them scan this QR code or send them a private message.
-                    </p>
-                  </div>
-                  <div class="mt-5 qrcode-container">
-                    <qrcode :value="accountStore.getAddress"></qrcode>
-                  </div>
-
-                  <div class="flex flex-col mt-5">
-                    <div
-                      class="w-full mt-5 mb-2 text-sm font-medium leading-6 text-white font-semibold"
-                    >
-                      Your address:
-                    </div>
-                    <div class="relative flex items-center rounded-lg">
-                      <input
-                        id="accountAddress"
-                        type="text"
-                        :value="accountStore.getAddress"
-                        readonly
-                        class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
-                        style="border-color: #24ad7c"
-                      />
-                      <div class="absolute right-3 flex space-x-2">
-                        <div
-                          @click="copyOwnAddressToClipboard"
-                          class="cursor-pointer"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                            class="size-6"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot
-      as="template"
-      :show="showPrivateSendOverlay && !showScanOverlay"
-    >
-      <Dialog class="relative z-20" @close="closePrivateSendOverlay">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed mb-5 p-4 inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div
-          class="fixed inset-0 z-10 w-screen min-h-screen flex items-center justify-center p-4"
-        >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <DialogPanel
-              class="w-full h-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all flex flex-col sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
-            >
-              <div class="absolute right-0 top-0 pr-4 pt-4">
-                <button
-                  type="button"
-                  class="text-gray-400 hover:text-gray-500"
-                  @click="closePrivateSendOverlay"
-                >
-                  <span class="sr-only">Close</span>
-                  <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>
-              <div class="flex-grow">
-                <div class="mt-3 text-center sm:mt-5">
-                  <DialogTitle
-                    as="h3"
-                    class="text-base font-semibold leading-6 text-white"
-                    >Send Privately
-                  </DialogTitle>
-                  <div class="mt-5">
-                    <p class="text-sm text-gray-400 text-left my-4">
-                      Sending privately means that only you and the recipient
-                      know who sent how much to whom.
-                    </p>
-                  </div>
-                  <form class="mt-5" @submit.prevent="submitSendForm">
-                    <div class="flex flex-col">
-                      <label
-                        for="recipientAddress"
-                        class="text-sm font-medium leading-6 text-white text-left"
-                        >Recipient</label
-                      >
-                      <div class="relative flex items-center rounded-lg">
-                        <input
-                          id="recipientAddress"
-                          v-model="recipientAddress"
-                          type="text"
-                          required
-                          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input pr-12"
-                          style="border-color: #24ad7c"
-                          placeholder="Recipient"
-                        />
-                        <div class="absolute right-3 flex space-x-2">
-                          <div @click="openScanOverlay" class="cursor-pointer">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke-width="1.5"
-                              stroke="currentColor"
-                              class="h-6 w-6 text-white"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
-                              />
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="mt-10">
-                      <!-- Label and available balance -->
-                      <div class="flex justify-between items-center">
-                        <label
-                          for="sendAmount"
-                          class="text-sm font-medium leading-6 text-white"
-                          >Amount</label
-                        >
-
-                        <span class="text-xs text-gray-400"
-                          >Available private balance:
-                          {{ accountStore.getIncogniteeHumanBalance }}</span
-                        >
-                      </div>
-
-                      <!-- Input field -->
-                      <div>
-                        <input
-                          id="sendAmount"
-                          v-model="sendAmount"
-                          type="number"
-                          step="0.01"
-                          :min="0.1"
-                          :max="
-                            accountStore.incogniteeBalance / Math.pow(10, 10) -
-                            0.1
-                          "
-                          required
-                          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 text-right"
-                          style="border-color: #24ad7c"
-                          placeholder="Amount"
-                        />
-                      </div>
-
-                      <!-- Fee description -->
-                      <div class="text-right">
-                        <span class="text-xs text-gray-400"
-                          >Fee: 10m PAS for Incognitee</span
-                        >
-                      </div>
-                    </div>
-
-                    <div
-                      class="absolute bottom-0 left-0 w-full p-4 bg-gray-800"
-                    >
-                      <button
-                        type="submit"
-                        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-                      >
-                        Transfer
-                      </button>
-                    </div>
-                  </form>
-                </div>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot as="template" :show="showScanOverlay">
-      <Dialog class="relative z-20" @close="closeScanOverlay">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div class="fixed inset-0 z-20 w-screen overflow-y-auto">
-          <div
-            class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
-          >
-            <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogPanel
-                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-sm sm:p-6"
-              >
-                <div class="absolute right-0 top-0 pr-4 pt-4">
-                  <button
-                    type="button"
-                    class="text-gray-400 hover:text-gray-500"
-                    @click="closeScanOverlay"
-                  >
-                    <span class="sr-only">Close</span>
-                    <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>
-                <div class="mt-3 text-center sm:mt-5">
-                  <DialogTitle
-                    as="h3"
-                    class="text-base font-semibold leading-6 text-white"
-                    >Scan recipient's QR code
-                  </DialogTitle>
-
-                  <div class="mt-6 qrcode-container">
-                    <qrcode-stream @detect="onDecode"></qrcode-stream>
-                  </div>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <TransitionRoot as="template" :show="showNewWalletOverlay">
-      <Dialog class="relative z-10" @close="closeNewWalletOverlay">
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="fixed inset-0 bg-black bg-opacity-80 transition-opacity"
-          />
-        </TransitionChild>
-
-        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-          <div
-            class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
-          >
-            <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogPanel
-                class="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-sm sm:p-6"
-              >
-                <div class="absolute right-0 top-0 pr-4 pt-4">
-                  <button
-                    type="button"
-                    class="text-gray-400 hover:text-gray-500"
-                    @click="closeNewWalletOverlay"
-                  >
-                    <span class="sr-only">Close</span>
-                    <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>
-                <div>
-                  <div
-                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"
-                  >
-                    <CheckIcon
-                      class="h-6 w-6 text-green-600"
-                      aria-hidden="true"
-                    />
-                  </div>
-
-                  <div class="mt-3 text-center sm:mt-5">
-                    <DialogTitle
-                      as="h3"
-                      class="text-base font-semibold leading-6 text-white"
-                      >New Wallet!
-                    </DialogTitle>
-                    <div class="mt-2">
-                      <p class="text-sm text-gray-400">
-                        We have created a new wallet for you.
-                      </p>
-
-                      <div class="flex flex-col mt-5">
-                        <div class="relative flex items-center rounded-lg">
-                          <input
-                            id="accountAddress"
-                            type="text"
-                            :value="accountStore.getAddress"
-                            readonly
-                            class="w-full text-sm rounded-lg flex-grow pr-14 py-2 bg-cool-900 text-white placeholder-gray-500 border border-green-500 truncate-input"
-                            style="border-color: #24ad7c"
-                          />
-                          <div class="absolute right-3 flex space-x-2">
-                            <div
-                              @click="copyOwnAddressToClipboard"
-                              class="cursor-pointer"
-                            >
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke-width="1.5"
-                                stroke="currentColor"
-                                class="size-6"
-                              >
-                                <path
-                                  stroke-linecap="round"
-                                  stroke-linejoin="round"
-                                  d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-                                />
-                              </svg>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="mt-5">
-                        <a
-                          href="https://faucet.polkadot.io/paseo"
-                          target="_blank"
-                        >
-                          <button
-                            type="button"
-                            class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm"
-                          >
-                            Get free PAS tokens from faucet
-                          </button>
-                        </a>
-                      </div>
-                      <p class="text-sm text-gray-400 mt-4 text-left">
-                        In order to keep your wallet, please store a bookmark to
-                        the current url which includes your secret
-                        <strong>NOW</strong>. (i.e. type Ctrl+D to bookmark this
-                        page). If you lose the bookmark, you will lose access to
-                        your wallet. If you share your personal url with others,
-                        they can spend your funds. The purpose of this demo is
-                        not security but optimal user experience for testing
-                        purposes.
-                      </p>
-                      <p class="text-sm text-gray-400 text-left my-4">
-                        You will have zero funds. Please tap "Get free PAS
-                        tokens from faucet" and go to Paseo Faucet to get your
-                        first PAS tokens.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-
-    <div v-if="showStatusOverlay" class="status-overlay">
-      <div class="status">
-        <div class="spinner" />
-        <div>{{ txStatus }}</div>
-        <button @click="closeStatusOverlay" class="mt-8">close</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Paseo from "@/assets/img/paseo-logo.svg";
-import Polkadot from "@/assets/img/polkadot-logo.svg";
-import USDC from "@/assets/img/usdc-logo.svg";
-
-import { useAccount } from "@/store/account.ts";
-import { useIncognitee } from "@/store/incognitee.ts";
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { CheckIcon } from "@heroicons/vue/24/outline";
-import { ApiPromise, WsProvider } from "@polkadot/api";
-import { Keyring } from "@polkadot/keyring";
-import { formatBalance, hexToU8a, u8aToHex } from "@polkadot/util";
-import {
-  cryptoWaitReady,
-  mnemonicGenerate,
-  mnemonicToMiniSecret,
-} from "@polkadot/util-crypto";
-import { useInterval } from "@vueuse/core";
-import { onMounted, ref, watch } from "vue";
-import Qrcode from "vue-qrcode";
-import { QrcodeStream } from "vue-qrcode-reader";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-const accountStore = useAccount();
-const incogniteeStore = useIncognitee();
-const isFetchingPaseoBalance = ref(true);
-const isFetchingIncogniteeBalance = ref(true);
-
-const existential_deposit_paseo = 10000000000;
-const txStatus = ref("");
-const recipientAddress = ref("");
-const sendAmount = ref(1.0);
-const shieldAmount = ref(1.0);
-const unshieldAmount = ref(10.0);
-const scanResult = ref("No QR code data yet");
-
-let api: ApiPromise | null = null;
-
-const tabs = [
-  { name: "Public Balance", href: "#", current: true },
-  { name: "Private Balance", href: "#", current: false },
-];
-
-const currentTab = ref("public");
-
-const selectTab = (tab) => {
-  currentTab.value = tab;
-};
-
-const submitSendForm = () => {
-  // Handle the form submission here
-  console.log("submitting send form");
-  openStatusOverlay();
-  closePrivateSendOverlay();
-  sendPrivately();
-};
-const submitShieldForm = () => {
-  // Handle the form submission here
-  openStatusOverlay();
-  closeShieldOverlay();
-  shield();
-};
-const submitUnshieldForm = () => {
-  // Handle the form submission here
-  openStatusOverlay();
-  closeUnshieldOverlay();
-  unshield();
-};
-
-const setRecipientAddressToSelf = () => {
-  recipientAddress.value = accountStore.getAddress;
-};
-
-const onDecode = (decodeResult) => {
-  console.log("QR scan decoded: " + decodeResult[0].rawValue);
-  scanResult.value = decodeResult[0].rawValue;
-  recipientAddress.value = decodeResult[0].rawValue;
-  closeScanOverlay();
-};
-
-const txResHandlerPaseo = ({ events = [], status, txHash }) => {
-  status.isFinalized
-    ? (txStatus.value = `😀 Finalized. You should see your Incognitee balance increase in seconds. Please proceed to the next tab and invite a friend`)
-    : (txStatus.value = `⌛ Current transaction status: ${status.type}. please be patient a few more seconds. you should see your Paseo balance going down`);
-
-  // Loop through Vec<EventRecord> to display all events
-  events.forEach(({ _, event: { data, method, section } }) => {
-    if (section + ":" + method === "system:ExtrinsicFailed") {
-      // extract the data for this event
-      const [dispatchError, dispatchInfo] = data;
-      console.log(`dispatchinfo: ${dispatchInfo}`);
-      let errorInfo;
-
-      // decode the error
-      if (dispatchError.isModule) {
-        // for module errors, we have the section indexed, lookup
-        // (For specific known errors, we can also do a check against the
-        // api.errors.<module>.<ErrorName>.is(dispatchError.asModule) guard)
-        const mod = dispatchError.asModule;
-        const error = api.registry.findMetaError(
-          new Uint8Array([
-            mod.index.toNumber(),
-            bnFromHex(mod.error.toHex().slice(0, 4)).toNumber(),
-          ]),
-        );
-        const message = `${error.section}.${error.name}${
-          Array.isArray(error.docs)
-            ? `(${error.docs.join("")})`
-            : error.docs || ""
-        }`;
-
-        errorInfo = `${message}`;
-        console.log(`Error-info::${JSON.stringify(error)}`);
-      } else {
-        // Other, CannotLookup, BadOrigin, no extra info
-        errorInfo = dispatchError.toString();
-      }
-      txStatus.value = `😞 Transaction Failed! ${section}.${method}::${errorInfo}`;
-    } else if (section + ":" + method === "system:ExtrinsicSuccess") {
-      txStatus.value`❤️️ Transaction successful! please proceed to the next tab and invite a friend`;
-    }
-  });
-};
-
-const txErrHandlerPaseo = (err) =>
-  (txStatus.value = `😞 Transaction Failed: ${err.toString()}`);
-const shield = async () => {
-  console.log("shielding .....");
-  txStatus.value = "⌛ connecting to Paseo....please be patient";
-  if (incogniteeStore.vault) {
-    const balance = accountStore.paseoBalance;
-    const amount = Math.pow(10, 10) * shieldAmount.value;
-    console.log(`sending ${amount} to vault: ${incogniteeStore.vault}`);
-    const wsProvider = new WsProvider("wss://rpc.ibp.network/paseo");
-    const api = await ApiPromise.create({ provider: wsProvider });
-    console.log("api initialized for shielding");
-    await api.tx.balances
-      .transferKeepAlive(incogniteeStore.vault, amount)
-      .signAndSend(accountStore.account, txResHandlerPaseo)
-      .catch(txErrHandlerPaseo);
-  }
-};
-
-const unshield = () => {
-  console.log("will unshield 30% of your private funds to same account on L1");
-  txStatus.value = "⌛ will unshield to L1";
-  const balance = accountStore.incogniteeBalance;
-  const amount = Math.pow(10, 10) * unshieldAmount.value;
-  const signer = accountStore.account;
-  console.log(
-    `sending ${formatBalance(amount)} from ${
-      signer.address
-    } privately to ${recipientAddress.value} on L1 (shard: ${incogniteeStore.shard}`,
-  );
-  incogniteeStore.api
-    .balanceUnshieldFunds(
-      signer,
-      incogniteeStore.shard,
-      incogniteeStore.fingerprint,
-      signer.address,
-      recipientAddress.value,
-      amount,
-    )
-    .then((hash) => {
-      txStatus.value = "😀 Triggered unshielding of funds successfully.";
-      console.log(`trustedOperationHash: ${hash}`);
-    });
-};
-
-const sendPrivately = () => {
-  console.log("sending funds on incognitee");
-  txStatus.value = "⌛ sending funds privately on incognitee";
-  const amount = Math.pow(10, 10) * sendAmount.value;
-  const signer = accountStore.account;
-  console.log(
-    `sending ${formatBalance(amount)} from ${signer.address} privately to ${recipientAddress.value}`,
-  );
-  incogniteeStore.api
-    .trustedBalanceTransfer(
-      signer,
-      incogniteeStore.shard,
-      incogniteeStore.fingerprint,
-      signer.address,
-      recipientAddress.value,
-      amount,
-    )
-    .then((hash) => {
-      console.log(`trustedOperationHash: ${hash}`);
-      txStatus.value = "😀 Success";
-    });
-};
-
-const fetchIncogniteeBalance = async () => {
-  if (!incogniteeStore.apiReady) return;
-  if (!accountStore.account) return;
-  incogniteeStore.api
-    .getBalance(accountStore.account, incogniteeStore.shard)
-    .then((balance) => {
-      console.log(
-        `current account balance L2: ${balance} on shard ${incogniteeStore.shard}`,
-      );
-      accountStore.setIncogniteeBalance(balance);
-      isFetchingIncogniteeBalance.value = false;
-    });
-};
-
-const pollCounter = useInterval(2000);
-
-watch(pollCounter, async () => {
-  console.log("ping: " + pollCounter.value);
-  await fetchIncogniteeBalance();
-});
-
-watch(accountStore, async () => {
-  //todo! only reinitialize if account changes
-  if (accountStore.getAddress === "none") {
-    console.log("skipping api init. no address");
-    return;
-  }
-  if (api?.isReady) {
-    console.log(
-      "skipping api init. It seems the Paseo api is already subscribed to balance changes",
-    );
-    return;
-  }
-
-  console.log("trying to init api");
-  const wsProvider = new WsProvider("wss://rpc.ibp.network/paseo");
-  api = await ApiPromise.create({ provider: wsProvider });
-  api.query.system.account(
-    accountStore.account.address,
-    ({ data: { free: currentFree } }) => {
-      console.log("paseo balance:" + currentFree);
-      accountStore.paseoBalance = Number(currentFree);
-      isFetchingPaseoBalance.value = false;
-    },
-  );
-  // for quicker responsiveness we dont wait until the next regular poll, but trigger the balance fetch here
-  fetchIncogniteeBalance().then(() =>
-    console.log("fetched incognitee balance"),
-  );
-});
-
-const copyOwnAddressToClipboard = () => {
-  navigator.clipboard
-    .writeText(accountStore.getAddress)
-    .then(() =>
-      alert(
-        "copied your account address to clipboard. Please paste it into the address field on the Paseo faucet.",
-      ),
-    );
-};
-
-onMounted(() => {
-  incogniteeStore.initializeApi();
-
-  const seedHex = router.currentRoute.value.query.seed;
-  if (seedHex) {
-    console.log("found seed in url: " + seedHex);
-    cryptoWaitReady().then(() => {
-      const localKeyring = new Keyring({ type: "sr25519" });
-      const account = localKeyring.addFromSeed(hexToU8a(seedHex));
-      accountStore.setAccount(account);
-    });
-  } else {
-    console.log("no seed found in url. will automatically create fresh wallet");
-    cryptoWaitReady().then(() => {
-      const generatedMnemonic = mnemonicGenerate();
-      const localKeyring = new Keyring({ type: "sr25519", ss58Format: 42 });
-      const newAccount = localKeyring.addFromMnemonic(generatedMnemonic, {
-        name: "fresh",
-      });
-      const seed = mnemonicToMiniSecret(generatedMnemonic);
-      const privateKeyHex = u8aToHex(seed);
-      console.log(`Private Key in Hex: ${privateKeyHex}`);
-      // change url to contain new seed to allow bookmarking
-      router.push({
-        query: { seed: privateKeyHex },
-      });
-      accountStore.setAccount(newAccount);
-      openNewWalletOverlay();
-    });
-  }
-});
-
-const open = ref(true);
-
-const showAssetsInfo = ref(false);
-const openAssetsInfo = () => {
-  showAssetsInfo.value = true;
-};
-const closeAssetsInfo = () => {
-  showAssetsInfo.value = false;
-};
-
-const showPrivacyInfo = ref(false);
-const openPrivacyInfo = () => {
-  showPrivacyInfo.value = true;
-};
-const closePrivacyInfo = () => {
-  showPrivacyInfo.value = false;
-};
-const privacyInfo = ref(null);
-const closeOnOutsideClick = (event) => {
-  if (event.target === privacyInfo.value) {
-    showPrivacyInfo.value = false;
-  }
-};
-
-const showNewWalletOverlay = ref(false);
-const openNewWalletOverlay = () => {
-  showNewWalletOverlay.value = true;
-};
-const closeNewWalletOverlay = () => {
-  showNewWalletOverlay.value = false;
-};
-const showShieldOverlay = ref(false);
-const openShieldOverlay = () => {
-  showShieldOverlay.value = true;
-};
-const closeShieldOverlay = () => {
-  showShieldOverlay.value = false;
-};
-
-const showFaucetOverlay = ref(false);
-const openFaucetOverlay = () => {
-  showFaucetOverlay.value = true;
-};
-const closeFaucetOverlay = () => {
-  showFaucetOverlay.value = false;
-};
-
-const showUnshieldOverlay = ref(false);
-const openUnshieldOverlay = () => {
-  unshieldAmount.value = 10;
-  showUnshieldOverlay.value = true;
-};
-const closeUnshieldOverlay = () => {
-  showUnshieldOverlay.value = false;
-};
-const showReceiveOverlay = ref(false);
-const openReceiveOverlay = () => {
-  showReceiveOverlay.value = true;
-};
-const closeReceiveOverlay = () => {
-  showReceiveOverlay.value = false;
-};
-const showPrivateSendOverlay = ref(false);
-const openPrivateSendOverlay = () => {
-  console.log(`openSendOverlay (scanoverlay=${showScanOverlay.value})`);
-  showPrivateSendOverlay.value = true;
-};
-const closePrivateSendOverlay = () => {
-  console.log("closePrivateSendOverlay");
-  showPrivateSendOverlay.value = false;
-};
-
-const showScanOverlay = ref(false);
-const openScanOverlay = () => {
-  scanResult.value = "No QR code data yet";
-  showScanOverlay.value = true;
-};
-const closeScanOverlay = () => {
-  console.log("closeScanOverlay");
-  showScanOverlay.value = false;
-};
-const showStatusOverlay = ref(false);
-const openStatusOverlay = () => {
-  showStatusOverlay.value = true;
-};
-const closeStatusOverlay = () => {
-  showStatusOverlay.value = false;
-  showPrivateSendOverlay.value = false;
-  showShieldOverlay.value = false;
-  showUnshieldOverlay.value = false;
-};
-</script>
-
-<style scoped>
-.border-green-500 {
-  border-color: #24ad7c;
-}
-
-.bg-gray-800 {
-  background-color: #1f2937;
-}
-
-.text-white {
-  color: #ffffff;
-}
-
-.wallet {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  flex-grow: 1;
-}
-
-.truncate-input {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.balance {
-  font-size: 48px;
-  padding: 20px 20px;
-}
-
-.balance-naked {
-  font-size: 24px;
-  padding: 20px 20px;
-}
-
-h1 {
-  font-size: 1em; /* Adjust as needed */
-  font-weight: bold; /* Makes the text bold */
-  color: #999; /* Change color as needed */
-  text-align: center; /* Centers the text */
-  margin-bottom: 20px; /* Adds space below the heading */
-}
-
-.currency-selector {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-}
-
-.currency-logo {
-  height: 50px; /* Adjust as needed */
-  width: 50px; /* Adjust as needed */
-}
-
-.buttons {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-}
-
-hr {
-  border: none;
-  border-top: 1px #222; /* Change color as needed */
-  color: #111; /* Change color as needed */
-  background-color: #333; /* Change color as needed */
-  height: 1px; /* Adjust as needed */
-}
-
-.privacy-separator {
-  width: 90%;
-  text-align: center;
-  color: #555;
-}
-
-.alert-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.alert {
-  background: #222;
-  padding: 20px;
-  width: 90%;
-  border-radius: 10px;
-  overflow: auto;
-  max-height: 90%;
-}
-
-.action-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.action {
-  background: #222;
-  padding: 20px;
-  width: 90%;
-  border-radius: 10px;
-  overflow: auto;
-  max-height: 90%;
-}
-
-.status-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.status {
-  background: #269;
-  padding: 20px;
-  width: 90%;
-  border-radius: 10px;
-}
-
-.qrcode-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-
-.qrcode {
-  width: min(90vw, 80vh);
-  height: min(90vw, 80vh);
-}
-
-.form-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.form-container input {
-  background-color: #333;
-  color: #fff; /* You might want to change the text color to ensure it's readable against the dark background */
-}
-
-.form-container input#amount {
-  font-size: 2em; /* Make the font size twice as large */
-  text-align: center; /* Center the text */
-  width: 50%; /* Reduce the width by 50% */
-}
-
-.incognitee-border-gradient {
-  width: 100%;
-  height: 100%;
-  background: url("/img/global/bg-line.svg") no-repeat center center;
-  background-size: cover;
-}
-
-.spinner {
-  border: 2px solid #f3f3f3; /* Light grey */
-  border-top: 2px solid #3498db; /* Blue */
-  border-radius: 50%;
-  width: 1em; /* Adjust the size here */
-  height: 1em; /* Adjust the size here */
-  animation: spin 2s linear infinite;
-  vertical-align: middle; /* Align with the text */
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/store/paseo.ts b/store/paseo.ts
deleted file mode 100644
index 7249a2c..0000000
--- a/store/paseo.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineStore } from "pinia";
-
-export const usePaseo = defineStore("paseo", {
-  state: () => ({
-    api: null,
-  }),
-});
diff --git a/yarn.lock b/yarn.lock
index a34ce68..a729af8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -495,32 +495,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@encointer/node-api@npm:^0.14.1":
-  version: 0.14.1
-  resolution: "@encointer/node-api@npm:0.14.1"
+"@encointer/node-api@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "@encointer/node-api@npm:0.14.2"
   dependencies:
-    "@encointer/types": "npm:^0.14.1"
-    "@polkadot/api": "npm:^11.0.2"
+    "@encointer/types": "npm:^0.14.2"
+    "@polkadot/api": "npm:^11.2.1"
     tslib: "npm:^2.6.2"
-  checksum: 10c0/11f869c02307edb3aa5ef5796bff3bc31d6b4b0c6d014e1bbd402b2979e00afe8adb87920613f69fbc9d120e4f9d8369b7af0f24a571db3ba26a435253f1caf4
+  checksum: 10c0/305149efef86dcc570a74fdf495cc59320959327b4ebe54f2acbbc51fb80ad4f9c8fc44eef6eaa8db7e0b47d5f4054a66f3a63a990065b8af83f9be8cff549ff
   languageName: node
   linkType: hard
 
-"@encointer/types@npm:^0.14.1":
-  version: 0.14.1
-  resolution: "@encointer/types@npm:0.14.1"
+"@encointer/types@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "@encointer/types@npm:0.14.2"
   dependencies:
-    "@polkadot/api": "npm:^11.0.2"
-    "@polkadot/types": "npm:^11.0.2"
-    "@polkadot/types-codec": "npm:^11.0.2"
+    "@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/a77509f6989f56e2cc3daf5d638c991f15a0f4b28aee506eb7aca750bf20a343371c7f39c8f43611ad8fd6d5d98f4436d597a8d7fe7b125fde58ce5ae0e679e0
+  checksum: 10c0/4ed9581f5cbc848c7a44d146c206c4bbc93cfa01b05c64e045b9538c5543a29256a92b2175f68559b2eaf885de61f025be7cc6c70fed69fdabf1ffc60aa7af13
   languageName: node
   linkType: hard
 
-"@encointer/util@npm:^0.14.1":
-  version: 0.14.1
-  resolution: "@encointer/util@npm:0.14.1"
+"@encointer/util@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "@encointer/util@npm:0.14.2"
   dependencies:
     "@babel/runtime": "npm:^7.18.9"
     "@polkadot/util": "npm:^12.6.2"
@@ -528,21 +528,21 @@ __metadata:
     "@types/bn.js": "npm:^5.1.5"
     assert: "npm:^2.0.0"
     bn.js: "npm:^5.2.1"
-  checksum: 10c0/4f41d05395c02ebaf36a5869e303f467ce011c0002cc8183cb340eaaa044058f7eab9dbc42dc1acae6cb124fbe13dd409a74614424f23e75e0f9e85acb97da4d
+  checksum: 10c0/e3d7bb44f59427f71bb9722a70f35e04b99620405a061b4c0d18acfde1737d286a21675af752b6df330aa2816e8cd90cff65077ab68185d815d741f249dadbb0
   languageName: node
   linkType: hard
 
-"@encointer/worker-api@npm:^0.14.1":
-  version: 0.14.1
-  resolution: "@encointer/worker-api@npm:0.14.1"
+"@encointer/worker-api@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "@encointer/worker-api@npm:0.14.2"
   dependencies:
-    "@encointer/node-api": "npm:^0.14.1"
-    "@encointer/types": "npm:^0.14.1"
-    "@encointer/util": "npm:^0.14.1"
+    "@encointer/node-api": "npm:^0.14.2"
+    "@encointer/types": "npm:^0.14.2"
+    "@encointer/util": "npm:^0.14.2"
     "@peculiar/webcrypto": "npm:^1.4.6"
-    "@polkadot/api": "npm:^11.0.2"
+    "@polkadot/api": "npm:^11.2.1"
     "@polkadot/keyring": "npm:^12.6.2"
-    "@polkadot/types": "npm:^11.0.2"
+    "@polkadot/types": "npm:^11.2.1"
     "@polkadot/util": "npm:^12.6.2"
     "@polkadot/util-crypto": "npm:^12.6.2"
     "@polkadot/wasm-crypto": "npm:^7.3.2"
@@ -552,7 +552,7 @@ __metadata:
     websocket-as-promised: "npm:^2.0.1"
   peerDependencies:
     "@polkadot/x-randomvalues": ^12.3.2
-  checksum: 10c0/766cd856e48f521f7a69513380d668870503151e6d05f8d5db2bd1736e3bbf971ecf5456ef597560ef2dff89ac03fb574d01558de499d574c0a8fb606d4305e3
+  checksum: 10c0/9043370b4b4a895021b46c8fe91f8d50cb3045dc9cb958f5b91e655355a38009f77984df8e751c8f511e3c88eb0317ffd4b8943d2ef61c08135ecb66b538affd
   languageName: node
   linkType: hard
 
@@ -2170,7 +2170,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:11.2.1, @polkadot/api@npm:^11.0.2":
+"@polkadot/api@npm:11.2.1, @polkadot/api@npm:^11.2.1":
   version: 11.2.1
   resolution: "@polkadot/api@npm:11.2.1"
   dependencies:
@@ -2283,7 +2283,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-codec@npm:11.2.1, @polkadot/types-codec@npm:^11.0.2":
+"@polkadot/types-codec@npm:11.2.1, @polkadot/types-codec@npm:^11.2.1":
   version: 11.2.1
   resolution: "@polkadot/types-codec@npm:11.2.1"
   dependencies:
@@ -2329,7 +2329,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:11.2.1, @polkadot/types@npm:^11.0.2":
+"@polkadot/types@npm:11.2.1, @polkadot/types@npm:^11.2.1":
   version: 11.2.1
   resolution: "@polkadot/types@npm:11.2.1"
   dependencies:
@@ -9969,7 +9969,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "nuxt-app@workspace:."
   dependencies:
-    "@encointer/worker-api": "npm:^0.14.1"
+    "@encointer/worker-api": "npm:^0.14.2"
     "@esbuild-plugins/node-globals-polyfill": "npm:^0.2.3"
     "@headlessui/vue": "npm:^1.7.22"
     "@heroicons/vue": "npm:^2.1.3"
@@ -9981,7 +9981,7 @@ __metadata:
     "@nuxt/ui": "npm:^2.15.2"
     "@nuxtjs/tailwindcss": "npm:^6.12.0"
     "@pinia/nuxt": "npm:^0.5.1"
-    "@polkadot/api": "npm:^11.0.2"
+    "@polkadot/api": "npm:^11.2.1"
     "@polkadot/keyring": "npm:^12.6.2"
     "@polkadot/util": "npm:^12.6.2"
     "@polkadot/util-crypto": "npm:^12.6.2"