diff --git a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx index 4e0a3c557e6f..a045e022e059 100644 --- a/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx +++ b/components/brave_wallet_ui/components/desktop/views/portfolio/portfolio-overview.tsx @@ -643,6 +643,8 @@ export const PortfolioOverview = () => { > diff --git a/components/brave_wallet_ui/page/screens/transactions/transaction-screen.styles.ts b/components/brave_wallet_ui/page/screens/transactions/transaction-screen.styles.ts index 260a8ffd72eb..e40b19d51b61 100644 --- a/components/brave_wallet_ui/page/screens/transactions/transaction-screen.styles.ts +++ b/components/brave_wallet_ui/page/screens/transactions/transaction-screen.styles.ts @@ -5,6 +5,12 @@ import styled from 'styled-components' +// Icons +import { + NoTransactionsIconDark, + NoTransactionsIconLight +} from '../../../assets/svg-icons/empty-state-icons' + export const SearchAndFiltersRow = styled.div` display: flex; flex-direction: row; @@ -12,3 +18,15 @@ export const SearchAndFiltersRow = styled.div` width: 100%; gap: 14px; ` + +export const EmptyTransactionsIcon = styled.div` + width: 100px; + height: 100px; + background-repeat: no-repeat; + background-size: 100%; + background-position: center; + background-image: url(${NoTransactionsIconLight}); + @media (prefers-color-scheme: dark) { + background-image: url(${NoTransactionsIconDark}); + } +` diff --git a/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx b/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx index bb1050d0a2e7..b7b8c97d58cc 100644 --- a/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx +++ b/components/brave_wallet_ui/page/screens/transactions/transactions-screen.tsx @@ -63,6 +63,7 @@ import { LoadingSkeletonStyleProps, Skeleton } from '../../../components/shared/loading-skeleton/styles' +import { EmptyTransactionsIcon } from './transaction-screen.styles' const txListItemSkeletonProps: LoadingSkeletonStyleProps = { width: '100%', @@ -249,8 +250,9 @@ export const TransactionsScreen: React.FC = () => { - + { )} - - {filteredTransactions.map((tx, i) => ( - - ))} - + {filteredTransactions.length !== 0 && ( + + {filteredTransactions.map((tx) => ( + + ))} + + )} {txsForSelectedChain && txsForSelectedChain.length !== 0 && filteredTransactions.length === 0 && ( - + {getLocale('braveWalletConnectHardwareSearchNothingFound')}