From 7efee7b68506ff90ce3fd54143829a507af6b711 Mon Sep 17 00:00:00 2001 From: Victor Baranov Date: Wed, 7 Oct 2020 14:12:59 +0300 Subject: [PATCH] Fix dark forest theme bugs, allow multiple contracts --- .../assets/css/components/_log-search.scss | 2 +- .../custom_contracts/_dark-forest-theme.scss | 57 ++++++++++++------- .../assets/js/lib/smart_contract/write.js | 1 - .../js/pages/address/internal_transactions.js | 11 +++- .../js/pages/address/token_transfers.js | 9 +++ .../assets/js/pages/address/transactions.js | 9 +++ apps/block_scout_web/config/config.exs | 2 +- .../templates/address/_tabs.html.eex | 11 +++- .../templates/address/overview.html.eex | 17 ++++-- .../index.html.eex | 53 ++++++++--------- .../address_token_transfer/index.html.eex | 53 ++++++++--------- .../icons/_check_dark_forest_icon.html.eex | 1 + .../templates/layout/app.html.eex | 14 +++-- .../lib/block_scout_web/views/address_view.ex | 4 +- .../views/custom_contracts_helpers.ex | 22 +++++++ .../lib/block_scout_web/views/layout_view.ex | 2 +- 16 files changed, 176 insertions(+), 92 deletions(-) create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/icons/_check_dark_forest_icon.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/views/custom_contracts_helpers.ex diff --git a/apps/block_scout_web/assets/css/components/_log-search.scss b/apps/block_scout_web/assets/css/components/_log-search.scss index 4d1857072c..0c57795a38 100644 --- a/apps/block_scout_web/assets/css/components/_log-search.scss +++ b/apps/block_scout_web/assets/css/components/_log-search.scss @@ -62,7 +62,7 @@ transition: .1s ease-in; position: absolute; top: 0; - right: 59px; + right: 56px; &:hover { color: #333; } diff --git a/apps/block_scout_web/assets/css/theme/custom_contracts/_dark-forest-theme.scss b/apps/block_scout_web/assets/css/theme/custom_contracts/_dark-forest-theme.scss index facf691c3f..0cd10cab35 100644 --- a/apps/block_scout_web/assets/css/theme/custom_contracts/_dark-forest-theme.scss +++ b/apps/block_scout_web/assets/css/theme/custom_contracts/_dark-forest-theme.scss @@ -142,12 +142,20 @@ $dark-primary-alternate: $dark-primary; } } - .card-tab .fa-check-circle { - color: $dark-primary; + .check_dark_forest_icon { + margin-left: 10px; } - .card-tab.active .fa-check-circle { - color: $body-dark; + .card-tab .check_dark_forest_icon { + svg path { + fill: $dark-primary; + } + } + + .card-tab.active .check_dark_forest_icon { + svg path { + fill: $body-dark; + } } .card-background-1 { @@ -259,12 +267,14 @@ $dark-primary-alternate: $dark-primary; } .btn-copy-icon, .btn-qr-icon, .btn-address-card-icon .btn-contract-icon { + border-radius: 0; + border: none; border-color: $dark-primary; &:hover { - background-color: $labels-dark; + background-color: rgba(117, 249, 77, 0.4); } } - + // pagination .pagination-container .pagination .page-link { color: #fff !important; @@ -274,7 +284,8 @@ $dark-primary-alternate: $dark-primary; padding: 15px; &:not(.no-hover):hover { color: #fff; - background-color: $dark-light-bg; + border: 1px solid #fff; + background-color: $dark-primary; path { fill: #fff; } @@ -466,16 +477,19 @@ $dark-primary-alternate: $dark-primary; background-color: $dark-light; border-color: $dark-light; color: #fff; + height: 32px; + border-radius: 0px; + border-color: #fff; } .logs-search-btn { - color: $labels-dark; - } + border: none; + background-color: $dark-primary; + color: $body-dark; - .logs-search-btn { &:hover { background-color: $dark-primary; - color: #fff; + color: $body-dark; } } @@ -569,9 +583,9 @@ $dark-primary-alternate: $dark-primary; // Content loading placeholders .tile-loader, .table-content-loader { - background-color: $labels-dark !important; + background-color: rgba(117, 249, 77, 0.4) !important; &:before { - background: linear-gradient(to right, $labels-dark 2%, lighten($labels-dark, 3) 18%, $labels-dark 33%); + background: linear-gradient(to right, rgba(117, 249, 77, 0.4) 2%, lighten(rgba(117, 249, 77, 0.4), 3) 18%, rgba(117, 249, 77, 0.4) 33%); } } @@ -714,7 +728,7 @@ $dark-primary-alternate: $dark-primary; .table-bordered, .table-bordered td, .table-bordered th { border-color: darken($labels-dark, 30); } - .dark-theme-applied .table td, .dark-theme-applied .table th, .dark-theme-applied hr { + .dark-forest-theme-applied .table td, .dark-forest-theme-applied .table th, .dark-forest-theme-applied hr { border-top-color: darken($labels-dark, 30); } .btn-copy-ico svg path { @@ -918,10 +932,6 @@ $dark-primary-alternate: $dark-primary; background: $dark-primary; } - .fa-check-circle { - content: url(/images/custom-themes/dark-forest/union.svg); - } - .custom-balance-icon { content: url(/images/custom-themes/dark-forest/pic_balance.svg); margin-right: 0px; @@ -972,6 +982,9 @@ $dark-primary-alternate: $dark-primary; .application-icon { content: url(/images/custom-themes/dark-forest/planet.svg); + &:hover { + background-color: rgba(117, 249, 77, 0.4); + } @media screen and (max-width: 768px) { float: right; } @@ -987,18 +1000,18 @@ $dark-primary-alternate: $dark-primary; border: none; } -.dark-theme-applied .dropdown-item { +.dark-forest-theme-applied .dropdown-item { background-color: $dark-light!important; color: #fff !important; } -.dark-theme-applied .dropdown-item.active:not(.header), .dark-theme-applied .dropdown-item:not(.header):hover, .dark-theme-applied .dropdown-item:not(.header):focus { +.dark-forest-theme-applied .dropdown-item.active:not(.header), .dark-forest-theme-applied .dropdown-item:not(.header):hover, .dark-forest-theme-applied .dropdown-item:not(.header):focus { background-image: none; width: 100%; - background-color: #3f426c !important; + background-color: rgba(117, 249, 77, 0.4) !important; } -.dark-theme-applied .dropdown-item.active.header, .dark-theme-applied .dropdown-item.header:hover, .dark-theme-applied .dropdown-item.header:focus { +.dark-forest-theme-applied .dropdown-item.active.header, .dark-forest-theme-applied .dropdown-item.header:hover, .dark-forest-theme-applied .dropdown-item.header:focus { background-color: $dark-light !important; } diff --git a/apps/block_scout_web/assets/js/lib/smart_contract/write.js b/apps/block_scout_web/assets/js/lib/smart_contract/write.js index 138d27ba57..4c2b75abe9 100644 --- a/apps/block_scout_web/assets/js/lib/smart_contract/write.js +++ b/apps/block_scout_web/assets/js/lib/smart_contract/write.js @@ -64,7 +64,6 @@ export const hideConnectButton = () => { } }) } else { - console.log(window.ethereum.selectedAddress) resolve({ shouldHide: true, account: window.ethereum.selectedAddress }) } } else { diff --git a/apps/block_scout_web/assets/js/pages/address/internal_transactions.js b/apps/block_scout_web/assets/js/pages/address/internal_transactions.js index 2f1213adf7..f934eb15fc 100644 --- a/apps/block_scout_web/assets/js/pages/address/internal_transactions.js +++ b/apps/block_scout_web/assets/js/pages/address/internal_transactions.js @@ -69,12 +69,21 @@ const elements = { } }, '[data-selector="channel-batching-count"]': { - render ($el, state, oldState) { + render ($el, state) { const $channelBatching = $('[data-selector="channel-batching-message"]') if (!state.internalTransactionsBatch.length) return $channelBatching.hide() $channelBatching.show() $el[0].innerHTML = numeral(state.internalTransactionsBatch.length).format() } + }, + '[data-test="filter_dropdown"]': { + render ($el, state) { + if (state.emptyResponse && !state.isSearch) { + return $el.hide() + } + + return $el.show() + } } } diff --git a/apps/block_scout_web/assets/js/pages/address/token_transfers.js b/apps/block_scout_web/assets/js/pages/address/token_transfers.js index ab750e7b0d..2b23ca506c 100644 --- a/apps/block_scout_web/assets/js/pages/address/token_transfers.js +++ b/apps/block_scout_web/assets/js/pages/address/token_transfers.js @@ -50,6 +50,15 @@ const elements = { render ($el, state) { if (state.channelDisconnected) $el.show() } + }, + '[data-test="filter_dropdown"]': { + render ($el, state) { + if (state.emptyResponse && !state.isSearch) { + return $el.hide() + } + + return $el.show() + } } } diff --git a/apps/block_scout_web/assets/js/pages/address/transactions.js b/apps/block_scout_web/assets/js/pages/address/transactions.js index b2c14dc02b..29be4c3dcd 100644 --- a/apps/block_scout_web/assets/js/pages/address/transactions.js +++ b/apps/block_scout_web/assets/js/pages/address/transactions.js @@ -50,6 +50,15 @@ const elements = { render ($el, state) { if (state.channelDisconnected) $el.show() } + }, + '[data-test="filter_dropdown"]': { + render ($el, state) { + if (state.emptyResponse && !state.isSearch) { + return $el.hide() + } + + return $el.show() + } } } diff --git a/apps/block_scout_web/config/config.exs b/apps/block_scout_web/config/config.exs index f75559536d..3bb256c1de 100644 --- a/apps/block_scout_web/config/config.exs +++ b/apps/block_scout_web/config/config.exs @@ -42,7 +42,7 @@ config :block_scout_web, gas_price: System.get_env("GAS_PRICE", nil), restricted_list: System.get_env("RESTRICTED_LIST", nil), restricted_list_key: System.get_env("RESTRICTED_LIST_KEY", nil), - dark_forest_address: System.get_env("CUSTOM_CONTRACT_ADDRESS_DARK_FOREST") + dark_forest_addresses: System.get_env("CUSTOM_CONTRACT_ADDRESSES_DARK_FOREST") config :block_scout_web, BlockScoutWeb.Counters.BlocksIndexedCounter, enabled: true diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex index 103002d81d..e62bc8f452 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex @@ -1,3 +1,5 @@ +<% dark_forest_addresses_list = CustomContractsHelpers.get_dark_forest_addresses_list() %> +<% current_address = "0x" <> Base.encode16(@address.hash.bytes, case: :lower) %>
<%= link( gettext("Transactions"), @@ -53,7 +55,14 @@ class: "card-tab #{tab_status("contracts", @conn.request_path)}") do %> <%= gettext("Code") %> <%= if smart_contract_verified?(@address) do %> - + <%= cond do %> + <% Enum.member?(dark_forest_addresses_list, current_address) -> %> + + <%= render BlockScoutWeb.IconsView, "_check_dark_forest_icon.html" %> + + <% true -> %> + + <% end %> <% end %> <% end %> <% end %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex index e6257f8988..bf49e576f2 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex @@ -1,6 +1,5 @@
- <% dark_forest_address_var = Application.get_env(:block_scout_web, :dark_forest_address) %> - <% dark_forest_address = if dark_forest_address_var, do: String.downcase(dark_forest_address_var), else: nil %> + <% dark_forest_addresses_list = CustomContractsHelpers.get_dark_forest_addresses_list() %> <% current_address = "0x" <> Base.encode16(@address.hash.bytes, case: :lower) %>
@@ -8,14 +7,24 @@
<%= cond do %> - <% current_address == dark_forest_address -> %> + <% Enum.member?(dark_forest_addresses_list, current_address) -> %>
<%= gettext "zkSnark space warfare (v0.4)" %> - + + + + +
<% true -> %> diff --git a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex index c7cd85e21a..9b63784c5e 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex @@ -17,36 +17,37 @@

<%= gettext "Internal Transactions" %>

-