fix: Fix overflow text style

nervosnetwork · Sep 26, 2023 · a97012f · a97012f
1 parent 045d09b
commit a97012f
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 12 deletions.
diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import Pagination from 'widgets/Pagination'
 import SUDTAvatar from 'widgets/SUDTAvatar'
 import Button from 'widgets/Button'
@@ -11,7 +11,7 @@ import { Download, Search, ArrowNext } from 'widgets/Icons/icon'
 import PageContainer from 'components/PageContainer'
 import TransactionStatusWrap from 'components/TransactionStatusWrap'
 import FormattedTokenAmount from 'components/FormattedTokenAmount'
-import { getDisplayName, isTonkenInfoStandardUAN } from 'components/UANDisplay'
+import { UANTokenName, isTonkenInfoStandardUAN } from 'components/UANDisplay'
 import { useState as useGlobalState, useDispatch } from 'states'
 import { exportTransactions } from 'services/remote'
 
@@ -76,7 +76,7 @@ const History = () => {
   const handleTransactionInfo = (tx: State.Transaction) => {
     let name = '--'
     let amount = '--'
-    let typeLabel = '--'
+    let typeLabel: React.ReactNode = '--'
     let sudtAmount = ''
     let showWithUANFormatter = false
 
@@ -92,7 +92,12 @@ const History = () => {
       if (['create', 'destroy'].includes(tx.type)) {
         // create/destroy an account
         showWithUANFormatter = isTonkenInfoStandardUAN(tx.sudtInfo.sUDT.tokenName, tx.sudtInfo.sUDT.symbol)
-        typeLabel = `${t(`history.${tx.type}`, { name: getDisplayName(name, tx.sudtInfo.sUDT.symbol) })}`
+        typeLabel = (
+          <Trans
+            i18nKey={`history.${tx.type}SUDT`}
+            components={[<UANTokenName name={tx.sudtInfo.sUDT.tokenName} symbol={tx.sudtInfo.sUDT.symbol} />]}
+          />
+        )
       } else {
         // send/receive to/from an account
         const type = +tx.sudtInfo.amount <= 0 ? 'send' : 'receive'

diff --git a/packages/neuron-ui/src/components/SUDTAccountList/sUDTAccountList.module.scss b/packages/neuron-ui/src/components/SUDTAccountList/sUDTAccountList.module.scss
@@ -57,7 +57,7 @@
   container-type: inline-size;
   @container (max-width: 968px) {
     .list {
-      grid-template-columns: repeat(3, auto);
+      grid-template-columns: repeat(3, 33%);
     }
   }
 }

diff --git a/packages/neuron-ui/src/components/SUDTReceiveDialog/index.tsx b/packages/neuron-ui/src/components/SUDTReceiveDialog/index.tsx
@@ -68,7 +68,7 @@ const SUDTReceiveDialog = ({ data, onClose }: { data: DataProps; onClose?: () =>
     >
       <div className={styles.container}>
         <Alert status="warn" className={styles.notification}>
-          {t('s-udt.receive.notation', { symbol: getDisplaySymbol(tokenName || '', symbol || '') })}
+          <span>{t('s-udt.receive.notation', { symbol: getDisplaySymbol(tokenName || '', symbol || '') })}</span>
         </Alert>
         <div className={styles.info}>
           <SUDTAvatar type="logo" />

diff --git a/packages/neuron-ui/src/components/SUDTReceiveDialog/sUDTReceiveDialog.module.scss b/packages/neuron-ui/src/components/SUDTReceiveDialog/sUDTReceiveDialog.module.scss
@@ -24,6 +24,7 @@
   border-radius: 16px;
   column-gap: 16px;
   .right {
+    max-width: calc(100% - 48px);
     .accountName {
       font-weight: 500;
       font-size: 14px;
@@ -43,23 +44,26 @@
 }
 
 .notification {
-  font-weight: 500;
-  font-size: 12px;
-  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;
+  margin: 0 4px;
   background-color: var(--warn-background-color);
 
   svg {
     margin-right: 4px;
     flex-shrink: 0;
   }
+  & > span {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 32px;
+    @include text-overflow-ellipsis;
+  }
   .symbol {
     display: inline-flex;
     margin: 0 2px;

diff --git a/packages/neuron-ui/src/components/UANDisplay/index.module.scss b/packages/neuron-ui/src/components/UANDisplay/index.module.scss
@@ -4,6 +4,7 @@
   @include tooltip;
   white-space: nowrap;
   display: inline-flex;
+  max-width: calc(100px + (100vw - 1200px) / 2);
 
   & > span {
     @include text-overflow-ellipsis;
@@ -15,7 +16,7 @@
   @include tooltip;
   white-space: nowrap;
   display: inline-flex;
-  max-width: 200px;
+  max-width: calc(180px + (100vw - 1200px) / 2);
 
   & > span {
     @include text-overflow-ellipsis;

diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
@@ -305,7 +305,9 @@
       "copy-balance": "复制余额",
       "copy-address": "复制地址",
       "create": "创建 {{name}} 资产账户",
-      "destroy": "销毁 {{name}} 资产账户"
+      "destroy": "销毁 {{name}} 资产账户",
+      "createSUDT": "创建 <0></0> 资产账户",
+      "destroySUDT": "销毁 <0></0> 资产账户"
     },
     "transaction": {
       "window-title": "交易: {{hash}}",