Merge pull request #728 from telosnetwork/724-add-token-route-to-addr…

…ess-pages #724, #725 | adding token route
telosnetwork · Apr 30, 2024 · 5d43953 · 5d43953
2 parents 3e255fe + 4daf762
commit 5d43953
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 
 import { contractManager } from 'src/boot/telosApi';
 import { getIcon } from 'src/lib/token-utils';
@@ -49,6 +49,7 @@ const contractName = ref('');
 const logo = ref<any>(null);
 const tokenList = ref<any>(null);
 const checksum = ref('');
+const isToken = computed(() => contract.value?.isToken() ?? false);
 
 const restart = async () => {
  if (!props.address) {
@@ -101,7 +102,7 @@ const getDisplay = async () => {
  ? ''
  : logo.value
  ;
- const name = (contract.value.isToken() && contract.value.getProperties()?.symbol)
+ const name = (isToken.value && contract.value.getProperties()?.symbol)
  ? contract.value.getProperties().symbol
  : contractName.value
  ;
@@ -138,7 +139,7 @@ function emitHighlight(val: string) {
  @mouseleave="emitHighlight('')"
 >
  <router-link
- :to="`/address/${checksum}`"
+ :to="`/${isToken?'token':'address'}/${checksum}`"
  :class="{
  'c-address-field__link': true,
  'c-address-field__link--highlight': highlightAddress === checksum && highlightAddress !== ''

diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
@@ -48,6 +48,7 @@ const initialLoadComplete = ref(false);
 const accountAddress = computed(() => route.params.address as string ?? '');
 const isLoggedIn = computed(() => store.getters['login/isLoggedIn']);
 const address = computed(() => store.getters['login/address']);
+const isToken = computed(() => contract.value?.isToken() ?? false);
 
 watch(accountAddress, (newVal, oldVal) => {
  if (newVal !== oldVal) {
@@ -120,6 +121,9 @@ async function loadAccount() {
  });
  }
  title.value = $t('pages.contract');
+ if (isToken.value){
+ title.value = $t('components.token');
+ }
  } else {
  contractManager.addContractToCache(accountAddress.value, { address: accountAddress.value });
  try {
@@ -220,7 +224,7 @@ async function loadAccount() {
  :label="$t('components.nfts.collection')"
  />
  <q-tab
- v-if="contract && contract.isToken()"
+ v-if="isToken"
  name="holders"
  class="c-address__tabs-tab"
  :to="{ query: {tab: 'holders' }}"
@@ -308,8 +312,8 @@ async function loadAccount() {
  >
  <NFTList :address="contract.address" filter="contract" />
  </q-tab-panel>
- <q-tab-panel v-if="contract && contract.isToken()" name="holders">
- <HolderList :contract="contract" />
+ <q-tab-panel v-if="isToken" name="holders">
+ <HolderList v-if="contract" :contract="contract" />
  </q-tab-panel>
  <q-tab-panel v-else name="internaltx">
  <InternalTransactionTable :title="accountAddress" :filter="{address:accountAddress}"/>

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -8,6 +8,18 @@ const routes = [
  component: () => import('pages/home/HomePage.vue'),
  }],
  },
+ {
+ path: '/token/:address',
+ component: () => import('layouts/MainLayout.vue'),
+ children: [
+ {
+ path: '',
+ name: 'token',
+ props: route => ({ page: route.query.page, pagesize: route.query.pagesize }),
+ component: () => import('pages/AccountPage.vue'),
+ },
+ ],
+ },
  {
  path: '/address/:address/sourcify',
  component: () => import('layouts/MainLayout.vue'),