fix: update display tx hash with betweenElilse text

AstraProtocol · Oct 31, 2022 · 88ee9a0 · 88ee9a0
1 parent 61cdc02
commit 88ee9a0
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 31 deletions.
diff --git a/views/transactions/TransactionBriefRow.tsx b/views/transactions/TransactionBriefRow.tsx
@@ -6,7 +6,7 @@ import Timer from 'components/Timer'
 import Typography from 'components/Typography'
 import Image from 'next/image'
 import { TransacionTypeEnum } from 'utils/constants'
-import { ellipseBetweenText, ellipseRightText, LinkMaker } from 'utils/helper'
+import { ellipseBetweenText, LinkMaker } from 'utils/helper'
 import styles from './style.module.scss'
 
 type TransactionBriefRowProps = {
@@ -85,7 +85,7 @@ export default function TransactionBriefRow({
 								fontType="Titi"
 								fontSize="money-2xs"
 							>
-								{ellipseRightText(hash, 24)}
+								{ellipseBetweenText(hash, 16, 16)}
 							</Typography.LinkText>
 						</div>
 						<Timer updatedAt={updatedAt} />

diff --git a/views/transactions/TransactionRowContent.tsx b/views/transactions/TransactionRowContent.tsx
@@ -75,33 +75,35 @@ export default function TransactionRowContent({
 							/>
 						)}
 					</div>
-					{/* {(from || to) && ( */}
-					<div className="margin-top-xs">
-						{from && (
-							<>
-								<span className={clsx('contrast-color-30 margin-right-2xs text text-sm')}>From</span>
-								{/* <span className="contrast-color-70 margin-right-lg money-2xs money"> */}
-								<Typography.LinkText href={LinkMaker.address(from)} classes="margin-right-2xs">
-									{evmAddressName(fromName, ellipseBetweenText(from, 6, 6))}
-								</Typography.LinkText>
-								{/* </span> */}
-							</>
-						)}
-						{(to || contractAddress) && (
-							<>
-								<span className={clsx('contrast-color-30 padding-right-2xs text text-sm')}>To</span>
-								{/* <span className="contrast-color-70 margin-right-lg  money-2xs money"> */}
-								<Typography.LinkText
-									href={LinkMaker.address(to || contractAddress)}
-									classes="margin-right-2xs"
-								>
-									{evmAddressName(toName, ellipseBetweenText(to || contractAddress, 6, 6))}
-								</Typography.LinkText>
-								{/* </span> */}
-							</>
-						)}
-					</div>
-					{/* )} */}
+					{(from || to) && (
+						<div className="margin-top-xs">
+							{from && (
+								<>
+									<span className={clsx('contrast-color-30 margin-right-2xs text text-sm')}>
+										From
+									</span>
+									{/* <span className="contrast-color-70 margin-right-lg money-2xs money"> */}
+									<Typography.LinkText href={LinkMaker.address(from)} classes="margin-right-2xs">
+										{evmAddressName(fromName, ellipseBetweenText(from, 6, 6))}
+									</Typography.LinkText>
+									{/* </span> */}
+								</>
+							)}
+							{(to || contractAddress) && (
+								<>
+									<span className={clsx('contrast-color-30 padding-right-2xs text text-sm')}>To</span>
+									{/* <span className="contrast-color-70 margin-right-lg  money-2xs money"> */}
+									<Typography.LinkText
+										href={LinkMaker.address(to || contractAddress)}
+										classes="margin-right-2xs"
+									>
+										{evmAddressName(toName, ellipseBetweenText(to || contractAddress, 6, 6))}
+									</Typography.LinkText>
+									{/* </span> */}
+								</>
+							)}
+						</div>
+					)}
 				</div>
 				<div className={clsx('col-2 block-ver-center')}>
 					<Typography.Label

diff --git a/views/transactions/TransactionRowContentMobile.tsx b/views/transactions/TransactionRowContentMobile.tsx
@@ -2,7 +2,7 @@ import { useMobileLayout } from '@astraprotocol/astra-ui'
 import clsx from 'clsx'
 import Timer from 'components/Timer'
 import Typography from 'components/Typography'
-import { ellipseRightText, LinkMaker } from 'utils/helper'
+import { ellipseBetweenText, LinkMaker } from 'utils/helper'
 import styles from './style.module.scss'
 
 export type TransactionRowContentMobileProps = {
@@ -36,7 +36,7 @@ export default function TransactionRowContentMobile({
 							classes={'margin-right-xs'}
 							fontType="Titi"
 						>
-							{ellipseRightText(hash, isSmallDevice ? 20 : 100)}
+							{ellipseBetweenText(hash, 20, 20)}
 						</Typography.LinkText>
 					</div>
 					<div className={clsx(' block-ver-center')}>