Skip to content

Commit

Permalink
fix: prevent bad text alignment in portfolio TXs
Browse files Browse the repository at this point in the history
  • Loading branch information
@josheleonard
josheleonard committed Oct 5, 2022
1 parent 0e07c4d commit af14e70
Show file tree
Hide file tree
Showing 3 changed files with 201 additions and 116 deletions.
246 changes: 133 additions & 113 deletions components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,19 @@ import {
MoreButton,
MoreIcon,
StatusRow,
StyledWrapper,
PortfolioTransactionItemWrapper,
ToCircle,
TransactionDetailRow,
OrbAndTxDescriptionContainer,
TransactionFeeTooltipBody,
TransactionFeeTooltipTitle
TransactionFeeTooltipTitle,
StatusBalanceAndMoreContainer
} from './style'
import { StatusBubble } from '../../shared/style'
import TransactionFeesTooltip from '../transaction-fees-tooltip'
import TransactionPopup, { TransactionPopupItem } from '../transaction-popup'
import TransactionTimestampTooltip from '../transaction-timestamp-tooltip'
import { WalletActions } from '../../../common/actions'
import { OrbContainer } from '../../extension/transaction-detail-panel/style'

export interface Props {
transaction: BraveWallet.TransactionInfo
Expand All @@ -61,6 +63,19 @@ export interface Props {
displayAccountName: boolean
}

const getLocaleKeyForTxStatus = (status: BraveWallet.TransactionStatus) => {
switch (status) {
case BraveWallet.TransactionStatus.Unapproved: return 'braveWalletTransactionStatusUnapproved'
case BraveWallet.TransactionStatus.Approved: return 'braveWalletTransactionStatusApproved'
case BraveWallet.TransactionStatus.Rejected: return 'braveWalletTransactionStatusRejected'
case BraveWallet.TransactionStatus.Submitted: return 'braveWalletTransactionStatusSubmitted'
case BraveWallet.TransactionStatus.Confirmed: return 'braveWalletTransactionStatusConfirmed'
case BraveWallet.TransactionStatus.Error: return 'braveWalletTransactionStatusError'
case BraveWallet.TransactionStatus.Dropped: return 'braveWalletTransactionStatusDropped'
default: return ''
}
}

export const PortfolioTransactionItem = ({
transaction,
account,
Expand Down Expand Up @@ -265,7 +280,7 @@ export const PortfolioTransactionItem = ({
}
}, [transactionDetails, onAssetClick, onAddressClick])

const transactionIntentLocale = React.useMemo(() => {
const transactionActionLocale = React.useMemo(() => {
switch (true) {
case transaction.txType === BraveWallet.TransactionType.ERC20Approve: {
const text = getLocale('braveWalletApprovalTransactionIntent')
Expand Down Expand Up @@ -316,23 +331,29 @@ export const PortfolioTransactionItem = ({
}
}, [transaction, transactionDetails, displayAccountName, onAssetClick])

const wasTxRejected =
transactionDetails.status !== BraveWallet.TransactionStatus.Rejected &&
transactionDetails.status !== BraveWallet.TransactionStatus.Unapproved

// render
return (
<StyledWrapper onClick={onHideTransactionPopup}>
<TransactionDetailRow>
<FromCircle orb={fromOrb} />
<ToCircle orb={toOrb} />
<PortfolioTransactionItemWrapper onClick={onHideTransactionPopup}>
<OrbAndTxDescriptionContainer>
<OrbContainer>
<FromCircle orb={fromOrb} />
<ToCircle orb={toOrb} />
</OrbContainer>

<DetailColumn>
<DetailRow>
{ // Display account name only if rendered under Portfolio view
displayAccountName &&

{displayAccountName && // Display account name only if rendered under Portfolio view
<DetailTextLight>
{account?.name}
</DetailTextLight>
}
<DetailTextDark>
{transactionIntentLocale}
</DetailTextDark>

<DetailTextDark>{transactionActionLocale}</DetailTextDark>
<DetailTextLight>-</DetailTextLight>

<TransactionTimestampTooltip
Expand All @@ -346,113 +367,112 @@ export const PortfolioTransactionItem = ({
{formatDateAsRelative(mojoTimeDeltaToJSDate(transactionDetails.createdTime))}
</DetailTextDarkBold>
</TransactionTimestampTooltip>

</DetailRow>

{transactionIntentDescription}

</DetailColumn>
</TransactionDetailRow>
<StatusRow>
<StatusBubble status={transactionDetails.status} />
<DetailTextDarkBold>
{transactionDetails.status === BraveWallet.TransactionStatus.Unapproved && getLocale('braveWalletTransactionStatusUnapproved')}
{transactionDetails.status === BraveWallet.TransactionStatus.Approved && getLocale('braveWalletTransactionStatusApproved')}
{transactionDetails.status === BraveWallet.TransactionStatus.Rejected && getLocale('braveWalletTransactionStatusRejected')}
{transactionDetails.status === BraveWallet.TransactionStatus.Submitted && getLocale('braveWalletTransactionStatusSubmitted')}
{transactionDetails.status === BraveWallet.TransactionStatus.Confirmed && getLocale('braveWalletTransactionStatusConfirmed')}
{transactionDetails.status === BraveWallet.TransactionStatus.Error && getLocale('braveWalletTransactionStatusError')}
{transactionDetails.status === BraveWallet.TransactionStatus.Dropped && getLocale('braveWalletTransactionStatusDropped')}
</DetailTextDarkBold>
</StatusRow>
<DetailRow>
<BalanceColumn>
<DetailTextDark>
{/* We need to return a Transaction Time Stamp to calculate Fiat value here */}
{transactionDetails.fiatValue
.formatAsFiat(defaultCurrencies.fiat)}
</DetailTextDark>
<DetailTextLight>{transactionDetails.formattedNativeCurrencyTotal}</DetailTextLight>
</BalanceColumn>
{/* Will remove this conditional for solana once https://github.com/brave/brave-browser/issues/22040 is implemented. */}
{!isSolanaTxn &&
<TransactionFeesTooltip
text={
<>
<TransactionFeeTooltipTitle>{getLocale('braveWalletAllowSpendTransactionFee')}</TransactionFeeTooltipTitle>
<TransactionFeeTooltipBody>
{
new Amount(transactionDetails.gasFee)
.divideByDecimals(transactionsNetwork.decimals)
.formatAsAsset(6, transactionsNetwork.symbol)
}
</TransactionFeeTooltipBody>
<TransactionFeeTooltipBody>
{
new Amount(transactionDetails.gasFeeFiat)
.formatAsFiat(defaultCurrencies.fiat)
}
</TransactionFeeTooltipBody>
</>
}
>
<CoinsButton>
<CoinsIcon />
</CoinsButton>
</TransactionFeesTooltip>
}

{(transactionDetails.status !== BraveWallet.TransactionStatus.Rejected && transactionDetails.status !== BraveWallet.TransactionStatus.Unapproved) ? (
<MoreButton onClick={onShowTransactionPopup}>
<MoreIcon />
</MoreButton>
) : (
<RejectedTransactionSpacer />
)}

{showTransactionPopup &&
<TransactionPopup>
{[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed, BraveWallet.TransactionStatus.Dropped].includes(transactionDetails.status) &&
<TransactionPopupItem
onClick={onClickViewOnBlockExplorer('tx', transaction.txHash)}
text={getLocale('braveWalletTransactionExplorer')}
/>
}

{[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed, BraveWallet.TransactionStatus.Dropped].includes(transactionDetails.status) &&
<TransactionPopupItem
onClick={onClickCopyTransactionHash}
text={getLocale('braveWalletTransactionCopyHash')}
/>
}
</OrbAndTxDescriptionContainer>

{[BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Approved].includes(transactionDetails.status) &&
!isSolanaTxn &&
!isFilecoinTransaction &&
<TransactionPopupItem
onClick={onClickSpeedupTransaction}
text={getLocale('braveWalletTransactionSpeedup')}
/>
}
<StatusBalanceAndMoreContainer>
<StatusRow>
<StatusBubble status={transactionDetails.status} />
<DetailTextDarkBold>
{getLocale(getLocaleKeyForTxStatus(transactionDetails.status))}
</DetailTextDarkBold>
</StatusRow>

{[BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Approved].includes(transactionDetails.status) &&
!isSolanaTxn &&
!isFilecoinTransaction &&
<TransactionPopupItem
onClick={onClickCancelTransaction}
text={getLocale('braveWalletTransactionCancel')}
/>
}
{/* Balance & more */}
<DetailRow>
<BalanceColumn>
<DetailTextDark>
{/* We need to return a Transaction Time Stamp to calculate Fiat value here */}
{transactionDetails.fiatValue.formatAsFiat(defaultCurrencies.fiat)}
</DetailTextDark>
<DetailTextLight>{transactionDetails.formattedNativeCurrencyTotal}</DetailTextLight>
</BalanceColumn>

{[BraveWallet.TransactionStatus.Error].includes(transactionDetails.status) &&
!isSolanaTxn &&
!isFilecoinTransaction &&
<TransactionPopupItem
onClick={onClickRetryTransaction}
text={getLocale('braveWalletTransactionRetry')}
/>
}
</TransactionPopup>
}
</DetailRow>
</StyledWrapper>
{/* Will remove this conditional for solana once https://github.com/brave/brave-browser/issues/22040 is implemented. */}
{!isSolanaTxn &&
<TransactionFeesTooltip
text={
<>
<TransactionFeeTooltipTitle>{getLocale('braveWalletAllowSpendTransactionFee')}</TransactionFeeTooltipTitle>
<TransactionFeeTooltipBody>
{
new Amount(transactionDetails.gasFee)
.divideByDecimals(transactionsNetwork.decimals)
.formatAsAsset(6, transactionsNetwork.symbol)
}
</TransactionFeeTooltipBody>
<TransactionFeeTooltipBody>
{
new Amount(transactionDetails.gasFeeFiat)
.formatAsFiat(defaultCurrencies.fiat)
}
</TransactionFeeTooltipBody>
</>
}
>
<CoinsButton>
<CoinsIcon />
</CoinsButton>
</TransactionFeesTooltip>
}

{wasTxRejected
? <MoreButton onClick={onShowTransactionPopup}>
<MoreIcon />
</MoreButton>
: <RejectedTransactionSpacer />
}

{showTransactionPopup &&
<TransactionPopup>
{[BraveWallet.TransactionStatus.Approved, BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Confirmed, BraveWallet.TransactionStatus.Dropped].includes(transactionDetails.status) &&
<>
<TransactionPopupItem
onClick={onClickViewOnBlockExplorer('tx', transaction.txHash)}
text={getLocale('braveWalletTransactionExplorer')}
/>
<TransactionPopupItem
onClick={onClickCopyTransactionHash}
text={getLocale('braveWalletTransactionCopyHash')}
/>
</>
}

{[BraveWallet.TransactionStatus.Submitted, BraveWallet.TransactionStatus.Approved].includes(transactionDetails.status) &&
!isSolanaTxn &&
!isFilecoinTransaction &&
<>
<TransactionPopupItem
onClick={onClickSpeedupTransaction}
text={getLocale('braveWalletTransactionSpeedup')}
/>
<TransactionPopupItem
onClick={onClickCancelTransaction}
text={getLocale('braveWalletTransactionCancel')}
/>
</>
}

{[BraveWallet.TransactionStatus.Error].includes(transactionDetails.status) &&
!isSolanaTxn &&
!isFilecoinTransaction &&
<TransactionPopupItem
onClick={onClickRetryTransaction}
text={getLocale('braveWalletTransactionRetry')}
/>
}
</TransactionPopup>
}
</DetailRow>
</StatusBalanceAndMoreContainer>

</PortfolioTransactionItemWrapper>
)
}

Expand Down
55 changes: 55 additions & 0 deletions ...t_ui/components/desktop/portfolio-transaction-item/portfolio-transaction-item.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
// Copyright (c) 2022 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// you can obtain one at http://mozilla.org/MPL/2.0/.

import * as React from 'react'
import styled from 'styled-components'
import { mockAccount } from '../../../common/constants/mocks'
import { mockTransactionInfo } from '../../../stories/mock-data/mock-transaction-info'

import { WalletPageStory } from '../../../stories/wrappers/wallet-page-story-wrapper'
import WalletPageLayout from '../wallet-page-layout'
import WalletSubViewLayout from '../wallet-sub-view-layout'
import { PortfolioTransactionItem } from './index'

export const CryptoViewWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
position: relative;
`

const PortfolioWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
margin-bottom: 20px;
`

export const _PortfolioTransactionItem: React.FC = () => {
return (
<WalletPageStory>
<WalletPageLayout>
<WalletSubViewLayout>
<CryptoViewWrapper>
<PortfolioWrapper>
<PortfolioTransactionItem
account={mockAccount}
accounts={[mockAccount]}
displayAccountName={true}
transaction={mockTransactionInfo}
/>
</PortfolioWrapper>
</CryptoViewWrapper>
</WalletSubViewLayout>
</WalletPageLayout>
</WalletPageStory>
)
}

export default _PortfolioTransactionItem
Loading

0 comments on commit af14e70

Please sign in to comment.