Merge pull request #1361 from nervosnetwork/testnet

nervosnetwork · Oct 24, 2023 · 80724d5 · 80724d5
2 parents a619d1f + 865d9aa
commit 80724d5
Show file tree

Hide file tree

Showing 83 changed files with 1,532 additions and 690 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,13 +1,15 @@
 .DS_Store
 .vscode
 .idea/
+.eslintcache
 
 node_modules/
 build/
 dist/
 npm-debug.log
 *.log
 coverage/
+dist/
 *.orig
 *.swp
 *.bak

diff --git a/renovate.json b/renovate.json
@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }
diff --git a/src/components/Card/HashCard/index.tsx b/src/components/Card/HashCard/index.tsx
@@ -1,11 +1,12 @@
 import type { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
-import { Tooltip } from 'antd'
+import { Radio, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
+import { LayoutLiteProfessional } from '../../../constants/common'
 import CopyIcon from '../../../assets/copy.png'
 import { explorerService } from '../../../services/ExplorerService'
 import SmallLoading from '../../Loading/SmallLoading'
-import { useIsMobile, useNewAddr, useDeprecatedAddr } from '../../../utils/hook'
+import { useIsMobile, useNewAddr, useDeprecatedAddr, useSearchParams, useUpdateSearchParams } from '../../../utils/hook'
 import SimpleButton from '../../SimpleButton'
 import { ReactComponent as OpenInNew } from '../../../assets/open_in_new.svg'
 import { ReactComponent as DownloadIcon } from '../../../assets/download_tx.svg'
@@ -48,6 +49,7 @@ export default ({
   showDASInfoOnHeader?: boolean | string
 }) => {
   const isMobile = useIsMobile()
+  const { Professional, Lite } = LayoutLiteProfessional
   const setToast = useSetToast()
   const { t } = useTranslation()
 
@@ -56,6 +58,19 @@ export default ({
   const deprecatedAddr = useDeprecatedAddr(hash)
   const counterpartAddr = newAddr === hash ? deprecatedAddr : newAddr
 
+  const searchParams = useSearchParams('layout')
+  const defaultLayout = Professional
+  const updateSearchParams = useUpdateSearchParams<'layout'>()
+  const layout = searchParams.layout === Lite ? Lite : defaultLayout
+
+  const onChangeLayout = (layoutType: LayoutLiteProfessional) => {
+    updateSearchParams(params =>
+      layoutType === defaultLayout
+        ? Object.fromEntries(Object.entries(params).filter(entry => entry[0] !== 'layout'))
+        : { ...params, layout: layoutType },
+    )
+  }
+
   const handleExportTxClick = async () => {
     const res = await explorerService.api.requesterV2(`transactions/${hash}/raw`).catch(error => {
       setToast({ message: error.message })
@@ -86,7 +101,6 @@ export default ({
             <div className="hashTitle">{title}</div>
           </>
         )}
-
         <div className={styles.hashCardHeaderRight}>
           <div className="hashCardHashContent">
             {loading ? (
@@ -133,11 +147,26 @@ export default ({
             ) : null}
           </div>
 
+          {!isMobile && isTx && !loading ? (
+            <div className={styles.professionalLiteBox}>
+              <Radio.Group
+                className={styles.layoutButtons}
+                options={[
+                  { label: t('transaction.professional'), value: Professional },
+                  { label: t('transaction.lite'), value: Lite },
+                ]}
+                onChange={({ target: { value } }) => onChangeLayout(value)}
+                value={layout}
+                optionType="button"
+                buttonStyle="solid"
+              />
+            </div>
+          ) : null}
+
           {(showDASInfoOnHeader || showDASInfoOnHeader === '') && (
             <DASInfo address={typeof showDASInfoOnHeader === 'string' ? showDASInfoOnHeader : hash} />
           )}
         </div>
-
         {specialAddress && (
           <Tooltip title={t('address.vesting_tooltip')} placement={isMobile ? 'bottomRight' : 'bottom'}>
             <Link to={`/address/${specialAddress}`} className="hashVesting">
@@ -149,6 +178,23 @@ export default ({
           {hash}
         </div>
       </div>
+
+      {isMobile && isTx && !loading ? (
+        <div className={styles.professionalLiteBox}>
+          <Radio.Group
+            className={styles.layoutButtons}
+            options={[
+              { label: t('transaction.professional'), value: Professional },
+              { label: t('transaction.lite'), value: Lite },
+            ]}
+            onChange={({ target: { value } }) => onChangeLayout(value)}
+            value={layout}
+            optionType="button"
+            buttonStyle="solid"
+          />
+        </div>
+      ) : null}
+
       {children}
     </HashCardPanel>
   )

diff --git a/src/components/Card/HashCard/styles.module.scss b/src/components/Card/HashCard/styles.module.scss
@@ -85,3 +85,57 @@
     color: #333;
   }
 }
+
+.professionalLiteBox {
+  margin-left: 10px;
+
+  .layoutButtons {
+    > label {
+      height: 40px;
+      width: 120px;
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 38px;
+      color: #333;
+      border: 1px solid #e5e5e5;
+      box-shadow: none !important;
+
+      &::before {
+        content: none !important;
+      }
+
+      &:hover {
+        color: #333;
+        background: #fff;
+      }
+
+      &:first-child {
+        border-radius: 4px 0 0 4px;
+      }
+
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
+
+      &:global(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
+        background: #333;
+        border-color: #333 !important;
+
+        &:hover {
+          background: #333;
+        }
+      }
+    }
+
+    @media screen and (width <= 750px) {
+      width: 100%;
+      margin: 6px 0 20px;
+
+      > label {
+        height: 40px;
+        width: 50%;
+      }
+    }
+  }
+}
diff --git a/src/components/Card/OverviewCard/index.tsx b/src/components/Card/OverviewCard/index.tsx
@@ -10,20 +10,20 @@ export type OverviewItemData = {
   content: ReactNode
   contentWrapperClass?: string
   filled?: boolean
-  icon?: any
+  icon?: string
   isAsset?: boolean
   tooltip?: TooltipProps['title']
   valueTooltip?: string
 } | null
 
 const handleOverviewItems = (items: OverviewItemData[], isMobile: boolean) => ({
-  leftItems: isMobile ? items : items.filter((_item: any, index: number) => index % 2 === 0),
-  rightItems: isMobile ? [] : items.filter((_item: any, index: number) => index % 2 !== 0),
+  leftItems: isMobile ? items : items.filter((_item, index) => index % 2 === 0),
+  rightItems: isMobile ? [] : items.filter((_item, index) => index % 2 !== 0),
 })
 
 export const OverviewItem = ({ item, hideLine }: { item: OverviewItemData; hideLine: boolean }) =>
   item ? (
-    <OverviewItemPanel hideLine={hideLine} hasIcon={item.icon} isAsset={item.isAsset}>
+    <OverviewItemPanel hideLine={hideLine} hasIcon={!!item.icon} isAsset={item.isAsset}>
       <div className="overviewItemTitlePanel">
         {item.icon && (
           <div className="overviewItemIcon">

diff --git a/src/components/Card/TitleCard/index.tsx b/src/components/Card/TitleCard/index.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames'
+import { ReactNode } from 'react'
 import { TitleCardPanel } from './styled'
 
 export default ({
@@ -8,10 +9,10 @@ export default ({
   rear,
   rearClassName,
 }: {
-  title: React.ReactNode
+  title: ReactNode
   isSingle?: boolean
   className?: string
-  rear?: React.ReactNode
+  rear?: ReactNode
   rearClassName?: string
 }) => (
   <TitleCardPanel isSingle={isSingle} className={className} hasRear={!!rear}>

diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { CSSProperties, ReactNode } from 'react'
 import styled from 'styled-components'
 
 const ContentPanel = styled.div`
@@ -7,6 +7,6 @@ const ContentPanel = styled.div`
   flex: 1;
   background: #ededed;
 `
-export default ({ children, style }: { children: ReactNode; style?: any }) => {
+export default ({ children, style }: { children: ReactNode; style?: CSSProperties }) => {
   return <ContentPanel style={style}>{children}</ContentPanel>
 }
diff --git a/src/components/DecimalCapacity/index.tsx b/src/components/DecimalCapacity/index.tsx
@@ -1,23 +1,27 @@
+import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { DecimalPanel, DecimalPartPanel, DecimalZerosPanel } from './styled'
+import styles from './styles.module.scss'
 
 export default ({
   value,
   fontSize,
-  color,
+  balanceChangeType = 'none',
   hideUnit,
   hideZero,
   marginBottom = '1px',
 }: {
   value: string
+  balanceChangeType?: 'payment' | 'income' | 'none'
   fontSize?: string
-  color?: string
   hideUnit?: boolean
   hideZero?: boolean
   marginBottom?: string
 }) => {
   const { t } = useTranslation()
   const integer = value.split('.')[0] || '0'
+  const isPayment = balanceChangeType === 'payment'
+  const balanceChangeTypeClass = isPayment ? 'subtraction' : 'addition'
   let decimal = value.split('.')[1] || ''
   let zeros = ''
 
@@ -33,16 +37,24 @@ export default ({
 
   return (
     <DecimalPanel>
-      <span>{integer}</span>
-      <DecimalPartPanel className="monospace" fontSize={fontSize} color={color} marginBottom={marginBottom}>
+      <span className={classNames(balanceChangeTypeClass, styles.intergerPart)}>{integer}</span>
+      <DecimalPartPanel
+        className={`monospace ${balanceChangeTypeClass}`}
+        fontSize={fontSize}
+        marginBottom={marginBottom}
+      >
         {decimal}
       </DecimalPartPanel>
       {!hideZero && (
-        <DecimalZerosPanel className="monospace" fontSize={fontSize} color={color} marginBottom={marginBottom}>
+        <DecimalZerosPanel
+          className={`monospace ${balanceChangeTypeClass}`}
+          fontSize={fontSize}
+          marginBottom={marginBottom}
+        >
           {zeros}
         </DecimalZerosPanel>
       )}
-      {!hideUnit && <div className="decimalUnit monospace">{t('common.ckb_unit')}</div>}
+      {!hideUnit && <div className={`decimalUnit monospace ${balanceChangeTypeClass}`}>{t('common.ckb_unit')}</div>}
     </DecimalPanel>
   )
 }
diff --git a/src/components/DecimalCapacity/styled.tsx b/src/components/DecimalCapacity/styled.tsx
@@ -5,6 +5,14 @@ export const DecimalPanel = styled.div`
   justify-content: flex-end;
   align-items: flex-end;
 
+  .subtraction {
+    color: var(--accent-color);
+  }
+
+  .addition {
+    color: var(--primary-color);
+  }
+
   .decimalUnit {
     margin-left: 5px;
 
@@ -17,7 +25,7 @@ export const DecimalPanel = styled.div`
 export const DecimalPartPanel = styled.div`
   margin-bottom: ${(props: { marginBottom: string }) => (props.marginBottom ? props.marginBottom : '1px')};
   font-size: ${(props: { fontSize?: string; color?: string; marginBottom: string }) =>
-    props.fontSize ? props.fontSize : '12px'};
+    props.fontSize ? props.fontSize : '14px'};
   color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')};
 
   @media (max-width: 1000px) {
@@ -32,7 +40,7 @@ export const DecimalPartPanel = styled.div`
 export const DecimalZerosPanel = styled.div`
   margin-bottom: ${(props: { marginBottom: string }) => (props.marginBottom ? props.marginBottom : '1px')};
   font-size: ${(props: { fontSize?: string; color?: string; marginBottom: string }) =>
-    props.fontSize ? props.fontSize : '12px'};
+    props.fontSize ? props.fontSize : '14px'};
   color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')};
 
   @media (max-width: 1000px) {

diff --git a/src/components/DecimalCapacity/styles.module.scss b/src/components/DecimalCapacity/styles.module.scss
@@ -0,0 +1,3 @@
+.intergerPart {
+  font-size: 16px;
+}