Merge pull request #38 from okfe/develop

feat: Add OKX explorer

src/common/components/ModalFundFlow/graph.ts

@@ -32,7 +32,8 @@ export const nodeHover = (
   ele: Selection<BaseType, unknown, null, undefined>,
   key: string,
   nodeData: FundFlowNode,
-  onEditPrivateLabel: (node: FundFlowNode) => void
+  onEditPrivateLabel: (node: FundFlowNode) => void,
+  formatNodeUrl?: (node: FundFlowNode) => string
 ) => {
   const isSupportChain =
     SLEUTH_SUPPORT_LIST.findIndex(chain => chain === key.split('-')[0]) !== -1
@@ -55,7 +56,8 @@ export const nodeHover = (
         window.open(nodeData.url)
       }
     } else {
-      window.open(nodeData.url)
+      const url = formatNodeUrl ? formatNodeUrl(nodeData) : nodeData.url
+      window.open(url)
     }
   })
 
@@ -249,7 +251,8 @@ export const clearGraphTemp = () => {
 
 export const initNodes = (
   fundFlow: FundFlowRes,
-  onEditPrivateLabel: (node: FundFlowNode) => void
+  onEditPrivateLabel: (node: FundFlowNode) => void,
+  formatNodeUrl?: (node: FundFlowNode) => string
 ) => {
   const nodes = selectAll('#graph0  .node')
 
@@ -280,7 +283,7 @@ export const initNodes = (
     node.on('mouseenter', () => {
       nodeStrokeWidthChange(node, '#00a54c', '3')
 
-      nodeHover(node, d3Ele.key, item, onEditPrivateLabel)
+      nodeHover(node, d3Ele.key, item, onEditPrivateLabel, formatNodeUrl)
     })
 
     node.on('mouseleave', () => {

src/common/components/ModalFundFlow/index.tsx

@@ -57,6 +57,7 @@ interface Props {
   mainAddress: string
   chain: string
   onClose: () => void
+  formatNodeUrl?: (node: FundFlowNode) => string
 }
 
 interface Error {
@@ -68,7 +69,8 @@ const ModalFundFlowGraph: FC<Props> = ({
   visible,
   mainAddress,
   chain,
-  onClose
+  onClose,
+  formatNodeUrl
 }) => {
   const [token] = useStore('token')
 
@@ -347,10 +349,14 @@ const ModalFundFlowGraph: FC<Props> = ({
           useWorker: false
         })
         .on('end', () => {
-          initNodes(fundFlow, (node: FundFlowNode) => {
-            setEditingNode(node)
-            setModeAddPrivateLabelVisible(true)
-          })
+          initNodes(
+            fundFlow,
+            (node: FundFlowNode) => {
+              setEditingNode(node)
+              setModeAddPrivateLabelVisible(true)
+            },
+            formatNodeUrl
+          )
         })
 
       const imgList = getFundFlowImages(fundFlow)

src/common/config/allowlist.ts

@@ -43,5 +43,6 @@ export default {
   DEBANK_MATCHES: ['*://debank.com/*'],
   ARKHAM_MATCHES: ['*://platform.arkhamintelligence.com/*'],
   DEX_MATCHES: ['*://dexscreener.com/*'],
-  JITO_MATCHES: ['*://explorer.jito.wtf/bundle/*']
+  JITO_MATCHES: ['*://explorer.jito.wtf/bundle/*'],
+  OKLINK_MATCHES: ['*://*.oklink.com/*', '*://*.okx.com/*web3/explorer/*']
 }

src/common/constants/support.ts

@@ -464,6 +464,18 @@ export const EXT_SUPPORT_WEB_LIST: ExtSupportWebsite[] = [
     domains: ['dexscreener.com'],
     siteName: 'DEX',
     logo: 'https://assets.blocksec.com/image/1716165286476-4.svg'
+  },
+  {
+    name: 'OKLink Explorer',
+    domains: ['www.oklink.com'],
+    siteName: 'OKLINK',
+    logo: 'https://assets.blocksec.com/image/1729766376596-2.jpeg'
+  },
+  {
+    name: 'OKX Explorer',
+    domains: ['www.okx.com'],
+    siteName: 'OKX',
+    logo: 'https://assets.blocksec.com/image/1729766376596-3.jpeg'
   }
 ]
 

src/content/factory.ts

@@ -14,6 +14,7 @@ import { SolanaExplorerInitializer } from '@src/content/solanaexpl'
 import { DebankInitializer } from '@src/content/debank'
 import { ArkhamInitializer } from '@src/content/arkham'
 import { JitoInitializer } from '@src/content/jito'
+import { OKLinkInitializer } from '@src/content/oklink'
 
 export type Initializer<T> = {
   matches: string[]
@@ -47,7 +48,8 @@ export const createInitializer = (url: string, all_frames = false) => {
         SolanaExplorerInitializer,
         DebankInitializer,
         ArkhamInitializer,
-        JitoInitializer
+        JitoInitializer,
+        OKLinkInitializer
       ]
   return createInitializerFromMap(url, initializers)
 }

src/content/oklink/components/AddressLabels/index.module.less

@@ -0,0 +1,11 @@
+@import '@common/styles/common.less';
+
+.address {
+  white-space: nowrap;
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}

src/content/oklink/components/AddressLabels/index.tsx

@@ -0,0 +1,32 @@
+import { type FC, useMemo } from 'react'
+
+import { Tooltip } from 'antd'
+import { TokenSymbol } from '@common/components'
+import styles from './index.module.less'
+
+interface Props {
+  label: string
+  address: string
+}
+
+const AddressLabels: FC<Props> = ({ label, address }) => {
+  const title = useMemo(() => {
+    return (
+      <div className={styles.title}>
+        <div>{label}</div>
+        <div>{address}</div>
+      </div>
+    )
+  }, [])
+  return (
+    <Tooltip className={styles.address} title={title}>
+      <TokenSymbol
+        size={14.4}
+        style={{ marginRight: 4, verticalAlign: 'middle' }}
+      />
+      <span style={{ verticalAlign: 'middle' }}>{label}</span>
+    </Tooltip>
+  )
+}
+
+export default AddressLabels

src/content/oklink/components/ComplianceScoreLabel/index.module.less

@@ -0,0 +1,35 @@
+@import '@common/styles/common.less';
+
+.complianceScoreLabel {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  width: fit-content;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  cursor: pointer;
+  .iconRisk {
+    width: 16px;
+    height: 16px;
+  }
+
+  color: #2ead65;
+  background: #d2f9e3;
+  &.medium-risk {
+    color: #d29801;
+    background: #fff2d1;
+  }
+
+  &.high-risk {
+    color: #f16514;
+    background: #fce3d4;
+  }
+
+  &.critical-risk {
+    color: #eb4747;
+    background: #ffdfdf;
+  }
+}

src/content/oklink/components/ComplianceScoreLabel/index.tsx

@@ -0,0 +1,53 @@
+import { type FC } from 'react'
+import classNames from 'classnames'
+import { Tooltip } from 'antd'
+
+import { type AddressRiskLevel } from '@common/constants'
+
+import styles from './index.module.less'
+import { getOKLinkImage } from '../../utils'
+import { AddressRisk } from '../../constant/addressRisk'
+
+interface Props {
+  risk: AddressRiskLevel
+}
+
+const MAILTO_URL = 'mailto:metadockteam@blocksec.com'
+
+const ComplianceScoreLabel: FC<Props> = ({ risk }) => {
+  const riskOpt = Object.values(AddressRisk).find(item => item.value === risk)
+
+  if (!riskOpt) {
+    return null
+  }
+
+  return (
+    <Tooltip
+      overlayInnerStyle={{ width: 288 }}
+      title={
+        <div>
+          <a href={MAILTO_URL} target="_blank">
+            Contact us{' '}
+          </a>
+          for any questions regarding compliance risk assessment by algorithm.
+        </div>
+      }
+    >
+      <div
+        className={classNames(
+          styles.complianceScoreLabel,
+          styles[riskOpt.icon]
+        )}
+      >
+        <img
+          className={styles.iconRisk}
+          src={getOKLinkImage(riskOpt.icon)}
+          alt=""
+        />
+        {riskOpt.label}
+      </div>
+    </Tooltip>
+  )
+}
+
+export default ComplianceScoreLabel

src/content/oklink/components/ExportTableDataBtn/index.module.less

@@ -0,0 +1,20 @@
+.dropdownBox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  height: 32px;
+  padding: 0 8px;
+  color: #000;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  border-radius: 4px;
+  background: #f9f9f9;
+}
+
+.img {
+  width: 16px;
+  height: 16px;
+}