Merge pull request #3564 from poanetwork/vb-staking-welcome-message

Staking welcome message

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#3564](https://github.com/poanetwork/blockscout/pull/3564) - Staking welcome message
 
 ### Fixes
 

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;
+  }
+}

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";

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 {

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'))

apps/block_scout_web/lib/block_scout_web/templates/stakes/_learn-more.html.eex

@@ -0,0 +1,15 @@
+<section class="container js-stakes-welcome-alert" style="display: none;">
+<div class="card">
+  <div class="card-body card-body-flex-column-space-between" style="padding-left: 50px;">
+    <button type="button" class="stakes-btn-close-alert">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+            <path fill="#ddd" fill-rule="evenodd" d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"></path>
+        </svg>
+    </button>
+    <span style="font-size: 1.3em;">
+        <i style="color: #f7b32b;" class="fa fa-info-circle ml-1"></i>
+        Participate in Proof-of-Stake consensus on the xDai chain as a delegator or validator. To start you will need STAKE on the xDai network. <a href="https://www.xdaichain.com/for-stakers/staking-protocol" target="_blank">Learn More</a>
+    </span>
+  </div>
+</div>
+</section>

apps/block_scout_web/lib/block_scout_web/templates/stakes/index.html.eex

@@ -1,6 +1,7 @@
 <div data-selector="stakes-top">
   <%= raw(@top) %>
 </div>
+<%= render BlockScoutWeb.StakesView, "_learn-more.html", conn: @conn %>
 <section data-page="stakes" class="container" data-refresh-interval="<%= @refresh_interval %>">
   <div class="card" data-async-load data-async-listing="<%= @current_path %>" data-no-first-loading>
     <%= render BlockScoutWeb.StakesView, "_stakes_tabs.html", conn: @conn %>