Claim Reward dialog UI improvements

staking
Vadim 5 years ago committed by Victor Baranov
parent 93acfb3a6f
commit f29e7e216f
  1. 17
      apps/block_scout_web/assets/css/components/stakes/_modal_claim_reward.scss
  2. 10
      apps/block_scout_web/assets/js/lib/modals.js
  3. 14
      apps/block_scout_web/assets/js/pages/stakes.js
  4. 53
      apps/block_scout_web/assets/js/pages/stakes/claim_reward.js
  5. 4
      apps/block_scout_web/lib/block_scout_web/channels/stakes_channel.ex
  6. 16
      apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_claim_reward_content.html.eex

@ -20,20 +20,17 @@
&.m-b-0 { &.m-b-0 {
margin-bottom: 0; margin-bottom: 0;
} }
&.left {
width: 49%;
float: left;
}
&.right {
width: 49%;
float: right;
}
} }
textarea { textarea {
background: #fff!important; background: #fff!important;
height: 38px; height: 38px;
} }
.amounts {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 80px;
grid-gap: 2vw;
}
} }

@ -87,7 +87,7 @@ export function lockModal ($modal, $submitButton = null, spinnerText = '') {
modalLocked = true modalLocked = true
} }
export function unlockModal ($modal, $submitButton = null) { export function unlockModal($modal, $submitButton = null) {
$modal.find('.close-modal').attr('disabled', false) $modal.find('.close-modal').attr('disabled', false)
const $button = $submitButton || $modal.find('.btn-add-full') const $button = $submitButton || $modal.find('.btn-add-full')
@ -106,28 +106,28 @@ export function unlockModal ($modal, $submitButton = null) {
modalLocked = false modalLocked = false
} }
export function openErrorModal (title, text, unclosable) { export function openErrorModal(title, text, unclosable) {
const $modal = $('#errorStatusModal') const $modal = $('#errorStatusModal')
$modal.find('.modal-status-title').text(title) $modal.find('.modal-status-title').text(title)
$modal.find('.modal-status-text').html(text) $modal.find('.modal-status-text').html(text)
openModal($modal, unclosable) openModal($modal, unclosable)
} }
export function openWarningModal (title, text) { export function openWarningModal(title, text) {
const $modal = $('#warningStatusModal') const $modal = $('#warningStatusModal')
$modal.find('.modal-status-title').text(title) $modal.find('.modal-status-title').text(title)
$modal.find('.modal-status-text').html(text) $modal.find('.modal-status-text').html(text)
openModal($modal) openModal($modal)
} }
export function openSuccessModal (title, text) { export function openSuccessModal(title, text) {
const $modal = $('#successStatusModal') const $modal = $('#successStatusModal')
$modal.find('.modal-status-title').text(title) $modal.find('.modal-status-title').text(title)
$modal.find('.modal-status-text').html(text) $modal.find('.modal-status-text').html(text)
openModal($modal) openModal($modal)
} }
export function openQuestionModal (title, text, acceptCallback = null, exceptCallback = null, acceptText = 'Yes', exceptText = 'No') { export function openQuestionModal(title, text, acceptCallback = null, exceptCallback = null, acceptText = 'Yes', exceptText = 'No') {
const $modal = $('#questionStatusModal') const $modal = $('#questionStatusModal')
const $closeButton = $modal.find('.close-modal') const $closeButton = $modal.find('.close-modal')

@ -202,7 +202,7 @@ if ($stakesPage.length) {
type: 'RECEIVED_CONTRACTS', type: 'RECEIVED_CONTRACTS',
stakingContract, stakingContract,
blockRewardContract, blockRewardContract,
tokenDecimals: parseInt(msg.token_decimals), tokenDecimals: parseInt(msg.token_decimals, 10),
tokenSymbol: msg.token_symbol tokenSymbol: msg.token_symbol
}) })
}) })
@ -259,6 +259,11 @@ if ($stakesPage.length) {
initialize(store) initialize(store)
} }
function hideCurrentModal() {
const $modal = currentModal()
if ($modal) $modal.modal('hide')
}
function initialize(store) { function initialize(store) {
if (window.ethereum) { if (window.ethereum) {
const web3 = new Web3(window.ethereum) const web3 = new Web3(window.ethereum)
@ -354,10 +359,7 @@ function setAccount(account, store) {
).receive('ok', () => { ).receive('ok', () => {
$addressField.html(account) $addressField.html(account)
refreshPageWrapper(store) refreshPageWrapper(store)
const $modal = currentModal() hideCurrentModal()
if ($modal) {
$modal.modal('hide')
}
}).receive('error', () => { }).receive('error', () => {
openErrorModal('Change account', errorMsg, true) openErrorModal('Change account', errorMsg, true)
}).receive('timeout', () => { }).receive('timeout', () => {
@ -366,6 +368,8 @@ function setAccount(account, store) {
} }
function setNetwork(networkId, store) { function setNetwork(networkId, store) {
hideCurrentModal()
let network = { let network = {
id: networkId, id: networkId,
authorized: false authorized: false

@ -123,9 +123,9 @@ function onPoolsFound($modal, $modalBody, channel, store) {
$poolsDropdown.blur() $poolsDropdown.blur()
$('textarea', $poolInfo).val(epochs) $('textarea', $poolInfo).val(epochs)
$('#token-reward-sum', $poolInfo).html(tokenRewardSum).data('default', tokenRewardSum) $('#token-reward-sum', $poolInfo).text(tokenRewardSum).data('default', tokenRewardSum)
$('#native-reward-sum', $poolInfo).html(nativeRewardSum).data('default', nativeRewardSum) $('#native-reward-sum', $poolInfo).text(nativeRewardSum).data('default', nativeRewardSum)
$('#tx-gas-limit', $poolInfo).html('~' + gasLimit).data('default', gasLimit) $('#tx-gas-limit', $poolInfo).text('~' + gasLimit).data('default', gasLimit)
$('#epoch-choice-all', $poolInfo).click() $('#epoch-choice-all', $poolInfo).click()
$specifiedEpochsText.val('') $specifiedEpochsText.val('')
$poolInfo.removeClass('hidden') $poolInfo.removeClass('hidden')
@ -217,7 +217,15 @@ function onPoolsFound($modal, $modalBody, channel, store) {
function claimStarted() { function claimStarted() {
status = 'claiming' status = 'claiming'
hideInputError($submitButton) hideInputError($submitButton)
lockUI(true, $modal, $submitButton, $poolsDropdown, $epochChoiceRadio, $specifiedEpochsText); lockUI(
true,
$modal,
$submitButton,
$poolsDropdown,
$epochChoiceRadio,
$specifiedEpochsText,
'Please, sign transaction in MetaMask'
)
const gasLimit = parseInt($('#tx-gas-limit', $modalBody).text().replace(/~/g, '').trim(), 10) const gasLimit = parseInt($('#tx-gas-limit', $modalBody).text().replace(/~/g, '').trim(), 10)
const state = store.getState() const state = store.getState()
@ -238,22 +246,31 @@ function onPoolsFound($modal, $modalBody, channel, store) {
} else { } else {
stakingContract.methods.claimReward(epochs, poolStakingAddress).send({ stakingContract.methods.claimReward(epochs, poolStakingAddress).send({
from, from,
gasPrice: 1000000000, gasPrice: web3.utils.toWei('1', 'gwei'),
gas: Math.ceil(gasLimit * 1.2) gas: Math.ceil(gasLimit * 1.2) // +20% reserve to ensure enough gas
}, async function(error, txHash) { }, async function(error, txHash) {
if (error) { if (error) {
claimFinished(error.message) claimFinished(error.message)
} else { } else {
try { try {
let tx let tx
let currentBlockNumber
const maxWaitBlocks = 6
const startBlockNumber = (await web3.eth.getBlockNumber()) - 0
const finishBlockNumber = startBlockNumber + maxWaitBlocks
do { do {
await sleep(5000) await sleep(5) // seconds
tx = await web3.eth.getTransactionReceipt(txHash) tx = await web3.eth.getTransactionReceipt(txHash)
} while (tx === null) currentBlockNumber = await web3.eth.getBlockNumber()
if (tx.status === true || tx.status === '0x1') { } while (tx === null && currentBlockNumber <= finishBlockNumber)
claimFinished() if (tx) {
if (tx.status === true || tx.status === '0x1') {
claimFinished()
} else {
claimFinished('Transaction reverted')
}
} else { } else {
claimFinished('Transaction reverted') claimFinished(`Your transaction was not mined in ${maxWaitBlocks} blocks. Please, try again with the increased gas price or fixed nonce (use Reset Account feature of MetaMask).`)
} }
} catch (e) { } catch (e) {
claimFinished(e.message) claimFinished(e.message)
@ -275,9 +292,9 @@ function onPoolsFound($modal, $modalBody, channel, store) {
}) })
} }
function lockUI(lock, $modal, $button, $poolsDropdown, $epochChoiceRadio, $specifiedEpochsText) { function lockUI(lock, $modal, $button, $poolsDropdown, $epochChoiceRadio, $specifiedEpochsText, spinnerText) {
if (lock) { if (lock) {
lockModal($modal, $button) lockModal($modal, $button, spinnerText)
} else { } else {
unlockModal($modal, $button) unlockModal($modal, $button)
} }
@ -286,8 +303,8 @@ function lockUI(lock, $modal, $button, $poolsDropdown, $epochChoiceRadio, $speci
$specifiedEpochsText.prop('disabled', lock) $specifiedEpochsText.prop('disabled', lock)
} }
function sleep(ms) { function sleep(seconds) {
return new Promise(resolve => setTimeout(resolve, ms)) return new Promise(resolve => setTimeout(resolve, seconds * 1000))
} }
function showButton(type, $modalBody, calculations) { function showButton(type, $modalBody, calculations) {
@ -325,8 +342,8 @@ function expandEpochsToArray(epochs) {
ranges = ranges.map((v) => { ranges = ranges.map((v) => {
if (v.indexOf('-') > -1) { if (v.indexOf('-') > -1) {
v = v.split('-') v = v.split('-')
v[0] = parseInt(v[0]) v[0] = parseInt(v[0], 10)
v[1] = parseInt(v[1]) v[1] = parseInt(v[1], 10)
v.sort((a, b) => a - b) v.sort((a, b) => a - b)
const min = v[0] const min = v[0]
const max = v[1] const max = v[1]
@ -336,7 +353,7 @@ function expandEpochsToArray(epochs) {
} }
return expanded return expanded
} else { } else {
return parseInt(v) return parseInt(v, 10)
} }
}) })
ranges = ranges.reduce((acc, val) => acc.concat(val), []) // similar to ranges.flat() ranges = ranges.reduce((acc, val) => acc.concat(val), []) // similar to ranges.flat()

@ -527,8 +527,8 @@ defmodule BlockScoutWeb.StakesChannel do
coin = %Token{symbol: Explorer.coin(), decimals: Decimal.new(18)} coin = %Token{symbol: Explorer.coin(), decimals: Decimal.new(18)}
push(socket, "claim_reward_recalculations", %{ push(socket, "claim_reward_recalculations", %{
token_reward_sum: StakesHelpers.format_token_amount(amounts.token_reward_sum, token, digits: 5, ellipsize: false, symbol: false), token_reward_sum: StakesHelpers.format_token_amount(amounts.token_reward_sum, token, digits: token.decimals, ellipsize: false, symbol: false),
native_reward_sum: StakesHelpers.format_token_amount(amounts.native_reward_sum, coin, digits: 5, ellipsize: false, symbol: false), native_reward_sum: StakesHelpers.format_token_amount(amounts.native_reward_sum, coin, digits: coin.decimals, ellipsize: false, symbol: false),
gas_limit: gas_limit, gas_limit: gas_limit,
error: error error: error
}) })

@ -6,16 +6,18 @@
<option disabled="disabled" selected="selected"><%= gettext("Choose Pool") %></option> <option disabled="disabled" selected="selected"><%= gettext("Choose Pool") %></option>
<%= for {pool_staking_address, data} <- @pools do %> <%= for {pool_staking_address, data} <- @pools do %>
<% <%
token_reward_sum = format_token_amount(data.token_reward_sum, @token, digits: 5, ellipsize: false, symbol: false) token_reward_sum = format_token_amount(data.token_reward_sum, @token, digits: @token.decimals, ellipsize: false, symbol: false)
native_reward_sum = format_token_amount(data.native_reward_sum, @coin, digits: 5, ellipsize: false, symbol: false) token_reward_sum_short = format_token_amount(data.token_reward_sum, @token, digits: 5, ellipsize: false, symbol: false)
native_reward_sum = format_token_amount(data.native_reward_sum, @coin, digits: @coin.decimals, ellipsize: false, symbol: false)
native_reward_sum_short = format_token_amount(data.native_reward_sum, @coin, digits: 5, ellipsize: false, symbol: false)
%> %>
<option value="<%= pool_staking_address %>" data-token-reward-sum="<%= token_reward_sum %>" data-native-reward-sum="<%= native_reward_sum %>" data-epochs="<%= data.epochs %>" data-gas-limit="<%= data.gas_estimate %>"> <option value="<%= pool_staking_address %>" data-token-reward-sum="<%= token_reward_sum %>" data-native-reward-sum="<%= native_reward_sum %>" data-epochs="<%= data.epochs %>" data-gas-limit="<%= data.gas_estimate %>">
<%= <%=
BlockScoutWeb.AddressView.trimmed_hash(pool_staking_address) <> BlockScoutWeb.AddressView.trimmed_hash(pool_staking_address) <>
" (" <> " (" <>
token_reward_sum <> " " <> @token.symbol <> token_reward_sum_short <> " " <> @token.symbol <>
"; " <> "; " <>
native_reward_sum <> " " <> @coin.symbol <> native_reward_sum_short <> " " <> @coin.symbol <>
")" ")"
%> %>
</option> </option>
@ -36,13 +38,13 @@
</p> </p>
<input type="text" class="form-control specified-epochs hidden" placeholder='<%= gettext("Epochs range(s) or enum, e.g.: 5-9,23-27,47,50") %>' /> <input type="text" class="form-control specified-epochs hidden" placeholder='<%= gettext("Epochs range(s) or enum, e.g.: 5-9,23-27,47,50") %>' />
</div> </div>
<div class="clearfix form-group"> <div class="form-group amounts">
<p class="form-p left"> <p class="form-p" align="left">
<%= gettext("You will receive:") %><br /> <%= gettext("You will receive:") %><br />
<span class="text-dark" id="token-reward-sum"></span> <span class="text-dark"><%= @token.symbol %></span><br /> <span class="text-dark" id="token-reward-sum"></span> <span class="text-dark"><%= @token.symbol %></span><br />
<span class="text-dark" id="native-reward-sum"></span> <span class="text-dark"><%= @coin.symbol %></span><br /> <span class="text-dark" id="native-reward-sum"></span> <span class="text-dark"><%= @coin.symbol %></span><br />
</p> </p>
<p class="form-p right"> <p class="form-p" align="right">
<%= gettext("Tx Gas Limit:") %><br /> <%= gettext("Tx Gas Limit:") %><br />
<span class="text-dark" id="tx-gas-limit"></span><br /> <span class="text-dark" id="tx-gas-limit"></span><br />
</p> </p>

Loading…
Cancel
Save