Merge pull request #1157 from poanetwork/gsf-fix-contract-code-display

Gsf fix contract code display

apps/block_scout_web/assets/css/app.scss

@@ -47,6 +47,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/badge";
 @import "node_modules/bootstrap/scss/alert";
 
+// Code highlight
+@import "node_modules/highlight.js/styles/default";
+
 //Custom theme
 @import "theme/fonts";
 
@@ -82,6 +85,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/dropdown";
 @import "components/loading-spinner";
 @import "components/transaction-input";
+@import "components/highlight";
 
 :export {
   primary: $primary;

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

@@ -0,0 +1,19 @@
+//replace the default background color from highlightjs
+.hljs {
+  background: $gray-100;
+}
+
+.line-numbers {
+
+  [data-line-number] {
+
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      border-right: 1px solid $gray-400;
+      padding: 0 .5em;
+      margin-right: .5em;
+      color: $gray-600
+    }
+  }
+}

apps/block_scout_web/assets/js/app.js

@@ -38,6 +38,7 @@ import './lib/market_history_chart'
 import './lib/pending_transactions_toggle'
 import './lib/pretty_json'
 import './lib/reload_button'
+import './lib/smart_contract/code_highlighting'
 import './lib/smart_contract/read_only_functions'
 import './lib/smart_contract/wei_ether_converter'
 import './lib/stop_propagation'

apps/block_scout_web/assets/js/lib/smart_contract/code_highlighting.js

@@ -0,0 +1,9 @@
+import $ from 'jquery'
+import hljs from 'highlight.js'
+import hljsDefineSolidity from 'highlightjs-solidity'
+
+// only activate highlighting on pages with this selector
+if ($('[data-activate-highlight]').length > 0) {
+  hljsDefineSolidity(hljs)
+  hljs.initHighlightingOnLoad()
+}

apps/block_scout_web/assets/package.json

@@ -20,6 +20,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.1.0-4",
+    "highlight.js": "^9.13.1",
+    "highlightjs-solidity": "^1.0.6",
     "bignumber.js": "^7.2.1",
     "bootstrap": "^4.1.3",
     "chart.js": "^2.7.2",

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

@@ -40,8 +40,7 @@
             </button>
           </div>
           <div class="tile tile-muted mb-4">
-            <pre class="pre-scrollable"><code><%= text_to_html(@address.smart_contract.contract_source_code, wrapper_tag: :span, insert_brs: false) %></code>
-            </pre>
+            <pre class="pre-scrollable line-numbers" data-activate-highlight><code class="solidity"><%= for {line, number} <- contract_lines_with_index(@address.smart_contract.contract_source_code) do %><div data-line-number="<%= number %>"><%= line %></div><% end %></code></pre>
           </div>
         </section>
 
@@ -53,7 +52,7 @@
             </button>
           </div>
           <div class="tile tile-muted mb-4">
-            <pre class="pre-wrap pre-scrollable"><code><%= format_smart_contract_abi(@address.smart_contract.abi) %></code>
+            <pre class="pre-wrap pre-scrollable"><code class="nohighlight"><%= format_smart_contract_abi(@address.smart_contract.abi) %></code>
             </pre>
           </div>
         </section>
@@ -67,7 +66,7 @@
           </button>
         </div>
         <div class="tile tile-muted">
-          <pre class="pre-wrap pre-scrollable"><code><%= @address.contract_code %></code></pre>
+          <pre class="pre-wrap pre-scrollable"><code class="nohighlight"><%= @address.contract_code %></code></pre>
         </div>
       </section>
 

apps/block_scout_web/lib/block_scout_web/views/address_contract_view.ex

@@ -14,4 +14,20 @@ defmodule BlockScoutWeb.AddressContractView do
   """
   def format_optimization_text(true), do: gettext("true")
   def format_optimization_text(false), do: gettext("false")
+
+  def contract_lines_with_index(contract_source_code) do
+    contract_lines = String.split(contract_source_code, "\n")
+
+    max_digits =
+      contract_lines
+      |> Enum.count()
+      |> Integer.digits()
+      |> Enum.count()
+
+    contract_lines
+    |> Enum.with_index(1)
+    |> Enum.map(fn {value, line} ->
+      {value, String.pad_leading(to_string(line), max_digits, " ")}
+    end)
+  end
 end

apps/block_scout_web/priv/gettext/default.pot

@@ -267,7 +267,7 @@ msgid "Connection Lost, click to load newer validations"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_contract/index.html.eex:50
+#: lib/block_scout_web/templates/address_contract/index.html.eex:49
 msgid "Contract ABI"
 msgstr ""
 
@@ -300,7 +300,7 @@ msgid "Contract Name"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_contract/index.html.eex:64
+#: lib/block_scout_web/templates/address_contract/index.html.eex:63
 msgid "Contract creation code"
 msgstr ""
 
@@ -324,8 +324,8 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_contract/index.html.eex:39
-#: lib/block_scout_web/templates/address_contract/index.html.eex:52
-#: lib/block_scout_web/templates/address_contract/index.html.eex:66
+#: lib/block_scout_web/templates/address_contract/index.html.eex:51
+#: lib/block_scout_web/templates/address_contract/index.html.eex:65
 msgid "Copy Code"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -267,7 +267,7 @@ msgid "Connection Lost, click to load newer validations"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_contract/index.html.eex:50
+#: lib/block_scout_web/templates/address_contract/index.html.eex:49
 msgid "Contract ABI"
 msgstr ""
 
@@ -300,7 +300,7 @@ msgid "Contract Name"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/address_contract/index.html.eex:64
+#: lib/block_scout_web/templates/address_contract/index.html.eex:63
 msgid "Contract creation code"
 msgstr ""
 
@@ -324,8 +324,8 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_contract/index.html.eex:39
-#: lib/block_scout_web/templates/address_contract/index.html.eex:52
-#: lib/block_scout_web/templates/address_contract/index.html.eex:66
+#: lib/block_scout_web/templates/address_contract/index.html.eex:51
+#: lib/block_scout_web/templates/address_contract/index.html.eex:65
 msgid "Copy Code"
 msgstr ""
 

apps/block_scout_web/test/block_scout_web/views/address_contract_view_test.exs

@@ -14,4 +14,59 @@ defmodule BlockScoutWeb.AddressContractViewTest do
       assert AddressContractView.format_optimization_text(false) == "false"
     end
   end
+
+  describe "contract_lines_with_index/1" do
+    test "returns a list of tuples containing two strings each" do
+      code = """
+      pragma solidity >=0.4.22 <0.6.0;
+
+      struct Proposal {
+        uint voteCount;
+      }
+
+      address chairperson;
+      mapping(address => Voter) voters;
+      Proposal[] proposals;
+
+      constructor(uint8 _numProposals) public {
+        chairperson = msg.sender;
+        voters[chairperson].weight = 1;
+        proposals.length = _numProposals;
+      }
+      """
+
+      result = AddressContractView.contract_lines_with_index(code)
+
+      assert result == [
+               {"pragma solidity >=0.4.22 <0.6.0;", " 1"},
+               {"", " 2"},
+               {"struct Proposal {", " 3"},
+               {"  uint voteCount;", " 4"},
+               {"}", " 5"},
+               {"", " 6"},
+               {"address chairperson;", " 7"},
+               {"mapping(address => Voter) voters;", " 8"},
+               {"Proposal[] proposals;", " 9"},
+               {"", "10"},
+               {"constructor(uint8 _numProposals) public {", "11"},
+               {"  chairperson = msg.sender;", "12"},
+               {"  voters[chairperson].weight = 1;", "13"},
+               {"  proposals.length = _numProposals;", "14"},
+               {"}", "15"},
+               {"", "16"}
+             ]
+    end
+
+    test "returns a list of tuples and the second element always has n chars with x lines" do
+      chars = 3
+      lines = 100
+      result = AddressContractView.contract_lines_with_index(Enum.join(1..lines, "\n"))
+      assert Enum.all?(result, fn {_, number} -> String.length(number) == chars end)
+    end
+
+    test "returns a list of tuples and the first element is just a line from the original string" do
+      result = AddressContractView.contract_lines_with_index("a\nb\nc\nd\ne")
+      assert Enum.map(result, fn {line, _number} -> line end) == ["a", "b", "c", "d", "e"]
+    end
+  end
 end