fix: Restore the copy functionality for transaction hashes

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v5.0.3
+
+- [fix] Restore the copy functionality for transaction hashes
+
 ### v5.0.2
 
 - [fix] Fixed the bug where the to address on the transaction page might be incorrectly replaced

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metasuites",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/blocksecteam/metasuites.git"

src/common/components/CopyButton/index.tsx

@@ -130,18 +130,15 @@ const CopyButton: FC<PropsWithChildren<Props>> = ({
 
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className={styles.iconSuccess}
           width={size}
           height={size}
+          viewBox="0 0 14 14"
+          fill="none"
+          className={styles.iconSuccess}
         >
           <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="m4.5 12.75 6 6 9-13.5"
+            d="M7 0.5C10.59 0.5 13.5 3.41 13.5 7C13.5 8.72391 12.8152 10.3772 11.5962 11.5962C10.3772 12.8152 8.72391 13.5 7 13.5C5.27609 13.5 3.62279 12.8152 2.40381 11.5962C1.18482 10.3772 0.5 8.72391 0.5 7C0.5 3.41 3.41 0.5 7 0.5ZM7 1.5C5.54131 1.5 4.14236 2.07946 3.11091 3.11091C2.07946 4.14236 1.5 5.54131 1.5 7C1.5 8.45869 2.07946 9.85764 3.11091 10.8891C4.14236 11.9205 5.54131 12.5 7 12.5C8.45869 12.5 9.85764 11.9205 10.8891 10.8891C11.9205 9.85764 12.5 8.45869 12.5 7C12.5 5.54131 11.9205 4.14236 10.8891 3.11091C9.85764 2.07946 8.45869 1.5 7 1.5ZM9.27733 4.584C9.38766 4.65756 9.46424 4.77193 9.49025 4.90195C9.51625 5.03197 9.48955 5.167 9.416 5.27733L7.016 8.87733C6.97495 8.93883 6.92076 8.99045 6.85735 9.02849C6.79395 9.06652 6.72289 9.09002 6.64931 9.09729C6.57573 9.10456 6.50145 9.09542 6.43182 9.07053C6.3622 9.04563 6.29896 9.00561 6.24667 8.95333L4.64667 7.35333C4.55835 7.25855 4.51026 7.13319 4.51255 7.00365C4.51484 6.87412 4.56731 6.75053 4.65892 6.65892C4.75053 6.56731 4.87412 6.51484 5.00365 6.51255C5.13319 6.51026 5.25855 6.55835 5.35333 6.64667L6.522 7.81467L8.584 4.72267C8.65756 4.61234 8.77193 4.53576 8.90195 4.50975C9.03197 4.48375 9.167 4.51045 9.27733 4.584Z"
+            fill="#448C0C"
           />
         </svg>
       </div>

src/common/scripts/copy-address.tsx

@@ -25,37 +25,70 @@ const PhalconExplorerButton: FC<{ hash: string }> = ({ hash }) => {
 
   if (!chain) return null
   return (
-    <IconPhalcon
-      mode="dark"
-      style={{ verticalAlign: 'middle' }}
-      onClick={handleClick}
-    />
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+      <CopyButton text={hash} style={{ color: '#ADB5BD' }} />
+      <IconPhalcon
+        mode="dark"
+        style={{ verticalAlign: 'middle' }}
+        onClick={handleClick}
+      />
+    </span>
   )
 }
 
-const appendIconToElement = (el: HTMLElement, reactNode: ReactNode) => {
+const appendIconToElement = (
+  el: HTMLElement,
+  reactNode: ReactNode,
+  isTxHash = false
+) => {
   if (!isMobile()) {
     el.onmouseover = () => {
-      const btnEl = el.querySelector<HTMLElement>(
+      const btnEls = el.querySelectorAll<HTMLElement>(
         '.__metadock-copy-address-btn__'
       )
-      if (btnEl) btnEl.style.display = 'inline-block'
+      if (btnEls.length) {
+        btnEls.forEach(btnEl => {
+          btnEl.style.display = 'inline-block'
+        })
+      }
     }
     el.onmouseout = () => {
-      const btnEl = el.querySelector<HTMLElement>(
+      const btnEls = el.querySelectorAll<HTMLElement>(
         '.__metadock-copy-address-btn__'
       )
-      if (btnEl) btnEl.style.display = 'none'
+      if (btnEls.length) {
+        btnEls.forEach(btnEl => {
+          btnEl.style.display = 'none'
+        })
+      }
     }
   }
 
-  el.setAttribute('style', 'padding-right:18px;position:relative')
+  if (isTxHash) {
+    el.setAttribute(
+      'style',
+      'padding-right:40px;position:relative;max-width:11rem;'
+    )
+  } else {
+    el.setAttribute('style', 'padding-right:18px;position:relative')
+  }
   const rootEl = document.createElement('span')
   rootEl.classList.add('__metadock-copy-address-btn__')
-  rootEl.setAttribute(
-    'style',
-    `position:absolute;right:0;display:${isMobile() ? 'inline-block' : 'none'}`
-  )
+  if (isTxHash) {
+    rootEl.setAttribute(
+      'style',
+      `position:absolute;right:0;display:${
+        isMobile() ? 'inline-block' : 'none'
+      };line-height:0;top: 50%;transform: translateY(-50%)`
+    )
+  } else {
+    rootEl.setAttribute(
+      'style',
+      `position:absolute;right:0;display:${
+        isMobile() ? 'inline-block' : 'none'
+      }`
+    )
+  }
   el?.appendChild(rootEl)
   createRoot(rootEl).render(reactNode)
 }
@@ -104,7 +137,11 @@ export const handleTxnNodeListCopy = (
     const txnHash = href.match(PATTERN_EVM_TX_HASH)?.[0]
     const hashTagEl = targetPosition === 'parent' ? el.parentElement : el
     if (hashTagEl && txnHash) {
-      appendIconToElement(hashTagEl, <PhalconExplorerButton hash={txnHash} />)
+      appendIconToElement(
+        hashTagEl,
+        <PhalconExplorerButton hash={txnHash} />,
+        true
+      )
     }
   }
 }