0x dashboard

assets/js/components/dapps/zrx/tradingPair.js

@@ -0,0 +1,56 @@
+parasails.registerComponent('zrx_trading_pair', {
+
+ props: [
+ 'sym1',
+ 'name1',
+ 'address1',
+ 'sym2',
+ 'name2',
+ 'address2',
+ ],
+
+ data: function() {
+ return {
+ };
+ },
+
+ template: `
+ <center class="columns">
+ <a class="column">
+ {{name1}}
+ </a>
+ <a class="column">
+ {{name2}}
+ </a>
+ </center>
+ `,
+
+ beforeMount: function() {
+ },
+ mounted: async function() {
+
+ },
+ beforeDestroy: function() {
+
+ },
+
+ filters: {
+ getAddress: function(value) {
+ return ("https://raw.githubusercontent.com/TrustWallet/tokens/master/tokens/0x" + value.toLowerCase() + ".png");
+ },
+ contractAddress: function(value) {
+ return "/contract/" + value + "/token";
+ }
+ },
+ watch: {
+ address: function(val) {
+ this.loaded = false;
+ },
+ },
+ methods: {
+ load: function(a, b) {
+ console.log("load", a, b)
+ this.loaded = true;
+ }
+ }
+});

assets/js/pages/dapps/zrx/index.js

@@ -2,14 +2,18 @@ parasails.registerPage('page_dapp_zrx', {
 
  data: {
  columns: [
- 'fname',
  'fsym',
  'count_of_trades',
  'count_of_traders',
  'count_of_relayers',
  ],
  options: {
-
+ filterable: false,
+ perPageValues: [25, 50, 100, 500],
+ perPage: 25,
+ headings: {
+ fsym: 'Token pair',
+ }
  }
  },
 

views/dapps/zrx/index.ejs

@@ -1,7 +1,21 @@
-<div id="page_dapp_zrx">
+<div id="page_dapp_zrx" class="container">
 <h3 class="title">0x protocol</h3>
 <p>0x is a decentralized protocol for trading digital assets on Ethereum.</p>
+<hr>
+<h3 class="title is-4">Traded pairs / 7 days</h3>
 <v-server-table url="/api/dapp/0x/pairs" :columns="columns" :options="options">
-
+ <center slot="fsym" slot-scope="props">
+ <zrx_trading_pair :name1="props.row.fname" :name2="props.row.sname" :sym1="props.row.fsym" :sym2="props.row.ssym" address1="props.row.faddress" :address2="props.row.saddress"></zrx_trading_pair>
+ <strong>{{ props.row.fsym }}/{{ props.row.ssym }}</strong>
+ </center>
+ <center slot="count_of_trades" slot-scope="props">
+ <strong>{{ props.row.count_of_trades.toLocaleString() }}</strong>
+ </center>
+ <center slot="count_of_traders" slot-scope="props">
+ <strong>{{ props.row.count_of_traders.toLocaleString() }}</strong>
+ </center>
+ <center slot="count_of_relayers" slot-scope="props">
+ <strong>{{ props.row.count_of_relayers.toLocaleString() }}</strong>
+ </center>
 </v-server-table>
 </div>

views/layouts/layout.ejs

@@ -56,6 +56,7 @@
  <script src="/js/components/address/adress_etherscan_link.js"></script>
  <script src="/js/components/contracts/contract_icon.js"></script>
  <script src="/js/components/contracts/contract_image.js"></script>
+ <script src="/js/components/dapps/zrx/tradingPair.js"></script>
  <script src="/js/components/general/general_trend_line.js"></script>
  <script src="/js/components/office/office_token_edit.js"></script>
  <script src="/js/components/tokens/token_image.js"></script>