Skip to content
This repository has been archived by the owner on Oct 4, 2024. It is now read-only.

Commit

Permalink
copy hash button
Browse files Browse the repository at this point in the history
  • Loading branch information
@AngieDutra
AngieDutra committed Jul 5, 2023
1 parent 4d24208 commit 55864ea
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 34 deletions.
8 changes: 7 additions & 1 deletion assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down
42 changes: 34 additions & 8 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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();

Expand Down
2 changes: 1 addition & 1 deletion lib/starknet_explorer_web/components/layouts/app.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<main class="px-5 md:px-10 min-h-screen py-24">
<main class="px-5 md:px-10 min-h-screen py-32 lg:py-40">
<header>
<nav class="absolute top-0 left-0 w-screen flex justify-between items-center px-5 md:px-10 py-5">
<a href="/" class="z-50 text-xl">
Expand Down
4 changes: 2 additions & 2 deletions lib/starknet_explorer_web/components/layouts/root.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand All @@ -11,7 +11,7 @@
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-[#111118] text-white antialiased relative lg:overflow-auto">
<body class="bg-[#111118] text-white antialiased relative">
<%= @inner_content %>
<footer class="absolute bottom-0 left-0 right-0 flex justify-center items-center mt-10 py-4 text-gray-500">
<p id="copyright"></p>
Expand Down
27 changes: 22 additions & 5 deletions lib/starknet_explorer_web/live/block_index_live.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,28 @@ defmodule StarknetExplorerWeb.BlockIndexLive do
</div>
<div class="col-span-2" scope="row">
<div class="list-h">Block Hash</div>
<%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
to: "/block/#{block["block_hash"]}",
class: "text-se-blue hover:text-se-hover-blue underline-none",
title: block["block_hash"]
) %>
<div
class="copy-container flex gap-4 items-center"
id={"copy-bk-#{block["block_number"]}"}
phx-hook="Copy"
>
<%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
to: "/block/#{block["block_hash"]}",
class: "text-se-blue hover:text-se-hover-blue underline-none",
title: block["block_hash"]
) %>
<div class="relative">
<img
class="copy-btn copy-text w-4 h-4"
src={~p"/images/copy.svg"}
data-text={block["block_hash"]}
/>
<img
class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
src={~p"/images/check-square.svg"}
/>
</div>
</div>
</div>
<div class="col-span-2" scope="row">
<div class="list-h">Status</div>
Expand Down
58 changes: 46 additions & 12 deletions lib/starknet_explorer_web/live/pages/home/index.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<h1>Welcome to</h1>
<h2>Starknet Explorer</h2>
</div>
<div class="mx-auto max-w-6xl grid lg:grid-cols-2 gap-10 mt-10">
<div class="mx-auto max-w-6xl grid lg:grid-cols-2 gap-20 mt-16">
<div>
<div class="table-header">
<div class="table-title">Latest Blocks</div>
Expand Down Expand Up @@ -54,12 +54,29 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
</div>
<div class="col-span-2" scope="row">
<div class="list-h">Block Hash</div>
<%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
to: "/block/#{block["block_hash"]}",
class:
"text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none",
title: block["block_hash"]
) %>
<div
class="copy-container flex gap-4 items-center"
id={"copy-block-#{block["block_number"]}"}
phx-hook="Copy"
>
<%= live_redirect(Utils.shorten_block_hash(block["block_hash"]),
to: "/block/#{block["block_hash"]}",
class:
"text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none",
title: block["block_hash"]
) %>
<div class="relative">
<img
class="copy-btn copy-text w-4 h-4"
src={~p"/images/copy.svg"}
data-text={block["block_hash"]}
/>
<img
class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
src={~p"/images/check-square.svg"}
/>
</div>
</div>
</div>
<div class="col-span-2" scope="row">
<div class="list-h">Status</div>
Expand Down Expand Up @@ -99,11 +116,28 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<div id={"transaction-#{idx}"} class="transactions-grid border-t border-gray-600">
<div class="col-span-2" scope="row">
<div class="list-h">Transaction Hash</div>
<%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
to: "/transactions/#{transaction["transaction_hash"]}",
class:
"text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none"
) %>
<div
class="copy-container flex gap-4 items-center"
id={"copy-transaction-#{idx}"}
phx-hook="Copy"
>
<%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
to: "/transactions/#{transaction["transaction_hash"]}",
class:
"text-se-blue hover:text-se-hover-blue transition-all duration-300 underline-none"
) %>
<div class="relative">
<img
class="copy-btn copy-text w-4 h-4"
src={~p"/images/copy.svg"}
data-text={transaction["transaction_hash"]}
/>
<img
class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
src={~p"/images/check-square.svg"}
/>
</div>
</div>
</div>
<div class="col-span-2" scope="row">
<div class="list-h">Type</div>
Expand Down
25 changes: 21 additions & 4 deletions lib/starknet_explorer_web/live/transaction_index_live.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,27 @@ defmodule StarknetExplorerWeb.TransactionIndexLive do
>
<div class="col-span-2" scope="row">
<div class="list-h">Transaction Hash</div>
<%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
to: "/transactions/#{transaction["transaction_hash"]}",
class: "text-se-blue hover:text-se-hover-blue underline-none"
) %>
<div
class="copy-container flex gap-4 items-center"
id={"copy-tsx-#{idx}"}
phx-hook="Copy"
>
<%= live_redirect(Utils.shorten_block_hash(transaction["transaction_hash"]),
to: "/transactions/#{transaction["transaction_hash"]}",
class: "text-se-blue hover:text-se-hover-blue underline-none"
) %>
<div class="relative">
<img
class="copy-btn copy-text w-4 h-4"
src={~p"/images/copy.svg"}
data-text={transaction["transaction_hash"]}
/>
<img
class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
src={~p"/images/check-square.svg"}
/>
</div>
</div>
</div>
<div class="col-span-2" scope="row">
<div class="list-h">Type</div>
Expand Down
2 changes: 1 addition & 1 deletion priv/static/images/copy.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 55864ea

Please sign in to comment.