diff --git a/apps/block_scout_web/assets/css/components/_network-selector.scss b/apps/block_scout_web/assets/css/components/_network-selector.scss
index 4b1068fab4..3086639050 100644
--- a/apps/block_scout_web/assets/css/components/_network-selector.scss
+++ b/apps/block_scout_web/assets/css/components/_network-selector.scss
@@ -41,7 +41,7 @@ $network-selector-item-icon-dimensions: 30px !default;
margin-left: auto;
max-width: 398px;
min-width: 0;
- padding: 28px 0 35px;
+ padding-top: 28px;
position: relative;
transition: right 0.25s ease-out;
}
@@ -266,7 +266,6 @@ $network-selector-item-icon-dimensions: 30px !default;
.network-selector-networks-container {
flex-grow: 1;
flex-shrink: 1;
- margin: 0 0 30px;
min-height: 100px;
overflow: auto;
padding: 0 $network-selector-horizontal-padding;
diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js
index 25745125e2..fe0fd5250d 100644
--- a/apps/block_scout_web/assets/js/app.js
+++ b/apps/block_scout_web/assets/js/app.js
@@ -31,6 +31,8 @@ import './pages/chain'
import './pages/pending_transactions'
import './pages/transaction'
import './pages/transactions'
+import './pages/favorites'
+import './pages/network-search'
import './pages/admin/tasks.js'
diff --git a/apps/block_scout_web/assets/js/pages/favorites.js b/apps/block_scout_web/assets/js/pages/favorites.js
new file mode 100644
index 0000000000..56cbe04d4f
--- /dev/null
+++ b/apps/block_scout_web/assets/js/pages/favorites.js
@@ -0,0 +1,41 @@
+import $ from 'jquery'
+
+var favoritesQuantity = 0,
+ favoritesContainer = $(".js-favorites-tab"),
+ favoritesNetworksUrls = [];
+
+$(document).on("change", ".network-selector-item-favorite input[type='checkbox']", function () {
+
+ var networkUrl = $(this).attr("data-url"),
+ thisStatus = $(this).is(":checked"),
+ parent = $(".network-selector-item[data-url='" + networkUrl +"'").clone(),
+ workWith = $(".network-selector-item[data-url='" + networkUrl +"'");
+
+ // Add new checkbox status to same network in another tabs
+ $(".network-selector-item-favorite input[data-url='" + networkUrl +"']").prop("checked", thisStatus);
+
+ // Push or remove favorite networks to array
+ var found = $.inArray(networkUrl, favoritesNetworksUrls);
+ if (found < 0 && thisStatus == true) {
+ favoritesNetworksUrls.push(networkUrl);
+ } else {
+ var index = favoritesNetworksUrls.indexOf(networkUrl);
+ if(index!=-1){
+ favoritesNetworksUrls.splice(index, 1);
+ }
+ }
+ console.log(favoritesNetworksUrls);
+ // Append or remove item from 'favorites' tab
+
+ if (thisStatus == true) {
+ favoritesContainer.append(parent[0]);
+ $(".js-favorites-tab .network-selector-tab-content-empty").hide();
+ } else {
+ var willRemoved = favoritesContainer.find(workWith);
+ willRemoved.remove();
+ if (favoritesNetworksUrls.length == 0) {
+ $(".js-favorites-tab .network-selector-tab-content-empty").show();
+ }
+ }
+
+});
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/js/pages/network-search.js b/apps/block_scout_web/assets/js/pages/network-search.js
new file mode 100644
index 0000000000..e508bbe91b
--- /dev/null
+++ b/apps/block_scout_web/assets/js/pages/network-search.js
@@ -0,0 +1,21 @@
+import $ from 'jquery'
+
+var networkSearchInput = $(".network-selector-search-input"),
+ networkSearchInputVal = "";
+
+$(networkSearchInput).on("input", function() {
+ networkSearchInputVal = $(this).val();
+
+ $.expr[":"].Contains = $.expr.createPseudo(function(arg) {
+ return function( elem ) {
+ return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+ };
+ });
+
+ if (networkSearchInputVal == "") {
+ $(".network-selector-item").show();
+ } else {
+ $(".network-selector-item").hide();
+ $(".network-selector-item:Contains('" + networkSearchInputVal + "')").show();
+ }
+});
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex
index eadf1b4503..044d8790bc 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex
@@ -43,13 +43,13 @@
<%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %>
<% end %>
-
-
+
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
index a798178455..11f3c83dfe 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex
@@ -1,4 +1,4 @@
-