Merge branch 'master' into ab-fetch-data-from-cache

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#2412](https://github.com/poanetwork/blockscout/pull/2412) - dark theme
 - [#2391](https://github.com/poanetwork/blockscout/pull/2391) - Controllers Improvements
 - [#2379](https://github.com/poanetwork/blockscout/pull/2379) - Disable network selector when is empty
 - [#2374](https://github.com/poanetwork/blockscout/pull/2374) - decode constructor arguments for verified smart contracts
@@ -12,10 +13,13 @@
 
 ### Fixes
 - [#2420](https://github.com/poanetwork/blockscout/pull/2420) - fetch data from cache in healthy endpoint
+- [#2416](https://github.com/poanetwork/blockscout/pull/2416) - Fix "page not found" handling in the router
 - [#2410](https://github.com/poanetwork/blockscout/pull/2410) - preload smart contract for logs decoding
+- [#2405](https://github.com/poanetwork/blockscout/pull/2405) - added templates for table loader and tile loader
 - [#2398](https://github.com/poanetwork/blockscout/pull/2398) - show only one decoded candidate
 - [#2395](https://github.com/poanetwork/blockscout/pull/2395) - new block loading animation
 - [#2389](https://github.com/poanetwork/blockscout/pull/2389) - Reduce Lodash lib size (86% of lib methods are not used)
+- [#2387](https://github.com/poanetwork/blockscout/pull/2387) - fix not existing keys in transaction json rpc
 - [#2378](https://github.com/poanetwork/blockscout/pull/2378) - Page performance: exclude moment.js localization files except EN, remove unused css
 - [#2368](https://github.com/poanetwork/blockscout/pull/2368) - add two columns of smart contract info
 - [#2375](https://github.com/poanetwork/blockscout/pull/2375) - Update created_contract_code_indexed_at on transaction import conflict

apps/block_scout_web/assets/css/app.scss

@@ -128,6 +128,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @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;
@@ -135,4 +136,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
   dashboardLineColorPrice: $dashboard-line-color-price;
   primary: $primary;
   secondary: $secondary;
+  darkprimary: $dark-primary;
+  darksecondary: $dark-secondary;
 }

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

@@ -253,3 +253,9 @@ $navbar-logo-width: auto !default;
     padding-right: 0;
   }
 }
+
+.nav-item-networks {
+  .topnav-nav-link {
+    transition: none !important;
+  }
+}

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

@@ -26,6 +26,43 @@ $stakes-table-cell-separation: 25px !default;
   }
 }
 
+// Loader
+.table-content-loader {
+  display: inline-block;
+  height: 24px;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  overflow: hidden;
+  position: relative;
+  &:before {
+    width: inherit;
+    height: inherit;
+    content: '';
+    position: absolute;
+    background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%);
+    animation-duration: 1.7s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: placeholderAnimate;
+    background-size: 1300px;
+  }
+}
+
+@keyframes placeholderAnimate {
+  0%{ background-position: -650px 0; }
+  100% { background-position: 650px 0; }
+}
+
+.table-content-pseudo {
+  td {
+    &:last-child {
+      padding-right: 24px !important;
+    }
+  }
+}
+
 .stakes-table {
   min-width: fit-content;
   width: 100%;

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

@@ -349,6 +349,52 @@ $tile-body-a-color: #5959d8 !default;
   }
 }
 
+// Loader
+.tile-type-loading {
+  background-color: #fff;
+  padding-top: 30px;
+  padding-bottom: 28px;
+}
+
+.tile-loader {
+  display: inline-block;
+  height: 20px;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  overflow: hidden;
+  position: relative;
+  &:before {
+    width: inherit;
+    height: inherit;
+    content: '';
+    position: absolute;
+    background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%);
+    animation-duration: 1.7s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: tilePlaceholderAnimate;
+    background-size: 1300px;
+  }
+}
+
+.tile-label-loader {
+  height: 14px;
+  width: 80px;
+}
+
+.tile-address-loader {
+  & + .tile-address-loader {
+    margin-top: 6px;
+  }
+}
+
+@keyframes tilePlaceholderAnimate {
+  0%{ background-position: -650px 0; }
+  100% { background-position: 650px 0; }
+}
+
 // Loading Animation
 
 @keyframes playBlockLoadingAnimation {

apps/block_scout_web/assets/css/theme/_base_variables.scss

@@ -70,7 +70,10 @@ $colors: map-merge(
 );
 
 $primary: $indigo !default;
+$dark-primary: #9b62ff !default;
+$dark-primary-alternate: #9b62ff !default;
 $secondary: #7dd79f !default;
+$dark-secondary: #87e1a9 !default;
 $tertiary: $purple !default;
 $success: $green !default;
 $info: $cyan !default;

apps/block_scout_web/assets/css/theme/_dai_variables.scss

@@ -63,3 +63,8 @@ $card-tab-active: $secondary;
 $badge-neutral-color: #20446e;
 $badge-neutral-background-color: rgba(#20446e, .1);
 $api-text-monospace-color: #20446e;
+
+// Dark theme
+$dark-primary: #15bba6;
+$dark-secondary: #93d7ff;
+$dark-primary-alternate: #15bba6;

apps/block_scout_web/assets/css/theme/_dark-theme.scss

@@ -0,0 +1,470 @@
+$body-dark: #1c1d31; // body background
+$dark-bg: #22223a; // hero shade
+$dark-light-bg: #282945; // pills bg shade
+$dark-light: #313355; // tile light top share
+$labels-dark: #8a8dba; // header nav, labels
+
+// Switcher
+.dark-mode-changer {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	margin-right: 5px;
+	outline: none !important;
+	box-shadow: none !important;
+	transition: .2s ease-in;
+	&:hover {
+		opacity: .8;
+	}
+	svg path {
+		fill: #828ba0;
+	}
+	&--dark {
+		svg path {
+			fill: $dark-primary;
+		}
+	}
+}
+
+.dark-theme-applied {
+	color: #fff;
+
+	// navbar
+	.navbar.navbar-primary {
+		background-color: $dark-light-bg;
+	}
+	.navbar-brand .navbar-logo {
+		filter: brightness(0) invert(1);
+	}
+	.navbar.navbar-primary .navbar-nav .nav-link {
+		color: $labels-dark;
+		.nav-link-icon {
+			svg path {
+				fill: $labels-dark;
+			}
+		}
+		&.active, &:hover {
+			.nav-link-icon {
+				svg path {
+					fill: $dark-primary;
+				}
+			}
+			&:before {
+				background-color: $dark-primary;
+			}
+		}
+	}
+	.navbar.navbar-primary .form-control {
+		background-color: $dark-bg;
+		border-color: $dark-bg;
+		color: #fff;
+		&::placeholder {
+			color: $labels-dark;
+		}
+	}
+	.navbar.navbar-primary .navbar-toggler .navbar-toggler-icon {
+		filter: invert(1);
+	}
+
+	// footer
+	.footer {
+		background: $dark-light-bg;
+		color: $labels-dark;
+	}
+	.footer-social-icon,
+	.footer-link {
+		color: $labels-dark;
+	}
+	.footer-social-icon:hover,
+	.footer-link:hover {
+		color: #fff;
+	}
+	.footer-list ul li::before {
+		background-color: $dark-secondary;
+	}
+
+	// hero stats
+
+	.layout-container .dashboard-banner-container {
+		background-image: none;
+		background-color: $dark-bg;
+	}
+	.dashboard-banner-network-plain-container,
+	.dashboard-banner-network-plain-container::after {
+		background-color: $dark-light-bg;
+	}
+	.dashboard-banner-network-stats-label,
+	.dashboard-banner-chart-legend .dashboard-banner-chart-legend-label {
+		color: $labels-dark;
+	}
+	.dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(1)::before {
+		background-color: $dark-primary;
+	}
+	.dashboard-banner-network-stats-item::before {
+		background-color: $dark-secondary;
+	}
+	.dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(2)::before {
+		background-color: $dark-secondary;
+	}
+
+	// main container, layout, cards
+	.layout-container main {
+		background-color: $body-dark;
+	}
+
+	.card {
+		background-color: $dark-light-bg;
+		box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5);
+	}
+
+	.card-header {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+
+	.address-detail-hash-title {
+		color: #fff;
+	}
+
+	.card-tabs {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+
+	.card-tab {
+		background-color: transparent;
+		&:hover:not(.active) {
+			background-color: rgba($dark-primary, .15);
+			color: $dark-primary;
+		}
+		&.active {
+			background-color: $dark-primary-alternate;
+			color: #fff;
+		}
+	}
+
+	.card-background-1 {
+		background-color: $dark-primary-alternate;
+	}
+
+	// Components
+	a {
+		color: $dark-primary;
+	}
+
+	.tile {
+		border-top-color: $dark-light;
+		border-bottom-color: $dark-light;
+		border-right-color: $dark-light;
+		background-color: $dark-light;
+		color: $labels-dark;
+		&:not([class^="tile tile-type"]) {
+			border-left-color: $dark-light;
+		}
+		&.tile-type-coin-balance {
+			border-left-color: $dark-light;
+		}
+		.tile-title {
+			color: #fff;
+		}
+		.tile-transaction-type-block {
+			background-color: transparent;
+		}
+	}
+	.tile-bottom-contents {
+		background-color: $dark-bg;
+	}
+	a.tile-title {
+		color: #fff !important;
+	}
+	.tile.tile-type-block .tile-transaction-type-block a {
+		color: #fff;
+	}
+	.fade-up-blocks-chain .tile-type-block-animation {
+		background-color: $dark-light;
+		border-top-color: $dark-light;
+		border-right-color: $dark-light;
+		border-bottom-color: $dark-light;
+	}
+	.fade-up-blocks-chain .tile-type-block-animation:after {
+		background-color: $dark-light;
+	}
+	.cube-animation-title {
+		color: $labels-dark;
+	}
+	.tile .tile-body a,
+	.tile span[data-address-hash] { color: $dark-primary; }
+	.fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up {
+		background-color: $dark-primary;
+	}
+	.tile.tile-type-block {
+		border-left-color: $dark-primary
+	}
+	.tile.tile-type-block .tile-status-label {
+		color: $dark-primary;
+	}
+	.tile.tile-type-block .tile-transaction-type-block {
+		border-right-color: $dark-primary;
+		border-top-color: $dark-primary;
+		border-bottom-color: $dark-primary;
+	}
+	.tile .progress {
+		background-color: rgba(#fff, .2);
+	}
+	.tile .progress .progress-bar {
+		background-color: $dark-primary;
+	}
+	.tile .tile-title-lg:not([data-balance-change-sign]) {
+		color: $dark-primary;
+	}
+
+	// btns
+
+	.btn-line {
+		background-color: transparent;
+		border-color: $dark-primary;
+		color: $dark-primary;
+		&:hover {
+			border-color: $dark-primary;
+			background-color: $dark-primary;
+			color: #fff;
+		}
+	}
+
+	.btn-copy-icon, .btn-qr-icon {
+		border-color: $dark-primary;
+		path {
+			fill: $dark-primary;
+		}
+		&:hover {
+			background-color: $dark-primary;
+			path {
+				fill: #fff;
+			}
+		}
+	}
+
+	// pagination
+	.pagination-container .pagination .page-link {
+		color: $labels-dark;
+		border-color: $dark-light;
+		background-color: $dark-light;
+		&:not(.no-hover):hover {
+			color: #fff;
+			background-color: $dark-primary;
+			path {
+				fill: #fff;
+			}
+		}
+		&[disabled] {
+			color: $labels-dark;
+			border-color: $dark-light;
+			background-color: $dark-light;
+		}
+	}
+
+	// dropdown
+	.dropdown-menu {
+		background-color: $dark-light;
+		border-left-color: $dark-light;
+		border-right-color: $dark-light;
+		border-bottom-color: $dark-light;
+	}
+
+	.dropdown-item {
+		color: #fff;
+		&:hover {
+			background-color: rgba(#fff, .1);
+		}
+	}
+	.dropdown-item.active {
+		background-color: $dark-primary;
+	}
+	.btn-dropdown-line {
+		background-color: $dark-light;
+		border-color: $dark-light;
+		color: $labels-dark;
+	}
+
+	// table
+	.stakes-table-th {
+		background-color: $dark-light;
+		color: $labels-dark;
+	}
+	.stakes-td {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+	.table th, .table td {
+		border-top-color: darken($labels-dark, 30);
+	}
+	hr {
+		border-top-color: darken($labels-dark, 30);
+	}
+
+	// api's
+	.api-anchors-list {
+		background-color: $dark-light;
+	}
+	.api-doc-list-item {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+	.card-subtitle,
+	.api-anchors-list-item-title,
+	.api-doc-list-item-title {
+		color: #fff;
+	}
+	.api-text-monospace {
+		color: $dark-primary;
+	}
+	.api-text-monospace-background {
+		background-color: rgba($dark-primary, .15);
+	}
+	.badge.badge-neutral {
+		background-color: rgba($dark-primary, .15);
+		color: $dark-primary;
+	}
+
+	// download csv button
+	.download-all-transactions .download-all-transactions-link svg path {
+		fill: $dark-primary;
+	}
+
+	//tooltips
+	.tooltip .arrow:before {
+		border-top-color: $dark-primary;
+    	border-bottom-color: $dark-primary;
+	}
+	.tooltip > .tooltip-inner {background-color: $dark-primary;}
+
+	//network select
+	.network-selector-overlay {
+		background-color: rgba($dark-bg, .9);
+	}
+	.network-selector {
+		background-color: $dark-light-bg;
+	}
+	.network-selector-title {
+		color: #fff;
+	}
+	.network-selector-text {
+		color: $labels-dark;
+	}
+	.network-selector-close path {
+		fill: #fff;
+	}
+	.network-selector-search-container {
+		background-color: $dark-light;
+	}
+	.network-selector-search-container path {
+		fill: $labels-dark;
+	}
+	.network-selector-search-input {
+		color: #fff !important;
+		&::placeholder {
+			color: $labels-dark;
+		}
+	}
+	.network-selector-tab {
+		color: $labels-dark;
+		&:hover, &.active {
+			color: #fff;
+		}
+		&.active {
+			&:after {
+				background-color: $dark-primary;
+			}
+		}
+	}
+	.network-selector-item,
+	.network-selector-tabs-container {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+	.network-selector-item-title {
+		color: #fff;
+	}
+	.network-selector-item-type {
+		color: $labels-dark;
+	}
+	.radio .radio-icon {
+		border-color: $labels-dark
+	}
+	.network-selector-item-url:hover .network-selector-item-type {
+		color: #fff;
+	}
+
+	//coin dropdown
+	.token-balance-dropdown.dropdown-menu {
+		border-color: $dark-light !important;
+		box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5) !important;
+	}
+	.token-balance-dropdown .dropdown-search-icon path {
+		fill: $labels-dark;
+	}
+	.token-balance-dropdown .dropdown-search-field {
+		background-color: $dark-light;
+		border-color: $dark-light;
+		color: #fff;
+		&::placeholder {
+			color: $labels-dark;
+		}
+	}
+	.token-balance-dropdown[aria-labelledby="dropdown-tokens"] .dropdown-items .dropdown-item:hover {
+		color: #fff !important;
+	}
+	.dropdown-header {
+		color: $labels-dark;
+	}
+	.border-bottom {
+		border-bottom-color: darken($labels-dark, 30) !important;
+	}
+
+	// coin balance history chart
+	.chartjs-render-monitor[data-chart="coinBalanceHistoryChart"] {
+		filter: brightness(0) invert(1) !important;
+	}
+
+	// logs search
+	.logs-search-input, .logs-search-btn, .logs-search-btn-cancel {
+		background-color: $dark-light;
+		border-color: $dark-light;
+		color: #fff;
+	}
+
+	.logs-search-btn {
+		color: $labels-dark;
+	}
+
+	.logs-search-btn {
+		&:hover {
+			background-color: $dark-primary;
+			color: #fff;
+		}
+	}
+
+	.logs-search-input {
+		&::placeholder {
+			color: $labels-dark;
+		}
+	}
+
+	// code
+	pre {
+		color: #fff;
+	}
+
+	// info allert
+	.alert-info {
+		color: $labels-dark;
+		background-color: $dark-light;
+		border-color: $dark-light;
+	}
+
+	// dark text
+	.text-dark {
+		color: #fff;
+	}
+
+}

apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss

@@ -75,3 +75,8 @@ $card-tab-active: $tertiary;
 $badge-neutral-color: $tertiary;
 $badge-neutral-background-color: rgba($tertiary, .1);
 $api-text-monospace-color: $tertiary;
+
+// Dark theme
+$dark-primary: #8588ff;
+$dark-secondary: #4ad7a7;
+$dark-primary-alternate: #5b5ed8;

apps/block_scout_web/assets/css/theme/_ethereum_variables.scss

@@ -57,3 +57,17 @@ $card-tab-active: $secondary;
 	  );
 	}
 }
+
+// Dark theme
+$dark-primary: #49a2ee;
+$dark-secondary: #4ad7a7;
+$dark-primary-alternate: #49a2ee;
+
+.dark-theme-applied {
+  .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(1)::before {
+    background-color: $dark-primary !important;
+  }
+  .dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(2)::before {
+    background-color: $dark-secondary !important;
+  }
+}

apps/block_scout_web/assets/css/theme/_goerli_variables.scss

@@ -78,3 +78,8 @@ $card-tab-active: $sub-accent-color;
 $badge-neutral-color: $sub-accent-color;
 $badge-neutral-background-color: rgba($sub-accent-color, .1);
 $api-text-monospace-color: $sub-accent-color;
+
+// Dark theme
+$dark-primary: #e1995a;
+$dark-secondary: #aeaeae;
+$dark-primary-alternate: #e1995a;

apps/block_scout_web/assets/css/theme/_kovan_variables.scss

@@ -75,3 +75,8 @@ $badge-success-background-color: rgba(#15bba6, .1);
 $badge-neutral-color: $tertiary;
 $badge-neutral-background-color: rgba($tertiary, .1);
 $api-text-monospace-color: $tertiary;
+
+// Dark theme
+$dark-primary: #42e2d7;
+$dark-secondary: #1f857f;
+$dark-primary-alternate: #1f857f; 

apps/block_scout_web/assets/css/theme/_lukso_variables.scss

@@ -151,3 +151,20 @@ $dashboard-banner-network-plain-container-height: 150px;
 $badge-neutral-color: $tertiary;
 $badge-neutral-background-color: rgba($tertiary, .1);
 $api-text-monospace-color: $tertiary;
+
+// Dark theme
+$dark-primary: #fdcec4;
+$dark-secondary: #a96c55;
+$dark-primary-alternate: #a96c55;
+
+.dark-theme-applied {
+  .dashboard-banner-network-stats-value {
+    color: $dark-primary !important;
+  }
+  .layout-container .dashboard-banner-container {
+    background-color: #282945 !important;
+  }
+  .dashboard-banner-network-plain-container::after {
+    box-shadow: none !important;
+  }
+}

apps/block_scout_web/assets/css/theme/_neutral_variables.scss

@@ -72,3 +72,8 @@ $api-text-monospace-color: $primary;
     color: $primary !important;
   }
 }
+
+// Dark theme
+$dark-primary: #9b62ff;
+$dark-secondary: #87e1a9;
+$dark-primary-alternate: #7e50d0; 

apps/block_scout_web/assets/css/theme/_poa_variables.scss

@@ -72,3 +72,8 @@ $api-text-monospace-color: $primary;
     color: $primary !important;
   }
 }
+
+// Dark theme
+$dark-primary: #9b62ff;
+$dark-secondary: #87e1a9;
+$dark-primary-alternate: #7e50d0; 

apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss

@@ -57,3 +57,8 @@ $card-tab-active: $secondary;
 	  );
 	}
 }
+
+// Dark theme
+$dark-primary: #38a9f5;
+$dark-secondary: #76f1ff;
+$dark-primary-alternate: #38a9f5;

apps/block_scout_web/assets/css/theme/_ropsten_variables.scss

@@ -57,3 +57,8 @@ $card-tab-active: $secondary;
 	  );
 	}
 }
+
+// Dark theme
+$dark-primary: #38a9f5;
+$dark-secondary: #76f1ff;
+$dark-primary-alternate: #38a9f5;

apps/block_scout_web/assets/css/theme/_rsk_variables.scss

@@ -65,3 +65,8 @@ $card-tab-active: $secondary;
 // Badges
 $badge-neutral-color: #1a323b;
 $badge-neutral-background-color: rgba(#1a323b, .1);
+
+// Dark theme
+$dark-primary: #38c5a4;
+$dark-secondary: #e39a54;
+$dark-primary-alternate: #30ab8d;

apps/block_scout_web/assets/css/theme/_sokol_variables.scss

@@ -73,3 +73,8 @@ $card-tab-active: $sub-accent-color;
 // Badges
 $badge-neutral-color: $tertiary;
 $badge-neutral-background-color: rgba($tertiary, .1);
+
+// Dark theme
+$dark-primary: #40bfb2;
+$dark-secondary: #25c9ff;
+$dark-primary-alternate: #1c9f90; 

apps/block_scout_web/assets/js/app.js

@@ -35,6 +35,7 @@ import './pages/favorites'
 import './pages/network-search'
 import './pages/layout'
 import './pages/verification_form'
+import './pages/dark-mode-switcher'
 
 import './pages/admin/tasks.js'
 

apps/block_scout_web/assets/js/lib/market_history_chart.js

@@ -88,6 +88,17 @@ function getMarketCapData (marketHistoryData, availableSupply) {
   }
 }
 
+// colors for light and dark theme
+var priceLineColor
+var mcapLineColor
+if (localStorage.getItem('current-color-mode') === 'dark') {
+  priceLineColor = sassVariables.darkprimary
+  mcapLineColor = sassVariables.darksecondary
+} else {
+  priceLineColor = sassVariables.dashboardLineColorPrice
+  mcapLineColor = sassVariables.dashboardLineColorMarket
+}
+
 class MarketHistoryChart {
   constructor (el, availableSupply, marketHistoryData) {
     this.price = {
@@ -96,8 +107,8 @@ class MarketHistoryChart {
       data: getPriceData(marketHistoryData),
       fill: false,
       pointRadius: 0,
-      backgroundColor: sassVariables.dashboardLineColorPrice,
+      backgroundColor: priceLineColor,
-      borderColor: sassVariables.dashboardLineColorPrice,
+      borderColor: priceLineColor,
       lineTension: 0
     }
     this.marketCap = {
@@ -106,8 +117,8 @@ class MarketHistoryChart {
       data: getMarketCapData(marketHistoryData, availableSupply),
       fill: false,
       pointRadius: 0,
-      backgroundColor: sassVariables.dashboardLineColorMarket,
+      backgroundColor: mcapLineColor,
-      borderColor: sassVariables.dashboardLineColorMarket,
+      borderColor: mcapLineColor,
       lineTension: 0
     }
     this.availableSupply = availableSupply

apps/block_scout_web/assets/js/pages/dark-mode-switcher.js

@@ -0,0 +1,11 @@
+import $ from 'jquery'
+
+$('.dark-mode-changer').click(function () {
+  if (localStorage.getItem('current-color-mode') === 'dark') {
+    localStorage.setItem('current-color-mode', 'light')
+  } else {
+    localStorage.setItem('current-color-mode', 'dark')
+  }
+  // reload each theme switch
+  document.location.reload(true)
+})

apps/block_scout_web/lib/block_scout_web/controllers/address_logs_controller.ex

@@ -115,4 +115,6 @@ defmodule BlockScoutWeb.AddressLogsController do
         not_found(conn)
     end
   end
+
+  def search_logs(conn, _), do: not_found(conn)
 end

apps/block_scout_web/lib/block_scout_web/controllers/address_transaction_controller.ex

@@ -130,6 +130,8 @@ defmodule BlockScoutWeb.AddressTransactionController do
     end
   end
 
+  def token_transfers_csv(conn, _), do: not_found(conn)
+
   def transactions_csv(conn, %{"address_id" => address_hash_string}) do
     with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
          {:ok, address} <- Chain.hash_to_address(address_hash) do
@@ -149,4 +151,6 @@ defmodule BlockScoutWeb.AddressTransactionController do
         not_found(conn)
     end
   end
+
+  def transactions_csv(conn, _), do: not_found(conn)
 end

apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex

@@ -52,6 +52,8 @@ defmodule BlockScoutWeb.ChainController do
     end
   end
 
+  def search(conn, _), do: not_found(conn)
+
   def token_autocomplete(conn, %{"q" => term}) when is_binary(term) do
     if term == "" do
       json(conn, "{}")

apps/block_scout_web/lib/block_scout_web/controllers/smart_contract_controller.ex

@@ -30,6 +30,8 @@ defmodule BlockScoutWeb.SmartContractController do
     end
   end
 
+  def index(conn, _), do: not_found(conn)
+
   def show(conn, params) do
     with true <- ajax?(conn),
          {:ok, address_hash} <- Chain.string_to_address_hash(params["id"]),

apps/block_scout_web/lib/block_scout_web/router.ex

@@ -261,6 +261,6 @@ defmodule BlockScoutWeb.Router do
     get("/api_docs", APIDocsController, :index)
     get("/eth_rpc_api_docs", APIDocsController, :eth_rpc)
 
-    get("/:page", PageNotFoundController, :index)
+    get("/*path", PageNotFoundController, :index)
   end
 end

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

@@ -38,7 +38,7 @@
 					</tr>
 				</thead>
 				<tbody data-items data-selector="top-addresses-list">
-					
+					<%= render BlockScoutWeb.CommonComponentsView, "_table-loader.html" %>
 				</tbody>
 			</table>
 		</div>

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

@@ -40,7 +40,9 @@
           </div>
         </div>
 
-        <div data-selector="coin-balances-list" data-items></div>
+        <div data-selector="coin-balances-list" data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -66,7 +66,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -27,7 +27,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -19,7 +19,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <div class="transaction-bottom-panel">
           <div csv-download class="download-all-transactions">

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

@@ -21,7 +21,9 @@
           </span>
         </button>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -65,7 +65,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <div class="transaction-bottom-panel">
           <div class="download-all-transactions">

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

@@ -22,7 +22,9 @@
             <%= gettext "Something went wrong, click to reload." %>
           </span>
         </button>
-        <div data-items data-selector="validations-list"></div>
+        <div data-items data-selector="validations-list">
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -11,7 +11,9 @@
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 
-      <div data-items></div>
+      <div data-items>
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+      </div>
       <div data-empty-response-message style="display: none;">
           <span><%= gettext "There are no blocks." %></span>
       </div>

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

@@ -29,7 +29,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -117,13 +117,7 @@
             <%= gettext "Something went wrong, click to retry." %>
           </span>
         </button>
-        <div hidden data-selector="loading-message" class="tile tile-muted text-center mt-3">
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
-          <span class="loading-spinner-small mr-2">
-            <span class="loading-spinner-block-1"></span>
-            <span class="loading-spinner-block-2"></span>
-          </span>
-          <%= gettext("Loading...") %>
-        </div>
       </span>
     </div>
   </div>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_table-loader.html.eex

@@ -0,0 +1,85 @@
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>
+<tr class="table-content-pseudo">
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+  <td class="stakes-td">
+    <span class="table-content-loader"></span>
+  </td>
+</tr>

apps/block_scout_web/lib/block_scout_web/templates/common_components/_tile-loader.html.eex

@@ -0,0 +1,72 @@
+<div data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>
+<div data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>
+<div data-selector="loading-message" class="tile tile-type-loading">
+  <div class="row tile-body">
+    <div class="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+      <span class="tile-label">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="tile-status-label ml-2 ml-md-0">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+    <div class="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+      <span class="tile-loader tile-address-loader"></span>
+      <span class="tile-loader tile-address-loader"></span>
+    </div>
+    <div class="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+      <span class="mr-2 mr-md-0 order-1">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+      <span class="mr-2 mr-md-0 order-2">
+        <span class="tile-loader tile-label-loader"></span>
+      </span>
+    </div>
+  </div>
+</div>

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

@@ -1,8 +1,18 @@
-<nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar">
+<nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar" id="top-navbar">
+  <script>
+    if (localStorage.getItem("current-color-mode") === "dark") {
+      document.getElementById("top-navbar").style.backgroundColor = "#282945";
+    }
+  </script>
   <div class="container-fluid navbar-container">
     <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
-      <img class="navbar-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
+      <img class="navbar-logo" id="navbar-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
     <% end %>
+    <script>
+      if (localStorage.getItem("current-color-mode") === "dark") {
+        document.getElementById("navbar-logo").style.filter = "brightness(0) invert(1)";
+      }
+    </script>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="<%= gettext("Toggle navigation") %>">
       <span class="navbar-toggler-icon"></span>
     </button>
@@ -90,8 +100,14 @@
           </a>
         </li>
       </ul>
+      <!-- Dark mode changer -->
+      <button class="dark-mode-changer" id="dark-mode-changer">
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
+            <path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
+        </svg>
+      </button>
       <!-- Search navbar -->
-      <div class="search-form d-lg-flex d-inline-block">
+      <div class="search-form d-lg-flex d-inline-block" style="background-color: #22223a">
         <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
         <div class="input-group" title='<%= gettext("Search by address, token symbol name, transaction hash, or block number") %>'>
               <%= awesomplete(f, :q,
@@ -117,9 +133,22 @@
               </div>
           </div>
           <button class="btn btn-outline-success my-2 my-sm-0 sr-only hidden" type="submit"><%= gettext "Search" %></button>
+          <script>
+            if (localStorage.getItem("current-color-mode") === "dark") {
+              document.getElementById("q").style.backgroundColor = "#22223a";
+              document.getElementById("q").style.borderColor = "#22223a";
+            }
+          </script>
         <% end %>
       </div>
     </div>
   </div>
 </nav>
 <%= render BlockScoutWeb.LayoutView, "_network_selector.html" %>
+<script>
+  if (localStorage.getItem("current-color-mode") === "dark") {
+    var modeChanger = document.getElementById("dark-mode-changer");
+    modeChanger.className += " " + "dark-mode-changer--dark";
+    document.body.className += " " + "dark-theme-applied";
+  }
+</script> 

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

@@ -24,6 +24,11 @@
   </head>
 
   <body>
+    <script>
+      if (localStorage.getItem("current-color-mode") === "dark") {
+        document.body.style.backgroundColor = "#1c1d31";
+      }
+    </script>
     <div class="layout-container">
       <%= if not Explorer.Chain.finished_indexing?() do %>
         <div class="alert alert-warning text-center mb-0 p-3" data-selector="indexed-status">

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

@@ -23,13 +23,8 @@
           <%= gettext "There are no pending transactions." %>
         </span>
       </div>
-      <div data-items data-selector="transactions-pending-list"></div>
+      <div data-items data-selector="transactions-pending-list">
-      <div data-loading-message class="tile tile-muted text-center mt-3" style="display: none;">
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
-        <span class="loading-spinner-small mr-2">
-          <span class="loading-spinner-block-1"></span>
-          <span class="loading-spinner-block-2"></span>
-        </span>
-        <%= gettext("Loading") %>...
       </div>
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>

apps/block_scout_web/lib/block_scout_web/templates/tokens/holder/index.html.eex

@@ -28,7 +28,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/tokens/inventory/index.html.eex

@@ -27,7 +27,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

apps/block_scout_web/lib/block_scout_web/templates/tokens/transfer/index.html.eex

@@ -26,7 +26,9 @@
           </span>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -28,7 +28,9 @@
         </div>
       </div>
 
-      <div data-selector="transactions-list" data-items></div>
+      <div data-selector="transactions-list" data-items>
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+      </div>
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -16,7 +16,9 @@
         </div>
       </div>
 
-      <div data-items></div>
+      <div data-items>
+        <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+      </div>
 
       <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
     </div>

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

@@ -19,7 +19,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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

@@ -18,7 +18,9 @@
           </div>
         </div>
 
-        <div data-items></div>
+        <div data-items>
+          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
+        </div>
 
         <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
 

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:35
+#: lib/block_scout_web/templates/layout/app.html.eex:40
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
 
@@ -87,7 +87,7 @@ msgid "API for the %{subnetwork} - BlockScout"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:56
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:66
 msgid "Accounts"
 msgstr ""
 
@@ -157,7 +157,7 @@ msgid "Block Height: %{height}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:50
+#: lib/block_scout_web/templates/layout/app.html.eex:55
 msgid "Block Mined, awaiting import..."
 msgstr ""
 
@@ -178,13 +178,13 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:87
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:16
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:26
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:20
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:30
 msgid "Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:49
+#: lib/block_scout_web/templates/layout/app.html.eex:54
 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:55
+#: lib/block_scout_web/templates/layout/app.html.eex:60
 #: 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:196
@@ -400,7 +400,7 @@ msgid "Fetching tokens..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:26
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:36
 msgid "Forked Blocks (Reorgs)"
 msgstr ""
 
@@ -454,7 +454,7 @@ msgid "IN"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:51
+#: lib/block_scout_web/templates/layout/app.html.eex:56
 msgid "Indexing Tokens"
 msgstr ""
 
@@ -486,7 +486,7 @@ msgid "Inventory"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:52
+#: lib/block_scout_web/templates/layout/app.html.eex:57
 msgid "Less than"
 msgstr ""
 
@@ -507,7 +507,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:31
-#: lib/block_scout_web/templates/layout/app.html.eex:53
+#: lib/block_scout_web/templates/layout/app.html.eex:58
 #: lib/block_scout_web/views/address_view.ex:121
 #: lib/block_scout_web/views/address_view.ex:121
 msgid "Market Cap"
@@ -604,7 +604,7 @@ msgid "Parent Hash"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:44
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:54
 #: lib/block_scout_web/views/transaction_view.ex:143
 #: lib/block_scout_web/views/transaction_view.ex:177
 msgid "Pending"
@@ -622,7 +622,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:24
-#: lib/block_scout_web/templates/layout/app.html.eex:54
+#: lib/block_scout_web/templates/layout/app.html.eex:59
 msgid "Price"
 msgstr ""
 
@@ -669,8 +669,8 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/index.html.eex:14
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:102
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:118
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:119
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:135
 msgid "Search"
 msgstr ""
 
@@ -774,7 +774,7 @@ msgid "To"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:6
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:16
 msgid "Toggle navigation"
 msgstr ""
 
@@ -873,7 +873,7 @@ msgstr ""
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
 #: lib/block_scout_web/templates/chain/show.html.eex:108
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:35
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:45
 #: lib/block_scout_web/views/address_view.ex:305
 msgid "Transactions"
 msgstr ""
@@ -900,7 +900,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/overview.html.eex:80
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:23
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:33
 msgid "Uncles"
 msgstr ""
 
@@ -915,7 +915,7 @@ msgid "Used"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:39
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:49
 msgid "Validated"
 msgstr ""
 
@@ -1058,7 +1058,6 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
 #: lib/block_scout_web/templates/chain/show.html.eex:99
-#: lib/block_scout_web/templates/chain/show.html.eex:125
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
 msgid "Loading..."
 msgstr ""
@@ -1069,22 +1068,17 @@ msgid "Loading...."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:64
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:74
 msgid "APIs"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:68
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:78
 msgid "GraphQL"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:32
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:83
-msgid "Loading"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:73
 msgid "RPC"
 msgstr ""
 
@@ -1277,7 +1271,7 @@ msgid "There are no pending transactions."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/block/index.html.eex:16
+#: lib/block_scout_web/templates/block/index.html.eex:18
 msgid "There are no blocks."
 msgstr ""
 
@@ -1483,8 +1477,8 @@ msgid "Error: Could not determine contract creator."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:96
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:112
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:100
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:116
 msgid "Search by address, token symbol name, transaction hash, or block number"
 msgstr ""
 
@@ -1710,7 +1704,7 @@ msgid "ETH RPC API Documentation"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:78
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:88
 msgid "Eth RPC"
 msgstr ""
 
@@ -1745,8 +1739,8 @@ msgid "here."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token/index.html.eex:26
+#: lib/block_scout_web/templates/address_token/index.html.eex:28
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:72
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:74
 msgid "CSV"
 msgstr ""
 

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

@@ -34,7 +34,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/overview.html.eex:21
-#: lib/block_scout_web/templates/chain/_block.html.eex:11
+#: lib/block_scout_web/templates/chain/_block.html.eex:178
 msgid "%{count} Transactions"
 msgstr ""
 
@@ -62,7 +62,7 @@ msgid "(query)"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:35
+#: lib/block_scout_web/templates/layout/app.html.eex:40
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
 
@@ -87,7 +87,7 @@ msgid "API for the %{subnetwork} - BlockScout"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:56
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:66
 msgid "Accounts"
 msgstr ""
 
@@ -157,7 +157,7 @@ msgid "Block Height: %{height}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:50
+#: lib/block_scout_web/templates/layout/app.html.eex:55
 msgid "Block Mined, awaiting import..."
 msgstr ""
 
@@ -178,13 +178,13 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:87
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:16
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:26
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:20
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:30
 msgid "Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:49
+#: lib/block_scout_web/templates/layout/app.html.eex:54
 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:55
+#: lib/block_scout_web/templates/layout/app.html.eex:60
 #: 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:196
@@ -400,7 +400,7 @@ msgid "Fetching tokens..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:26
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:36
 msgid "Forked Blocks (Reorgs)"
 msgstr ""
 
@@ -454,7 +454,7 @@ msgid "IN"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:51
+#: lib/block_scout_web/templates/layout/app.html.eex:56
 msgid "Indexing Tokens"
 msgstr ""
 
@@ -486,7 +486,7 @@ msgid "Inventory"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:52
+#: lib/block_scout_web/templates/layout/app.html.eex:57
 msgid "Less than"
 msgstr ""
 
@@ -507,7 +507,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:31
-#: lib/block_scout_web/templates/layout/app.html.eex:53
+#: lib/block_scout_web/templates/layout/app.html.eex:58
 #: lib/block_scout_web/views/address_view.ex:121
 #: lib/block_scout_web/views/address_view.ex:121
 msgid "Market Cap"
@@ -522,7 +522,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/block/_tile.html.eex:38
 #: lib/block_scout_web/templates/block/overview.html.eex:121
-#: lib/block_scout_web/templates/chain/_block.html.eex:15
+#: lib/block_scout_web/templates/chain/_block.html.eex:182
 msgid "Miner"
 msgstr ""
 
@@ -604,7 +604,7 @@ msgid "Parent Hash"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:44
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:54
 #: lib/block_scout_web/views/transaction_view.ex:143
 #: lib/block_scout_web/views/transaction_view.ex:177
 msgid "Pending"
@@ -622,7 +622,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:24
-#: lib/block_scout_web/templates/layout/app.html.eex:54
+#: lib/block_scout_web/templates/layout/app.html.eex:59
 msgid "Price"
 msgstr ""
 
@@ -669,8 +669,8 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/index.html.eex:14
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:102
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:118
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:119
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:135
 msgid "Search"
 msgstr ""
 
@@ -774,7 +774,7 @@ msgid "To"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:6
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:16
 msgid "Toggle navigation"
 msgstr ""
 
@@ -873,7 +873,7 @@ msgstr ""
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
 #: lib/block_scout_web/templates/chain/show.html.eex:108
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:35
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:45
 #: lib/block_scout_web/views/address_view.ex:305
 msgid "Transactions"
 msgstr ""
@@ -900,7 +900,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/overview.html.eex:80
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:23
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:33
 msgid "Uncles"
 msgstr ""
 
@@ -915,7 +915,7 @@ msgid "Used"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:39
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:49
 msgid "Validated"
 msgstr ""
 
@@ -1040,7 +1040,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/_tile.html.eex:47
-#: lib/block_scout_web/templates/chain/_block.html.eex:23
+#: lib/block_scout_web/templates/chain/_block.html.eex:190
 #: lib/block_scout_web/views/internal_transaction_view.ex:27
 msgid "Reward"
 msgstr ""
@@ -1058,7 +1058,6 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_read_contract/index.html.eex:14
 #: lib/block_scout_web/templates/chain/show.html.eex:99
-#: lib/block_scout_web/templates/chain/show.html.eex:125
 #: lib/block_scout_web/templates/tokens/read_contract/index.html.eex:21
 msgid "Loading..."
 msgstr ""
@@ -1069,22 +1068,17 @@ msgid "Loading...."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:64
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:74
 msgid "APIs"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:68
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:78
 msgid "GraphQL"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/pending_transaction/index.html.eex:32
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:83
-msgid "Loading"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:73
 msgid "RPC"
 msgstr ""
 
@@ -1277,7 +1271,7 @@ msgid "There are no pending transactions."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/block/index.html.eex:16
+#: lib/block_scout_web/templates/block/index.html.eex:18
 msgid "There are no blocks."
 msgstr ""
 
@@ -1483,8 +1477,8 @@ msgid "Error: Could not determine contract creator."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:96
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:112
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:100
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:116
 msgid "Search by address, token symbol name, transaction hash, or block number"
 msgstr ""
 
@@ -1710,7 +1704,7 @@ msgid "ETH RPC API Documentation"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:78
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:88
 msgid "Eth RPC"
 msgstr ""
 
@@ -1745,8 +1739,8 @@ msgid "here."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_token/index.html.eex:26
+#: lib/block_scout_web/templates/address_token/index.html.eex:28
-#: lib/block_scout_web/templates/address_transaction/index.html.eex:72
+#: lib/block_scout_web/templates/address_transaction/index.html.eex:74
 msgid "CSV"
 msgstr ""
 

apps/ethereum_jsonrpc/lib/ethereum_jsonrpc/transaction.ex

@@ -353,4 +353,8 @@ defmodule EthereumJSONRPC.Transaction do
       _ -> {key, quantity_to_integer(chain_id)}
     end
   end
+
+  defp entry_to_elixir(_) do
+    {nil, nil}
+  end
 end

apps/ethereum_jsonrpc/test/ethereum_jsonrpc/transaction_test.exs

@@ -2,4 +2,14 @@ defmodule EthereumJSONRPC.TransactionTest do
   use ExUnit.Case, async: true
 
   doctest EthereumJSONRPC.Transaction
+
+  alias EthereumJSONRPC.Transaction
+
+  describe "to_elixir/1" do
+    test "skips unsupported keys" do
+      map = %{"key" => "value", "key1" => "value1"}
+
+      assert %{nil: nil} = Transaction.to_elixir(map)
+    end
+  end
 end