Merge pull request #2037 from poanetwork/ab-logs-search-button

add address logs search functionality
6 years ago · 140a4d2d70
parent 191e3a67c7 6702a8cdde
commit 140a4d2d70
14 changed files with 317 additions and 47 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -17,9 +17,12 @@
 - [#1999](https://github.com/poanetwork/blockscout/pull/1999) - load data async on addresses page
 - [#1807](https://github.com/poanetwork/blockscout/pull/1807) - New theming capabilites.
 - [#2040](https://github.com/poanetwork/blockscout/pull/2040) - Verification links to other explorers for ETH
+- [#2037](https://github.com/poanetwork/blockscout/pull/2037) - add address logs search functionality
 - [#2012](https://github.com/poanetwork/blockscout/pull/2012) - make all pages pagination async

 ### Fixes
+- [#2066](https://github.com/poanetwork/blockscout/pull/2066) - fixed length of logs search input
+- [#2056](https://github.com/poanetwork/blockscout/pull/2056) - log search form styles added
 - [#2043](https://github.com/poanetwork/blockscout/pull/2043) - Fixed modal dialog width for 'verify other explorers'
 - [#2025](https://github.com/poanetwork/blockscout/pull/2025) - Added a new color to display transactions' errors.
 - [#2033](https://github.com/poanetwork/blockscout/pull/2033) - Header nav. dropdown active element color issue
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/apps/block_scout_web/assets/css/app.scss
@ -122,7 +122,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "components/alerts";
@import "components/verify_other_explorers";
@import "components/errors";
-
+@import "components/log-search";
 :export {
  dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
  dashboardLineColorMarket: $dashboard-line-color-market;
--- a/apps/block_scout_web/assets/css/components/_log-search.scss
+++ b/apps/block_scout_web/assets/css/components/_log-search.scss
@ -0,0 +1,64 @@
+.logs-topbar {
+	padding-bottom: 30px;
+	@media (min-width: 600px) {
+		display: flex;
+		justify-content: space-between;
+	}
+	.pagination-container.position-top {
+		padding-top: 0 !important;
+	}
+}
+
+.logs-search {
+	display: flex;
+	position: relative;
+	@media (max-width: 599px) {
+		margin-bottom: 30px;
+	}
+}
+
+.logs-search-input, .logs-search-btn, .logs-search-btn-cancel {
+	height: 24px;
+	background-color: #f5f6fa;
+	border: 1px solid #f5f6fa;
+	color: #333;
+	border-radius: 2px;
+	outline: none;
+	font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.logs-search-input {
+    padding-left: 6px;
+    display: inline-flex;
+    flex-grow: 2;
+    min-width: 160px;
+    &::placeholder {
+    	color: #a3a9b5; 
+    }
+}
+
+.logs-search-btn {
+	margin-left: 6px;
+	color: #a3a9b5;
+	transition: .1s ease-in;
+	cursor: pointer;
+	&:hover {
+		background-color: $primary;
+		color: #fff;
+		border-color: $primary;
+	}
+}
+
+.logs-search-btn-cancel {
+	color: #a3a9b5;
+	cursor: pointer;
+	transition: .1s ease-in;
+	position: absolute;
+	top: 0;
+	left: 136px;
+	&:hover {
+		color: #333;
+	}
+}
--- a/apps/block_scout_web/assets/js/app.js
+++ b/apps/block_scout_web/assets/js/app.js
@ -23,6 +23,7 @@ import './locale'
 import './pages/address'
 import './pages/address/coin_balances'
 import './pages/address/transactions'
+import './pages/address/logs'
 import './pages/address/validations'
 import './pages/address/internal_transactions'
 import './pages/blocks'
--- a/apps/block_scout_web/assets/js/lib/async_listing_load.js
+++ b/apps/block_scout_web/assets/js/lib/async_listing_load.js
@ -105,7 +105,9 @@ export function asyncReducer (state = asyncInitialState, action) {
        state.pagesStack.push(window.location.href.split('?')[0])
      }

+      if (state.pagesStack[state.pagesStack.length - 1] !== state.nextPagePath) {
        state.pagesStack.push(state.nextPagePath)
+      }

      return Object.assign({}, state, { beyondPageOne: true })
    }
@ -279,12 +281,14 @@ function firstPageLoad (store) {
    event.preventDefault()
    loadItemsNext()
    store.dispatch({type: 'NAVIGATE_TO_OLDER'})
+    event.stopImmediatePropagation()
  })

  $element.on('click', '[data-prev-page-button]', (event) => {
    event.preventDefault()
    loadItemsPrev()
    store.dispatch({type: 'NAVIGATE_TO_NEWER'})
+    event.stopImmediatePropagation()
  })
 }

--- a/apps/block_scout_web/assets/js/pages/address/logs.js
+++ b/apps/block_scout_web/assets/js/pages/address/logs.js
@ -0,0 +1,75 @@
+import $ from 'jquery'
+import _ from 'lodash'
+import humps from 'humps'
+import { connectElements } from '../../lib/redux_helpers.js'
+import { createAsyncLoadStore } from '../../lib/async_listing_load'
+
+export const initialState = {
+  addressHash: null,
+  isSearch: false
+}
+
+export function reducer (state, action) {
+  switch (action.type) {
+    case 'PAGE_LOAD':
+    case 'ELEMENTS_LOAD': {
+      return Object.assign({}, state, _.omit(action, 'type'))
+    }
+    case 'START_SEARCH': {
+      return Object.assign({}, state, {pagesStack: [], isSearch: true})
+    }
+    default:
+      return state
+  }
+}
+
+const elements = {
+  '[data-search-field]': {
+    render ($el, state) {
+      return $el
+    }
+  },
+  '[data-search-button]': {
+    render ($el, state) {
+      return $el
+    }
+  },
+  '[data-cancel-search-button]': {
+    render ($el, state) {
+      if (!state.isSearch) {
+        return $el.hide()
+      }
+
+      return $el.show()
+    }
+  }
+}
+
+if ($('[data-page="address-logs"]').length) {
+  const store = createAsyncLoadStore(reducer, initialState, 'dataset.identifierLog')
+  const addressHash = $('[data-page="address-details"]')[0].dataset.pageAddressHash
+  const $element = $('[data-async-listing]')
+
+  connectElements({ store, elements })
+
+  store.dispatch({
+    type: 'PAGE_LOAD',
+    addressHash: addressHash})
+
+  $element.on('click', '[data-search-button]', (event) => {
+    store.dispatch({
+      type: 'START_SEARCH',
+      addressHash: addressHash})
+    var topic = $('[data-search-field]').val()
+    var path = '/search_logs?topic=' + topic + '&address_id=' + store.getState().addressHash
+    store.dispatch({type: 'START_REQUEST'})
+    $.getJSON(path, {type: 'JSON'})
+      .done(response => store.dispatch(Object.assign({type: 'ITEMS_FETCHED'}, humps.camelizeKeys(response))))
+      .fail(() => store.dispatch({type: 'REQUEST_ERROR'}))
+      .always(() => store.dispatch({type: 'FINISH_REQUEST'}))
+  })
+
+  $element.on('click', '[data-cancel-search-button]', (event) => {
+    window.location.replace(window.location.href.split('?')[0])
+  })
+}
--- a/apps/block_scout_web/lib/block_scout_web/controllers/address_logs_controller.ex
+++ b/apps/block_scout_web/lib/block_scout_web/controllers/address_logs_controller.ex
@ -71,4 +71,48 @@ defmodule BlockScoutWeb.AddressLogsController do
        not_found(conn)
    end
  end
+
+  def search_logs(conn, %{"topic" => topic, "address_id" => address_hash_string} = params) do
+    with {:ok, address_hash} <- Chain.string_to_address_hash(address_hash_string),
+         {:ok, address} <- Chain.hash_to_address(address_hash) do
+      topic = String.trim(topic)
+
+      formatted_topic = if String.starts_with?(topic, "0x"), do: topic, else: "0x" <> topic
+
+      logs_plus_one = Chain.address_to_logs(address, topic: formatted_topic)
+
+      {results, next_page} = split_list_by_page(logs_plus_one)
+
+      next_page_url =
+        case next_page_params(next_page, results, params) do
+          nil ->
+            nil
+
+          next_page_params ->
+            address_logs_path(conn, :index, address, Map.delete(next_page_params, "type"))
+        end
+
+      items =
+        results
+        |> Enum.map(fn log ->
+          View.render_to_string(
+            AddressLogsView,
+            "_logs.html",
+            log: log,
+            conn: conn
+          )
+        end)
+
+      json(
+        conn,
+        %{
+          items: items,
+          next_page_path: next_page_url
+        }
+      )
+    else
+      _ ->
+        not_found(conn)
+    end
+  end
 end
--- a/apps/block_scout_web/lib/block_scout_web/router.ex
+++ b/apps/block_scout_web/lib/block_scout_web/router.ex
@ -238,6 +238,8 @@ defmodule BlockScoutWeb.Router do

    get("/search", ChainController, :search)

+    get("/search_logs", AddressLogsController, :search_logs)
+
    get("/token_autocomplete", ChainController, :token_autocomplete)

    get("/chain_blocks", ChainController, :chain_blocks, as: :chain_blocks)
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_logs/_logs.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_logs/_logs.html.eex
@ -1,4 +1,4 @@
-<div data-test="transaction_log" class="tile tile-muted">
+<div data-test="address_log" class="tile tile-muted" data-identifier-log="<%= "#{to_string(@log.transaction.hash)}#{@log.index}" %>">
  <dl class="row">
    <dt class="col-md-2"> <%= gettext "Transaction" %> </dt>
    <dd class="col-md-10">
--- a/apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/address_logs/index.html.eex
@ -1,12 +1,21 @@
 <section class="container">
  <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
+  <section data-page="address-logs">
  <div class="card">
    <%= render BlockScoutWeb.AddressView, "_tabs.html", assigns %>

    <div class="card-body" data-async-load data-async-listing="<%= @current_path %>">
      <h2 class="card-title"><%= gettext "Logs" %></h2>
+      <div class="logs-topbar">
+        
+        <div class="logs-search">
+          <input data-search-field class="logs-search-input" type='text' placeholder=<%= gettext("Topic") %> id='search-text-input' />
+          <button data-cancel-search-button class="logs-search-btn-cancel" type="button">x</button>
+          <button data-search-button class="logs-search-btn" type="button"><%= gettext("Search") %></button>
+        </div>

        <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "top", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
+      </div>

        <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>
@ -25,4 +34,5 @@
    </div>

  </div>
+  </section>
 </section>
--- a/apps/block_scout_web/priv/gettext/default.pot
+++ b/apps/block_scout_web/priv/gettext/default.pot
@ -500,7 +500,7 @@ msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/address/_tabs.html.eex:26
-#: lib/block_scout_web/templates/address_logs/index.html.eex:7
+#: lib/block_scout_web/templates/address_logs/index.html.eex:8
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:17
 #: lib/block_scout_web/templates/transaction_log/index.html.eex:8
 #: lib/block_scout_web/views/address_view.ex:314
@ -674,6 +674,7 @@ msgid "Responses"
 msgstr ""

 #, elixir-format
+#: lib/block_scout_web/templates/address_logs/index.html.eex:14
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:111
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:128
 msgid "Search"
@ -1217,7 +1218,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:34
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:61
-#: lib/block_scout_web/templates/address_logs/index.html.eex:12
+#: lib/block_scout_web/templates/address_logs/index.html.eex:21
 #: lib/block_scout_web/templates/address_token/index.html.eex:13
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:20
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:57
@ -1682,7 +1683,7 @@ msgid "Displaying the init data provided of the creating transaction."
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/index.html.eex:17
+#: lib/block_scout_web/templates/address_logs/index.html.eex:26
 msgid "There are no logs for this address."
 msgstr ""

@ -1720,3 +1721,8 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:17
 msgid "There are no token transfers for this transaction"
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/address_logs/index.html.eex:12
+msgid "Topic"
+msgstr ""
--- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
+++ b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
@ -145,7 +145,7 @@ msgid "Block %{block_number} - %{subnetwork} Explorer"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:73
+#: lib/block_scout_web/templates/transaction/overview.html.eex:72
 msgid "Block Confirmations"
 msgstr ""

@ -160,7 +160,7 @@ msgid "Block Mined, awaiting import..."
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:59
+#: lib/block_scout_web/templates/transaction/overview.html.eex:58
 msgid "Block Number"
 msgstr ""

@ -190,7 +190,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address/_tabs.html.eex:32
 #: lib/block_scout_web/templates/address/overview.html.eex:95
 #: lib/block_scout_web/templates/address_validation/index.html.eex:13
-#: lib/block_scout_web/views/address_view.ex:308
+#: lib/block_scout_web/views/address_view.ex:313
 msgid "Blocks Validated"
 msgstr ""

@ -207,8 +207,8 @@ msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/address/_validator_metadata_modal.html.eex:37
-#: lib/block_scout_web/templates/address/overview.html.eex:141
-#: lib/block_scout_web/templates/address/overview.html.eex:149
+#: lib/block_scout_web/templates/address/overview.html.eex:142
+#: lib/block_scout_web/templates/address/overview.html.eex:150
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:106
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:114
 msgid "Close"
@ -218,7 +218,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address/_tabs.html.eex:42
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:165
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:187
-#: lib/block_scout_web/views/address_view.ex:304
+#: lib/block_scout_web/views/address_view.ex:309
 msgid "Code"
 msgstr ""

@ -382,7 +382,7 @@ msgstr ""
 #: lib/block_scout_web/templates/layout/app.html.eex:55
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:20
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:30
-#: lib/block_scout_web/templates/transaction/overview.html.eex:210
+#: lib/block_scout_web/templates/transaction/overview.html.eex:209
 #: lib/block_scout_web/views/wei_helpers.ex:72
 msgid "Ether"
 msgstr "POA"
@ -452,7 +452,7 @@ msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:39
-#: lib/block_scout_web/templates/transaction/_tile.html.eex:76
+#: lib/block_scout_web/templates/transaction/_tile.html.eex:74
 msgid "IN"
 msgstr ""

@ -476,7 +476,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:19
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:11
 #: lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex:6
-#: lib/block_scout_web/views/address_view.ex:303
+#: lib/block_scout_web/views/address_view.ex:308
 #: lib/block_scout_web/views/transaction_view.ex:339
 msgid "Internal Transactions"
 msgstr ""
@ -494,16 +494,16 @@ msgid "Less than"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:238
+#: lib/block_scout_web/templates/transaction/overview.html.eex:237
 msgid "Limit"
 msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/address/_tabs.html.eex:26
-#: lib/block_scout_web/templates/address_logs/index.html.eex:7
+#: lib/block_scout_web/templates/address_logs/index.html.eex:8
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:17
 #: lib/block_scout_web/templates/transaction_log/index.html.eex:8
-#: lib/block_scout_web/views/address_view.ex:309
+#: lib/block_scout_web/views/address_view.ex:314
 #: lib/block_scout_web/views/transaction_view.ex:340
 msgid "Logs"
 msgstr ""
@ -574,13 +574,13 @@ msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/block/overview.html.eex:73
-#: lib/block_scout_web/templates/transaction/overview.html.eex:80
+#: lib/block_scout_web/templates/transaction/overview.html.eex:79
 msgid "Nonce"
 msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:37
-#: lib/block_scout_web/templates/transaction/_tile.html.eex:72
+#: lib/block_scout_web/templates/transaction/_tile.html.eex:70
 msgid "OUT"
 msgstr ""

@ -634,7 +634,7 @@ msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/address/overview.html.eex:33
-#: lib/block_scout_web/templates/address/overview.html.eex:140
+#: lib/block_scout_web/templates/address/overview.html.eex:141
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:35
 #: lib/block_scout_web/templates/tokens/overview/_details.html.eex:105
 msgid "QR Code"
@ -648,7 +648,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address/_tabs.html.eex:58
 #: lib/block_scout_web/templates/tokens/overview/_tabs.html.eex:25
-#: lib/block_scout_web/views/address_view.ex:306
+#: lib/block_scout_web/views/address_view.ex:311
 #: lib/block_scout_web/views/tokens/overview_view.ex:37
 msgid "Read Contract"
 msgstr ""
@ -674,6 +674,7 @@ msgid "Responses"
 msgstr ""

 #, elixir-format
+#: lib/block_scout_web/templates/address_logs/index.html.eex:14
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:111
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:128
 msgid "Search"
@ -705,7 +706,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:21
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:34
-#: lib/block_scout_web/templates/transaction/overview.html.eex:85
+#: lib/block_scout_web/templates/transaction/overview.html.eex:84
 msgid "TX Fee"
 msgstr ""

@ -802,8 +803,8 @@ msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex:5
-#: lib/block_scout_web/templates/transaction/overview.html.eex:180
-#: lib/block_scout_web/templates/transaction/overview.html.eex:194
+#: lib/block_scout_web/templates/transaction/overview.html.eex:179
+#: lib/block_scout_web/templates/transaction/overview.html.eex:193
 #: lib/block_scout_web/templates/transaction_token_transfer/_token_transfer.html.eex:4
 #: lib/block_scout_web/views/transaction_view.ex:284
 msgid "Token Transfer"
@ -823,7 +824,7 @@ msgstr ""
 #: lib/block_scout_web/templates/address/_tabs.html.eex:8
 #: lib/block_scout_web/templates/address_token/index.html.eex:8
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:9
-#: lib/block_scout_web/views/address_view.ex:301
+#: lib/block_scout_web/views/address_view.ex:306
 msgid "Tokens"
 msgstr ""

@ -881,7 +882,7 @@ msgstr ""
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
 #: lib/block_scout_web/templates/chain/show.html.eex:108
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:35
-#: lib/block_scout_web/views/address_view.ex:302
+#: lib/block_scout_web/views/address_view.ex:307
 msgid "Transactions"
 msgstr ""

@ -917,7 +918,7 @@ msgid "Unique Token"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:232
+#: lib/block_scout_web/templates/transaction/overview.html.eex:231
 msgid "Used"
 msgstr ""

@ -937,7 +938,7 @@ msgid "Validations"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:210
+#: lib/block_scout_web/templates/transaction/overview.html.eex:209
 msgid "Value"
 msgstr ""

@ -958,12 +959,12 @@ msgid "View Contract"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/_tile.html.eex:56
+#: lib/block_scout_web/templates/transaction/_tile.html.eex:55
 msgid "View Less Transfers"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/_tile.html.eex:55
+#: lib/block_scout_web/templates/transaction/_tile.html.eex:54
 msgid "View More Transfers"
 msgstr ""

@ -1101,7 +1102,7 @@ msgid "This API is provided for developers transitioning their applications from
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:110
+#: lib/block_scout_web/templates/transaction/overview.html.eex:109
 msgid "Raw Input"
 msgstr ""

@ -1217,7 +1218,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_coin_balance/index.html.eex:34
 #: lib/block_scout_web/templates/address_internal_transaction/index.html.eex:61
-#: lib/block_scout_web/templates/address_logs/index.html.eex:12
+#: lib/block_scout_web/templates/address_logs/index.html.eex:21
 #: lib/block_scout_web/templates/address_token/index.html.eex:13
 #: lib/block_scout_web/templates/address_token_transfer/index.html.eex:20
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:57
@ -1257,7 +1258,7 @@ msgstr ""

 #, elixir-format
 #: lib/block_scout_web/templates/address/_tabs.html.eex:20
-#: lib/block_scout_web/views/address_view.ex:307
+#: lib/block_scout_web/views/address_view.ex:312
 msgid "Coin Balance History"
 msgstr ""

@ -1499,18 +1500,18 @@ msgid "Transactions Sent"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:102
+#: lib/block_scout_web/templates/transaction/overview.html.eex:101
 msgid "Transaction Speed"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:116
-#: lib/block_scout_web/templates/transaction/overview.html.eex:120
+#: lib/block_scout_web/templates/transaction/overview.html.eex:115
+#: lib/block_scout_web/templates/transaction/overview.html.eex:119
 msgid "Hex (Default)"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:123
+#: lib/block_scout_web/templates/transaction/overview.html.eex:122
 msgid "UTF-8"
 msgstr ""

@ -1561,7 +1562,7 @@ msgid "Copy Decompiled Contract Code"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/views/address_view.ex:305
+#: lib/block_scout_web/views/address_view.ex:310
 msgid "Decompiled Code"
 msgstr ""

@ -1586,12 +1587,12 @@ msgid "Optimization runs"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:180
+#: lib/block_scout_web/templates/transaction/overview.html.eex:179
 msgid "ERC-20"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:194
+#: lib/block_scout_web/templates/transaction/overview.html.eex:193
 msgid "ERC-721"
 msgstr ""

@ -1611,7 +1612,7 @@ msgid "View All Transactions"
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:228
+#: lib/block_scout_web/templates/transaction/overview.html.eex:227
 msgid "Gas"
 msgstr ""

@ -1682,7 +1683,7 @@ msgid "Displaying the init data provided of the creating transaction."
 msgstr ""

 #, elixir-format
-#: lib/block_scout_web/templates/address_logs/index.html.eex:17
+#: lib/block_scout_web/templates/address_logs/index.html.eex:26
 msgid "There are no logs for this address."
 msgstr ""

@ -1720,3 +1721,8 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:17
 msgid "There are no token transfers for this transaction"
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/address_logs/index.html.eex:12
+msgid "Topic"
+msgstr ""
--- a/apps/explorer/lib/explorer/chain.ex
+++ b/apps/explorer/lib/explorer/chain.ex
@ -281,7 +281,7 @@ defmodule Explorer.Chain do
    |> Enum.take(paging_options.page_size)
  end

-  @spec address_to_logs(Address.t(), [paging_options]) :: [
+  @spec address_to_logs(Address.t(), Keyword.t()) :: [
          Log.t()
        ]
  def address_to_logs(
@ -293,7 +293,7 @@ defmodule Explorer.Chain do

    {block_number, transaction_index, log_index} = paging_options.key || {BlockNumberCache.max_number(), 0, 0}

-    query =
+    base_query =
      from(log in Log,
        inner_join: transaction in assoc(log, :transaction),
        order_by: [desc: transaction.block_number, desc: transaction.index],
@ -308,11 +308,22 @@ defmodule Explorer.Chain do
        select: log
      )

-    query
+    base_query
+    |> filter_topic(options)
    |> Repo.all()
    |> Enum.take(paging_options.page_size)
  end

+  defp filter_topic(base_query, topic: topic) do
+    from(log in base_query,
+      where:
+        log.first_topic == ^topic or log.second_topic == ^topic or log.third_topic == ^topic or
+          log.fourth_topic == ^topic
+    )
+  end
+
+  defp filter_topic(base_query, _), do: base_query
+
  @doc """
  Finds all `t:Explorer.Chain.Transaction.t/0`s given the address_hash and the token contract
  address hash.
--- a/apps/explorer/test/explorer/chain_test.exs
+++ b/apps/explorer/test/explorer/chain_test.exs
@ -93,6 +93,50 @@ defmodule Explorer.ChainTest do

      assert Enum.count(Chain.address_to_logs(address, paging_options: paging_options2)) == 50
    end
+
+    test "searches logs by topic when the first topic matches" do
+      address = insert(:address)
+
+      transaction1 =
+        :transaction
+        |> insert(to_address: address)
+        |> with_block()
+
+      insert(:log, transaction: transaction1, index: 1, address: address)
+
+      transaction2 =
+        :transaction
+        |> insert(from_address: address)
+        |> with_block()
+
+      insert(:log, transaction: transaction2, index: 2, address: address, first_topic: "test")
+
+      [found_log] = Chain.address_to_logs(address, topic: "test")
+
+      assert found_log.transaction.hash == transaction2.hash
+    end
+
+    test "searches logs by topic when the fourth topic matches" do
+      address = insert(:address)
+
+      transaction1 =
+        :transaction
+        |> insert(to_address: address)
+        |> with_block()
+
+      insert(:log, transaction: transaction1, index: 1, address: address, fourth_topic: "test")
+
+      transaction2 =
+        :transaction
+        |> insert(from_address: address)
+        |> with_block()
+
+      insert(:log, transaction: transaction2, index: 2, address: address)
+
+      [found_log] = Chain.address_to_logs(address, topic: "test")
+
+      assert found_log.transaction.hash == transaction1.hash
+    end
  end

  describe "address_to_transactions_with_rewards/2" do