Merge branch 'develop' of https://github.com/magickbase/ckb-explorer-…

…frontend into develop

src/components/Card/OverviewCard/index.tsx

@@ -1,9 +1,9 @@
 import { isValidElement, ReactNode } from 'react'
-import { Tooltip } from 'antd'
+import { TooltipProps } from 'antd'
 import classNames from 'classnames'
 import { OverviewCardPanel, OverviewContentPanel, OverviewItemPanel } from './styled'
-import HelpIcon from '../../../assets/qa_help.png'
 import { useIsLGScreen, useIsMobile } from '../../../utils/hook'
+import { HelpTip } from '../../HelpTip'
 
 export type OverviewItemData = {
   title: ReactNode
@@ -12,7 +12,7 @@ export type OverviewItemData = {
   filled?: boolean
   icon?: any
   isAsset?: boolean
-  tooltip?: string
+  tooltip?: TooltipProps['title']
   valueTooltip?: string
 } | null
 
@@ -32,20 +32,12 @@ export const OverviewItem = ({ item, hideLine }: { item: OverviewItemData; hideL
         )}
         <div className="overview_item__title">
           <span>{item.title}</span>
-          {item.tooltip && (
-            <Tooltip placement="top" title={item.tooltip}>
-              <img src={HelpIcon} alt="help icon" />
-            </Tooltip>
-          )}
+          {item.tooltip && <HelpTip title={item.tooltip} />}
         </div>
       </div>
       <div className={classNames('overview_item__value', { filled: item.filled }, item.contentWrapperClass)}>
         {isValidElement(item.content) ? item.content : <span>{item.content}</span>}
-        {item.valueTooltip && (
-          <Tooltip placement="top" title={item.valueTooltip}>
-            <img src={HelpIcon} alt="help icon" />
-          </Tooltip>
-        )}
+        {item.valueTooltip && <HelpTip title={item.valueTooltip} />}
       </div>
     </OverviewItemPanel>
   ) : null

src/components/Card/OverviewCard/styled.tsx

@@ -160,6 +160,8 @@ export const OverviewItemPanel = styled.div`
   }
 
   .overview_item__title {
+    display: flex;
+    align-items: center;
     font-size: 16px;
     color: rgb(0 0 0 / 60%);
     margin-left: 0;

src/components/HelpTip/index.module.scss

@@ -0,0 +1,11 @@
+.tooltip {
+  a {
+    color: var(--primary-color);
+  }
+}
+
+.icon {
+  width: 15px;
+  height: 15px;
+  margin: 0 5px;
+}

src/components/HelpTip/index.tsx

@@ -0,0 +1,29 @@
+import { ComponentProps, FC, RefObject } from 'react'
+import { Tooltip, TooltipProps } from 'antd'
+import classNames from 'classnames'
+import HelpIcon from '../../assets/qa_help.png'
+import styles from './index.module.scss'
+import { useIsMobile } from '../../utils/hook'
+
+export const HelpTip: FC<
+  TooltipProps & {
+    iconProps?: ComponentProps<'img'>
+    // Setting a container ref can avoid scrolling together with deeper scrolling containers.
+    containerRef?: RefObject<HTMLDivElement>
+  }
+> = ({ iconProps, containerRef, ...props }) => {
+  const isMobile = useIsMobile()
+
+  const finalProps: TooltipProps = {
+    placement: isMobile ? 'topLeft' : 'top',
+    getPopupContainer: () => containerRef?.current ?? document.body,
+    arrowPointAtCenter: true,
+    ...props,
+  }
+
+  return (
+    <Tooltip {...finalProps} overlayClassName={classNames(styles.tooltip, finalProps.className)}>
+      <img src={HelpIcon} alt="help icon" {...iconProps} className={classNames(styles.icon, iconProps?.className)} />
+    </Tooltip>
+  )
+}

src/components/Pagination/index.tsx

@@ -1,14 +1,13 @@
 import { useState } from 'react'
-import { Tooltip } from 'antd'
 import { PaginationLeftItem, PaginationRightItem, PaginationPanel } from './styled'
 import LeftBlack from '../../assets/pagination_black_left.png'
 import RightBlack from '../../assets/pagination_black_right.png'
 import LeftGrey from '../../assets/pagination_grey_left.png'
 import RightGrey from '../../assets/pagination_grey_right.png'
-import HelpIcon from '../../assets/qa_help.png'
 import i18n from '../../utils/i18n'
 import { useIsMobile } from '../../utils/hook'
 import SimpleButton from '../SimpleButton'
+import { HelpTip } from '../HelpTip'
 
 const Pagination = ({
   currentPage,
@@ -36,11 +35,7 @@ const Pagination = ({
     'pagination.of_page',
   )} ${total} ${i18n.t('pagination.end_page')}`
 
-  const annotationComp = annotation ? (
-    <Tooltip placement="top" title={annotation}>
-      <img src={HelpIcon} alt="annotation" />
-    </Tooltip>
-  ) : null
+  const annotationComp = annotation ? <HelpTip title={annotation} iconProps={{ alt: 'annotation' }} /> : null
 
   const changePage = (page: number) => {
     if (page && page >= 1 && page <= total) {

src/components/Script/index.tsx

@@ -3,11 +3,14 @@ import { ScriptItemPanel, ScriptPanel } from './styled'
 import i18n from '../../utils/i18n'
 import HashTag from '../HashTag'
 import { getContractHashTag } from '../../utils/util'
+import { HelpTip } from '../HelpTip'
 
-const ScriptItem = ({ title, children }: { title: string; children?: ReactNode }) => (
+const ScriptItem = ({ title, tooltip, children }: { title: string; tooltip?: string; children?: ReactNode }) => (
   <ScriptItemPanel>
     <div className="script__title">
       <span>{title}</span>
+      {tooltip && <HelpTip title={tooltip} />}
+      <span>:</span>
     </div>
     <div className="script__content">{children}</div>
   </ScriptItemPanel>
@@ -26,7 +29,7 @@ const Script = ({ script }: { script: State.Script }) => {
       <ScriptItem title={i18n.t('address.hash_type')}>
         <code>{script.hashType}</code>
       </ScriptItem>
-      <ScriptItem title={i18n.t('address.args')}>
+      <ScriptItem title={i18n.t('address.args')} tooltip={i18n.t('glossary.args')}>
         <span className="monospace">{script.args}</span>
       </ScriptItem>
     </ScriptPanel>

src/components/Script/styled.tsx

@@ -45,12 +45,15 @@ export const ScriptItemPanel = styled.div`
     width: 130px;
 
     > span {
-      margin-left: 10px;
       font-weight: 500;
       color: rgb(0 0 0 / 60%);
 
-      @media (max-width: 750px) {
-        margin-left: 5px;
+      &:first-child {
+        margin-left: 10px;
+
+        @media (max-width: 750px) {
+          margin-left: 5px;
+        }
       }
     }
   }

src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss

@@ -1,5 +1,9 @@
 :global(.ant-tooltip) {
   max-width: 320px;
+
+  @media (max-width: 750px) {
+    max-width: 250px;
+  }
 }
 
 .comparedSizeTooltip {

src/components/Transaction/Cellbase/index.tsx

@@ -1,11 +1,11 @@
 import { Link } from 'react-router-dom'
 import { Tooltip } from 'antd'
+import { Trans } from 'react-i18next'
 import { CellbasePanel } from './styled'
 import { CellType } from '../../../constants/common'
 import TransactionCellArrow from '../TransactionCellArrow'
 import { localeNumberString } from '../../../utils/number'
 import HelpIcon from '../../../assets/qa_help.png'
-import i18n from '../../../utils/i18n'
 import styles from './index.module.scss'
 
 const Cellbase = ({ cell, cellType, isDetail }: { cell: State.Cell; cellType: CellType; isDetail?: boolean }) => {
@@ -17,13 +17,15 @@ const Cellbase = ({ cell, cellType, isDetail }: { cell: State.Cell; cellType: Ce
     )
   }
 
-  const tooltipHtml = i18n.t('transaction.cellbase_help_tooltip', {
-    consensus: `<a href="https://docs.nervos.org/docs/basics/concepts/consensus/" target="_blank">${i18n.t(
-      'transaction.consensus_protocol',
-    )}</a>`,
-  })
-  // eslint-disable-next-line react/no-danger
-  const tooltipContent = <div dangerouslySetInnerHTML={{ __html: tooltipHtml }} />
+  const tooltipContent = (
+    <Trans
+      i18nKey="glossary.cellbase_for_block"
+      components={{
+        // eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
+        link1: <a href="https://docs.nervos.org/docs/basics/concepts/consensus/" target="_blank" rel="noreferrer" />,
+      }}
+    />
+  )
 
   return (
     <CellbasePanel isDetail={isDetail}>