Merge pull request #2514 from poanetwork/vb-isolate-staking-css

Isolating of staking dapp css && extracting of non-critical css

CHANGELOG.md

@@ -18,6 +18,7 @@
 - [#2519](https://github.com/poanetwork/blockscout/pull/2519) - enable `First` page button in pagination
 - [#2517](https://github.com/poanetwork/blockscout/pull/2517) - remove duplicate indexes
 - [#2515](https://github.com/poanetwork/blockscout/pull/2515) - do not aggregate NFT token transfers
+- [#2514](https://github.com/poanetwork/blockscout/pull/2514) - Isolating of staking dapp css && extracting of non-critical css
 - [#2512](https://github.com/poanetwork/blockscout/pull/2512) - alert link fix
 - [#2508](https://github.com/poanetwork/blockscout/pull/2508) - logs view columns fix
 - [#2506](https://github.com/poanetwork/blockscout/pull/2506) - fix two active tab in the top menu

apps/block_scout_web/assets/css/app.scss

@@ -24,7 +24,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/reboot";
 @import "node_modules/bootstrap/scss/grid";
 @import "node_modules/bootstrap/scss/code";
-@import "node_modules/bootstrap/scss/modal";
 @import "node_modules/bootstrap/scss/close";
 @import "node_modules/bootstrap/scss/buttons";
 @import "node_modules/bootstrap/scss/forms";
@@ -50,7 +49,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/navbar";
 @import "node_modules/bootstrap/scss/pagination";
 @import "node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/tooltip";
 @import "node_modules/bootstrap/scss/transitions";
 
 // Code highlight
@@ -75,8 +73,10 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/filter";
 @import "components/button";
 @import "components/table";
-@import "components/qr-code";
 @import "components/navbar";
+
+@import "theme/dark-theme";
+
 @import "components/animations";
 @import "components/card";
 @import "components/tile";
@@ -93,26 +93,15 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/transaction-input";
 @import "components/coin-balance-tile";
 @import "components/highlight";
-@import "components/copy_icon";
 @import "components/btn_full";
 @import "components/btn_line";
-@import "components/stakes";
 @import "components/check";
+@import "components/stakes_variables";
 @import "components/stakes_table";
 @import "components/i_tooltip";
 @import "components/check_tooltip";
 @import "components/tooltip";
-@import "components/progress_from_to";
-@import "components/stakes_empty_content";
-@import "components/stakes_btn_remove_pool";
-@import "components/modal";
-@import "components/modal_validator_info";
 @import "components/form";
-@import "components/stakes_progress";
-@import "components/modal_status";
-@import "components/modal_bottom_disclaimer";
-@import "components/modal_become_candidate";
-@import "components/modal_stake";
 @import "components/btn_copy";
 @import "components/btn_qr";
 @import "components/btn_address_card";
@@ -124,11 +113,11 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/errors";
 @import "components/log-search";
 @import "components/radio";
+@import "components/modal_variables";
 @import "components/network-selector";
 @import "components/new_smart_contract";
 @import "components/radio_big";
 @import "components/btn_no_border";
-@import "theme/dark-theme";
 
 :export {
   dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;

apps/block_scout_web/assets/css/components/_modal.scss

@@ -1,9 +1,3 @@
-$modal-overlay-color: rgba($primary, 0.9) !default;
-$modal-horizontal-padding: 30px !default;
-$modal-vertical-padding: 25px !default;
-$modal-border-radius: 10px !default;
-$modal-gray-background: #f6f7f9 !default;
-
 .modal-backdrop {
   background-color: $modal-overlay-color;
 

apps/block_scout_web/assets/css/components/_modal_variables.scss

@@ -0,0 +1,5 @@
+$modal-overlay-color: rgba($primary, 0.9) !default;
+$modal-horizontal-padding: 30px !default;
+$modal-vertical-padding: 25px !default;
+$modal-border-radius: 10px !default;
+$modal-gray-background: #f6f7f9 !default;

apps/block_scout_web/assets/css/components/_stakes_variables.scss

@@ -0,0 +1,2 @@
+$stakes-banned-background: #fff3f7 !default;
+$stakes-banned-color: #ff7986 !default;

apps/block_scout_web/assets/css/components/stakes/_stakes.scss

@@ -1,8 +1,6 @@
 $stakes-dashboard-copy-icon-color: $copy-icon-color !default;
 $stakes-address-color: $primary !default;
 $stakes-control-color: $primary !default;
-$stakes-banned-color: #ff7986 !default;
-$stakes-banned-background: #fff3f7 !default;
 $stakes-stats-item-color: #fff !default;
 $stakes-stats-item-border-color: #fff !default;
 

apps/block_scout_web/assets/css/non-critical.scss

@@ -0,0 +1,13 @@
+// Bootstrap Core CSS
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "node_modules/bootstrap/scss/modal";
+@import "node_modules/bootstrap/scss/tooltip";
+
+@import "components/qr-code";
+@import "components/modal_variables";
+@import "components/modal";
+@import "components/modal_status";

apps/block_scout_web/assets/css/stakes.scss

@@ -0,0 +1,20 @@
+@import "./mixins";
+
+// Bootstrap Core CSS
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "components/stakes_variables";
+@import "components/stakes/copy_icon";
+@import "components/stakes/stakes";
+@import "components/stakes/progress_from_to";
+@import "components/stakes/stakes_empty_content";
+@import "components/stakes/stakes_btn_remove_pool";
+@import "components/modal_variables";
+@import "components/stakes/stakes_progress";
+@import "components/stakes/modal_stake";
+@import "components/stakes/modal_become_candidate";
+@import "components/stakes/modal_validator_info";
+@import "components/stakes/modal_bottom_disclaimer";

apps/block_scout_web/assets/js/pages/stakes.js

@@ -0,0 +1 @@
+import '../../css/stakes.scss'

apps/block_scout_web/assets/webpack.config.js

@@ -69,9 +69,13 @@ const awesompleteJs = {
 
 const appJs =
   {
-    entry: './js/app.js',
+    entry: {
+      app: './js/app.js',
+      stakes: './js/pages/stakes.js',
+      'non-critical': './css/non-critical.scss',
+    },
     output: {
-      filename: 'app.js',
+      filename: '[name].js',
       path: path.resolve(__dirname, '../priv/static/js')
     },
     optimization: {
@@ -120,7 +124,7 @@ const appJs =
     },
     plugins: [
       new MiniCssExtractPlugin({
-        filename: '../css/app.css'
+        filename: '../css/[name].css'
       }),
       new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
+    <link rel="preload" href="/css/non-critical.css" as="style" onload="this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>
 
     <link rel="apple-touch-icon" sizes="180x180" href="<%= static_path(@conn, "/apple-touch-icon.png") %>">
     <link rel="icon" type="image/png" sizes="32x32" href="<%= static_path(@conn, "/favicon-32x32.png") %>">

apps/block_scout_web/priv/gettext/default.pot

@@ -62,7 +62,7 @@ msgid "(query)"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:36
+#: lib/block_scout_web/templates/layout/app.html.eex:38
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
 
@@ -157,7 +157,7 @@ msgid "Block Height: %{height}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:51
+#: lib/block_scout_web/templates/layout/app.html.eex:53
 msgid "Block Mined, awaiting import..."
 msgstr ""
 
@@ -184,7 +184,7 @@ msgid "Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:50
+#: lib/block_scout_web/templates/layout/app.html.eex:52
 msgid "Blocks Indexed"
 msgstr ""
 
@@ -376,7 +376,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address/_balance_card.html.eex:15
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:21
-#: lib/block_scout_web/templates/layout/app.html.eex:56
+#: lib/block_scout_web/templates/layout/app.html.eex:58
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:20
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:30
 #: lib/block_scout_web/templates/transaction/overview.html.eex:179
@@ -457,7 +457,7 @@ msgid "IN"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:52
+#: lib/block_scout_web/templates/layout/app.html.eex:54
 msgid "Indexing Tokens"
 msgstr ""
 
@@ -489,7 +489,7 @@ msgid "Inventory"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:53
+#: lib/block_scout_web/templates/layout/app.html.eex:55
 msgid "Less than"
 msgstr ""
 
@@ -510,7 +510,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:31
-#: lib/block_scout_web/templates/layout/app.html.eex:54
+#: lib/block_scout_web/templates/layout/app.html.eex:56
 #: lib/block_scout_web/views/address_view.ex:121
 #: lib/block_scout_web/views/address_view.ex:121
 msgid "Market Cap"
@@ -629,7 +629,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:24
-#: lib/block_scout_web/templates/layout/app.html.eex:55
+#: lib/block_scout_web/templates/layout/app.html.eex:57
 msgid "Price"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -62,7 +62,7 @@ msgid "(query)"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:36
+#: lib/block_scout_web/templates/layout/app.html.eex:38
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
 
@@ -157,7 +157,7 @@ msgid "Block Height: %{height}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:51
+#: lib/block_scout_web/templates/layout/app.html.eex:53
 msgid "Block Mined, awaiting import..."
 msgstr ""
 
@@ -184,7 +184,7 @@ msgid "Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:50
+#: lib/block_scout_web/templates/layout/app.html.eex:52
 msgid "Blocks Indexed"
 msgstr ""
 
@@ -376,7 +376,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address/_balance_card.html.eex:15
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:21
-#: lib/block_scout_web/templates/layout/app.html.eex:56
+#: lib/block_scout_web/templates/layout/app.html.eex:58
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:20
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:30
 #: lib/block_scout_web/templates/transaction/overview.html.eex:179
@@ -457,7 +457,7 @@ msgid "IN"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:52
+#: lib/block_scout_web/templates/layout/app.html.eex:54
 msgid "Indexing Tokens"
 msgstr ""
 
@@ -489,7 +489,7 @@ msgid "Inventory"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:53
+#: lib/block_scout_web/templates/layout/app.html.eex:55
 msgid "Less than"
 msgstr ""
 
@@ -510,7 +510,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:31
-#: lib/block_scout_web/templates/layout/app.html.eex:54
+#: lib/block_scout_web/templates/layout/app.html.eex:56
 #: lib/block_scout_web/views/address_view.ex:121
 #: lib/block_scout_web/views/address_view.ex:121
 msgid "Market Cap"
@@ -629,7 +629,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:24
-#: lib/block_scout_web/templates/layout/app.html.eex:55
+#: lib/block_scout_web/templates/layout/app.html.eex:57
 msgid "Price"
 msgstr ""