Skip to content

Commit

Permalink
fix: remove text for empty transactions state
Browse files Browse the repository at this point in the history
  • Loading branch information
@salimtb
salimtb committed Dec 18, 2024
1 parent b018c81 commit d8eeb19
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 104 deletions.
97 changes: 38 additions & 59 deletions ui/components/app/transaction-list/transaction-list.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ import {
nonceSortedCompletedTransactionsSelector,
nonceSortedPendingTransactionsSelector,
} from '../../../selectors/transactions';
import {
getCurrentChainId,
getNetworkConfigurationsByChainId,
} from '../../../../shared/modules/selectors/networks';
import { getCurrentChainId } from '../../../../shared/modules/selectors/networks';
import {
getSelectedAccount,
///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
Expand Down Expand Up @@ -143,7 +140,6 @@ export default function TransactionList({
hideTokenTransactions,
tokenAddress,
boxProps,
tokenChainId,
}) {
const [limit, setLimit] = useState(PAGE_INCREMENT);
const t = useI18nContext();
Expand All @@ -156,16 +152,7 @@ export default function TransactionList({
);

const chainId = useSelector(getCurrentChainId);
const networkConfigurationsByChainId = useSelector(
getNetworkConfigurationsByChainId,
);
const networkName = networkConfigurationsByChainId[tokenChainId]?.name;
const selectedAccount = useSelector(getSelectedAccount);
const isChainIdMismatch = tokenChainId && tokenChainId !== chainId;

const noTransactionsMessage = networkName
? t('noTransactionsNetworkName', [networkName])
: t('noTransactionsChainIdMismatch');

///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
const shouldHideZeroBalanceTokens = useSelector(
Expand Down Expand Up @@ -358,51 +345,43 @@ export default function TransactionList({
</Box>
)}
<Box className="transaction-list__completed-transactions">
{completedTransactions.length > 0 ? (
completedTransactions
.map(removeIncomingTxsButToAnotherAddress)
.map(removeTxGroupsWithNoTx)
.filter(dateGroupsWithTransactionGroups)
.slice(0, limit)
.map((dateGroup) => {
return dateGroup.transactionGroups.map(
(transactionGroup, index) => {
return (
<Fragment
key={`${transactionGroup.nonce}:${
transactionGroup.initialTransaction
? index
: limit + index - 10
}`}
>
{renderDateStamp(index, dateGroup)}
{transactionGroup.initialTransaction
?.isSmartTransaction ? (
<SmartTransactionListItem
transactionGroup={transactionGroup}
smartTransaction={
transactionGroup.initialTransaction
}
/>
) : (
<TransactionListItem
transactionGroup={transactionGroup}
/>
)}
</Fragment>
);
},
);
})
) : (
<Box className="transaction-list__empty">
<Box className="transaction-list__empty-text">
{isChainIdMismatch
? noTransactionsMessage
: t('noTransactions')}
</Box>
</Box>
)}
{completedTransactions.length > 0
? completedTransactions
.map(removeIncomingTxsButToAnotherAddress)
.map(removeTxGroupsWithNoTx)
.filter(dateGroupsWithTransactionGroups)
.slice(0, limit)
.map((dateGroup) => {
return dateGroup.transactionGroups.map(
(transactionGroup, index) => {
return (
<Fragment
key={`${transactionGroup.nonce}:${
transactionGroup.initialTransaction
? index
: limit + index - 10
}`}
>
{renderDateStamp(index, dateGroup)}
{transactionGroup.initialTransaction
?.isSmartTransaction ? (
<SmartTransactionListItem
transactionGroup={transactionGroup}
smartTransaction={
transactionGroup.initialTransaction
}
/>
) : (
<TransactionListItem
transactionGroup={transactionGroup}
/>
)}
</Fragment>
);
},
);
})
: null}
{completedTransactions.length > limit && (
<Button
className="transaction-list__view-more"
Expand Down
22 changes: 12 additions & 10 deletions ui/components/app/transaction-list/transaction-list.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ describe('TransactionList', () => {
jest.clearAllMocks();
});

it('renders TransactionList component and shows You have no transactions text', () => {
const { getByText } = render();
expect(getByText('You have no transactions')).toBeInTheDocument();
it('renders TransactionList component and does not show You have no transactions text', () => {
const { queryByText } = render();
expect(queryByText('You have no transactions')).toBeNull();
});

it('renders TransactionList component and shows Bitcoin activity is not supported text', () => {
Expand All @@ -86,18 +86,18 @@ describe('TransactionList', () => {
});
});

it('renders TransactionList component and shows Chain ID mismatch text if network name is not available', () => {
it('renders TransactionList component and does not show Chain ID mismatch text if network name is not available', () => {
const store = configureStore(defaultState);

const { getByText } = renderWithProvider(
const { queryByText } = renderWithProvider(
<MetaMetricsContext.Provider value={mockTrackEvent}>
<TransactionList tokenChainId="0x89" />
</MetaMetricsContext.Provider>,
store,
);
expect(
getByText('Please switch network to view transactions'),
).toBeInTheDocument();
queryByText('Please switch network to view transactions'),
).toBeNull();
});

it('renders TransactionList component and shows network name text', () => {
Expand Down Expand Up @@ -140,14 +140,16 @@ describe('TransactionList', () => {
};
const store = configureStore(defaultState2);

const { getByText } = renderWithProvider(
const { queryByText } = renderWithProvider(
<MetaMetricsContext.Provider value={mockTrackEvent}>
<TransactionList tokenChainId="0xe708" />
</MetaMetricsContext.Provider>,
store,
);
expect(
getByText('Please switch to Linea Mainnet network to view transactions'),
).toBeInTheDocument();
queryByText(
'Please switch to Linea Mainnet network to view transactions',
),
).toBeNull();
});
});
36 changes: 3 additions & 33 deletions ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,17 +318,7 @@ exports[`AssetPage should render a native asset 1`] = `
>
<div
class="mm-box transaction-list__completed-transactions"
>
<div
class="mm-box transaction-list__empty"
>
<div
class="mm-box transaction-list__empty-text"
>
You have no transactions
</div>
</div>
</div>
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -697,17 +687,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
>
<div
class="mm-box transaction-list__completed-transactions"
>
<div
class="mm-box transaction-list__empty"
>
<div
class="mm-box transaction-list__empty-text"
>
You have no transactions
</div>
</div>
</div>
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -1230,17 +1210,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
>
<div
class="mm-box transaction-list__completed-transactions"
>
<div
class="mm-box transaction-list__empty"
>
<div
class="mm-box transaction-list__empty-text"
>
You have no transactions
</div>
</div>
</div>
/>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ui/pages/asset/components/asset-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,9 +436,9 @@ const AssetPage = ({
{t('yourActivity')}
</Text>
{type === AssetType.native ? (
<TransactionList hideTokenTransactions tokenChainId={chainId} />
<TransactionList hideTokenTransactions />
) : (
<TransactionList tokenAddress={address} tokenChainId={chainId} />
<TransactionList tokenAddress={address} />
)}
</Box>
</Box>
Expand Down

0 comments on commit d8eeb19

Please sign in to comment.