Merge pull request #2591 from poanetwork/fix-api-try-out

Fix url error in API page

CHANGELOG.md

@@ -15,6 +15,7 @@
 - [#2616](https://github.com/poanetwork/blockscout/pull/2616) - deduplicate coin history records by delta
 - [#2613](https://github.com/poanetwork/blockscout/pull/2613) - fix getminedblocks rpc endpoint
 - [#2592](https://github.com/poanetwork/blockscout/pull/2592) - process new metadata format for whisper
+- [#2591](https://github.com/poanetwork/blockscout/pull/2591) - Fix url error in API page
 - [#2572](https://github.com/poanetwork/blockscout/pull/2572) - Ease non-critical css
 - [#2570](https://github.com/poanetwork/blockscout/pull/2570) - Network icons preload
 - [#2569](https://github.com/poanetwork/blockscout/pull/2569) - do not fetch emission rewards for transactions csv exporter

apps/block_scout_web/assets/js/lib/try_api.js

@@ -55,6 +55,10 @@ function handleSuccess (query, xhr, clickedButton) {
   clickedButton.prop('disabled', false)
 }
 
+function dropDomain (url) {
+  return new URL(url).pathname
+}
+
 // Show 'Try it out' UI for a module/action.
 $('button[data-selector*="btn-try-api"]').click(event => {
   const clickedButton = $(event.target)
@@ -124,7 +128,7 @@ $('button[data-try-api-ui-button-type="execute"]').click(event => {
   }
 
   $.ajax({
-    url: `/api${query}`,
+    url: dropDomain(composeRequestUrl(query)),
     success: (_data, _status, xhr) => {
       handleSuccess(query, xhr, clickedButton)
     },

apps/block_scout_web/assets/js/lib/try_eth_api.js

@@ -1,7 +1,8 @@
 import $ from 'jquery'
 
 function composeCurlCommand (data) {
-  return `curl -H "content-type: application/json" -X POST --data '${JSON.stringify(data)}'`
+  const url = $('[data-endpoint-url]').attr('data-endpoint-url')
+  return `curl -H "content-type: application/json" -X POST --data '${JSON.stringify(data)}' ${url}`
 }
 
 function handleResponse (data, xhr, clickedButton) {
@@ -43,6 +44,10 @@ function parseInput (input) {
   }
 }
 
+function dropDomain (url) {
+  return new URL(url).pathname
+}
+
 $('button[data-try-eth-api-ui-button-type="execute"]').click(event => {
   const clickedButton = $(event.target)
   const module = clickedButton.attr('data-module')
@@ -50,7 +55,6 @@ $('button[data-try-eth-api-ui-button-type="execute"]').click(event => {
   const inputs = $(`input[data-selector="${module}-${action}-try-api-ui"]`)
   const params = $.map(inputs, parseInput)
   const formData = wrapJsonRpc(action, params)
-  console.log(formData)
   const loadingText = '<span class="loading-spinner-small mr-2"><span class="loading-spinner-block-1"></span><span class="loading-spinner-block-2"></span></span> Loading...'
 
   clickedButton.prop('disabled', true)
@@ -60,8 +64,10 @@ $('button[data-try-eth-api-ui-button-type="execute"]').click(event => {
     clickedButton.html(loadingText)
   }
 
+  const url = $('[data-endpoint-url]').attr('data-endpoint-url')
+
   $.ajax({
-    url: '/api/eth_rpc',
+    url: dropDomain(url),
     type: 'POST',
     data: JSON.stringify(formData),
     dataType: 'json',

apps/block_scout_web/lib/block_scout_web/templates/api_docs/_eth_rpc_item.html.eex

@@ -4,9 +4,9 @@
       <h3 class="api-doc-list-item-title"><%= @action %></h3>
       <p class="api-doc-list-item-contents"><%= raw @info.notes %></p>
       <span class="api-doc-list-item-query api-text-monospace api-text-monospace-background btn" 
-        data-clipboard-text="curl -X POST --data '{&quot;id&quot;:0,&quot;jsonrpc&quot;:&quot;2.0&quot;,&quot;method&quot;: &quot;<%= @action %>&quot;, params: []}'"
+        data-clipboard-text="curl -X POST --data '{&quot;id&quot;:0,&quot;jsonrpc&quot;:&quot;2.0&quot;,&quot;method&quot;: &quot;<%= @action %>&quot;,&quot;params&quot;: []}'"
       >
-        curl -X POST --data '{"id":0,"jsonrpc":"2.0","method": "<%= @action %>", params: []}'
+        curl -X POST --data '{"id":0,"jsonrpc":"2.0","method": "<%= @action %>", "params": []}'
       </span>
       <p class="api-doc-list-item-text">
         <div class="tile tile-muted p-1">

apps/block_scout_web/lib/block_scout_web/views/api_docs_view.ex

@@ -1,7 +1,7 @@
 defmodule BlockScoutWeb.APIDocsView do
   use BlockScoutWeb, :view
 
-  alias BlockScoutWeb.{Endpoint, LayoutView}
+  alias BlockScoutWeb.LayoutView
 
   def action_tile_id(module, action) do
     "#{module}-#{action}"
@@ -34,30 +34,27 @@ defmodule BlockScoutWeb.APIDocsView do
     end)
   end
 
-  def blockscout_url do
+  defp blockscout_url do
     url_params = Application.get_env(:block_scout_web, BlockScoutWeb.Endpoint)[:url]
     host = url_params[:host]
     path = url_params[:path]
-    scheme = url_params[:scheme]
+    scheme = Keyword.get(url_params, :scheme, "http")
 
     if host != "localhost" do
-      scheme <> "://" <> host <> path
+      "#{scheme}://#{host}#{path}"
     else
-      Endpoint.url()
+      port = Application.get_env(:block_scout_web, BlockScoutWeb.Endpoint)[:http][:port]
+      "#{scheme}://#{host}:#{to_string(port)}"
     end
   end
 
   def api_url do
-    handle_slash("api")
+    blockscout_url()
+    |> Path.join("api")
   end
 
   def eth_rpc_api_url do
-    handle_slash("api/eth_rpc")
-  end
-
-  defp handle_slash(path) do
-    base_url = blockscout_url()
-
-    Path.join(base_url, path)
+    blockscout_url()
+    |> Path.join("api/eth_rpc")
   end
 end

apps/block_scout_web/test/block_scout_web/views/api_docs_view_test.exs

@@ -3,32 +3,6 @@ defmodule BlockScoutWeb.ApiDocsViewTest do
 
   alias BlockScoutWeb.APIDocsView
 
-  describe "blockscout_url/0" do
-    setup do
-      original = Application.get_env(:block_scout_web, BlockScoutWeb.Endpoint)
-
-      on_exit(fn -> Application.put_env(:block_scout_web, BlockScoutWeb.Endpoint, original) end)
-
-      :ok
-    end
-
-    test "returns url with scheme and host without port" do
-      Application.put_env(:block_scout_web, BlockScoutWeb.Endpoint,
-        url: [scheme: "https", host: "blockscout.com", port: 9999, path: "/"]
-      )
-
-      assert APIDocsView.blockscout_url() == "https://blockscout.com/"
-    end
-
-    test "returns url with scheme and host with path" do
-      Application.put_env(:block_scout_web, BlockScoutWeb.Endpoint,
-        url: [scheme: "https", host: "blockscout.com", port: 9999, path: "/chain/dog"]
-      )
-
-      assert APIDocsView.blockscout_url() == "https://blockscout.com/chain/dog"
-    end
-  end
-
   describe "api_url/1" do
     setup do
       original = Application.get_env(:block_scout_web, BlockScoutWeb.Endpoint)
@@ -53,6 +27,15 @@ defmodule BlockScoutWeb.ApiDocsViewTest do
 
       assert APIDocsView.api_url() == "https://blockscout.com/api"
     end
+
+    test "localhost return with port" do
+      Application.put_env(:block_scout_web, BlockScoutWeb.Endpoint,
+        url: [scheme: "http", host: "localhost"],
+        http: [port: 9999]
+      )
+
+      assert APIDocsView.api_url() == "http://localhost:9999/api"
+    end
   end
 
   describe "eth_rpc_api_url/1" do
@@ -79,5 +62,14 @@ defmodule BlockScoutWeb.ApiDocsViewTest do
 
       assert APIDocsView.eth_rpc_api_url() == "https://blockscout.com/api/eth_rpc"
     end
+
+    test "localhost return with port" do
+      Application.put_env(:block_scout_web, BlockScoutWeb.Endpoint,
+        url: [scheme: "http", host: "localhost"],
+        http: [port: 9999]
+      )
+
+      assert APIDocsView.eth_rpc_api_url() == "http://localhost:9999/api/eth_rpc"
+    end
   end
 end