Skip to content

feat: use account API v4 transactions #29536

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

Merged
n3ps merged 24 commits into from
May 6, 2026
Merged

feat: use account API v4 transactions #29536

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
1955f4b
feat: use account API v4 transactions
n3ps Apr 30, 2026
3def3f0
fix: address account api transaction ci failures
cursoragent Apr 30, 2026
e0230a0
fix: mock account api activity in e2e
cursoragent Apr 30, 2026
8800a3c
cleanup
n3ps Apr 30, 2026
327c92b
revised
n3ps May 2, 2026
9ebaab5
fix: type unified transaction test mocks
cursoragent May 4, 2026
0b8ffdd
Merge remote-tracking branch 'origin/main' into n3ps/accounts-api-tra…
cursoragent May 4, 2026
4ff4a7e
fix: align unified transactions test page info
cursoragent May 4, 2026
f9b523f
Merge branch 'main' into n3ps/accounts-api-transactions
n3ps May 5, 2026
f0e3bfa
move
n3ps May 5, 2026
fd05fb6
fix for incoming-transactions spec
n3ps May 5, 2026
4897d39
fix for bridge-action-smoke spec
n3ps May 5, 2026
d498edb
cleanup
n3ps May 5, 2026
17a39f6
test
n3ps May 5, 2026
3ef4b58
cleanup
n3ps May 5, 2026
643ac31
spec to update
n3ps May 5, 2026
6596ada
add test
n3ps May 5, 2026
0dac0e3
refactor
n3ps May 5, 2026
8b8ef87
coverage for coverage sake
n3ps May 6, 2026
ff4138f
Merge branch 'main' into n3ps/accounts-api-transactions
n3ps May 6, 2026
7e9d3e0
fix: preserve local pay activity transactions
cursoragent May 6, 2026
2095c21
test: mock required transaction hash selector
cursoragent May 6, 2026
5dd9d93
test: add transaction coverage cases
cursoragent May 6, 2026
a3e6592
attempt fix
n3ps May 6, 2026
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
4 changes: 4 additions & 0 deletions ...components/UI/MultichainBridgeTransactionListItem/MultichainBridgeTransactionListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
import Badge, {
BadgeVariant,
} from '../../../component-library/components/Badges/Badge';
import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
import { getNetworkImageSource } from '../../../util/networks';
import { parseCaipAssetType } from '@metamask/utils';
import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
Expand Down Expand Up @@ -102,10 +103,13 @@ const MultichainBridgeTransactionListItem = ({
const networkImageSource = getNetworkImageSource({ chainId });
return (
<BadgeWrapper
badgePosition={{ bottom: -4, right: -4 }}
Copy link
Copy Markdown
Contributor Author

@n3ps n3ps May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make it bottom right, aligns with most avatars and extension

badgeElement={
<Badge
variant={BadgeVariant.Network}
imageSource={networkImageSource}
isScaled={false}
size={AvatarSize.Xs}
/>
}
>
Expand Down
4 changes: 4 additions & 0 deletions app/components/UI/MultichainTransactionListItem/MultichainTransactionListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
import Badge, {
BadgeVariant,
} from '../../../component-library/components/Badges/Badge';
import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
import { getNetworkImageSource } from '../../../util/networks';
import Routes from '../../../constants/navigation/Routes';
import { useAnalytics } from '../../hooks/useAnalytics/useAnalytics';
Expand Down Expand Up @@ -91,10 +92,13 @@ const MultichainTransactionListItem = ({

return (
<BadgeWrapper
badgePosition={{ bottom: -4, right: -4 }}
Copy link
Copy Markdown
Contributor Author

@n3ps n3ps May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make it bottom right, aligns with most avatars and extension

badgeElement={
<Badge
variant={BadgeVariant.Network}
imageSource={networkImageSource}
isScaled={false}
size={AvatarSize.Xs}
/>
}
>
Expand Down
47 changes: 43 additions & 4 deletions app/components/UI/TransactionElement/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
import Badge, {
BadgeVariant,
} from '../../../component-library/components/Badges/Badge';
import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
import { NetworkBadgeSource } from '../AssetOverview/Balance/Balance';
import {
getFontFamily,
Expand Down Expand Up @@ -98,6 +99,10 @@ const createStyles = (colors, typography) =>
width: 32,
height: 32,
},
iconBadgePosition: {
Copy link
Copy Markdown
Contributor Author

@n3ps n3ps May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UI improvements: align network badge placement (bottom right)

bottom: -4,
right: -4,
},
importText: {
color: colors.text.alternative,
fontSize: 14,
Expand Down Expand Up @@ -264,13 +269,13 @@ class TransactionElement extends PureComponent {
mounted = false;

componentDidMount = async () => {
this.mounted = true;
const [transactionElement, transactionDetails] = await decodeTransaction({
...this.props,
swapsTransactions: this.props.swapsTransactions,
assetSymbol: this.props.assetSymbol,
ticker: this.props.ticker,
});
this.mounted = true;

this.mounted && this.setState({ transactionElement, transactionDetails });
};
Expand Down Expand Up @@ -461,10 +466,13 @@ class TransactionElement extends PureComponent {

return (
<BadgeWrapper
badgePosition={styles.iconBadgePosition}
badgeElement={
<Badge
variant={BadgeVariant.Network}
imageSource={NetworkBadgeSource(chainId)}
isScaled={false}
size={AvatarSize.Xs}
/>
}
>
Expand Down Expand Up @@ -707,14 +715,43 @@ class TransactionElement extends PureComponent {
);
};

renderPendingElement = () => {
const { i, tx } = this.props;
const { colors, typography } = this.context || mockTheme;
const styles = createStyles(colors, typography);

return (
<ListItem>
<ListItem.Date style={styles.listItemDate}>
{this.renderTxTime()}
</ListItem.Date>
<ListItem.Content style={styles.listItemContent}>
<ListItem.Icon>
<View style={styles.icon} />
</ListItem.Icon>
<ListItem.Body>
<ListItem.Title numberOfLines={1} style={styles.listItemTitle}>
...
</ListItem.Title>
<StatusText
testID={`transaction-status-${i}`}
status={tx.status}
style={styles.listItemStatus}
/>
</ListItem.Body>
</ListItem.Content>
</ListItem>
);
};

render() {
const { tx, selectedInternalAccount } = this.props;
const { transactionElement, transactionDetails } = this.state;

const { colors, typography } = this.context || mockTheme;
const styles = createStyles(colors, typography);

if (!transactionElement || !transactionDetails) return null;
const isReady = Boolean(transactionElement && transactionDetails);

const accountImportTime = selectedInternalAccount?.metadata.importTime;
const { time } = tx;
Expand All @@ -726,11 +763,13 @@ class TransactionElement extends PureComponent {
style={
this.props.showBottomBorder ? styles.rowWithBorder : styles.row
}
onPress={this.onPressItem}
onPress={isReady ? this.onPressItem : undefined}
underlayColor={colors.background.alternative}
activeOpacity={1}
>
{this.renderTxElement(transactionElement)}
{isReady
Copy link
Copy Markdown
Contributor Author

@n3ps n3ps May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UI improvements: prefer a stable layout

? this.renderTxElement(transactionElement)
: this.renderPendingElement()}
</TouchableHighlight>
{accountImportTime <= time && this.renderImportTime()}
</>
Expand Down
Loading
Loading