From 5d13f9dcc7f1e2a951927d0b34972c960ca53a06 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 25 Oct 2023 13:09:45 +0200
Subject: [PATCH 01/34] add basic wallet connection

---
 .env.example                           |  1 +
 nuxt.config.ts                         |  2 +
 src/components/TheHeader.vue           | 26 +++++++++
 src/components/TheNavigation.vue       | 27 +++++++++
 src/components/WalletConnectButton.vue | 20 +++++++
 src/pages/wallet/index.vue             | 23 ++++++++
 src/stores/aesdk.js                    |  2 +-
 src/stores/wallet.js                   | 78 ++++++++++++++++++++++++++
 8 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 src/components/WalletConnectButton.vue
 create mode 100644 src/pages/wallet/index.vue
 create mode 100644 src/stores/wallet.js

diff --git a/.env.example b/.env.example
index 6a227c9be..0b3870195 100644
--- a/.env.example
+++ b/.env.example
@@ -9,6 +9,7 @@ NUXT_PUBLIC_NETWORK_NAME=MAINNET
 NUXT_PUBLIC_NETWORK_ID=ae_mainnet
 NUXT_PUBLIC_ALTERNATIVE_NETWORK_URL=http://localhost:8081
 NUXT_PUBLIC_ALTERNATIVE_NETWORK_NAME=TESTNET
+NUXT_PUBLIC_NETWORK_ID="ae_mainnet"
 NUXT_PUBLIC_AE_TOKEN_ID=ct_J3zBY8xxjsRr3QojETNw48Eb38fjvEuJKkQ6KzECvubvEcvCa
 NUXT_PUBLIC_DEBUG_MODE=false
 NUXT_PUBLIC_SH_DEX_CONTRACTS='ct_2mfj3FoZxnhkSw5RZMcP8BfPoB1QR4QiYGNCdkAvLZ1zfF6paW;ct_azbNZ1XrPjXfqBqbAh1ffLNTQ1sbnuUDFvJrXjYz7JQA1saQ3'
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6406ad853..bd62b2958 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -33,6 +33,7 @@ export default defineNuxtConfig({
       WEBSOCKET_URL: process.env.WEBSOCKET_URL,
       DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
       NETWORK_NAME: process.env.NETWORK_NAME,
+      NETWORK_ID: process.env.NETWORK_ID,
       ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
       ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
       AE_TOKEN_ID: process.env.AE_TOKEN_ID,
@@ -41,6 +42,7 @@ export default defineNuxtConfig({
       SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
     },
   },
+
   postcss: {
     plugins: {
       autoprefixer: {},
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index fb6594215..241b0f58b 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -36,6 +36,18 @@
         :class="[
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
+      <div v-if="balance">
+        <!--        todo better condition-->
+        <app-identicon :id="aeSdk.address"/>
+        <value-hash-ellipsed
+          :hash="aeSdk.address"
+          link-to="/wallet"/>
+      </div>
+      <app-link
+        v-else
+        to="/wallet">
+        wallet
+      </app-link>
     </div>
     <div
       v-if="isSyncing"
@@ -46,8 +58,22 @@
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia'
+import TheNavigation from '@/components/TheNavigation'
+import AppLink from '@/components/AppLink'
+import AppIcon from '@/components/AppIcon'
+import { isDesktop } from '@/utils/screen'
+import NetworkSelect from '@/components/NetworkSelect'
+import { useWalletStore } from '~/stores/wallet'
 import { useStatus } from '@/stores/status'
 
+const walletStore = useWalletStore()
+
+const {
+  aeSdk,
+  balance,
+} = storeToRefs(walletStore)
+
 const route = useRoute()
 const isNavigationOpen = ref(false)
 
diff --git a/src/components/TheNavigation.vue b/src/components/TheNavigation.vue
index 3e3893bcf..6858d7325 100644
--- a/src/components/TheNavigation.vue
+++ b/src/components/TheNavigation.vue
@@ -156,5 +156,32 @@ function updateIsDesktopResolution() {
     display: flex;
     align-items: center;
   }
+
+  &__link {
+    color: var(--color-midnight);
+    display: block;
+    padding: var(--space-3) 0;
+    font-size: 12px;
+    line-height: 24px;
+    letter-spacing: 0.002em;
+
+    @media (--desktop) {
+      padding: 0;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &--disabled {
+      color: var(--color-midnight-35);
+      cursor: default;
+      pointer-events: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/WalletConnectButton.vue b/src/components/WalletConnectButton.vue
new file mode 100644
index 000000000..c5c9f6433
--- /dev/null
+++ b/src/components/WalletConnectButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <button @click="init()">
+    Connect Wallet
+  </button>
+</template>
+<script setup>
+
+import { useWalletStore } from '~/stores/wallet'
+
+const walletStore = useWalletStore()
+// const {
+//   initWallet,
+// } = storeToRefs(walletStore)
+
+const { initWallet } = walletStore
+
+async function init() {
+  await initWallet()
+}
+</script>
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
new file mode 100644
index 000000000..9a54d051c
--- /dev/null
+++ b/src/pages/wallet/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="">
+    Wallet
+    <wallet-connect-button/>
+    <br>
+    {{ walletInfo }}
+    <br>
+    {{ balance }}
+    <br>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useWalletStore } from '~/stores/wallet'
+
+const walletStore = useWalletStore()
+
+const {
+  walletInfo,
+  balance,
+} = storeToRefs(walletStore)
+</script>
diff --git a/src/stores/aesdk.js b/src/stores/aesdk.js
index e8bf50cde..cea50c380 100644
--- a/src/stores/aesdk.js
+++ b/src/stores/aesdk.js
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
-import { Node, AeSdk } from '@aeternity/aepp-sdk'
+import { AeSdk, Node } from '@aeternity/aepp-sdk'
 
 export const useAesdk = defineStore('aesdk', () => {
   const { NODE_URL } = useRuntimeConfig().public
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
new file mode 100644
index 000000000..2a71ed455
--- /dev/null
+++ b/src/stores/wallet.js
@@ -0,0 +1,78 @@
+import { defineStore } from 'pinia'
+import { useRuntimeConfig } from 'nuxt/app'
+import { AE_AMOUNT_FORMATS, AeSdkAepp, BrowserWindowMessageConnection, Node, walletDetector } from '@aeternity/aepp-sdk'
+
+export const useWalletStore = defineStore('wallet', () => {
+  const { NODE_URL } = useRuntimeConfig().public
+
+  const walletInfo = ref(null)
+  const aeSdk = ref(null)
+  const balance = ref(null)
+
+  async function initWallet() {
+    // todo reuse instance
+    const node = new Node(NODE_URL)
+    try {
+      const aeSdkOptions = {
+        nodes: [
+          { name: 'mainnet', instance: node },
+        ],
+        compilerUrl: 'https://compiler.aepps.com',
+      }
+
+      // connect to Superhero Wallet
+      // AeSdkAepp instance can't be in deep reactive https://stackoverflow.com/a/69010240
+      aeSdk.value = shallowReactive(new AeSdkAepp({
+        name: 'AEPP',
+        ...aeSdkOptions,
+        async onNetworkChange({ NETWORK_ID }) {
+          await connectToNode(NETWORK_ID)
+        },
+        async onAddressChange(addresses) {
+          console.info('onAddressChange ::', addresses)
+          await fetchAccountInfo()
+        },
+      }))
+      await scanForWallets()
+    } catch (error) {
+      console.log('failed')
+      throw error
+    }
+  }
+
+  async function scanForWallets() {
+    const foundWallet = await new Promise(resolve => {
+      const handleWallets = ({ newWallet }) => {
+        stopScan()
+        resolve(newWallet)
+      }
+      const scannerConnection = new BrowserWindowMessageConnection()
+      const stopScan = walletDetector(scannerConnection, handleWallets)
+    })
+
+    walletInfo.value = await aeSdk.value.connectToWallet(foundWallet.getConnection())
+    await aeSdk.value.subscribeAddress('subscribe', 'current')
+    await fetchAccountInfo()
+  }
+
+  // todo infra envs
+  async function fetchAccountInfo() {
+    balance.value = await aeSdk.value.getBalance(aeSdk.value.address, {
+      format: AE_AMOUNT_FORMATS.AE,
+    })
+  }
+
+  async function connectToNode(selectedNetworkId) {
+    aeSdk.value.selectNode(selectedNetworkId)
+    if (aeSdk.value.addresses().length) {
+      await fetchAccountInfo()
+    }
+  }
+
+  return {
+    initWallet,
+    walletInfo,
+    balance,
+    aeSdk,
+  }
+})

From bd91ef99b4b30d2c40458fabb21fd0fdb8787421 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 25 Oct 2023 14:01:56 +0200
Subject: [PATCH 02/34] fix header styles

---
 src/components/TheHeader.vue        | 10 +++-----
 src/components/TheNavigation.vue    |  2 +-
 src/components/TheWalletAccount.vue | 37 +++++++++++++++++++++++++++++
 src/pages/wallet/index.vue          | 21 +++++++++-------
 4 files changed, 53 insertions(+), 17 deletions(-)
 create mode 100644 src/components/TheWalletAccount.vue

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 241b0f58b..9382bf91e 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -36,13 +36,9 @@
         :class="[
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
-      <div v-if="balance">
-        <!--        todo better condition-->
-        <app-identicon :id="aeSdk.address"/>
-        <value-hash-ellipsed
-          :hash="aeSdk.address"
-          link-to="/wallet"/>
-      </div>
+      <the-wallet-account
+        v-if="balance"
+        :sdk="aeSdk"/>
       <app-link
         v-else
         to="/wallet">
diff --git a/src/components/TheNavigation.vue b/src/components/TheNavigation.vue
index 6858d7325..fe209de93 100644
--- a/src/components/TheNavigation.vue
+++ b/src/components/TheNavigation.vue
@@ -161,7 +161,7 @@ function updateIsDesktopResolution() {
     color: var(--color-midnight);
     display: block;
     padding: var(--space-3) 0;
-    font-size: 12px;
+    font-size: 13px;
     line-height: 24px;
     letter-spacing: 0.002em;
 
diff --git a/src/components/TheWalletAccount.vue b/src/components/TheWalletAccount.vue
new file mode 100644
index 000000000..c15e1e727
--- /dev/null
+++ b/src/components/TheWalletAccount.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="wallet-account">
+    <!--        todo better condition-->
+    <app-identicon
+      :id="sdk.address"
+      class="wallet-account__identicon"/>
+    <value-hash-ellipsed
+      class="wallet-account__link"
+      :hash="sdk.address"
+      link-to="/wallet"/>
+  </div>
+</template>
+<script setup>
+defineProps({
+  sdk: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.wallet-account {
+  display: flex;
+  align-items: center;
+
+  &__identicon {
+    margin-right: var(--space-2);
+  }
+
+  &__link {
+    font-family: var(--font-monospaced);
+    font-size: 13px;
+  }
+}
+
+</style>
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index 9a54d051c..ccb4ce2ee 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="">
-    Wallet
-    <wallet-connect-button/>
-    <br>
-    {{ walletInfo }}
-    <br>
-    {{ balance }}
-    <br>
-  </div>
+  <app-panel class="">
+    <div v-if="balance">
+      <br>
+      {{ walletInfo }}
+      <br>
+      {{ balance }}
+      <br>
+    </div>
+    <div v-else>
+      <wallet-connect-button/>
+    </div>
+  </app-panel>
 </template>
 
 <script setup>

From 3f9afabe3a5cda47069f10dc6fdfc2740db779f6 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 26 Oct 2023 14:18:51 +0200
Subject: [PATCH 03/34] add basic connection UI

---
 src/components/WalletConnectButton.vue | 10 ++---
 src/pages/wallet/index.vue             | 52 ++++++++++++++++++++++++--
 src/stores/wallet.js                   | 28 +++++++++++---
 3 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/src/components/WalletConnectButton.vue b/src/components/WalletConnectButton.vue
index c5c9f6433..42ee0a88d 100644
--- a/src/components/WalletConnectButton.vue
+++ b/src/components/WalletConnectButton.vue
@@ -1,17 +1,13 @@
 <template>
-  <button @click="init()">
+  <app-button @click="init()">
     Connect Wallet
-  </button>
+  </app-button>
 </template>
-<script setup>
 
+<script setup>
 import { useWalletStore } from '~/stores/wallet'
 
 const walletStore = useWalletStore()
-// const {
-//   initWallet,
-// } = storeToRefs(walletStore)
-
 const { initWallet } = walletStore
 
 async function init() {
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index ccb4ce2ee..ab43cdc56 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -1,26 +1,70 @@
 <template>
+  <Head>
+    <Title>Wallet Account</Title>
+  </Head>
+
+  <page-header>
+    Wallet Account
+    <template #tooltip>
+      <!--      todo hint-->
+      {{ transactionsHints.transaction }}
+    </template>
+  </page-header>
+
   <app-panel class="">
-    <div v-if="balance">
+    <template #heading>
+      {{ status === 'not installed' ? 'Wallet not found' : '' }}
+      {{ status === 'found' ? 'Connect Superhero wallet' : '' }}
+    </template>
+
+    <loader-indicator
+      v-if="status === 'scanning'"
+      label="Scanning for wallets"/>
+
+    <p
+      v-if="status === 'not installed'"
+      class="unexpected-error__paragraph">
+      In order to display wallet account information, the native Superhero wallet has to be installed on this device.
+    </p>
+
+    <div class="unexpected-error__container">
+      <app-button
+        v-if="status === 'not installed'"
+        to="https://wallet.superhero.com/">
+        Download Superhero Wallet
+      </app-button>
+      <div v-if="status === 'found'">
+        <wallet-connect-button/>
+      </div>
+    </div>
+
+    <div v-if="status === 'connected'">
       <br>
       {{ walletInfo }}
       <br>
       {{ balance }}
       <br>
     </div>
-    <div v-else>
-      <wallet-connect-button/>
-    </div>
   </app-panel>
 </template>
 
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
+import { transactionsHints } from '~/utils/hints/transactionsHints'
+import PageHeader from '~/components/PageHeader'
+import AppButton from '~/components/AppButton'
 
 const walletStore = useWalletStore()
+const { scanWallets } = walletStore
 
 const {
   walletInfo,
   balance,
+  status,
 } = storeToRefs(walletStore)
+
+onMounted(async() => {
+  await scanWallets()
+})
 </script>
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 2a71ed455..57c5c25fb 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -8,6 +8,8 @@ export const useWalletStore = defineStore('wallet', () => {
   const walletInfo = ref(null)
   const aeSdk = ref(null)
   const balance = ref(null)
+  const foundWallets = ref(null)
+  const status = ref(null)
 
   async function initWallet() {
     // todo reuse instance
@@ -20,8 +22,6 @@ export const useWalletStore = defineStore('wallet', () => {
         compilerUrl: 'https://compiler.aepps.com',
       }
 
-      // connect to Superhero Wallet
-      // AeSdkAepp instance can't be in deep reactive https://stackoverflow.com/a/69010240
       aeSdk.value = shallowReactive(new AeSdkAepp({
         name: 'AEPP',
         ...aeSdkOptions,
@@ -33,24 +33,37 @@ export const useWalletStore = defineStore('wallet', () => {
           await fetchAccountInfo()
         },
       }))
-      await scanForWallets()
+      await connect()
     } catch (error) {
       console.log('failed')
       throw error
     }
   }
 
-  async function scanForWallets() {
-    const foundWallet = await new Promise(resolve => {
+  async function scanWallets() {
+    status.value = 'scanning'
+    foundWallets.value = await new Promise(resolve => {
+      const timeout = setTimeout(() => {
+        status.value = 'not installed'
+
+        resolve(undefined)
+      }, 10000)
+
       const handleWallets = ({ newWallet }) => {
+        console.log('newWallet', newWallet)
+        status.value = 'found'
+        clearTimeout(timeout)
         stopScan()
         resolve(newWallet)
       }
       const scannerConnection = new BrowserWindowMessageConnection()
       const stopScan = walletDetector(scannerConnection, handleWallets)
     })
+  }
 
-    walletInfo.value = await aeSdk.value.connectToWallet(foundWallet.getConnection())
+  async function connect() {
+    walletInfo.value = await aeSdk.value.connectToWallet(foundWallets.value.getConnection())
+    status.value = 'connected'
     await aeSdk.value.subscribeAddress('subscribe', 'current')
     await fetchAccountInfo()
   }
@@ -70,6 +83,9 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   return {
+    foundWallets,
+    status,
+    scanWallets,
     initWallet,
     walletInfo,
     balance,

From 5d5f0c5facf234d826cfa9e572968ffe110d9432 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 26 Oct 2023 15:09:42 +0200
Subject: [PATCH 04/34] componentize UI

---
 src/components/WalletAccountPanel.vue    | 20 +++++++
 src/components/WalletConnectionPanel.vue | 73 ++++++++++++++++++++++++
 src/pages/wallet/index.vue               | 51 +++--------------
 src/stores/wallet.js                     | 11 +++-
 4 files changed, 108 insertions(+), 47 deletions(-)
 create mode 100644 src/components/WalletAccountPanel.vue
 create mode 100644 src/components/WalletConnectionPanel.vue

diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
new file mode 100644
index 000000000..a43652e47
--- /dev/null
+++ b/src/components/WalletAccountPanel.vue
@@ -0,0 +1,20 @@
+<template>
+  <app-panel>
+    <br>
+    {{ walletInfo }}
+    <br>
+    {{ balance }}
+    <br>
+  </app-panel>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useWalletStore } from '~/stores/wallet'
+
+const walletStore = useWalletStore()
+
+const {
+  walletInfo,
+  balance,
+} = storeToRefs(walletStore)
+</script>
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
new file mode 100644
index 000000000..b7b7d8e54
--- /dev/null
+++ b/src/components/WalletConnectionPanel.vue
@@ -0,0 +1,73 @@
+<template>
+  <app-panel class="">
+    <template
+      v-if="status !== 'scanning'"
+      #heading>
+      {{ title }}
+    </template>
+
+    <loader-indicator
+      v-if="status === 'scanning'"
+      label="Scanning for wallets"/>
+
+    <p
+      v-if="status === 'not installed'"
+      class="wallet-connection-panel__paragraph">
+      In order to display wallet account information, the native Superhero wallet has to be installed on this device.
+    </p>
+
+    <div class="wallet-connection-panel__container">
+      <app-button
+        v-if="status === 'not installed'"
+        to="https://wallet.superhero.com/">
+        Download Superhero wallet
+      </app-button>
+      <div v-if="status === 'found'">
+        <wallet-connect-button/>
+      </div>
+    </div>
+  </app-panel>
+</template>
+
+<script setup>
+// todo fix imports
+import { storeToRefs } from 'pinia'
+import { useWalletStore } from '~/stores/wallet'
+import AppButton from '~/components/AppButton'
+
+const walletStore = useWalletStore()
+
+const { status } = storeToRefs(walletStore)
+
+const title = computed(() => {
+  if (status.value === 'not installed') {
+    return 'Wallet not found'
+  } else if (status.value === 'found') {
+    return 'Connect Superhero wallet'
+  } else {
+    return null
+  }
+})
+</script>
+
+<style scoped>
+.wallet-connection-panel {
+  &__paragraph {
+    margin-bottom: var(--space-5);
+    @media (--desktop) {
+      &:last-of-type {
+        margin-bottom: var(--space-6);
+      }
+    }
+  }
+
+  &__container {
+    display: flex;
+    justify-content: center;
+
+    @media (--desktop) {
+      justify-content: flex-start;
+    }
+  }
+}
+</style>
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index ab43cdc56..5be3f7e9e 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -6,46 +6,13 @@
   <page-header>
     Wallet Account
     <template #tooltip>
-      <!--      todo hint-->
+      <!--      todo fix hint-->
       {{ transactionsHints.transaction }}
     </template>
   </page-header>
 
-  <app-panel class="">
-    <template #heading>
-      {{ status === 'not installed' ? 'Wallet not found' : '' }}
-      {{ status === 'found' ? 'Connect Superhero wallet' : '' }}
-    </template>
-
-    <loader-indicator
-      v-if="status === 'scanning'"
-      label="Scanning for wallets"/>
-
-    <p
-      v-if="status === 'not installed'"
-      class="unexpected-error__paragraph">
-      In order to display wallet account information, the native Superhero wallet has to be installed on this device.
-    </p>
-
-    <div class="unexpected-error__container">
-      <app-button
-        v-if="status === 'not installed'"
-        to="https://wallet.superhero.com/">
-        Download Superhero Wallet
-      </app-button>
-      <div v-if="status === 'found'">
-        <wallet-connect-button/>
-      </div>
-    </div>
-
-    <div v-if="status === 'connected'">
-      <br>
-      {{ walletInfo }}
-      <br>
-      {{ balance }}
-      <br>
-    </div>
-  </app-panel>
+  <wallet-account-panel v-if="status === 'connected'"/>
+  <wallet-connection-panel v-else/>
 </template>
 
 <script setup>
@@ -53,18 +20,14 @@ import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
 import { transactionsHints } from '~/utils/hints/transactionsHints'
 import PageHeader from '~/components/PageHeader'
-import AppButton from '~/components/AppButton'
+import WalletAccountPanel from '~/components/WalletAccountPanel'
+import WalletConnectionPanel from '~/components/WalletConnectionPanel'
 
 const walletStore = useWalletStore()
 const { scanWallets } = walletStore
+const { status } = storeToRefs(walletStore)
 
-const {
-  walletInfo,
-  balance,
-  status,
-} = storeToRefs(walletStore)
-
-onMounted(async() => {
+onBeforeMount(async() => {
   await scanWallets()
 })
 </script>
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 57c5c25fb..3f6ed3ce4 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -12,7 +12,9 @@ export const useWalletStore = defineStore('wallet', () => {
   const status = ref(null)
 
   async function initWallet() {
+    console.log('init')
     // todo reuse instance
+    // todo improve naming
     const node = new Node(NODE_URL)
     try {
       const aeSdkOptions = {
@@ -41,16 +43,16 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   async function scanWallets() {
+    console.log('scan')
+
     status.value = 'scanning'
     foundWallets.value = await new Promise(resolve => {
       const timeout = setTimeout(() => {
         status.value = 'not installed'
-
         resolve(undefined)
       }, 10000)
 
       const handleWallets = ({ newWallet }) => {
-        console.log('newWallet', newWallet)
         status.value = 'found'
         clearTimeout(timeout)
         stopScan()
@@ -62,9 +64,12 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   async function connect() {
+    console.log('connect')
+
     walletInfo.value = await aeSdk.value.connectToWallet(foundWallets.value.getConnection())
-    status.value = 'connected'
     await aeSdk.value.subscribeAddress('subscribe', 'current')
+    status.value = 'connected'
+
     await fetchAccountInfo()
   }
 

From d40bb984b078d25899b59d2e905094849aacb361 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 26 Oct 2023 15:27:38 +0200
Subject: [PATCH 05/34] print basic account information

---
 src/components/WalletAccountPanel.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index a43652e47..ca24bcb0d 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -1,20 +1,25 @@
 <template>
-  <app-panel>
-    <br>
-    {{ walletInfo }}
-    <br>
-    {{ balance }}
-    <br>
-  </app-panel>
+  <account-details-panel
+    v-if="accountDetails"
+    class="account__account-details-panel"
+    :account-details="accountDetails"/>
 </template>
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
+import { useAccountStore } from '@/stores/accountDetails'
+import AccountDetailsPanel from '@/components/AccountDetailsPanel'
 
 const walletStore = useWalletStore()
 
 const {
-  walletInfo,
-  balance,
+  aeSdk,
 } = storeToRefs(walletStore)
+
+const accountStore = useAccountStore()
+const { accountDetails } = storeToRefs(accountStore)
+const { fetchAccount } = accountStore
+
+fetchAccount(aeSdk.value.address)
+
 </script>

From ab760252d4b78dac5182a5925f8014e9aab99678 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 31 Oct 2023 14:58:04 +0100
Subject: [PATCH 06/34] fix scanning wallet

---
 src/components/WalletAccountPanel.vue | 5 +----
 src/pages/wallet/index.vue            | 9 ++++-----
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index ca24bcb0d..263c2c30d 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -8,13 +8,10 @@
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
 import { useAccountStore } from '@/stores/accountDetails'
-import AccountDetailsPanel from '@/components/AccountDetailsPanel'
 
 const walletStore = useWalletStore()
 
-const {
-  aeSdk,
-} = storeToRefs(walletStore)
+const { aeSdk } = storeToRefs(walletStore)
 
 const accountStore = useAccountStore()
 const { accountDetails } = storeToRefs(accountStore)
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index 5be3f7e9e..3cd553ea4 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -19,15 +19,14 @@
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
 import { transactionsHints } from '~/utils/hints/transactionsHints'
-import PageHeader from '~/components/PageHeader'
-import WalletAccountPanel from '~/components/WalletAccountPanel'
-import WalletConnectionPanel from '~/components/WalletConnectionPanel'
 
 const walletStore = useWalletStore()
 const { scanWallets } = walletStore
-const { status } = storeToRefs(walletStore)
+const { status, aeSdk } = storeToRefs(walletStore)
 
 onBeforeMount(async() => {
-  await scanWallets()
+  if (!aeSdk) {
+    await scanWallets()
+  }
 })
 </script>

From bc7128a7346a8de92d0594ba222b5305f890c0e8 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 31 Oct 2023 15:15:19 +0100
Subject: [PATCH 07/34] add hint

---
 src/pages/wallet/index.vue     | 12 +++++++-----
 src/utils/hints/walletHints.js |  3 +++
 2 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/hints/walletHints.js

diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index 3cd553ea4..29359ec83 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -6,8 +6,7 @@
   <page-header>
     Wallet Account
     <template #tooltip>
-      <!--      todo fix hint-->
-      {{ transactionsHints.transaction }}
+      {{ walletHints.wallet }}
     </template>
   </page-header>
 
@@ -18,14 +17,17 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
-import { transactionsHints } from '~/utils/hints/transactionsHints'
+import { walletHints } from '~/utils/hints/walletHints'
+// todo fix imports
 
 const walletStore = useWalletStore()
 const { scanWallets } = walletStore
-const { status, aeSdk } = storeToRefs(walletStore)
+const { status } = storeToRefs(walletStore)
+
+// todo status connecting
 
 onBeforeMount(async() => {
-  if (!aeSdk) {
+  if (status.value !== 'connected') {
     await scanWallets()
   }
 })
diff --git a/src/utils/hints/walletHints.js b/src/utils/hints/walletHints.js
new file mode 100644
index 000000000..ef7e743fe
--- /dev/null
+++ b/src/utils/hints/walletHints.js
@@ -0,0 +1,3 @@
+export const walletHints = {
+  wallet: 'A detail view of a wallet connected to æScan.',
+}

From 7f989170e527d30c38eabc2d7d28f234bfcf3a15 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 31 Oct 2023 16:12:46 +0100
Subject: [PATCH 08/34] add disconnect action

---
 src/components/TheHeader.vue          | 27 ++++++++++++++++++++-------
 src/components/WalletAccountPanel.vue |  5 +----
 src/stores/wallet.js                  |  5 +++++
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 9382bf91e..76f5adcfd 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -36,9 +36,17 @@
         :class="[
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
-      <the-wallet-account
-        v-if="balance"
-        :sdk="aeSdk"/>
+      <VMenu v-if="balance">
+        <!--        todo fix condition-->
+        <the-wallet-account
+
+          :sdk="aeSdk"/>
+        <template #popper>
+          <button @click="exit">
+            Exit Wallet
+          </button>
+        </template>
+      </VMenu>
       <app-link
         v-else
         to="/wallet">
@@ -55,15 +63,15 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import TheNavigation from '@/components/TheNavigation'
-import AppLink from '@/components/AppLink'
-import AppIcon from '@/components/AppIcon'
 import { isDesktop } from '@/utils/screen'
-import NetworkSelect from '@/components/NetworkSelect'
 import { useWalletStore } from '~/stores/wallet'
 import { useStatus } from '@/stores/status'
 
+const route = useRoute()
+const { push } = useRouter()
+
 const walletStore = useWalletStore()
+const { aeSdk, balance } = storeToRefs(walletStore)
 
 const {
   aeSdk,
@@ -83,6 +91,11 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', closeNavigation)
 })
 
+function exit() {
+  push('/')
+  aeSdk.value.disconnectWallet()
+}
+
 watch(() => route.fullPath, () => {
   closeNavigation()
 })
diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index 263c2c30d..52b4818f0 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -10,13 +10,10 @@ import { useWalletStore } from '~/stores/wallet'
 import { useAccountStore } from '@/stores/accountDetails'
 
 const walletStore = useWalletStore()
-
-const { aeSdk } = storeToRefs(walletStore)
-
 const accountStore = useAccountStore()
+const { aeSdk } = storeToRefs(walletStore)
 const { accountDetails } = storeToRefs(accountStore)
 const { fetchAccount } = accountStore
 
 fetchAccount(aeSdk.value.address)
-
 </script>
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 3f6ed3ce4..680e22aa6 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -34,6 +34,11 @@ export const useWalletStore = defineStore('wallet', () => {
           console.info('onAddressChange ::', addresses)
           await fetchAccountInfo()
         },
+        onDisconnect() {
+          status.value = false
+          walletInfo.value = null
+          balance.value = null
+        },
       }))
       await connect()
     } catch (error) {

From e46c0fdb484fc13aac90b366e2179a91b8d92c8c Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 31 Oct 2023 16:27:08 +0100
Subject: [PATCH 09/34] display all account information

---
 src/components/WalletAccountPanel.vue | 75 ++++++++++++++++++++++++++-
 src/pages/accounts/[id].vue           |  8 ---
 2 files changed, 73 insertions(+), 10 deletions(-)

diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index 52b4818f0..f9f1db941 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -1,19 +1,90 @@
 <template>
   <account-details-panel
     v-if="accountDetails"
-    class="account__account-details-panel"
+    class="wallet-account-panel__account-details-panel"
     :account-details="accountDetails"/>
+
+  <client-only>
+    <app-tabs
+      v-if="isTabsVisible"
+      v-model="activeTabIndex">
+      <app-tab title="Activities">
+        <account-activities-panel/>
+      </app-tab>
+      <app-tab title="Transactions">
+        <account-transactions-panel/>
+      </app-tab>
+      <app-tab title="AENS Names">
+        <account-names-panel/>
+      </app-tab>
+      <app-tab
+        title="Tokens"
+        :is-preselected="isTokensTabSelected">
+        <account-tokens-panel/>
+      </app-tab>
+    </app-tabs>
+  </client-only>
 </template>
 <script setup>
 import { storeToRefs } from 'pinia'
+import { useRoute, useRouter } from 'nuxt/app'
 import { useWalletStore } from '~/stores/wallet'
 import { useAccountStore } from '@/stores/accountDetails'
 
 const walletStore = useWalletStore()
 const accountStore = useAccountStore()
 const { aeSdk } = storeToRefs(walletStore)
-const { accountDetails } = storeToRefs(accountStore)
+const { accountDetails, accountTokens } = storeToRefs(accountStore)
 const { fetchAccount } = accountStore
 
+const TAB_KEYS = ['activities', 'transactions', 'aens-names', 'tokens']
+
+const { push, replace } = useRouter()
+
+const route = useRoute()
+
+const isTabsVisible = computed(() => process.client &&
+    ((accountDetails.value && !accountDetails.value?.notExistent) ||
+        !!accountTokens.value?.data.length))
+
+const isTokensTabSelected = computed(() => process.client &&
+    accountDetails.value?.notExistent &&
+    !!accountTokens.value?.data.length)
+
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
+
 fetchAccount(aeSdk.value.address)
 </script>
+
+<style scoped>
+.wallet-account-panel__account-details-panel {
+  margin-bottom: var(--space-4);
+  @media (--desktop) {
+    margin-bottom: var(--space-6);
+  }
+}
+</style>
diff --git a/src/pages/accounts/[id].vue b/src/pages/accounts/[id].vue
index 0fbf47711..11eaa4c20 100644
--- a/src/pages/accounts/[id].vue
+++ b/src/pages/accounts/[id].vue
@@ -43,14 +43,6 @@
 import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'nuxt/app'
 import { useAccountStore } from '@/stores/accountDetails'
-import AppTabs from '@/components/AppTabs'
-import AppTab from '@/components/AppTab'
-import AccountActivitiesPanel from '@/components/AccountActivitiesPanel'
-import AccountTransactionsPanel from '@/components/AccountTransactionsPanel'
-import AccountNamesPanel from '@/components/AccountNamesPanel'
-import AccountTokensPanel from '@/components/AccountTokensPanel'
-import PageHeader from '@/components/PageHeader'
-import AccountDetailsPanel from '@/components/AccountDetailsPanel'
 import { accountHints } from '@/utils/hints/accountHints'
 import { isDesktop } from '@/utils/screen'
 

From 4e04e9bc26003fe1168e7e33ecf52301fe415601 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 09:40:49 +0100
Subject: [PATCH 10/34] create dropdown UI

---
 src/components/AppDropdown.vue              | 40 +++++++++
 src/components/TheHeader.vue                | 27 +-----
 src/components/TheWalletAccount.vue         | 37 --------
 src/components/TheWalletAccountControls.vue | 93 +++++++++++++++++++++
 4 files changed, 137 insertions(+), 60 deletions(-)
 create mode 100644 src/components/AppDropdown.vue
 delete mode 100644 src/components/TheWalletAccount.vue
 create mode 100644 src/components/TheWalletAccountControls.vue

diff --git a/src/components/AppDropdown.vue b/src/components/AppDropdown.vue
new file mode 100644
index 000000000..a8ec926ae
--- /dev/null
+++ b/src/components/AppDropdown.vue
@@ -0,0 +1,40 @@
+<template>
+  <VMenu>
+    <span>
+      <slot/>
+    </span>
+
+    <template #popper>
+      <slot name="menu"/>
+    </template>
+  </VMenu>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+.v-popper {
+  display: inline-block;
+
+  &__popper {
+    &.v-popper--theme-tooltip {
+      .v-popper__inner {
+        margin: 0 var(--space-2);
+        padding: var(--space-3);
+        background: var(--color-midnight);
+        color: var(--color-white);
+        border: none;
+        word-break: break-word;
+        /* stylelint-disable  max-nesting-depth  */
+        /* as it is 3rd party component */
+        @media (--desktop) {
+          word-break: normal;
+        }
+      }
+    }
+  }
+}
+
+</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 76f5adcfd..95083ce89 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -36,22 +36,10 @@
         :class="[
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
-      <VMenu v-if="balance">
-        <!--        todo fix condition-->
-        <the-wallet-account
-
-          :sdk="aeSdk"/>
-        <template #popper>
-          <button @click="exit">
-            Exit Wallet
-          </button>
-        </template>
-      </VMenu>
-      <app-link
-        v-else
-        to="/wallet">
-        wallet
-      </app-link>
+
+      <the-wallet-account-controls
+        :sdk="aeSdk"
+        :balance="balance"/>
     </div>
     <div
       v-if="isSyncing"
@@ -68,8 +56,6 @@ import { useWalletStore } from '~/stores/wallet'
 import { useStatus } from '@/stores/status'
 
 const route = useRoute()
-const { push } = useRouter()
-
 const walletStore = useWalletStore()
 const { aeSdk, balance } = storeToRefs(walletStore)
 
@@ -91,11 +77,6 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', closeNavigation)
 })
 
-function exit() {
-  push('/')
-  aeSdk.value.disconnectWallet()
-}
-
 watch(() => route.fullPath, () => {
   closeNavigation()
 })
diff --git a/src/components/TheWalletAccount.vue b/src/components/TheWalletAccount.vue
deleted file mode 100644
index c15e1e727..000000000
--- a/src/components/TheWalletAccount.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="wallet-account">
-    <!--        todo better condition-->
-    <app-identicon
-      :id="sdk.address"
-      class="wallet-account__identicon"/>
-    <value-hash-ellipsed
-      class="wallet-account__link"
-      :hash="sdk.address"
-      link-to="/wallet"/>
-  </div>
-</template>
-<script setup>
-defineProps({
-  sdk: {
-    type: Object,
-    required: true,
-  },
-})
-</script>
-
-<style scoped>
-.wallet-account {
-  display: flex;
-  align-items: center;
-
-  &__identicon {
-    margin-right: var(--space-2);
-  }
-
-  &__link {
-    font-family: var(--font-monospaced);
-    font-size: 13px;
-  }
-}
-
-</style>
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
new file mode 100644
index 000000000..930671927
--- /dev/null
+++ b/src/components/TheWalletAccountControls.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <!--
+    todo
+    better
+    condition-->
+    <app-dropdown v-if="balance">
+      <div class="wallet-account-controls">
+        <app-identicon
+          :id="sdk.address"
+          class="wallet-account-controls__identicon"/>
+        <app-link
+          class="wallet-account-controls__link"
+          to="/wallet">
+          {{ formatEllipseHash(sdk.address) }}
+        </app-link>
+      </div>
+      <template #menu>
+        <a
+          href="#"
+          @click="exit">
+          Exit Wallet
+        </a>
+      </template>
+    </app-dropdown>
+    <app-link
+      v-else
+      to="/wallet">
+      wallet
+    </app-link>
+  </div>
+</template>
+<script setup>
+
+import { formatEllipseHash } from '~/utils/format'
+
+const { push } = useRouter()
+
+const props = defineProps({
+  sdk: {
+    type: Object,
+    required: true,
+  },
+  balance: {
+    type: String,
+    default: null,
+  },
+})
+
+function exit() {
+  push('/')
+  props.sdk.disconnectWallet()
+}
+</script>
+
+<style scoped>
+.wallet-account-controls {
+  display: flex;
+  align-items: center;
+
+  &__identicon {
+    margin-right: var(--space-2);
+  }
+
+  &__link {
+    font-family: var(--font-monospaced);
+    font-size: 13px;
+  }
+}
+</style>
+
+<style>
+.v-popper {
+  display: inline-block;
+
+  &__popper {
+    &.v-popper--theme-menu {
+      .v-popper__inner {
+        margin: 0 var(--space-2);
+        padding: var(--space-3);
+        color: var(--color-white);
+        word-break: break-word;
+        /* stylelint-disable  max-nesting-depth  */
+        /* as it is 3rd party component */
+        @media (--desktop) {
+          word-break: normal;
+        }
+      }
+    }
+  }
+}
+
+</style>

From 2dbe581c445fd0cfe076f1851afd5106083234ea Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 10:38:49 +0100
Subject: [PATCH 11/34] fix header controls

---
 src/components/TheHeader.vue                |  7 +----
 src/components/TheWalletAccountControls.vue | 34 ++++++++-------------
 2 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 95083ce89..c8d6c1edc 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -37,9 +37,7 @@
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
 
-      <the-wallet-account-controls
-        :sdk="aeSdk"
-        :balance="balance"/>
+      <the-wallet-account-controls/>
     </div>
     <div
       v-if="isSyncing"
@@ -50,14 +48,11 @@
 </template>
 
 <script setup>
-import { storeToRefs } from 'pinia'
 import { isDesktop } from '@/utils/screen'
 import { useWalletStore } from '~/stores/wallet'
 import { useStatus } from '@/stores/status'
 
 const route = useRoute()
-const walletStore = useWalletStore()
-const { aeSdk, balance } = storeToRefs(walletStore)
 
 const {
   aeSdk,
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 930671927..eef4bcd8c 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -1,55 +1,46 @@
 <template>
   <div>
-    <!--
-    todo
-    better
-    condition-->
-    <app-dropdown v-if="balance">
+    <app-dropdown v-if="status === 'connected'">
       <div class="wallet-account-controls">
         <app-identicon
-          :id="sdk.address"
+          :id="aeSdk.address"
           class="wallet-account-controls__identicon"/>
         <app-link
           class="wallet-account-controls__link"
           to="/wallet">
-          {{ formatEllipseHash(sdk.address) }}
+          {{ formatEllipseHash(aeSdk.address) }}
         </app-link>
       </div>
       <template #menu>
+        <!--        todo fix link-->
         <a
-          href="#"
           @click="exit">
           Exit Wallet
         </a>
       </template>
     </app-dropdown>
+    <!--    todo button-->
     <app-link
       v-else
       to="/wallet">
-      wallet
+      Connect Wallet
     </app-link>
   </div>
 </template>
 <script setup>
-
+import { storeToRefs } from 'pinia'
 import { formatEllipseHash } from '~/utils/format'
+import { useWalletStore } from '~/stores/wallet'
 
 const { push } = useRouter()
 
-const props = defineProps({
-  sdk: {
-    type: Object,
-    required: true,
-  },
-  balance: {
-    type: String,
-    default: null,
-  },
-})
+const walletStore = useWalletStore()
+const { aeSdk, status } = storeToRefs(walletStore)
 
 function exit() {
   push('/')
-  props.sdk.disconnectWallet()
+  aeSdk.value.disconnectWallet()
+  return false
 }
 </script>
 
@@ -72,6 +63,7 @@ function exit() {
 <style>
 .v-popper {
   display: inline-block;
+  /*todo fix selector*/
 
   &__popper {
     &.v-popper--theme-menu {

From ed88ec5ae198925eefabd62ac97ce7196917f62d Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 10:40:44 +0100
Subject: [PATCH 12/34] fix css selector

---
 src/components/AppTooltip.vue               | 25 +++++++++------------
 src/components/TheWalletAccountControls.vue | 22 +++++++-----------
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/components/AppTooltip.vue b/src/components/AppTooltip.vue
index 46f51c46b..d7f65616a 100644
--- a/src/components/AppTooltip.vue
+++ b/src/components/AppTooltip.vue
@@ -41,23 +41,18 @@ defineProps({
 .v-popper {
   display: inline-block;
 
-  &__popper {
-    &.v-popper--theme-tooltip {
-      .v-popper__inner {
-        margin: 0 var(--space-2);
-        padding: var(--space-3);
-        background: var(--color-midnight);
-        color: var(--color-white);
-        border: none;
-        word-break: break-word;
-        /* stylelint-disable  max-nesting-depth  */
-        /* as it is 3rd party component */
-        @media (--desktop) {
-          word-break: normal;
-        }
+  &__popper.v-popper--theme-tooltip {
+    .v-popper__inner {
+      margin: 0 var(--space-2);
+      padding: var(--space-3);
+      background: var(--color-midnight);
+      color: var(--color-white);
+      border: none;
+      word-break: break-word;
+      @media (--desktop) {
+        word-break: normal;
       }
     }
   }
 }
-
 </style>
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index eef4bcd8c..6733a593e 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -63,23 +63,17 @@ function exit() {
 <style>
 .v-popper {
   display: inline-block;
-  /*todo fix selector*/
 
-  &__popper {
-    &.v-popper--theme-menu {
-      .v-popper__inner {
-        margin: 0 var(--space-2);
-        padding: var(--space-3);
-        color: var(--color-white);
-        word-break: break-word;
-        /* stylelint-disable  max-nesting-depth  */
-        /* as it is 3rd party component */
-        @media (--desktop) {
-          word-break: normal;
-        }
+  &__popper.v-popper--theme-menu {
+    .v-popper__inner {
+      margin: 0 var(--space-2);
+      padding: var(--space-3);
+      color: var(--color-white);
+      word-break: break-word;
+      @media (--desktop) {
+        word-break: normal;
       }
     }
   }
 }
-
 </style>

From 0e0a4c9030a2f32f02ec9374631dd4b6b38c30af Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 11:55:38 +0100
Subject: [PATCH 13/34] fix network id connection

---
 src/stores/wallet.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 680e22aa6..805dc66bb 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -3,7 +3,7 @@ import { useRuntimeConfig } from 'nuxt/app'
 import { AE_AMOUNT_FORMATS, AeSdkAepp, BrowserWindowMessageConnection, Node, walletDetector } from '@aeternity/aepp-sdk'
 
 export const useWalletStore = defineStore('wallet', () => {
-  const { NODE_URL } = useRuntimeConfig().public
+  const { NODE_URL, NETWORK_ID } = useRuntimeConfig().public
 
   const walletInfo = ref(null)
   const aeSdk = ref(null)
@@ -15,20 +15,21 @@ export const useWalletStore = defineStore('wallet', () => {
     console.log('init')
     // todo reuse instance
     // todo improve naming
-    const node = new Node(NODE_URL)
+
     try {
       const aeSdkOptions = {
-        nodes: [
-          { name: 'mainnet', instance: node },
-        ],
+        nodes: [{
+          name: NETWORK_ID,
+          instance: new Node('https://testnet.aeternity.io'),
+        }],
         compilerUrl: 'https://compiler.aepps.com',
       }
-
+      console.log('aeSdkOptions', aeSdkOptions)
       aeSdk.value = shallowReactive(new AeSdkAepp({
-        name: 'AEPP',
+        name: 'æScan',
         ...aeSdkOptions,
-        async onNetworkChange({ NETWORK_ID }) {
-          await connectToNode(NETWORK_ID)
+        async onNetworkChange({ networkId }) {
+          await connectToNode(networkId)
         },
         async onAddressChange(addresses) {
           console.info('onAddressChange ::', addresses)
@@ -40,6 +41,7 @@ export const useWalletStore = defineStore('wallet', () => {
           balance.value = null
         },
       }))
+      console.log('aeSdk.value', aeSdk.value)
       await connect()
     } catch (error) {
       console.log('failed')

From d62b77f07d1fda11dc3e85d25a04f27f357aa73d Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 12:41:06 +0100
Subject: [PATCH 14/34] extend button UI

---
 src/components/AppButton.vue                | 16 +++++++++++++++-
 src/components/TheWalletAccountControls.vue | 13 +++++++++----
 src/stores/wallet.js                        |  4 ++--
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index 8c3df7fb1..b2871f0b7 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -8,7 +8,11 @@
       variant ? `button--${variant}` : null,
       size ? `button--${size}` : null,
     ]"
-    :disabled="disabled">
+    :disabled="disabled"
+    :class="[
+      'button',
+      size ? `button--${size}` : null,
+    ]">
     <app-icon
       v-if="iconName"
       :name="iconName"
@@ -47,6 +51,11 @@ defineProps({
     type: String,
     default: null,
   },
+  size: {
+    type: String,
+    default: null,
+    validator: val => ['sm'].includes(val),
+  },
   target: {
     type: String,
     default: '_blank',
@@ -120,6 +129,11 @@ defineProps({
     margin-right: var(--space-1);
   }
 
+  &--sm {
+    border-radius: 0;
+    padding: var(--space-2) var(--space-3);
+  }
+
   &--link {
     color: var(--color-blue);
     text-align: left;
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 6733a593e..7e42fcccd 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -19,12 +19,13 @@
         </a>
       </template>
     </app-dropdown>
-    <!--    todo button-->
-    <app-link
-      v-else
+
+    <app-button
+      class="wallet-account-controls__button"
+      size="sm"
       to="/wallet">
       Connect Wallet
-    </app-link>
+    </app-button>
   </div>
 </template>
 <script setup>
@@ -57,6 +58,10 @@ function exit() {
     font-family: var(--font-monospaced);
     font-size: 13px;
   }
+
+  &__button {
+    color: var(--color-white) !important;
+  }
 }
 </style>
 
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 805dc66bb..2c863b826 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -20,7 +20,7 @@ export const useWalletStore = defineStore('wallet', () => {
       const aeSdkOptions = {
         nodes: [{
           name: NETWORK_ID,
-          instance: new Node('https://testnet.aeternity.io'),
+          instance: new Node(NODE_URL),
         }],
         compilerUrl: 'https://compiler.aepps.com',
       }
@@ -41,7 +41,6 @@ export const useWalletStore = defineStore('wallet', () => {
           balance.value = null
         },
       }))
-      console.log('aeSdk.value', aeSdk.value)
       await connect()
     } catch (error) {
       console.log('failed')
@@ -88,6 +87,7 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   async function connectToNode(selectedNetworkId) {
+    // todo improve
     aeSdk.value.selectNode(selectedNetworkId)
     if (aeSdk.value.addresses().length) {
       await fetchAccountInfo()

From a72bfebd775a67188c5ea0cb1b2bd166892a8692 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 18:53:02 +0100
Subject: [PATCH 15/34] detect denied status

---
 src/components/AppButton.vue                |  6 +++
 src/components/TheWalletAccountControls.vue | 10 ++--
 src/components/WalletConnectionPanel.vue    |  1 -
 src/stores/wallet.js                        | 57 ++++++++++++---------
 4 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index b2871f0b7..6da4696ff 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -11,6 +11,7 @@
     :disabled="disabled"
     :class="[
       'button',
+      variant ? `button--${variant}` : null,
       size ? `button--${size}` : null,
     ]">
     <app-icon
@@ -56,6 +57,11 @@ defineProps({
     default: null,
     validator: val => ['sm'].includes(val),
   },
+  variant: {
+    type: String,
+    default: null,
+    validator: val => ['link'].includes(val),
+  },
   target: {
     type: String,
     default: '_blank',
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 7e42fcccd..93ec02710 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -12,15 +12,18 @@
         </app-link>
       </div>
       <template #menu>
-        <!--        todo fix link-->
-        <a
+        <app-button
+
+          size="sm"
+          variant="link"
           @click="exit">
           Exit Wallet
-        </a>
+        </app-button>
       </template>
     </app-dropdown>
 
     <app-button
+      v-else
       class="wallet-account-controls__button"
       size="sm"
       to="/wallet">
@@ -42,6 +45,7 @@ function exit() {
   push('/')
   aeSdk.value.disconnectWallet()
   return false
+  // <!--        todo fix link-->
 }
 </script>
 
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index b7b7d8e54..83c185bcb 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -30,7 +30,6 @@
 </template>
 
 <script setup>
-// todo fix imports
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
 import AppButton from '~/components/AppButton'
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 2c863b826..2642aa1fb 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -14,7 +14,6 @@ export const useWalletStore = defineStore('wallet', () => {
   async function initWallet() {
     console.log('init')
     // todo reuse instance
-    // todo improve naming
 
     try {
       const aeSdkOptions = {
@@ -24,76 +23,84 @@ export const useWalletStore = defineStore('wallet', () => {
         }],
         compilerUrl: 'https://compiler.aepps.com',
       }
-      console.log('aeSdkOptions', aeSdkOptions)
+
       aeSdk.value = shallowReactive(new AeSdkAepp({
         name: 'æScan',
         ...aeSdkOptions,
         async onNetworkChange({ networkId }) {
-          await connectToNode(networkId)
+          await selectNode(networkId)
         },
-        async onAddressChange(addresses) {
-          console.info('onAddressChange ::', addresses)
-          await fetchAccountInfo()
+        async onAddressChange() {
+          await fetchAccountBalance()
         },
         onDisconnect() {
-          status.value = false
-          walletInfo.value = null
-          balance.value = null
+          status.value = 'disconnecting'
+          resetState()
         },
       }))
       await connect()
     } catch (error) {
-      console.log('failed')
+      status.value = 'failed'
       throw error
     }
   }
 
   async function scanWallets() {
-    console.log('scan')
-
     status.value = 'scanning'
+
     foundWallets.value = await new Promise(resolve => {
       const timeout = setTimeout(() => {
-        status.value = 'not installed'
         resolve(undefined)
+        status.value = 'not installed'
       }, 10000)
 
-      const handleWallets = ({ newWallet }) => {
+      const handleDetect = ({ newWallet }) => {
         status.value = 'found'
         clearTimeout(timeout)
         stopScan()
         resolve(newWallet)
       }
-      const scannerConnection = new BrowserWindowMessageConnection()
-      const stopScan = walletDetector(scannerConnection, handleWallets)
+      const browserWindow = new BrowserWindowMessageConnection()
+
+      const stopScan = walletDetector(browserWindow, handleDetect)
     })
   }
 
   async function connect() {
-    console.log('connect')
-
     walletInfo.value = await aeSdk.value.connectToWallet(foundWallets.value.getConnection())
-    await aeSdk.value.subscribeAddress('subscribe', 'current')
-    status.value = 'connected'
+    try {
+      await aeSdk.value.subscribeAddress('subscribe', 'current')
+      status.value = 'connected'
+    } catch (error) {
+      console.log('error', error)
+      if (e.message !== 'Operation rejected by user') {
+        status.value = 'denied'
+      }
+    }
 
-    await fetchAccountInfo()
+    await fetchAccountBalance()
   }
 
-  // todo infra envs
-  async function fetchAccountInfo() {
+  async function fetchAccountBalance() {
     balance.value = await aeSdk.value.getBalance(aeSdk.value.address, {
       format: AE_AMOUNT_FORMATS.AE,
     })
   }
 
-  async function connectToNode(selectedNetworkId) {
+  async function selectNode(selectedNetworkId) {
     // todo improve
     aeSdk.value.selectNode(selectedNetworkId)
     if (aeSdk.value.addresses().length) {
-      await fetchAccountInfo()
+      await fetchAccountBalance()
     }
   }
 
+  function resetState() {
+    walletInfo.value = null
+    balance.value = null
+    status.value = null
+  }
+
   return {
     foundWallets,
     status,

From 472e71999489784a9743c9cded2396dfbb6776bf Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 19:47:16 +0100
Subject: [PATCH 16/34] handle denied state

---
 src/components/AppButton.vue                |  4 +---
 src/components/TheWalletAccountControls.vue |  7 +++---
 src/components/WalletAccountPanel.vue       |  8 +++++--
 src/components/WalletConnectionPanel.vue    | 22 +++++++++++++----
 src/pages/wallet/index.vue                  |  6 ++---
 src/stores/wallet.js                        | 26 ++++++++++++---------
 6 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index 6da4696ff..031d94a1a 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -5,7 +5,6 @@
     :target="target"
     :class="[
       'button',
-      variant ? `button--${variant}` : null,
       size ? `button--${size}` : null,
     ]"
     :disabled="disabled"
@@ -164,8 +163,7 @@ defineProps({
     padding: 0;
 
     &:hover {
-      text-decoration: underline;
-    }
+      text-decoration: underline;}
   }
 }
 </style>
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 93ec02710..062a10295 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -13,7 +13,6 @@
       </div>
       <template #menu>
         <app-button
-
           size="sm"
           variant="link"
           @click="exit">
@@ -40,12 +39,12 @@ const { push } = useRouter()
 
 const walletStore = useWalletStore()
 const { aeSdk, status } = storeToRefs(walletStore)
+const { disconnect } = walletStore
 
 function exit() {
+  // todo await?
+  disconnect()
   push('/')
-  aeSdk.value.disconnectWallet()
-  return false
-  // <!--        todo fix link-->
 }
 </script>
 
diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index f9f1db941..a74eac845 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -30,6 +30,7 @@ import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'nuxt/app'
 import { useWalletStore } from '~/stores/wallet'
 import { useAccountStore } from '@/stores/accountDetails'
+import { isDesktop } from '~/utils/screen'
 
 const walletStore = useWalletStore()
 const accountStore = useAccountStore()
@@ -76,8 +77,11 @@ const activeTabIndex = computed({
     return push(newRoute)
   },
 })
-
-fetchAccount(aeSdk.value.address)
+if (process.client) {
+  const limit = isDesktop() ? null : 3
+  await fetchAccount(aeSdk.value.address, { limit })
+  // todo loading
+}
 </script>
 
 <style scoped>
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index 83c185bcb..53b4d5621 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <app-panel class="">
+  <app-panel>
     <template
       v-if="status !== 'scanning'"
       #heading>
@@ -10,21 +10,33 @@
       v-if="status === 'scanning'"
       label="Scanning for wallets"/>
 
+    <loader-indicator
+      v-if="status === 'connecting'"
+      label="Connecting"/>
+
+    <loader-indicator
+      v-if="status === 'disconnecting'"
+      label="Disconnecting"/>
+
     <p
       v-if="status === 'not installed'"
       class="wallet-connection-panel__paragraph">
       In order to display wallet account information, the native Superhero wallet has to be installed on this device.
     </p>
-
+    <p
+      v-if="status === 'denied'"
+      class="wallet-connection-panel__paragraph">
+      Connection with your wallet has failed. Please make sure that you are logged into your wallet.
+    </p>
     <div class="wallet-connection-panel__container">
+      <div v-if="status === 'found'">
+        <wallet-connect-button/>
+      </div>
       <app-button
         v-if="status === 'not installed'"
         to="https://wallet.superhero.com/">
         Download Superhero wallet
       </app-button>
-      <div v-if="status === 'found'">
-        <wallet-connect-button/>
-      </div>
     </div>
   </app-panel>
 </template>
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index 29359ec83..0a885ca96 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -10,8 +10,8 @@
     </template>
   </page-header>
 
-  <wallet-account-panel v-if="status === 'connected'"/>
-  <wallet-connection-panel v-else/>
+  <wallet-connection-panel v-if="status !== 'connected'"/>
+  <wallet-account-panel v-else/>
 </template>
 
 <script setup>
@@ -24,8 +24,6 @@ const walletStore = useWalletStore()
 const { scanWallets } = walletStore
 const { status } = storeToRefs(walletStore)
 
-// todo status connecting
-
 onBeforeMount(async() => {
   if (status.value !== 'connected') {
     await scanWallets()
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 2642aa1fb..954223dd1 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -12,9 +12,6 @@ export const useWalletStore = defineStore('wallet', () => {
   const status = ref(null)
 
   async function initWallet() {
-    console.log('init')
-    // todo reuse instance
-
     try {
       const aeSdkOptions = {
         nodes: [{
@@ -34,7 +31,6 @@ export const useWalletStore = defineStore('wallet', () => {
           await fetchAccountBalance()
         },
         onDisconnect() {
-          status.value = 'disconnecting'
           resetState()
         },
       }))
@@ -67,18 +63,17 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   async function connect() {
-    walletInfo.value = await aeSdk.value.connectToWallet(foundWallets.value.getConnection())
+    status.value = 'connecting'
     try {
+      walletInfo.value = await aeSdk.value.connectToWallet(foundWallets.value.getConnection())
+
       await aeSdk.value.subscribeAddress('subscribe', 'current')
+      await fetchAccountBalance()
       status.value = 'connected'
     } catch (error) {
-      console.log('error', error)
-      if (e.message !== 'Operation rejected by user') {
-        status.value = 'denied'
-      }
+      aeSdk.value.disconnectWallet()
+      status.value = 'denied'
     }
-
-    await fetchAccountBalance()
   }
 
   async function fetchAccountBalance() {
@@ -95,9 +90,17 @@ export const useWalletStore = defineStore('wallet', () => {
     }
   }
 
+  function disconnect() {
+    status.value = 'disconnecting'
+    aeSdk.value.disconnectWallet()
+    resetState()
+  }
+
   function resetState() {
     walletInfo.value = null
+    aeSdk.value = null
     balance.value = null
+    foundWallets.value = null
     status.value = null
   }
 
@@ -106,6 +109,7 @@ export const useWalletStore = defineStore('wallet', () => {
     status,
     scanWallets,
     initWallet,
+    disconnect,
     walletInfo,
     balance,
     aeSdk,

From 0064c93b3be48768c9c9e24aeccc1bc5c3174756 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 20:32:59 +0100
Subject: [PATCH 17/34] fix imports

---
 src/components/TheWalletAccountControls.vue |  5 +-
 src/components/WalletAccountPanel.vue       |  4 +-
 src/components/WalletConnectButton.vue      |  8 +--
 src/components/WalletConnectionPanel.vue    | 28 +++++++---
 src/pages/wallet/index.vue                  |  5 +-
 src/stores/wallet.js                        | 62 +++++++--------------
 6 files changed, 46 insertions(+), 66 deletions(-)

diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 062a10295..855b1253a 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -32,8 +32,8 @@
 </template>
 <script setup>
 import { storeToRefs } from 'pinia'
-import { formatEllipseHash } from '~/utils/format'
-import { useWalletStore } from '~/stores/wallet'
+import { formatEllipseHash } from '@/utils/format'
+import { useWalletStore } from '@/stores/wallet'
 
 const { push } = useRouter()
 
@@ -42,7 +42,6 @@ const { aeSdk, status } = storeToRefs(walletStore)
 const { disconnect } = walletStore
 
 function exit() {
-  // todo await?
   disconnect()
   push('/')
 }
diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index a74eac845..c8aa67c4c 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -28,9 +28,9 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'nuxt/app'
-import { useWalletStore } from '~/stores/wallet'
+import { useWalletStore } from '@/stores/wallet'
 import { useAccountStore } from '@/stores/accountDetails'
-import { isDesktop } from '~/utils/screen'
+import { isDesktop } from '@/utils/screen'
 
 const walletStore = useWalletStore()
 const accountStore = useAccountStore()
diff --git a/src/components/WalletConnectButton.vue b/src/components/WalletConnectButton.vue
index 42ee0a88d..21ae569be 100644
--- a/src/components/WalletConnectButton.vue
+++ b/src/components/WalletConnectButton.vue
@@ -1,16 +1,12 @@
 <template>
-  <app-button @click="init()">
+  <app-button @click="initWallet()">
     Connect Wallet
   </app-button>
 </template>
 
 <script setup>
-import { useWalletStore } from '~/stores/wallet'
+import { useWalletStore } from '@/stores/wallet'
 
 const walletStore = useWalletStore()
 const { initWallet } = walletStore
-
-async function init() {
-  await initWallet()
-}
 </script>
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index 53b4d5621..aeba6a3e9 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -5,6 +5,8 @@
       #heading>
       {{ title }}
     </template>
+    <!--    todo title-->
+    <!--    todo heading?-->
 
     <loader-indicator
       v-if="status === 'scanning'"
@@ -19,7 +21,7 @@
       label="Disconnecting"/>
 
     <p
-      v-if="status === 'not installed'"
+      v-if="status === 'not detected'"
       class="wallet-connection-panel__paragraph">
       In order to display wallet account information, the native Superhero wallet has to be installed on this device.
     </p>
@@ -29,32 +31,40 @@
       Connection with your wallet has failed. Please make sure that you are logged into your wallet.
     </p>
     <div class="wallet-connection-panel__container">
-      <div v-if="status === 'found'">
+      <div v-if="status === 'detected'">
         <wallet-connect-button/>
       </div>
       <app-button
-        v-if="status === 'not installed'"
+        v-if="status === 'not detected'"
         to="https://wallet.superhero.com/">
         Download Superhero wallet
       </app-button>
+      <app-button
+        v-if="status === 'denied'"
+        @click="scanWallets()">
+        Try again
+      </app-button>
     </div>
   </app-panel>
 </template>
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import { useWalletStore } from '~/stores/wallet'
-import AppButton from '~/components/AppButton'
+import { useWalletStore } from '@/stores/wallet'
+import AppButton from '@/components/AppButton'
 
 const walletStore = useWalletStore()
 
 const { status } = storeToRefs(walletStore)
+const { scanWallets } = walletStore
 
 const title = computed(() => {
-  if (status.value === 'not installed') {
-    return 'Wallet not found'
-  } else if (status.value === 'found') {
-    return 'Connect Superhero wallet'
+  if (status.value === 'not detected') {
+    return 'Wallet not detected'
+  } else if (status.value === 'detected') {
+    return 'Superhero wallet detected'
+  } else if (status.value === 'denied') {
+    return 'Connection failed'
   } else {
     return null
   }
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index 0a885ca96..e8df31700 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -16,9 +16,8 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import { useWalletStore } from '~/stores/wallet'
-import { walletHints } from '~/utils/hints/walletHints'
-// todo fix imports
+import { useWalletStore } from '@/stores/wallet'
+import { walletHints } from '@/utils/hints/walletHints'
 
 const walletStore = useWalletStore()
 const { scanWallets } = walletStore
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 954223dd1..3707a0882 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -1,14 +1,12 @@
 import { defineStore } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
-import { AE_AMOUNT_FORMATS, AeSdkAepp, BrowserWindowMessageConnection, Node, walletDetector } from '@aeternity/aepp-sdk'
+import { AeSdkAepp, BrowserWindowMessageConnection, Node, walletDetector } from '@aeternity/aepp-sdk'
 
 export const useWalletStore = defineStore('wallet', () => {
   const { NODE_URL, NETWORK_ID } = useRuntimeConfig().public
 
-  const walletInfo = ref(null)
   const aeSdk = ref(null)
-  const balance = ref(null)
-  const foundWallets = ref(null)
+  const detectedWallets = ref(null)
   const status = ref(null)
 
   async function initWallet() {
@@ -24,14 +22,11 @@ export const useWalletStore = defineStore('wallet', () => {
       aeSdk.value = shallowReactive(new AeSdkAepp({
         name: 'æScan',
         ...aeSdkOptions,
-        async onNetworkChange({ networkId }) {
-          await selectNode(networkId)
-        },
-        async onAddressChange() {
-          await fetchAccountBalance()
+        onNetworkChange({ networkId }) {
+          aeSdk.value.selectNode(networkId)
         },
         onDisconnect() {
-          resetState()
+          status.value = 'disconnecting'
         },
       }))
       await connect()
@@ -42,76 +37,57 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   async function scanWallets() {
+    if (detectedWallets.value) {
+      resetState()
+    }
     status.value = 'scanning'
 
-    foundWallets.value = await new Promise(resolve => {
+    detectedWallets.value = await new Promise(resolve => {
       const timeout = setTimeout(() => {
         resolve(undefined)
-        status.value = 'not installed'
+        status.value = 'not detected'
       }, 10000)
 
-      const handleDetect = ({ newWallet }) => {
-        status.value = 'found'
-        clearTimeout(timeout)
+      function setDetected({ newWallet }) {
         stopScan()
         resolve(newWallet)
+        clearTimeout(timeout)
+        status.value = 'detected'
       }
-      const browserWindow = new BrowserWindowMessageConnection()
 
-      const stopScan = walletDetector(browserWindow, handleDetect)
+      const browserWindow = new BrowserWindowMessageConnection()
+      const stopScan = walletDetector(browserWindow, setDetected)
     })
   }
 
   async function connect() {
     status.value = 'connecting'
     try {
-      walletInfo.value = await aeSdk.value.connectToWallet(foundWallets.value.getConnection())
-
+      await aeSdk.value.connectToWallet(detectedWallets.value.getConnection())
       await aeSdk.value.subscribeAddress('subscribe', 'current')
-      await fetchAccountBalance()
       status.value = 'connected'
     } catch (error) {
-      aeSdk.value.disconnectWallet()
+      disconnect()
       status.value = 'denied'
     }
   }
 
-  async function fetchAccountBalance() {
-    balance.value = await aeSdk.value.getBalance(aeSdk.value.address, {
-      format: AE_AMOUNT_FORMATS.AE,
-    })
-  }
-
-  async function selectNode(selectedNetworkId) {
-    // todo improve
-    aeSdk.value.selectNode(selectedNetworkId)
-    if (aeSdk.value.addresses().length) {
-      await fetchAccountBalance()
-    }
-  }
-
   function disconnect() {
-    status.value = 'disconnecting'
     aeSdk.value.disconnectWallet()
-    resetState()
   }
 
   function resetState() {
-    walletInfo.value = null
     aeSdk.value = null
-    balance.value = null
-    foundWallets.value = null
+    detectedWallets.value = null
     status.value = null
   }
 
   return {
-    foundWallets,
+    detectedWallets,
     status,
     scanWallets,
     initWallet,
     disconnect,
-    walletInfo,
-    balance,
     aeSdk,
   }
 })

From 1cc7275e014bd32d9606195b87d2202c06959c45 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 1 Nov 2023 20:54:26 +0100
Subject: [PATCH 18/34] fix loading transitions

---
 src/components/TheWalletAccountControls.vue |  1 +
 src/components/WalletConnectionPanel.vue    | 25 +++++++++++----------
 src/pages/wallet/index.vue                  | 10 ++++++---
 src/stores/wallet.js                        |  6 ++---
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 855b1253a..b31359d3b 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -12,6 +12,7 @@
         </app-link>
       </div>
       <template #menu>
+        <!--        todo fix button-->
         <app-button
           size="sm"
           variant="link"
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index aeba6a3e9..62f60658d 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -1,24 +1,16 @@
 <template>
   <app-panel>
     <template
-      v-if="status !== 'scanning'"
+      v-if="!isLoading"
       #heading>
       {{ title }}
     </template>
     <!--    todo title-->
-    <!--    todo heading?-->
 
     <loader-indicator
-      v-if="status === 'scanning'"
-      label="Scanning for wallets"/>
-
-    <loader-indicator
-      v-if="status === 'connecting'"
-      label="Connecting"/>
-
-    <loader-indicator
-      v-if="status === 'disconnecting'"
-      label="Disconnecting"/>
+      v-if="isLoading"
+      class="wallet-connection-panel__loader-indicator"
+      :label="status"/>
 
     <p
       v-if="status === 'not detected'"
@@ -43,6 +35,7 @@
         v-if="status === 'denied'"
         @click="scanWallets()">
         Try again
+        <!--        todo fix try again-->
       </app-button>
     </div>
   </app-panel>
@@ -58,6 +51,10 @@ const walletStore = useWalletStore()
 const { status } = storeToRefs(walletStore)
 const { scanWallets } = walletStore
 
+const isLoading = computed(() => {
+  return status.value === 'detecting' || status.value === 'connecting' || status.value === 'disconnecting'
+})
+
 const title = computed(() => {
   if (status.value === 'not detected') {
     return 'Wallet not detected'
@@ -90,5 +87,9 @@ const title = computed(() => {
       justify-content: flex-start;
     }
   }
+
+  &__loader-indicator {
+    margin: var(--space-3) 0;
+  }
 }
 </style>
diff --git a/src/pages/wallet/index.vue b/src/pages/wallet/index.vue
index e8df31700..1949be699 100644
--- a/src/pages/wallet/index.vue
+++ b/src/pages/wallet/index.vue
@@ -9,9 +9,11 @@
       {{ walletHints.wallet }}
     </template>
   </page-header>
-
-  <wallet-connection-panel v-if="status !== 'connected'"/>
-  <wallet-account-panel v-else/>
+  <template v-if="!isLoading">
+    <wallet-connection-panel v-if="status !== 'connected'"/>
+    <wallet-account-panel v-else/>
+  </template>
+  <loader-panel v-else/>
 </template>
 
 <script setup>
@@ -23,6 +25,8 @@ const walletStore = useWalletStore()
 const { scanWallets } = walletStore
 const { status } = storeToRefs(walletStore)
 
+const { isLoading } = useLoading()
+
 onBeforeMount(async() => {
   if (status.value !== 'connected') {
     await scanWallets()
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 3707a0882..d3a5bde12 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -37,10 +37,11 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   async function scanWallets() {
+    // todo fix resetting state
     if (detectedWallets.value) {
       resetState()
     }
-    status.value = 'scanning'
+    status.value = 'detecting'
 
     detectedWallets.value = await new Promise(resolve => {
       const timeout = setTimeout(() => {
@@ -55,8 +56,7 @@ export const useWalletStore = defineStore('wallet', () => {
         status.value = 'detected'
       }
 
-      const browserWindow = new BrowserWindowMessageConnection()
-      const stopScan = walletDetector(browserWindow, setDetected)
+      const stopScan = walletDetector(new BrowserWindowMessageConnection(), setDetected)
     })
   }
 

From d561be645695cfdac9deb6c6058bc8913e8e8656 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 2 Nov 2023 12:01:50 +0100
Subject: [PATCH 19/34] fix connection controls

---
 src/assets/styles/utilities/_responsive.css |  3 +-
 src/components/AppDropdown.vue              | 30 ++---------
 src/components/TheWalletAccountControls.vue | 57 ++++++++++-----------
 src/components/WalletConnectionPanel.vue    |  8 +--
 4 files changed, 37 insertions(+), 61 deletions(-)

diff --git a/src/assets/styles/utilities/_responsive.css b/src/assets/styles/utilities/_responsive.css
index a1a3e2c74..bd4548085 100644
--- a/src/assets/styles/utilities/_responsive.css
+++ b/src/assets/styles/utilities/_responsive.css
@@ -6,8 +6,7 @@
 
 .u-hidden-mobile {
   display: none !important;
-
   @media (--desktop) {
     display: revert !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/AppDropdown.vue b/src/components/AppDropdown.vue
index a8ec926ae..49ca90073 100644
--- a/src/components/AppDropdown.vue
+++ b/src/components/AppDropdown.vue
@@ -10,31 +10,11 @@
   </VMenu>
 </template>
 
-<script setup>
-
-</script>
-
 <style>
-.v-popper {
-  display: inline-block;
-
-  &__popper {
-    &.v-popper--theme-tooltip {
-      .v-popper__inner {
-        margin: 0 var(--space-2);
-        padding: var(--space-3);
-        background: var(--color-midnight);
-        color: var(--color-white);
-        border: none;
-        word-break: break-word;
-        /* stylelint-disable  max-nesting-depth  */
-        /* as it is 3rd party component */
-        @media (--desktop) {
-          word-break: normal;
-        }
-      }
-    }
-  }
+/*todo fix selectors*/
+.v-popper__popper.v-popper--theme-menu .v-popper__inner {
+  margin: 0 var(--space-2);
+  color: var(--color-midnight);
+  padding: 0 !important;
 }
-
 </style>
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index b31359d3b..09880e3e1 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -1,35 +1,32 @@
 <template>
-  <div>
-    <app-dropdown v-if="status === 'connected'">
-      <div class="wallet-account-controls">
-        <app-identicon
-          :id="aeSdk.address"
-          class="wallet-account-controls__identicon"/>
-        <app-link
-          class="wallet-account-controls__link"
-          to="/wallet">
-          {{ formatEllipseHash(aeSdk.address) }}
-        </app-link>
-      </div>
-      <template #menu>
-        <!--        todo fix button-->
-        <app-button
-          size="sm"
-          variant="link"
-          @click="exit">
-          Exit Wallet
-        </app-button>
-      </template>
-    </app-dropdown>
+  <app-dropdown v-if="status === 'connected'">
+    <div class="wallet-account-controls">
+      <app-identicon
+        :id="aeSdk.address"
+        class="wallet-account-controls__identicon"/>
+      <app-link
+        class="wallet-account-controls__link"
+        to="/wallet">
+        {{ formatEllipseHash(aeSdk.address) }}
+      </app-link>
+    </div>
+    <template #menu>
+      <app-button
+        size="sm"
+        variant="link"
+        @click="exit">
+        Exit Wallet
+      </app-button>
+    </template>
+  </app-dropdown>
 
-    <app-button
-      v-else
-      class="wallet-account-controls__button"
-      size="sm"
-      to="/wallet">
-      Connect Wallet
-    </app-button>
-  </div>
+  <app-button
+    v-else
+    class="wallet-account-controls__button u-hidden-mobile"
+    size="sm"
+    to="/wallet">
+    Connect Wallet
+  </app-button>
 </template>
 <script setup>
 import { storeToRefs } from 'pinia'
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index 62f60658d..394a78dff 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -1,14 +1,13 @@
 <template>
   <app-panel>
     <template
-      v-if="!isLoading"
+      v-if="title"
       #heading>
       {{ title }}
     </template>
-    <!--    todo title-->
 
     <loader-indicator
-      v-if="isLoading"
+      v-if="isProcessing"
       class="wallet-connection-panel__loader-indicator"
       :label="status"/>
 
@@ -22,6 +21,7 @@
       class="wallet-connection-panel__paragraph">
       Connection with your wallet has failed. Please make sure that you are logged into your wallet.
     </p>
+
     <div class="wallet-connection-panel__container">
       <div v-if="status === 'detected'">
         <wallet-connect-button/>
@@ -51,7 +51,7 @@ const walletStore = useWalletStore()
 const { status } = storeToRefs(walletStore)
 const { scanWallets } = walletStore
 
-const isLoading = computed(() => {
+const isProcessing = computed(() => {
   return status.value === 'detecting' || status.value === 'connecting' || status.value === 'disconnecting'
 })
 

From f985c39b797d939982c2e3c048b95d38915f2056 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 2 Nov 2023 16:29:39 +0100
Subject: [PATCH 20/34] change button style

---
 src/components/AppButton.vue                | 10 ----------
 src/components/TheHeader.vue                |  2 +-
 src/components/TheWalletAccountControls.vue |  4 +---
 3 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index 031d94a1a..c000b6882 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -51,11 +51,6 @@ defineProps({
     type: String,
     default: null,
   },
-  size: {
-    type: String,
-    default: null,
-    validator: val => ['sm'].includes(val),
-  },
   variant: {
     type: String,
     default: null,
@@ -134,11 +129,6 @@ defineProps({
     margin-right: var(--space-1);
   }
 
-  &--sm {
-    border-radius: 0;
-    padding: var(--space-2) var(--space-3);
-  }
-
   &--link {
     color: var(--color-blue);
     text-align: left;
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index c8d6c1edc..c903f282e 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -37,7 +37,7 @@
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
 
-      <the-wallet-account-controls/>
+      <the-wallet-account-controls class="u-hidden-mobile"/>
     </div>
     <div
       v-if="isSyncing"
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 09880e3e1..a280b0c35 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -12,7 +12,6 @@
     </div>
     <template #menu>
       <app-button
-        size="sm"
         variant="link"
         @click="exit">
         Exit Wallet
@@ -22,8 +21,7 @@
 
   <app-button
     v-else
-    class="wallet-account-controls__button u-hidden-mobile"
-    size="sm"
+    class="wallet-account-controls__button"
     to="/wallet">
     Connect Wallet
   </app-button>

From f3c0b1b220d1566c7db6522b493480559e7816ae Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 2 Nov 2023 18:02:38 +0100
Subject: [PATCH 21/34] remove comments

---
 src/components/AppDropdown.vue           | 1 -
 src/components/WalletAccountPanel.vue    | 1 -
 src/components/WalletConnectionPanel.vue | 5 ++---
 src/stores/wallet.js                     | 5 +----
 4 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/AppDropdown.vue b/src/components/AppDropdown.vue
index 49ca90073..131faec77 100644
--- a/src/components/AppDropdown.vue
+++ b/src/components/AppDropdown.vue
@@ -11,7 +11,6 @@
 </template>
 
 <style>
-/*todo fix selectors*/
 .v-popper__popper.v-popper--theme-menu .v-popper__inner {
   margin: 0 var(--space-2);
   color: var(--color-midnight);
diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index c8aa67c4c..1f4390fa2 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -80,7 +80,6 @@ const activeTabIndex = computed({
 if (process.client) {
   const limit = isDesktop() ? null : 3
   await fetchAccount(aeSdk.value.address, { limit })
-  // todo loading
 }
 </script>
 
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index 394a78dff..4d25ed679 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -33,9 +33,8 @@
       </app-button>
       <app-button
         v-if="status === 'denied'"
-        @click="scanWallets()">
+        @click="router.go()">
         Try again
-        <!--        todo fix try again-->
       </app-button>
     </div>
   </app-panel>
@@ -49,7 +48,7 @@ import AppButton from '@/components/AppButton'
 const walletStore = useWalletStore()
 
 const { status } = storeToRefs(walletStore)
-const { scanWallets } = walletStore
+const router = useRouter()
 
 const isProcessing = computed(() => {
   return status.value === 'detecting' || status.value === 'connecting' || status.value === 'disconnecting'
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index d3a5bde12..6867d84e1 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -37,16 +37,13 @@ export const useWalletStore = defineStore('wallet', () => {
   }
 
   async function scanWallets() {
-    // todo fix resetting state
-    if (detectedWallets.value) {
-      resetState()
-    }
     status.value = 'detecting'
 
     detectedWallets.value = await new Promise(resolve => {
       const timeout = setTimeout(() => {
         resolve(undefined)
         status.value = 'not detected'
+        disconnect()
       }, 10000)
 
       function setDetected({ newWallet }) {

From 0e5e40aec2b03f68390c29ff8cdff47ab0a82e95 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 2 Nov 2023 18:07:13 +0100
Subject: [PATCH 22/34] remove unused code

---
 src/components/TheWalletAccountControls.vue | 18 ------------------
 src/stores/wallet.js                        |  6 ------
 2 files changed, 24 deletions(-)

diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index a280b0c35..826a7924c 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -62,21 +62,3 @@ function exit() {
   }
 }
 </style>
-
-<style>
-.v-popper {
-  display: inline-block;
-
-  &__popper.v-popper--theme-menu {
-    .v-popper__inner {
-      margin: 0 var(--space-2);
-      padding: var(--space-3);
-      color: var(--color-white);
-      word-break: break-word;
-      @media (--desktop) {
-        word-break: normal;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/stores/wallet.js b/src/stores/wallet.js
index 6867d84e1..289d6d330 100644
--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -73,12 +73,6 @@ export const useWalletStore = defineStore('wallet', () => {
     aeSdk.value.disconnectWallet()
   }
 
-  function resetState() {
-    aeSdk.value = null
-    detectedWallets.value = null
-    status.value = null
-  }
-
   return {
     detectedWallets,
     status,

From 946bfd1e5f5b3029d1bb2009d5ec0ea7d3b66f42 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Mon, 6 Nov 2023 15:22:42 +0100
Subject: [PATCH 23/34] update navigation when wallet changed

---
 src/components/WalletAccountPanel.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index 1f4390fa2..62aa4b41f 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -77,9 +77,13 @@ const activeTabIndex = computed({
     return push(newRoute)
   },
 })
+
 if (process.client) {
   const limit = isDesktop() ? null : 3
   await fetchAccount(aeSdk.value.address, { limit })
+  watch(() => aeSdk.value.address, async() => {
+    await fetchAccount(aeSdk.value.address, { limit })
+  })
 }
 </script>
 

From e5b8dac1f1711edae72873342d7952caf8f6de6c Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 7 Nov 2023 15:42:24 +0100
Subject: [PATCH 24/34] add portfolio layout

---
 src/components/AccountTokensTable.vue         | 25 +++++-
 .../AccountTokensTableCondensed.vue           | 19 ++++-
 src/components/TheWalletAccountControls.vue   |  5 ++
 src/components/WalletPortfolioPanel.vue       | 83 +++++++++++++++++++
 src/components/WalletPortfolioStats.vue       | 82 ++++++++++++++++++
 src/pages/wallet/portfolio.vue                | 25 ++++++
 6 files changed, 236 insertions(+), 3 deletions(-)
 create mode 100644 src/components/WalletPortfolioPanel.vue
 create mode 100644 src/components/WalletPortfolioStats.vue
 create mode 100644 src/pages/wallet/portfolio.vue

diff --git a/src/components/AccountTokensTable.vue b/src/components/AccountTokensTable.vue
index 29ba0ee73..237e17742 100644
--- a/src/components/AccountTokensTable.vue
+++ b/src/components/AccountTokensTable.vue
@@ -39,7 +39,12 @@
         v-for="token in accountTokens?.data"
         :key="token.contractId">
         <td>
-          <app-link :to="`/tokens/${token.contractId}`">
+          <app-link
+            :to="`/tokens/${token.contractId}`"
+            class="account-token-tables__link">
+            <token-symbol-icon
+              class="account-token-tables__icon"
+              :contract-id="token.contractId"/>
             {{ token.tokenSymbol }}
           </app-link>
         </td>
@@ -55,7 +60,7 @@
           {{ formatNumber(token.amount) }}
         </td>
         <td>
-          {{ token.value !== null ? `$${formatNumber(token.value,null,null, 7)}` : 'N/A' }}
+          {{ token.value !== null ? `$${formatNumber(token.value, null, null, 7)}` : 'N/A' }}
         </td>
       </tr>
     </tbody>
@@ -66,6 +71,7 @@
 import AppLink from '@/components/AppLink'
 import { tokensHints } from '@/utils/hints/tokensHints'
 import HintTooltip from '@/components/HintTooltip'
+import TokenSymbolIcon from '~/components/TokenSymbolIcon'
 
 defineProps({
   accountTokens: {
@@ -74,3 +80,18 @@ defineProps({
   },
 })
 </script>
+
+<style scoped>
+.account-token-tables {
+  &__icon {
+    width: 24px;
+    height: 24px;
+    margin-right: var(--space-1);
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/components/AccountTokensTableCondensed.vue b/src/components/AccountTokensTableCondensed.vue
index 53682963f..fc853154c 100644
--- a/src/components/AccountTokensTableCondensed.vue
+++ b/src/components/AccountTokensTableCondensed.vue
@@ -15,7 +15,12 @@
             </app-tooltip>
           </th>
           <td class="account-tokens-table-condensed__data">
-            <app-link :to="`/tokens/${token.contractId}`">
+            <app-link
+              :to="`/tokens/${token.contractId}`"
+              class="account-tokens-table-condensed__link">
+              <token-symbol-icon
+                class="account-tokens-table-condensed__icon"
+                :contract-id="token.contractId"/>
               {{ token.tokenSymbol }}
             </app-link>
           </td>
@@ -84,6 +89,7 @@ import AppLink from '@/components/AppLink'
 import AppTooltip from '@/components/AppTooltip'
 import ValueHashEllipsed from '@/components/ValueHashEllipsed'
 import { tokensHints } from '@/utils/hints/tokensHints'
+import TokenSymbolIcon from '~/components/TokenSymbolIcon'
 
 defineProps({
   accountTokens: {
@@ -116,5 +122,16 @@ defineProps({
   &__data {
     text-align: right;
   }
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+    margin-right: var(--space-1);
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+  }
 }
 </style>
diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 826a7924c..96d3dbfe2 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -11,6 +11,11 @@
       </app-link>
     </div>
     <template #menu>
+      <app-button
+        variant="link"
+        to="/wallet/portfolio">
+        Portfolio
+      </app-button>
       <app-button
         variant="link"
         @click="exit">
diff --git a/src/components/WalletPortfolioPanel.vue b/src/components/WalletPortfolioPanel.vue
new file mode 100644
index 000000000..2056f5fcf
--- /dev/null
+++ b/src/components/WalletPortfolioPanel.vue
@@ -0,0 +1,83 @@
+<template>
+  <client-only>
+    <app-tabs
+      v-if="isTabsVisible"
+      v-model="activeTabIndex">
+      <app-tab
+        title="Tokens"
+        :is-preselected="isTokensTabSelected">
+        <account-tokens-panel/>
+      </app-tab>
+    </app-tabs>
+  </client-only>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useRoute, useRouter } from 'nuxt/app'
+import { useWalletStore } from '@/stores/wallet'
+import { useAccountStore } from '@/stores/accountDetails'
+import { isDesktop } from '@/utils/screen'
+
+const walletStore = useWalletStore()
+const accountStore = useAccountStore()
+const { aeSdk } = storeToRefs(walletStore)
+const { accountDetails, accountTokens } = storeToRefs(accountStore)
+const { fetchAccount } = accountStore
+
+const TAB_KEYS = ['tokens']
+
+const { push, replace } = useRouter()
+
+const route = useRoute()
+
+const isTabsVisible = computed(() => process.client &&
+    ((accountDetails.value && !accountDetails.value?.notExistent) ||
+        !!accountTokens.value?.data.length))
+
+const isTokensTabSelected = computed(() => process.client &&
+    accountDetails.value?.notExistent &&
+    !!accountTokens.value?.data.length)
+
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
+
+if (process.client) {
+  const limit = isDesktop() ? null : 3
+  await fetchAccount(aeSdk.value.address, { limit })
+  watch(() => aeSdk.value.address, async() => {
+    await fetchAccount(aeSdk.value.address, { limit })
+  })
+}
+</script>
+
+<style scoped>
+.wallet-account-panel__account-details-panel {
+  margin-bottom: var(--space-4);
+  @media (--desktop) {
+    margin-bottom: var(--space-6);
+  }
+}
+</style>
diff --git a/src/components/WalletPortfolioStats.vue b/src/components/WalletPortfolioStats.vue
new file mode 100644
index 000000000..1d1e4842a
--- /dev/null
+++ b/src/components/WalletPortfolioStats.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="portfolio-stats">
+    <app-panel class="portfolio-stats__panel">
+      <h5>Account</h5>
+      <div class="portfolio-stats__account">
+        <app-identicon
+          :id="aeSdk.address"
+          class="portfolio-stats__identicon"/>
+        <div>
+          <app-link :to="aeSdk.address">
+            {{ aeSdk.address }}
+          </app-link>
+        </div>
+      </div>
+    </app-panel>
+    <app-panel class="portfolio-stats__panel">
+      <h5>Value 1</h5>
+      <div class="portfolio-stats__value">
+        11,123 AE
+      </div>
+    </app-panel>
+    <app-panel class="portfolio-stats__panel">
+      <h5>Value 2</h5>
+      <div class="portfolio-stats__value">
+        $ 123,58
+      </div>
+    </app-panel>
+  </div>
+</template>
+<script setup>
+
+import { storeToRefs } from 'pinia'
+import { useWalletStore } from '~/stores/wallet'
+import { useAccountStore } from '~/stores/accountDetails'
+
+const walletStore = useWalletStore()
+const accountStore = useAccountStore()
+const { aeSdk } = storeToRefs(walletStore)
+</script>
+
+<style scoped>
+.portfolio-stats {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  @media (--desktop) {
+    flex-direction: row;
+  }
+
+  &__panel {
+    padding: var(--space-4);
+    width: 100%;
+    @media (--desktop) {
+      width: 50%;
+    }
+  }
+
+  &__value {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+    font-size: 36px;
+    font-family: var(--font-monospaced);
+    font-weight: 400;
+    margin-top: var(--space-3);
+  }
+
+  &__account {
+    margin-top: var(--space-2);
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__identicon {
+    width: 32px;
+    height: 32px;
+    margin-right: var(--space-2);
+  }
+}
+</style>
diff --git a/src/pages/wallet/portfolio.vue b/src/pages/wallet/portfolio.vue
new file mode 100644
index 000000000..a0baf4785
--- /dev/null
+++ b/src/pages/wallet/portfolio.vue
@@ -0,0 +1,25 @@
+<template>
+  <Head>
+    <Title>Wallet Portfolio</Title>
+  </Head>
+
+  <page-header>
+    Wallet Portfolio
+    <template #tooltip>
+      {{ walletHints.wallet }}
+    </template>
+  </page-header>
+  <wallet-portfolio-stats class="portfolio_stats"/>
+  <wallet-portfolio-panel/>
+</template>
+
+<script setup>
+import { walletHints } from '@/utils/hints/walletHints'
+
+</script>
+
+<style scoped>
+.portfolio_stats {
+  margin-bottom: var(--space-4)
+}
+</style>

From 2a9f16b13766971c50dc6e6f5cdf299bdd61a0a9 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 7 Nov 2023 15:46:02 +0100
Subject: [PATCH 25/34] fix imports

---
 src/components/WalletPortfolioStats.vue | 2 --
 src/pages/wallet/portfolio.vue          | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/WalletPortfolioStats.vue b/src/components/WalletPortfolioStats.vue
index 1d1e4842a..04a8e06bc 100644
--- a/src/components/WalletPortfolioStats.vue
+++ b/src/components/WalletPortfolioStats.vue
@@ -31,10 +31,8 @@
 
 import { storeToRefs } from 'pinia'
 import { useWalletStore } from '~/stores/wallet'
-import { useAccountStore } from '~/stores/accountDetails'
 
 const walletStore = useWalletStore()
-const accountStore = useAccountStore()
 const { aeSdk } = storeToRefs(walletStore)
 </script>
 
diff --git a/src/pages/wallet/portfolio.vue b/src/pages/wallet/portfolio.vue
index a0baf4785..8e5617275 100644
--- a/src/pages/wallet/portfolio.vue
+++ b/src/pages/wallet/portfolio.vue
@@ -20,6 +20,6 @@ import { walletHints } from '@/utils/hints/walletHints'
 
 <style scoped>
 .portfolio_stats {
-  margin-bottom: var(--space-4)
+  margin-bottom: var(--space-4);
 }
 </style>

From a4e6a61d9350bcafcdc964b80b4d83fdee88964b Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Mon, 5 Feb 2024 03:56:31 +0100
Subject: [PATCH 26/34] fix code style

---
 src/assets/styles/utilities/_responsive.css | 1 +
 src/components/AppTooltip.vue               | 1 +
 src/components/WalletAccountPanel.vue       | 1 +
 src/components/WalletConnectionPanel.vue    | 1 +
 src/components/WalletPortfolioPanel.vue     | 1 +
 src/components/WalletPortfolioStats.vue     | 2 ++
 6 files changed, 7 insertions(+)

diff --git a/src/assets/styles/utilities/_responsive.css b/src/assets/styles/utilities/_responsive.css
index bd4548085..9ed0c6bc8 100644
--- a/src/assets/styles/utilities/_responsive.css
+++ b/src/assets/styles/utilities/_responsive.css
@@ -6,6 +6,7 @@
 
 .u-hidden-mobile {
   display: none !important;
+
   @media (--desktop) {
     display: revert !important;
   }
diff --git a/src/components/AppTooltip.vue b/src/components/AppTooltip.vue
index d7f65616a..af853b1eb 100644
--- a/src/components/AppTooltip.vue
+++ b/src/components/AppTooltip.vue
@@ -49,6 +49,7 @@ defineProps({
       color: var(--color-white);
       border: none;
       word-break: break-word;
+
       @media (--desktop) {
         word-break: normal;
       }
diff --git a/src/components/WalletAccountPanel.vue b/src/components/WalletAccountPanel.vue
index 62aa4b41f..db493fa8a 100644
--- a/src/components/WalletAccountPanel.vue
+++ b/src/components/WalletAccountPanel.vue
@@ -90,6 +90,7 @@ if (process.client) {
 <style scoped>
 .wallet-account-panel__account-details-panel {
   margin-bottom: var(--space-4);
+
   @media (--desktop) {
     margin-bottom: var(--space-6);
   }
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index 4d25ed679..4220cfec6 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -71,6 +71,7 @@ const title = computed(() => {
 .wallet-connection-panel {
   &__paragraph {
     margin-bottom: var(--space-5);
+
     @media (--desktop) {
       &:last-of-type {
         margin-bottom: var(--space-6);
diff --git a/src/components/WalletPortfolioPanel.vue b/src/components/WalletPortfolioPanel.vue
index 2056f5fcf..6ec45c579 100644
--- a/src/components/WalletPortfolioPanel.vue
+++ b/src/components/WalletPortfolioPanel.vue
@@ -76,6 +76,7 @@ if (process.client) {
 <style scoped>
 .wallet-account-panel__account-details-panel {
   margin-bottom: var(--space-4);
+
   @media (--desktop) {
     margin-bottom: var(--space-6);
   }
diff --git a/src/components/WalletPortfolioStats.vue b/src/components/WalletPortfolioStats.vue
index 04a8e06bc..0c8a6661e 100644
--- a/src/components/WalletPortfolioStats.vue
+++ b/src/components/WalletPortfolioStats.vue
@@ -42,6 +42,7 @@ const { aeSdk } = storeToRefs(walletStore)
   flex-direction: column;
   gap: var(--space-2);
   width: 100%;
+
   @media (--desktop) {
     flex-direction: row;
   }
@@ -49,6 +50,7 @@ const { aeSdk } = storeToRefs(walletStore)
   &__panel {
     padding: var(--space-4);
     width: 100%;
+
     @media (--desktop) {
       width: 50%;
     }

From 40824d5e861f416e9487c359fae3d642083b028b Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 15 Feb 2024 02:37:18 +0100
Subject: [PATCH 27/34] fixes after rebase

---
 src/components/TheNavigation.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/TheNavigation.vue b/src/components/TheNavigation.vue
index fe209de93..883534012 100644
--- a/src/components/TheNavigation.vue
+++ b/src/components/TheNavigation.vue
@@ -151,12 +151,6 @@ function updateIsDesktopResolution() {
     }
   }
 
-  &__item {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
   &__link {
     color: var(--color-midnight);
     display: block;

From acad242bac4708898c588b351371d70ec9026808 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Mon, 11 Mar 2024 04:16:47 +0100
Subject: [PATCH 28/34] fixes after rebase

---
 src/components/AppButton.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index c000b6882..1615c34e2 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -51,11 +51,6 @@ defineProps({
     type: String,
     default: null,
   },
-  variant: {
-    type: String,
-    default: null,
-    validator: val => ['link'].includes(val),
-  },
   target: {
     type: String,
     default: '_blank',

From 0f0d7fc51c4e3e5f45178fcf103b367ed3a03ff2 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Mon, 11 Mar 2024 05:54:54 +0100
Subject: [PATCH 29/34] fix buttons

---
 src/components/TheWalletAccountControls.vue | 1 -
 src/components/WalletConnectButton.vue      | 4 +++-
 src/components/WalletConnectionPanel.vue    | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/TheWalletAccountControls.vue b/src/components/TheWalletAccountControls.vue
index 96d3dbfe2..90b5e218d 100644
--- a/src/components/TheWalletAccountControls.vue
+++ b/src/components/TheWalletAccountControls.vue
@@ -59,7 +59,6 @@ function exit() {
 
   &__link {
     font-family: var(--font-monospaced);
-    font-size: 13px;
   }
 
   &__button {
diff --git a/src/components/WalletConnectButton.vue b/src/components/WalletConnectButton.vue
index 21ae569be..43d6ac6b5 100644
--- a/src/components/WalletConnectButton.vue
+++ b/src/components/WalletConnectButton.vue
@@ -1,5 +1,7 @@
 <template>
-  <app-button @click="initWallet()">
+  <app-button
+    size="lg"
+    @click="initWallet()">
     Connect Wallet
   </app-button>
 </template>
diff --git a/src/components/WalletConnectionPanel.vue b/src/components/WalletConnectionPanel.vue
index 4220cfec6..3af7f4cf5 100644
--- a/src/components/WalletConnectionPanel.vue
+++ b/src/components/WalletConnectionPanel.vue
@@ -28,11 +28,13 @@
       </div>
       <app-button
         v-if="status === 'not detected'"
+        size="lg"
         to="https://wallet.superhero.com/">
         Download Superhero wallet
       </app-button>
       <app-button
         v-if="status === 'denied'"
+        size="lg"
         @click="router.go()">
         Try again
       </app-button>

From 86d5fbc23c5c9059a471968ff959bf495bdbb275 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 23 May 2024 16:32:32 +0200
Subject: [PATCH 30/34] fix code style

---
 src/components/TheHeader.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index c903f282e..713dc1490 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -48,18 +48,10 @@
 </template>
 
 <script setup>
-import { isDesktop } from '@/utils/screen'
-import { useWalletStore } from '~/stores/wallet'
 import { useStatus } from '@/stores/status'
 
 const route = useRoute()
 
-const {
-  aeSdk,
-  balance,
-} = storeToRefs(walletStore)
-
-const route = useRoute()
 const isNavigationOpen = ref(false)
 
 const { isSyncing } = storeToRefs(useStatus())

From 63695fea2e23edb081df378adecf7ddfbeb9ed00 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Thu, 23 May 2024 16:33:36 +0200
Subject: [PATCH 31/34] fix code style

---
 src/components/AppButton.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index 1615c34e2..5f9980dc3 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -3,10 +3,6 @@
     v-if="!!to"
     :to="to"
     :target="target"
-    :class="[
-      'button',
-      size ? `button--${size}` : null,
-    ]"
     :disabled="disabled"
     :class="[
       'button',
@@ -148,7 +144,8 @@ defineProps({
     padding: 0;
 
     &:hover {
-      text-decoration: underline;}
+      text-decoration: underline;
+    }
   }
 }
 </style>

From 4af47dfe0142cd2a2af878adb5211fc2318b3bd8 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Tue, 16 Jul 2024 21:00:03 +0200
Subject: [PATCH 32/34] fixes after rebase

---
 nuxt.config.ts               | 161 ++++++++++++++++++-----------------
 src/components/TheHeader.vue |  63 +++++++-------
 2 files changed, 111 insertions(+), 113 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0f80a2bd3..438cf635f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,7 +4,7 @@ import {sentryVitePlugin} from '@sentry/vite-plugin'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  srcDir: './src',
+    srcDir: './src',
     css: ['@/assets/styles/main.css'],
     devServer: {
         port: 8080,
@@ -25,42 +25,6 @@ export default defineNuxtConfig({
     ],
     imports: {
         dirs: ['./stores'],
-  },
-  plausible: {
-    apiHost: 'https://plausible.dev.service.aepps.com',
-    trackLocalhost: false,
-  },
-  appConfig: {
-    APP_VERSION: process.env.APP_VERSION,
-  },
-  runtimeConfig: {
-    public: {
-      SENTRY_DSN: process.env.SENTRY_DSN,
-      APP_DOMAIN: process.env.APP_DOMAIN,
-      MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
-      NODE_URL: process.env.NODE_URL,
-      WEBSOCKET_URL: process.env.WEBSOCKET_URL,
-      DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
-      NETWORK_NAME: process.env.NETWORK_NAME,
-      NETWORK_ID: process.env.NETWORK_ID,
-      ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
-      ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
-      AE_TOKEN_ID: process.env.AE_TOKEN_ID,
-      DEBUG_MODE: process.env.DEBUG_MODE,
-      CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
-      SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
-    },
-  },
-
-  postcss: {
-    plugins: {
-      autoprefixer: {},
-      '@csstools/postcss-global-data': {
-        files: ['src/assets/styles/settings/_variables.css'],
-      },
-      'postcss-custom-media': {},
-      'postcss-import': {},
-      'postcss-nested': {},
     },
     plausible: {
         apiHost: 'https://plausible.dev.service.aepps.com',
@@ -71,7 +35,6 @@ export default defineNuxtConfig({
     },
     runtimeConfig: {
         public: {
-            SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
             SENTRY_DSN: process.env.SENTRY_DSN,
             APP_DOMAIN: process.env.APP_DOMAIN,
             MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
@@ -79,6 +42,7 @@ export default defineNuxtConfig({
             WEBSOCKET_URL: process.env.WEBSOCKET_URL,
             DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
             NETWORK_NAME: process.env.NETWORK_NAME,
+            NETWORK_ID: process.env.NETWORK_ID,
             ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
             ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
             AE_TOKEN_ID: process.env.AE_TOKEN_ID,
@@ -87,6 +51,7 @@ export default defineNuxtConfig({
             SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
         },
     },
+
     postcss: {
         plugins: {
             autoprefixer: {},
@@ -97,53 +62,89 @@ export default defineNuxtConfig({
             'postcss-import': {},
             'postcss-nested': {},
         },
-    },
-    sourcemap: true,
-    vite: {
-        build: {target: 'es2020'},
-        optimizeDeps: {
-            esbuildOptions: {target: 'es2020'},
+        plausible: {
+            apiHost: 'https://plausible.dev.service.aepps.com',
+            trackLocalhost: false,
+        },
+        appConfig: {
+            APP_VERSION: process.env.APP_VERSION,
+        },
+        runtimeConfig: {
+            public: {
+                SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
+                SENTRY_DSN: process.env.SENTRY_DSN,
+                APP_DOMAIN: process.env.APP_DOMAIN,
+                MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
+                NODE_URL: process.env.NODE_URL,
+                WEBSOCKET_URL: process.env.WEBSOCKET_URL,
+                DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
+                NETWORK_NAME: process.env.NETWORK_NAME,
+                ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
+                ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
+                AE_TOKEN_ID: process.env.AE_TOKEN_ID,
+                DEBUG_MODE: process.env.DEBUG_MODE,
+                CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
+                SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
+            },
         },
-        define: {
-            __VUE_PROD_DEVTOOLS__: process.env.MODE !== 'production',
+        postcss: {
+            plugins: {
+                autoprefixer: {},
+                '@csstools/postcss-global-data': {
+                    files: ['src/assets/styles/settings/_variables.css'],
+                },
+                'postcss-custom-media': {},
+                'postcss-import': {},
+                'postcss-nested': {},
+            },
         },
-        plugins: [
-            {
-                name: 'icon-svg-loader',
-                enforce: 'pre',
-                async load(path) {
-                    if (!path.match(/icons\/.*.svg$/)) {
-                        return
-                    }
+        sourcemap: true,
+        vite: {
+            build: {target: 'es2020'},
+            optimizeDeps: {
+                esbuildOptions: {target: 'es2020'},
+            },
+            define: {
+                __VUE_PROD_DEVTOOLS__: process.env.MODE !== 'production',
+            },
+            plugins: [
+                {
+                    name: 'icon-svg-loader',
+                    enforce: 'pre',
+                    async load(path) {
+                        if (!path.match(/icons\/.*.svg$/)) {
+                            return
+                        }
 
-                    const {code} = compileTemplate({
-                        id: JSON.stringify(path),
-                        filename: path,
-                        source: await fs.readFile(path, 'utf-8'),
-                        transformAssetUrls: false,
-                    })
+                        const {code} = compileTemplate({
+                            id: JSON.stringify(path),
+                            filename: path,
+                            source: await fs.readFile(path, 'utf-8'),
+                            transformAssetUrls: false,
+                        })
 
-                    return `${code}\nexport default { render: render }`
+                        return `${code}\nexport default { render: render }`
+                    },
                 },
+                sentryVitePlugin({
+                    authToken: process.env.SENTRY_AUTH_TOKEN,
+                    org: 'sentry',
+                    project: 'aescan-develop',
+                    url: 'https://sentry.dev.service.aepps.com/',
+                }),
+                sentryVitePlugin({
+                    authToken: process.env.SENTRY_AUTH_TOKEN,
+                    org: 'sentry',
+                    project: 'aescan-production',
+                    url: 'https://sentry.dev.service.aepps.com/',
+                }),
+            ],
+        },
+        monacoEditor: {
+            locale: 'en',
+            componentName: {
+                codeEditor: 'MonacoEditor',
             },
-            sentryVitePlugin({
-                authToken: process.env.SENTRY_AUTH_TOKEN,
-                org: 'sentry',
-                project: 'aescan-develop',
-                url: 'https://sentry.dev.service.aepps.com/',
-            }),
-            sentryVitePlugin({
-                authToken: process.env.SENTRY_AUTH_TOKEN,
-                org: 'sentry',
-                project: 'aescan-production',
-                url: 'https://sentry.dev.service.aepps.com/',
-            }),
-        ],
-    },
-    monacoEditor: {
-        locale: 'en',
-        componentName: {
-            codeEditor: 'MonacoEditor',
         },
-    },
+    }
 })
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 353633e09..969688ca2 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,68 +1,68 @@
 <template>
   <header class="header">
     <div
-      :class="[
+        :class="[
         'header__container',
         { 'header__container--open': isMobileMenuOpen },
       ]">
       <app-link
-        to="/"
-        @click="closeNavigation">
+          to="/"
+          @click="closeNavigation">
         <img
-          width="134"
-          alt="æScan logo"
-          src="@/assets/logo.svg">
+            width="134"
+            alt="æScan logo"
+            src="@/assets/logo.svg">
       </app-link>
 
       <div
-        class="header__hamburger"
-        @click="toggleNavigation">
+          class="header__hamburger"
+          @click="toggleNavigation">
         <app-icon
-          v-if="isMobileMenuOpen"
-          name="cross"
-          :size="34"/>
+            v-if="isMobileMenuOpen"
+            name="cross"
+            :size="34"/>
         <app-icon
-          v-else
-          name="menu"
-          :size="24"/>
+            v-else
+            name="menu"
+            :size="24"/>
       </div>
 
       <the-navigation
-        :class="[
+          :class="[
           'header__navigation',
           { 'header__navigation--open': isMobileMenuOpen },
         ]"/>
 
       <network-select
-        :class="[
+          :class="[
           'header__network-select',
           { 'header__network-select--open': isMobileMenuOpen }]"/>
 
       <the-wallet-account-controls class="u-hidden-mobile"/>
     </div>
     <div
-      v-if="isSyncing"
-      class="header__warning">
+        v-if="isSyncing"
+        class="header__warning">
       Some services are currently being synced and data accuracy might be affected. Please check again later.
     </div>
     <div
-      v-if="!isOnline"
-      class="header__warning">
+        v-if="!isOnline"
+        class="header__warning">
       You are currently offline. Please check your connection.
     </div>
     <div
-      v-if="nodeStatus === false"
-      class="header__warning">
+        v-if="nodeStatus === false"
+        class="header__warning">
       The Node is currently unavailable. Please check again later.
     </div>
     <div
-      v-if="middlewareStatus === false"
-      class="header__warning">
+        v-if="middlewareStatus === false"
+        class="header__warning">
       The Middleware is currently unavailable. Please check again later.
     </div>
     <div
-      v-if="isMarketCapAvailable === false"
-      class="header__warning">
+        v-if="isMarketCapAvailable === false"
+        class="header__warning">
       Market Cap data are currently not available. Fiat price might not be up to date. Please check again later.
     </div>
   </header>
@@ -78,14 +78,11 @@ import { useMarketStatsStore } from '@/stores/marketStats'
 
 const route = useRoute()
 
-const isNavigationOpen = ref(false)
-
-const { isSyncing } = storeToRefs(useStatus())
 const router = useRouter()
-const { isMobileMenuOpen } = storeToRefs(useUiStore())
+const {isMobileMenuOpen} = storeToRefs(useUiStore())
 const isOnline = useOnline()
-const { isSyncing, nodeStatus, middlewareStatus } = storeToRefs(useStatus())
-const { isMarketCapAvailable } = storeToRefs(useMarketStatsStore())
+const {isSyncing, nodeStatus, middlewareStatus} = storeToRefs(useStatus())
+const {isMarketCapAvailable} = storeToRefs(useMarketStatsStore())
 
 onMounted(() => {
   window.addEventListener('resize', closeNavigation)
@@ -108,7 +105,7 @@ watch(() => route.fullPath, () => {
 
 function toggleNavigation() {
   if (!isMobileMenuOpen.value && router.options.history.state.back === null) {
-    router.push({ hash: MENU_HASH })
+    router.push({hash: MENU_HASH})
   }
 
   isMobileMenuOpen.value = !isMobileMenuOpen.value

From 96ccd71752ff6d342aaca8a4e589e0f3621353ef Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 17 Jul 2024 10:04:08 +0200
Subject: [PATCH 33/34] extend testing timeout

---
 cypress.config.ts | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index b4d6f9b24..263b159d9 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,23 +1,23 @@
-import { defineConfig } from 'cypress'
+import {defineConfig} from 'cypress'
 
 export default defineConfig({
-  env: {
-    accountAddress: 'ak_gZ55FLJoGEfF5gJ2xJU7j9uSH3fEjoTZq3ygQG8gYA4no6GFW',
-    contractAddress: 'ct_s5ZB6cGCqS5QbUboQBK8CWwpknKRSajrt8b1EQRp4t4R5D47e',
-    microblockAddress: 'mh_27HKqcut9U9xDwEAf3Lz6evTxY4rfy7odKeSnQaqu45iQesjyj',
-    nftAddress: 'ct_2UVjVLvt2NycqbfJWywixyYm68iVvkiVS9wubiQRjp9WeQtfpK',
-    transactionAddress: 'th_2Yafj84tsuxskvJnzqGcvthrpDUX8gZE84RXVUwXvkSJxmxbc1',
-    oracleAddress: 'ok_2w2Gkp9mwThn6jWdJi5Leuh3P5Zj7oJ6gyoHa8KnKzWwEVSnKf',
-    tokenAddress: 'ct_2qyFRzXzTyPCtPKZQ32EPXqxxAcgiWqtADV3amcBVVPYQRKZm7',
-    stateChannelAddress: 'ch_2Qo4r6u3Bq1ZMnPL7GpjLLsATaEgMK5BnYnoi68hzLL5QuKbev',
-    name: 'testaensrawpointers.chain',
-    keyblockId: '947025',
-  },
-  e2e: {
-    baseUrl: 'http://localhost:8080',
-    experimentalRunAllSpecs: true,
-  },
-  viewportWidth: 1280,
-  viewportHeight: 720,
-  defaultCommandTimeout: 30000,
+    env: {
+        accountAddress: 'ak_gZ55FLJoGEfF5gJ2xJU7j9uSH3fEjoTZq3ygQG8gYA4no6GFW',
+        contractAddress: 'ct_s5ZB6cGCqS5QbUboQBK8CWwpknKRSajrt8b1EQRp4t4R5D47e',
+        microblockAddress: 'mh_27HKqcut9U9xDwEAf3Lz6evTxY4rfy7odKeSnQaqu45iQesjyj',
+        nftAddress: 'ct_2UVjVLvt2NycqbfJWywixyYm68iVvkiVS9wubiQRjp9WeQtfpK',
+        transactionAddress: 'th_2Yafj84tsuxskvJnzqGcvthrpDUX8gZE84RXVUwXvkSJxmxbc1',
+        oracleAddress: 'ok_2w2Gkp9mwThn6jWdJi5Leuh3P5Zj7oJ6gyoHa8KnKzWwEVSnKf',
+        tokenAddress: 'ct_2qyFRzXzTyPCtPKZQ32EPXqxxAcgiWqtADV3amcBVVPYQRKZm7',
+        stateChannelAddress: 'ch_2Qo4r6u3Bq1ZMnPL7GpjLLsATaEgMK5BnYnoi68hzLL5QuKbev',
+        name: 'testaensrawpointers.chain',
+        keyblockId: '947025',
+    },
+    e2e: {
+        baseUrl: 'http://localhost:8080',
+        experimentalRunAllSpecs: true,
+    },
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    defaultCommandTimeout: 40000,
 })

From 9a7bdbb82237608bdcd59c406c9b92055fdb07fe Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 17 Jul 2024 10:09:11 +0200
Subject: [PATCH 34/34] fix code indentation

---
 cypress.config.ts |  38 +++----
 nuxt.config.ts    | 258 +++++++++++++++++++++++-----------------------
 2 files changed, 148 insertions(+), 148 deletions(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index 263b159d9..f6758d7b2 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,23 +1,23 @@
 import {defineConfig} from 'cypress'
 
 export default defineConfig({
-    env: {
-        accountAddress: 'ak_gZ55FLJoGEfF5gJ2xJU7j9uSH3fEjoTZq3ygQG8gYA4no6GFW',
-        contractAddress: 'ct_s5ZB6cGCqS5QbUboQBK8CWwpknKRSajrt8b1EQRp4t4R5D47e',
-        microblockAddress: 'mh_27HKqcut9U9xDwEAf3Lz6evTxY4rfy7odKeSnQaqu45iQesjyj',
-        nftAddress: 'ct_2UVjVLvt2NycqbfJWywixyYm68iVvkiVS9wubiQRjp9WeQtfpK',
-        transactionAddress: 'th_2Yafj84tsuxskvJnzqGcvthrpDUX8gZE84RXVUwXvkSJxmxbc1',
-        oracleAddress: 'ok_2w2Gkp9mwThn6jWdJi5Leuh3P5Zj7oJ6gyoHa8KnKzWwEVSnKf',
-        tokenAddress: 'ct_2qyFRzXzTyPCtPKZQ32EPXqxxAcgiWqtADV3amcBVVPYQRKZm7',
-        stateChannelAddress: 'ch_2Qo4r6u3Bq1ZMnPL7GpjLLsATaEgMK5BnYnoi68hzLL5QuKbev',
-        name: 'testaensrawpointers.chain',
-        keyblockId: '947025',
-    },
-    e2e: {
-        baseUrl: 'http://localhost:8080',
-        experimentalRunAllSpecs: true,
-    },
-    viewportWidth: 1280,
-    viewportHeight: 720,
-    defaultCommandTimeout: 40000,
+  env: {
+    accountAddress: 'ak_gZ55FLJoGEfF5gJ2xJU7j9uSH3fEjoTZq3ygQG8gYA4no6GFW',
+    contractAddress: 'ct_s5ZB6cGCqS5QbUboQBK8CWwpknKRSajrt8b1EQRp4t4R5D47e',
+    microblockAddress: 'mh_27HKqcut9U9xDwEAf3Lz6evTxY4rfy7odKeSnQaqu45iQesjyj',
+    nftAddress: 'ct_2UVjVLvt2NycqbfJWywixyYm68iVvkiVS9wubiQRjp9WeQtfpK',
+    transactionAddress: 'th_2Yafj84tsuxskvJnzqGcvthrpDUX8gZE84RXVUwXvkSJxmxbc1',
+    oracleAddress: 'ok_2w2Gkp9mwThn6jWdJi5Leuh3P5Zj7oJ6gyoHa8KnKzWwEVSnKf',
+    tokenAddress: 'ct_2qyFRzXzTyPCtPKZQ32EPXqxxAcgiWqtADV3amcBVVPYQRKZm7',
+    stateChannelAddress: 'ch_2Qo4r6u3Bq1ZMnPL7GpjLLsATaEgMK5BnYnoi68hzLL5QuKbev',
+    name: 'testaensrawpointers.chain',
+    keyblockId: '947025',
+  },
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    experimentalRunAllSpecs: true,
+  },
+  viewportWidth: 1280,
+  viewportHeight: 720,
+  defaultCommandTimeout: 40000,
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 438cf635f..df98d4776 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,147 +4,147 @@ import {sentryVitePlugin} from '@sentry/vite-plugin'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    srcDir: './src',
-    css: ['@/assets/styles/main.css'],
-    devServer: {
-        port: 8080,
+  srcDir: './src',
+  css: ['@/assets/styles/main.css'],
+  devServer: {
+    port: 8080,
+  },
+  nitro: {
+    routeRules: {
+      '/proxy/nodes': {proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true},
+      '/proxy/gate': {proxy: 'https://api.gateio.ws/api/v4/spot/tickers?currency_pair=AE_USDT', cors: true},
+      '/proxy/mexc': {proxy: 'https://api.mexc.com/api/v3/ticker/24hr?symbol=AEUSDT', cors: true},
+      '/proxy/coinw': {proxy: 'https://api.coinw.com/api/v1/public?command=returnTicker', cors: true},
     },
-    nitro: {
-        routeRules: {
-            '/proxy/nodes': {proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true},
-            '/proxy/gate': {proxy: 'https://api.gateio.ws/api/v4/spot/tickers?currency_pair=AE_USDT', cors: true},
-            '/proxy/mexc': {proxy: 'https://api.mexc.com/api/v3/ticker/24hr?symbol=AEUSDT', cors: true},
-            '/proxy/coinw': {proxy: 'https://api.coinw.com/api/v1/public?command=returnTicker', cors: true},
-        },
+  },
+  modules: [
+    '@pinia/nuxt',
+    '@nuxtjs/plausible',
+    'nuxt-monaco-editor',
+    'nuxt-booster',
+  ],
+  imports: {
+    dirs: ['./stores'],
+  },
+  plausible: {
+    apiHost: 'https://plausible.dev.service.aepps.com',
+    trackLocalhost: false,
+  },
+  appConfig: {
+    APP_VERSION: process.env.APP_VERSION,
+  },
+  runtimeConfig: {
+    public: {
+      SENTRY_DSN: process.env.SENTRY_DSN,
+      APP_DOMAIN: process.env.APP_DOMAIN,
+      MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
+      NODE_URL: process.env.NODE_URL,
+      WEBSOCKET_URL: process.env.WEBSOCKET_URL,
+      DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
+      NETWORK_NAME: process.env.NETWORK_NAME,
+      NETWORK_ID: process.env.NETWORK_ID,
+      ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
+      ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
+      AE_TOKEN_ID: process.env.AE_TOKEN_ID,
+      DEBUG_MODE: process.env.DEBUG_MODE,
+      CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
+      SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
     },
-    modules: [
-        '@pinia/nuxt',
-        '@nuxtjs/plausible',
-        'nuxt-monaco-editor',
-        'nuxt-booster',
-    ],
-    imports: {
-        dirs: ['./stores'],
+  },
+
+  postcss: {
+    plugins: {
+      autoprefixer: {},
+      '@csstools/postcss-global-data': {
+        files: ['src/assets/styles/settings/_variables.css'],
+      },
+      'postcss-custom-media': {},
+      'postcss-import': {},
+      'postcss-nested': {},
     },
     plausible: {
-        apiHost: 'https://plausible.dev.service.aepps.com',
-        trackLocalhost: false,
+      apiHost: 'https://plausible.dev.service.aepps.com',
+      trackLocalhost: false,
     },
     appConfig: {
-        APP_VERSION: process.env.APP_VERSION,
+      APP_VERSION: process.env.APP_VERSION,
     },
     runtimeConfig: {
-        public: {
-            SENTRY_DSN: process.env.SENTRY_DSN,
-            APP_DOMAIN: process.env.APP_DOMAIN,
-            MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
-            NODE_URL: process.env.NODE_URL,
-            WEBSOCKET_URL: process.env.WEBSOCKET_URL,
-            DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
-            NETWORK_NAME: process.env.NETWORK_NAME,
-            NETWORK_ID: process.env.NETWORK_ID,
-            ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
-            ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
-            AE_TOKEN_ID: process.env.AE_TOKEN_ID,
-            DEBUG_MODE: process.env.DEBUG_MODE,
-            CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
-            SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
-        },
+      public: {
+        SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
+        SENTRY_DSN: process.env.SENTRY_DSN,
+        APP_DOMAIN: process.env.APP_DOMAIN,
+        MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
+        NODE_URL: process.env.NODE_URL,
+        WEBSOCKET_URL: process.env.WEBSOCKET_URL,
+        DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
+        NETWORK_NAME: process.env.NETWORK_NAME,
+        ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
+        ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
+        AE_TOKEN_ID: process.env.AE_TOKEN_ID,
+        DEBUG_MODE: process.env.DEBUG_MODE,
+        CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
+        SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
+      },
     },
-
     postcss: {
-        plugins: {
-            autoprefixer: {},
-            '@csstools/postcss-global-data': {
-                files: ['src/assets/styles/settings/_variables.css'],
-            },
-            'postcss-custom-media': {},
-            'postcss-import': {},
-            'postcss-nested': {},
-        },
-        plausible: {
-            apiHost: 'https://plausible.dev.service.aepps.com',
-            trackLocalhost: false,
-        },
-        appConfig: {
-            APP_VERSION: process.env.APP_VERSION,
+      plugins: {
+        autoprefixer: {},
+        '@csstools/postcss-global-data': {
+          files: ['src/assets/styles/settings/_variables.css'],
         },
-        runtimeConfig: {
-            public: {
-                SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
-                SENTRY_DSN: process.env.SENTRY_DSN,
-                APP_DOMAIN: process.env.APP_DOMAIN,
-                MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
-                NODE_URL: process.env.NODE_URL,
-                WEBSOCKET_URL: process.env.WEBSOCKET_URL,
-                DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
-                NETWORK_NAME: process.env.NETWORK_NAME,
-                ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
-                ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
-                AE_TOKEN_ID: process.env.AE_TOKEN_ID,
-                DEBUG_MODE: process.env.DEBUG_MODE,
-                CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
-                SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
-            },
-        },
-        postcss: {
-            plugins: {
-                autoprefixer: {},
-                '@csstools/postcss-global-data': {
-                    files: ['src/assets/styles/settings/_variables.css'],
-                },
-                'postcss-custom-media': {},
-                'postcss-import': {},
-                'postcss-nested': {},
-            },
-        },
-        sourcemap: true,
-        vite: {
-            build: {target: 'es2020'},
-            optimizeDeps: {
-                esbuildOptions: {target: 'es2020'},
-            },
-            define: {
-                __VUE_PROD_DEVTOOLS__: process.env.MODE !== 'production',
-            },
-            plugins: [
-                {
-                    name: 'icon-svg-loader',
-                    enforce: 'pre',
-                    async load(path) {
-                        if (!path.match(/icons\/.*.svg$/)) {
-                            return
-                        }
+        'postcss-custom-media': {},
+        'postcss-import': {},
+        'postcss-nested': {},
+      },
+    },
+    sourcemap: true,
+    vite: {
+      build: {target: 'es2020'},
+      optimizeDeps: {
+        esbuildOptions: {target: 'es2020'},
+      },
+      define: {
+        __VUE_PROD_DEVTOOLS__: process.env.MODE !== 'production',
+      },
+      plugins: [
+        {
+          name: 'icon-svg-loader',
+          enforce: 'pre',
+          async load(path) {
+            if (!path.match(/icons\/.*.svg$/)) {
+              return
+            }
 
-                        const {code} = compileTemplate({
-                            id: JSON.stringify(path),
-                            filename: path,
-                            source: await fs.readFile(path, 'utf-8'),
-                            transformAssetUrls: false,
-                        })
+            const {code} = compileTemplate({
+              id: JSON.stringify(path),
+              filename: path,
+              source: await fs.readFile(path, 'utf-8'),
+              transformAssetUrls: false,
+            })
 
-                        return `${code}\nexport default { render: render }`
-                    },
-                },
-                sentryVitePlugin({
-                    authToken: process.env.SENTRY_AUTH_TOKEN,
-                    org: 'sentry',
-                    project: 'aescan-develop',
-                    url: 'https://sentry.dev.service.aepps.com/',
-                }),
-                sentryVitePlugin({
-                    authToken: process.env.SENTRY_AUTH_TOKEN,
-                    org: 'sentry',
-                    project: 'aescan-production',
-                    url: 'https://sentry.dev.service.aepps.com/',
-                }),
-            ],
+            return `${code}\nexport default { render: render }`
+          },
         },
-        monacoEditor: {
-            locale: 'en',
-            componentName: {
-                codeEditor: 'MonacoEditor',
-            },
-        },
-    }
+        sentryVitePlugin({
+          authToken: process.env.SENTRY_AUTH_TOKEN,
+          org: 'sentry',
+          project: 'aescan-develop',
+          url: 'https://sentry.dev.service.aepps.com/',
+        }),
+        sentryVitePlugin({
+          authToken: process.env.SENTRY_AUTH_TOKEN,
+          org: 'sentry',
+          project: 'aescan-production',
+          url: 'https://sentry.dev.service.aepps.com/',
+        }),
+      ],
+    },
+    monacoEditor: {
+      locale: 'en',
+      componentName: {
+        codeEditor: 'MonacoEditor',
+      },
+    },
+  }
 })