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 %> +