From: Matt Corallo <git@bluematt.me>
Date: Fri, 12 Jul 2024 15:59:52 +0000 (+0000)
Subject: Use clipboard icon
X-Git-Url: http://git.bitcoin.ninja/?a=commitdiff_plain;h=8f26c71707c420d6eeaf0cf2b0eb651e5e9eecd9;p=satsto.me

Use clipboard icon
---

diff --git a/clipboard-svg.js b/clipboard-svg.js
new file mode 100644
index 0000000..c2be7c6
--- /dev/null
+++ b/clipboard-svg.js
@@ -0,0 +1,6 @@
+// SVG from Bootstrap Icons
+// Copyright (c) 2019-2024 The Bootstrap Authors
+// Licensed under the MIT license, see https://github.com/twbs/icons/blob/main/LICENSE
+
+export const CLIPBOARD_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/></svg>';
+export const CLIPBOARD_CHECK_SVG ='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0"/><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/></svg>';
diff --git a/index.html b/index.html
index 6da4430..e29102d 100644
--- a/index.html
+++ b/index.html
@@ -70,9 +70,11 @@
 		<script type="module" src="dnssec_prover_wasm.js"></script>
 		<!-- doh_lookup.js comes from the `wasmpack` folder in the above git repo -->
 		<script type="module" src="doh_lookup.js"></script>
+		<script type="module" src="clipboard-svg.js"></script>
 		<script type="module">
 			import init, {verify_byte_stream} from './dnssec_prover_wasm.js';
 			import * as doh from './doh_lookup.js';
+			import {CLIPBOARD_SVG, CLIPBOARD_CHECK_SVG} from './clipboard-svg.js';
 			init().then(() => {
 				const address_box = document.getElementById("address");
 				const check_text = function() {
@@ -183,9 +185,9 @@
 						if (!/^[\p{ASCII}]*$/u.test(contents)) {
 							value = "<th>Invalid</th><th></th>";
 						} else if (contents.length < 70) {
-							value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents + "</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">Copy</a></th>";
+							value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents + "</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">" + CLIPBOARD_SVG + "</a></th>";
 						} else {
-							value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents.substring(0, 70) + "...</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">Copy</a></th>";
+							value = "<th><a href='bitcoin:" + uri_pfx + contents + "'>" + contents.substring(0, 70) + "...</a></th><th><a href='#' id='addr_copy_" + addr_idx + "' onclick=\"copy('" + contents + "', " + addr_idx + ")\">" + CLIPBOARD_SVG + "</a></th>";
 						}
 						addr_idx += 1;
 						addr_ty_table += "<tr><th>" + ty + "</th>" + value + "</tr>";
@@ -214,7 +216,7 @@
 				}
 				window.copy = function(text, element_id) {
 					navigator.clipboard.writeText(text);
-					document.getElementById("addr_copy_" + element_id).innerText = "Copied!";
+					document.getElementById("addr_copy_" + element_id).innerHTML = CLIPBOARD_CHECK_SVG;
 				}
 			});
 		</script>