Merge pull request #114 from proximax-foundry/develop

Release v1.1.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "explorer",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/modules/account/components/AssetComponent.vue

@@ -1,25 +1,26 @@
 <template>
-  <div class="border-2 border-t-0">
-    <div v-if="accountAssets.length==0" class='text-blue-primary text-xs text-center font-semibold py-5'>No asset available</div>
-    <div v-else>
+  <div class="border-2 border-t-2">
+    <div v-if="accountAssets.length==0 && isFetching==false" class='text-blue-primary text-xs text-center font-semibold py-5'>No asset available</div>
+    <div v-else-if="isFetching">
+      <div class="flex justify-center items-center border-gray-400 mt-5 mb-5">
+        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-navy-primary mr-2"></div>
+        <span class="text-tsm">Fetching Assets</span>
+      </div>
+    </div>
+    <div v-else-if="accountAssets.length>0 && isFetching == false">
       <div class="grid grid-cols-4 md:hidden bg-gray-100 text-xs font-semibold text-gray-600 px-3">
         <div class="text-left px-2 py-3 col-span-1">ID</div>
         <div class="text-left pl-16 py-3 col-span-1">Alias</div>
         <div class="text-left pl-16 py-3 col-span-1">Balance</div> 
       </div>
       <div class="hidden md:grid md:grid-cols-8 bg-gray-100 text-xs font-semibold text-gray-600 px-3">
         <div class="text-left px-2 py-3 col-span-2">ID</div>
-        <div class="text-left px-2 py-3 col-span-3">Alias</div>
+        <div class="text-left px-2 py-3 col-span-4">Alias</div>
         <div class="text-left py-3 col-span-2">Balance</div>
-        <div class="text-left py-3">Creator</div>
       </div>
       <div v-for="(asset, index) in accountAssets" :key="index" class="grid grid-cols-5 text-xs md:hidden py-6 px-3 items-center" :class="`${(index != (accountAssets.length - 1))?'gray-line':''}`">
         <div class="px-2 py-3 col-span-2">
           <router-link :to="{ name: 'ViewAsset', params:{ id: asset.id }}" class="uppercase text-blue-600 hover:text-blue-primary hover:underline">{{ asset.id }}</router-link>
-          <div class="flex items-center mt-5"><div class="w-14 text-txs">Creator:</div>        
-          <div class="text-xs" v-if="asset.isOwner">Yes</div>
-          <div class="text-xs" v-else>No</div>
-        </div>
         </div>
         <div class="py-3 col-span-1">
           <div class="items-center">
@@ -29,7 +30,7 @@
               <img v-else-if="displayTokenName(asset.name[0].name).name=='METX'" src="@/modules/account/img/metx-logo.svg" class="inline-block h-7 w-7 mr-2 border-2 rounded-3xl">
               <img v-else src="@/modules/transaction/img/proximax-logo-gray.svg" class='inline-block h-6 w-6 mr-2 '>
             </div>
-            <div v-for="(namespaceAlias, modifier) in asset.name" :key="modifier" class="py-3 col-span-3 flex items-center">
+            <div v-for="(namespaceAlias, modifier) in asset.name" :key="modifier" class="py-3 col-span-4 flex items-center">
               <!-- <div v-if="namespaceAlias.namespaceId"> -->
               <router-link :to="{ name: 'ViewNamespace', params:{ namespaceParam: namespaceAlias.name }}" class="text-blue-600 hover:text-blue-primary hover:underline">{{ namespaceAlias.name }}</router-link>
               <span v-if="asset.name.length >1 && modifier != asset.name.length -1 " class="text-black mr-1 ml-1">{{ "/" }}</span> 
@@ -43,11 +44,11 @@
           <div class="inline-block text-txs font-bold">{{splitBalance(asset.balance).right}}</div>
         </div>
       </div>
-      <div v-for="(asset, index) in accountAssets" :key="index" class="hidden md:grid md:grid-cols-8 py-6 px-3 items-center text-xs" :class="`${(index != (accountAssets.length - 1))?'gray-line':''}`">
+      <div v-for="(asset, index) in accountAssets" :key="index" class="hidden md:grid md:grid-cols-8 py-6 px-3 items-center text-xs gray-line">
         <router-link :to="{ name: 'ViewAsset', params:{ id: asset.id }}" class="uppercase text-blue-600 hover:text-blue-primary hover:underline mx-2 my-3 col-span-2">{{ asset.id }}</router-link>
-        <div v-if="asset.name.length==0" class="py-3 col-span-3 flex items-center">
+        <div v-if="asset.name.length==0" class="py-3 col-span-4 flex items-center">
         </div>
-        <div v-else class="py-3 col-span-3 flex items-center ml-2">
+        <div v-else class="py-3 col-span-4 flex items-center ml-2">
           <!-- <div v-for="(namespaceAlias, modifier) in asset.name" :key="modifier" class="py-3 col-span-3 flex items-center"> -->
             <div class="inline-block mr-2" v-if="asset.name[0].name &&asset.name.length!=0">
               <img v-if="displayTokenName(asset.name[0].name).name=='XPX'" src="@/modules/account/img/proximax-logo.svg" class="inline-block h-7 w-7 mr-2 border-2 rounded-3xl">
@@ -71,33 +72,113 @@
           <div class="inline-block text-xs font-bold">{{ splitBalance(asset.balance).left }}</div>
           <div class="inline-block text-xs font-bold" v-if='splitBalance(asset.balance).right!=null'>.</div>
           <div class="inline-block text-txs font-bold">{{splitBalance(asset.balance).right}}</div>
+        </div>        
+      </div>
+        <div v-if="isPagination" class="ml-5 mr-5 sm:flex sm:justify-between my-5">
+        <div class="text-xs text-gray-700 mb-3 sm:mb-0 text-center sm:text-left">Show
+          <select v-model="pages" class="border border-gray-300 rounded-md p-1" @change="changeRows">
+            <option value=10>10</option>
+            <option value=20>20</option>
+            <option value=30>30</option>
+            <option value=40>40</option>
+            <option value=50>50</option>
+          </select>
+          Records
+        </div>
+        <div  class="sm:flex sm:items-center text-center sm:text-right">
+          <div v-if="enableFirstPage" @click="naviFirst" class="bg-blue-100 inline-block border border-blue-100 rounded-sm px-2 py-1 text-blue-700 text-xs mx-1 cursor-pointer hover:bg-blue-200 duration-300 transition-all">First</div><div v-else class="bg-gray-50 inline-block border border-gray-50 rounded-sm px-2 py-1 text-gray-700 text-xs mx-1">First</div>
+          <div v-if="enablePreviousPage" @click="naviPrevious" class="bg-blue-100 inline-block border border-blue-100 rounded-sm px-2 py-1 text-blue-700 text-xs mx-1 cursor-pointer hover:bg-blue-200 duration-300 transition-all">Previous</div><div v-else class="bg-gray-50 inline-block border border-gray-50 rounded-sm px-2 py-1 text-gray-700 text-xs mx-1">Previous</div>
+          <div class="bg-gray-50 inline-block border border-gray-50 rounded-sm px-2 py-1 text-gray-700 text-xs">Page {{ currentPage }} of {{ totalPages }}</div>
+          <div v-if="enableNextPage" @click="naviNext" class="bg-blue-100 inline-block border border-blue-100 rounded-sm px-2 py-1 text-blue-700 text-xs mx-1 cursor-pointer hover:bg-blue-200 duration-300 transition-all">Next</div><div v-else class="bg-gray-50 inline-block border border-gray-50 rounded-sm px-2 py-1 text-gray-700 text-xs mx-1">Next</div>
+          <div v-if="enableLastPage" @click="naviLast" class="bg-blue-100 inline-block border border-blue-100 rounded-sm px-2 py-1 text-blue-700 text-xs ml-1 cursor-pointer hover:bg-blue-200 duration-300 transition-all">Last</div><div v-else class="bg-gray-50 inline-block border border-gray-50 rounded-sm px-2 py-1 text-gray-700 text-xs mx-1">Last</div>
         </div>
-        <div class="py-3 text-left"><div v-if="asset.isOwner">Yes</div><div v-else>No</div></div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
+import { Helper } from "@/util/typeHelper";
+import { AccountUtils } from "@/util/accountUtil";
+import { computed, ref} from "vue";
 import { AppState } from '@/state/appState';
+import { MosaicSearch } from "tsjs-xpx-chain-sdk";
+
 export default {
   name:"AssetComponent",
   props:{
-    accountAssets: Array,
+    accountAsset: Array,
+    accountPublicKey: String
+
   },
-  setup(props){
-    // const accountAssets = ref({});
-
-    // const loadAsset = async() => {
-    //   if(!AppState.isReady){
-    //     setTimeout(loadAsset, 1000);
-    //   }
-    //   let account = await AccountUtils.getAccountFromAddress(props.address);
-    //   accountAssets.value = await AccountUtils.formatAccountAsset(account.mosaics);
+  setup(prop){
+    const pages = ref(10);
+    const currentPage = ref(1)
+    const totalPages = ref(0);
+    const isFetching = ref(true);
+    const isPagination = ref(false);
+    const accountAssets = ref([]);
+     
+    
+
+
+    // let pagination = (blocks)=>{
+    //   let blockValue = blocks.slice((currentPage.value-1) * pages.value, currentPage.value * pages.value);
+    //   return blockValue;
     // }
-    // loadAsset();
+   //   console.log(accountAssets.value);
+
+   
+    
+    const enableFirstPage = computed(() => {
+      return currentPage.value > 1;
+    });
+
+    const enablePreviousPage = computed(() => {
+      return currentPage.value > 1;
+    });
+
+    const enableNextPage = computed(() => {
+      return (totalPages.value - currentPage.value) > 0;
+    });
+
+    const enableLastPage = computed(() => {
+      return currentPage.value < totalPages.value;
+    });
+
+    const naviFirst = () => {
+      currentPage.value = 1;
+      isFetching.value = true;
+      loadAsset();
+    }
 
+    const naviPrevious = () => {
+      --currentPage.value;
+      isFetching.value = true;
+      loadAsset();
+    }
+
+    const naviNext = () => {
+      ++currentPage.value;
+      isFetching.value = true;
+      loadAsset();
+    }
+
+    const naviLast = () => {
+      currentPage.value = totalPages.value;
+      isFetching.value = true;
+
+      loadAsset();
+
+     // loadRecentBlock();
+    }
+
+    const changeRows = () => {
+      currentPage.value = 1;
+      isFetching.value = true;
+      loadAsset();
+      //loadRecentBlock();
+    }
     const splitBalance = (balance) => {
       let split = balance.toString().split(".")
       if (split[1] != undefined){
@@ -106,7 +187,33 @@ export default {
         return { left: split[0], right: null }
       }
     }
+    const loadAsset = async() => {
+      if(!AppState.isReady){
+        setTimeout(loadAsset, 1000);
+      }      
+      let mosaics_list = [];
+      if(prop.accountAsset.length > 10){
+        isPagination.value = true;
+        mosaics_list = prop.accountAsset.slice((currentPage.value-1) * pages.value, currentPage.value * pages.value);
+      }else{
+        mosaics_list = prop.accountAsset;
+      }
+      console.log(mosaics_list);
+
+      let AssetList =  await AccountUtils.formatAccountAsset(mosaics_list, prop.accountPublicKey);
+      accountAssets.value = AssetList;
+            console.log(pages.value);
 
+            console.log(currentPage.value);
+
+      totalPages.value = Math.ceil(prop.accountAsset.length / pages.value); 
+      isFetching.value = false;
+      console.log(totalPages.value);
+      console.log(prop.accountAsset.length);
+
+    }
+    loadAsset();
+    
     const displayTokenName = (name) => {
 
       if(name === ""){
@@ -128,6 +235,21 @@ export default {
     return{
       splitBalance,
       displayTokenName,
+      pages,
+      currentPage,
+      totalPages,
+      enableFirstPage,
+      enablePreviousPage,
+      enableNextPage,
+      enableLastPage,
+      naviFirst,
+      naviPrevious,
+      naviNext,
+      naviLast,
+      changeRows,
+      accountAssets,
+      isFetching,
+      isPagination
     }
   }
 }

src/modules/account/views/ViewAccount.vue

@@ -15,7 +15,7 @@
         <div class="w-18 text-center" :class="`${ (currentComponent=='txn')?'border-yellow-500 border-b-2':'cursor-pointer' }`" @click="setCurrentComponent('txn')">Transactions</div>
       </div>
       <div class="mb-20" v-if="!isFetching">
-        <AssetComponent :accountAssets="accountAssets" v-if="currentComponent=='asset'" />
+        <AssetComponent :accountAsset="accountAssets"  :accountPublicKey="strPublicKey" v-if="currentComponent=='asset'" />
         <NamespaceComponent :accountNamespaces="accountNamespaces" v-if="currentComponent=='namespace'" />
         <MetadataComponent :accountMetadata="accountMetadata" v-if="currentComponent=='metadata'" />
         <MultisigComponent :cosignatories="multisig.cosignatories" :multisig="multisig.multisigAccounts" :address="strAddress" v-else-if="currentComponent=='multisig'" />
@@ -126,9 +126,9 @@ export default {
       multisig.value = await AccountUtils.getMultisig(strAddress.value);
       cosignatoriesLength.value = multisig.value.cosignatories?multisig.value.cosignatories.length:0;
       multisigLength.value = multisig.value.multisigAccounts?multisig.value.multisigAccounts.length:0;
-
-      let fetchedAccountAssets = await AccountUtils.formatAccountAsset(account.mosaics, accountNamespaces.value, strPublicKey.value);
-      accountAssets.value = fetchedAccountAssets;
+      accountAssets.value = account.mosaics;
+    //  let fetchedAccountAssets = await AccountUtils.formatAccountAsset(account.mosaics, strPublicKey.value);
+      //accountAssets.value = fetchedAccountAssets;
       isFetching.value = false;
       isShowInvalid.value = false;
     };

src/modules/transaction/components/txnDataTables/AccountTxnDataTable.vue

@@ -13,7 +13,7 @@
       <Column style="width: 200px" v-if="!wideScreen">
         <template #body="{data}">
           <div>
-            <div class="uppercase text-xs text-gray-300 font-bold mb-1">Hash</div>
+            <div class="uppercase text-xs text-gray-300 font-bold mb-1">TX Hash</div>
             <router-link class="uppercase font-bold text-xs block text-blue-600 hover:text-blue-primary hover:underline" :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}">
               <span class="text-xs truncate inline-flex  hover:underline hover:text-blue-primary text-ellipsis overflow-hidden w-44" v-tooltip.right="data.hash">{{data.hash }}</span>...</router-link>
           </div>
@@ -62,7 +62,7 @@
           </div>
         </template>
       </Column>
-      <Column field="hash" header="Hash" headerStyle="width:70px;text-transform:uppercase"  v-if="wideScreen">
+      <Column field="hash" header="TX Hash" headerStyle="width:70px;text-transform:uppercase"  v-if="wideScreen">
         <template #body="{data}">
           <router-link :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}" class="text-xs text-blue-600 hover:text-blue-primary hover:underline inline-flex" v-tooltip.bottom="data.hash"><span class="text-ellipsis overflow-hidden w-44">{{data.hash}}</span>...</router-link>
         </template>

src/modules/transaction/components/txnDataTables/AggregateTxnDataTable.vue

@@ -13,7 +13,7 @@
       <Column style="width: 200px" v-if="!wideScreen">
         <template #body="{data}">
           <div>
-            <div class="uppercase text-xs text-gray-300 font-bold mb-1">Hash</div>
+            <div class="uppercase text-xs text-gray-300 font-bold mb-1">TX Hash</div>
             <router-link class="uppercase font-bold text-xs block text-blue-600 hover:text-blue-primary hover:underline" :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}">
               <span class="text-xs truncate inline-flex text-ellipsis overflow-hidden w-44 break-all hover:underline hover:text-blue-primary " v-tooltip.right="data.hash">{{data.hash}}</span>...
             </router-link>
@@ -44,7 +44,7 @@
           </div>
         </template>
       </Column>
-      <Column field="hash" header="Hash" headerStyle="width:80px;text-transform:uppercase" v-if="wideScreen">
+      <Column field="hash" header="TX Hash" headerStyle="width:80px;text-transform:uppercase" v-if="wideScreen">
         <template #body="{data}">
           <router-link :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}" class="text-xs text-blue-600 hover:text-blue-primary hover:underline inline-flex w-44" v-tooltip.bottom="data.hash"><span class="text-ellipsis overflow-hidden">{{data.hash}}</span>...</router-link>
         </template>

src/modules/transaction/components/txnDataTables/AliasTxnDataTable.vue

@@ -13,7 +13,7 @@
       <Column style="width: 200px" v-if="!wideScreen">
         <template #body="{data}">
           <div>
-            <div class="uppercase text-xs text-gray-300 font-bold mb-1">Hash</div>
+            <div class="uppercase text-xs text-gray-300 font-bold mb-1">TX Hash</div>
             <router-link class="uppercase font-bold text-xs block text-blue-600 hover:text-blue-primary hover:underline" :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}">
               <span class="text-xs truncate inline-flex break-all hover:underline hover:text-blue-primary text-ellipsis overflow-hidden w-44" v-tooltip.right="data.hash">{{data.hash }}</span>...
             </router-link>
@@ -45,7 +45,7 @@
           </div>
         </template>
       </Column>
-      <Column field="hash" header="Hash" headerStyle="width:100px;text-transform:uppercase" v-if="wideScreen">
+      <Column field="hash" header="TX Hash" headerStyle="width:100px;text-transform:uppercase" v-if="wideScreen">
         <template #body="{data}">
           <router-link :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}" class="truncate inline-flex text-xs text-blue-600 hover:text-blue-primary hover:underline w-44" v-tooltip.bottom="data.hash"><span class="text-ellipsis overflow-hidden">{{data.hash }}</span>...</router-link>
         </template>

src/modules/transaction/components/txnDataTables/AssetTxnDataTable.vue

@@ -13,7 +13,7 @@
       <Column style="width: 200px" v-if="!wideScreen">
         <template #body="{data}">
           <div>
-            <div class="uppercase text-xs text-gray-300 font-bold mb-1">Hash</div>
+            <div class="uppercase text-xs text-gray-300 font-bold mb-1">TX Hash</div>
             <router-link class="uppercase font-bold text-xs block text-blue-600 hover:text-blue-primary hover:underline" :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}">
               <span class="text-xs truncate inline-flex hover:underline hover:text-blue-primary text-ellipsis overflow-hidden w-44" v-tooltip.right="data.hash">{{data.hash}}</span>...
             </router-link>
@@ -66,12 +66,12 @@
           </div>
         </template>
       </Column>
-      <Column field="hash" header="Hash" headerStyle="width:100px;text-transform:uppercase" v-if="wideScreen">
+      <Column field="hash" header="TX Hash" headerStyle="width:100px;text-transform:uppercase" v-if="wideScreen">
         <template #body="{data}">
           <router-link :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}" class="text-xs text-blue-600 hover:text-blue-primary hover:underline truncate inline-flex w-20" v-tooltip.bottom="data.hash"><span class="text-ellipsis overflow-hidden">{{data.hash }}</span>...</router-link>
         </template>
       </Column>
-      <Column field="timestamp" header="Timestamp" headerStyle="width:110px;text-transform:uppercase" v-if="selectedGroupType === transactionGroupType.CONFIRMED && wideScreen" >
+      <Column field="timestamp" header="Timestamp" headerStyle="width:180px;text-transform:uppercase" v-if="selectedGroupType === transactionGroupType.CONFIRMED && wideScreen" >
         <template #body="{data}">
           <span class="text-xs">{{ convertLocalTime(data.timestamp) }}</span>
         </template>

src/modules/transaction/components/txnDataTables/ChainTxnDataTable.vue

@@ -13,7 +13,7 @@
       <Column style="width: 200px" v-if="!wideScreen">
         <template #body="{data}">
           <div>
-            <div class="uppercase text-xs text-gray-300 font-bold mb-1">Hash</div>
+            <div class="uppercase text-xs text-gray-300 font-bold mb-1">TX Hash</div>
             <router-link class="uppercase font-bold text-xs block text-blue-600 hover:text-blue-primary hover:underline" :to="{ name: 'ViewTransaction', params:{ hash: data.hash }}">
               <span class="text-xs truncate inline-flex break-all text-ellipsis overflow-hidden w-44 hover:underline hover:text-blue-primary" v-tooltip.right="data.hash">{{data.hash }}</span>...
             </router-link>