feat: Wallet account view 2

.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'

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: {},

package.json

@@ -27,7 +27,6 @@
   },
   "dependencies": {
     "@aeternity/aepp-sdk": "^13.2.2",
-    "@download/blockies": "^1.0.3",
     "@vuepic/vue-datepicker": "^7.1.0",
     "@sentry/tracing": "^7.88.0",
     "@sentry/vue": "^7.88.0",

src/components/AppButton.vue

@@ -47,15 +47,6 @@ defineProps({
     type: String,
     default: null,
   },
-  target: {
-    type: String,
-    default: '_blank',
-  },
-  size: {
-    type: String,
-    default: null,
-    validator: val => ['lg'].includes(val),
-  },
   variant: {
     type: String,
     default: 'primary',
@@ -66,6 +57,15 @@ defineProps({
       'light']
       .includes(val),
   },
+  target: {
+    type: String,
+    default: '_blank',
+  },
+  size: {
+    type: String,
+    default: null,
+    validator: val => ['lg'].includes(val),
+  },
   type: {
     type: String,
     default: 'button',

src/components/AppDropdown.vue

@@ -0,0 +1,19 @@
+<template>
+  <VMenu>
+    <span>
+      <slot/>
+    </span>
+
+    <template #popper>
+      <slot name="menu"/>
+    </template>
+  </VMenu>
+</template>
+
+<style>
+.v-popper__popper.v-popper--theme-menu .v-popper__inner {
+  margin: 0 var(--space-2);
+  color: var(--color-midnight);
+  padding: 0 !important;
+}
+</style>

src/components/AppIdenticon.vue

@@ -1,34 +1,20 @@
 <template>
-  <canvas
-    ref="identicon"
-    class="app-identicon"/>
+  <img
+    :src="`https://avatars.z52da5wt.xyz/${hash}`"
+    class="identicon">
 </template>
 
 <script setup>
-import { renderIcon } from '@download/blockies'
-import { ref } from 'vue'
-
-const props = defineProps({
-  id: {
+defineProps({
+  hash: {
     type: String,
     required: true,
   },
 })
-
-onMounted(render)
-
-const identicon = ref()
-
-function render() {
-  renderIcon(
-    { seed: props.id },
-    identicon.value,
-  )
-}
 </script>
 
 <style scoped>
-.app-identicon {
+.identicon {
   display: inline-block;
   border-radius: 50%;
 }

src/components/AppTooltip.vue

@@ -41,23 +41,19 @@ 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>

src/components/TheHeader.vue

@@ -36,12 +36,15 @@
         :class="[
           'header__network-select',
           { 'header__network-select--open': isNavigationOpen }]"/>
+
+      <the-wallet-account-controls class="u-hidden-mobile"/>
     </div>
   </header>
 </template>
 
 <script setup>
 const route = useRoute()
+
 const isNavigationOpen = ref(false)
 
 onMounted(() => {

src/components/TheWalletAccountControls.vue

@@ -0,0 +1,65 @@
+<template>
+  <app-dropdown v-if="status === 'connected'">
+    <div class="wallet-account-controls">
+      <app-identicon
+        :hash="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
+        variant="link"
+        @click="exit">
+        Exit Wallet
+      </app-button>
+    </template>
+  </app-dropdown>
+
+  <app-button
+    v-else
+    class="wallet-account-controls__button"
+    to="/wallet">
+    Connect Wallet
+  </app-button>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia'
+import { formatEllipseHash } from '@/utils/format'
+import { useWalletStore } from '@/stores/wallet'
+
+const { go } = useRouter()
+
+const walletStore = useWalletStore()
+const { aeSdk, status } = storeToRefs(walletStore)
+const { disconnect } = walletStore
+
+function exit() {
+  disconnect()
+  go()
+}
+</script>
+
+<style scoped>
+.wallet-account-controls {
+  display: flex;
+  align-items: center;
+
+  &__identicon {
+    margin-right: var(--space-1);
+    width: 32px;
+  }
+
+  &__link {
+    font-family: var(--font-monospaced);
+    font-size: 13px;
+  }
+
+  &__button {
+    color: var(--color-white) !important;
+  }
+}
+</style>

src/components/TokenSymbolIcon.vue

@@ -11,7 +11,7 @@
 
   <app-identicon
     v-else
-    :id="contractId"/>
+    :hash="contractId"/>
 </template>
 <script setup>
 import { useRuntimeConfig } from 'nuxt/app'

src/components/WalletAccountPanel.vue

@@ -0,0 +1,98 @@
+<template>
+  <account-details-panel
+    v-if="accountDetails"
+    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'
+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 = ['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)
+  },
+})
+
+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>

src/components/WalletConnectButton.vue

@@ -0,0 +1,12 @@
+<template>
+  <app-button @click="initWallet()">
+    Connect Wallet
+  </app-button>
+</template>
+
+<script setup>
+import { useWalletStore } from '@/stores/wallet'
+
+const walletStore = useWalletStore()
+const { initWallet } = walletStore
+</script>