Add more copyable addresses

TeamNumio · May 28, 2020 · c099f05 · c099f05
1 parent 299c25e
commit c099f05
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 44 deletions.
diff --git a/core/storage/src/chain/operations_ext/mod.rs b/core/storage/src/chain/operations_ext/mod.rs
@@ -362,13 +362,14 @@ impl<'a> OperationsExtSchema<'a> {
                     from 
                         operations
                     order by
-                        block_number
+                        block_number desc
                     $$) t3 (
                         block_number bigint, 
                         commited boolean, 
                         verified boolean)
             using 
                 (block_number)
+            order by block_number desc, created_at desc
             ",
             address = hex::encode(address.as_ref().to_vec()),
             offset = offset,

diff --git a/js/client/src/views/Login.vue b/js/client/src/views/Login.vue
@@ -56,6 +56,12 @@ export default {
                 
                 const signer = ethersProvider.getSigner();
                 const syncWallet = await zksync.Wallet.fromEthSigner(signer, syncProvider);
+
+                if (! await syncWallet.isSigningKeySet()) {
+                    const changePubKey = await syncWallet.setSigningKey();
+                    await changePubKey.awaitReceipt();
+                }
+
                 window.ethProvider = ethersProvider;
                 window.ethSigner = signer;
                 window.syncWallet = syncWallet;

diff --git a/js/explorer/src/Account.vue b/js/explorer/src/Account.vue
@@ -15,8 +15,15 @@
         <b-breadcrumb class="" :items="breadcrumbs"></b-breadcrumb>
         <h5 class="mt-3 mb-2">Account data</h5>
         <b-card no-body class="table-margin-hack">
-            <b-table responsive thead-class="hidden_header" class="my-0 py-0" :items="accountDataProps">
-                <template v-slot:cell(value)="data"><span v-html="data.item.value" /></template>
+            <b-table responsive thead-class="hidden_header" :items="accountDataProps">
+                <template v-slot:cell(value)="data">
+                    <CopyableAddress
+                        class="bigger-text"
+                        :address="address" 
+                        :linkHtml="data.item['value']"
+                        :tooltipRight="true"
+                    />
+                </template>
             </b-table>
         </b-card>
         <h5 class="mt-3 mb-2">Account balances</h5>
@@ -51,16 +58,18 @@
                     :fields="transactionFields" 
                     @row-clicked="onRowClicked">
                     <template v-slot:cell(Type)   ="data"><span v-html="data.item['Type']"    /></template>
-                    <template v-slot:cell(TxnHash)="data"><span v-html="data.item['TxnHash']" /></template>
+                    <template v-slot:cell(TxnHash)   ="data">
+                        <CopyableAddress class="normalize-text" :address="data.item['hash']" :linkHtml="data.item['TxnHash'] "/>
+                    </template>
                     <template v-slot:cell(Block)  ="data"><span v-html="data.item['Block']"   /></template>
                     <template v-slot:cell(Value)  ="data"><span v-html="data.item['Value']"   /></template>
                     <template v-slot:cell(Amount) ="data"><span v-html="data.item['Amount']"  /></template>
                     <template v-slot:cell(Age)    ="data"><span v-html="data.item['Age']"     /></template>
                     <template v-slot:cell(From)   ="data">
-                        <CopyableAddress :address="data.item['fromAddr']" :linkHtml="data.item['From'] "/>
+                        <CopyableAddress class="normalize-text" :address="data.item['fromAddr']" :linkHtml="data.item['From'] "/>
                     </template>
                     <template v-slot:cell(To)   ="data">
-                        <CopyableAddress :address="data.item['toAddr']" :linkHtml="data.item['To'] "/>
+                        <CopyableAddress class="normalize-text" :address="data.item['toAddr']" :linkHtml="data.item['To'] "/>
                     </template>
                     <template v-slot:cell(Fee)    ="data"><span v-html="data.item['Fee']"     /></template>
                 </b-table>
@@ -78,12 +87,6 @@
 </div>
 </template>
 
-<style>
-.hidden_header {
-  display: none;
-}
-</style>
-
 <script>
 
 import store from './store';
@@ -140,7 +143,7 @@ export default {
         async update() {
             const balances = await this.client.getCommitedBalances(this.address);
             this.balances = balances
-                .map(bal => ({ name: bal.tokenName, value: bal.balance }));
+                .map(bal => ({ name: bal.tokenSymbol, value: bal.balance }));
 
             const offset = (this.currentPage - 1) * this.rowsPerPage;
             const limit = this.rowsPerPage;
@@ -190,7 +193,7 @@ export default {
         },
         accountDataProps() {
             return [
-                { name: 'Address',          value: `<code>${this.address}</code>`},
+                { name: 'Address',          value: `<a><code>${this.address}</code></a> ` },
             ];
         },
         balancesProps() {
@@ -217,25 +220,34 @@ export default {
                         </a>
                     </code>`;
 
-                    const link_from
-                        = tx.data.type == 'Deposit' ? `${this.blockchainExplorerAddress}/${tx.data.from}`
+                    const link_from = tx.data.type == 'Deposit' 
+                        ? `${this.blockchainExplorerAddress}/${tx.data.from}`
                         : `${this.routerBase}accounts/${tx.data.from}`;
 
-                    const link_to
-                        = tx.data.type == 'Withdraw' ? `${this.blockchainExplorerAddress}/${tx.data.to}`
+                    const link_to = tx.data.type == 'Withdraw' 
+                        ? `${this.blockchainExplorerAddress}/${tx.data.to}`
                         : `${this.routerBase}accounts/${tx.data.to}`;
 
-                    const target_from
-                        = tx.data.type == 'Deposit' ? `target="_blank" rel="noopener noreferrer"`
+                    const target_from = tx.data.type == 'Deposit' 
+                        ? `target="_blank" rel="noopener noreferrer"`
+                        : '';
+
+                    const target_to = tx.data.type == 'Withdraw' 
+                        ? `target="_blank" rel="noopener noreferrer"`
                         : '';
 
-                    const target_to
-                        = tx.data.type == 'Withdraw' ? `target="_blank" rel="noopener noreferrer"`
+                    const onchain_from = tx.data.type == 'Deposit' 
+                        ? '<i class="fas fa-external-link-alt"></i> '
+                        : '';
+
+                    const onchain_to = tx.data.type == 'Withdraw' 
+                        ? '<i class="fas fa-external-link-alt"></i> '
                         : '';
 
                     const From = `<code>
                         <a href="${link_from}" ${target_from}>
                             ${shortenHash(tx.data.from, 'unknown! from')}
+                            ${onchain_from}
                         </a>
                     </code>`;
 
@@ -246,6 +258,8 @@ export default {
                                     ? ''
                                     : shortenHash(tx.data.to, 'unknown! to')
                             }
+
+                            ${ tx.data.type == "ChangePubKey" ? '' : onchain_to }
                         </a>
                     </code>`;
 
@@ -290,4 +304,14 @@ export default {
 .table-width-hack td:first-child {
     width: 10em;
 }
+.normalize-text {
+    font-size: 1.0em;
+}
+.bigger-text {
+    font-size: 1.05em;
+}
+
+.hidden_header {
+    display: none;
+}
 </style>
diff --git a/js/explorer/src/Block.vue b/js/explorer/src/Block.vue
@@ -243,7 +243,4 @@ export default {
 </script>
 
 <style>
-.hidden_header {
-    display: none;
-}
 </style>
diff --git a/js/explorer/src/Client.js b/js/explorer/src/Client.js
@@ -108,22 +108,17 @@ export class Client {
     }
 
     getAccount(address) {
-        return fetch({
-            method: 'get',
-            url: `${config.API_SERVER}/api/v0.1/account/${address}`,
-        });
+        return window.syncProvider.getState(address);
     }
 
     async getCommitedBalances(address) {
         const account = await this.getAccount(address);
-        const tokensInfoList = await this.tokensPromise;
 
-        return Object.entries(account.commited.balances)
-            .map(([tokenId, balance]) => {
+        return Object.entries(account.committed.balances)
+            .map(([tokenSymbol, balance]) => {
                 return {
-                    tokenId,
-                    balance: formatToken(tokenId, balance),
-                    tokenName: tokensInfoList[tokenId].syncSymbol,
+                    tokenSymbol,
+                    balance: formatToken(balance, tokenSymbol),
                 };
             });
     }

diff --git a/js/explorer/src/CopyableAddress.vue b/js/explorer/src/CopyableAddress.vue
@@ -1,10 +1,17 @@
 <template>
     <code v-if="address">
-        <span v-html="linkHtml" />
-        <i @click="clicked" 
+        <span class="link-html-span" v-html="linkHtml" />
+        <i v-if="tooltipRight===true"
+            @click="clicked"
             class="far fa-copy" 
-            v-b-tooltip.hover
-            :title="hover_title"
+            v-b-tooltip.hover.right="hover_title"
+            v-clipboard="address"
+            @mouseenter="mouseEntered"
+        ></i>
+        <i v-else
+            @click="clicked"
+            class="far fa-copy" 
+            v-b-tooltip="hover_title"
             v-clipboard="address"
             @mouseenter="mouseEntered"
         ></i>
@@ -16,7 +23,7 @@ import { shortenHash } from './utils';
 
 export default {
     name: 'CopyableAddress',
-    props: ['address', 'linkHtml'],
+    props: ['address', 'linkHtml', 'tooltipRight'],
     data: () => ({
         hover_title: ''
     }),
@@ -31,3 +38,9 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.link-html-span {
+    font-size: 1.0em;
+}
+</style>
diff --git a/js/explorer/src/Transaction.vue b/js/explorer/src/Transaction.vue
@@ -27,7 +27,24 @@
             <h5 class="mt-3">Transaction data</h5>
             <b-card no-body class="table-margin-hack">
                 <b-table responsive thead-class="hidden_header" :items="props">
-                    <template v-slot:cell(value)="data"><span v-html="data.item['value']" /></template>
+                    <template v-slot:cell(value)="data">
+                        <CopyableAddress class="normalize-text"
+                            v-if="data.item['name'] == 'From'" 
+                            :address="txData.from" 
+                            :linkHtml="`${data.item['value']} `"
+                        />
+                        <CopyableAddress class="normalize-text" 
+                            v-else-if="data.item['name'] == 'To'" 
+                            :address="txData.to" 
+                            :linkHtml="`${data.item['value']} `"
+                        />
+                        <CopyableAddress class="normalize-text" 
+                            v-else-if="data.item['name'] == 'Tx hash'" 
+                            :address="tx_hash" 
+                            :linkHtml="`${data.item['value']} `"
+                        />
+                        <span v-else v-html="data.item['value']" />
+                    </template>
                 </b-table>
             </b-card>
             <br>
@@ -44,9 +61,11 @@ import { clientPromise } from './Client';
 import timeConstants from './timeConstants';
 
 import SearchField from './SearchField.vue';
+import CopyableAddress from './CopyableAddress.vue';
 
 const components = {
     SearchField,
+    CopyableAddress,
 };
 
 export default {
@@ -153,7 +172,7 @@ export default {
                     { name: 'Tx hash',                  value: tx_hash},
                     { name: "Type",                     value: `<b>${this.txData.tx_type}</b>`   },
                     { name: "Status",                   value: `<b>${this.txData.status}</b>` },
-                    { name: "Account",                  value: `<code><a ${target_from} href="${link_from}">${this.txData.from} ${onchain_from}</a></code>`      },
+                    { name: "Account",                  value: `<code><a ${target_from} href="${link_from}">${this.txData.from} ${onchain_from}</a></code>` },
                     { name: "New signer key hash",      value: `<code>${this.txData.to}</code>`},
                     { name: "Created at",               value: formatDate(this.txData.created_at) },
                 ]
@@ -162,15 +181,15 @@ export default {
                     { 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: "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> ${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: "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> ${formatToken(this.txData.amount, this.txData.tokenName)}`    },
                     { name: "fee",            value: `<b>${this.txData.feeTokenName}</b> ${formatToken(this.txData.fee, this.txData.tokenName)}` },
@@ -207,4 +226,8 @@ export default {
     padding: 0 .2em;
     color: white;
 }
+
+.normalize-text {
+    font-size: 1.0em;
+}
 </style>