Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove second inner scroll bar from tx details #29412

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+186 −186
Open

chore: remove second inner scroll bar from tx details #29412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bfc1d4c
chore: remove second inner scroll bar from tx details
infiniteflower Dec 20, 2024
72af72c
chore: remove unneeded extra div
infiniteflower Dec 20, 2024
8972ee2
fix: not being able to see bottom of details
infiniteflower Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ui/pages/bridge/transaction-details/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.bridge-transaction-details {
&__content {
overflow-y: hidden;
}

&__icon-loading {
animation: loading-dot 1.2s linear infinite;
}
Expand Down
368 changes: 182 additions & 186 deletions ui/pages/bridge/transaction-details/transaction-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,205 +254,201 @@ const CrossChainSwapTxDetails = () => {
);

return (
<div className="bridge">
<div className="bridge__container">
<Header
className="bridge__header"
startAccessory={
<ButtonIcon
iconName={IconName.ArrowLeft}
size={ButtonIconSize.Sm}
ariaLabel={t('back')}
onClick={() => history.goBack()}
/>
}
<div className="bridge__container">
<Header
className="bridge__header"
startAccessory={
<ButtonIcon
iconName={IconName.ArrowLeft}
size={ButtonIconSize.Sm}
ariaLabel={t('back')}
onClick={() => history.goBack()}
/>
}
>
{t('bridge')} details
</Header>
<Content className="bridge-transaction-details__content">
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={4}
>
{t('bridge')} details
</Header>
<Content className="bridge__content">
{/* Delayed banner */}
{isDelayed && (
<BannerAlert
title={t('bridgeTxDetailsDelayedTitle')}
severity={BannerAlertSeverity.Warning}
>
<Text display={Display.Flex} alignItems={AlignItems.center}>
{t('bridgeTxDetailsDelayedDescription')}&nbsp;
<ButtonLink
externalLink
href={SUPPORT_REQUEST_LINK}
onClick={() => {
trackEvent(
{
category: MetaMetricsEventCategory.Home,
event: MetaMetricsEventName.SupportLinkClicked,
properties: {
url: SUPPORT_REQUEST_LINK,
location: 'Bridge Tx Details',
},
},
{
contextPropsIntoEventProperties: [
MetaMetricsContextProp.PageTitle,
],
},
);
}}
>
{t('bridgeTxDetailsDelayedDescriptionSupport')}
</ButtonLink>
.
</Text>
</BannerAlert>
)}

{/* Bridge step list */}
{status !== StatusTypes.COMPLETE &&
(bridgeHistoryItem || srcChainTxMeta) && (
<BridgeStepList
bridgeHistoryItem={bridgeHistoryItem}
srcChainTxMeta={srcChainTxMeta}
networkConfigurationsByChainId={networkConfigurationsByChainId}
/>
)}

{/* Links to block explorers */}
<BridgeExplorerLinks
srcChainId={srcNetwork?.chainId}
destChainId={destNetwork?.chainId}
srcBlockExplorerUrl={srcBlockExplorerUrl}
destBlockExplorerUrl={destBlockExplorerUrl}
/>

<Divider />

{/* Bridge tx details */}
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={4}
gap={2}
>
{/* Delayed banner */}
{isDelayed && (
<BannerAlert
title={t('bridgeTxDetailsDelayedTitle')}
severity={BannerAlertSeverity.Warning}
>
<Text display={Display.Flex} alignItems={AlignItems.center}>
{t('bridgeTxDetailsDelayedDescription')}&nbsp;
<ButtonLink
externalLink
href={SUPPORT_REQUEST_LINK}
onClick={() => {
trackEvent(
{
category: MetaMetricsEventCategory.Home,
event: MetaMetricsEventName.SupportLinkClicked,
properties: {
url: SUPPORT_REQUEST_LINK,
location: 'Bridge Tx Details',
},
},
{
contextPropsIntoEventProperties: [
MetaMetricsContextProp.PageTitle,
],
},
);
}}
>
{t('bridgeTxDetailsDelayedDescriptionSupport')}
</ButtonLink>
.
<TransactionDetailRow
title={t('bridgeTxDetailsStatus')}
value={
<Text
textTransform={TextTransform.Capitalize}
color={status ? StatusToColorMap[status] : undefined}
>
{status?.toLowerCase()}
</Text>
</BannerAlert>
)}

{/* Bridge step list */}
{status !== StatusTypes.COMPLETE &&
(bridgeHistoryItem || srcChainTxMeta) && (
<BridgeStepList
bridgeHistoryItem={bridgeHistoryItem}
srcChainTxMeta={srcChainTxMeta}
networkConfigurationsByChainId={
networkConfigurationsByChainId
}
/>
)}

{/* Links to block explorers */}
<BridgeExplorerLinks
srcChainId={srcNetwork?.chainId}
destChainId={destNetwork?.chainId}
srcBlockExplorerUrl={srcBlockExplorerUrl}
destBlockExplorerUrl={destBlockExplorerUrl}
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsBridging')}
value={
<Box
display={Display.Flex}
gap={1}
alignItems={AlignItems.center}
>
{srcNetworkIconName}
<Icon name={IconName.Arrow2Right} size={IconSize.Sm} />
{destNetworkIconName}
</Box>
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsTimestamp')}
value={t('bridgeTxDetailsTimestampValue', [
formatDate(srcChainTxMeta?.time, 'MMM d, yyyy'),
formatDate(srcChainTxMeta?.time, 'hh:mm a'),
])}
/>
</Box>

<Divider />

{/* Bridge tx details */}
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={2}
>
<TransactionDetailRow
title={t('bridgeTxDetailsStatus')}
value={
<Text
textTransform={TextTransform.Capitalize}
color={status ? StatusToColorMap[status] : undefined}
>
{status?.toLowerCase()}
</Text>
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsBridging')}
value={
<Box
display={Display.Flex}
gap={1}
alignItems={AlignItems.center}
>
{srcNetworkIconName}
<Icon name={IconName.Arrow2Right} size={IconSize.Sm} />
{destNetworkIconName}
</Box>
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsTimestamp')}
value={t('bridgeTxDetailsTimestampValue', [
formatDate(srcChainTxMeta?.time, 'MMM d, yyyy'),
formatDate(srcChainTxMeta?.time, 'hh:mm a'),
])}
/>
</Box>

<Divider />
<Divider />

{/* Bridge tx details 2 */}
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={2}
>
<TransactionDetailRow
title={t('bridgeTxDetailsYouSent')}
value={
<Box
display={Display.Flex}
gap={1}
alignItems={AlignItems.center}
>
{t('bridgeTxDetailsTokenAmountOnChain', [
bridgeAmountSent,
bridgeHistoryItem?.quote.srcAsset.symbol,
])}
{srcNetworkIconName}
</Box>
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsYouReceived')}
value={
<Box
display={Display.Flex}
gap={1}
alignItems={AlignItems.center}
>
{t('bridgeTxDetailsTokenAmountOnChain', [
bridgeAmountReceived,
bridgeHistoryItem?.quote.destAsset.symbol,
])}
{destNetworkIconName}
</Box>
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsTotalGasFee')}
value={
<UserPreferencedCurrencyDisplay
currency={data?.nativeCurrency}
denomination={EtherDenomination.ETH}
numberOfDecimals={6}
value={data?.hexGasTotal}
type={PRIMARY}
/>
}
/>
</Box>
{/* Bridge tx details 2 */}
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={2}
>
<TransactionDetailRow
title={t('bridgeTxDetailsYouSent')}
value={
<Box
display={Display.Flex}
gap={1}
alignItems={AlignItems.center}
>
{t('bridgeTxDetailsTokenAmountOnChain', [
bridgeAmountSent,
bridgeHistoryItem?.quote.srcAsset.symbol,
])}
{srcNetworkIconName}
</Box>
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsYouReceived')}
value={
<Box
display={Display.Flex}
gap={1}
alignItems={AlignItems.center}
>
{t('bridgeTxDetailsTokenAmountOnChain', [
bridgeAmountReceived,
bridgeHistoryItem?.quote.destAsset.symbol,
])}
{destNetworkIconName}
</Box>
}
/>
<TransactionDetailRow
title={t('bridgeTxDetailsTotalGasFee')}
value={
<UserPreferencedCurrencyDisplay
currency={data?.nativeCurrency}
denomination={EtherDenomination.ETH}
numberOfDecimals={6}
value={data?.hexGasTotal}
type={PRIMARY}
/>
}
/>
</Box>

<Divider />
<Divider />

{/* Generic tx details */}
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={2}
>
<TransactionDetailRow
title={t('bridgeTxDetailsNonce')}
value={
srcChainTxMeta?.txParams.nonce
? hexToDecimal(srcChainTxMeta?.txParams.nonce)
: undefined
}
/>
{/* Generic tx details */}
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
gap={2}
>
<TransactionDetailRow
title={t('bridgeTxDetailsNonce')}
value={
srcChainTxMeta?.txParams.nonce
? hexToDecimal(srcChainTxMeta?.txParams.nonce)
: undefined
}
/>

<TransactionActivityLog
transactionGroup={transactionGroup}
className="transaction-list-item-details__transaction-activity-log"
isEarliestNonce={isEarliestNonce}
/>
</Box>
<TransactionActivityLog
transactionGroup={transactionGroup}
className="transaction-list-item-details__transaction-activity-log"
isEarliestNonce={isEarliestNonce}
/>
</Box>
</Content>
</div>
</Box>
</Content>
</div>
);
};
Expand Down
Loading