Use formatToken in explorer

TeamNumio · May 26, 2020 · 59c48f5 · 59c48f5
1 parent a5f7e11
commit 59c48f5
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 22 deletions.
diff --git a/js/env-config.js b/js/env-config.js
@@ -1,6 +1,6 @@
 export default {
     "http://localhost": {
-        API_SERVER: "http://localhost:3001",
+        API_SERVER: "http://localhost:3000",
         ETH_NETWORK: "localhost",
         WS_API_ADDR: "ws://localhost:3031",
         HTTP_RPC_API_ADDR: "http://localhost:3030",

diff --git a/js/explorer/src/Block.vue b/js/explorer/src/Block.vue
@@ -34,7 +34,7 @@
 <script>
 
 import store from './store';
-import { readableEther, shortenHash, formatDate } from './utils';
+import { readableEther, shortenHash, formatDate, formatToken } from './utils';
 
 import TransactionList from './TransactionList.vue';
 import SearchField from './SearchField.vue';
@@ -47,10 +47,6 @@ const components = {
     CopyableAddress,
 };
 
-function formatToken(amount, token) {
-    return readableEther(amount);
-}
-
 export default {
     name: 'Block',
     created() {

diff --git a/js/explorer/src/Client.js b/js/explorer/src/Client.js
@@ -1,7 +1,6 @@
 import config from './env-config';
 import * as constants from './constants';
-import { formatEther } from 'ethers/utils';
-import { readableEther } from './utils';
+import { readableEther, formatToken } from './utils';
 import { BlockExplorerClient } from './BlockExplorerClient';
 const zksync_promise = import('zksync');
 import axios from 'axios';
@@ -25,8 +24,8 @@ export class Client {
 
     static async new() {
         const zksync = await zksync_promise;
-        const syncProvider = await zksync.Provider.newHttpProvider(config.HTTP_RPC_API_ADDR);
-        const tokensPromise = syncProvider.getTokens()
+        window.syncProvider = await zksync.Provider.newHttpProvider(config.HTTP_RPC_API_ADDR);
+        const tokensPromise = window.syncProvider.getTokens()
             .then(tokens => {
                 return Object.values(tokens)
                     .map(token => {
@@ -123,7 +122,7 @@ export class Client {
             .map(([tokenId, balance]) => {
                 return {
                     tokenId,
-                    balance: formatEther(balance),
+                    balance: formatToken(tokenId, balance),
                     tokenName: tokensInfoList[tokenId].syncSymbol,
                 };
             });

diff --git a/js/explorer/src/Transaction.vue b/js/explorer/src/Transaction.vue
@@ -39,12 +39,11 @@
 <script>
 
 import store from './store';
-import { readableEther, formatDate } from './utils';
+import { readableEther, formatDate, formatToken } from './utils';
 import { clientPromise } from './Client';
 import timeConstants from './timeConstants';
 
 import SearchField from './SearchField.vue';
-import { formatEther } from 'ethers/utils';
 
 const components = {
     SearchField,
@@ -165,16 +164,16 @@ export default {
                     { name: "Status",         value: `<b>${this.txData.status}</b>` },
                     { name: "From",           value: `<code><a ${target_from} href="${link_from}">${this.txData.from} ${onchain_from}</a></code>`      },
                     { name: "To",             value: `<code><a ${target_to} href="${link_to}">${this.txData.to} ${onchain_to}</a></code>`      },
-                    { name: "Amount",         value: `<b>${this.txData.tokenName}</b> ${formatEther(this.txData.amount)}`    },
+                    { name: "Amount",         value: `<b>${this.txData.tokenName}</b> ${formatToken(this.txData.amount, this.txData.tokenName)}`    },
                 ]
                 : [
                     { name: 'Tx hash',        value: tx_hash},
                     { name: "Type",           value: `<b>${this.txData.tx_type}</b>`   },
                     { name: "Status",         value: `<b>${this.txData.status}</b>` },
                     { name: "From",           value: `<code><a ${target_from} href="${link_from}">${this.txData.from} ${onchain_from}</a></code>`      },
                     { name: "To",             value: `<code><a ${target_to} href="${link_to}">${this.txData.to} ${onchain_to}</a></code>`      },
-                    { name: "Amount",         value: `<b>${this.txData.tokenName}</b> ${formatEther(this.txData.amount)}`    },
-                    { name: "fee",            value: `<b>${this.txData.feeTokenName}</b> ${formatEther(this.txData.fee)}` },
+                    { name: "Amount",         value: `<b>${this.txData.tokenName}</b> ${formatToken(this.txData.amount, this.txData.tokenName)}`    },
+                    { name: "fee",            value: `<b>${this.txData.feeTokenName}</b> ${formatToken(this.txData.fee, this.txData.tokenName)}` },
                     { name: "Created at",               value: formatDate(this.txData.created_at) },
                 ];
 

diff --git a/js/explorer/src/main.js b/js/explorer/src/main.js
@@ -44,11 +44,6 @@ Vue.mixin({
         store,
         routerBase: getRouterBase(),
     }),
-    methods: {
-        formatFranklin(value) {
-            return ethers.utils.formatEther(ethers.utils.bigNumberify(value).mul(1000000000000));
-        },
-    },
     computed: {
         blockchainExplorerTx() {
             return this.store.network === 'localhost' ? 'http://localhost:8000'

diff --git a/js/explorer/src/utils.js b/js/explorer/src/utils.js
@@ -38,3 +38,7 @@ export function formatDate(timeStr) {
     if (timeStr == null) return '';
     return timeStr.toString().split('T')[0] + " " + timeStr.toString().split('T')[1].slice(0, 8) + " UTC";
 }
+
+export function formatToken(amount, token) {
+    return window.syncProvider.tokenSet.formatToken(token, amount);
+}
diff --git a/js/zksync.js/src/utils.ts b/js/zksync.js/src/utils.ts
@@ -248,7 +248,7 @@ export function closestPackableTransactionFee(
 }
 
 export function isTransactionFeePackable(amount: utils.BigNumberish): boolean {
-    return closestPackableTransactionAmount(amount).eq(amount);
+    return closestPackableTransactionFee(amount).eq(amount);
 }
 
 export function buffer2bitsLE(buff) {