Merge pull request #1739 from poanetwork/ab-highlight-decompiled-code

highlight decompiled source code

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### Features
 
+- [#1739](https://github.com/poanetwork/blockscout/pull/1739) - highlight decompiled source code
+
 ### Fixes
 
  - [#1724](https://github.com/poanetwork/blockscout/pull/1724) - Remove internal tx and token balance fetching from realtime fetcher

apps/block_scout_web/assets/css/_code.scss

@@ -6,6 +6,22 @@ pre {
   white-space: pre-wrap;
 }
 
+.pre-decompiled code {
+  white-space: pre-wrap;
+  counter-increment: line;
+}
+
+.pre-decompiled code::before {
+  content: counter(line);
+  display: inline-block;
+  width: 2.5em; /* Fixed width */
+  border-right: 1px solid #ddd;
+  padding: 0 .5em;
+  margin-right: .5em;
+  color: #888;
+  -webkit-user-select: none;
+}
+
 .pre-scrollable-shorty {
   max-height: $pre-scrollable-max-height / 7;
 }

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

@@ -21,7 +21,7 @@
             </button>
           </div>
           <div class="tile tile-muted">
-            <pre class="pre-wrap pre-scrollable"><code class="nohighlight"><%= contract.decompiled_source_code %></code></pre>
+            <pre class="pre-decompiled pre-scrollable"><%= raw(highlight_decompiled_code(contract.decompiled_source_code)) %></pre>
           </div>
         </section>
       </div>

apps/block_scout_web/lib/block_scout_web/views/address_decompiled_contract_view.ex

@@ -1,3 +1,38 @@
 defmodule BlockScoutWeb.AddressDecompiledContractView do
   use BlockScoutWeb, :view
+
+  @colors %{
+    "\e[95m" => "136, 0, 0",
+    # red
+    "\e[91m" => "236, 89, 58",
+    # gray
+    "\e[38;5;8m" => "111, 110, 111",
+    # green
+    "\e[32m" => "57, 115, 0",
+    # yellowgreen
+    "\e[93m" => "57, 115, 0",
+    # yellow
+    "\e[92m" => "119, 232, 81",
+    # purple
+    "\e[94m" => "136, 0, 0"
+  }
+
+  def highlight_decompiled_code(code) do
+    @colors
+    |> Enum.reduce(code, fn {symbol, rgb}, acc ->
+      String.replace(acc, symbol, "<span style=\"color:rgb(#{rgb})\">")
+    end)
+    |> String.replace("\e[1m", "<span style=\"font-weight:bold\">")
+    |> String.replace("»", "&raquo;")
+    |> String.replace("\e[0m", "</span>")
+    |> add_line_numbers()
+  end
+
+  defp add_line_numbers(code) do
+    code
+    |> String.split("\n")
+    |> Enum.reduce("", fn line, acc ->
+      acc <> "<code>#{line}</code>\n"
+    end)
+  end
 end

apps/block_scout_web/test/block_scout_web/views/address_decompiled_code_test.exs

@@ -0,0 +1,62 @@
+defmodule BlockScoutWeb.AddressDecompiledContractViewTest do
+  use BlockScoutWeb.ConnCase, async: true
+
+  alias BlockScoutWeb.AddressDecompiledContractView
+
+  describe "highlight_decompiled_code/1" do
+    test "generate correct html code" do
+      code = """
+        #
+        #  eveem.org 6 Feb 2019
+        #  Decompiled source of 0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875
+        #
+        #  Let's make the world open source
+        # 
+        #
+        #  I failed with these:
+        #  - unknowne77c646d(?)
+        #  - transferFromWithData(address _from, address _to, uint256 _value, bytes _data)
+        #  All the rest is below.
+        #
+
+
+        #  Storage definitions and getters
+
+        def storage:
+          allowance is uint256 => uint256 # mask(256, 0) at storage #2
+          stor4 is uint256 => uint8 # mask(8, 0) at storage #4
+
+        def allowance(address _owner, address _spender) payable: 
+          require (calldata.size - 4) >= 64
+          return allowance[sha3(((320 - 1) and (320 - 1) and _owner), 1), ((320 - 1) and _spender and (320 - 1))]
+
+
+        #
+        #  Regular functions - see Tutorial for understanding quirks of the code
+        #
+
+
+        # folder failed in this function - may be terribly long, sorry
+        def unknownc47d033b(?) payable: 
+          if (calldata.size - 4) < 32:
+              revert
+          else:
+              if not (320 - 1) or not cd[4]:
+                  revert
+              else:
+                  mem[0] = (320 - 1) and (320 - 1) and cd[4]
+                  mem[32] = 4
+                  mem[96] = bool(stor4[((320 - 1) and (320 - 1) and cd[4])])
+                  return bool(stor4[((320 - 1) and (320 - 1) and cd[4])])
+
+        def _fallback() payable: # default function
+          revert
+      """
+
+      result = AddressDecompiledContractView.highlight_decompiled_code(code)
+
+      assert result ==
+               "<code>  <span style=\"color:rgb(111, 110, 111)\">#</code>\n<code>  #  eveem.org 6 Feb 2019</code>\n<code>  #  Decompiled source of </span>0x00Bd9e214FAb74d6fC21bf1aF34261765f57e875<span style=\"color:rgb(111, 110, 111)\"></code>\n<code>  #</code>\n<code>  #  Let's make the world open source</code>\n<code>  # </span></code>\n<code>  <span style=\"color:rgb(111, 110, 111)\">#</code>\n<code>  #  I failed with these:</code>\n<code>  </span><span style=\"color:rgb(111, 110, 111)\">#  - </span><span style=\"color:rgb(236, 89, 58)\">unknowne77c646d(?)</span><span style=\"color:rgb(111, 110, 111)\"></code>\n<code>  </span><span style=\"color:rgb(111, 110, 111)\">#  - </span><span style=\"color:rgb(236, 89, 58)\">transferFromWithData(address _from, address _to, uint256 _value, bytes _data)</span><span style=\"color:rgb(111, 110, 111)\"></code>\n<code>  #  All the rest is below.</code>\n<code>  #</span></code>\n<code></code>\n<code></code>\n<code>  <span style=\"color:rgb(111, 110, 111)\">#  Storage definitions and getters</span></code>\n<code></code>\n<code>  <span style=\"color:rgb(57, 115, 0)\">def</span> storage:</code>\n<code>    <span style=\"color:rgb(57, 115, 0)\">allowance</span> is uint256 => uint256 <span style=\"color:rgb(111, 110, 111)\"># mask(256, 0) at storage #2</span></code>\n<code>    <span style=\"color:rgb(57, 115, 0)\">stor4</span> is uint256 => uint8 <span style=\"color:rgb(111, 110, 111)\"># mask(8, 0) at storage #4</span></code>\n<code></code>\n<code>  <span style=\"color:rgb(136, 0, 0)\">def </span>allowance(address <span style=\"color:rgb(57, 115, 0)\">_owner</span>, address <span style=\"color:rgb(57, 115, 0)\">_spender</span>) <span style=\"color:rgb(136, 0, 0)\">payable</span>: <span style=\"color:rgb(111, 110, 111)\"></span></code>\n<code>    require (calldata.size - 4)<span style=\"font-weight:bold\"> >= </span>64</code>\n<code>    return <span style=\"color:rgb(57, 115, 0)\">allowance</span><span style=\"color:rgb(57, 115, 0)\">[</span>sha3(((320 - 1)<span style=\"font-weight:bold\"> and </span>(320 - 1)<span style=\"font-weight:bold\"> and </span><span style=\"color:rgb(57, 115, 0)\">_owner</span>), 1), ((320 - 1)<span style=\"font-weight:bold\"> and </span><span style=\"color:rgb(57, 115, 0)\">_spender</span><span style=\"font-weight:bold\"> and </span>(320 - 1))<span style=\"color:rgb(57, 115, 0)\">]</span></code>\n<code></code>\n<code></code>\n<code>  <span style=\"color:rgb(111, 110, 111)\">#</code>\n<code>  #  Regular functions - see Tutorial for understanding quirks of the code</code>\n<code>  #</span></code>\n<code></code>\n<code></code>\n<code>  <span style=\"color:rgb(111, 110, 111)\"># folder failed in this function - may be terribly long, sorry</span></code>\n<code>  <span style=\"color:rgb(136, 0, 0)\">def </span>unknownc47d033b(?) <span style=\"color:rgb(136, 0, 0)\">payable</span>: <span style=\"color:rgb(111, 110, 111)\"></span></code>\n<code>    if (calldata.size - 4)<span style=\"font-weight:bold\"> < </span>32:</code>\n<code>        revert</code>\n<code>    else:</code>\n<code>        if not (320 - 1)<span style=\"font-weight:bold\"> or </span>not cd[4]:</code>\n<code>            revert</code>\n<code>        else:</code>\n<code>            <span style=\"color:rgb(136, 0, 0)\">mem[</span>0<span style=\"color:rgb(136, 0, 0)\">]</span> = (320 - 1)<span style=\"font-weight:bold\"> and </span>(320 - 1)<span style=\"font-weight:bold\"> and </span>cd[4]</code>\n<code>            <span style=\"color:rgb(136, 0, 0)\">mem[</span>32<span style=\"color:rgb(136, 0, 0)\">]</span> = 4</code>\n<code>            <span style=\"color:rgb(136, 0, 0)\">mem[</span>96<span style=\"color:rgb(136, 0, 0)\">]</span> = bool(<span style=\"color:rgb(57, 115, 0)\">stor4</span><span style=\"color:rgb(57, 115, 0)\">[</span>((320 - 1)<span style=\"font-weight:bold\"> and </span>(320 - 1)<span style=\"font-weight:bold\"> and </span>cd[4])<span style=\"color:rgb(57, 115, 0)\">]</span>)</code>\n<code>            return bool(<span style=\"color:rgb(57, 115, 0)\">stor4</span><span style=\"color:rgb(57, 115, 0)\">[</span>((320 - 1)<span style=\"font-weight:bold\"> and </span>(320 - 1)<span style=\"font-weight:bold\"> and </span>cd[4])<span style=\"color:rgb(57, 115, 0)\">]</span>)</code>\n<code></code>\n<code>  <span style=\"color:rgb(136, 0, 0)\">def </span>_fallback() <span style=\"color:rgb(136, 0, 0)\">payable</span>: <span style=\"color:rgb(111, 110, 111)\"># default function</span></code>\n<code>    revert</code>\n<code></code>\n"
+    end
+  end
+end