Net drop down (#54)

* Modify RPC and assigns to use a certain network * Update search-bar to use set network * Redirect on missing route * Add config env variables * Update cache warmer for multiple networks * Update some more code for network changes * Remove unused plug * Remove default argument, fix cache bug * Update code to use new rpc api and network assign * Remove IO.inspect * Mix format * Format * Remove warnigns * Format * Go back to old env variable * Temporarily comment testnet env variables * Format * Mix format * Fix test * Fix some routes * network dropdown (#56) * Format + Restore old config * Warnings * Fix search bar * Warnings * Add scope to default forward * Add testnet and testnet_2 env vars to CI * Add new env vars to deploy --------- Co-authored-by: An <[email protected]> Co-authored-by: Klaus Lungwitz <[email protected]>
lambdaclass · Jul 27, 2023 · ad59f37 · ad59f37
1 parent 97fdd0f
commit ad59f37
Show file tree

Hide file tree

Showing 34 changed files with 366 additions and 184 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -16,6 +16,8 @@ jobs:
   build:
     env: 
       RPC_API_HOST: ${{ secrets.RPC_API_HOST }}
+      TESTNET_RPC_API_HOST: ${{ secrets.TESTNET_RPC_API_HOST }}
+      TESTNET_2_RPC_API_HOST: ${{ secrets.TESTNET_2_RPC_API_HOST }}
     name: Build and test
     runs-on: ubuntu-latest
     services:

diff --git a/.github/workflows/deploy-testing.yaml b/.github/workflows/deploy-testing.yaml
@@ -38,6 +38,8 @@ jobs:
         PHX_HOST: ${{ vars.PHX_HOST }}
         PHX_SERVER: ${{ vars.PHX_SERVER }}
         RPC_API_HOST: ${{ secrets.RPC_API_HOST }}
+        TESTNET_RPC_API_HOST: ${{ secrets.TESTNET_RPC_API_HOST }}
+        TESTNET_2_RPC_API_HOST: ${{ secrets.TESTNET_2_RPC_API_HOST }}
         AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
         AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
         AWS_REGION: ${{ vars.AWS_REGION }}

diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,5 @@ npm-debug.log
 # Ignore .envrc
 .envrc
 
-.volumes
+# Ignore postgres files
+.volumes 
diff --git a/ansible/playbooks/deployment.yaml b/ansible/playbooks/deployment.yaml
@@ -68,6 +68,8 @@
       secret_key_base: "{{ lookup('ansible.builtin.env', 'SECRET_KEY_BASE') }}"
       database_url: "{{ lookup('ansible.builtin.env', 'DATABASE_URL') }}"
       rpc_api_host: "{{ lookup('ansible.builtin.env', 'RPC_API_HOST') }}"
+      testnet_rpc_api_host: "{{ lookup('ansible.builtin.env', 'TESTNET_RPC_API_HOST') }}"
+      testnet_2_rpc_api_host: "{{ lookup('ansible.builtin.env', 'TESTNET_2_RPC_API_HOST') }}"
       aws_access_key_id: "{{ lookup('ansible.builtin.env', 'AWS_ACCESS_KEY_ID') }}"
       aws_secret_access_key: "{{ lookup('ansible.builtin.env', 'AWS_SECRET_ACCESS_KEY') }}"
       aws_region: "{{ lookup('ansible.builtin.env', 'AWS_REGION') }}"

diff --git a/ansible/playbooks/templates/.env.j2 b/ansible/playbooks/templates/.env.j2
@@ -3,6 +3,8 @@ PHX_SERVER=true
 SECRET_KEY_BASE={{ secret_key_base }}
 DATABASE_URL={{ database_url }}
 RPC_API_HOST={{ rpc_api_host }}
+TESTNET_RPC_API_HOST={{ testnet_rpc_api_host }}
+TESTNET_2_RPC_API_HOST={{ testnet_2_rpc_api_host }}
 AWS_ACCESS_KEY_ID={{ aws_access_key_id }}
 AWS_SECRET_ACCESS_KEY={{ aws_secret_access_key }}
 AWS_REGION={{ aws_region }}

diff --git a/assets/css/app.css b/assets/css/app.css
@@ -157,9 +157,9 @@ input {
 }
 
 /* Dropdown */
-.options {
+main .options {
   @apply bg-black/20 lg:bg-transparent lg:flex lg:flex-row mt-2 lg:mt-0 mb-10 lg:mb-0;
 }
-.option {
+main .option {
   @apply border-b border-b-gray-800 py-3 px-3 transition-all duration-300;
 }
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -276,9 +276,24 @@ tippy("#tps", {
 //
 Hooks.Network = {
   mounted() {
-    const btn = document.querySelector(".dropdown");
-    const options = document.querySelector(".options");
-    const listItems = document.querySelectorAll(".option");
+    const btn = document.querySelector("#nav-dropdown");
+    const options = document.querySelector("nav #options");
+    const listItems = document.querySelectorAll("nav .option");
+    btn.addEventListener("click", () => {
+      options.classList.toggle("hidden");
+    });
+    listItems.forEach((item) => {
+      item.addEventListener("click", () => {
+        options.classList.add("hidden");
+      });
+    });
+  },
+};
+Hooks.Dropdown = {
+  mounted() {
+    const btn = document.querySelector("main .dropdown");
+    const options = document.querySelector("main .options");
+    const listItems = options.querySelectorAll("main .option");
     btn.addEventListener("click", () => {
       options.classList.toggle("hidden");
     });

diff --git a/config/runtime.exs b/config/runtime.exs
@@ -26,6 +26,25 @@ rpc_host =
     environment variable RPC_API_HOST is missing.
     """
 
+testnet_rpc_host =
+  System.get_env("TESTNET_RPC_API_HOST") ||
+    raise """
+    environment variable for testnet is missing.
+    """
+
+testnet_2_rpc_host =
+  System.get_env("TESTNET_2_RPC_API_HOST") ||
+    raise """
+    environment variable for testnet 2 is missing.
+    """
+
+config :starknet_explorer,
+  rpc_host: rpc_host,
+  testnet_host: testnet_rpc_host,
+  testnet_2_host: testnet_2_rpc_host
+
+config :starknet_explorer, rpc_host: rpc_host
+
 config :starknet_explorer,
   rpc_host: rpc_host,
   s3_bucket_name: "kraken-proofs"

diff --git a/lib/cache_request_warmer.ex b/lib/cache_request_warmer.ex
@@ -1,24 +1,28 @@
 defmodule StarknetExplorer.Cache.BlockWarmer do
+  require Logger
   use Cachex.Warmer
   alias StarknetExplorer.Rpc
 
   def interval do
     :timer.seconds(60)
   end
 
-  def execute(_) do
+  def execute(%{network: network}) when network in [:mainnet, :testnet, :testnet2] do
+    Logger.info("Warming cache for #{network}")
+
     # Fetch the highest block number,
     # invalidate cache so that we're sure that
     # we're using fresh data.
     {:ok, latest_block = %{"block_number" => latest_block_num, "block_hash" => latest_hash}} =
-      Rpc.get_latest_block(:no_cache)
+      Rpc.get_latest_block_no_cache(network)
 
     # Request blocks that fall in the range
     # between latest and 20 behind, because that's
     # what we mostly show on the home page.
     block_requests =
       Enum.map(max(latest_block_num - 20, 0)..max(latest_block_num - 1, 0), fn block_num ->
-        {:ok, block = %{"transactions" => transactions}} = Rpc.get_block_by_number(block_num)
+        {:ok, block = %{"transactions" => transactions}} =
+          Rpc.get_block_by_number(block_num, network)
 
         tx_by_hash =
           transactions

diff --git a/lib/starknet_explorer/application.ex b/lib/starknet_explorer/application.ex
@@ -8,6 +8,10 @@ defmodule StarknetExplorer.Application do
 
   @impl true
   def start(_type, _args) do
+    cache_child_specs =
+      [:mainnet, :testnet, :testnet2]
+      |> Enum.flat_map(fn net -> cache_supervisor_spec(net) end)
+
     children =
       [
         # Start the Telemetry supervisor
@@ -19,36 +23,11 @@ defmodule StarknetExplorer.Application do
         # Start Finch
         {Finch, name: StarknetExplorer.Finch},
         # Start the Endpoint (http/https)
-        StarknetExplorerWeb.Endpoint,
-        # Active block cache
-        Supervisor.child_spec(
-          Cachex.child_spec(
-            name: :block_cache,
-            limit: 1000,
-            id: :block_cache,
-            warmers: [
-              warmer(module: StarknetExplorer.Cache.BlockWarmer, state: %{})
-            ]
-          ),
-          id: :block_cache
-        ),
-        Supervisor.child_spec(
-          Cachex.child_spec(name: :tx_cache, limit: 5000, id: :tx_cache),
-          id: :tx_cache
-        ),
-        # Passive cache for general requests
-        Supervisor.child_spec(
-          Cachex.child_spec(
-            name: :request_cache,
-            limit: 5000,
-            id: :request_cache,
-            policy: Cachex.Policy.LRW
-          ),
-          id: :request_cache
-        )
+        StarknetExplorerWeb.Endpoint
         # Start a worker by calling: StarknetExplorer.Worker.start_link(arg)
         # {StarknetExplorer.Worker, arg}
       ] ++
+        cache_child_specs ++
         if_prod do
           # TODO: Uncomment when it's ready
           # [StarknetExplorer.BlockFetcher]
@@ -70,4 +49,40 @@ defmodule StarknetExplorer.Application do
     StarknetExplorerWeb.Endpoint.config_change(changed, removed)
     :ok
   end
+
+  defp cache_supervisor_spec(network) when network in [:mainnet, :testnet, :testnet2] do
+    # Active block cache
+    active_block_cache_spec =
+      Supervisor.child_spec(
+        Cachex.child_spec(
+          name: :"#{network}_block_cache",
+          limit: 1000,
+          id: :"#{network}_block_cache",
+          warmers: [
+            warmer(module: StarknetExplorer.Cache.BlockWarmer, state: %{network: network})
+          ]
+        ),
+        id: :"#{network}_block_cache"
+      )
+
+    tx_cache_spec =
+      Supervisor.child_spec(
+        Cachex.child_spec(name: :"#{network}_tx_cache", limit: 5000, id: :"#{network}_tx_cache"),
+        id: :"#{network}_tx_cache"
+      )
+
+    # Passive cache for general requests
+    request_cache =
+      Supervisor.child_spec(
+        Cachex.child_spec(
+          name: :"#{network}_request_cache",
+          limit: 5000,
+          id: :"#{network}_request_cache",
+          policy: Cachex.Policy.LRW
+        ),
+        id: :"#{network}_request_cache"
+      )
+
+    [active_block_cache_spec, tx_cache_spec, request_cache]
+  end
 end
diff --git a/lib/starknet_explorer/block_fetcher.ex b/lib/starknet_explorer/block_fetcher.ex
@@ -38,7 +38,7 @@ defmodule StarknetExplorer.BlockFetcher do
           receipts =
             transactions
             |> Map.new(fn %{"transaction_hash" => tx_hash} ->
-              {:ok, receipt} = Rpc.get_transaction_receipt(tx_hash)
+              {:ok, receipt} = Rpc.get_transaction_receipt(tx_hash, :mainnet)
               {tx_hash, receipt}
             end)
 
@@ -60,7 +60,7 @@ defmodule StarknetExplorer.BlockFetcher do
   end
 
   defp fetch_block_height() do
-    case Rpc.get_block_height() do
+    case Rpc.get_block_height(:mainnet) do
       {:ok, height} ->
         height
 
@@ -70,7 +70,7 @@ defmodule StarknetExplorer.BlockFetcher do
   end
 
   defp fetch_block(number) when is_integer(number) do
-    case Rpc.get_block_by_number(number) do
+    case Rpc.get_block_by_number(number, :mainnet) do
       {:ok, block} ->
         {:ok, block}
 

diff --git a/lib/starknet_explorer_web/components/layouts/root.html.heex b/lib/starknet_explorer_web/components/layouts/root.html.heex
@@ -37,7 +37,7 @@
   <body class="bg-se-black text-white relative">
     <header class="z-50 absolute top-0 left-0">
       <nav class="w-screen flex items-center justify-between p-5 lg:px-16">
-        <a href="/" class="z-50 text-xl">
+        <a href={~p"/#{@conn.assigns.network}/"} class="z-50 text-xl">
           <span class="uppercase">Madara</span>
           <span class="font-semibold">Explorer</span>
         </a>
@@ -47,51 +47,87 @@
           class="pointer-events-none lg:pointer-events-auto absolute lg:relative top-0 left-0 w-screen lg:w-auto h-screen lg:h-auto transition-all duration-300 opacity-0 lg:opacity-100 flex flex-col lg:flex-row justify-start items-streach gap-7 lg:gap-10 bg-[#111118] my-16 lg:my-0 py-10 lg:py-0 border-t lg:border-t-0 px-5 lg:px-0"
         >
           <a
-            href="/blocks"
+            href={~p"/#{@conn.assigns.network}/blocks"}
             class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
           >
             <img class="lg:hidden" src={~p"/images/box.svg"} /> <span>Blocks</span>
           </a>
           <a
-            href="/transactions"
+            href={~p"/#{@conn.assigns.network}/transactions"}
             class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
           >
             <img class="lg:hidden" src={~p"/images/corner-up-right.svg"} />
             <span>Transactions</span>
           </a>
           <a
-            href="/classes"
+            href={~p"/#{@conn.assigns.network}/classes"}
             class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
           >
             <img class="lg:hidden" src={~p"/images/code.svg"} />
             <span>Classes</span>
           </a>
           <a
-            href="/messages"
+            href={~p"/#{@conn.assigns.network}/messages"}
             class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
           >
             <img class="lg:hidden" src={~p"/images/message-square.svg"} />
             <span>Messages</span>
           </a>
           <a
-            href="/contracts"
+            href={~p"/#{@conn.assigns.network}/contracts"}
             class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
           >
             <img class="lg:hidden" src={~p"/images/file.svg"} />
             <span>Contracts</span>
           </a>
           <a
-            href="/events"
+            href={~p"/#{@conn.assigns.network}/events"}
             class="hover:text-se-blue transition-all duration-300 flex gap-2 items-center"
           >
             <img class="lg:hidden" src={~p"/images/calendar.svg"} />
             <span>Events</span>
           </a>
-          <div class="pointer-events-none rounded-md bg-container flex gap-2 items-center px-4 py-2 relative w-fit">
-            <span class="animate-ping bg-green-500 rounded-full w-2 h-2"></span>
-            <span class="absolute top-1/2 left-5 transform -translate-x-1/2 -translate-y-1/2 opacity-50 bg-green-500 rounded-full w-2 h-2">
-            </span>
-            <span id="networkSelected" class="block truncate">Mainnet</span>
+          <div class="relative w-fit">
+            <div
+              id="nav-dropdown"
+              phx-hook="Network"
+              class="dropdown cursor-pointer rounded-md bg-container flex gap-2 items-center px-4 py-2 relative w-fit"
+            >
+              <span class="animate-ping bg-green-500 rounded-full w-2 h-2"></span>
+              <span class="absolute top-1/2 left-5 transform -translate-x-1/2 -translate-y-1/2 opacity-50 bg-green-500 rounded-full w-2 h-2">
+              </span>
+              <span class="block truncate capitalize"><%= @network %></span>
+              <img class="transform rotate-90 w-4 h-4" src={~p"/images/dropdown.svg"} />
+            </div>
+            <div
+              id="options"
+              class="w-full hidden absolute z-10 mt-1 rounded-md bg-container py-1 text-base text-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+            >
+              <div class="w-full py-2 hover:bg-se-violet">
+                <a class="option relative pl-10" href="/mainnet">
+                  <span class="animate-ping bg-green-500 rounded-full w-2 h-2"></span>
+                  <span class="absolute top-1/2 left-5 transform -translate-x-1/2 -translate-y-1/2 opacity-50 bg-green-500 rounded-full w-2 h-2">
+                  </span>
+                  <span>Mainnet</span>
+                </a>
+              </div>
+              <div class="w-full py-2 hover:bg-se-violet">
+                <a class="option relative pl-10" href="/testnet">
+                  <span class="animate-ping bg-green-500 rounded-full w-2 h-2"></span>
+                  <span class="absolute top-1/2 left-5 transform -translate-x-1/2 -translate-y-1/2 opacity-50 bg-green-500 rounded-full w-2 h-2">
+                  </span>
+                  <span>Testnet</span>
+                </a>
+              </div>
+              <div class="w-full py-2 hover:bg-se-violet">
+                <a class="option relative pl-10" href="/testnet2">
+                  <span class="animate-ping bg-green-500 rounded-full w-2 h-2"></span>
+                  <span class="absolute top-1/2 left-5 transform -translate-x-1/2 -translate-y-1/2 opacity-50 bg-green-500 rounded-full w-2 h-2">
+                  </span>
+                  <span>Testnet2</span>
+                </a>
+              </div>
+            </div>
           </div>
         </div>
       </nav>

diff --git a/lib/starknet_explorer_web/live/block_index_live.ex b/lib/starknet_explorer_web/live/block_index_live.ex
@@ -6,7 +6,8 @@ defmodule StarknetExplorerWeb.BlockIndexLive do
     ~H"""
     <%= live_render(@socket, StarknetExplorerWeb.SearchLive,
       id: "search-bar",
-      flash: @flash
+      flash: @flash,
+      session: %{"network" => @network}
     ) %>
     <div class="max-w-7xl mx-auto">
       <div class="table-header">
@@ -32,7 +33,7 @@ defmodule StarknetExplorerWeb.BlockIndexLive do
               <div class="copy-container" id={"copy-bk-#{block["block_number"]}"} phx-hook="Copy">
                 <div class="relative">
                   <%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
-                    to: "/block/#{block["block_hash"]}",
+                    to: ~p"/#{@network}/block/#{block["block_hash"]}",
                     class: "text-hover-blue",
                     title: block["block_hash"]
                   ) %>
@@ -86,8 +87,8 @@ defmodule StarknetExplorerWeb.BlockIndexLive do
   def handle_info(:load_blocks, socket) do
     {:noreply,
      assign(socket,
-       blocks: Utils.list_blocks(),
-       latest_block: Utils.get_latest_block_with_transactions()
+       blocks: Utils.list_blocks(socket.assigns.network),
+       latest_block: Utils.get_latest_block_with_transactions(socket.assigns.network)
      )}
   end
 end