feat(wallet): Transaction Scroll Into View

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<HTMLDivElement, Props>(({
   transaction,
   account,
   displayAccountName,
-  accounts
-}: Props) => {
+  accounts,
+  isFocused
+}: Props, forwardedRef) => {
   // routing
   const history = useHistory()
 
@@ -337,12 +339,12 @@ export const PortfolioTransactionItem = ({
 
   // render
   return (
-    <PortfolioTransactionItemWrapper onClick={onHideTransactionPopup}>
+    <PortfolioTransactionItemWrapper ref={forwardedRef} isFocused={isFocused} onClick={onHideTransactionPopup}>
       <OrbAndTxDescriptionContainer>
-        <OrbContainer>
+        <OrbWrapper>
           <FromCircle orb={fromOrb} />
           <ToCircle orb={toOrb} />
-        </OrbContainer>
+        </OrbWrapper>
 
         <DetailColumn>
           <DetailRow>
@@ -424,8 +426,8 @@ export const PortfolioTransactionItem = ({
 
           {wasTxRejected
             ? <MoreButton onClick={onShowTransactionPopup}>
-                <MoreIcon />
-              </MoreButton>
+              <MoreIcon />
+            </MoreButton>
             : <RejectedTransactionSpacer />
           }
 
@@ -475,5 +477,6 @@ export const PortfolioTransactionItem = ({
     </PortfolioTransactionItemWrapper>
   )
 }
+)
 
 export default PortfolioTransactionItem

components/brave_wallet_ui/components/desktop/portfolio-transaction-item/style.ts

@@ -2,19 +2,23 @@ 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;
   flex-direction: row;
   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;
+`

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 <Redirect to={WalletRoutes.Accounts} />
@@ -241,6 +263,8 @@ export const Account = ({
               account={selectedAccount}
               accounts={accounts}
               displayAccountName={false}
+              ref={(ref) => scrollIntoView(transaction.id, ref)}
+              isFocused={checkIsTransactionFocused(transaction.id)}
             />
           )}
         </>