fix:update the display of receive address (#2757)

nervosnetwork · Jul 6, 2023 · 9521feb · 9521feb · github-actions · Jul 6, 2023
1 parent 802b957
commit 9521feb
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 96 deletions.
diff --git a/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss b/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss
@@ -173,6 +173,7 @@
     font-weight: 500;
     font-size: 16px;
     line-height: 22px;
+    color: inherit;
   }
 }
 
@@ -228,9 +229,7 @@
       background: var(--third-background-color);
       border-radius: 40px;
       transition: transform 0.1s ease-in-out;
-      transform: translateX(
-        calc(var(--selected-tab) * ($itemWidth - $itemOverlapping))
-      );
+      transform: translateX(calc(var(--selected-tab) * ($itemWidth - $itemOverlapping)));
     }
   }
 

diff --git a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
@@ -117,12 +117,14 @@
   font-weight: 500;
   font-size: 14px;
   justify-content: center;
+  align-items: center;
   position: relative;
   margin-bottom: 16px;
   z-index: 10;
 
   & > svg {
     margin-right: 4px;
+    top: unset;
   }
 
   .close {

diff --git a/packages/neuron-ui/src/components/Receive/multiAddressReceive.tsx b/packages/neuron-ui/src/components/Receive/multiAddressReceive.tsx
@@ -14,6 +14,49 @@ import { useDispatch } from 'states'
 import styles from './receive.module.scss'
 import { useCopyAndDownloadQrCode, useSwitchAddress } from './hooks'
 
+type AddressTransformWithCopyZoneProps = {
+  showAddress: string
+  isInShortFormat: boolean
+  className?: string
+  onClick: () => void
+}
+
+export const AddressTransformWithCopyZone = ({
+  showAddress,
+  isInShortFormat,
+  onClick,
+  className,
+}: AddressTransformWithCopyZoneProps) => {
+  const [t] = useTranslation()
+  const transformLabel = t(
+    isInShortFormat ? 'receive.turn-into-full-version-format' : 'receive.turn-into-deprecated-format'
+  )
+
+  const stopPropagation = useCallback((e: React.SyntheticEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  return (
+    <div className={className}>
+      <CopyZone content={showAddress} className={styles.showAddress}>
+        {showAddress}
+      </CopyZone>
+      <button
+        type="button"
+        className={styles.addressToggle}
+        onClick={onClick}
+        title={transformLabel}
+        onFocus={stopPropagation}
+        onMouseOver={stopPropagation}
+        onMouseUp={stopPropagation}
+      >
+        <AddressTransform />
+        {transformLabel}
+      </button>
+    </div>
+  )
+}
+
 const MultiAddressReceive = ({
   address,
   addresses,
@@ -132,9 +175,7 @@ const MultiAddressReceive = ({
     ],
     [t, localDescription]
   )
-  const stopPropagation = useCallback((e: React.SyntheticEvent) => {
-    e.stopPropagation()
-  }, [])
+
   return (
     <div className={styles.multiAddressRoot}>
       <div className={styles.qrCodeContainer}>
@@ -144,20 +185,13 @@ const MultiAddressReceive = ({
         <div className={styles.qrCode} data-copy-success={showCopySuccess} data-copy-success-text={t('common.copied')}>
           <QRCode value={showAddress} size={128} includeMargin ref={ref} />
         </div>
-        <CopyZone content={showAddress} className={styles.copyAddress}>
-          {showAddress}
-          <button
-            type="button"
-            className={styles.addressToggle}
+        <div className={styles.copyAddress}>
+          <AddressTransformWithCopyZone
+            showAddress={showAddress}
+            isInShortFormat={isInShortFormat}
             onClick={() => setIsInShortFormat(is => !is)}
-            title={t(isInShortFormat ? `receive.turn-into-full-version-format` : `receive.turn-into-deprecated-format`)}
-            onFocus={stopPropagation}
-            onMouseOver={stopPropagation}
-            onMouseUp={stopPropagation}
-          >
-            <AddressTransform />
-          </button>
-        </CopyZone>
+          />
+        </div>
         <div className={styles.actions}>
           <Button
             type="primary"

diff --git a/packages/neuron-ui/src/components/Receive/receive.module.scss b/packages/neuron-ui/src/components/Receive/receive.module.scss
@@ -211,29 +211,40 @@
 }
 
 .copyAddress {
+  margin: 32px 16px 58px 16px;
+}
+
+.showAddress {
   word-break: break-all;
   text-align: center;
-  margin: 32px 16px 82px 16px;
-  line-height: 24px;
+  font-size: 14px;
+  font-style: normal;
   font-family: 'JetBrains Mono';
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--main-text-color);
+}
 
-  .addressToggle {
-    margin: 0 0 0 4px;
-    padding: 0;
-    vertical-align: sub;
-    appearance: none;
-    border: none;
-    background: none;
-    padding-right: 20px;
-    svg {
-      pointer-events: none;
-    }
-
-    &:hover {
-      & + div {
-        display: none;
-      }
-    }
+.addressToggle {
+  width: 100%;
+  margin-top: 8px;
+  appearance: none;
+  border: none;
+  background: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  font-family: PingFang SC;
+  font-style: normal;
+  font-weight: 500;
+  color: var(--primary-color);
+  line-height: normal;
+  cursor: pointer;
+
+  svg {
+    pointer-events: none;
+    margin-right: 5px;
   }
 }
 
@@ -278,12 +289,13 @@
   }
 
   .multiAddressRoot {
-    .qrCode {
-      margin-top: 38px;
-    }
-
-    .copyAddress {
-      margin: 16px 16px 26px 16px;
+    .qrCodeContainer {
+      .qrCode {
+        margin-top: 38px;
+      }
     }
   }
+  .copyAddress {
+    margin: 16px 16px 10px 16px;
+  }
 }
diff --git a/packages/neuron-ui/src/components/SUDTReceiveDialog/index.tsx b/packages/neuron-ui/src/components/SUDTReceiveDialog/index.tsx
@@ -2,12 +2,11 @@ import React, { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { addressToScript, bech32Address, AddressPrefix } from '@nervosnetwork/ckb-sdk-utils'
 import SUDTAvatar from 'widgets/SUDTAvatar'
-import { ReactComponent as AddressToggleIcon } from 'widgets/Icons/AddressTransform.svg'
+import { AddressTransformWithCopyZone } from 'components/Receive/multiAddressReceive'
 import QRCode, { copyCanvas, downloadCanvas } from 'widgets/QRCode'
-import CopyZone from 'widgets/CopyZone'
 import Dialog from 'widgets/Dialog'
 import Button from 'widgets/Button'
-import { Attention } from 'widgets/Icons/icon'
+import Alert from 'widgets/Alert'
 
 import { CONSTANTS } from 'utils'
 import { getDisplayName, getDisplaySymbol } from 'components/UANDisplay'
@@ -60,8 +59,17 @@ const SUDTReceiveDialog = ({ data, onClose }: { data: DataProps; onClose?: () =>
   const displayedAddr = isInShortFormat ? toShortAddr(address) : address
 
   return (
-    <Dialog show title={t('s-udt.account-list.receive')} onCancel={onClose} showFooter={false}>
+    <Dialog
+      show
+      title={t('s-udt.account-list.receive')}
+      onCancel={onClose}
+      showFooter={false}
+      contentClassName={styles.contentClassName}
+    >
       <div className={styles.container}>
+        <Alert status="warn" className={styles.notification}>
+          {t('s-udt.receive.notation', { symbol: getDisplaySymbol(tokenName || '', symbol || '') })}
+        </Alert>
         <div className={styles.info}>
           <SUDTAvatar type="logo" />
           <div className={styles.right}>
@@ -78,25 +86,13 @@ const SUDTReceiveDialog = ({ data, onClose }: { data: DataProps; onClose?: () =>
           <QRCode value={displayedAddr} size={128} includeMargin ref={ref} />
         </div>
         <div className={styles.copyContainer}>
-          <CopyZone content={displayedAddr} name={t('receive.copy-address')} className={styles.copyAddress}>
-            {displayedAddr}
-            <button
-              type="button"
-              className={styles.addressToggle}
-              onClick={() => setIsInShortFormat(is => !is)}
-              title={t(
-                isInShortFormat ? `receive.turn-into-full-version-format` : `receive.turn-into-deprecated-format`
-              )}
-            >
-              <AddressToggleIcon />
-            </button>
-          </CopyZone>
+          <AddressTransformWithCopyZone
+            className={styles.copyTransformWrapper}
+            showAddress={displayedAddr}
+            isInShortFormat={isInShortFormat}
+            onClick={() => setIsInShortFormat(is => !is)}
+          />
         </div>
-        <p className={styles.notation}>
-          <Attention />
-          {t('s-udt.receive.notation', { symbol: getDisplaySymbol(tokenName || '', symbol || '') })}
-        </p>
-
         <div className={styles.actions}>
           <Button type="default" label={t('receive.copy-qr-code')} onClick={onCopyQrCode} />
           <Button type="confirm" label={t('receive.save-qr-code')} onClick={onDownloadQrCode} />

diff --git a/packages/neuron-ui/src/components/SUDTReceiveDialog/sUDTReceiveDialog.module.scss b/packages/neuron-ui/src/components/SUDTReceiveDialog/sUDTReceiveDialog.module.scss
@@ -1,11 +1,19 @@
 @import '../../styles/mixin.scss';
 
+.contentClassName {
+  padding: unset;
+
+  svg {
+    top: unset;
+  }
+}
+
 .container {
   width: 680px;
 }
 
 .info {
-  margin: 0px auto 16px;
+  margin: 16px auto;
   min-width: 264px;
   background: var(--table-head-background-color);
   display: flex;
@@ -34,17 +42,20 @@
   }
 }
 
-.notation {
+.notification {
   font-weight: 500;
   font-size: 12px;
-  line-height: 24px;
+  line-height: 32px;
+  height: 32px;
   text-align: center;
   color: var(--notice-text-color);
   display: flex;
   justify-content: center;
   align-items: center;
   word-break: break-word;
   margin: 0;
+  background-color: var(--warn-background-color);
+
   svg {
     margin-right: 4px;
     flex-shrink: 0;
@@ -62,33 +73,13 @@
 
 .copyContainer {
   text-align: center;
-  .copyAddress {
-    width: 450px;
-    margin: 16px 0;
-    word-break: break-all;
-    text-align: center;
-    line-height: 24px;
-    font-family: 'JetBrains Mono';
-    color: var(--main-text-color);
-
-    .addressToggle {
-      margin: 0 0 0 4px;
-      padding: 0;
-      vertical-align: sub;
-      appearance: none;
-      border: none;
-      background: none;
-      padding-right: 20px;
-      svg {
-        pointer-events: none;
-      }
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  margin-top: 16px;
 
-      &:hover {
-        & + div {
-          display: none;
-        }
-      }
-    }
+  .copyTransformWrapper {
+    width: 452px;
   }
 }
 

diff --git a/packages/neuron-ui/src/styles/index.scss b/packages/neuron-ui/src/styles/index.scss
@@ -14,7 +14,6 @@
 [type='submit'],
 button {
   -webkit-appearance: none !important;
-  color: inherit;
 }
 
 a {