feat: implement tools page address conversion (#287)

* feat: implement tools page address conversion

* chore: change antd to radixui & remove deprecated address parser

* fix: ui display error

* feat: change the language menu to more

* feat: mobile header support language modal

* chore: optimize header more menu style

* chore: fix typo

* chore: remove unnecessary trigger

package.json

@@ -4,9 +4,14 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "4.8.1",
-    "@ckb-lumos/base": "0.21.0-next.1",
+    "@ckb-lumos/base": "0.22.1",
+    "@ckb-lumos/config-manager": "0.22.1",
+    "@ckb-lumos/helpers": "0.22.1",
     "@microlink/react-json-view": "1.23.0",
     "@nervosnetwork/ckb-sdk-utils": "0.109.1",
+    "@radix-ui/react-icons": "1.3.0",
+    "@radix-ui/react-radio-group": "1.1.3",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@rgbpp-sdk/ckb": "0.0.0-snap-20240408100333",
     "@sentry/react": "7.94.1",
     "@sentry/tracing": "7.94.1",

src/components/CommonSelect/index.module.scss

@@ -2,7 +2,6 @@
   position: relative;
   font-size: 14px;
   padding: 11px 8px;
-  margin: 0 0 1rem;
   border-radius: 4px;
   border: 1px solid #e5e5e5;
   background: white;

src/components/CommonSelect/index.tsx

@@ -74,8 +74,8 @@ function CommonSelect({ options, onChange, defaultValue, placeholder, className
 
   return (
     <OutsideClickHandler onOutsideClick={() => setIsExpanded(false)}>
-      <div className={classNames(styles.select, className)}>
-        <div onClick={toggleExpand} className={styles.value}>
+      <div onClick={toggleExpand} className={classNames(styles.select, className)}>
+        <div className={styles.value}>
           {value ?? placeholder}
           <img src={Arrow} alt="arrow" className={styles.arrow} data-is-flipped={isExpanded} />
         </div>

src/components/CopyableText/index.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ReactComponent as CopyIcon } from './copy.svg'
+import { useSetToast } from '../Toast'
+import styles from './styles.module.scss'
+
+const CopyableText: FC<{
+  children: string
+}> = ({ children: text }) => {
+  const { t } = useTranslation()
+  const setToast = useSetToast()
+
+  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const { detail } = e.currentTarget.dataset
+    if (!detail) return
+    navigator.clipboard.writeText(detail).then(() => {
+      setToast({ message: t('common.copied') })
+    })
+  }
+
+  const content = (
+    <>
+      {text}
+
+      <button type="button" className={styles.copy} onClick={handleCopy} data-detail={text}>
+        <CopyIcon />
+      </button>
+    </>
+  )
+
+  return content
+}
+
+export default CopyableText

src/components/CopyableText/styles.module.scss

@@ -0,0 +1,17 @@
+.copy {
+  appearance: none;
+  border: none;
+  background: none;
+  width: 14px;
+  cursor: pointer;
+  height: 14px;
+  margin-left: 4px;
+  margin-top: -4px;
+  vertical-align: middle;
+  display: inline;
+  color: var(--primary-color);
+
+  svg {
+    pointer-events: none;
+  }
+}

src/components/Header/LanguageComp/LanguageModal.tsx

@@ -0,0 +1,49 @@
+import { useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useCurrentLanguage, SupportedLngs, useChangeLanguage } from '../../../utils/i18n'
+import CommonModal from '../../CommonModal'
+import CommonSelect from '../../CommonSelect'
+import CloseIcon from '../../../assets/modal_close.png'
+import styles from './style.module.scss'
+
+export const LanguageModal = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation()
+  const ref = useRef<HTMLDivElement>(null)
+  const currentLanguage = useCurrentLanguage()
+  const { changeLanguage } = useChangeLanguage()
+
+  const handleLanguageChange = (lng: string) => {
+    changeLanguage(lng)
+  }
+
+  return (
+    <CommonModal isOpen onClose={onClose}>
+      <div ref={ref} className={styles.modalWrapper}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.modalTitle}>
+            <p>{t('navbar.language')}</p>
+            <button type="button" onClick={onClose} className={styles.closeBtn}>
+              <img src={CloseIcon} alt="close icon" />
+            </button>
+          </div>
+
+          <div className={styles.modalContent}>
+            <CommonSelect
+              className={styles.languageSelect}
+              options={SupportedLngs.map(lng => ({
+                value: lng,
+                label: t(`navbar.language_${lng}`),
+              }))}
+              onChange={handleLanguageChange}
+              defaultValue={currentLanguage}
+            />
+          </div>
+
+          <button type="button" className={styles.doneBtn} onClick={onClose}>
+            {t('nervos_dao.done')}
+          </button>
+        </div>
+      </div>
+    </CommonModal>
+  )
+}

src/components/Header/LanguageComp/style.module.scss

@@ -0,0 +1,69 @@
+@import '../../../styles/variables.module';
+
+.contentWrapper {
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  width: 80vw;
+  max-width: 280px;
+  padding: 24px;
+
+  @media screen and (width <= 750px) {
+    padding: 16px;
+    width: calc(100vw - 32px);
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.modalTitle {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  color: #333;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.modalContent {
+  width: 100%;
+  margin-top: 32px;
+}
+
+.languageSelect {
+  color: #333;
+}
+
+.closeBtn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  img {
+    width: 13px;
+    height: 13px;
+  }
+}
+
+.doneBtn {
+  width: 100%;
+  margin-top: 32px;
+  height: 47px;
+  background: var(--primary-color);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.loading {
+  text-align: center;
+}

src/components/Header/MenusComp/index.module.scss

@@ -25,6 +25,19 @@
     transition: transform 0.1s;
   }
 
+  .moreIcon {
+    width: 22px;
+    height: 22px;
+    color: white;
+    transition: all 0.2s;
+  }
+
+  &:hover {
+    .moreIcon {
+      color: var(--primary-color);
+    }
+  }
+
   /* stylelint-disable-next-line selector-class-pattern */
   &:global(.ant-dropdown-open) {
     .icon {
@@ -42,3 +55,33 @@
     transition: transform 0.1s;
   }
 }
+
+.headerMenusItem {
+  color: white;
+  display: flex;
+  align-items: center;
+  margin-right: 56px;
+  font-size: 14px;
+  font-weight: regular;
+
+  @media (width <= 1505px) {
+    margin-right: calc(56px - (1505px - 100vw) / 8);
+  }
+
+  @media (width <= 1200px) {
+    margin-right: 20px;
+  }
+
+  @media (width >= 1024px) and (width <= 1044px) {
+    margin-right: calc(56px - ((1440px - 100vw) * calc((56 - 8) / (1440 - 1024))));
+  }
+
+  &:hover {
+    font-weight: medium;
+    color: var(--primary-color);
+  }
+}
+
+.moreMenus {
+  margin-right: 0;
+}