From 55864ea72ea2db82e65cb311d5191ec2318a7844 Mon Sep 17 00:00:00 2001 From: An <82987608+AngieDutra@users.noreply.github.com> Date: Wed, 5 Jul 2023 18:14:24 -0300 Subject: [PATCH] copy hash button --- assets/css/app.css | 8 ++- assets/js/app.js | 42 +++++++++++--- .../components/layouts/app.html.heex | 2 +- .../components/layouts/root.html.heex | 4 +- .../live/block_index_live.ex | 27 +++++++-- .../live/pages/home/index.ex | 58 +++++++++++++++---- .../live/transaction_index_live.ex | 25 ++++++-- priv/static/images/copy.svg | 2 +- 8 files changed, 134 insertions(+), 34 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index e9b0991f..e7c0c190 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -4,6 +4,12 @@ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap"); /* This file is for your main application CSS */ +* { + @apply box-border p-0 m-0 scroll-smooth; +} +html { + @apply overflow-x-hidden; +} h1 { @apply font-ibm-plex text-4xl uppercase font-semibold; } @@ -21,7 +27,7 @@ h2 { @apply py-2; } .table-block { - @apply flex flex-col overflow-x-hidden text-sm md:py-3 px-5 justify-between text-left text-white rounded-lg bg-[#232331]; + @apply flex flex-col text-sm md:py-3 px-5 justify-between text-left text-white rounded-lg bg-[#232331]; } .table-header { @apply text-sm flex justify-between items-baseline py-2; diff --git a/assets/js/app.js b/assets/js/app.js index 1cc3f98f..810d7aa1 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -22,14 +22,6 @@ import { Socket } from "phoenix"; import { LiveSocket } from "phoenix_live_view"; import topbar from "../vendor/topbar"; -let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content"); -let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } }); - -// Show progress bar on live navigation and form submits -topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }); -window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300)); -window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide()); - // Show copyright const setYear = () => { const copyright = document.getElementById("copyright"); @@ -50,6 +42,40 @@ const hamburgerMenu = () => { }; hamburgerMenu(); +// Copy to clippboard + +let Hooks = {}; +Hooks.Copy = { + mounted() { + const copySections = document.querySelectorAll(".copy-container"); + copySections.forEach((section) => { + const copyText = section.querySelector(".copy-text"); + const copyButton = section.querySelector(".copy-btn"); + const copyCheck = section.querySelector(".copy-check"); + copyButton.addEventListener("click", () => { + if (copyText.dataset.text != null || copyCheck.dataset.text != undefined) { + navigator.clipboard.writeText(copyText.dataset.text); + } else { + navigator.clipboard.writeText(copyText.innerHTML); + } + copyButton.style.opacity = "0"; + copyCheck.style.opacity = "100"; + setTimeout(() => { + copyButton.style.opacity = "100"; + copyCheck.style.opacity = "0"; + }, 1000); + }); + }); + }, +}; + +let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content"); +let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken }, hooks: Hooks }); + +// Show progress bar on live navigation and form submits +topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" }); +window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300)); +window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide()); // connect if there are any LiveViews on the page liveSocket.connect(); diff --git a/lib/starknet_explorer_web/components/layouts/app.html.heex b/lib/starknet_explorer_web/components/layouts/app.html.heex index 08694848..c7a800cd 100644 --- a/lib/starknet_explorer_web/components/layouts/app.html.heex +++ b/lib/starknet_explorer_web/components/layouts/app.html.heex @@ -1,4 +1,4 @@ -
+