addresses tiles changes to table

apps/block_scout_web/assets/css/components/_stakes_table.scss

@@ -7,6 +7,25 @@ $stakes-table-cell-separation: 25px !default;
   width: 100%;
 }
 
+.addresses-table-container {
+  margin-left: -30px;
+  margin-right: -30px;
+  .stakes-table-container {
+    table {
+      width: 100%;
+      th:first-child {
+        padding-left: 25px;
+      }
+      td:first-child {
+        padding-left: 25px;
+      }
+    }
+  }
+  .color-lighten {
+    color: #828ba0;
+  }
+}
+
 .stakes-table {
   min-width: fit-content;
   width: 100%;

apps/block_scout_web/lib/block_scout_web/templates/address/_tile.html.eex

@@ -1,35 +1,15 @@
-<div class="tile">
+<tr>
-  <div class="row">
+  <td class="stakes-td">
-    <!-- rank -->
-    <div class="col-2 col-md-1 d-flex justify-content-center align-items-center">
       <!-- incremented number by order in the list -->
-      <span>
+      <span class="color-lighten">
         <%= @index %>
       </span>
-    </div>
+  </td>
-
+  <td class="stakes-td">
-    <div class="col-10 col-md-11">
-      <div class="row">
-        <div class="col-md-6 d-flex flex-column">
     <%= @address |> BlockScoutWeb.AddressView.address_partial_selector(nil, nil) |> BlockScoutWeb.RenderHelpers.render_partial() %>
-          <!-- number of txns for this address -->
+  </td>
-          <span class="mr-4">
+  <td class="stakes-td">
-            <span data-test="transaction_count">
+    <span data-test="address_balance"><%= balance(@address) %></span>
-              <%= @tx_count %>
-            </span> <%= gettext "Transactions sent" %>
-            <% if validator?(@address) do %>
-              <span data-test="validation_count">
-                <%= @validation_count %>
-              </span> <%= gettext "Validations" %>
-            <% end %>
-          </span>
-        </div>
-
-        <!-- balance and percentage -->
-        <div class="col-md-6 d-flex flex-column text-md-right mt-3 mt-md-0">
-          <!-- address coin balance -->
-          <span class="tile-title" data-test="address_balance"><%= balance(@address) %></span>
-          <div class="d-flex flex-column flex-md-row justify-content-md-end">
     <!-- USD value of the balance -->
     <span
       data-wei-value="<%= if @address.fetched_coin_balance, do: @address.fetched_coin_balance.value %>"
@@ -37,15 +17,23 @@
         data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
       <% end %>
     </span>
+  </td>
+  <td class="stakes-td color-lighten">
     <!-- percentage of coins from total supply -->
-            <span class="ml-0 ml-md-2">
     <%= if @total_supply do %>
       (<%= balance_percentage(@address, @total_supply) %>)
     <% end %>
+  </td>
+  <td class="stakes-td">
+    <span class="mr-4">
+      <span data-test="transaction_count">
+        <%= @tx_count %>
+      </span> <%= gettext "Transactions sent" %>
+      <% if validator?(@address) do %>
+        <span data-test="validation_count">
+          <%= @validation_count %>
+        </span> <%= gettext "Validations" %>
+      <% end %>
     </span>
-          </div>
+  </td>
-        </div>
+</tr>
-      </div>
-    </div>
-  </div>
-</div>

apps/block_scout_web/lib/block_scout_web/templates/address/index.html.eex

@@ -5,7 +5,44 @@
 
     <%= 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-items data-selector="top-addresses-list"></div>
+	<div class="addresses-table-container">
+		<div class="stakes-table-container">
+			<table>
+				<thead>
+					<tr>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								&nbsp;
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Address
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Balance
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Percentage
+							</div>
+						</th>
+						<th class="stakes-table-th">
+							<div class="stakes-table-th-content">
+								Txn Count
+							</div>
+						</th>
+					</tr>
+				</thead>
+				<tbody data-items data-selector="top-addresses-list">
+					
+				</tbody>
+			</table>
+		</div>
+	</div>
     
     <%= render BlockScoutWeb.CommonComponentsView, "_pagination_container.html", position: "bottom", cur_page_number: "1", show_pagination_limit: true, data_next_page_button: true, data_prev_page_button: true %>
     </div>

apps/block_scout_web/priv/gettext/default.pot

@@ -877,7 +877,7 @@ msgid "Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_tile.html.eex:19
+#: lib/block_scout_web/templates/address/_tile.html.eex:31
 msgid "Transactions sent"
 msgstr ""
 
@@ -923,7 +923,7 @@ msgid "Validated Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address/_tile.html.eex:23
+#: lib/block_scout_web/templates/address/_tile.html.eex:35
 msgid "Validations"
 msgstr ""