From d17d9c95dbe54d81d3aec7b5d9e7c0154231eb8a Mon Sep 17 00:00:00 2001 From: Viktor Baranov Date: Wed, 25 Jan 2023 17:35:33 +0300 Subject: [PATCH] Permanent dark mode --- CHANGELOG.md | 1 + .../assets/js/lib/history_chart.js | 16 ++- .../assets/js/pages/dark-mode-switcher.js | 26 ++-- apps/block_scout_web/assets/package-lock.json | 7 +- apps/block_scout_web/assets/package.json | 2 +- .../templates/csv_export/index.html.eex | 9 +- .../templates/layout/app.html.eex | 119 ++++++++---------- apps/explorer/package.json | 2 +- config/runtime.exs | 3 +- 9 files changed, 99 insertions(+), 86 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60a3ffe631..29913e29ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Features +- [#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 - [#6712](https://github.com/blockscout/blockscout/pull/6712) - API v2 update 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 4d61cf5aa2..ef0884665c 100644 --- a/apps/block_scout_web/assets/js/lib/history_chart.js +++ b/apps/block_scout_web/assets/js/lib/history_chart.js @@ -18,8 +18,18 @@ const grid = { drawOnChartArea: false } +function isDarkMode () { + // @ts-ignore + const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true' + if (!permanentDarkModeEnabled) { + return Cookies.get('chakra-ui-color-mode') === 'dark' + } else { + return true + } +} + function getTxChartColor () { - if (Cookies.get('chakra-ui-color-mode') === 'dark') { + if ((isDarkMode())) { return sassVariables.dashboardLineColorTransactionsDarkTheme } else { return sassVariables.dashboardLineColorTransactions @@ -27,7 +37,7 @@ function getTxChartColor () { } function getPriceChartColor () { - if (Cookies.get('chakra-ui-color-mode') === 'dark') { + if ((isDarkMode())) { return sassVariables.dashboardLineColorPriceDarkTheme } else { return sassVariables.dashboardLineColorPrice @@ -35,7 +45,7 @@ function getPriceChartColor () { } function getMarketCapChartColor () { - if (Cookies.get('chakra-ui-color-mode') === 'dark') { + if ((isDarkMode())) { return sassVariables.dashboardLineColorMarketDarkTheme } else { return sassVariables.dashboardLineColorMarket 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 37ebfafeda..0284c9e478 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,12 +1,22 @@ -import $ from 'jquery' 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] -$('.dark-mode-changer').on('click', function () { - if (Cookies.get('chakra-ui-color-mode') === 'dark') { - Cookies.set('chakra-ui-color-mode', 'light') - } else { - Cookies.set('chakra-ui-color-mode', 'dark') +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() } - // reload each theme switch - document.location.reload() }) diff --git a/apps/block_scout_web/assets/package-lock.json b/apps/block_scout_web/assets/package-lock.json index 86724d2842..b4d622e1ad 100644 --- a/apps/block_scout_web/assets/package-lock.json +++ b/apps/block_scout_web/assets/package-lock.json @@ -95,15 +95,16 @@ "webpack-cli": "^5.0.1" }, "engines": { - "node": "16.x", + "node": "18.x", "npm": "8.x" } }, "../../../deps/phoenix": { - "version": "0.0.1" + "version": "1.5.13", + "license": "MIT" }, "../../../deps/phoenix_html": { - "version": "0.0.1" + "version": "3.0.4" }, "node_modules/@amplitude/analytics-browser": { "version": "1.6.8", diff --git a/apps/block_scout_web/assets/package.json b/apps/block_scout_web/assets/package.json index f110bffd26..57dfbf8d14 100644 --- a/apps/block_scout_web/assets/package.json +++ b/apps/block_scout_web/assets/package.json @@ -8,7 +8,7 @@ "author": "Blockscout", "license": "GPL-3.0", "engines": { - "node": "16.x", + "node": "18.x", "npm": "8.x" }, "scripts": { 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 d1b5b394bd..07a1ee0d13 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 @@ -32,7 +32,14 @@ if (reCaptchaClientKey) { widgetId1 = grecaptcha.render('recaptcha', { 'sitekey': reCaptchaClientKey, - 'theme': getCookie('chakra-ui-color-mode'), + 'theme': function () { + const permanentDarkModeEnabled = document.getElementById('permanent-dark-mode').textContent === 'true' + if (permanentDarkModeEnabled) { + return 'dark' + } else { + return getCookie('chakra-ui-color-mode') + } + }, 'callback': function () { document.getElementById('export-csv-button').disabled = false } 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 60c0754acf..d717e07099 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 @@ -52,59 +52,6 @@ - - - - <% raw_dark_forest_addresses_0_4 = CustomContractsHelpers.get_raw_custom_addresses_list(:dark_forest_addresses) || "" %> - <% raw_dark_forest_addresses_0_5 = CustomContractsHelpers.get_raw_custom_addresses_list(:dark_forest_addresses_v_0_5) || "" %> - <% raw_dark_forest_addresses_0_6 = CustomContractsHelpers.get_raw_custom_addresses_list(:dark_forest_addresses_v_0_6) || "" %> - <% raw_dark_forest_addresses_0_6_r2 = CustomContractsHelpers.get_raw_custom_addresses_list(:dark_forest_addresses_v_0_6_r2) || "" %> - <% raw_dark_forest_addresses = raw_dark_forest_addresses_0_4 %> - <% raw_dark_forest_addresses = if raw_dark_forest_addresses_0_5 !== "", do: raw_dark_forest_addresses <> "," <> raw_dark_forest_addresses_0_5, else: raw_dark_forest_addresses %> - <% raw_dark_forest_addresses = if raw_dark_forest_addresses_0_6 !== "", do: raw_dark_forest_addresses <> "," <> raw_dark_forest_addresses_0_6, else: raw_dark_forest_addresses %> - <% raw_dark_forest_addresses = if raw_dark_forest_addresses_0_6_r2 !== "", do: raw_dark_forest_addresses <> "," <> raw_dark_forest_addresses_0_6_r2, else: raw_dark_forest_addresses %> - - <% raw_circles_addresses = CustomContractsHelpers.get_raw_custom_addresses_list(:circles_addresses) %> <%= cond do %> <% ( @view_module == Elixir.BlockScoutWeb.TransactionInternalTransactionView || @@ -117,10 +64,6 @@ <% {: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.Tokens.TransferView || @@ -191,10 +129,6 @@ <% {: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 %> <% end %> + diff --git a/apps/explorer/package.json b/apps/explorer/package.json index 3c5c000959..0f75b6e96a 100644 --- a/apps/explorer/package.json +++ b/apps/explorer/package.json @@ -8,7 +8,7 @@ "author": "Blockscout", "license": "GPL-3.0", "engines": { - "node": "16.x", + "node": "18.x", "npm": "8.x" }, "scripts": {}, diff --git a/config/runtime.exs b/config/runtime.exs index b6b71a52e9..70d8d389d1 100644 --- a/config/runtime.exs +++ b/config/runtime.exs @@ -100,7 +100,8 @@ config :block_scout_web, new_tags: System.get_env("NEW_TAGS"), chain_id: System.get_env("CHAIN_ID"), json_rpc: System.get_env("JSON_RPC"), - verification_max_libraries: verification_max_libraries + verification_max_libraries: verification_max_libraries, + permanent_dark_mode_enabled: System.get_env("PERMANENT_DARK_MODE_ENABLED", "false") == "true" default_api_rate_limit = 50 default_api_rate_limit_str = Integer.to_string(default_api_rate_limit)