Add vertical scroller for tx actions area (draft version)

apps/block_scout_web/assets/js/lib/custom_scrollbar.js

@@ -0,0 +1,19 @@
+import $ from 'jquery'
+import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min'
+
+$(function() {
+  $(".mCustomScrollbar").mCustomScrollbar({
+    callbacks: {
+      onOverflowY: () => {
+        $("#txActionsTitle .note").css("display", "block");
+      },
+      onOverflowYNone: () => {
+        $("#txActionsTitle .note").css("display", "none");
+      }
+    },
+    theme: "dark",
+    autoHideScrollbar: true,
+    scrollButtons: {enable: false},
+    scrollbarPosition: "outside"
+  });
+});

apps/block_scout_web/assets/package-lock.json

@@ -44,6 +44,7 @@
         "lodash.rangeright": "^4.2.0",
         "lodash.reduce": "^4.6.0",
         "luxon": "^3.1.1",
+        "malihu-custom-scrollbar-plugin": "3.1.5",
         "moment": "^2.29.4",
         "nanomorph": "^5.4.0",
         "numeral": "^2.0.6",
@@ -98,10 +99,11 @@
       }
     },
     "../../../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/@ampproject/remapping": {
       "version": "2.2.0",
@@ -11890,6 +11892,11 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
       "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
     },
+    "node_modules/jquery-mousewheel": {
+      "version": "3.1.13",
+      "resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
+      "integrity": "sha512-GXhSjfOPyDemM005YCEHvzrEALhKDIswtxSHSR2e4K/suHVJKJxxRCGz3skPjNxjJjQa9AVSGGlYjv1M3VLIPg=="
+    },
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -12587,6 +12594,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/malihu-custom-scrollbar-plugin": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/malihu-custom-scrollbar-plugin/-/malihu-custom-scrollbar-plugin-3.1.5.tgz",
+      "integrity": "sha512-lwW3LgI+CNDMPnP4ED2la6oYxWMkCXlnhex+s2wuOLhFDFGnGmQuTQVdRK9bvDLpxs10sGlfErVufJy9ztfgJQ==",
+      "dependencies": {
+        "jquery-mousewheel": ">=3.0.6"
+      }
+    },
     "node_modules/map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
@@ -27464,6 +27479,11 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
       "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
     },
+    "jquery-mousewheel": {
+      "version": "3.1.13",
+      "resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
+      "integrity": "sha512-GXhSjfOPyDemM005YCEHvzrEALhKDIswtxSHSR2e4K/suHVJKJxxRCGz3skPjNxjJjQa9AVSGGlYjv1M3VLIPg=="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -28063,6 +28083,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "malihu-custom-scrollbar-plugin": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/malihu-custom-scrollbar-plugin/-/malihu-custom-scrollbar-plugin-3.1.5.tgz",
+      "integrity": "sha512-lwW3LgI+CNDMPnP4ED2la6oYxWMkCXlnhex+s2wuOLhFDFGnGmQuTQVdRK9bvDLpxs10sGlfErVufJy9ztfgJQ==",
+      "requires": {
+        "jquery-mousewheel": ">=3.0.6"
+      }
+    },
     "map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",

apps/block_scout_web/assets/package.json

@@ -56,6 +56,7 @@
     "lodash.rangeright": "^4.2.0",
     "lodash.reduce": "^4.6.0",
     "luxon": "^3.1.1",
+    "malihu-custom-scrollbar-plugin": "3.1.5",
     "moment": "^2.29.4",
     "nanomorph": "^5.4.0",
     "numeral": "^2.0.6",

apps/block_scout_web/assets/webpack.config.js

@@ -68,6 +68,8 @@ const appJs =
       'text-ad': './js/lib/text_ad.js',
       'banner': './js/lib/banner.js',
       'autocomplete': './js/lib/autocomplete.js',
+      'custom-scrollbar': './js/lib/custom_scrollbar.js',
+      'custom-scrollbar-styles': './css/custom-scrollbar.scss',
       'search-results': './js/pages/search-results/search.js',
       'token-overview': './js/pages/token/overview.js',
       'export-csv': './css/export-csv.scss',

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -11,6 +11,10 @@
         <link rel="preload" href="<%= static_path(@conn, "/js/chain.js") %>" as="script">
         <link rel="preload" href="<%= static_path(@conn, "/js/chart-loader.js") %>" as="script">
         <link rel="preload" href="<%= static_path(@conn, "/js/token-transfers-toggle.js") %>" as="script">
+      <% Elixir.BlockScoutWeb.TransactionView -> %>
+        <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
+        <link rel="stylesheet" href="<%= static_path(@conn, "/css/custom-scrollbar-styles.css") %>">
+        <link rel="preload" href="<%= static_path(@conn, "/js/custom-scrollbar.js") %>" as="script">
       <% _ -> %>
         <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
     <% end %>
@@ -297,6 +301,9 @@
       <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/chart-loader.js") %>"></script>
       <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/token-transfers-toggle.js") %>"></script>
     <% end %>
+    <%= if @view_module == Elixir.BlockScoutWeb.TransactionView do %>
+      <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/custom-scrollbar.js") %>"></script>
+    <% end %>
     <script defer src="<%= static_path(@conn, "/js/autocomplete.js") %>"></script>
     <%= if @view_module in [Elixir.BlockScoutWeb.AddressContractVerificationView, Elixir.BlockScoutWeb.AddressContractVerificationVyperView, Elixir.BlockScoutWeb.AddressContractVerificationViaFlattenedCodeView, Elixir.BlockScoutWeb.AddressContractVerificationViaMultiPartFilesView, Elixir.BlockScoutWeb.AddressContractVerificationViaJsonView, Elixir.BlockScoutWeb.AddressContractVerificationViaStandardJsonInputView] do %>
       <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/verification-form.js") %>"></script>

apps/block_scout_web/lib/block_scout_web/templates/transaction/_actions.html.eex

@@ -1,5 +1,6 @@
 <%= if @action.protocol == :uniswap_v3 do %>
   <%= if @action.type == :mint_nft do %>
+    <div class="<%= if @isLast, do: "lastItem", else: "" %>">
       <span class="actions-item">
         <i class="fa fa-caret-right"></i>
 
@@ -44,8 +45,10 @@
         </span>
         <br />
       <% end %>
+    </div>
   <% end %>
   <%= if Enum.member?([:mint, :burn, :collect, :swap], @action.type) do %>
+    <div class="<%= if @isLast, do: "lastItem", else: "" %>">
       <span class="actions-item">
         <% amount0 = Map.get(@action.data, "amount0") %>
         <% amount0 = BlockScoutWeb.CldrHelper.Number.to_string!(Decimal.new(amount0), format: "#,##0.##################") %>
@@ -85,5 +88,6 @@
         <% end %>
       </span>
       <br />
+    </div>
   <% end %>
 <% end %>

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -201,9 +201,15 @@
                   text: gettext("Highlighted events of the transaction.") %>
                 <%= gettext "Transaction Action" %></dt>
               <dd class="col-sm-9 col-lg-10 actions-list-mobile-container">
-                <%= for action <- transaction_actions do %>
-                  <%= render BlockScoutWeb.TransactionView, "_actions.html", Map.put(assigns, :action, action) %>
+                <div class="mCustomScrollbar" style="max-height:100px;width:90%">
+                  <% transaction_actions_indexed = Enum.with_index(transaction_actions) %>
+                  <% transaction_actions_length = Enum.count(transaction_actions) %>
+                  <%= for {action, i} <- transaction_actions_indexed do %>
+                    <% action_assigns = Map.put(assigns, :action, action) %>
+                    <% action_assigns = Map.put(action_assigns, :isLast, (i == transaction_actions_length - 1)) %>
+                    <%= render BlockScoutWeb.TransactionView, "_actions.html", action_assigns %>
                   <% end %>
+                </div>
               </dd>
             </dl>
           <% end %>