diff --git a/app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap b/app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap index 5e17a5bb2f6..07dbb426956 100644 --- a/app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap @@ -303,6 +303,7 @@ exports[`AccountApproval should render correctly 1`] = ` { "flexDirection": "row", "justifyContent": "flex-start", + "marginLeft": 8, "width": "100%", } } @@ -327,9 +328,21 @@ exports[`AccountApproval should render correctly 1`] = ` "lineHeight": 24, } } + tooltip="Account 2" > Account 2 + + - ( 0xC4966...4a756 - ) - - Balance: - - 0 ETH - + + Balance: + + 0 ETH + + diff --git a/app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap b/app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap index a0a0746d5bd..cb37f786963 100644 --- a/app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap @@ -87,6 +87,7 @@ exports[`AccountInfoCard should match snapshot 1`] = ` { "flexDirection": "row", "justifyContent": "flex-start", + "marginLeft": 8, "width": "100%", } } @@ -111,9 +112,21 @@ exports[`AccountInfoCard should match snapshot 1`] = ` "lineHeight": 24, } } + tooltip="Account 1" > Account 1 + + - ( 0xC4955...4D272 - ) - - Balance: - - < 0.00001 SepoliaETH - + + Balance: + + < 0.00001 SepoliaETH + + `; diff --git a/app/components/UI/AccountInfoCard/index.js b/app/components/UI/AccountInfoCard/index.js index f3e22eab2e9..75c353af29f 100644 --- a/app/components/UI/AccountInfoCard/index.js +++ b/app/components/UI/AccountInfoCard/index.js @@ -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, @@ -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'; @@ -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({ @@ -59,6 +62,7 @@ const createStyles = (colors) => width: '100%', flexDirection: 'row', justifyContent: 'flex-start', + marginLeft: 8, }, accountName: { maxWidth: Device.isMediumDevice() ? '35%' : '45%', @@ -138,6 +142,7 @@ class AccountInfoCard extends PureComponent { transaction: PropTypes.object, origin: PropTypes.string, signatureRequests: PropTypes.object, + accountToGroupMap: PropTypes.object, }; render() { @@ -153,6 +158,7 @@ class AccountInfoCard extends PureComponent { transaction, origin, signatureRequests, + accountToGroupMap, } = this.props; const signatureRequest = Object.values(signatureRequests || {})?.[0]; @@ -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() @@ -211,9 +224,12 @@ class AccountInfoCard extends PureComponent { styles.accountName, accountLabelTag ? styles.accountNameSmall : undefined, ]} + tooltip={accountLabel} > - {accountLabel} + {renderShortAccountName(accountLabel)} + + - ({address}) + {address} + + + + + {strings('signature_request.balance_title')}{' '} + {dollarBalance !== undefined + ? `${dollarBalance} (${balance})` + : balance} - - {strings('signature_request.balance_title')}{' '} - {dollarBalance !== undefined - ? `${dollarBalance} (${balance})` - : balance} - {accountLabelTag && ( @@ -258,6 +276,7 @@ const mapStateToProps = (state) => ({ transaction: getNormalizedTxState(state), activeTabUrl: getActiveTabUrl(state), signatureRequests: selectSignatureRequests(state), + accountToGroupMap: selectAccountToGroupMap(state), }); AccountInfoCard.contextType = ThemeContext; diff --git a/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap b/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap index 85bb3f2eb2f..78ce89a4052 100644 --- a/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap +++ b/app/components/UI/CollectibleModal/__snapshots__/CollectibleModal.test.tsx.snap @@ -12,23 +12,38 @@ exports[`CollectibleModal should render correctly 1`] = ` } } > - + > + + - !isBackupAndSyncEnabled || isBackupAndSyncUpdateLoading, + [isBackupAndSyncEnabled, isBackupAndSyncUpdateLoading], + ); + return ( @@ -92,10 +97,15 @@ const FeatureToggle = ({ - + > + + - { backdropOpacity={0.7} animationInTiming={600} animationOutTiming={600} + onBackdropPress={onClose} + onSwipeComplete={onClose} propagateSwipe > diff --git a/app/components/UI/ReusableModal/__snapshots__/index.test.tsx.snap b/app/components/UI/ReusableModal/__snapshots__/index.test.tsx.snap index 8afb68ae767..52e75e9cf08 100644 --- a/app/components/UI/ReusableModal/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/ReusableModal/__snapshots__/index.test.tsx.snap @@ -13,23 +13,38 @@ exports[`ReusableModal should render correctly 1`] = ` } } > - + > + + - - + /> `; diff --git a/app/components/UI/ReusableModal/index.tsx b/app/components/UI/ReusableModal/index.tsx index 05e7c4428cb..a9b90028f4a 100644 --- a/app/components/UI/ReusableModal/index.tsx +++ b/app/components/UI/ReusableModal/index.tsx @@ -210,17 +210,19 @@ const ReusableModal = forwardRef( return ( - + + + - {children} diff --git a/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap b/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap index 255687c9fed..faa6737ab0b 100644 --- a/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap +++ b/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap @@ -323,23 +323,38 @@ exports[`UpdateNeeded should render snapshot correctly 1`] = ` } } > - + > + + - - + + + - - + + + - - + > + + - - + > + + - { expect(result.current).toEqual([]); }); + it('returns empty array when isNonEvmSendType is true', () => { + mockUseSendType.mockReturnValue({ + isEvmSendType: true, + isSolanaSendType: false, + isEvmNativeSendType: false, + isNonEvmSendType: true, + isNonEvmNativeSendType: false, + isBitcoinSendType: false, + isTronSendType: false, + }); + const { result } = renderHook(() => useContacts()); + expect(result.current).toEqual([]); + }); + it('handles address book with empty chains', () => { mockUseSelector.mockImplementation((selector) => { if (selector === selectAddressBook) { diff --git a/app/components/Views/confirmations/hooks/send/useContacts.ts b/app/components/Views/confirmations/hooks/send/useContacts.ts index 132ec0bb350..2a9edfc9b41 100644 --- a/app/components/Views/confirmations/hooks/send/useContacts.ts +++ b/app/components/Views/confirmations/hooks/send/useContacts.ts @@ -8,7 +8,7 @@ import { useSendType } from './useSendType'; export const useContacts = () => { const addressBook = useSelector(selectAddressBook); - const { isEvmSendType } = useSendType(); + const { isEvmSendType, isNonEvmSendType } = useSendType(); const contacts = useMemo(() => { const flattenedContacts: RecipientType[] = []; @@ -38,5 +38,9 @@ export const useContacts = () => { }); }, [addressBook, isEvmSendType]); + if (isNonEvmSendType) { + return []; + } + return contacts; }; diff --git a/app/util/address/index.test.ts b/app/util/address/index.test.ts index 6e12ab83152..60ee2e4ef57 100644 --- a/app/util/address/index.test.ts +++ b/app/util/address/index.test.ts @@ -23,6 +23,7 @@ import { getTokenDetails, areAddressesEqual, toChecksumAddress, + renderShortAccountName, } from '.'; import { mockHDKeyringAddress, @@ -632,6 +633,24 @@ describe('getTokenDetails,', () => { }); }); +describe('renderShortAccountName', () => { + it('returns the short account name', () => { + expect(renderShortAccountName('Account 12345678')).toBe('Account 12345678'); + }); + + it('returns the short account name with the default number of characters', () => { + expect(renderShortAccountName('Account 12345678901234567890')).toBe( + 'Account 123456789012...', + ); + }); + + it('returns the short account name with the specified number of characters', () => { + expect(renderShortAccountName('Account 12345678', 13)).toBe( + 'Account 12345...', + ); + }); +}); + describe('areAddressesEqual', () => { const ethAddress1 = '0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272'; const ethAddress1Lower = ethAddress1.toLowerCase(); diff --git a/app/util/address/index.ts b/app/util/address/index.ts index a47b5c531a1..6cfa247f72e 100644 --- a/app/util/address/index.ts +++ b/app/util/address/index.ts @@ -148,6 +148,24 @@ export function renderShortAddress(address: string, chars = 5) { )}`; } +/** + * Returns short account name format + * @param {String} accountName - String corresponding to an account name + * @param {Number} chars - Number of characters to show at the end and beginning. + * Defaults to 20. + * @returns {String} - String corresponding to short account name format + */ +export function renderShortAccountName( + accountName: string, + chars: number = 20, +): string { + if (!accountName) return accountName; + if (accountName.length <= chars) { + return accountName; + } + return `${accountName.substr(0, chars)}...`; +} + export function renderSlightlyLongAddress( address: string, chars = 4,