diff --git a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx index 2f8e6cb29e88..8bbc08b76fb0 100644 --- a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx +++ b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/index.tsx @@ -47,20 +47,21 @@ import { OrbAndTxDescriptionContainer, TransactionFeeTooltipBody, TransactionFeeTooltipTitle, - StatusBalanceAndMoreContainer + StatusBalanceAndMoreContainer, + OrbWrapper } 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 account: WalletAccountType | undefined accounts: WalletAccountType[] displayAccountName: boolean + isFocused?: boolean } const getLocaleKeyForTxStatus = (status: BraveWallet.TransactionStatus) => { @@ -76,12 +77,13 @@ const getLocaleKeyForTxStatus = (status: BraveWallet.TransactionStatus) => { } } -export const PortfolioTransactionItem = ({ +export const PortfolioTransactionItem = React.forwardRef(({ transaction, account, displayAccountName, - accounts -}: Props) => { + accounts, + isFocused +}: Props, forwardedRef) => { // routing const history = useHistory() @@ -337,12 +339,12 @@ export const PortfolioTransactionItem = ({ // render return ( - + - + - + @@ -424,8 +426,8 @@ export const PortfolioTransactionItem = ({ {wasTxRejected ? - - + + : } @@ -475,5 +477,6 @@ export const PortfolioTransactionItem = ({ ) } +) export default PortfolioTransactionItem diff --git a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts index 0e68168d8487..fc647b0b5f1c 100644 --- a/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts +++ b/components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts @@ -2,12 +2,13 @@ import styled from 'styled-components' import { MoreVertRIcon, ArrowRightIcon } from 'brave-ui/components/icons' import CoinsIconSVG from '../../../assets/svg-icons/coins-icon.svg' import { WalletButton } from '../../shared/style' +import { OrbContainer } from '../../extension/transaction-detail-panel/style' interface StyleProps { orb: string } -export const PortfolioTransactionItemWrapper = styled.div` +export const PortfolioTransactionItemWrapper = styled.div<{ isFocused?: boolean }>` display: flex; align-items: center; justify-content: space-between; @@ -15,6 +16,9 @@ export const PortfolioTransactionItemWrapper = styled.div` width: 100%; margin: 14px 0px; position: relative; + background-color: ${(p) => p.isFocused ? `${p.theme.color.text01}10` : 'none'}; + padding: 10px; + border-radius: 10px; ` export const DetailRow = styled.div` @@ -203,3 +207,7 @@ export const StatusBalanceAndMoreContainer = styled.div` justify-content: flex-end; align-items: center; ` + +export const OrbWrapper = styled(OrbContainer)` + margin-bottom: 0px; +` diff --git a/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx b/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx index 4a1593eb8b53..7aa1f766a6f7 100644 --- a/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx +++ b/components/brave_wallet_ui/components/desktop/views/accounts/account.tsx @@ -4,7 +4,7 @@ // you can obtain one at http://mozilla.org/MPL/2.0/. import * as React from 'react' -import { Redirect, useParams } from 'react-router' +import { Redirect, useParams, useLocation } from 'react-router' import { useDispatch, useSelector @@ -66,6 +66,7 @@ export const Account = ({ }: Props) => { // routing const { id: accountId } = useParams<{ id: string }>() + const { hash: transactionID } = useLocation() // redux const dispatch = useDispatch() @@ -165,6 +166,27 @@ export const Account = ({ dispatch(AccountsTabActions.setSelectedAccount(selectedAccount)) }, [onRemoveAccount, dispatch]) + const checkIsTransactionFocused = React.useCallback((id: string): boolean => { + if (transactionID !== '') { + return transactionID.replace('#', '') === id + } + return false + }, [transactionID]) + + // Prevents scrolling into view again if re-render occurs + let ignore = false + + const scrollIntoView = React.useCallback((id: string, ref: HTMLDivElement | null) => { + if (checkIsTransactionFocused(id) && !ignore) { + ref?.scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'center' + }) + ignore = true + } + }, [checkIsTransactionFocused, ignore]) + // redirect (asset not found) if (!selectedAccount) { return @@ -241,6 +263,8 @@ export const Account = ({ account={selectedAccount} accounts={accounts} displayAccountName={false} + ref={(ref) => scrollIntoView(transaction.id, ref)} + isFocused={checkIsTransactionFocused(transaction.id)} /> )}