feat: Wallet portfolio

.env.example

@@ -10,6 +10,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'

cypress.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'cypress'
+import {defineConfig} from 'cypress'
 
 export default defineConfig({
   env: {
@@ -19,5 +19,5 @@ export default defineConfig({
   },
   viewportWidth: 1280,
   viewportHeight: 720,
-  defaultCommandTimeout: 30000,
+  defaultCommandTimeout: 40000,
 })

nuxt.config.ts

@@ -4,110 +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_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(';'),
-        },
+      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': {},
+      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
-                    }
+      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 }`
+          },
+        },
+        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',
-        },
+      locale: 'en',
+      componentName: {
+        codeEditor: 'MonacoEditor',
+      },
     },
+  }
 })

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>

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>

src/components/AppButton.vue

@@ -3,12 +3,12 @@
     v-if="!!to"
     :to="to"
     :target="target"
+    :disabled="disabled"
     :class="[
       'button',
       variant ? `button--${variant}` : null,
       size ? `button--${size}` : null,
-    ]"
-    :disabled="disabled">
+    ]">
     <app-icon
       v-if="iconName"
       :name="iconName"

src/components/AppDropdown.vue

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