From aec799db54271c62c18e51c7f6ccf4596d81b1c4 Mon Sep 17 00:00:00 2001 From: tom Date: Mon, 5 Feb 2024 17:39:00 +0400 Subject: [PATCH 01/16] feat: Blockscout - initial setup and script placeholder for tx page --- src/common/config/allowlist.ts | 3 +- src/common/constants/scan.ts | 15 ++++++++++ src/common/constants/support.ts | 8 ++++++ src/common/utils/biz.ts | 4 ++- src/content/blockscout/feat-scripts/index.ts | 1 + .../feat-scripts/transaction-explanation.tsx | 7 +++++ src/content/blockscout/index.tsx | 28 +++++++++++++++++++ src/content/blockscout/page-scripts/index.ts | 1 + src/content/blockscout/page-scripts/tx.tsx | 11 ++++++++ src/content/index.all_frames.ts | 3 ++ 10 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 src/content/blockscout/feat-scripts/index.ts create mode 100644 src/content/blockscout/feat-scripts/transaction-explanation.tsx create mode 100644 src/content/blockscout/index.tsx create mode 100644 src/content/blockscout/page-scripts/index.ts create mode 100644 src/content/blockscout/page-scripts/tx.tsx diff --git a/src/common/config/allowlist.ts b/src/common/config/allowlist.ts index 686aa0c..dad8929 100644 --- a/src/common/config/allowlist.ts +++ b/src/common/config/allowlist.ts @@ -36,5 +36,6 @@ export default { BLOCKSEC_MATCHES: ['*://*.blocksec.com/*'], OPENSEA_MATCHES: ['*://*.opensea.io/*'], TRONSCAN_MATCHES: ['*://*.tronscan.org/*'], - SNOWTRACE_MATCHES: ['*://*.snowtrace.io/*'] + SNOWTRACE_MATCHES: ['*://*.snowtrace.io/*'], + BLOCKSCOUT_MATCHES: ['*://*.blockscout.com/*'] } diff --git a/src/common/constants/scan.ts b/src/common/constants/scan.ts index 359fec0..9a63e19 100644 --- a/src/common/constants/scan.ts +++ b/src/common/constants/scan.ts @@ -22,6 +22,8 @@ export const TRONSCAN_PAGE_NAMES = [ 'ADVANCED_FILTER' ] as const +export const BLOCKSCOUT_PAGE_NAMES = ['TX'] as const + export const ETHERSCAN_PAGES: Record< (typeof ETHERSCAN_PAGE_NAMES)[number], { @@ -115,3 +117,16 @@ export const TRONSCAN_PAGES: Record< pattern: /\/tools\/advanced-filter(\?[\w%=&]*)?/ } } + +export const BLOCKSCOUT_PAGES: Record< + (typeof BLOCKSCOUT_PAGE_NAMES)[number], + { + pattern: RegExp + name: (typeof BLOCKSCOUT_PAGE_NAMES)[number] + } +> = { + TX: { + name: 'TX', + pattern: /^\/tx\/.+/ + } +} diff --git a/src/common/constants/support.ts b/src/common/constants/support.ts index 89669a5..0ae2ecc 100644 --- a/src/common/constants/support.ts +++ b/src/common/constants/support.ts @@ -49,6 +49,14 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ } ] }, + { + name: 'Blockscout ETH', + domains: ['eth.blockscout.com'], + chainID: 1, + chain: 'eth', + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1671685360787-7.png' + }, { name: 'BSC', chainID: 56, diff --git a/src/common/utils/biz.ts b/src/common/utils/biz.ts index c63ef73..784db61 100644 --- a/src/common/utils/biz.ts +++ b/src/common/utils/biz.ts @@ -3,6 +3,7 @@ import $ from 'jquery' import { EXT_SUPPORT_WEB_LIST, ETHERSCAN_PAGES, + BLOCKSCOUT_PAGES, TRONSCAN_PAGES, OPENSEA_PAGES, PHALCON_SUPPORT_LIST @@ -20,7 +21,8 @@ export const getPageName = ( const PAGES: Record = { OPENSEA_PAGES, ETHERSCAN_PAGES, - TRONSCAN_PAGES + TRONSCAN_PAGES, + BLOCKSCOUT_PAGES } const siteName = EXT_SUPPORT_WEB_LIST.flatMap(item => [ item, diff --git a/src/content/blockscout/feat-scripts/index.ts b/src/content/blockscout/feat-scripts/index.ts new file mode 100644 index 0000000..96fc180 --- /dev/null +++ b/src/content/blockscout/feat-scripts/index.ts @@ -0,0 +1 @@ +export { default as genTransactionExplanationBtn } from './transaction-explanation' diff --git a/src/content/blockscout/feat-scripts/transaction-explanation.tsx b/src/content/blockscout/feat-scripts/transaction-explanation.tsx new file mode 100644 index 0000000..7d14fd7 --- /dev/null +++ b/src/content/blockscout/feat-scripts/transaction-explanation.tsx @@ -0,0 +1,7 @@ +const genTransactionExplanationBtn = (chain: string) => { + console.log( + '🚧 MetaSuites for Blockscout is under active development right now. Please check back later.' + ) +} + +export default genTransactionExplanationBtn diff --git a/src/content/blockscout/index.tsx b/src/content/blockscout/index.tsx new file mode 100644 index 0000000..a7fb198 --- /dev/null +++ b/src/content/blockscout/index.tsx @@ -0,0 +1,28 @@ +import { BLOCKSCOUT_PAGES } from '@common/constants' +import { isAllowed, getChainSimpleName, getPageName } from '@common/utils' +import { store } from '@src/store' +import { initTxPageScript } from './page-scripts' + +export const initBlockscout = async () => { + if (window.self !== window.top) { + return // This page is embedded in an iframe + } + /** get user options */ + const supportWebList = await store.get('supportWebList') + + /** check whether the script is allowed to run on the current page */ + const allowed = isAllowed(Object.values(supportWebList)) + + /** get the necessary parameters required by the extension */ + const chain: string | undefined = getChainSimpleName() + + if (!allowed || !chain) return + + const pageName = getPageName() + + switch (pageName) { + case BLOCKSCOUT_PAGES.TX.name: + initTxPageScript(chain) + break + } +} diff --git a/src/content/blockscout/page-scripts/index.ts b/src/content/blockscout/page-scripts/index.ts new file mode 100644 index 0000000..728a04f --- /dev/null +++ b/src/content/blockscout/page-scripts/index.ts @@ -0,0 +1 @@ +export { default as initTxPageScript } from './tx' diff --git a/src/content/blockscout/page-scripts/tx.tsx b/src/content/blockscout/page-scripts/tx.tsx new file mode 100644 index 0000000..55a401c --- /dev/null +++ b/src/content/blockscout/page-scripts/tx.tsx @@ -0,0 +1,11 @@ +import { store } from '@src/store' + +import { genTransactionExplanationBtn } from '../feat-scripts' + +const initTxPageScript = async (chain: string) => { + const { txSummary } = await store.get('options') + + if (txSummary) genTransactionExplanationBtn(chain) +} + +export default initTxPageScript diff --git a/src/content/index.all_frames.ts b/src/content/index.all_frames.ts index bf71948..6f7c05a 100644 --- a/src/content/index.all_frames.ts +++ b/src/content/index.all_frames.ts @@ -1,6 +1,7 @@ import { isMatchURL } from '@common/utils' import allowlist from '@common/config/allowlist' import { initEtherscanV2 } from '@src/content/etherscan' +import { initBlockscout } from '@src/content/blockscout' import { initEtherscanV1 } from '@src/content/scans' const currentUrl = window.location.href @@ -9,4 +10,6 @@ if (isMatchURL(currentUrl, allowlist.ETHERSCAN_V1_MATCHES)) { initEtherscanV1() } else if (isMatchURL(currentUrl, allowlist.ETHERSCAN_V2_MATCHES)) { initEtherscanV2() +} else if (isMatchURL(currentUrl, allowlist.BLOCKSCOUT_MATCHES)) { + initBlockscout() } From 2cabd53ea298794556e58e05e9182ec1a7e3bef5 Mon Sep 17 00:00:00 2001 From: tom Date: Tue, 6 Feb 2024 09:13:32 +0400 Subject: [PATCH 02/16] feat: Blockscout - tx explanation prototype --- .../components/ExplainBtn/index.module.less | 4 + .../components/ExplainBtn/index.tsx | 26 ++ .../TransactionExplanation/index.module.less | 145 ++++++++++ .../TransactionExplanation/index.tsx | 262 ++++++++++++++++++ src/content/blockscout/components/index.ts | 2 + .../feat-scripts/transaction-explanation.tsx | 45 ++- 6 files changed, 481 insertions(+), 3 deletions(-) create mode 100644 src/content/blockscout/components/ExplainBtn/index.module.less create mode 100644 src/content/blockscout/components/ExplainBtn/index.tsx create mode 100644 src/content/blockscout/components/TransactionExplanation/index.module.less create mode 100644 src/content/blockscout/components/TransactionExplanation/index.tsx create mode 100644 src/content/blockscout/components/index.ts diff --git a/src/content/blockscout/components/ExplainBtn/index.module.less b/src/content/blockscout/components/ExplainBtn/index.module.less new file mode 100644 index 0000000..a21a830 --- /dev/null +++ b/src/content/blockscout/components/ExplainBtn/index.module.less @@ -0,0 +1,4 @@ +.btn { + display: flex; + align-items: center; +} diff --git a/src/content/blockscout/components/ExplainBtn/index.tsx b/src/content/blockscout/components/ExplainBtn/index.tsx new file mode 100644 index 0000000..76b04a9 --- /dev/null +++ b/src/content/blockscout/components/ExplainBtn/index.tsx @@ -0,0 +1,26 @@ +import { type FC } from 'react' +import cls from 'classnames' +import { Button } from 'antd' +import { TokenSymbol } from '@common/components' +import styles from './index.module.less' + +const classNames = cls(styles.btn) + +interface Props { + onClick: () => void +} + +const ExplainBtn: FC = ({ onClick }) => { + return ( + + ) +} + +export default ExplainBtn diff --git a/src/content/blockscout/components/TransactionExplanation/index.module.less b/src/content/blockscout/components/TransactionExplanation/index.module.less new file mode 100644 index 0000000..d306dea --- /dev/null +++ b/src/content/blockscout/components/TransactionExplanation/index.module.less @@ -0,0 +1,145 @@ +@import '@common/styles/common.less'; + +.transactionExplanation { + position: relative; + + &.hidden { + display: none; + } + + .message { + display: flex; + align-items: center; + + img { + width: 16px; + height: 16px; + margin-right: 10px; + } + } + + .mdLogo { + transform: rotate(0deg); + transition: all 0.5s ease-in-out; + &.animation { + transform: rotate(360deg); + } + } + + .container { + display: flex; + width: 100%; + column-gap: 12px; + } + + .label { + display: flex; + align-items: flex-start; + flex-shrink: 0; + } + + .closeBtn { + position: absolute; + right: 0; + top: 0; + width: 32px; + height: 32px; + background-color: #00a54c; + .pointer; + } + + .content { + display: flex; + width: 100%; + justify-content: space-between; + column-gap: 36px; + + &.column { + flex-direction: column; + } + + .contentWrap { + flex: 1; + display: flex; + align-items: flex-start; + + span { + word-break: break-word; + &::after { + content: ''; + margin-right: 28px; + } + } + .gptLogo { + &.animation { + transform: rotate(360deg); + animation: spin 0.25s linear infinite; + } + } + .btn { + width: 14px; + height: 14px; + vertical-align: baseline; + margin-right: 5px; + .pointer; + + &.active { + animation: like-animation 0.3s ease; + } + } + } + .actionGroup { + flex-shrink: 0; + + .btns { + display: flex; + align-items: center; + column-gap: 8px; + } + + .btn { + width: 14px; + height: 14px; + vertical-align: baseline; + margin-right: 5px; + .pointer; + + &.active { + animation: like-animation 0.3s ease; + } + } + } + } +} + +.dropdownItem { + color: #000000; + .align-center; + .pointer; + &:not(:first-of-type) { + margin-top: 10px; + } + svg { + width: 14px; + height: 14px; + margin-right: 10px; + } +} + +@keyframes like-animation { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/content/blockscout/components/TransactionExplanation/index.tsx b/src/content/blockscout/components/TransactionExplanation/index.tsx new file mode 100644 index 0000000..b7249c8 --- /dev/null +++ b/src/content/blockscout/components/TransactionExplanation/index.tsx @@ -0,0 +1,262 @@ +import cls from 'classnames' +import { Dropdown, type MenuProps } from 'antd' +import React, { type FC, useState, useEffect } from 'react' +import isMobile from 'is-mobile' + +import { CopyButton, TokenSymbol } from '@common/components' +import type { GptTxExplainRes } from '@common/api/types' +import { chromeEvent } from '@common/event' +import { MARK_GPT_TX_EXPLAIN, GET_GPT_TX_EXPLAIN } from '@common/constants' +import { useStore } from '@common/hooks' + +import styles from './index.module.less' + +interface Props { + tx: string + chain: string +} + +const TransactionExplanation: FC = props => { + const [loading, setLoading] = useState(true) + const [result, setResult] = useState() + const [mounted, setMounted] = useState(false) + const [innerText, setInnerText] = useState('') + const [liked, setLiked] = useState(false) + const [disliked, setDisliked] = useState(false) + const [hidden, setHidden] = useState(false) + const [showMessage, setShowMessage] = useState(false) + const [errorOccur, setErrorOccur] = useState(false) + + const [options, setOptions] = useStore('options') + + const requestData = async () => { + setLoading(true) + const res = await chromeEvent.emit< + typeof GET_GPT_TX_EXPLAIN, + GptTxExplainRes + >(GET_GPT_TX_EXPLAIN, props) + setLoading(false) + if (res?.success) { + setResult(res.data) + } else { + setErrorOccur(true) + setInnerText(res?.message ?? '') + } + } + + const onLike = async () => { + if (liked) return + setLiked(true) + chromeEvent.emit(MARK_GPT_TX_EXPLAIN, { + ...props, + template: result!.template, + score: 1 + }) + } + + const onDislike = () => { + if (disliked) return + setDisliked(true) + chromeEvent.emit(MARK_GPT_TX_EXPLAIN, { + ...props, + template: result!.template, + score: -1 + }) + } + + const onDisable = () => { + setShowMessage(true) + setTimeout(() => { + setShowMessage(false) + setOptions({ + ...options, + txSummary: false + }) + }, 2500) + } + + const items: MenuProps['items'] = [ + { + key: '1', + label: ( +
setHidden(true)}> + + + + Hide for this transaction +
+ ) + }, + { + key: '2', + label: ( +
+ + + + Disable the feature +
+ ) + } + ] + + useEffect(() => { + if (result) { + setMounted(true) + const chars = result.content.split('') + let i = 0 + const interval = setInterval(function () { + if (i >= chars.length) { + clearInterval(interval) + } else { + setInnerText(v => { + const value = v + chars[i] + i++ + return value + }) + } + }, 25) + } + }, [result]) + + useEffect(() => { + requestData() + }, []) + + return ( + + ) +} + +export default TransactionExplanation diff --git a/src/content/blockscout/components/index.ts b/src/content/blockscout/components/index.ts new file mode 100644 index 0000000..22f2b81 --- /dev/null +++ b/src/content/blockscout/components/index.ts @@ -0,0 +1,2 @@ +export { default as ExplainBtn } from './ExplainBtn' +export { default as TransactionExplanation } from './TransactionExplanation' diff --git a/src/content/blockscout/feat-scripts/transaction-explanation.tsx b/src/content/blockscout/feat-scripts/transaction-explanation.tsx index 7d14fd7..b34a0f3 100644 --- a/src/content/blockscout/feat-scripts/transaction-explanation.tsx +++ b/src/content/blockscout/feat-scripts/transaction-explanation.tsx @@ -1,7 +1,46 @@ -const genTransactionExplanationBtn = (chain: string) => { - console.log( - '🚧 MetaSuites for Blockscout is under active development right now. Please check back later.' +import $ from 'jquery' +import { TX_EXPLAIN_SUPPORT_LIST } from '@common/constants' +import { createRoot } from 'react-dom/client' +import { + ExplainBtn, + TransactionExplanation +} from '@src/content/blockscout/components' +import { isHexString } from 'ethers' + +const startUI = async (chain: string) => { + if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return + // const txHash = $('#spanTxHash').text() + // TODO @tom2drum get tx hash + const txHash = + '0xaa4d6f0c46cba75c83cb5ee1d8133cf92b4acff6be25f726a6d12beede4c220f' + + if (!isHexString(txHash, 32)) return + + // TODO @tom2drum check tx status + // const status = $( + // '#ContentPlaceHolder1_maintable .card .row:nth-child(2) .col:last-child' + // ).text() + // if (status === 'Pending') return + + const container = $('.metasuites') + const divider = $('
') + const rootEl = $('
') + container.prepend(divider) + container.prepend(rootEl) + createRoot(rootEl[0]).render( + ) } +const genTransactionExplanationBtn = (chain: string) => { + if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return + + const container = $('main') + + const rootEl = $('
') + container.before(rootEl) + + createRoot(rootEl[0]).render( startUI(chain)} />) +} + export default genTransactionExplanationBtn From 87ff7c1baa11d5cd40f60e1c82f81f6d9f5afb13 Mon Sep 17 00:00:00 2001 From: tom Date: Tue, 6 Feb 2024 13:53:32 +0400 Subject: [PATCH 03/16] feat: Blockscout - address labels prototype --- src/common/constants/scan.ts | 6 ++- .../MainAddressLabel/index.module.less | 4 ++ .../components/MainAddressLabel/index.tsx | 43 +++++++++++++++++ src/content/blockscout/components/index.ts | 1 + src/content/blockscout/feat-scripts/index.ts | 1 + .../feat-scripts/main-address-label.tsx | 46 +++++++++++++++++++ src/content/blockscout/index.tsx | 5 +- .../blockscout/page-scripts/address.tsx | 17 +++++++ src/content/blockscout/page-scripts/index.ts | 1 + 9 files changed, 122 insertions(+), 2 deletions(-) create mode 100644 src/content/blockscout/components/MainAddressLabel/index.module.less create mode 100644 src/content/blockscout/components/MainAddressLabel/index.tsx create mode 100644 src/content/blockscout/feat-scripts/main-address-label.tsx create mode 100644 src/content/blockscout/page-scripts/address.tsx diff --git a/src/common/constants/scan.ts b/src/common/constants/scan.ts index 9a63e19..428e88f 100644 --- a/src/common/constants/scan.ts +++ b/src/common/constants/scan.ts @@ -22,7 +22,7 @@ export const TRONSCAN_PAGE_NAMES = [ 'ADVANCED_FILTER' ] as const -export const BLOCKSCOUT_PAGE_NAMES = ['TX'] as const +export const BLOCKSCOUT_PAGE_NAMES = ['TX', 'ADDRESS'] as const export const ETHERSCAN_PAGES: Record< (typeof ETHERSCAN_PAGE_NAMES)[number], @@ -128,5 +128,9 @@ export const BLOCKSCOUT_PAGES: Record< TX: { name: 'TX', pattern: /^\/tx\/.+/ + }, + ADDRESS: { + name: 'ADDRESS', + pattern: /^\/address\/.+/ } } diff --git a/src/content/blockscout/components/MainAddressLabel/index.module.less b/src/content/blockscout/components/MainAddressLabel/index.module.less new file mode 100644 index 0000000..bb27bc1 --- /dev/null +++ b/src/content/blockscout/components/MainAddressLabel/index.module.less @@ -0,0 +1,4 @@ +.container { + display: flex; + align-items: center; +} diff --git a/src/content/blockscout/components/MainAddressLabel/index.tsx b/src/content/blockscout/components/MainAddressLabel/index.tsx new file mode 100644 index 0000000..9e2900c --- /dev/null +++ b/src/content/blockscout/components/MainAddressLabel/index.tsx @@ -0,0 +1,43 @@ +import { type FC } from 'react' +import { Tag, Tooltip } from 'antd' +import cls from 'classnames' + +import type { AddressLabel } from '@common/api/types' +import { TokenSymbol } from '@common/components' +import styles from './index.module.less' + +interface Props { + data: AddressLabel +} + +const MainAddressLabel: FC = ({ + data: { label, implementLabel, implementAddress, implementLogo } +}) => { + return ( + + Report + + } + > + } + color="geekblue" + className={cls(styles.container)} + > + {label} + {implementLabel?.trim() && ( + + {` ( ->`} {implementLabel} ) + + )} + + + ) +} + +export default MainAddressLabel diff --git a/src/content/blockscout/components/index.ts b/src/content/blockscout/components/index.ts index 22f2b81..c7add73 100644 --- a/src/content/blockscout/components/index.ts +++ b/src/content/blockscout/components/index.ts @@ -1,2 +1,3 @@ export { default as ExplainBtn } from './ExplainBtn' +export { default as MainAddressLabel } from './MainAddressLabel' export { default as TransactionExplanation } from './TransactionExplanation' diff --git a/src/content/blockscout/feat-scripts/index.ts b/src/content/blockscout/feat-scripts/index.ts index 96fc180..d643d3a 100644 --- a/src/content/blockscout/feat-scripts/index.ts +++ b/src/content/blockscout/feat-scripts/index.ts @@ -1 +1,2 @@ +export { default as genMainAddressLabel } from './main-address-label' export { default as genTransactionExplanationBtn } from './transaction-explanation' diff --git a/src/content/blockscout/feat-scripts/main-address-label.tsx b/src/content/blockscout/feat-scripts/main-address-label.tsx new file mode 100644 index 0000000..0cee544 --- /dev/null +++ b/src/content/blockscout/feat-scripts/main-address-label.tsx @@ -0,0 +1,46 @@ +import type { CallbackResponse } from 'chrome-extension-core/lib/event' +import { createRoot } from 'react-dom/client' +import $ from 'jquery' + +import { chromeEvent } from '@common/event' +import type { AddressLabel } from '@common/api/types' +import { GET_IMPL_LABELS } from '@common/constants' + +import { MainAddressLabel } from '../components' + +/** enhanced address label */ +const genMainAddressLabel = async (chain: string) => { + const mainAddress = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045' + // const mainAddress = $('#mainaddress').text().trim() + // TODO @tom2drum get address from page + + if (!mainAddress) return + + await chromeEvent + .emit(GET_IMPL_LABELS, { chain: chain, addresses: [mainAddress] }) + .then((res: CallbackResponse | undefined) => { + console.log('__>__', res) + if (res?.success && res.data.length) { + const containerEl = $( + 'main > div:first-child > div:first-child > div:last-child' + ) + const label = res.data[0].label + if ( + label + // TODO @tom2drum check if there is no similar tags + // && + // label !== getEtherscanNameTag() && + // label !== getEtherscanEnsName() && + // !getEtherscanTags().includes(label) + ) { + const labelRootEl = $('') + containerEl.append(labelRootEl) + createRoot(labelRootEl[0]).render( + + ) + } + } + }) +} + +export default genMainAddressLabel diff --git a/src/content/blockscout/index.tsx b/src/content/blockscout/index.tsx index a7fb198..a299e86 100644 --- a/src/content/blockscout/index.tsx +++ b/src/content/blockscout/index.tsx @@ -1,7 +1,7 @@ import { BLOCKSCOUT_PAGES } from '@common/constants' import { isAllowed, getChainSimpleName, getPageName } from '@common/utils' import { store } from '@src/store' -import { initTxPageScript } from './page-scripts' +import { initTxPageScript, initAddressPageScript } from './page-scripts' export const initBlockscout = async () => { if (window.self !== window.top) { @@ -24,5 +24,8 @@ export const initBlockscout = async () => { case BLOCKSCOUT_PAGES.TX.name: initTxPageScript(chain) break + case BLOCKSCOUT_PAGES.ADDRESS.name: + initAddressPageScript(chain) + break } } diff --git a/src/content/blockscout/page-scripts/address.tsx b/src/content/blockscout/page-scripts/address.tsx new file mode 100644 index 0000000..fb7c03b --- /dev/null +++ b/src/content/blockscout/page-scripts/address.tsx @@ -0,0 +1,17 @@ +import { store } from '@src/store' + +/** main features */ +import { genMainAddressLabel } from '../feat-scripts' + +const initAddressPageScript = async (chain: string) => { + /** get user options */ + const { enhancedLabels } = await store.get('options') + + if (enhancedLabels) { + genMainAddressLabel(chain) + // TODO @tom2drum add enhanced labels + // genEnhancedLabels(chain) + } +} + +export default initAddressPageScript diff --git a/src/content/blockscout/page-scripts/index.ts b/src/content/blockscout/page-scripts/index.ts index 728a04f..ebe23dc 100644 --- a/src/content/blockscout/page-scripts/index.ts +++ b/src/content/blockscout/page-scripts/index.ts @@ -1 +1,2 @@ +export { default as initAddressPageScript } from './address' export { default as initTxPageScript } from './tx' From 3fde3b8e4f4a3633f921322bcad6e9c56cfb0d5a Mon Sep 17 00:00:00 2001 From: tom Date: Wed, 21 Feb 2024 08:49:17 +0400 Subject: [PATCH 04/16] feat: Blockscout - styles for address main label --- .../MainAddressLabel/index.module.less | 17 +++++++ .../components/MainAddressLabel/index.tsx | 47 ++++++++++++------- .../components/Tag/index.module.less | 24 ++++++++++ .../blockscout/components/Tag/index.tsx | 24 ++++++++++ src/content/blockscout/components/index.ts | 1 + .../feat-scripts/main-address-label.tsx | 27 +++++++---- src/content/blockscout/utils/address.ts | 2 + src/content/blockscout/utils/index.ts | 1 + 8 files changed, 118 insertions(+), 25 deletions(-) create mode 100644 src/content/blockscout/components/Tag/index.module.less create mode 100644 src/content/blockscout/components/Tag/index.tsx create mode 100644 src/content/blockscout/utils/address.ts create mode 100644 src/content/blockscout/utils/index.ts diff --git a/src/content/blockscout/components/MainAddressLabel/index.module.less b/src/content/blockscout/components/MainAddressLabel/index.module.less index bb27bc1..0c98b10 100644 --- a/src/content/blockscout/components/MainAddressLabel/index.module.less +++ b/src/content/blockscout/components/MainAddressLabel/index.module.less @@ -2,3 +2,20 @@ display: flex; align-items: center; } + +.implementation { + display: flex; + align-items: center; + + & a { + color: var(--chakra-colors-link); + + &:hover { + color: var(--chakra-colors-link_hovered); + } + } +} + +.direction { + margin: 0 4px; +} diff --git a/src/content/blockscout/components/MainAddressLabel/index.tsx b/src/content/blockscout/components/MainAddressLabel/index.tsx index 9e2900c..dc406eb 100644 --- a/src/content/blockscout/components/MainAddressLabel/index.tsx +++ b/src/content/blockscout/components/MainAddressLabel/index.tsx @@ -1,11 +1,17 @@ import { type FC } from 'react' -import { Tag, Tooltip } from 'antd' +import { Tooltip } from 'antd' import cls from 'classnames' import type { AddressLabel } from '@common/api/types' import { TokenSymbol } from '@common/components' import styles from './index.module.less' +import { Tag } from '../index' +import { address } from '../../utils' + +const BUG_REPORT_URL = + 'https://docs.google.com/forms/d/e/1FAIpQLSfWk-74XOBL6sU7SgFRIuDzbFwaUt0wf7C4KE8U_E5FUcboog/viewform?usp=pp_url&entry.1591633300=Bug/Label+Reports' + interface Props { data: AddressLabel } @@ -16,26 +22,33 @@ const MainAddressLabel: FC = ({ return ( + Report } > - } - color="geekblue" - className={cls(styles.container)} - > - {label} - {implementLabel?.trim() && ( - - {` ( ->`} {implementLabel} ) - - )} - +
+ }> +
+ {label.startsWith('0x') ? address.truncate(label) : label} + {implementLabel?.trim() && implementAddress && ( + + )} +
+ +
) } diff --git a/src/content/blockscout/components/Tag/index.module.less b/src/content/blockscout/components/Tag/index.module.less new file mode 100644 index 0000000..07b1578 --- /dev/null +++ b/src/content/blockscout/components/Tag/index.module.less @@ -0,0 +1,24 @@ +.container { + display: flex; + align-items: center; + font-size: var(--chakra-fontSizes-sm); + line-height: var(--chakra-lineHeights-5); + padding: 2px 8px; + border-radius: var(--chakra-radii-sm); + border: none; + margin: 0; +} + +:global(.chakra-ui-dark) { + .container { + background-color: var(--chakra-colors-whiteAlpha-400); + color: var(--chakra-colors-gray-50); + } +} + +:global(.chakra-ui-light) { + .container { + background-color: var(--chakra-colors-blackAlpha-100); + color: var(--chakra-colors-chakra-body-text); + } +} diff --git a/src/content/blockscout/components/Tag/index.tsx b/src/content/blockscout/components/Tag/index.tsx new file mode 100644 index 0000000..b98f769 --- /dev/null +++ b/src/content/blockscout/components/Tag/index.tsx @@ -0,0 +1,24 @@ +import { type FC } from 'react' +import { Tag as AntdTag } from 'antd' +import cls from 'classnames' +import styles from './index.module.less' + +interface Props { + className?: string + children: React.ReactNode + icon?: React.ReactNode +} + +const Tag: FC = ({ className, children, icon }) => { + return ( + + {children} + + ) +} + +export default Tag diff --git a/src/content/blockscout/components/index.ts b/src/content/blockscout/components/index.ts index c7add73..48ad709 100644 --- a/src/content/blockscout/components/index.ts +++ b/src/content/blockscout/components/index.ts @@ -1,3 +1,4 @@ export { default as ExplainBtn } from './ExplainBtn' export { default as MainAddressLabel } from './MainAddressLabel' +export { default as Tag } from './Tag' export { default as TransactionExplanation } from './TransactionExplanation' diff --git a/src/content/blockscout/feat-scripts/main-address-label.tsx b/src/content/blockscout/feat-scripts/main-address-label.tsx index 0cee544..1bcbee3 100644 --- a/src/content/blockscout/feat-scripts/main-address-label.tsx +++ b/src/content/blockscout/feat-scripts/main-address-label.tsx @@ -8,11 +8,23 @@ import { GET_IMPL_LABELS } from '@common/constants' import { MainAddressLabel } from '../components' +const getSiblingEl = () => { + const lastTag = $( + '[data-component="EntityTags"] [data-component="Tag"]:last-of-type' + ) + + if (lastTag.length > 0) { + return lastTag + } + + const pageTitle = $('[data-component="PageTitle__title"]') + + return pageTitle +} + /** enhanced address label */ const genMainAddressLabel = async (chain: string) => { - const mainAddress = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045' - // const mainAddress = $('#mainaddress').text().trim() - // TODO @tom2drum get address from page + const mainAddress = $('#meta-suites__main-address').text().trim() if (!mainAddress) return @@ -21,9 +33,8 @@ const genMainAddressLabel = async (chain: string) => { .then((res: CallbackResponse | undefined) => { console.log('__>__', res) if (res?.success && res.data.length) { - const containerEl = $( - 'main > div:first-child > div:first-child > div:last-child' - ) + const sibling = getSiblingEl() + const label = res.data[0].label if ( label @@ -33,8 +44,8 @@ const genMainAddressLabel = async (chain: string) => { // label !== getEtherscanEnsName() && // !getEtherscanTags().includes(label) ) { - const labelRootEl = $('') - containerEl.append(labelRootEl) + const labelRootEl = $('
') + sibling.after(labelRootEl) createRoot(labelRootEl[0]).render( ) diff --git a/src/content/blockscout/utils/address.ts b/src/content/blockscout/utils/address.ts new file mode 100644 index 0000000..fe4c9b0 --- /dev/null +++ b/src/content/blockscout/utils/address.ts @@ -0,0 +1,2 @@ +export const truncate = (address: string) => + address.slice(0, 4) + '...' + address.slice(-4) diff --git a/src/content/blockscout/utils/index.ts b/src/content/blockscout/utils/index.ts new file mode 100644 index 0000000..e36d41d --- /dev/null +++ b/src/content/blockscout/utils/index.ts @@ -0,0 +1 @@ +export * as address from './address' From e12c3b30d69a99d033294556453b72c4866631b8 Mon Sep 17 00:00:00 2001 From: tom Date: Wed, 21 Feb 2024 11:59:30 +0400 Subject: [PATCH 05/16] feat: Blockscout - fix tooltip styles --- .../MainAddressLabel/index.module.less | 16 ++++++++-------- .../components/MainAddressLabel/index.tsx | 8 ++++++-- src/content/blockscout/index.tsx | 4 ++++ src/content/blockscout/page-scripts/address.tsx | 2 -- src/content/blockscout/styles/index.ts | 1 + src/content/blockscout/styles/tooltip.less | 15 +++++++++++++++ 6 files changed, 34 insertions(+), 12 deletions(-) create mode 100644 src/content/blockscout/styles/index.ts create mode 100644 src/content/blockscout/styles/tooltip.less diff --git a/src/content/blockscout/components/MainAddressLabel/index.module.less b/src/content/blockscout/components/MainAddressLabel/index.module.less index 0c98b10..0bba755 100644 --- a/src/content/blockscout/components/MainAddressLabel/index.module.less +++ b/src/content/blockscout/components/MainAddressLabel/index.module.less @@ -6,16 +6,16 @@ .implementation { display: flex; align-items: center; - - & a { - color: var(--chakra-colors-link); - - &:hover { - color: var(--chakra-colors-link_hovered); - } - } } .direction { margin: 0 4px; } + +a.link { + color: var(--chakra-colors-link); + + &:hover { + color: var(--chakra-colors-link_hovered); + } +} diff --git a/src/content/blockscout/components/MainAddressLabel/index.tsx b/src/content/blockscout/components/MainAddressLabel/index.tsx index dc406eb..0555965 100644 --- a/src/content/blockscout/components/MainAddressLabel/index.tsx +++ b/src/content/blockscout/components/MainAddressLabel/index.tsx @@ -22,7 +22,7 @@ const MainAddressLabel: FC = ({ return ( + Report } @@ -38,7 +38,11 @@ const MainAddressLabel: FC = ({ logo={implementLogo} color="var(--chakra-colors-gray-500)" /> - + {' '} {implementLabel.startsWith('0x') ? address.truncate(implementAddress) diff --git a/src/content/blockscout/index.tsx b/src/content/blockscout/index.tsx index a299e86..fab8092 100644 --- a/src/content/blockscout/index.tsx +++ b/src/content/blockscout/index.tsx @@ -1,7 +1,9 @@ +import '@common/styles/inject.common' import { BLOCKSCOUT_PAGES } from '@common/constants' import { isAllowed, getChainSimpleName, getPageName } from '@common/utils' import { store } from '@src/store' import { initTxPageScript, initAddressPageScript } from './page-scripts' +import './styles/index' export const initBlockscout = async () => { if (window.self !== window.top) { @@ -16,6 +18,8 @@ export const initBlockscout = async () => { /** get the necessary parameters required by the extension */ const chain: string | undefined = getChainSimpleName() + console.log('__>__', { supportWebList, allowed, chain }) + if (!allowed || !chain) return const pageName = getPageName() diff --git a/src/content/blockscout/page-scripts/address.tsx b/src/content/blockscout/page-scripts/address.tsx index fb7c03b..1b712c7 100644 --- a/src/content/blockscout/page-scripts/address.tsx +++ b/src/content/blockscout/page-scripts/address.tsx @@ -9,8 +9,6 @@ const initAddressPageScript = async (chain: string) => { if (enhancedLabels) { genMainAddressLabel(chain) - // TODO @tom2drum add enhanced labels - // genEnhancedLabels(chain) } } diff --git a/src/content/blockscout/styles/index.ts b/src/content/blockscout/styles/index.ts new file mode 100644 index 0000000..4c2b430 --- /dev/null +++ b/src/content/blockscout/styles/index.ts @@ -0,0 +1 @@ +import './tooltip.less' diff --git a/src/content/blockscout/styles/tooltip.less b/src/content/blockscout/styles/tooltip.less new file mode 100644 index 0000000..1b8bddd --- /dev/null +++ b/src/content/blockscout/styles/tooltip.less @@ -0,0 +1,15 @@ +.ant-tooltip-inner { + font-weight: var(--chakra-fontWeights-medium); +} + +.chakra-ui-light .ant-tooltip-inner, +.chakra-ui-light .ant-tooltip-arrow::after { + background-color: var(--chakra-colors-gray-700); + color: var(--chakra-colors-white); +} + +.chakra-ui-dark .ant-tooltip-inner, +.chakra-ui-dark .ant-tooltip-arrow::after { + background-color: var(--chakra-colors-gray-200); + color: var(--chakra-colors-black); +} From 2e074e0d651244d49d0d964cbce0fa48ca7e7c10 Mon Sep 17 00:00:00 2001 From: tom Date: Wed, 21 Feb 2024 19:04:32 +0400 Subject: [PATCH 06/16] feat: Blockscout - styles for tx explanation --- .../components/ExplainBtn/index.module.less | 4 - .../components/ExplainBtn/index.tsx | 26 -- .../TransactionExplanation/button.module.less | 24 ++ .../TransactionExplanation/button.tsx | 18 ++ .../TransactionExplanation/index.tsx | 265 +----------------- .../TransactionExplanation/label.module.less | 16 ++ .../TransactionExplanation/label.tsx | 23 ++ ...{index.module.less => message.module.less} | 47 ++-- .../TransactionExplanation/message.tsx | 249 ++++++++++++++++ src/content/blockscout/components/index.ts | 3 +- .../feat-scripts/main-address-label.tsx | 10 +- .../feat-scripts/transaction-explanation.tsx | 61 ++-- src/content/blockscout/styles/dropdown.less | 17 ++ src/content/blockscout/styles/index.ts | 1 + 14 files changed, 408 insertions(+), 356 deletions(-) delete mode 100644 src/content/blockscout/components/ExplainBtn/index.module.less delete mode 100644 src/content/blockscout/components/ExplainBtn/index.tsx create mode 100644 src/content/blockscout/components/TransactionExplanation/button.module.less create mode 100644 src/content/blockscout/components/TransactionExplanation/button.tsx create mode 100644 src/content/blockscout/components/TransactionExplanation/label.module.less create mode 100644 src/content/blockscout/components/TransactionExplanation/label.tsx rename src/content/blockscout/components/TransactionExplanation/{index.module.less => message.module.less} (80%) create mode 100644 src/content/blockscout/components/TransactionExplanation/message.tsx create mode 100644 src/content/blockscout/styles/dropdown.less diff --git a/src/content/blockscout/components/ExplainBtn/index.module.less b/src/content/blockscout/components/ExplainBtn/index.module.less deleted file mode 100644 index a21a830..0000000 --- a/src/content/blockscout/components/ExplainBtn/index.module.less +++ /dev/null @@ -1,4 +0,0 @@ -.btn { - display: flex; - align-items: center; -} diff --git a/src/content/blockscout/components/ExplainBtn/index.tsx b/src/content/blockscout/components/ExplainBtn/index.tsx deleted file mode 100644 index 76b04a9..0000000 --- a/src/content/blockscout/components/ExplainBtn/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { type FC } from 'react' -import cls from 'classnames' -import { Button } from 'antd' -import { TokenSymbol } from '@common/components' -import styles from './index.module.less' - -const classNames = cls(styles.btn) - -interface Props { - onClick: () => void -} - -const ExplainBtn: FC = ({ onClick }) => { - return ( - - ) -} - -export default ExplainBtn diff --git a/src/content/blockscout/components/TransactionExplanation/button.module.less b/src/content/blockscout/components/TransactionExplanation/button.module.less new file mode 100644 index 0000000..6da4aee --- /dev/null +++ b/src/content/blockscout/components/TransactionExplanation/button.module.less @@ -0,0 +1,24 @@ +.btn { + display: flex; + align-items: center; + margin: 2px 0; + + @media screen and (max-width: 1000px) { + margin: 0; + } + + font-weight: 600; + border-width: 2px; + border-radius: 8px; + color: var(--chakra-colors-link); + border-color: var(--chakra-colors-link); + background-color: transparent; + + &:global(.ant-btn-default):global(.ant-btn) { + &:hover { + color: var(--chakra-colors-link_hovered); + border-color: var(--chakra-colors-link_hovered); + background-color: transparent; + } + } +} diff --git a/src/content/blockscout/components/TransactionExplanation/button.tsx b/src/content/blockscout/components/TransactionExplanation/button.tsx new file mode 100644 index 0000000..06a2c64 --- /dev/null +++ b/src/content/blockscout/components/TransactionExplanation/button.tsx @@ -0,0 +1,18 @@ +import { type FC } from 'react' +import cls from 'classnames' +import { Button as AntdButton } from 'antd' +import styles from './button.module.less' + +interface Props { + onClick: () => void +} + +const Button: FC = ({ onClick }) => { + return ( + + Explain with GPT + + ) +} + +export default Button diff --git a/src/content/blockscout/components/TransactionExplanation/index.tsx b/src/content/blockscout/components/TransactionExplanation/index.tsx index b7249c8..1377d6d 100644 --- a/src/content/blockscout/components/TransactionExplanation/index.tsx +++ b/src/content/blockscout/components/TransactionExplanation/index.tsx @@ -1,262 +1,5 @@ -import cls from 'classnames' -import { Dropdown, type MenuProps } from 'antd' -import React, { type FC, useState, useEffect } from 'react' -import isMobile from 'is-mobile' +import Label from './label' +import Button from './button' +import Message from './message' -import { CopyButton, TokenSymbol } from '@common/components' -import type { GptTxExplainRes } from '@common/api/types' -import { chromeEvent } from '@common/event' -import { MARK_GPT_TX_EXPLAIN, GET_GPT_TX_EXPLAIN } from '@common/constants' -import { useStore } from '@common/hooks' - -import styles from './index.module.less' - -interface Props { - tx: string - chain: string -} - -const TransactionExplanation: FC = props => { - const [loading, setLoading] = useState(true) - const [result, setResult] = useState() - const [mounted, setMounted] = useState(false) - const [innerText, setInnerText] = useState('') - const [liked, setLiked] = useState(false) - const [disliked, setDisliked] = useState(false) - const [hidden, setHidden] = useState(false) - const [showMessage, setShowMessage] = useState(false) - const [errorOccur, setErrorOccur] = useState(false) - - const [options, setOptions] = useStore('options') - - const requestData = async () => { - setLoading(true) - const res = await chromeEvent.emit< - typeof GET_GPT_TX_EXPLAIN, - GptTxExplainRes - >(GET_GPT_TX_EXPLAIN, props) - setLoading(false) - if (res?.success) { - setResult(res.data) - } else { - setErrorOccur(true) - setInnerText(res?.message ?? '') - } - } - - const onLike = async () => { - if (liked) return - setLiked(true) - chromeEvent.emit(MARK_GPT_TX_EXPLAIN, { - ...props, - template: result!.template, - score: 1 - }) - } - - const onDislike = () => { - if (disliked) return - setDisliked(true) - chromeEvent.emit(MARK_GPT_TX_EXPLAIN, { - ...props, - template: result!.template, - score: -1 - }) - } - - const onDisable = () => { - setShowMessage(true) - setTimeout(() => { - setShowMessage(false) - setOptions({ - ...options, - txSummary: false - }) - }, 2500) - } - - const items: MenuProps['items'] = [ - { - key: '1', - label: ( -
setHidden(true)}> - - - - Hide for this transaction -
- ) - }, - { - key: '2', - label: ( -
- - - - Disable the feature -
- ) - } - ] - - useEffect(() => { - if (result) { - setMounted(true) - const chars = result.content.split('') - let i = 0 - const interval = setInterval(function () { - if (i >= chars.length) { - clearInterval(interval) - } else { - setInnerText(v => { - const value = v + chars[i] - i++ - return value - }) - } - }, 25) - } - }, [result]) - - useEffect(() => { - requestData() - }, []) - - return ( - - ) -} - -export default TransactionExplanation +export { Message, Label, Button } diff --git a/src/content/blockscout/components/TransactionExplanation/label.module.less b/src/content/blockscout/components/TransactionExplanation/label.module.less new file mode 100644 index 0000000..233fe85 --- /dev/null +++ b/src/content/blockscout/components/TransactionExplanation/label.module.less @@ -0,0 +1,16 @@ +.label { + display: flex; + align-items: center; + column-gap: 8px; + font-weight: 500; + padding: 8px 0; + line-height: 20px; + + @media screen and (max-width: 1000px) { + padding: 4px 0; + } +} + +.logo { + margin: 1px !important; +} diff --git a/src/content/blockscout/components/TransactionExplanation/label.tsx b/src/content/blockscout/components/TransactionExplanation/label.tsx new file mode 100644 index 0000000..440381e --- /dev/null +++ b/src/content/blockscout/components/TransactionExplanation/label.tsx @@ -0,0 +1,23 @@ +import { type FC } from 'react' +import cls from 'classnames' + +import { TokenSymbol } from '@common/components' + +import styles from './label.module.less' + +const Label: FC = () => { + return ( +
+ + + + Transaction Explanation +
+ ) +} + +export default Label diff --git a/src/content/blockscout/components/TransactionExplanation/index.module.less b/src/content/blockscout/components/TransactionExplanation/message.module.less similarity index 80% rename from src/content/blockscout/components/TransactionExplanation/index.module.less rename to src/content/blockscout/components/TransactionExplanation/message.module.less index d306dea..734e7c2 100644 --- a/src/content/blockscout/components/TransactionExplanation/index.module.less +++ b/src/content/blockscout/components/TransactionExplanation/message.module.less @@ -1,43 +1,30 @@ @import '@common/styles/common.less'; -.transactionExplanation { +.message { position: relative; + font-size: var(--chakra-fontSizes-md); + line-height: 20px; + padding: 8px 0; + + @media screen and (max-width: 1000px) { + padding: 4px 0; + } &.hidden { display: none; } - .message { + .notice { display: flex; - align-items: center; + align-items: flex-start; img { - width: 16px; - height: 16px; - margin-right: 10px; + width: 20px; + height: 20px; + margin-right: 8px; } } - .mdLogo { - transform: rotate(0deg); - transition: all 0.5s ease-in-out; - &.animation { - transform: rotate(360deg); - } - } - - .container { - display: flex; - width: 100%; - column-gap: 12px; - } - - .label { - display: flex; - align-items: flex-start; - flex-shrink: 0; - } - .closeBtn { position: absolute; right: 0; @@ -54,7 +41,7 @@ justify-content: space-between; column-gap: 36px; - &.column { + @media screen and (max-width: 1000px) { flex-direction: column; } @@ -91,6 +78,11 @@ .actionGroup { flex-shrink: 0; + @media screen and (max-width: 1000px) { + padding-left: 28px; + margin-top: 12px; + } + .btns { display: flex; align-items: center; @@ -113,7 +105,6 @@ } .dropdownItem { - color: #000000; .align-center; .pointer; &:not(:first-of-type) { diff --git a/src/content/blockscout/components/TransactionExplanation/message.tsx b/src/content/blockscout/components/TransactionExplanation/message.tsx new file mode 100644 index 0000000..3d96949 --- /dev/null +++ b/src/content/blockscout/components/TransactionExplanation/message.tsx @@ -0,0 +1,249 @@ +import cls from 'classnames' +import { Dropdown, type MenuProps } from 'antd' +import React, { type FC, useState, useEffect } from 'react' + +import { CopyButton, TokenSymbol } from '@common/components' +import type { GptTxExplainRes } from '@common/api/types' +import { chromeEvent } from '@common/event' +import { MARK_GPT_TX_EXPLAIN, GET_GPT_TX_EXPLAIN } from '@common/constants' +import { useStore } from '@common/hooks' + +import styles from './message.module.less' + +interface Props { + tx: string + chain: string + onHide: () => void +} + +const Message: FC = props => { + const [loading, setLoading] = useState(true) + const [result, setResult] = useState() + const [innerText, setInnerText] = useState('') + const [liked, setLiked] = useState(false) + const [disliked, setDisliked] = useState(false) + const [hidden, setHidden] = useState(false) + const [showMessage, setShowMessage] = useState(false) + const [errorOccur, setErrorOccur] = useState(false) + + const [options, setOptions] = useStore('options') + + const requestData = async () => { + setLoading(true) + const res = await chromeEvent.emit< + typeof GET_GPT_TX_EXPLAIN, + GptTxExplainRes + >(GET_GPT_TX_EXPLAIN, props) + setLoading(false) + if (res?.success) { + setResult(res.data) + } else { + setErrorOccur(true) + setInnerText(res?.message ?? '') + } + } + + const onLike = async () => { + if (liked) return + setLiked(true) + chromeEvent.emit(MARK_GPT_TX_EXPLAIN, { + ...props, + template: result!.template, + score: 1 + }) + } + + const onDislike = () => { + if (disliked) return + setDisliked(true) + chromeEvent.emit(MARK_GPT_TX_EXPLAIN, { + ...props, + template: result!.template, + score: -1 + }) + } + + const onDisable = () => { + setShowMessage(true) + setTimeout(() => { + setShowMessage(false) + setOptions({ + ...options, + txSummary: false + }) + props.onHide() + }, 2500) + } + + const onHide = () => { + props.onHide() + setHidden(true) + } + + const items: MenuProps['items'] = [ + { + key: '1', + label: ( +
+ + + + Hide for this transaction +
+ ) + }, + { + key: '2', + label: ( +
+ + + + Disable the feature +
+ ) + } + ] + + useEffect(() => { + if (result) { + const chars = result.content.split('') + let i = 0 + const interval = setInterval(function () { + if (i >= chars.length) { + clearInterval(interval) + } else { + setInnerText(v => { + const value = v + chars[i] + i++ + return value + }) + } + }, 25) + } + }, [result]) + + useEffect(() => { + requestData() + }, []) + + return ( + + ) +} + +export default Message diff --git a/src/content/blockscout/components/index.ts b/src/content/blockscout/components/index.ts index 48ad709..fcebf61 100644 --- a/src/content/blockscout/components/index.ts +++ b/src/content/blockscout/components/index.ts @@ -1,4 +1,3 @@ -export { default as ExplainBtn } from './ExplainBtn' export { default as MainAddressLabel } from './MainAddressLabel' export { default as Tag } from './Tag' -export { default as TransactionExplanation } from './TransactionExplanation' +export * as TransactionExplanation from './TransactionExplanation' diff --git a/src/content/blockscout/feat-scripts/main-address-label.tsx b/src/content/blockscout/feat-scripts/main-address-label.tsx index 1bcbee3..f7960a7 100644 --- a/src/content/blockscout/feat-scripts/main-address-label.tsx +++ b/src/content/blockscout/feat-scripts/main-address-label.tsx @@ -31,19 +31,11 @@ const genMainAddressLabel = async (chain: string) => { await chromeEvent .emit(GET_IMPL_LABELS, { chain: chain, addresses: [mainAddress] }) .then((res: CallbackResponse | undefined) => { - console.log('__>__', res) if (res?.success && res.data.length) { const sibling = getSiblingEl() const label = res.data[0].label - if ( - label - // TODO @tom2drum check if there is no similar tags - // && - // label !== getEtherscanNameTag() && - // label !== getEtherscanEnsName() && - // !getEtherscanTags().includes(label) - ) { + if (label) { const labelRootEl = $('
') sibling.after(labelRootEl) createRoot(labelRootEl[0]).render( diff --git a/src/content/blockscout/feat-scripts/transaction-explanation.tsx b/src/content/blockscout/feat-scripts/transaction-explanation.tsx index b34a0f3..82b8eef 100644 --- a/src/content/blockscout/feat-scripts/transaction-explanation.tsx +++ b/src/content/blockscout/feat-scripts/transaction-explanation.tsx @@ -1,46 +1,55 @@ import $ from 'jquery' import { TX_EXPLAIN_SUPPORT_LIST } from '@common/constants' +import type { Root } from 'react-dom/client' import { createRoot } from 'react-dom/client' -import { - ExplainBtn, - TransactionExplanation -} from '@src/content/blockscout/components' +import { TransactionExplanation } from '@src/content/blockscout/components' import { isHexString } from 'ethers' -const startUI = async (chain: string) => { +const startUI = async (chain: string, valueRoot: Root) => { if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return - // const txHash = $('#spanTxHash').text() - // TODO @tom2drum get tx hash - const txHash = - '0xaa4d6f0c46cba75c83cb5ee1d8133cf92b4acff6be25f726a6d12beede4c220f' + const txInfoLabelEl = $('#meta-suites__tx-info-label') + const txInfoValueEl = $('#meta-suites__tx-info-value') + const txInfoDividerEl = $('#meta-suites__details-info-item-divider') + + const txHash = txInfoLabelEl.data('hash') if (!isHexString(txHash, 32)) return - // TODO @tom2drum check tx status - // const status = $( - // '#ContentPlaceHolder1_maintable .card .row:nth-child(2) .col:last-child' - // ).text() - // if (status === 'Pending') return - - const container = $('.metasuites') - const divider = $('
') - const rootEl = $('
') - container.prepend(divider) - container.prepend(rootEl) - createRoot(rootEl[0]).render( - + const onHide = () => { + txInfoLabelEl.css('display', 'none') + txInfoValueEl.css('display', 'none') + txInfoDividerEl.css('display', 'none') + } + + valueRoot.render( + ) } const genTransactionExplanationBtn = (chain: string) => { if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return - const container = $('main') + const txInfoLabelEl = $('#meta-suites__tx-info-label') + const txHash = txInfoLabelEl.data('hash') + const txStatus = txInfoLabelEl.data('status') + + if (!txHash || !(txStatus === 'ok' || txStatus === 'error')) { + return + } - const rootEl = $('
') - container.before(rootEl) + const txInfoValueEl = $('#meta-suites__tx-info-value') + const txInfoDividerEl = $('#meta-suites__details-info-item-divider') - createRoot(rootEl[0]).render( startUI(chain)} />) + txInfoLabelEl.css('display', 'block') + txInfoValueEl.css('display', 'block') + txInfoDividerEl.css('display', 'block') + + createRoot(txInfoLabelEl[0]).render() + + const valueRoot = createRoot(txInfoValueEl[0]) + valueRoot.render( + startUI(chain, valueRoot)} /> + ) } export default genTransactionExplanationBtn diff --git a/src/content/blockscout/styles/dropdown.less b/src/content/blockscout/styles/dropdown.less new file mode 100644 index 0000000..ecd48e0 --- /dev/null +++ b/src/content/blockscout/styles/dropdown.less @@ -0,0 +1,17 @@ +.chakra-ui-light .ant-dropdown-menu { + background-color: var(--chakra-colors-white); + box-shadow: var(--chakra-shadows-2xl); + + .ant-dropdown-menu-item { + color: var(--chakra-colors-black); + } +} + +.chakra-ui-dark .ant-dropdown-menu { + background-color: var(--chakra-colors-gray-900); + box-shadow: var(--chakra-shadows-2xl); + + .ant-dropdown-menu-item { + color: var(--chakra-colors-white); + } +} diff --git a/src/content/blockscout/styles/index.ts b/src/content/blockscout/styles/index.ts index 4c2b430..c33d164 100644 --- a/src/content/blockscout/styles/index.ts +++ b/src/content/blockscout/styles/index.ts @@ -1 +1,2 @@ import './tooltip.less' +import './dropdown.less' From fb4b5f30fb1e686b49b909b2e860e49a2b1eb0c6 Mon Sep 17 00:00:00 2001 From: tom Date: Wed, 21 Feb 2024 19:41:13 +0400 Subject: [PATCH 07/16] feat: Blockscout - refactoring --- .../feat-scripts/main-address-label.tsx | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/content/blockscout/feat-scripts/main-address-label.tsx b/src/content/blockscout/feat-scripts/main-address-label.tsx index f7960a7..7286f68 100644 --- a/src/content/blockscout/feat-scripts/main-address-label.tsx +++ b/src/content/blockscout/feat-scripts/main-address-label.tsx @@ -8,23 +8,9 @@ import { GET_IMPL_LABELS } from '@common/constants' import { MainAddressLabel } from '../components' -const getSiblingEl = () => { - const lastTag = $( - '[data-component="EntityTags"] [data-component="Tag"]:last-of-type' - ) - - if (lastTag.length > 0) { - return lastTag - } - - const pageTitle = $('[data-component="PageTitle__title"]') - - return pageTitle -} - /** enhanced address label */ const genMainAddressLabel = async (chain: string) => { - const mainAddress = $('#meta-suites__main-address').text().trim() + const mainAddress = $('#meta-suites__address').data('hash') if (!mainAddress) return @@ -32,13 +18,11 @@ const genMainAddressLabel = async (chain: string) => { .emit(GET_IMPL_LABELS, { chain: chain, addresses: [mainAddress] }) .then((res: CallbackResponse | undefined) => { if (res?.success && res.data.length) { - const sibling = getSiblingEl() - const label = res.data[0].label if (label) { - const labelRootEl = $('
') - sibling.after(labelRootEl) - createRoot(labelRootEl[0]).render( + const containerEl = $('#meta-suites__address-tag') + containerEl.css('display', 'block') + createRoot(containerEl[0]).render( ) } From 912a63b035b22a9026629eb8fb2667ffde19fec0 Mon Sep 17 00:00:00 2001 From: tom Date: Thu, 22 Feb 2024 12:02:37 +0400 Subject: [PATCH 08/16] feat: Blockscout - falcon explorer --- .../components/ExplorerLink/index.module.less | 26 +++++++++++ .../components/ExplorerLink/index.tsx | 27 ++++++++++++ src/content/blockscout/components/index.ts | 1 + src/content/blockscout/feat-scripts/index.ts | 1 + .../blockscout/feat-scripts/quick2parsers.tsx | 43 +++++++++++++++++++ src/content/blockscout/page-scripts/tx.tsx | 5 ++- 6 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 src/content/blockscout/components/ExplorerLink/index.module.less create mode 100644 src/content/blockscout/components/ExplorerLink/index.tsx create mode 100644 src/content/blockscout/feat-scripts/quick2parsers.tsx diff --git a/src/content/blockscout/components/ExplorerLink/index.module.less b/src/content/blockscout/components/ExplorerLink/index.module.less new file mode 100644 index 0000000..585f5fd --- /dev/null +++ b/src/content/blockscout/components/ExplorerLink/index.module.less @@ -0,0 +1,26 @@ +.container { + display: flex; + align-items: center; +} + +.icon { + width: 20px; + height: 20px; + margin-right: 8px; +} + +.name { + color: var(--chakra-colors-link); + + &:hover { + text-decoration: underline; + color: var(--chakra-colors-link_hovered); + } +} + +.arrow { + width: 16px; + height: 16px; + color: var(--chakra-colors-gray-400); + flex-shrink: 0; +} diff --git a/src/content/blockscout/components/ExplorerLink/index.tsx b/src/content/blockscout/components/ExplorerLink/index.tsx new file mode 100644 index 0000000..f5c2b03 --- /dev/null +++ b/src/content/blockscout/components/ExplorerLink/index.tsx @@ -0,0 +1,27 @@ +import { type FC } from 'react' + +import styles from './index.module.less' + +interface Props { + iconUrl: string + name: string + href: string +} + +const ExplorerLink: FC = props => { + return ( + + {props.name + {props.name} + + + + + ) +} + +export default ExplorerLink diff --git a/src/content/blockscout/components/index.ts b/src/content/blockscout/components/index.ts index fcebf61..8b4ad56 100644 --- a/src/content/blockscout/components/index.ts +++ b/src/content/blockscout/components/index.ts @@ -1,3 +1,4 @@ +export { default as ExplorerLink } from './ExplorerLink' export { default as MainAddressLabel } from './MainAddressLabel' export { default as Tag } from './Tag' export * as TransactionExplanation from './TransactionExplanation' diff --git a/src/content/blockscout/feat-scripts/index.ts b/src/content/blockscout/feat-scripts/index.ts index d643d3a..c63f37f 100644 --- a/src/content/blockscout/feat-scripts/index.ts +++ b/src/content/blockscout/feat-scripts/index.ts @@ -1,2 +1,3 @@ export { default as genMainAddressLabel } from './main-address-label' export { default as genTransactionExplanationBtn } from './transaction-explanation' +export { default as genQuick2parsers } from './quick2parsers' diff --git a/src/content/blockscout/feat-scripts/quick2parsers.tsx b/src/content/blockscout/feat-scripts/quick2parsers.tsx new file mode 100644 index 0000000..bbe13fb --- /dev/null +++ b/src/content/blockscout/feat-scripts/quick2parsers.tsx @@ -0,0 +1,43 @@ +import { createRoot } from 'react-dom/client' +import $ from 'jquery' + +import { ExplorerLink } from '@src/content/blockscout/components' +import { PHALCON_SUPPORT_LIST } from '@common/constants' + +const genQuick2parsers = async (chain: string) => { + const phalconPathname = PHALCON_SUPPORT_LIST.find( + item => item.chain === chain + )?.pathname + + if (!phalconPathname) return + + const txInfoLabelEl = $('#meta-suites__tx-info-label') + const txHash = txInfoLabelEl.data('hash') + + if (!txHash) return + + const explorersLabelEl = $('#meta-suites__explorers-label') + const explorersLabelFullEl = $('#meta-suites__explorers-label_full') + + let num = Number(explorersLabelEl.data('num')) + + if (!Object.is(num, NaN)) { + num++ + explorersLabelEl.text(num) + explorersLabelFullEl.text(`${num} Explorers`) + } + + const href = `https://phalcon.blocksec.com/explorer/tx/${phalconPathname}/${txHash}` + const containerEl = $('#meta-suites__explorer') + + containerEl.css('display', 'block') + createRoot(containerEl[0]).render( + + ) +} + +export default genQuick2parsers diff --git a/src/content/blockscout/page-scripts/tx.tsx b/src/content/blockscout/page-scripts/tx.tsx index 55a401c..ef1a1a5 100644 --- a/src/content/blockscout/page-scripts/tx.tsx +++ b/src/content/blockscout/page-scripts/tx.tsx @@ -1,11 +1,12 @@ import { store } from '@src/store' -import { genTransactionExplanationBtn } from '../feat-scripts' +import { genTransactionExplanationBtn, genQuick2parsers } from '../feat-scripts' const initTxPageScript = async (chain: string) => { - const { txSummary } = await store.get('options') + const { txSummary, quick2Parsers } = await store.get('options') if (txSummary) genTransactionExplanationBtn(chain) + if (quick2Parsers) genQuick2parsers(chain) } export default initTxPageScript From 652f661bd92750cd9cf300aeaaae6f1e28cec3b2 Mon Sep 17 00:00:00 2001 From: tom Date: Thu, 22 Feb 2024 16:35:09 +0400 Subject: [PATCH 09/16] feat: Blockscout - move explorer link next to tx hash --- src/common/constants/support.ts | 64 ++++++++++++++++++- .../TransactionExplanation/button.module.less | 2 +- .../blockscout/feat-scripts/quick2parsers.tsx | 19 ++---- 3 files changed, 69 insertions(+), 16 deletions(-) diff --git a/src/common/constants/support.ts b/src/common/constants/support.ts index 0ae2ecc..4919718 100644 --- a/src/common/constants/support.ts +++ b/src/common/constants/support.ts @@ -50,12 +50,30 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ ] }, { - name: 'Blockscout ETH', + name: 'ETH (Blockscout)', domains: ['eth.blockscout.com'], chainID: 1, chain: 'eth', siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1671685360787-7.png' + logo: 'https://assets.blocksec.com/image/1671685360787-7.png', + testNets: [ + { + name: 'Sepolia (Blockscout)', + domains: ['eth-sepolia.blockscout.com'], + chainID: 11_155_111, + chain: 'sepolia.eth', + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1671685360787-7.png' + }, + { + name: 'Goerli (Blockscout)', + domains: ['eth-goerli.blockscout.com'], + chainID: 5, + chain: 'gor.eth', + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1671685360787-7.png' + } + ] }, { name: 'BSC', @@ -199,6 +217,24 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ } ] }, + { + name: 'Optimism (Blockscout)', + chainID: 10, + chain: 'optimism', + domains: ['optimism.blockscout.com'], + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1671777583236-2.png', + testNets: [ + { + name: 'Optimism Goerli (Blockscout)', + chainID: 420, + chain: 'gor.optimism', + domains: ['optimism-goerli.blockscout.com'], + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1671777583236-2.png' + } + ] + }, { name: 'Arbitrum Nova', domains: ['nova.arbiscan.io'], @@ -259,6 +295,14 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ siteName: 'ETHERSCAN', logo: 'https://assets.blocksec.com/image/1695197286815-3.png' }, + { + name: 'Gnosis (Blockscout)', + chainID: 100, + chain: 'gnosis', + domains: ['gnosis.blockscout.com'], + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1695197286815-3.png' + }, { name: 'Base', chainID: 8453, @@ -277,6 +321,14 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ } ] }, + { + name: 'Base (Blockscout)', + chainID: 8453, + chain: 'base', + domains: ['base.blockscout.com'], + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1695197286815-2.png' + }, { name: 'Polygon zkEVM', chainID: 1101, @@ -295,6 +347,14 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ } ] }, + { + name: 'Polygon zkEVM (Blockscout)', + chainID: 1101, + chain: 'zkevm', + domains: ['zkevm.blockscout.com'], + siteName: 'BLOCKSCOUT', + logo: 'https://assets.blocksec.com/image/1695197286815-5.png' + }, { name: 'Linea', chainID: 59_144, diff --git a/src/content/blockscout/components/TransactionExplanation/button.module.less b/src/content/blockscout/components/TransactionExplanation/button.module.less index 6da4aee..9e5eae6 100644 --- a/src/content/blockscout/components/TransactionExplanation/button.module.less +++ b/src/content/blockscout/components/TransactionExplanation/button.module.less @@ -4,7 +4,7 @@ margin: 2px 0; @media screen and (max-width: 1000px) { - margin: 0; + margin: 0 0 0 28px; } font-weight: 600; diff --git a/src/content/blockscout/feat-scripts/quick2parsers.tsx b/src/content/blockscout/feat-scripts/quick2parsers.tsx index bbe13fb..ffd2606 100644 --- a/src/content/blockscout/feat-scripts/quick2parsers.tsx +++ b/src/content/blockscout/feat-scripts/quick2parsers.tsx @@ -16,22 +16,15 @@ const genQuick2parsers = async (chain: string) => { if (!txHash) return - const explorersLabelEl = $('#meta-suites__explorers-label') - const explorersLabelFullEl = $('#meta-suites__explorers-label_full') - - let num = Number(explorersLabelEl.data('num')) - - if (!Object.is(num, NaN)) { - num++ - explorersLabelEl.text(num) - explorersLabelFullEl.text(`${num} Explorers`) - } + const separatorEl = $('#meta-suites__tx-explorer-separator') + const linkEl = $('#meta-suites__tx-explorer-link') const href = `https://phalcon.blocksec.com/explorer/tx/${phalconPathname}/${txHash}` - const containerEl = $('#meta-suites__explorer') - containerEl.css('display', 'block') - createRoot(containerEl[0]).render( + separatorEl.css('display', 'block') + linkEl.css('display', 'block') + + createRoot(linkEl[0]).render( Date: Thu, 22 Feb 2024 19:48:31 +0400 Subject: [PATCH 10/16] feat: Blockscout - wait until page data is loaded --- .../feat-scripts/main-address-label.tsx | 13 ++++++++++--- .../blockscout/feat-scripts/quick2parsers.tsx | 6 ++++++ .../feat-scripts/transaction-explanation.tsx | 8 +++++++- src/content/blockscout/utils/index.ts | 1 + src/content/blockscout/utils/page.ts | 18 ++++++++++++++++++ 5 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 src/content/blockscout/utils/page.ts diff --git a/src/content/blockscout/feat-scripts/main-address-label.tsx b/src/content/blockscout/feat-scripts/main-address-label.tsx index 7286f68..67b8f64 100644 --- a/src/content/blockscout/feat-scripts/main-address-label.tsx +++ b/src/content/blockscout/feat-scripts/main-address-label.tsx @@ -7,15 +7,22 @@ import type { AddressLabel } from '@common/api/types' import { GET_IMPL_LABELS } from '@common/constants' import { MainAddressLabel } from '../components' +import { page } from '../utils' /** enhanced address label */ const genMainAddressLabel = async (chain: string) => { - const mainAddress = $('#meta-suites__address').data('hash') + const mainAddressEl = $('#meta-suites__address') - if (!mainAddress) return + const isDataLoaded = await page.waitUntilDataLoaded([mainAddressEl]) + + if (!isDataLoaded) return + + const addressHash = mainAddressEl.data('hash') + + if (!addressHash) return await chromeEvent - .emit(GET_IMPL_LABELS, { chain: chain, addresses: [mainAddress] }) + .emit(GET_IMPL_LABELS, { chain: chain, addresses: [addressHash] }) .then((res: CallbackResponse | undefined) => { if (res?.success && res.data.length) { const label = res.data[0].label diff --git a/src/content/blockscout/feat-scripts/quick2parsers.tsx b/src/content/blockscout/feat-scripts/quick2parsers.tsx index ffd2606..d973df2 100644 --- a/src/content/blockscout/feat-scripts/quick2parsers.tsx +++ b/src/content/blockscout/feat-scripts/quick2parsers.tsx @@ -3,6 +3,7 @@ import $ from 'jquery' import { ExplorerLink } from '@src/content/blockscout/components' import { PHALCON_SUPPORT_LIST } from '@common/constants' +import { page } from '../utils' const genQuick2parsers = async (chain: string) => { const phalconPathname = PHALCON_SUPPORT_LIST.find( @@ -12,6 +13,11 @@ const genQuick2parsers = async (chain: string) => { if (!phalconPathname) return const txInfoLabelEl = $('#meta-suites__tx-info-label') + + const isDataLoaded = await page.waitUntilDataLoaded([txInfoLabelEl]) + + if (!isDataLoaded) return + const txHash = txInfoLabelEl.data('hash') if (!txHash) return diff --git a/src/content/blockscout/feat-scripts/transaction-explanation.tsx b/src/content/blockscout/feat-scripts/transaction-explanation.tsx index 82b8eef..7e547df 100644 --- a/src/content/blockscout/feat-scripts/transaction-explanation.tsx +++ b/src/content/blockscout/feat-scripts/transaction-explanation.tsx @@ -4,6 +4,7 @@ import type { Root } from 'react-dom/client' import { createRoot } from 'react-dom/client' import { TransactionExplanation } from '@src/content/blockscout/components' import { isHexString } from 'ethers' +import { page } from '../utils' const startUI = async (chain: string, valueRoot: Root) => { if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return @@ -26,10 +27,15 @@ const startUI = async (chain: string, valueRoot: Root) => { ) } -const genTransactionExplanationBtn = (chain: string) => { +const genTransactionExplanationBtn = async (chain: string) => { if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return const txInfoLabelEl = $('#meta-suites__tx-info-label') + + const isDataLoaded = await page.waitUntilDataLoaded([txInfoLabelEl]) + + if (!isDataLoaded) return + const txHash = txInfoLabelEl.data('hash') const txStatus = txInfoLabelEl.data('status') diff --git a/src/content/blockscout/utils/index.ts b/src/content/blockscout/utils/index.ts index e36d41d..6a18098 100644 --- a/src/content/blockscout/utils/index.ts +++ b/src/content/blockscout/utils/index.ts @@ -1 +1,2 @@ export * as address from './address' +export * as page from './page' diff --git a/src/content/blockscout/utils/page.ts b/src/content/blockscout/utils/page.ts new file mode 100644 index 0000000..a308c39 --- /dev/null +++ b/src/content/blockscout/utils/page.ts @@ -0,0 +1,18 @@ +export const waitUntilDataLoaded = ( + deps: Array> +): Promise => { + return new Promise(resolve => { + const intervalId = window.setInterval(() => { + const isAllDepsLoaded = deps.every(dep => dep.data('ready') === 'true') + if (isAllDepsLoaded) { + window.clearInterval(intervalId) + resolve(true) + } + }, 2_000) + + window.setTimeout(() => { + window.clearInterval(intervalId) + resolve(false) + }, 20_000) + }) +} From 20f15071daaed74c3ccfddb7e0a3d2e3a7f1a0c3 Mon Sep 17 00:00:00 2001 From: tom Date: Fri, 23 Feb 2024 14:03:33 +0400 Subject: [PATCH 11/16] feat: Blockscout - page navigation fixes --- src/common/constants/scan.ts | 13 ++++-- .../feat-scripts/main-address-label.tsx | 25 +++++++---- .../blockscout/feat-scripts/quick2parsers.tsx | 12 ++--- .../feat-scripts/transaction-explanation.tsx | 14 +++--- src/content/blockscout/index.tsx | 38 ++++++++++++---- .../blockscout/page-scripts/address.tsx | 4 +- src/content/blockscout/page-scripts/tx.tsx | 6 +-- src/content/blockscout/utils/page.ts | 45 ++++++++++++++++++- 8 files changed, 116 insertions(+), 41 deletions(-) diff --git a/src/common/constants/scan.ts b/src/common/constants/scan.ts index 428e88f..1d07e19 100644 --- a/src/common/constants/scan.ts +++ b/src/common/constants/scan.ts @@ -118,19 +118,26 @@ export const TRONSCAN_PAGES: Record< } } +export type BlockscoutPageName = (typeof BLOCKSCOUT_PAGE_NAMES)[number] +export const BLOCKSCOUT_ROUTER_EVENTS = ['PATHNAME_CHANGED', 'TAB_CHANGED'] +export type BlockscoutRouterEvent = (typeof BLOCKSCOUT_ROUTER_EVENTS)[number] + export const BLOCKSCOUT_PAGES: Record< (typeof BLOCKSCOUT_PAGE_NAMES)[number], { pattern: RegExp - name: (typeof BLOCKSCOUT_PAGE_NAMES)[number] + name: BlockscoutPageName + routerEvents: Array } > = { TX: { name: 'TX', - pattern: /^\/tx\/.+/ + pattern: /^\/tx\/(0x[a-fA-F\d]{64})/i, + routerEvents: ['PATHNAME_CHANGED', 'TAB_CHANGED'] }, ADDRESS: { name: 'ADDRESS', - pattern: /^\/address\/.+/ + pattern: /^\/address\/(0x[a-fA-F\d]{40})/i, + routerEvents: ['PATHNAME_CHANGED'] } } diff --git a/src/content/blockscout/feat-scripts/main-address-label.tsx b/src/content/blockscout/feat-scripts/main-address-label.tsx index 67b8f64..d73872c 100644 --- a/src/content/blockscout/feat-scripts/main-address-label.tsx +++ b/src/content/blockscout/feat-scripts/main-address-label.tsx @@ -10,26 +10,33 @@ import { MainAddressLabel } from '../components' import { page } from '../utils' /** enhanced address label */ -const genMainAddressLabel = async (chain: string) => { - const mainAddressEl = $('#meta-suites__address') +const genMainAddressLabel = async (chain: string, addressHash: string) => { + const addressTagEl = $('#meta-suites__address-tag') + addressTagEl.css('display', 'none') - const isDataLoaded = await page.waitUntilDataLoaded([mainAddressEl]) + const isDataLoaded = await page.waitUntilDataLoaded([ + '#meta-suites__address', + '#meta-suites__address-tag' + ]) - if (!isDataLoaded) return + console.log('__>__', { isDataLoaded }) - const addressHash = mainAddressEl.data('hash') + if (!isDataLoaded) return - if (!addressHash) return + console.log('__>__', { addressHash }) await chromeEvent .emit(GET_IMPL_LABELS, { chain: chain, addresses: [addressHash] }) .then((res: CallbackResponse | undefined) => { + console.log('__>__', { res }) if (res?.success && res.data.length) { const label = res.data[0].label if (label) { - const containerEl = $('#meta-suites__address-tag') - containerEl.css('display', 'block') - createRoot(containerEl[0]).render( + const addressTagEl = $('#meta-suites__address-tag') + + addressTagEl.css('display', 'block') + + createRoot(addressTagEl[0]).render( ) } diff --git a/src/content/blockscout/feat-scripts/quick2parsers.tsx b/src/content/blockscout/feat-scripts/quick2parsers.tsx index d973df2..f1c2bb5 100644 --- a/src/content/blockscout/feat-scripts/quick2parsers.tsx +++ b/src/content/blockscout/feat-scripts/quick2parsers.tsx @@ -5,23 +5,19 @@ import { ExplorerLink } from '@src/content/blockscout/components' import { PHALCON_SUPPORT_LIST } from '@common/constants' import { page } from '../utils' -const genQuick2parsers = async (chain: string) => { +const genQuick2parsers = async (chain: string, txHash: string) => { const phalconPathname = PHALCON_SUPPORT_LIST.find( item => item.chain === chain )?.pathname if (!phalconPathname) return - const txInfoLabelEl = $('#meta-suites__tx-info-label') - - const isDataLoaded = await page.waitUntilDataLoaded([txInfoLabelEl]) + const isDataLoaded = await page.waitUntilDataLoaded([ + '#meta-suites__tx-info-label' + ]) if (!isDataLoaded) return - const txHash = txInfoLabelEl.data('hash') - - if (!txHash) return - const separatorEl = $('#meta-suites__tx-explorer-separator') const linkEl = $('#meta-suites__tx-explorer-link') diff --git a/src/content/blockscout/feat-scripts/transaction-explanation.tsx b/src/content/blockscout/feat-scripts/transaction-explanation.tsx index 7e547df..772f825 100644 --- a/src/content/blockscout/feat-scripts/transaction-explanation.tsx +++ b/src/content/blockscout/feat-scripts/transaction-explanation.tsx @@ -27,19 +27,23 @@ const startUI = async (chain: string, valueRoot: Root) => { ) } -const genTransactionExplanationBtn = async (chain: string) => { +const genTransactionExplanationBtn = async (chain: string, txHash: string) => { if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return - const txInfoLabelEl = $('#meta-suites__tx-info-label') + const isDataLoaded = await page.waitUntilDataLoaded([ + '#meta-suites__tx-info-label' + ]) - const isDataLoaded = await page.waitUntilDataLoaded([txInfoLabelEl]) + console.log('__>__', { isDataLoaded }) if (!isDataLoaded) return - const txHash = txInfoLabelEl.data('hash') + const txInfoLabelEl = $('#meta-suites__tx-info-label') const txStatus = txInfoLabelEl.data('status') - if (!txHash || !(txStatus === 'ok' || txStatus === 'error')) { + console.log('__>__', { txHash, txStatus }) + + if (!(txStatus === 'ok' || txStatus === 'error')) { return } diff --git a/src/content/blockscout/index.tsx b/src/content/blockscout/index.tsx index fab8092..05febec 100644 --- a/src/content/blockscout/index.tsx +++ b/src/content/blockscout/index.tsx @@ -1,9 +1,11 @@ import '@common/styles/inject.common' +import type { BlockscoutPageName } from '@common/constants' import { BLOCKSCOUT_PAGES } from '@common/constants' import { isAllowed, getChainSimpleName, getPageName } from '@common/utils' import { store } from '@src/store' import { initTxPageScript, initAddressPageScript } from './page-scripts' import './styles/index' +import { page } from './utils' export const initBlockscout = async () => { if (window.self !== window.top) { @@ -22,14 +24,32 @@ export const initBlockscout = async () => { if (!allowed || !chain) return - const pageName = getPageName() + page.runScript((pageName: string) => { + console.log('__>__', { pageName }) - switch (pageName) { - case BLOCKSCOUT_PAGES.TX.name: - initTxPageScript(chain) - break - case BLOCKSCOUT_PAGES.ADDRESS.name: - initAddressPageScript(chain) - break - } + switch (pageName) { + case BLOCKSCOUT_PAGES.TX.name: { + const { pattern } = BLOCKSCOUT_PAGES[pageName as BlockscoutPageName] + const [, txHash] = window.location.pathname.match(pattern) || [] + + if (!txHash) return + + const tab = new URL(window.location.href).searchParams.get('tab') + + if (!(tab === null || tab === 'index')) return + + initTxPageScript(chain, txHash) + break + } + case BLOCKSCOUT_PAGES.ADDRESS.name: { + const { pattern } = BLOCKSCOUT_PAGES[pageName as BlockscoutPageName] + const [, addressHash] = window.location.pathname.match(pattern) || [] + + if (!addressHash) return + + initAddressPageScript(chain, addressHash) + break + } + } + }) } diff --git a/src/content/blockscout/page-scripts/address.tsx b/src/content/blockscout/page-scripts/address.tsx index 1b712c7..54e0f60 100644 --- a/src/content/blockscout/page-scripts/address.tsx +++ b/src/content/blockscout/page-scripts/address.tsx @@ -3,12 +3,12 @@ import { store } from '@src/store' /** main features */ import { genMainAddressLabel } from '../feat-scripts' -const initAddressPageScript = async (chain: string) => { +const initAddressPageScript = async (chain: string, addressHash: string) => { /** get user options */ const { enhancedLabels } = await store.get('options') if (enhancedLabels) { - genMainAddressLabel(chain) + genMainAddressLabel(chain, addressHash) } } diff --git a/src/content/blockscout/page-scripts/tx.tsx b/src/content/blockscout/page-scripts/tx.tsx index ef1a1a5..7763715 100644 --- a/src/content/blockscout/page-scripts/tx.tsx +++ b/src/content/blockscout/page-scripts/tx.tsx @@ -2,11 +2,11 @@ import { store } from '@src/store' import { genTransactionExplanationBtn, genQuick2parsers } from '../feat-scripts' -const initTxPageScript = async (chain: string) => { +const initTxPageScript = async (chain: string, txHash: string) => { const { txSummary, quick2Parsers } = await store.get('options') - if (txSummary) genTransactionExplanationBtn(chain) - if (quick2Parsers) genQuick2parsers(chain) + if (txSummary) genTransactionExplanationBtn(chain, txHash) + if (quick2Parsers) genQuick2parsers(chain, txHash) } export default initTxPageScript diff --git a/src/content/blockscout/utils/page.ts b/src/content/blockscout/utils/page.ts index a308c39..d908e06 100644 --- a/src/content/blockscout/utils/page.ts +++ b/src/content/blockscout/utils/page.ts @@ -1,9 +1,26 @@ +import $ from 'jquery' +import { getPageName } from '@common/utils' +import type { BlockscoutPageName } from '@src/common/constants' +import { BLOCKSCOUT_PAGES } from '@src/common/constants' + export const waitUntilDataLoaded = ( - deps: Array> + selectors: Array ): Promise => { return new Promise(resolve => { const intervalId = window.setInterval(() => { - const isAllDepsLoaded = deps.every(dep => dep.data('ready') === 'true') + const deps: Array> = selectors.map(selector => + $(selector) + ) + const isAllDepsLoaded = deps.every( + dep => String(dep.data('ready')) === 'true' + ) + + console.log('__>__ status: ', isAllDepsLoaded) + console.log( + '__>__ flags: ', + deps.map(dep => dep.data('ready')) + ) + if (isAllDepsLoaded) { window.clearInterval(intervalId) resolve(true) @@ -16,3 +33,27 @@ export const waitUntilDataLoaded = ( }, 20_000) }) } + +export const runScript = (cb: (pageName: string) => void) => { + const pageName = getPageName() + + pageName && cb(pageName) + + window.addEventListener( + 'message', + event => { + if (event.origin !== window.location.origin) return + if (event.data.source !== 'APP_ROUTER') return + + const pageName = getPageName() + + if (!pageName) return + + const { routerEvents } = BLOCKSCOUT_PAGES[pageName as BlockscoutPageName] + if (routerEvents.includes(event.data.type)) cb(pageName) + + return + }, + false + ) +} From 98d9210086a5169661b52253a09cfce9beeb0288 Mon Sep 17 00:00:00 2001 From: tom Date: Fri, 23 Feb 2024 17:14:44 +0400 Subject: [PATCH 12/16] feat: Blockscout - prod build fixes --- .../MainAddressLabel/index.module.less | 2 +- .../components/Tag/index.module.less | 6 ++--- .../TransactionExplanation/button.module.less | 22 ++++++++++--------- src/content/blockscout/index.tsx | 2 +- src/content/blockscout/styles/dropdown.less | 20 ++++++++++++----- src/content/blockscout/styles/tooltip.less | 10 ++++----- src/content/blockscout/utils/page.ts | 17 +++++--------- 7 files changed, 41 insertions(+), 38 deletions(-) diff --git a/src/content/blockscout/components/MainAddressLabel/index.module.less b/src/content/blockscout/components/MainAddressLabel/index.module.less index 0bba755..7f0cacf 100644 --- a/src/content/blockscout/components/MainAddressLabel/index.module.less +++ b/src/content/blockscout/components/MainAddressLabel/index.module.less @@ -12,7 +12,7 @@ margin: 0 4px; } -a.link { +:global(.ant-tag) a.link { color: var(--chakra-colors-link); &:hover { diff --git a/src/content/blockscout/components/Tag/index.module.less b/src/content/blockscout/components/Tag/index.module.less index 07b1578..e1c4a50 100644 --- a/src/content/blockscout/components/Tag/index.module.less +++ b/src/content/blockscout/components/Tag/index.module.less @@ -1,4 +1,4 @@ -.container { +.container:global(.ant-tag):global(.ant-tag-borderless) { display: flex; align-items: center; font-size: var(--chakra-fontSizes-sm); @@ -10,14 +10,14 @@ } :global(.chakra-ui-dark) { - .container { + .container:global(.ant-tag):global(.ant-tag-borderless) { background-color: var(--chakra-colors-whiteAlpha-400); color: var(--chakra-colors-gray-50); } } :global(.chakra-ui-light) { - .container { + .container:global(.ant-tag):global(.ant-tag-borderless) { background-color: var(--chakra-colors-blackAlpha-100); color: var(--chakra-colors-chakra-body-text); } diff --git a/src/content/blockscout/components/TransactionExplanation/button.module.less b/src/content/blockscout/components/TransactionExplanation/button.module.less index 9e5eae6..94c8050 100644 --- a/src/content/blockscout/components/TransactionExplanation/button.module.less +++ b/src/content/blockscout/components/TransactionExplanation/button.module.less @@ -7,18 +7,20 @@ margin: 0 0 0 28px; } - font-weight: 600; - border-width: 2px; - border-radius: 8px; - color: var(--chakra-colors-link); - border-color: var(--chakra-colors-link); - background-color: transparent; - &:global(.ant-btn-default):global(.ant-btn) { + font-weight: 600; + line-height: 20px; + border-width: 2px; + border-radius: 8px; + padding: 4px 6px; + color: var(--chakra-colors-link); + border-color: var(--chakra-colors-link); + background-color: transparent; + &:hover { - color: var(--chakra-colors-link_hovered); - border-color: var(--chakra-colors-link_hovered); - background-color: transparent; + color: var(--chakra-colors-link_hovered) !important; + border-color: var(--chakra-colors-link_hovered) !important; + background-color: transparent !important; } } } diff --git a/src/content/blockscout/index.tsx b/src/content/blockscout/index.tsx index 05febec..baa23f5 100644 --- a/src/content/blockscout/index.tsx +++ b/src/content/blockscout/index.tsx @@ -1,7 +1,7 @@ import '@common/styles/inject.common' import type { BlockscoutPageName } from '@common/constants' import { BLOCKSCOUT_PAGES } from '@common/constants' -import { isAllowed, getChainSimpleName, getPageName } from '@common/utils' +import { isAllowed, getChainSimpleName } from '@common/utils' import { store } from '@src/store' import { initTxPageScript, initAddressPageScript } from './page-scripts' import './styles/index' diff --git a/src/content/blockscout/styles/dropdown.less b/src/content/blockscout/styles/dropdown.less index ecd48e0..5427902 100644 --- a/src/content/blockscout/styles/dropdown.less +++ b/src/content/blockscout/styles/dropdown.less @@ -1,17 +1,25 @@ .chakra-ui-light .ant-dropdown-menu { - background-color: var(--chakra-colors-white); - box-shadow: var(--chakra-shadows-2xl); + background-color: var(--chakra-colors-white) !important; + box-shadow: var(--chakra-shadows-2xl) !important; .ant-dropdown-menu-item { - color: var(--chakra-colors-black); + color: var(--chakra-colors-black) !important; + + &:hover { + background-color: var(--chakra-colors-blue-50) !important; + } } } .chakra-ui-dark .ant-dropdown-menu { - background-color: var(--chakra-colors-gray-900); - box-shadow: var(--chakra-shadows-2xl); + background-color: var(--chakra-colors-gray-900) !important; + box-shadow: var(--chakra-shadows-2xl) !important; .ant-dropdown-menu-item { - color: var(--chakra-colors-white); + color: var(--chakra-colors-white) !important; + + &:hover { + background-color: var(--chakra-colors-gray-800) !important; + } } } diff --git a/src/content/blockscout/styles/tooltip.less b/src/content/blockscout/styles/tooltip.less index 1b8bddd..1f14c5c 100644 --- a/src/content/blockscout/styles/tooltip.less +++ b/src/content/blockscout/styles/tooltip.less @@ -1,15 +1,15 @@ .ant-tooltip-inner { - font-weight: var(--chakra-fontWeights-medium); + font-weight: var(--chakra-fontWeights-medium) !important; } .chakra-ui-light .ant-tooltip-inner, .chakra-ui-light .ant-tooltip-arrow::after { - background-color: var(--chakra-colors-gray-700); - color: var(--chakra-colors-white); + background-color: var(--chakra-colors-gray-700) !important; + color: var(--chakra-colors-white) !important; } .chakra-ui-dark .ant-tooltip-inner, .chakra-ui-dark .ant-tooltip-arrow::after { - background-color: var(--chakra-colors-gray-200); - color: var(--chakra-colors-black); + background-color: var(--chakra-colors-gray-200) !important; + color: var(--chakra-colors-black) !important; } diff --git a/src/content/blockscout/utils/page.ts b/src/content/blockscout/utils/page.ts index d908e06..6eb4a84 100644 --- a/src/content/blockscout/utils/page.ts +++ b/src/content/blockscout/utils/page.ts @@ -1,4 +1,3 @@ -import $ from 'jquery' import { getPageName } from '@common/utils' import type { BlockscoutPageName } from '@src/common/constants' import { BLOCKSCOUT_PAGES } from '@src/common/constants' @@ -8,17 +7,11 @@ export const waitUntilDataLoaded = ( ): Promise => { return new Promise(resolve => { const intervalId = window.setInterval(() => { - const deps: Array> = selectors.map(selector => - $(selector) - ) - const isAllDepsLoaded = deps.every( - dep => String(dep.data('ready')) === 'true' - ) - - console.log('__>__ status: ', isAllDepsLoaded) - console.log( - '__>__ flags: ', - deps.map(dep => dep.data('ready')) + const isAllDepsLoaded = selectors.every( + selector => + window.document + .querySelector(selector) + ?.getAttribute('data-ready') === 'true' ) if (isAllDepsLoaded) { From b8fcc6f1e4ed2f2e9e46a8664062ef784b734bf3 Mon Sep 17 00:00:00 2001 From: tom Date: Thu, 7 Mar 2024 18:11:05 +0400 Subject: [PATCH 13/16] feat: Blockscout - logos --- src/common/constants/support.ts | 30 +++++++++++++------ .../feat-scripts/transaction-explanation.tsx | 8 ++--- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/src/common/constants/support.ts b/src/common/constants/support.ts index 4919718..4bb6ce3 100644 --- a/src/common/constants/support.ts +++ b/src/common/constants/support.ts @@ -51,11 +51,15 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ }, { name: 'ETH (Blockscout)', - domains: ['eth.blockscout.com'], + domains: [ + 'eth.blockscout.com', + 'localhost:3000', + 'review-tom2drum-metasuites-placeholders.k8s-dev.blockscout.com' + ], chainID: 1, chain: 'eth', siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1671685360787-7.png', + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/ethereum.png', testNets: [ { name: 'Sepolia (Blockscout)', @@ -63,7 +67,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ chainID: 11_155_111, chain: 'sepolia.eth', siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1671685360787-7.png' + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/ethereum.png' }, { name: 'Goerli (Blockscout)', @@ -71,7 +75,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ chainID: 5, chain: 'gor.eth', siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1671685360787-7.png' + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/ethereum.png' } ] }, @@ -119,6 +123,14 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ } ] }, + { + name: 'Polygon (Blockscout)', + chainID: 137, + chain: 'polygon', + domains: ['polygon.blockscout.com'], + siteName: 'BLOCKSCOUT', + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/polygon.png' + }, { name: 'Fantom', domains: ['ftmscan.com'], @@ -223,7 +235,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ chain: 'optimism', domains: ['optimism.blockscout.com'], siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1671777583236-2.png', + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/optimism.png', testNets: [ { name: 'Optimism Goerli (Blockscout)', @@ -231,7 +243,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ chain: 'gor.optimism', domains: ['optimism-goerli.blockscout.com'], siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1671777583236-2.png' + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/optimism.png' } ] }, @@ -301,7 +313,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ chain: 'gnosis', domains: ['gnosis.blockscout.com'], siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1695197286815-3.png' + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/gnosis.png' }, { name: 'Base', @@ -327,7 +339,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ chain: 'base', domains: ['base.blockscout.com'], siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1695197286815-2.png' + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/base.png' }, { name: 'Polygon zkEVM', @@ -353,7 +365,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ chain: 'zkevm', domains: ['zkevm.blockscout.com'], siteName: 'BLOCKSCOUT', - logo: 'https://assets.blocksec.com/image/1695197286815-5.png' + logo: 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/meta-suites-logos/polygon_zk-evm.png' }, { name: 'Linea', diff --git a/src/content/blockscout/feat-scripts/transaction-explanation.tsx b/src/content/blockscout/feat-scripts/transaction-explanation.tsx index 772f825..0c5b6ab 100644 --- a/src/content/blockscout/feat-scripts/transaction-explanation.tsx +++ b/src/content/blockscout/feat-scripts/transaction-explanation.tsx @@ -6,14 +6,12 @@ import { TransactionExplanation } from '@src/content/blockscout/components' import { isHexString } from 'ethers' import { page } from '../utils' -const startUI = async (chain: string, valueRoot: Root) => { +const startUI = async (chain: string, valueRoot: Root, txHash: string) => { if (!TX_EXPLAIN_SUPPORT_LIST.includes(chain)) return const txInfoLabelEl = $('#meta-suites__tx-info-label') const txInfoValueEl = $('#meta-suites__tx-info-value') const txInfoDividerEl = $('#meta-suites__details-info-item-divider') - const txHash = txInfoLabelEl.data('hash') - if (!isHexString(txHash, 32)) return const onHide = () => { @@ -58,7 +56,9 @@ const genTransactionExplanationBtn = async (chain: string, txHash: string) => { const valueRoot = createRoot(txInfoValueEl[0]) valueRoot.render( - startUI(chain, valueRoot)} /> + startUI(chain, valueRoot, txHash)} + /> ) } From 1d9ed8a494110b844a5767338ab9b1378629f3c6 Mon Sep 17 00:00:00 2001 From: tom Date: Fri, 8 Mar 2024 11:47:27 +0400 Subject: [PATCH 14/16] feat: Blockscout - fix arrow in address tag --- .../components/MainAddressLabel/index.module.less | 6 ++++-- .../blockscout/components/MainAddressLabel/index.tsx | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/content/blockscout/components/MainAddressLabel/index.module.less b/src/content/blockscout/components/MainAddressLabel/index.module.less index 7f0cacf..c9c0074 100644 --- a/src/content/blockscout/components/MainAddressLabel/index.module.less +++ b/src/content/blockscout/components/MainAddressLabel/index.module.less @@ -8,8 +8,10 @@ align-items: center; } -.direction { - margin: 0 4px; +.arrow { + width: 20px; + height: 20px; + transform: rotate(180deg); } :global(.ant-tag) a.link { diff --git a/src/content/blockscout/components/MainAddressLabel/index.tsx b/src/content/blockscout/components/MainAddressLabel/index.tsx index 0555965..6cd4c9b 100644 --- a/src/content/blockscout/components/MainAddressLabel/index.tsx +++ b/src/content/blockscout/components/MainAddressLabel/index.tsx @@ -33,7 +33,9 @@ const MainAddressLabel: FC = ({ {label.startsWith('0x') ? address.truncate(label) : label} {implementLabel?.trim() && implementAddress && (
- {'->'} + + + Date: Fri, 8 Mar 2024 11:51:01 +0400 Subject: [PATCH 15/16] feat: Blockscout - clean up --- src/common/config/allowlist.ts | 2 +- src/common/constants/support.ts | 6 +----- src/content/blockscout/feat-scripts/main-address-label.tsx | 5 ----- .../blockscout/feat-scripts/transaction-explanation.tsx | 4 ---- src/content/blockscout/index.tsx | 4 ---- 5 files changed, 2 insertions(+), 19 deletions(-) diff --git a/src/common/config/allowlist.ts b/src/common/config/allowlist.ts index dad8929..fe5d91b 100644 --- a/src/common/config/allowlist.ts +++ b/src/common/config/allowlist.ts @@ -37,5 +37,5 @@ export default { OPENSEA_MATCHES: ['*://*.opensea.io/*'], TRONSCAN_MATCHES: ['*://*.tronscan.org/*'], SNOWTRACE_MATCHES: ['*://*.snowtrace.io/*'], - BLOCKSCOUT_MATCHES: ['*://*.blockscout.com/*'] + BLOCKSCOUT_MATCHES: ['*://*.blockscout.com/*', '*://localhost:3000/*'] } diff --git a/src/common/constants/support.ts b/src/common/constants/support.ts index 4bb6ce3..9177e44 100644 --- a/src/common/constants/support.ts +++ b/src/common/constants/support.ts @@ -51,11 +51,7 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [ }, { name: 'ETH (Blockscout)', - domains: [ - 'eth.blockscout.com', - 'localhost:3000', - 'review-tom2drum-metasuites-placeholders.k8s-dev.blockscout.com' - ], + domains: ['eth.blockscout.com'], chainID: 1, chain: 'eth', siteName: 'BLOCKSCOUT', diff --git a/src/content/blockscout/feat-scripts/main-address-label.tsx b/src/content/blockscout/feat-scripts/main-address-label.tsx index d73872c..166bac7 100644 --- a/src/content/blockscout/feat-scripts/main-address-label.tsx +++ b/src/content/blockscout/feat-scripts/main-address-label.tsx @@ -19,16 +19,11 @@ const genMainAddressLabel = async (chain: string, addressHash: string) => { '#meta-suites__address-tag' ]) - console.log('__>__', { isDataLoaded }) - if (!isDataLoaded) return - console.log('__>__', { addressHash }) - await chromeEvent .emit(GET_IMPL_LABELS, { chain: chain, addresses: [addressHash] }) .then((res: CallbackResponse | undefined) => { - console.log('__>__', { res }) if (res?.success && res.data.length) { const label = res.data[0].label if (label) { diff --git a/src/content/blockscout/feat-scripts/transaction-explanation.tsx b/src/content/blockscout/feat-scripts/transaction-explanation.tsx index 0c5b6ab..5f7f094 100644 --- a/src/content/blockscout/feat-scripts/transaction-explanation.tsx +++ b/src/content/blockscout/feat-scripts/transaction-explanation.tsx @@ -32,15 +32,11 @@ const genTransactionExplanationBtn = async (chain: string, txHash: string) => { '#meta-suites__tx-info-label' ]) - console.log('__>__', { isDataLoaded }) - if (!isDataLoaded) return const txInfoLabelEl = $('#meta-suites__tx-info-label') const txStatus = txInfoLabelEl.data('status') - console.log('__>__', { txHash, txStatus }) - if (!(txStatus === 'ok' || txStatus === 'error')) { return } diff --git a/src/content/blockscout/index.tsx b/src/content/blockscout/index.tsx index baa23f5..d90c04a 100644 --- a/src/content/blockscout/index.tsx +++ b/src/content/blockscout/index.tsx @@ -20,13 +20,9 @@ export const initBlockscout = async () => { /** get the necessary parameters required by the extension */ const chain: string | undefined = getChainSimpleName() - console.log('__>__', { supportWebList, allowed, chain }) - if (!allowed || !chain) return page.runScript((pageName: string) => { - console.log('__>__', { pageName }) - switch (pageName) { case BLOCKSCOUT_PAGES.TX.name: { const { pattern } = BLOCKSCOUT_PAGES[pageName as BlockscoutPageName] From a9a92162ef610ad0d89251bd0af12238da5e3359 Mon Sep 17 00:00:00 2001 From: tom Date: Fri, 8 Mar 2024 11:57:21 +0400 Subject: [PATCH 16/16] feat: Blockscout - clean up --- src/common/config/allowlist.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/config/allowlist.ts b/src/common/config/allowlist.ts index fe5d91b..dad8929 100644 --- a/src/common/config/allowlist.ts +++ b/src/common/config/allowlist.ts @@ -37,5 +37,5 @@ export default { OPENSEA_MATCHES: ['*://*.opensea.io/*'], TRONSCAN_MATCHES: ['*://*.tronscan.org/*'], SNOWTRACE_MATCHES: ['*://*.snowtrace.io/*'], - BLOCKSCOUT_MATCHES: ['*://*.blockscout.com/*', '*://localhost:3000/*'] + BLOCKSCOUT_MATCHES: ['*://*.blockscout.com/*'] }