diff --git a/CHANGELOG.md b/CHANGELOG.md index fe2218aa77..0d22d2283e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## Current ### Features +- [#3564](https://github.com/poanetwork/blockscout/pull/3564) - Staking welcome message ### Fixes diff --git a/apps/block_scout_web/assets/css/components/stakes/_stakes-btn-close-alert.scss b/apps/block_scout_web/assets/css/components/stakes/_stakes-btn-close-alert.scss new file mode 100644 index 0000000000..9aedcc0a90 --- /dev/null +++ b/apps/block_scout_web/assets/css/components/stakes/_stakes-btn-close-alert.scss @@ -0,0 +1,14 @@ +$stakes-btn-close-alert-color: $primary !default; + +.stakes-btn-close-alert { + position: absolute; + left: 1em; + top: 1em; + border-style: none; + background: transparent; + outline: none !important; + + path { + fill: $stakes-btn-close-alert-color; + } +} diff --git a/apps/block_scout_web/assets/css/stakes.scss b/apps/block_scout_web/assets/css/stakes.scss index 40ce92b118..d9106ccb57 100644 --- a/apps/block_scout_web/assets/css/stakes.scss +++ b/apps/block_scout_web/assets/css/stakes.scss @@ -20,3 +20,4 @@ @import "components/stakes/modal_validator_info"; @import "components/stakes/modal_delegators_info"; @import "components/stakes/modal_bottom_disclaimer"; +@import "components/stakes/stakes-btn-close-alert"; diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss index 1a97ece2e3..937c302b44 100644 --- a/apps/block_scout_web/assets/css/theme/_dark-theme.scss +++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss @@ -1101,6 +1101,11 @@ $dark-stakes-banned-background: #3e314c; .custom-power-input { border-color: $dark-primary; } + .stakes-btn-close-alert { + path { + fill: #fff; + } + } } .navbar-dark .navbar-toggler { diff --git a/apps/block_scout_web/assets/js/pages/stakes.js b/apps/block_scout_web/assets/js/pages/stakes.js index e8ebf49e47..c2fe675ced 100644 --- a/apps/block_scout_web/assets/js/pages/stakes.js +++ b/apps/block_scout_web/assets/js/pages/stakes.js @@ -22,6 +22,12 @@ import constants from './stakes/constants' const stakesPageSelector = '[data-page="stakes"]' +if (localStorage.getItem('stakes-alert-read') === 'true') { + $('.js-stakes-welcome-alert').hide() +} else { + $('.js-stakes-welcome-alert').show() +} + export const initialState = { account: null, blockRewardContract: null, @@ -145,6 +151,7 @@ const elements = { const $stakesPage = $(stakesPageSelector) const $stakesTop = $('[data-selector="stakes-top"]') const $refreshInformer = $('.refresh-informer', $stakesPage) + if ($stakesPage.length) { const store = createAsyncLoadStore(reducer, initialState, 'dataset.identifierPool') connectElements({ store, elements }) @@ -296,6 +303,10 @@ if ($stakesPage.length) { openClaimWithdrawalModal(event, store) } }) + .on('click', '.stakes-btn-close-alert', event => { + $(event.target).closest('section.container').hide() + localStorage.setItem('stakes-alert-read', 'true') + }) $stakesPage .on('change', '[pool-filter-banned]', () => updateFilters(store, 'banned')) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/_learn-more.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_learn-more.html.eex new file mode 100644 index 0000000000..0e0beb4558 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/_learn-more.html.eex @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/stakes/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/stakes/index.html.eex index 581a55f08b..b4958e569f 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/stakes/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/stakes/index.html.eex @@ -1,6 +1,7 @@
<%= raw(@top) %>
+<%= render BlockScoutWeb.StakesView, "_learn-more.html", conn: @conn %>
<%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>