Them thong bao copy cho trang scan

Author: TUPM96

scan/src/App.vue

@@ -254,6 +254,23 @@
       </template>
     </main>
 
+    <Transition name="copy-toast">
+      <div
+        v-if="copyToast"
+        :class="['copy-toast', copyToast.tone]"
+        :role="copyToast.tone === 'error' ? 'alert' : 'status'"
+        :aria-label="`${copyToast.title}: ${copyToast.body}`"
+        aria-live="polite"
+      >
+        <CheckCircle2 v-if="copyToast.tone === 'success'" :size="18" aria-hidden="true" />
+        <AlertTriangle v-else :size="18" aria-hidden="true" />
+        <span>
+          <strong>{{ copyToast.title }}</strong>
+          <small>{{ copyToast.body }}</small>
+        </span>
+      </div>
+    </Transition>
+
     <footer class="footer">
       <span>scan.mergeos.shop</span>
       <span>Last sync {{ lastSyncLabel }}</span>
@@ -269,6 +286,7 @@ import {
   ArrowDownLeft,
   ArrowUpRight,
   Braces,
+  CheckCircle2,
   Coins,
   Copy,
   ExternalLink,
@@ -325,6 +343,8 @@ const queryFilter = ref('');
 const typeFilter = ref('all');
 const showAllTransactions = ref(false);
 const route = ref(parseRoute());
+const copyToast = ref(null);
+let copyToastTimer = 0;
 
 const tokenSymbol = computed(() => config.value?.token_symbol || marketplace.value?.stats?.token_symbol || 'MRG');
 const paymentMode = computed(() => paymentModeLabel(config.value?.payment_mode));
@@ -391,6 +411,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('popstate', syncRoute);
+  window.clearTimeout(copyToastTimer);
 });
 
 async function loadExplorerData() {
@@ -703,18 +724,46 @@ function safeReturnPath(path = '/') {
 }
 
 async function copyValue(value) {
+  const text = String(value || '');
   try {
-    await navigator.clipboard.writeText(String(value || ''));
-  } catch {
-    const input = document.createElement('textarea');
-    input.value = String(value || '');
-    document.body.appendChild(input);
-    input.select();
-    document.execCommand('copy');
-    input.remove();
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      fallbackCopyText(text);
+    }
+    showCopyToast('success', 'Copied to clipboard', copiedValueLabel(text));
+  } catch (error) {
+    showCopyToast('error', 'Copy failed', 'Please copy it manually.');
   }
 }
 
+function fallbackCopyText(text) {
+  const input = document.createElement('textarea');
+  input.value = text;
+  input.setAttribute('readonly', '');
+  input.style.position = 'fixed';
+  input.style.left = '-9999px';
+  document.body.appendChild(input);
+  input.select();
+  const copied = document.execCommand('copy');
+  input.remove();
+  if (!copied) throw new Error('Copy command failed');
+}
+
+function showCopyToast(tone, title, body) {
+  window.clearTimeout(copyToastTimer);
+  copyToast.value = { tone, title, body };
+  copyToastTimer = window.setTimeout(() => {
+    copyToast.value = null;
+  }, 2600);
+}
+
+function copiedValueLabel(value) {
+  const text = String(value || '').trim();
+  if (!text) return 'Value copied.';
+  return text.length > 34 ? shortHash(text, 12, 8) : text;
+}
+
 function typeLabel(type) {
   return ledgerTypeMeta(type).label;
 }

scan/src/styles.css

@@ -1592,6 +1592,79 @@ main {
   border-radius: 4px;
 }
 
+.copy-toast {
+  position: fixed;
+  right: clamp(18px, 3vw, 42px);
+  bottom: clamp(18px, 3vw, 42px);
+  z-index: 20;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 12px;
+  align-items: center;
+  width: min(360px, calc(100vw - 36px));
+  padding: 14px 16px;
+  border: 1px solid rgba(77, 54, 27, 0.82);
+  border-radius: 5px;
+  background:
+    linear-gradient(180deg, rgba(255, 249, 225, 0.92), rgba(232, 210, 166, 0.86)),
+    var(--paper-grid),
+    rgba(246, 233, 201, 0.95);
+  box-shadow: 0 18px 34px rgba(51, 35, 14, 0.22), var(--engrave);
+  color: var(--ink);
+  pointer-events: none;
+}
+
+.copy-toast::before {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  border: 1px solid rgba(112, 82, 44, 0.2);
+  border-radius: 3px;
+  pointer-events: none;
+}
+
+.copy-toast svg {
+  color: var(--forest);
+  stroke-width: 2.4;
+}
+
+.copy-toast.error svg {
+  color: var(--red);
+}
+
+.copy-toast span {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.copy-toast strong,
+.copy-toast small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.copy-toast strong {
+  font-size: 0.92rem;
+}
+
+.copy-toast small {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
+.copy-toast-enter-active,
+.copy-toast-leave-active {
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.copy-toast-enter-from,
+.copy-toast-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
 .footer {
   border-top-color: rgba(91, 67, 34, 0.56);
   background: rgba(230, 205, 157, 0.2);
@@ -1805,6 +1878,12 @@ main {
     max-width: 100%;
   }
 
+  .copy-toast {
+    right: 18px;
+    bottom: 18px;
+    width: calc(100vw - 36px);
+  }
+
   .panel-head,
   .detail-head {
     display: grid;