Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
64 changes: 43 additions & 21 deletions app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ exports[`AccountApproval should render correctly 1`] = `
{
"flexDirection": "row",
"justifyContent": "flex-start",
"marginLeft": 8,
"width": "100%",
}
}
Expand All @@ -327,9 +328,21 @@ exports[`AccountApproval should render correctly 1`] = `
"lineHeight": 24,
}
}
tooltip="Account 2"
>
Account 2
</Text>
</View>
<View
style={
{
"flexDirection": "row",
"justifyContent": "flex-start",
"marginLeft": 8,
"width": "100%",
}
}
>
<Text
accessibilityRole="text"
numberOfLines={1}
Expand All @@ -350,35 +363,44 @@ exports[`AccountApproval should render correctly 1`] = `
}
}
>
(
0xC4966...4a756
)
</Text>
</View>
<Text
accessibilityRole="text"
numberOfLines={1}
<View
style={
{
"0": {
"alignSelf": "flex-start",
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 14,
},
"1": undefined,
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"flexDirection": "row",
"justifyContent": "flex-start",
"marginLeft": 8,
"width": "100%",
}
}
>
Balance:

0 ETH
</Text>
<Text
accessibilityRole="text"
numberOfLines={1}
style={
{
"0": {
"alignSelf": "flex-start",
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 14,
},
"1": undefined,
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
}
}
>
Balance:

0 ETH
</Text>
</View>
</View>
</View>
</View>
Expand Down
64 changes: 43 additions & 21 deletions app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ exports[`AccountInfoCard should match snapshot 1`] = `
{
"flexDirection": "row",
"justifyContent": "flex-start",
"marginLeft": 8,
"width": "100%",
}
}
Expand All @@ -111,9 +112,21 @@ exports[`AccountInfoCard should match snapshot 1`] = `
"lineHeight": 24,
}
}
tooltip="Account 1"
>
Account 1
</Text>
</View>
<View
style={
{
"flexDirection": "row",
"justifyContent": "flex-start",
"marginLeft": 8,
"width": "100%",
}
}
>
<Text
accessibilityRole="text"
numberOfLines={1}
Expand All @@ -134,35 +147,44 @@ exports[`AccountInfoCard should match snapshot 1`] = `
}
}
>
(
0xC4955...4D272
)
</Text>
</View>
<Text
accessibilityRole="text"
numberOfLines={1}
<View
style={
{
"0": {
"alignSelf": "flex-start",
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 14,
},
"1": undefined,
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
"flexDirection": "row",
"justifyContent": "flex-start",
"marginLeft": 8,
"width": "100%",
}
}
>
Balance:

&lt; 0.00001 SepoliaETH
</Text>
<Text
accessibilityRole="text"
numberOfLines={1}
style={
{
"0": {
"alignSelf": "flex-start",
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 14,
},
"1": undefined,
"color": "#121314",
"fontFamily": "Geist Regular",
"fontSize": 16,
"letterSpacing": 0,
"lineHeight": 24,
}
}
>
Balance:

&lt; 0.00001 SepoliaETH
</Text>
</View>
</View>
</View>
`;
51 changes: 35 additions & 16 deletions app/components/UI/AccountInfoCard/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import isUrl from 'is-url';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';
import { StyleSheet, View } from 'react-native';
import { strings } from '../../../../locales/i18n';
import Text, {
TextVariant,
Expand All @@ -20,6 +20,8 @@ import {
renderAccountName,
renderShortAddress,
safeToChecksumAddress,
getInternalAccountByAddress,
renderShortAccountName,
} from '../../../util/address';
import Device from '../../../util/device';
import { hexToBN, renderFromWei, weiToFiat } from '../../../util/number';
Expand All @@ -33,6 +35,7 @@ import ApproveTransactionHeader from '../../Views/confirmations/legacy/component
import Identicon from '../Identicon';
import { selectInternalAccounts } from '../../../selectors/accountsController';
import { selectSignatureRequests } from '../../../selectors/signatureController';
import { selectAccountToGroupMap } from '../../../selectors/multichainAccounts/accountTreeController';

const createStyles = (colors) =>
StyleSheet.create({
Expand All @@ -59,6 +62,7 @@ const createStyles = (colors) =>
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-start',
marginLeft: 8,
},
accountName: {
maxWidth: Device.isMediumDevice() ? '35%' : '45%',
Expand Down Expand Up @@ -138,6 +142,7 @@ class AccountInfoCard extends PureComponent {
transaction: PropTypes.object,
origin: PropTypes.string,
signatureRequests: PropTypes.object,
accountToGroupMap: PropTypes.object,
};

render() {
Expand All @@ -153,6 +158,7 @@ class AccountInfoCard extends PureComponent {
transaction,
origin,
signatureRequests,
accountToGroupMap,
} = this.props;

const signatureRequest = Object.values(signatureRequests || {})?.[0];
Expand All @@ -164,7 +170,14 @@ class AccountInfoCard extends PureComponent {
? hexToBN(accounts[fromAddress].balance)
: 0;
const balance = `${renderFromWei(weiBalance)} ${getTicker(ticker)}`;
const accountLabel = renderAccountName(fromAddress, internalAccounts);

const account = getInternalAccountByAddress(fromAddress);
const accountGroup =
account && accountToGroupMap ? accountToGroupMap[account.id] : undefined;

const accountLabel =
accountGroup?.metadata?.name ||
renderAccountName(fromAddress, internalAccounts);
const address = renderShortAddress(fromAddress);
const dollarBalance = showFiatBalance
? weiToFiat(weiBalance, conversionRate, currentCurrency, 2)?.toUpperCase()
Expand Down Expand Up @@ -211,31 +224,36 @@ class AccountInfoCard extends PureComponent {
styles.accountName,
accountLabelTag ? styles.accountNameSmall : undefined,
]}
tooltip={accountLabel}
>
{accountLabel}
{renderShortAccountName(accountLabel)}
</Text>
</View>
<View style={styles.accountNameAndAddress}>
<Text
numberOfLines={1}
style={[
styles.accountAddress,
accountLabelTag ? styles.accountAddressSmall : undefined,
]}
>
({address})
{address}
</Text>
</View>
<View style={styles.accountNameAndAddress}>
<Text
numberOfLines={1}
style={[
styles.balanceText,
accountLabelTag ? styles.balanceTextSmall : undefined,
]}
>
{strings('signature_request.balance_title')}{' '}
{dollarBalance !== undefined
? `${dollarBalance} (${balance})`
: balance}
</Text>
</View>
<Text
numberOfLines={1}
style={[
styles.balanceText,
accountLabelTag ? styles.balanceTextSmall : undefined,
]}
>
{strings('signature_request.balance_title')}{' '}
{dollarBalance !== undefined
? `${dollarBalance} (${balance})`
: balance}
</Text>
</View>
{accountLabelTag && (
<View style={styles.tag}>
Expand All @@ -258,6 +276,7 @@ const mapStateToProps = (state) => ({
transaction: getNormalizedTxState(state),
activeTabUrl: getActiveTabUrl(state),
signatureRequests: selectSignatureRequests(state),
accountToGroupMap: selectAccountToGroupMap(state),
});

AccountInfoCard.contextType = ThemeContext;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,38 @@ exports[`CollectibleModal should render correctly 1`] = `
}
}
>
<View
<TouchableOpacity
activeOpacity={1}
disabled={false}
onPress={[Function]}
style={
[
{
"backgroundColor": "#3f434a66",
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
{
"opacity": undefined,
},
]
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
/>
>
<View
style={
[
{
"backgroundColor": "#3f434a66",
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
{
"opacity": undefined,
},
]
}
/>
</TouchableOpacity>
<View
collapsable={false}
enabled={true}
Expand Down Expand Up @@ -61,19 +76,6 @@ exports[`CollectibleModal should render correctly 1`] = `
]
}
>
<TouchableOpacity
disabled={false}
onPress={[Function]}
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
/>
<View
style={
[
Expand Down
Loading
Loading