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

fix: prevent bad text alignment in portfolio Txs #15364

Merged
merged 1 commit into from
Oct 6, 2022
Merged

fix: prevent bad text alignment in portfolio Txs #15364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
246 changes: 133 additions & 113 deletions components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx
View file
Open in desktop
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
Open in desktop
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