feat: Wallet account view 4

nuxt.config.ts

@@ -6,56 +6,51 @@ import {sentryVitePlugin} from '@sentry/vite-plugin'
 export default defineNuxtConfig({
   srcDir: './src',
   css: ['@/assets/styles/main.css'],
-
   devServer: {
     port: 8080,
   },
-
   nitro: {
     routeRules: {
+      "/proxy/avatar/**": {proxy: 'https://avatars.z52da5wt.xyz/**', cors: true,},
       '/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_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(';'),
+      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,
+      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(';'),
     },
   },
 
@@ -70,9 +65,7 @@ export default defineNuxtConfig({
       'postcss-nested': {},
     },
   },
-
   sourcemap: true,
-
   vite: {
     build: {target: 'es2020'},
     optimizeDeps: {
@@ -97,6 +90,7 @@ export default defineNuxtConfig({
             transformAssetUrls: false,
           })
 
+
           return `${code}\nexport default { render: render }`
         },
       },
@@ -122,5 +116,7 @@ export default defineNuxtConfig({
     },
   },
 
+
   compatibilityDate: '2024-07-16',
+
 })

package.json

@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@aeternity/aepp-sdk": "^13.3.2",
-    "@download/blockies": "^1.0.3",
     "@sentry/tracing": "^7.114.0",
     "@sentry/vite-plugin": "^2.21.1",
     "@sentry/vue": "^8.17.0",

src/assets/styles/elements/_table.css

@@ -31,7 +31,7 @@ td {
   vertical-align: middle;
 
   @media (--desktop) {
-    padding: 10px var(--space-0) var(--space-1);
+    padding: 10px var(--space-0) var(--space-1) 0;
   }
 }
 

src/components/AppButton.vue

@@ -90,7 +90,7 @@ defineProps({
   text-decoration: none;
   letter-spacing: 0.015em;
 
-  padding: var(--space-0) var(--space-1);
+  padding: var(--space-1);
 
   border-radius: 4px;
 

src/components/AppDropdown.vue

@@ -1,6 +1,8 @@
 <template>
-  <VMenu placement="bottom">
-    <slot/>
+  <VMenu  placement="bottom">
+    <span>
+      <slot/>
+    </span>
 
     <template #popper>
       <slot name="menu"/>

src/components/AppIdenticon.vue

@@ -1,34 +1,20 @@
 <template>
-  <canvas
-    ref="identicon"
-    class="app-identicon"/>
+  <img
+    :src="`/proxy/avatar/${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

@@ -37,6 +37,8 @@
         :class="[
           'header__network-select',
           { 'header__network-select--open': isMobileMenuOpen }]"/>
+
+      <the-wallet-account-controls class="u-hidden-mobile"/>
     </div>
     <div
       v-if="isSyncing"

src/components/TheWalletAccountControls.vue

@@ -0,0 +1,63 @@
+<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 @click="disconnectWallet">
+        Disconnect 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 disconnectWallet() {
+  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>