From 74bcdf4d302c8e9a1b3ed1bc24921f855946aa04 Mon Sep 17 00:00:00 2001
From: WhiteMind <WhiteMind@qq.com>
Date: Tue, 19 Sep 2023 19:40:59 +0800
Subject: [PATCH] feat: improve field annotation ui in the nervos dao page
 (#102)

---
 src/locales/en.json                        |  2 +-
 src/locales/zh.json                        |  2 +-
 src/pages/NervosDao/DaoOverview/index.tsx  | 22 ++++++++++++----------
 src/pages/NervosDao/DaoOverview/styled.tsx |  5 +++--
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 763bbb8db..439872180 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -67,7 +67,7 @@
       "block_mined": "The number of block this address has minted",
       "args": "In CKB, the public key information can be stored in the args field in the script structure. The args is used when script executing, e.g. the args can be a public key hash when the script is used to verify the owner of a private key",
       "capacity_change": "The change in CKB balance for this address before and after the transaction.",
-      "estimated_apc": "Estimated Annual Percentage XXXX",
+      "estimated_apc": "Estimated Annual Percentage Compensation",
       "secondary_issuance": "Secondary Issuance in CKB refers to a fixed inflation schedule of 1.344 billion CKBytes per year that is used to incentivize miners, Nervos DAO users, and the Nervos Treasury for continued development. Unlike Base Issuance, Secondary Issuance is not distributed to everyone on the network, but rather targeted at users who occupy space on Nervos or hold their CKBytes outside of Nervos DAO. The CKBytes from Secondary Issuance are used to collect state rent and are distributed to miners who maintain the network (State Rent), Nervos DAO users, and the Nervos Treasury. CKBytes holders can lock their tokens in Nervos DAO to gain interest in a similar manner to staking on other platforms, which offsets the long-term inflationary effects of Secondary Issuance exactly, resulting in no loss of value over time.",
       "cota": "A kind of NFT protocal. A Compact Token Aggregator Standard for Extremely Low Cost NFTs and FTs. For more details, please check the <cota_link>CoTA RDC</cota_link>",
       "m_nft": "The NFT Type Scripts implement of RFC: Multi-purpose NFT Draft Spec on Nervos CKB. For more details, please check the <m_nft_link>CKB-NFT-Script</m_nft_link>",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 02e6d8622..e567bf131 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -67,7 +67,7 @@
       "block_mined": "该地址已铸造的区块数量",
       "args": "在 CKB 中，公钥信息可以存储在脚本结构的 args 字段中。args 在脚本执行时使用，例如，当脚本用于验证私钥的所有者时，args 可以是公钥哈希。",
       "capacity_change": "该地址在交易前后 CKB 余额的变化值",
-      "estimated_apc": "预估年收益率 XXXX",
+      "estimated_apc": "预估年补贴率",
       "secondary_issuance": "在 CKB 中，二级发行 (Secondary Issuance) 指的是每年固定通胀的计划，即每年新增 134.4 亿 CKBytes，用于激励矿工、Nervos DAO 用户和 Nervos 财政部继续发展。与基础发行不同，二级发行并不分发给网络上的所有人，而是针对那些在 Nervos 上占用空间及没有将 CKBytes 充值到 Nervos DAO 的用户。来自二级发行的 CKBytes 的设计目的是收取状态租金，并分发给维护网络的矿工 (状态租金)、Nervos DAO 用户和 Nervos 财政部。CKBytes 持有者可以将其代币锁定在 Nervos DAO 中，以类似于其他平台上的质押方式获得利息，从而完全抵消了二级发行的长期通胀效应，使得价值不会随时间流逝而减少。",
       "cota": "一种 NFT 协议。一种用于极低成本 NFT 和 FT 的紧凑型代币聚合标准。更多详细信息，请查阅 <cota_link>CoTA RDC</cota_link>",
       "m_nft": "NFT 类型脚本是 RFC——Nervos CKB 上多用途 NFT 草案规范——的实现。更多详细信息，请查阅 <m_nft_link>CKB-NFT-Script</m_nft_link>",
diff --git a/src/pages/NervosDao/DaoOverview/index.tsx b/src/pages/NervosDao/DaoOverview/index.tsx
index da830efb3..335ddacfd 100644
--- a/src/pages/NervosDao/DaoOverview/index.tsx
+++ b/src/pages/NervosDao/DaoOverview/index.tsx
@@ -27,6 +27,7 @@ import { shannonToCkbDecimal, shannonToCkb } from '../../../utils/util'
 import DecimalCapacity from '../../../components/DecimalCapacity'
 import { useIsLGScreen, useIsMobile } from '../../../utils/hook'
 import { ReactChartCore } from '../../StatisticsChart/common'
+import { HelpTip } from '../../../components/HelpTip'
 
 interface NervosDaoItemContent {
   title: string
@@ -111,15 +112,15 @@ const NervosDaoLeftItem = ({ item, firstLine }: { item: NervosDaoItemContent; fi
   <DaoOverviewLeftItemPanel hasChange={!!item.change} symbol={item.changeSymbol} hasTooltip={!!item.titleTooltip}>
     <div className="dao__overview__item__container">
       <div className="dao__overview__item_top">
-        {item.titleTooltip && (
-          <Tooltip placement="top" title={item.titleTooltip}>
-            <span className="dao__overview__item_title">{item.title}</span>
-          </Tooltip>
-        )}
-        {!item.titleTooltip && <span className="dao__overview__item_title">{item.title}</span>}
+        <span className="dao__overview__item_title">{item.title}</span>
+        {item.titleTooltip && <HelpTip title={item.titleTooltip} />}
         {item.change && (
           <>
-            <img src={daoIcon(item.changeSymbol)} alt="nervos dao change icon" />
+            <img
+              className="dao__overview__item_change_icon"
+              src={daoIcon(item.changeSymbol)}
+              alt="nervos dao change icon"
+            />
             <Tooltip placement="top" title={item.tooltip}>
               <span className="dao__overview__item_change">{item.change}</span>
             </Tooltip>
@@ -318,9 +319,10 @@ export default ({ nervosDao }: { nervosDao: State.NervosDao }) => {
       <span className="dao__overview__separate" />
       <DaoOverviewRightPanel>
         <DaoOverviewPieChartPanel>
-          <Tooltip placement="bottom" title={i18n.t('glossary.secondary_issuance')}>
-            <span className="nervos__dao__overview_pie_title">{i18n.t('nervos_dao.secondary_issuance')}</span>
-          </Tooltip>
+          <div className="nervos__dao__overview_pie_title">
+            <span>{i18n.t('nervos_dao.secondary_issuance')}</span>
+            <HelpTip title={i18n.t('glossary.secondary_issuance')} />
+          </div>
           <ReactChartCore
             option={getOption(nervosDao, chartColor.daoColors, isMobile)}
             notMerge
diff --git a/src/pages/NervosDao/DaoOverview/styled.tsx b/src/pages/NervosDao/DaoOverview/styled.tsx
index b7f6b7e9d..bb043c3fa 100644
--- a/src/pages/NervosDao/DaoOverview/styled.tsx
+++ b/src/pages/NervosDao/DaoOverview/styled.tsx
@@ -116,6 +116,8 @@ export const DaoOverviewPieChartPanel = styled.div`
   }
 
   .nervos__dao__overview_pie_title {
+    display: flex;
+    align-items: center;
     font-size: 14px;
     color: #555;
 
@@ -173,7 +175,6 @@ export const DaoOverviewLeftItemPanel = styled.div`
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      cursor: ${(props: { hasTooltip?: boolean }) => (props.hasTooltip ? 'default' : 'text')};
 
       @media (max-width: 1440px) {
         max-width: ${(props: { symbol?: string; hasChange?: boolean; hasTooltip?: boolean }) =>
@@ -190,7 +191,7 @@ export const DaoOverviewLeftItemPanel = styled.div`
       }
     }
 
-    > img {
+    .dao__overview__item_change_icon {
       width: ${(props: { symbol?: string }) => (props.symbol === 'zero' ? '10px' : '7px')};
       height: ${(props: { symbol?: string }) => (props.symbol === 'zero' ? '7px' : '10px')};
       margin-left: 5px;