feat: Adapt to new Etherscan and basescan versions, remove copy butto…

…n for transaction hash

CHANGELOG.md

@@ -1,3 +1,13 @@
+### v5.0.7
+
+- [fix] Remove the copy button for the new version of Etherscan transaction hash, and readapt some of the copy block buttons
+- [feat] Adapted to the new version of basescan
+
+### v5.0.6
+
+- [fix] Replace copy-to-clipboard with clipboard-copy package
+- [chore] Update node version requirement in CONTRIBUTING.md
+
 ### v5.0.5
 
 - [fix] Fix the bug in the Fund Flow feature on the Solscan website that causes the current Solana address to be retrieved incorrectly

package.json

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

src/common/config/allowlist.ts

@@ -2,7 +2,6 @@ export default {
   ETHERSCAN_V1_MATCHES: [
     '*://*.arbiscan.io/*',
     '*://cronoscan.com/*',
-    '*://*.basescan.org/*',
     '*://gnosisscan.io/*',
     '*://opbnb-testnet.bscscan.com/*',
     '*://goerli-optimism.etherscan.io/*'
@@ -30,7 +29,8 @@ export default {
     '*://zkevm.polygonscan.com/*',
     '*://*.lineascan.build/*',
     '*://*.wemixscan.com/*',
-    '*://testnet.ftmscan.com/*'
+    '*://testnet.ftmscan.com/*',
+    '*://*.basescan.org/*'
   ],
   BTC_EXPLORER_MATCHES: ['*://*.btc.com/*'],
   BLOCKSEC_MATCHES: ['*://*.blocksec.com/*'],

src/common/utils/dom.ts

@@ -1,3 +1,5 @@
+import $ from 'jquery'
+
 export const getNodeValue = (content: HTMLElement | null): string | null => {
   if (!content) return null
   const arr = []
@@ -20,3 +22,8 @@ export const setDeepestChildText = (
     setDeepestChildText(element.lastChild, text)
   }
 }
+
+export const hasSiblingWithClass = (el: HTMLElement, className: string) => {
+  if (!el) return false
+  return $(el).siblings(`.${className}`).length > 0
+}

src/content/btc/feat-scripts/copy-address.tsx

@@ -1,6 +1,68 @@
 import $ from 'jquery'
+import React, { type ReactNode } from 'react'
+import isMobile from 'is-mobile'
+import { createRoot } from 'react-dom/client'
 
-import { handleAddressNodeListCopy } from '@common/scripts/copy-address'
+import { getHrefQueryVariable, pickAddress } from '@common/utils'
+import { CopyButton } from '@common/components'
+
+const appendIconToElement = (el: HTMLElement, reactNode: ReactNode) => {
+  if (!isMobile()) {
+    el.onmouseover = () => {
+      const btnEls = el.querySelectorAll<HTMLElement>(
+        '.__metadock-copy-address-btn__'
+      )
+      if (btnEls.length) {
+        btnEls.forEach(btnEl => {
+          btnEl.style.display = 'inline-block'
+        })
+      }
+    }
+    el.onmouseout = () => {
+      const btnEls = el.querySelectorAll<HTMLElement>(
+        '.__metadock-copy-address-btn__'
+      )
+      if (btnEls.length) {
+        btnEls.forEach(btnEl => {
+          btnEl.style.display = 'none'
+        })
+      }
+    }
+  }
+
+  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'}`
+  )
+  el?.appendChild(rootEl)
+  createRoot(rootEl).render(reactNode)
+}
+
+const handleAddressNodeListCopy = (
+  addressTags: NodeListOf<HTMLElement> | HTMLElement[]
+) => {
+  for (let i = 0; i < addressTags.length; i++) {
+    const el = addressTags[i]
+    let address: string | undefined
+    const href = el.getAttribute('href')
+    const dataOriginalTitle = el.getAttribute('data-original-title')
+    const title = el.getAttribute('title')
+    if (href) {
+      const tokenAddress = getHrefQueryVariable(href, 'a')
+      address = tokenAddress ?? pickAddress(href)
+    } else if (dataOriginalTitle) {
+      address = pickAddress(dataOriginalTitle)
+    } else if (title) {
+      address = pickAddress(title)
+    } else {
+      address = pickAddress(el.innerText)
+    }
+    if (address) appendIconToElement(el, <CopyButton text={address} />)
+  }
+}
 
 const genCopyAddressBtn = async () => {
   const addressTags = $("a[href*='/btc/address' i]").toArray()

src/content/etherscan/feat-scripts/copy-icon.tsx

@@ -1,5 +1,57 @@
+import React, { type ReactNode } from 'react'
+import isMobile from 'is-mobile'
+import { createRoot } from 'react-dom/client'
+
 import { ETHERSCAN_PAGES } from '@common/constants'
-import { handleBlockNodeListCopy } from '@common/scripts/copy-address'
+import { CopyButton } from '@common/components'
+import { validOrigin } from '@common/utils'
+
+const appendIconToElement = (el: HTMLElement, reactNode: ReactNode) => {
+  if (!isMobile()) {
+    el.onmouseover = () => {
+      const btnEls = el.querySelectorAll<HTMLElement>(
+        '.__metadock-copy-address-btn__'
+      )
+      if (btnEls.length) {
+        btnEls.forEach(btnEl => {
+          btnEl.style.display = 'inline-block'
+        })
+      }
+    }
+    el.onmouseout = () => {
+      const btnEls = el.querySelectorAll<HTMLElement>(
+        '.__metadock-copy-address-btn__'
+      )
+      if (btnEls.length) {
+        btnEls.forEach(btnEl => {
+          btnEl.style.display = 'none'
+        })
+      }
+    }
+  }
+
+  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'}`
+  )
+  el?.appendChild(rootEl)
+  createRoot(rootEl).render(reactNode)
+}
+
+const handleBlockNodeListCopy = (blockTags: NodeListOf<HTMLElement>) => {
+  for (let i = 0; i < blockTags.length; i++) {
+    const el = blockTags[i]
+    const href = el.getAttribute('href')
+    if (!href) continue
+    el.classList.remove('hash-tag')
+    const block = el.innerText.trim()
+    appendIconToElement(el, <CopyButton text={block} />)
+  }
+}
 
 /** show copy icon */
 const genCopyIconBtn = async (pageName: string) => {
@@ -24,6 +76,25 @@ const genCopyIconBtn = async (pageName: string) => {
         ".card tbody a[href^='/block/']"
       )
       handleBlockNodeListCopy(blockTags)
+      const iframes = document.querySelectorAll('iframe')
+      for (let i = 0; i < iframes.length; ++i) {
+        const iframe = iframes[i]
+        if (validOrigin(iframe.src)) {
+          iframe.addEventListener(
+            'load',
+            function () {
+              const _document = iframe?.contentWindow?.document
+              if (_document) {
+                const iframeBlockTags = _document.querySelectorAll<HTMLElement>(
+                  ".table-responsive table tbody a[href^='/block/']"
+                )
+                handleBlockNodeListCopy(iframeBlockTags)
+              }
+            },
+            true
+          )
+        }
+      }
       break
     }
     case ETHERSCAN_PAGES.BLOCKS_FORKED.name: