refactor to wallet experience (#26)

* insert qrcode scanner on inviteFriend tab for testing. works

* show QR code of own address above scanner

* very basic mobile layout

* fetching paseo balance

* this enables incognitee worker-api and breaks the load

* qr scanner fills in address

* send, scan as overlays

* activate spinner

* basic overlays present. composed text for swap and gov

* shielding & unshielding functional

* sending functionality works too. new wallet bookmark alert as well

* inform about campaign end

* bump encointer-js and polkadot-js

* prettier

app.vue

@@ -1,5 +1,5 @@
-git
 <script setup lang="ts">
+import DefaultLayout from "./layouts/default.vue";
 import { defineAsyncComponent } from "vue";
 import { useAsyncData } from "#imports";
 import Footer from "@/components/Footer";
@@ -9,21 +9,7 @@ const Header = defineAsyncComponent(() => import("@/components/Header"));
 </script>
 
 <template>
-  <div class="wrapper">
-    <Header />
-    <div class="image-wrap">
-      <div class="container">
-        <img src="/img/global/bg-line.png" class="top-lines" alt="Lines" />
-      </div>
-    </div>
-    <div class="page-wrapper">
-      <NuxtPage />
-    </div>
-    <div class="container">
-      <img src="/img/global/bg-line.png" class="bottom-lines" alt="Lines" />
-    </div>
-    <Footer />
-  </div>
+  <NuxtLayout />
 </template>
 
 <style lang="scss">

components/Index/Main.vue

@@ -9,10 +9,29 @@
             <span class="gradient gradient_one">Test</span> Campaign
           </h1>
           <p class="paragraph paragraph_medium main__description margin_large">
-            Become one of the first users to help improving Incognitee and get a
-            chance to win one of the juicy prices.
+            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="paragraph paragraph_medium main__description margin_large">
+          <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

components/InviteFriendTab.vue

@@ -12,7 +12,13 @@
             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"
@@ -68,7 +74,8 @@ 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";
 
@@ -137,6 +144,11 @@ const inviteFriend = () => {
         "😀 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>