Add buttons to copy content and code to transaction details

assets/css/explorer.scss

@@ -1,32 +1,41 @@
 body {
-    background: $explorer_bg;
-    min-height: 100vh;
+  background: $explorer_bg;
+  min-height: 100vh;
 }
 
-.main_title, .main_subtitle {
-    color: #fff;
+.main_title,
+.main_subtitle {
+  color: #fff;
 }
 
 .main_input {
-    box-shadow: none!important;
-    background: none!important;
-    border-color: #fbfbfb75!important;
-    color: #fff!important;
+  box-shadow: none !important;
+  background: none !important;
+  border-color: #fbfbfb75 !important;
+  color: #fff !important;
 }
 
 .main_input::placeholder {
-    color: #fff!important;
+  color: #fff !important;
 }
 
 pre {
-    border: thin solid #eae8e8;
+  border: thin solid #eae8e8;
 }
 
 .text_wrap {
-    word-break: break-word;
+  word-break: break-word;
 }
 
 .modal-content {
-    background: transparent!important;
-    border: none!important;
-}
+  background: transparent !important;
+  border: none !important;
+}
+
+.is-absolute {
+  position: absolute;
+  &.on-top-right {
+    top: 5px;
+    right: 5px;
+  }
+}

assets/js/app.js

@@ -1,33 +1,34 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import { } from "../css/app.scss"
-import { } from './ui'
-import * as metric_config_obj from './metric_config.js';
-import { createWorldmap, updateWorldmap } from './worldmap'
+import {} from "../css/app.scss";
+import {} from "./ui";
+import * as metric_config_obj from "./metric_config.js";
+import { createWorldmap, updateWorldmap } from "./worldmap";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
 
-import { Socket } from "phoenix"
-import LiveSocket from "phoenix_live_view"
-import { html } from "diff2html"
-import hljs from "highlight.js"
+import { Socket } from "phoenix";
+import LiveSocket from "phoenix_live_view";
+import { html } from "diff2html";
+import hljs from "highlight.js";
 
 // add alpinejs
 import Alpine from "alpinejs";
 window.Alpine = Alpine;
 Alpine.start();
 
-let Hooks = {}
+let Hooks = {};
 
 let scrollAt = () => {
-  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-  let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
-  let clientHeight = document.documentElement.clientHeight
+  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  let scrollHeight =
+    document.documentElement.scrollHeight || document.body.scrollHeight;
+  let clientHeight = document.documentElement.clientHeight;
 
-  return scrollTop / (scrollHeight - clientHeight) * 100
-}
+  return (scrollTop / (scrollHeight - clientHeight)) * 100;
+};
 
 Hooks.CodeViewer = {
   mounted() {
@@ -36,89 +37,120 @@ Hooks.CodeViewer = {
 
   updated() {
     hljs.highlightBlock(this.el);
-  }
-}
+  },
+};
 
 Hooks.InfiniteScroll = {
-  page() { return this.el.dataset.page },
+  page() {
+    return this.el.dataset.page;
+  },
   mounted() {
-    this.pending = this.page()
-    window.addEventListener("scroll", e => {
+    this.pending = this.page();
+    window.addEventListener("scroll", (e) => {
       if (this.pending == this.page() && scrollAt() > 90) {
-        this.pending = this.page() + 1
-        this.pushEvent("load-more", {})
+        this.pending = this.page() + 1;
+        this.pushEvent("load-more", {});
       }
-
-    })
+    });
   },
-  reconnected() { this.pending = this.page() },
-  updated() { this.pending = this.page() }
-}
+  reconnected() {
+    this.pending = this.page();
+  },
+  updated() {
+    this.pending = this.page();
+  },
+};
 
 Hooks.Diff = {
   mounted() {
-    const diff = this.el.innerText
+    const diff = this.el.innerText;
     const diffHtml = diff2html(diff, {
       drawFileList: true,
-      matching: 'lines',
-      outputFormat: 'side-by-side',
-      highlight: true
+      matching: "lines",
+      outputFormat: "side-by-side",
+      highlight: true,
     });
-    document.querySelector('#diff').innerHTML = diffHtml;
-  }
-}
+    document.querySelector("#diff").innerHTML = diffHtml;
+  },
+};
 
 Hooks.Logs = {
   mounted() {
     this.el.scrollTop = this.el.scrollHeight;
-  }
-}
+  },
+};
 
 //metric dashboard hook /metrics/dashboard
 Hooks.network_charts = {
   mounted() {
     var network_metric_obj = metric_config_obj.create_network_live_visuals();
-    this.handleEvent("network_points", ({
-      points
-    }) => {
-      points = metric_config_obj.structure_metric_points(points)
-
-      network_metric_obj = metric_config_obj.update_network_live_visuals(network_metric_obj, points);
+    this.handleEvent("network_points", ({ points }) => {
+      points = metric_config_obj.structure_metric_points(points);
 
+      network_metric_obj = metric_config_obj.update_network_live_visuals(
+        network_metric_obj,
+        points
+      );
     });
-
-  }
-}
-
+  },
+};
 
 Hooks.explorer_charts = {
-
   mounted() {
     var explorer_metric_obj = metric_config_obj.create_explorer_live_visuals();
 
-    this.handleEvent("explorer_stats_points", ({
-      points
-    }) => {
-      points = metric_config_obj.structure_metric_points(points)
-      explorer_metric_obj = metric_config_obj.update_explorer_live_visuals(explorer_metric_obj, points);
+    this.handleEvent("explorer_stats_points", ({ points }) => {
+      points = metric_config_obj.structure_metric_points(points);
+      explorer_metric_obj = metric_config_obj.update_explorer_live_visuals(
+        explorer_metric_obj,
+        points
+      );
     });
-  }
-}
+  },
+};
 
 Hooks.worldmap = {
   mounted() {
+    this.handleEvent("worldmap_init_datas", ({ worldmap_datas }) => {
+      if (worldmap_datas.length > 0) createWorldmap(worldmap_datas);
+    });
 
-    this.handleEvent('worldmap_init_datas', ({ worldmap_datas }) => {
-      if (worldmap_datas.length > 0) createWorldmap(worldmap_datas)
-    })
+    this.handleEvent("worldmap_update_datas", ({ worldmap_datas }) => {
+      if (worldmap_datas.length > 0) updateWorldmap(worldmap_datas);
+    });
+  },
+};
 
-    this.handleEvent('worldmap_update_datas', ({ worldmap_datas }) => {
-      if (worldmap_datas.length > 0) updateWorldmap(worldmap_datas)
-    })
-  }
-}
+Hooks.CopyToClipboard = {
+  mounted() {
+    this.el.addEventListener("click", (e) => {
+      const clipboardId = e.target.id;
+
+      const textToCopy = document.getElementById(clipboardId).innerHTML;
+
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          e.target.innerText = "Copied !";
+          e.target.disabled = true;
+        })
+        .catch(() => {
+          e.target.innerText = "Failed !";
+          e.target.disabled = true;
+        })
+        .finally(() => {
+          setTimeout(() => {
+            e.target.innerText = "Copy";
+            e.target.disabled = false;
+          }, 3000);
+        });
+    });
+  },
+};
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
 
 let liveSocket = new LiveSocket("/live", Socket, {
   hooks: Hooks,
@@ -128,21 +160,21 @@ let liveSocket = new LiveSocket("/live", Socket, {
       if (from._x_dataStack) {
         window.Alpine.clone(from, to);
       }
-    }
+    },
   },
 });
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)
-window.liveSocket = liveSocket
+window.liveSocket = liveSocket;
 
-window.diff2html = html
+window.diff2html = html;
 
 // disable "confirm form resubmission" on back button click
 if (window.history.replaceState) {
   window.history.replaceState(null, null, window.location.href);
-}
+}

lib/archethic_web/templates/explorer/transaction_details.html.leex

@@ -128,7 +128,16 @@
                                         <%= if byte_size(@transaction.data.code) == 0 do %>
                                             N/A
                                         <% else %>
-                                            <pre><%= @transaction.data.code %></pre>
+                                            <div class="is-relative">
+                                                <pre id="copy-code"><%= @transaction.data.code %></pre>
+                                                <button
+                                                    id="copy-code"
+                                                    phx-hook="CopyToClipboard"
+                                                    class="button is-small is-primary is-outlined is-absolute on-top-right"
+                                                >
+                                                    Copy
+                                                </button>
+                                            </div>
                                         <% end %>
                                     </div>
                                     <div x-show="data_section=='content' ">
@@ -141,10 +150,18 @@
                                         </p>
                                         <%= if byte_size(@transaction.data.content) == 0 do %>
                                             N/A
-                                        <% end %>
-                                        <div x-show="show_content">
-                                            <pre><%= format_transaction_content(@transaction.type, @transaction.data.content) %></pre>
+                                        <% else %>
+                                        <div x-show="show_content" class="is-relative">
+                                            <pre id="copy-content"><%= format_transaction_content(@transaction.type, @transaction.data.content) %></pre>
+                                            <button
+                                                id="copy-content"
+                                                phx-hook="CopyToClipboard"
+                                                class="button is-small is-primary is-outlined is-absolute on-top-right"
+                                            >
+                                                Copy
+                                            </button>
                                         </div>
+                                        <% end %>
                                     </div>
                                     <div x-show=" data_section=='uco_ledger' ">
                                         <p class="heading mb-4">UCO Ledger</p>