From 501794ea824387079db43e3d686bf752f0b43d53 Mon Sep 17 00:00:00 2001 From: Viktor Baranov Date: Wed, 8 Feb 2023 00:35:19 +0300 Subject: [PATCH 1/2] Disable dark mode env var --- CHANGELOG.md | 1 + .../assets/js/lib/history_chart.js | 10 +++++++--- .../assets/js/pages/dark-mode-switcher.js | 20 +++++-------------- .../templates/csv_export/index.html.eex | 5 ++++- .../templates/layout/_topnav.html.eex | 12 ++++++----- .../templates/layout/app.html.eex | 10 +++++++--- apps/block_scout_web/priv/gettext/default.pot | 2 +- .../priv/gettext/en/LC_MESSAGES/default.po | 2 +- config/runtime.exs | 3 ++- 9 files changed, 35 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bbc6e18cb9..9931e53506 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Features +- [#6838](https://github.com/blockscout/blockscout/pull/6838) - Disable dark mode env var - [#6744](https://github.com/blockscout/blockscout/pull/6744) - API v2: smart contracts verification - [#6763](https://github.com/blockscout/blockscout/pull/6763) - Permanent UI dark mode - [#6721](https://github.com/blockscout/blockscout/pull/6721) - Implement fetching internal transactions from callTracer diff --git a/apps/block_scout_web/assets/js/lib/history_chart.js b/apps/block_scout_web/assets/js/lib/history_chart.js index ef0884665c..efd1b5c673 100644 --- a/apps/block_scout_web/assets/js/lib/history_chart.js +++ b/apps/block_scout_web/assets/js/lib/history_chart.js @@ -21,10 +21,14 @@ const grid = { function isDarkMode () { // @ts-ignore const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true' - if (!permanentDarkModeEnabled) { - return Cookies.get('chakra-ui-color-mode') === 'dark' - } else { + // @ts-ignore + const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true' + if (permanentLightModeEnabled) { + return false + } else if (permanentDarkModeEnabled) { return true + } else { + return Cookies.get('chakra-ui-color-mode') === 'dark' } } diff --git a/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js index 0284c9e478..610e4d47b4 100644 --- a/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js +++ b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js @@ -1,22 +1,12 @@ import Cookies from 'js-cookie' -const permantDarkModeEl = document.getElementById('permanent-dark-mode') -// @ts-ignore -const permanentDarkModeEnabled = false || (permantDarkModeEl && permantDarkModeEl.textContent === 'true') // @ts-ignore const darkModeChangerEl = document.getElementsByClassName('dark-mode-changer')[0] -if (permanentDarkModeEnabled) { - // @ts-ignore - darkModeChangerEl.style.display = 'none' -} - darkModeChangerEl && darkModeChangerEl.addEventListener('click', function () { - if (!permanentDarkModeEnabled) { - if (Cookies.get('chakra-ui-color-mode') === 'dark') { - Cookies.set('chakra-ui-color-mode', 'light') - } else { - Cookies.set('chakra-ui-color-mode', 'dark') - } - document.location.reload() + if (Cookies.get('chakra-ui-color-mode') === 'dark') { + Cookies.set('chakra-ui-color-mode', 'light') + } else { + Cookies.set('chakra-ui-color-mode', 'dark') } + document.location.reload() }) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/csv_export/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/csv_export/index.html.eex index 07a1ee0d13..352304462d 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/csv_export/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/csv_export/index.html.eex @@ -34,7 +34,10 @@ 'sitekey': reCaptchaClientKey, 'theme': function () { const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true' - if (permanentDarkModeEnabled) { + const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true' + if (permanentLightModeEnabled) { + return 'light' + } else if (permanentDarkModeEnabled) { return 'dark' } else { return getCookie('chakra-ui-color-mode') diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex index 494934049d..2d8c4feb42 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex @@ -176,11 +176,13 @@ - + <%= unless Application.get_env(:block_scout_web, :permanent_light_mode_enabled) || Application.get_env(:block_scout_web, :permanent_dark_mode_enabled) do %> + + <% end %> <%= render BlockScoutWeb.LayoutView, "_account_menu_item.html", conn: @conn, current_user: @current_user %> <%= render BlockScoutWeb.LayoutView, "_search.html", conn: @conn, id: "main-search-autocomplete", additional_classes: ["mobile-search-hide"] %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex index 25a4d36fb2..f970aff1fd 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex @@ -157,6 +157,7 @@
<%= Application.get_env(:block_scout_web, :permanent_dark_mode_enabled) %>
+
<%= Application.get_env(:block_scout_web, :permanent_light_mode_enabled) %>
<%= Application.get_env(:indexer, :first_block) %>
<% show_maintenance_alert = Application.get_env(:block_scout_web, BlockScoutWeb.Chain)[:show_maintenance_alert] %> @@ -264,10 +265,13 @@ function isDarkMode() { const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true' - if (!permanentDarkModeEnabled) { - return getCookie('chakra-ui-color-mode') === 'dark' - } else { + const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true' + if (permanentLightModeEnabled) { + return false + } else if (permanentDarkModeEnabled) { return true + } else { + return getCookie('chakra-ui-color-mode') === 'dark' } } diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot index 311b9a6ae5..a6b1805604 100644 --- a/apps/block_scout_web/priv/gettext/default.pot +++ b/apps/block_scout_web/priv/gettext/default.pot @@ -81,7 +81,7 @@ msgstr "" msgid ") may be added for each contract. Click the Add Library button to add an additional one." msgstr "" -#: lib/block_scout_web/templates/layout/app.html.eex:178 +#: lib/block_scout_web/templates/layout/app.html.eex:179 #, elixir-autogen, elixir-format msgid "- We're indexing this chain right now. Some of the counts may be inaccurate." msgstr "" diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po index a2a3402bf4..5dafe0b01d 100644 --- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po +++ b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po @@ -81,7 +81,7 @@ msgstr "" msgid ") may be added for each contract. Click the Add Library button to add an additional one." msgstr "" -#: lib/block_scout_web/templates/layout/app.html.eex:178 +#: lib/block_scout_web/templates/layout/app.html.eex:179 #, elixir-autogen, elixir-format msgid "- We're indexing this chain right now. Some of the counts may be inaccurate." msgstr "" diff --git a/config/runtime.exs b/config/runtime.exs index 56bad9a9cb..ecb0d7fe52 100644 --- a/config/runtime.exs +++ b/config/runtime.exs @@ -101,7 +101,8 @@ config :block_scout_web, chain_id: System.get_env("CHAIN_ID"), json_rpc: System.get_env("JSON_RPC"), verification_max_libraries: verification_max_libraries, - permanent_dark_mode_enabled: System.get_env("PERMANENT_DARK_MODE_ENABLED", "false") == "true" + permanent_dark_mode_enabled: System.get_env("PERMANENT_DARK_MODE_ENABLED", "false") == "true", + permanent_light_mode_enabled: System.get_env("PERMANENT_LIGHT_MODE_ENABLED", "false") == "true" default_api_rate_limit = 50 default_api_rate_limit_str = Integer.to_string(default_api_rate_limit) From a1304d8fc7b4d22fbee4034cd0cee34a6b8226dc Mon Sep 17 00:00:00 2001 From: Viktor Baranov Date: Thu, 9 Feb 2023 15:14:43 +0300 Subject: [PATCH 2/2] Fix #6838 review comments: refactor app.html.eex --- apps/block_scout_web/assets/js/app.js | 1 + apps/block_scout_web/assets/js/app_extra.js | 33 ++++ .../assets/js/lib/dark_mode.js | 17 ++ .../assets/js/lib/history_chart.js | 16 +- apps/block_scout_web/assets/js/pages/chain.js | 4 +- apps/block_scout_web/assets/webpack.config.js | 1 + .../templates/layout/app.html.eex | 150 +----------------- .../lib/block_scout_web/views/layout_view.ex | 2 - apps/block_scout_web/priv/gettext/default.pot | 2 +- .../priv/gettext/en/LC_MESSAGES/default.po | 2 +- 10 files changed, 58 insertions(+), 170 deletions(-) create mode 100644 apps/block_scout_web/assets/js/app_extra.js create mode 100644 apps/block_scout_web/assets/js/lib/dark_mode.js diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index a08bd1a381..78d0874ab4 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -35,6 +35,7 @@ import './lib/tooltip' import './lib/modals' import './lib/card_tabs' import './lib/ad' +import './lib/dark_mode' import swal from 'sweetalert2' // @ts-ignore diff --git a/apps/block_scout_web/assets/js/app_extra.js b/apps/block_scout_web/assets/js/app_extra.js new file mode 100644 index 0000000000..e2ecd3dca2 --- /dev/null +++ b/apps/block_scout_web/assets/js/app_extra.js @@ -0,0 +1,33 @@ +import { isDarkMode } from './lib/dark_mode' + +function applyDarkMode () { + if (isDarkMode()) { + document.body.className += ' ' + 'dark-theme-applied' + document.body.style.backgroundColor = '#1c1d31' + } +} +window.onload = applyDarkMode() + +if (isDarkMode()) { + if (document.getElementById('top-navbar')) { + document.getElementById('top-navbar').style.backgroundColor = '#282945' + } + if (document.getElementById('navbar-logo')) { + document.getElementById('navbar-logo').style.filter = 'brightness(0) invert(1)' + } + const modeChanger = document.getElementById('dark-mode-changer') + if (modeChanger) { + modeChanger.className += ' ' + 'dark-mode-changer--dark' + } + + const search = document.getElementById('main-search-autocomplete') + const searchMobile = document.getElementById('main-search-autocomplete-mobile') + if (search && search.style) { + search.style.backgroundColor = '#22223a' + search.style.borderColor = '#22223a' + } + if (searchMobile && searchMobile.style) { + searchMobile.style.backgroundColor = '#22223a' + searchMobile.style.borderColor = '#22223a' + } +} diff --git a/apps/block_scout_web/assets/js/lib/dark_mode.js b/apps/block_scout_web/assets/js/lib/dark_mode.js new file mode 100644 index 0000000000..5e601506ee --- /dev/null +++ b/apps/block_scout_web/assets/js/lib/dark_mode.js @@ -0,0 +1,17 @@ +import Cookies from 'js-cookie' + +function isDarkMode () { + // @ts-ignore + const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true' + // @ts-ignore + const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true' + if (permanentLightModeEnabled) { + return false + } else if (permanentDarkModeEnabled) { + return true + } else { + return Cookies.get('chakra-ui-color-mode') === 'dark' + } +} + +export { isDarkMode } diff --git a/apps/block_scout_web/assets/js/lib/history_chart.js b/apps/block_scout_web/assets/js/lib/history_chart.js index efd1b5c673..028de282d1 100644 --- a/apps/block_scout_web/assets/js/lib/history_chart.js +++ b/apps/block_scout_web/assets/js/lib/history_chart.js @@ -1,11 +1,11 @@ import $ from 'jquery' -import Cookies from 'js-cookie' import { Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Title, Tooltip } from 'chart.js' import 'chartjs-adapter-luxon' import humps from 'humps' import numeral from 'numeral' import { DateTime } from 'luxon' import { formatUsdValue } from '../lib/currency' +import { isDarkMode } from '../lib/dark_mode' // @ts-ignore import sassVariables from '../../css/export-vars-to-js.module.scss' @@ -18,20 +18,6 @@ const grid = { drawOnChartArea: false } -function isDarkMode () { - // @ts-ignore - const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true' - // @ts-ignore - const permanentLightModeEnabled = document.getElementById('permanent-light-mode').textContent === 'true' - if (permanentLightModeEnabled) { - return false - } else if (permanentDarkModeEnabled) { - return true - } else { - return Cookies.get('chakra-ui-color-mode') === 'dark' - } -} - function getTxChartColor () { if ((isDarkMode())) { return sassVariables.dashboardLineColorTransactionsDarkTheme diff --git a/apps/block_scout_web/assets/js/pages/chain.js b/apps/block_scout_web/assets/js/pages/chain.js index a9e42586c3..c71eb6b575 100644 --- a/apps/block_scout_web/assets/js/pages/chain.js +++ b/apps/block_scout_web/assets/js/pages/chain.js @@ -64,13 +64,13 @@ function baseReducer (state = initialState, action) { action.msg, ...pastBlocks ], - blockCount: blockCount + blockCount }) } else { return Object.assign({}, state, { // @ts-ignore blocks: state.blocks.map((block) => block.blockNumber === action.msg.blockNumber ? action.msg : block), - blockCount: blockCount + blockCount }) } } diff --git a/apps/block_scout_web/assets/webpack.config.js b/apps/block_scout_web/assets/webpack.config.js index 842a584061..eaf21cd4b7 100644 --- a/apps/block_scout_web/assets/webpack.config.js +++ b/apps/block_scout_web/assets/webpack.config.js @@ -36,6 +36,7 @@ const appJs = { entry: { 'app': './js/app.js', + 'app_extra': './js/app_extra.js', 'chart-loader': './js/chart-loader.js', 'balance-chart-loader': './js/balance-chart-loader.js', 'chain': './js/pages/chain.js', diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex index f970aff1fd..f13c7083c8 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex @@ -56,104 +56,6 @@ - <%= cond do %> - <% ( - @view_module == Elixir.BlockScoutWeb.TransactionInternalTransactionView || - @view_module == Elixir.BlockScoutWeb.TransactionLogView || - @view_module == Elixir.BlockScoutWeb.TransactionRawTraceView || - @view_module == Elixir.BlockScoutWeb.TransactionTokenTransferView || - @view_module == Elixir.BlockScoutWeb.TransactionStateView - ) -> %> - <% to_address = @transaction && @transaction.to_address && "0x" <> Base.encode16(@transaction.to_address.hash.bytes, case: :lower) %> - <% {:ok, created_from_address} = if @transaction.to_address_hash, do: Chain.hash_to_address(@transaction.to_address_hash), else: {:ok, nil} %> - <% created_from_address_hash_str = if from_address_hash(created_from_address), do: "0x" <> Base.encode16(from_address_hash(created_from_address).bytes, case: :lower), else: nil %> - - <% ( - @view_module == Elixir.BlockScoutWeb.AddressTransactionView || - @view_module == Elixir.BlockScoutWeb.AddressTokenTransferView || - @view_module == Elixir.BlockScoutWeb.AddressTokenView || - @view_module == Elixir.BlockScoutWeb.AddressInternalTransactionView || - @view_module == Elixir.BlockScoutWeb.AddressCoinBalanceView || - @view_module == Elixir.BlockScoutWeb.AddressLogsView || - @view_module == Elixir.BlockScoutWeb.AddressValidationView || - @view_module == Elixir.BlockScoutWeb.AddressContractView || - @view_module == Elixir.BlockScoutWeb.AddressReadContractView || - @view_module == Elixir.BlockScoutWeb.AddressReadProxyView || - @view_module == Elixir.BlockScoutWeb.AddressWriteContractView || - @view_module == Elixir.BlockScoutWeb.AddressWriteProxyView - ) -> %> - <% created_from_address = if @address && from_address_hash(@address), do: "0x" <> Base.encode16(from_address_hash(@address).bytes, case: :lower), else: nil %> - - <% ( - @view_module == Elixir.BlockScoutWeb.Tokens.TransferView || - @view_module == Elixir.BlockScoutWeb.Tokens.ReadContractView || - @view_module == Elixir.BlockScoutWeb.Tokens.HolderView || - @view_module == Elixir.BlockScoutWeb.Tokens.Instance.TransferView || - @view_module == Elixir.BlockScoutWeb.Tokens.Instance.MetadataView || - @view_module == Elixir.BlockScoutWeb.PageNotFoundView - ) -> %> - <% {:ok, created_from_address} = if @token && @token.contract_address_hash, do: Chain.hash_to_address(@token.contract_address_hash), else: {:ok, nil} %> - <% created_from_address_hash = if from_address_hash(created_from_address), do: "0x" <> Base.encode16(from_address_hash(created_from_address).bytes, case: :lower), else: nil %> - - <% true -> %> - <%= nil %> - <% end %>
<%= Application.get_env(:block_scout_web, :permanent_dark_mode_enabled) %>
@@ -256,56 +158,6 @@ <%= if @view_module in [Elixir.BlockScoutWeb.AddressContractVerificationViaMultiPartFilesView, Elixir.BlockScoutWeb.AddressContractVerificationViaJsonView, Elixir.BlockScoutWeb.AddressContractVerificationViaStandardJsonInputView] do %> <% end %> - + diff --git a/apps/block_scout_web/lib/block_scout_web/views/layout_view.ex b/apps/block_scout_web/lib/block_scout_web/views/layout_view.ex index 91fd37664a..6991e47dfb 100644 --- a/apps/block_scout_web/lib/block_scout_web/views/layout_view.ex +++ b/apps/block_scout_web/lib/block_scout_web/views/layout_view.ex @@ -5,8 +5,6 @@ defmodule BlockScoutWeb.LayoutView do alias Plug.Conn alias Poison.Parser - import BlockScoutWeb.AddressView, only: [from_address_hash: 1] - @default_other_networks [ %{ title: "POA", diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot index a6b1805604..5a9faaea32 100644 --- a/apps/block_scout_web/priv/gettext/default.pot +++ b/apps/block_scout_web/priv/gettext/default.pot @@ -81,7 +81,7 @@ msgstr "" msgid ") may be added for each contract. Click the Add Library button to add an additional one." msgstr "" -#: lib/block_scout_web/templates/layout/app.html.eex:179 +#: lib/block_scout_web/templates/layout/app.html.eex:81 #, elixir-autogen, elixir-format msgid "- We're indexing this chain right now. Some of the counts may be inaccurate." msgstr "" diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po index 5dafe0b01d..d4889e764b 100644 --- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po +++ b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po @@ -81,7 +81,7 @@ msgstr "" msgid ") may be added for each contract. Click the Add Library button to add an additional one." msgstr "" -#: lib/block_scout_web/templates/layout/app.html.eex:179 +#: lib/block_scout_web/templates/layout/app.html.eex:81 #, elixir-autogen, elixir-format msgid "- We're indexing this chain right now. Some of the counts may be inaccurate." msgstr ""