diff --git a/CHANGELOG.md b/CHANGELOG.md index 710715d49e28..3ab8a7682620 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ - [#2146](https://github.com/poanetwork/blockscout/pull/2146) - feat: add eth_getLogs rpc endpoint ### Fixes +- [#2260](https://github.com/poanetwork/blockscout/pull/2260) - staking colors issues, staking modal issues +- [#2236](https://github.com/poanetwork/blockscout/pull/2236) - staking page colors, gaps, and pagination issues - [#2201](https://github.com/poanetwork/blockscout/pull/2201) - footer columns fix - [#2179](https://github.com/poanetwork/blockscout/pull/2179) - fix docker build error - [#2165](https://github.com/poanetwork/blockscout/pull/2165) - sort blocks by timestamp when calculating average block time diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 6e50100f0d76..e7db661025d3 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/apps/block_scout_web/assets/css/components/_card.scss @@ -91,6 +91,19 @@ $card-tab-icon-color-active: #20b760 !default; } } +.card-title-paging { + padding: 0px $card-horizontal-padding; + display: flex; + justify-content: flex-end; +} + +.card-footer-paging { + padding: 0px $card-horizontal-padding; + padding-bottom: 25px; + display: flex; + justify-content: flex-end; +} + .card-title-controls { align-items: center; display: flex; diff --git a/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss b/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss index 8489576ff4b8..c2df361d9759 100644 --- a/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss +++ b/apps/block_scout_web/assets/css/components/_modal_bottom_disclaimer.scss @@ -14,6 +14,10 @@ border-bottom-right-radius: 0; } + &.b-b-l-0 { + border-bottom-left-radius: 0; + } + .modal-bottom-disclaimer-graphic { flex-shrink: 0; padding-right: 15px; diff --git a/apps/block_scout_web/assets/css/components/_modal_stake.scss b/apps/block_scout_web/assets/css/components/_modal_stake.scss index f9b3e0217663..e9c5546c3fb8 100644 --- a/apps/block_scout_web/assets/css/components/_modal_stake.scss +++ b/apps/block_scout_web/assets/css/components/_modal_stake.scss @@ -11,3 +11,26 @@ .modal-stake-two-cols { display: flex; } + +.modal-stake-move { + max-width: 100%; + width: 680px; + + @include media-breakpoint-down(sm) { + margin-left: auto; + margin-right: auto; + } +} + +.modal-stake-middle { + border-left: 1px solid $base-border-color; + + height: 100%; +} + +.modal-stake-left { + flex-shrink: 0; + height: 100%; + padding: $modal-vertical-padding $modal-horizontal-padding; + width: 190px; +} diff --git a/apps/block_scout_web/assets/css/components/_modal_status.scss b/apps/block_scout_web/assets/css/components/_modal_status.scss index 92856250fc2b..c2cd925f4a9d 100644 --- a/apps/block_scout_web/assets/css/components/_modal_status.scss +++ b/apps/block_scout_web/assets/css/components/_modal_status.scss @@ -15,8 +15,8 @@ $modal-status-graph-question: #329ae9 !default; .modal-status-graph { align-items: center; - border-top-left-radius: $modal-border-radius; - border-top-right-radius: $modal-border-radius; + border-top-left-radius: 8px; + border-top-right-radius: 8px; display: flex; height: 135px; justify-content: center; diff --git a/apps/block_scout_web/assets/css/components/_stakes.scss b/apps/block_scout_web/assets/css/components/_stakes.scss index 87271bc98365..acd0c8ede5c6 100644 --- a/apps/block_scout_web/assets/css/components/_stakes.scss +++ b/apps/block_scout_web/assets/css/components/_stakes.scss @@ -16,6 +16,7 @@ $stakes-stats-item-border-color: #fff !default; .stakes-top-stats { display: flex; justify-content: space-between; + align-items: center; @include stats-item($stakes-stats-item-border-color, $stakes-stats-item-color); @@ -67,8 +68,12 @@ $stakes-stats-item-border-color: #fff !default; } } +.stakes-top-stats-unit { + padding-left: 5px; +} + .stakes-top-stats-login { - color: $primary; + color: $secondary; cursor: pointer; margin-right: 8px; } @@ -140,3 +145,10 @@ $stakes-stats-item-border-color: #fff !default; justify-self: center; } } + +.staking-pg-container { + padding: 0 30px 30px; + &.at-bottom { + padding-top: 30px; + } +} diff --git a/apps/block_scout_web/assets/css/components/_stakes_table.scss b/apps/block_scout_web/assets/css/components/_stakes_table.scss index 0bbf59e69c8e..732085d9ebfc 100644 --- a/apps/block_scout_web/assets/css/components/_stakes_table.scss +++ b/apps/block_scout_web/assets/css/components/_stakes_table.scss @@ -67,9 +67,42 @@ $stakes-table-cell-separation: 25px !default; } .stakes-td-link-style { - color: $primary; + color: $secondary; .stakes-tr-banned & { color: $stakes-banned-color; } } + +.stakes-tr-banned td:last-child { + text-align: right; + padding-right: 30px; +} + +.stakes-table { + .check-tooltip { + &:hover { + .check-tooltip-circle { + fill: $secondary; + } + } + } + .stakes-tr-banned { + .check-tooltip { + .check-tooltip-circle { + fill: rgba($stakes-banned-color, .15); + } + .check-tooltip-check { + fill: $stakes-banned-color; + } + &:hover { + .check-tooltip-circle { + fill: $stakes-banned-color; + } + .check-tooltip-check { + fill: #fff; + } + } + } + } +} diff --git a/apps/block_scout_web/assets/css/theme/_dai_variables.scss b/apps/block_scout_web/assets/css/theme/_dai_variables.scss index 50cbcfa29037..cbac2c4e7244 100644 --- a/apps/block_scout_web/assets/css/theme/_dai_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_dai_variables.scss @@ -62,4 +62,41 @@ $card-tab-active: $secondary; // Badges $badge-neutral-color: #20446e; $badge-neutral-background-color: rgba(#20446e, .1); -$api-text-monospace-color: #20446e; \ No newline at end of file +$api-text-monospace-color: #20446e; + +// Staking +$stakes-btn-remove-pool-color: $secondary; +$stakes-dashboard-copy-icon-color: $secondary; +$btn-full-primary-bg: $secondary; +$stakes-address-color: $secondary; +$stakes-control-color: $secondary; +$progress-from-to-progress-background: $secondary; +$stakes-stats-item-border-color: rgba(#fff, .5); +$check-color: $secondary; +$modal-status-graph-success: $secondary; +.modal-content { + .form-control { + box-shadow: none !important; + outline: none !important; + border-color: #e2e5ec !important; + } + .btn-line { + border-color: $primary; + color: $primary; + &:hover { + background-color: $primary + } + } +} +.stakes-table-th-content { + .i-tooltip { + position: relative; + top: -2px; + } +} +.stakes-address-container { + .check-tooltip { + position: relative; + top: -1px; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_variables.scss b/apps/block_scout_web/assets/css/theme/_variables.scss index bff54cc6bf7a..abe1a342f472 100644 --- a/apps/block_scout_web/assets/css/theme/_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_variables.scss @@ -1,6 +1,6 @@ @import "theme/base_variables"; -@import "neutral_variables"; -// @import "dai_variables"; +// @import "neutral_variables"; +@import "dai_variables"; // @import "ethereum_classic_variables"; // @import "ethereum_variables"; // @import "ether1_variables"; @@ -12,7 +12,6 @@ // @import "musicoin_variables"; // @import "pirl_variables"; // @import "poa_variables"; -// @import "posdao_variables"; // @import "rinkeby_variables"; // @import "ropsten_variables"; // @import "social_variables"; diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index f486eb2111fa..cef567662840 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -31,6 +31,7 @@ import './pages/chain' import './pages/pending_transactions' import './pages/transaction' import './pages/transactions' +import './pages/stakes' import './pages/admin/tasks.js' diff --git a/apps/block_scout_web/assets/js/lib/modals.js b/apps/block_scout_web/assets/js/lib/modals.js index fb19532540bd..86f0a7cdb4e2 100644 --- a/apps/block_scout_web/assets/js/lib/modals.js +++ b/apps/block_scout_web/assets/js/lib/modals.js @@ -1,76 +1,633 @@ import $ from 'jquery' +import humps from 'humps' +import moment from 'moment' import Chart from 'chart.js' +import {store} from '../pages/stakes.js' -$(function () { - $('.js-become-candidate').on('click', function () { - $('#becomeCandidateModal').modal() +window.openBecomeCandidateModal = function () { + const el = '#becomeCandidateModal' + if ($(el).length) { + $(`${el} form`).unbind('submit') + $(`${el} form`).submit(() => { + becomeCandidate(el) + return false + }) + $(el).modal() + } else { + openWarningModal('Unauthorized', 'Please login with MetaMask') + } +} + +window.openRemovePoolModal = function () { + const modal = '#questionStatusModal' + openQuestionModal('Remove my Pool', 'Do you really want to remove your pool?') + $(`${modal} .btn-line.accept`).click(() => { + removeMyPool(modal) + return false }) - $('.js-validator-info-modal').on('click', function () { - $('#validatorInfoModal').modal() + $(`${modal} .btn-line.except`).unbind('click') + $(`${modal} .btn-line.except`).click(() => { + $(modal).modal('hide') }) + $(modal).modal() +} + +window.openMakeStakeModal = function (poolAddress) { + const modal = '#stakeModal' + $.getJSON('/staking_pool', { 'pool_hash': poolAddress }) + .done(response => { + const pool = humps.camelizeKeys(response.pool) + setProgressInfo(modal, pool) + $(`${modal} form`).unbind('submit') + $(`${modal} form`).on('submit', (e) => makeStake(e, modal, poolAddress)) + + $(modal).modal('show') + }) + .fail(() => { + $(modal).modal('hide') + openErrorModal('Error', 'Something went wrong') + }) +} + +window.openMoveStakeModal = async function (poolAddress) { + const modal = '#moveStakeModal' - $('.js-move-stake').on('click', function () { - $('#errorStatusModal').modal() + try { + let response = await $.getJSON('/staking_pool', { 'pool_hash': poolAddress }) + const pool = humps.camelizeKeys(response.pool) + const relation = humps.camelizeKeys(response.relation) + response = await $.getJSON('/staking_pools') + let pools = [] + $.each(response.pools, (_key, pool) => { + let p = humps.camelizeKeys(pool) + if (p.stakingAddressHash !== poolAddress) { + pools.push(p) + } + }) + + setProgressInfo(modal, pool) + const tokenSymbol = store.getState().tokenSymbol + $(`${modal} [user-staked]`).text(`${relation.stakeAmount} ${tokenSymbol}`) + $(`${modal} [max-allowed]`).text(`${relation.maxWithdrawAllowed} ${tokenSymbol}`) + + $.each($(`${modal} [pool-select] option:not(:first-child)`), (_, opt) => { + opt.remove() + }) + $.each(pools, (_key, pool) => { + var $option = $('