CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix dark forest theme bugs, allow multiple contracts

Browse Source
pull/3333/head
Victor Baranov 4 years ago
parent d42f6729cb
commit 7efee7b685
16 changed files with 176 additions and 92 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      apps/block_scout_web/assets/css/components/_log-search.scss
  2. 57
      apps/block_scout_web/assets/css/theme/custom_contracts/_dark-forest-theme.scss
  3. 1
      apps/block_scout_web/assets/js/lib/smart_contract/write.js
  4. 11
      apps/block_scout_web/assets/js/pages/address/internal_transactions.js
  5. 9
      apps/block_scout_web/assets/js/pages/address/token_transfers.js
  6. 9
      apps/block_scout_web/assets/js/pages/address/transactions.js
  7. 2
      apps/block_scout_web/config/config.exs
  8. 11
      apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex
  9. 17
      apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex
  10. 53
      apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
  11. 53
      apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
  12. 1
      apps/block_scout_web/lib/block_scout_web/templates/icons/_check_dark_forest_icon.html.eex
  13. 14
      apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex
  14. 4
      apps/block_scout_web/lib/block_scout_web/views/address_view.ex
  15. 22
      apps/block_scout_web/lib/block_scout_web/views/custom_contracts_helpers.ex
  16. 2
      apps/block_scout_web/lib/block_scout_web/views/layout_view.ex

2
apps/block_scout_web/assets/css/components/_log-search.scss
Unescape View File

@ -62,7 +62,7 @@
transition: .1s ease-in;
position: absolute;
top: 0;
right: 59px;
right: 56px;
&:hover {
color: #333;
}

57
apps/block_scout_web/assets/css/theme/custom_contracts/_dark-forest-theme.scss
Unescape View File

@ -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;
}

1
apps/block_scout_web/assets/js/lib/smart_contract/write.js
Unescape View File

@ -64,7 +64,6 @@ export const hideConnectButton = () => {
}
})
} else {
console.log(window.ethereum.selectedAddress)
resolve({ shouldHide: true, account: window.ethereum.selectedAddress })
}
} else {

11
apps/block_scout_web/assets/js/pages/address/internal_transactions.js
Unescape View File

@ -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()
}
}
}

9
apps/block_scout_web/assets/js/pages/address/token_transfers.js
Unescape View File

@ -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()
}
}
}

9
apps/block_scout_web/assets/js/pages/address/transactions.js
Unescape View File

@ -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()
}
}
}

2
apps/block_scout_web/config/config.exs
Unescape View File

@ -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

11
apps/block_scout_web/lib/block_scout_web/templates/address/_tabs.html.eex
Unescape View File

@ -1,3 +1,5 @@
<% dark_forest_addresses_list = CustomContractsHelpers.get_dark_forest_addresses_list() %>
<% current_address = "0x" <> Base.encode16(@address.hash.bytes, case: :lower) %>
<div class="card-tabs js-card-tabs">
<%= 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 %>
<i class="far fa-check-circle"></i>
<%= cond do %>
<% Enum.member?(dark_forest_addresses_list, current_address) -> %>
<i class="check_dark_forest_icon">
<%= render BlockScoutWeb.IconsView, "_check_dark_forest_icon.html" %>
</i>
<% true -> %>
<i class="far fa-check-circle"></i>
<% end %>
<% end %>
<% end %>
<% end %>

17
apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex
Unescape View File

@ -1,6 +1,5 @@
<section class="address-overview" data-page="address-details" data-page-address-hash="<%= @address.hash %>" data-async-counters="<%= @counters_path %>">
<% 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) %>
<div class="row">
<!-- Address details -->
@ -8,14 +7,24 @@
<div class="card">
<div class="card-body">
<%= cond do %>
<% current_address == dark_forest_address -> %>
<% Enum.member?(dark_forest_addresses_list, current_address) -> %>
<div class="custom-dapp-header-container">
<img class="custom-address-icon"/>
<div class="custom-dapp-header-description-container">
<span class="address-detail-item custom-address-details">
<%= gettext "zkSnark space warfare (v0.4)" %>
</span>
<a href="https://zkga.me/" target="_blank" class="application-icon-link"><img class="application-icon"/></a>
<a href="https://zkga.me/" target="_blank" class="application-icon-link">
<span
aria-label='<%= gettext("Play") %>'
class="application-icon"
data-placement="top"
data-toggle="tooltip"
title='<%= gettext("Play") %>'
>
<img class="application-icon"/>
</span>
</a>
</div>
</div>
<% true -> %>

53
apps/block_scout_web/lib/block_scout_web/templates/address_internal_transaction/index.html.eex
Unescape View File

@ -17,36 +17,37 @@
</div>
<div class="clearfix">
<h2 class="card-title float-left"><%= gettext "Internal Transactions" %></h2>
<div class="dropdown float-right u-push-sm">
<button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter: <%= format_current_filter(@filter) %>
</button>
<div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
<%= link(
gettext("All"),
to: AccessHelpers.get_path(@conn, :address_internal_transaction_path, :index, @address.hash),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("To"),
to: AccessHelpers.get_path(@conn, :address_internal_transaction_path, :index, @address.hash, %{:filter => "to"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("From"),
to: AccessHelpers.get_path(@conn, :address_internal_transaction_path, :index, @address.hash, %{:filter => "from"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<div class="top-pagination-outer-container float-right">
<div class="dropdown u-push-sm">
<button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter: <%= format_current_filter(@filter) %>
</button>
<div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
<%= link(
gettext("All"),
to: AccessHelpers.get_path(@conn, :address_internal_transaction_path, :index, @address.hash),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("To"),
to: AccessHelpers.get_path(@conn, :address_internal_transaction_path, :index, @address.hash, %{:filter => "to"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("From"),
to: AccessHelpers.get_path(@conn, :address_internal_transaction_path, :index, @address.hash, %{:filter => "from"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
</div>
</div>
<%= 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>
</div>
<%= 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 %>
<button data-error-message class="alert alert-danger col-12 text-left" style="display: none;">
<span href="#" class="alert-link"><%= gettext("Something went wrong, click to reload.") %></span>
</button>

53
apps/block_scout_web/lib/block_scout_web/templates/address_token_transfer/index.html.eex
Unescape View File

@ -15,37 +15,38 @@
<%= if !assigns[:token] do %>
<div class="clearfix">
<h2 class="card-title float-left"><%= gettext "Transactions" %></h2>
<div class="dropdown float-right u-push-sm">
<button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter: <%= format_current_filter(@filter) %>
</button>
<div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
<%= link(
gettext("All"),
to: AccessHelpers.get_path(@conn, :address_token_transfers_path, :index, to_string(@address.hash)),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("To"),
to: AccessHelpers.get_path(@conn, :address_token_transfers_path, :index, to_string(@address.hash), %{:filter => "to"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("From"),
to: AccessHelpers.get_path(@conn, :address_token_transfers_path, :index, to_string(@address.hash), %{:filter => "from"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<div class="top-pagination-outer-container float-right">
<div class="dropdown u-push-sm">
<button data-test="filter_dropdown" class="btn-dropdown-line dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter: <%= format_current_filter(@filter) %>
</button>
<div class="dropdown-menu dropdown-menu-right filter" aria-labelledby="dropdownMenu2">
<%= link(
gettext("All"),
to: AccessHelpers.get_path(@conn, :address_token_transfers_path, :index, to_string(@address.hash)),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("To"),
to: AccessHelpers.get_path(@conn, :address_token_transfers_path, :index, to_string(@address.hash), %{:filter => "to"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
<%= link(
gettext("From"),
to: AccessHelpers.get_path(@conn, :address_token_transfers_path, :index, to_string(@address.hash), %{:filter => "from"}),
class: "address__link address__link--active dropdown-item",
"data-test": "filter_option"
) %>
</div>
</div>
<%= 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>
</div>
<% end %>
<%= 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-empty-response-message class="tile tile-muted text-center" style="display: none;">
<span><%= gettext "There are no token transfers for this address." %></span>
</div>

1
apps/block_scout_web/lib/block_scout_web/templates/icons/_check_dark_forest_icon.html.eex
Unescape View File

@ -0,0 +1 @@
<svg fill="none" height="10" viewBox="0 0 14 10" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m1.41421 3.53553-1.41421 1.41422 4.94975 4.94975 8.48525-8.48529-1.4142-1.41421-7.07105 7.07107z" fill="#75f94d"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

14
apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex
Unescape View File

@ -36,15 +36,17 @@
</head>
<body>
<% 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 %>
<% raw_dark_forest_addresses = CustomContractsHelpers.get_raw_dark_forest_addresses_list() %>
<script>
function applyCustomMode() {
const darkForestContractAddressHash = "<%= dark_forest_address %>"
const darkForestContractAddressHashes = "<%= raw_dark_forest_addresses %>".split(',').map(hash => hash.toLowerCase())
if (window.location.pathname.toLowerCase().includes(darkForestContractAddressHash)) {
document.body.className += " " + "dark-forest-theme-applied";
}
darkForestContractAddressHashes.forEach(darkForestContractAddressHash => {
if (window.location.pathname.toLowerCase().includes(darkForestContractAddressHash)) {
document.body.className += " " + "dark-forest-theme-applied";
return;
}
})
}
function applyDarkMode() {
if (localStorage.getItem("current-color-mode") === "dark") {

4
apps/block_scout_web/lib/block_scout_web/views/address_view.ex
Unescape View File

@ -3,7 +3,7 @@ defmodule BlockScoutWeb.AddressView do
require Logger
alias BlockScoutWeb.{AccessHelpers, LayoutView}
alias BlockScoutWeb.{AccessHelpers, CustomContractsHelpers, LayoutView}
alias Explorer.Chain
alias Explorer.Chain.{Address, Hash, InternalTransaction, SmartContract, Token, TokenTransfer, Transaction, Wei}
alias Explorer.Chain.Block.Reward
@ -132,7 +132,7 @@ defmodule BlockScoutWeb.AddressView do
do: ""
def balance_percentage(%Address{fetched_coin_balance: balance}, total_supply) do
if total_supply > 0 do
if Decimal.cmp(total_supply, 0) == :gt do
balance
|> Wei.to(:ether)
|> Decimal.div(Decimal.new(total_supply))

22
apps/block_scout_web/lib/block_scout_web/views/custom_contracts_helpers.ex
Unescape View File

@ -0,0 +1,22 @@
defmodule BlockScoutWeb.CustomContractsHelpers do
@moduledoc """
Helpers to enable custom contracts themes
"""
def get_dark_forest_addresses_list do
dark_forest_addresses_var = get_raw_dark_forest_addresses_list()
dark_forest_addresses_list = (dark_forest_addresses_var && String.split(dark_forest_addresses_var, ",")) || []
formatted_dark_forest_addresses_list =
dark_forest_addresses_list
|> Enum.map(fn addr ->
String.downcase(addr)
end)
formatted_dark_forest_addresses_list
end
def get_raw_dark_forest_addresses_list do
Application.get_env(:block_scout_web, :dark_forest_addresses)
end
end

2
apps/block_scout_web/lib/block_scout_web/views/layout_view.ex
Unescape View File

@ -31,7 +31,7 @@ defmodule BlockScoutWeb.LayoutView do
}
]
alias BlockScoutWeb.SocialMedia
alias BlockScoutWeb.{CustomContractsHelpers, SocialMedia}
def logo do
Keyword.get(application_config(), :logo) || "/images/blockscout_logo.svg"

Write Preview
Loading…
Cancel
Save