From 61f246b28261da43dd2bc82b5a1a025cc627b15a Mon Sep 17 00:00:00 2001 From: IF <139582705+infiniteflower@users.noreply.github.com> Date: Fri, 20 Dec 2024 16:42:48 -0500 Subject: [PATCH 1/6] chore: use short names for networks in tx details --- .../transaction-details/transaction-details.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/ui/pages/bridge/transaction-details/transaction-details.tsx b/ui/pages/bridge/transaction-details/transaction-details.tsx index 48804dd3283f..875fca9171c9 100644 --- a/ui/pages/bridge/transaction-details/transaction-details.tsx +++ b/ui/pages/bridge/transaction-details/transaction-details.tsx @@ -57,6 +57,10 @@ import { formatAmount } from '../../confirmations/components/simulation-details/ import { getIntlLocale } from '../../../ducks/locale/locale'; import { TransactionGroup } from '../../../hooks/bridge/useBridgeTxHistoryData'; import TransactionActivityLog from '../../../components/app/transaction-activity-log'; +import { + NETWORK_TO_SHORT_NETWORK_NAME_MAP, + AllowedBridgeChainIds, +} from '../../../../shared/constants/bridge'; import TransactionDetailRow from './transaction-detail-row'; import BridgeExplorerLinks from './bridge-explorer-links'; import BridgeStepList from './bridge-step-list'; @@ -207,8 +211,14 @@ const CrossChainSwapTxDetails = () => { ] : undefined; - const srcNetworkName = srcNetwork?.name; - const destNetworkName = destNetwork?.name; + const srcNetworkName = + NETWORK_TO_SHORT_NETWORK_NAME_MAP[ + srcNetwork?.chainId as AllowedBridgeChainIds + ]; + const destNetworkName = + NETWORK_TO_SHORT_NETWORK_NAME_MAP[ + destNetwork?.chainId as AllowedBridgeChainIds + ]; const data = srcChainTxMeta ? getTransactionBreakdownData({ From b69f6484b8b05cecaaf7ff695ef049445e23d72f Mon Sep 17 00:00:00 2001 From: IF <139582705+infiniteflower@users.noreply.github.com> Date: Fri, 20 Dec 2024 16:47:54 -0500 Subject: [PATCH 2/6] chore: use short names in activity list --- ui/hooks/useTransactionDisplayData.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/hooks/useTransactionDisplayData.js b/ui/hooks/useTransactionDisplayData.js index 07c4d0ade382..28a1c913b938 100644 --- a/ui/hooks/useTransactionDisplayData.js +++ b/ui/hooks/useTransactionDisplayData.js @@ -40,6 +40,7 @@ import { selectBridgeHistoryForAccount } from '../ducks/bridge-status/selectors' import { useBridgeTokenDisplayData } from '../pages/bridge/hooks/useBridgeTokenDisplayData'; import { formatAmount } from '../pages/confirmations/components/simulation-details/formatAmount'; import { getIntlLocale } from '../ducks/locale/locale'; +import { NETWORK_TO_SHORT_NETWORK_NAME_MAP } from '../../shared/constants/bridge'; import { useI18nContext } from './useI18nContext'; import { useTokenFiatAmount } from './useTokenFiatAmount'; import { useUserPreferencedCurrency } from './useUserPreferencedCurrency'; @@ -122,7 +123,7 @@ export function useTransactionDisplayData(transactionGroup) { bridgeHistoryItem, srcTxMeta: transactionGroup.initialTransaction, }); - const destChainName = destNetwork?.name; + const destChainName = NETWORK_TO_SHORT_NETWORK_NAME_MAP[destNetwork?.chainId]; const { initialTransaction, primaryTransaction } = transactionGroup; // initialTransaction contains the data we need to derive the primary purpose of this transaction group From c3b4c60ad7132c8aa9c7873984575e4ab6d5b603 Mon Sep 17 00:00:00 2001 From: IF <139582705+infiniteflower@users.noreply.github.com> Date: Fri, 20 Dec 2024 16:48:06 -0500 Subject: [PATCH 3/6] chore: use short names for bridge steps --- .../transaction-details/bridge-step-description.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/ui/pages/bridge/transaction-details/bridge-step-description.tsx b/ui/pages/bridge/transaction-details/bridge-step-description.tsx index 03abb77a32e2..5db44b8a20bc 100644 --- a/ui/pages/bridge/transaction-details/bridge-step-description.tsx +++ b/ui/pages/bridge/transaction-details/bridge-step-description.tsx @@ -20,6 +20,10 @@ import { TextColor, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; +import { + AllowedBridgeChainIds, + NETWORK_TO_SHORT_NETWORK_NAME_MAP, +} from '../../../../shared/constants/bridge'; type I18nFunction = ( key: string, @@ -49,14 +53,19 @@ const getBridgeActionText = ( ? networkConfigurationsByChainId[hexDestChainId] : undefined; + const destChainName = + NETWORK_TO_SHORT_NETWORK_NAME_MAP[ + destNetworkConfiguration?.chainId as AllowedBridgeChainIds + ]; + return stepStatus === StatusTypes.COMPLETE ? t('bridgeStepActionBridgeComplete', [ step.destAsset.symbol, - destNetworkConfiguration?.name, + destChainName, ]) : t('bridgeStepActionBridgePending', [ step.destAsset.symbol, - destNetworkConfiguration?.name, + destChainName, ]); }; From 1240120a27535deed18f90e98eaf13f1c93d3e50 Mon Sep 17 00:00:00 2001 From: IF <139582705+infiniteflower@users.noreply.github.com> Date: Fri, 20 Dec 2024 16:51:15 -0500 Subject: [PATCH 4/6] fix: overflowing rows for longer names --- .../bridge/transaction-details/transaction-detail-row.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/ui/pages/bridge/transaction-details/transaction-detail-row.tsx b/ui/pages/bridge/transaction-details/transaction-detail-row.tsx index 99b3756ee7e0..c16cb6fc0365 100644 --- a/ui/pages/bridge/transaction-details/transaction-detail-row.tsx +++ b/ui/pages/bridge/transaction-details/transaction-detail-row.tsx @@ -7,6 +7,7 @@ import { AlignItems, TextAlign, TextVariant, + BlockSize, } from '../../../helpers/constants/design-system'; type TransactionDetailRowProps = { @@ -20,18 +21,16 @@ export default function TransactionDetailRow({ }: TransactionDetailRowProps) { return ( - + {title} {value} From f5c879f4b21076311058f682469f667462294dab Mon Sep 17 00:00:00 2001 From: IF <139582705+infiniteflower@users.noreply.github.com> Date: Tue, 7 Jan 2025 15:43:26 -0500 Subject: [PATCH 5/6] fix: extra long network names --- .../bridge/transaction-details/transaction-details.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ui/pages/bridge/transaction-details/transaction-details.tsx b/ui/pages/bridge/transaction-details/transaction-details.tsx index 875fca9171c9..54b0242fa29f 100644 --- a/ui/pages/bridge/transaction-details/transaction-details.tsx +++ b/ui/pages/bridge/transaction-details/transaction-details.tsx @@ -39,6 +39,8 @@ import { AlignItems, Display, FlexDirection, + FlexWrap, + JustifyContent, TextColor, TextTransform, } from '../../../helpers/constants/design-system'; @@ -364,6 +366,8 @@ const CrossChainSwapTxDetails = () => { display={Display.Flex} gap={1} alignItems={AlignItems.center} + flexWrap={FlexWrap.Wrap} + justifyContent={JustifyContent.flexEnd} > {srcNetworkIconName} @@ -395,6 +399,8 @@ const CrossChainSwapTxDetails = () => { display={Display.Flex} gap={1} alignItems={AlignItems.center} + flexWrap={FlexWrap.Wrap} + justifyContent={JustifyContent.flexEnd} > {t('bridgeTxDetailsTokenAmountOnChain', [ bridgeAmountSent, @@ -411,6 +417,8 @@ const CrossChainSwapTxDetails = () => { display={Display.Flex} gap={1} alignItems={AlignItems.center} + flexWrap={FlexWrap.Wrap} + justifyContent={JustifyContent.flexEnd} > {t('bridgeTxDetailsTokenAmountOnChain', [ bridgeAmountReceived, From 9488886ac546336bf6cf98b5a2f4d1cd4d173850 Mon Sep 17 00:00:00 2001 From: IF <139582705+infiniteflower@users.noreply.github.com> Date: Thu, 9 Jan 2025 14:54:45 -0500 Subject: [PATCH 6/6] refactor: remove extra boxes --- .../transaction-detail-row.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/ui/pages/bridge/transaction-details/transaction-detail-row.tsx b/ui/pages/bridge/transaction-details/transaction-detail-row.tsx index c16cb6fc0365..4c6be00dac73 100644 --- a/ui/pages/bridge/transaction-details/transaction-detail-row.tsx +++ b/ui/pages/bridge/transaction-details/transaction-detail-row.tsx @@ -21,19 +21,24 @@ export default function TransactionDetailRow({ }: TransactionDetailRowProps) { return ( - - {title} - - + {title} + + - {value} - + {value} + ); }