WA-240: update stake list

sshyran · Feb 23, 2020 · de9a2b3 · de9a2b3
1 parent 1e12ccc
commit de9a2b3
Show file tree

Hide file tree

Showing 7 changed files with 329 additions and 126 deletions.
diff --git a/.github/workflows/dockerimage.yml b/.github/workflows/dockerimage.yml
@@ -18,4 +18,4 @@ jobs:
           PASSWORD: ${{ secrets.DOCKER_HUB_PASSWORD }}
           IMAGE_NAME: "minterteam/explorer-web"
           LATEST: "true"
-          TAG_NAME: "v1.0.0"
+          TAG_NAME: "v1.1.0"
diff --git a/api/index.js b/api/index.js
@@ -1,3 +1,4 @@
+import stripZeros from 'pretty-num/src/strip-zeros';
 import explorer from '~/api/explorer';
 import {padZero} from '~/assets/utils';
 import {REWARD_CHART_TYPES, COIN_NAME, TX_STATUS} from '~/assets/variables';
@@ -154,20 +155,36 @@ export function getTransactionChart() {
 /**
  *
  * @param {string} address
- * @return {Promise<Array<CoinItem>>}
+ * @return {Promise<BalanceData>}
  */
 export function getBalance(address) {
-    return explorer.get(`addresses/${address}`)
-        .then((response) => response.data.data.balances.sort((a, b) => {
+    return explorer.get(`addresses/${address}?withSum=true`)
+        .then((response) => {
+            const data = response.data.data;
+            data.balances = prepareBalance(data.balances);
+            return data;
+        });
+}
+
+export function prepareBalance(balanceList) {
+    return balanceList.sort((a, b) => {
             // set base coin first
             if (a.coin === COIN_NAME) {
                 return -1;
             } else if (b.coin === COIN_NAME) {
                 return 1;
             } else {
                 return 0;
+                // sort by name, instead of reserve
+                // return a.coin.localeCompare(b.coin);
             }
-        }));
+        })
+        .map((coinItem) => {
+            return {
+                ...coinItem,
+                amount: stripZeros(coinItem.amount),
+            };
+        });
 }
 
 /**
@@ -352,6 +369,13 @@ export function getValidatorTransactionList(pubKey, params) {
  * @property {Array<ValidatorListItem>} validators
  */
 
+/**
+ * @typedef {Object} BalanceData
+ * @property {string} total_balance_sum
+ * @property {string} total_balance_sum_usd
+ * @property {Array<CoinItem>} balances
+ */
+
 /**
  * @typedef {Object} CoinItem
  * @property {string|number} amount

diff --git a/assets/less/include/general.less b/assets/less/include/general.less
@@ -67,41 +67,36 @@ hr {border: none; border-top: 1px solid @c-border;}
 
 // table
 @table-cell-padding: 10px;
-@table-cell-vertical-padding-large: 15px;
-@table-expand-button-size: (@table-cell-padding * 2 + 14px * 1.4);
-@table-expand-button-size-large: (@table-cell-vertical-padding-large * 2 + 14px * 1.4);
+@table-cell-vertical-padding-large: 14px;
+@table-expand-button-size: (@table-cell-padding * 2 / 2 + 14px * 1.4);
+@table-expand-button-size-large: (@table-cell-vertical-padding-large * 2 / 2 + 14px * 1.4);
 .table-wrap {overflow: auto;}
 table {width: 100%; border-collapse: collapse;}
 th {background: #f6f6f6;}
 td, th {
     border: 1px solid @c-border; padding: @table-cell-padding; text-align: left;
     &:first-child {border-left: none;}
     &:last-child {border-right: none;}
-}
-//td > table td {
-//    padding-top: 0; padding-bottom: 0; border: none;
-//    &:first-child {padding-left: 0;}
-//    &:last-child {padding-right: 0;}
-//}
-.table--vertical-top {
-    td {vertical-align: top;}
+    //tr:last-child & {border-bottom: 1px solid @c-border;}
 }
 .table__inner {margin-top: -10px;}
 .table__inner-item {margin-top: 10px; /*max-width: calc(100vw - @container-padding * 2 - 10px * 2); overflow-wrap: break-word;*/}
 .table__cell-title {font-weight: 700;}
 .table__cell-sub {font-size: 12px;}
+.table__cell-stake-amount {padding-right: 0;}
 .is-expanded > td {background: #f6f6f6;}
 .table__row-expanded-data {
     td {background: #f6f6f6; border-left: none; border-right: none;}
 }
-.table__expand-cell {padding: 0; width: @table-expand-button-size;}
-.table__expand-button {
+.table__controls-cell {padding: (@table-cell-padding / 2); width: @table-expand-button-size; box-sizing: content-box; font-size: 0; text-align: right;}
+.table__controls-button {width: @table-expand-button-size; height: @table-expand-button-size; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;}
+.table__controls-button--expand {
     width: @table-expand-button-size; height: @table-expand-button-size; font-size: 0; position: relative; left: 0; top: 0;
-    &::before, &::after {content: ''; width: 10px; height: 2px; position: absolute; top: 50%; margin-top: 3px; background: @c-black-light;}
+    &::before, &::after {content: ''; width: 12px; height: 2px; position: absolute; top: 50%; margin-top: 4px; background: #707070;}
     &::before {transform: rotate(45deg); right: 50%; transform-origin: 100% 100%;}
     &::after {transform: rotate(-45deg); left: 50%; transform-origin: 0 100%;}
-    &.is-expanded::before {transform: rotate(-45deg); transform-origin: 100% 0; margin-top: -4px;}
-    &.is-expanded::after {transform: rotate(45deg); transform-origin: 0 0; margin-top: -4px;}
+    &.is-expanded::before {transform: rotate(-45deg); transform-origin: 100% 0; margin-top: -5px;}
+    &.is-expanded::after {transform: rotate(45deg); transform-origin: 0 0; margin-top: -5px;}
 }
 .table--recipient-list {
     th, td {
@@ -113,6 +108,9 @@ td, th {
     th, td {border: none; padding: 0;}
     td:first-child {padding-right: 6px; /*text-align: right;*/}
 }
+.table--stake-list {
+    th, td {border-left: none; border-right: none;}
+}
 .table__sort-button {display: flex; align-items: center; min-height: 24px;}
 .table__sort-button-icon {margin-left: 8px; opacity: 0;}
 .table__sort-button-icon--descending {transform: rotateX(180deg); opacity: 1;}
@@ -140,14 +138,31 @@ td, th {
     .table__inner {display: flex; flex-wrap: wrap; margin-left: -24px;}
     .table__inner-item {margin-left: 24px;}
     //.table__cell-overflow--middle {margin-left: -2px; margin-right: -2px;}
-    .table__expand-cell {width: @table-expand-button-size-large;}
-    .table__expand-button {width: @table-expand-button-size-large; height: @table-expand-button-size-large;}
+    .table__controls-cell {padding: (@table-cell-vertical-padding-large / 2); width: @table-expand-button-size-large;}
+    //.table__controls-cell--x2 {width: (@table-expand-button-size-large * 2);}
+    //.table__controls-cell--copy + td {padding-left: (@table-expand-button-size-large / 2);}
+    .table__controls-button {width: @table-expand-button-size-large; height: @table-expand-button-size-large;}
     .table--recipient-list {
         th, td {
             &:first-child {width: 460px;}
         }
     }
 }
+@media (max-width: @breakpoint-medium-down) {
+    .table__row-lead--medium-down {
+        td {padding-bottom: 0; border-bottom: none;}
+        .table__controls-cell {padding-top: @table-cell-padding;}
+        & + tr td {border-top: none; padding-top: 0;}
+    }
+    //.table__cell-stake-amount {padding-left: 0;}
+    //.table__controls-cell--copy {
+    //    & + td, & + th {padding-right: 0;}
+    //}
+    //.table-stake-list {
+    //    display: grid;
+    //    thead, tbody, tr {display: contents;}
+    //}
+}
 
 // dl
 dl {margin: 0; padding: 20px; border-top: 1px solid @c-border;}