Skip to content

Commit

Permalink
Merge branch 'main' into test/2003-e2e-move-files-to-receive-folder
Browse files Browse the repository at this point in the history
  • Loading branch information
@SamuelSalas
SamuelSalas authored Oct 30, 2024
2 parents 2e08662 + a803756 commit 66d72b4
Show file tree
Hide file tree
Showing 24 changed files with 504 additions and 96 deletions.
2 changes: 2 additions & 0 deletions ...nent-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const FORMATTED_VALUE_PRICE_TEST_ID = 'formatted-value-price-test-id';
export const FORMATTED_PERCENTAGE_TEST_ID = 'formatted-percentage-test-id';
22 changes: 22 additions & 0 deletions ...omponent-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import AggregatedPercentage from './AggregatedPercentage';
import { mockTheme } from '../../../../util/theme';
import { useSelector } from 'react-redux';
import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
import {
FORMATTED_VALUE_PRICE_TEST_ID,
FORMATTED_PERCENTAGE_TEST_ID,
} from './AggregatedPercentage.constants';

jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
Expand Down Expand Up @@ -65,4 +69,22 @@ describe('AggregatedPercentage', () => {
color: mockTheme.colors.error.default,
});
});

it('renders correctly with privacy mode on', () => {
const { getByTestId } = render(
<AggregatedPercentage
ethFiat={150}
tokenFiat={200}
tokenFiat1dAgo={300}
ethFiat1dAgo={200}
privacyMode
/>,
);

const formattedPercentage = getByTestId(FORMATTED_PERCENTAGE_TEST_ID);
const formattedValuePrice = getByTestId(FORMATTED_VALUE_PRICE_TEST_ID);

expect(formattedPercentage.props.children).toBe('••••••••••');
expect(formattedValuePrice.props.children).toBe('••••••••••');
});
});
43 changes: 33 additions & 10 deletions app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import React from 'react';
import Text, {
import {
TextColor,
TextVariant,
} from '../../../../component-library/components/Texts/Text';
import SensitiveText from '../../../../component-library/components/Texts/SensitiveText';
import { View } from 'react-native';
import { renderFiat } from '../../../../util/number';
import { useSelector } from 'react-redux';
import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
import styleSheet from './AggregatedPercentage.styles';
import { useStyles } from '../../../hooks';
import {
FORMATTED_VALUE_PRICE_TEST_ID,
FORMATTED_PERCENTAGE_TEST_ID,
} from './AggregatedPercentage.constants';

export interface AggregatedPercentageProps {
ethFiat: number;
Expand All @@ -25,11 +30,13 @@ const AggregatedPercentage = ({
tokenFiat,
tokenFiat1dAgo,
ethFiat1dAgo,
privacyMode = false,
}: {
ethFiat: number;
tokenFiat: number;
tokenFiat1dAgo: number;
ethFiat1dAgo: number;
privacyMode?: boolean;
}) => {
const { styles } = useStyles(styleSheet, {});

Expand All @@ -46,12 +53,16 @@ const AggregatedPercentage = ({

let percentageTextColor = TextColor.Default;

if (percentageChange === 0) {
percentageTextColor = TextColor.Default;
} else if (percentageChange > 0) {
percentageTextColor = TextColor.Success;
if (!privacyMode) {
if (percentageChange === 0) {
percentageTextColor = TextColor.Default;
} else if (percentageChange > 0) {
percentageTextColor = TextColor.Success;
} else {
percentageTextColor = TextColor.Error;
}
} else {
percentageTextColor = TextColor.Error;
percentageTextColor = TextColor.Alternative;
}

const formattedPercentage = isValidAmount(percentageChange)
Expand All @@ -70,12 +81,24 @@ const AggregatedPercentage = ({

return (
<View style={styles.wrapper}>
<Text color={percentageTextColor} variant={TextVariant.BodyMDMedium}>
<SensitiveText
isHidden={privacyMode}
length="10"
color={percentageTextColor}
variant={TextVariant.BodyMDMedium}
testID={FORMATTED_VALUE_PRICE_TEST_ID}
>
{formattedValuePrice}
</Text>
<Text color={percentageTextColor} variant={TextVariant.BodyMDMedium}>
</SensitiveText>
<SensitiveText
isHidden={privacyMode}
length="10"
color={percentageTextColor}
variant={TextVariant.BodyMDMedium}
testID={FORMATTED_PERCENTAGE_TEST_ID}
>
{formattedPercentage}
</Text>
</SensitiveText>
</View>
);
};
Expand Down
2 changes: 2 additions & 0 deletions ...mponents-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
"lineHeight": 22,
}
}
testID="formatted-value-price-test-id"
>
+20 USD
</Text>
Expand All @@ -36,6 +37,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
"lineHeight": 22,
}
}
testID="formatted-percentage-test-id"
>
(+11.11%)
</Text>
Expand Down
3 changes: 2 additions & 1 deletion app/component-library/components/Texts/SensitiveText/SensitiveText.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// External dependencies.
import React from 'react';
import { TextProps } from '../Text/Text.types';

/**
Expand Down Expand Up @@ -42,5 +43,5 @@ export interface SensitiveTextProps extends TextProps {
/**
* The text content to be displayed or hidden.
*/
children: string;
children: React.ReactNode;
}
1 change: 1 addition & 0 deletions app/components/UI/AccountSelectorList/AccountSelectorList.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const styleSheet = () =>
StyleSheet.create({
balancesContainer: {
alignItems: 'flex-end',
flexDirection: 'column',
},
balanceLabel: { textAlign: 'right' },
});
Expand Down
61 changes: 42 additions & 19 deletions app/components/UI/AccountSelectorList/AccountSelectorList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ import Cell, {
CellVariant,
} from '../../../component-library/components/Cells/Cell';
import { useStyles } from '../../../component-library/hooks';
import Text from '../../../component-library/components/Texts/Text';
import { selectPrivacyMode } from '../../../selectors/preferencesController';
import { TextColor } from '../../../component-library/components/Texts/Text';
import SensitiveText, {
SensitiveTextLength,
} from '../../../component-library/components/Texts/SensitiveText';
import AvatarGroup from '../../../component-library/components/Avatars/AvatarGroup';
import {
formatAddress,
Expand Down Expand Up @@ -60,27 +64,46 @@ const AccountSelectorList = ({
? AvatarAccountType.Blockies
: AvatarAccountType.JazzIcon,
);

const privacyMode = useSelector(selectPrivacyMode);
const getKeyExtractor = ({ address }: Account) => address;

const renderAccountBalances = useCallback(
({ fiatBalance, tokens }: Assets, address: string) => (
<View
style={styles.balancesContainer}
testID={`${AccountListViewSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${address}`}
>
<Text style={styles.balanceLabel}>{fiatBalance}</Text>
{tokens && (
<AvatarGroup
avatarPropsList={tokens.map((tokenObj) => ({
...tokenObj,
variant: AvatarVariant.Token,
}))}
/>
)}
</View>
),
[styles.balancesContainer, styles.balanceLabel],
({ fiatBalance, tokens }: Assets, address: string) => {
const fiatBalanceStrSplit = fiatBalance.split('\n');
const fiatBalanceAmount = fiatBalanceStrSplit[0] || '';
const tokenTicker = fiatBalanceStrSplit[1] || '';
return (
<View
style={styles.balancesContainer}
testID={`${AccountListViewSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${address}`}
>
<SensitiveText
length={SensitiveTextLength.Long}
style={styles.balanceLabel}
isHidden={privacyMode}
>
{fiatBalanceAmount}
</SensitiveText>
<SensitiveText
length={SensitiveTextLength.Short}
style={styles.balanceLabel}
isHidden={privacyMode}
color={privacyMode ? TextColor.Alternative : TextColor.Default}
>
{tokenTicker}
</SensitiveText>
{tokens && (
<AvatarGroup
avatarPropsList={tokens.map((tokenObj) => ({
...tokenObj,
variant: AvatarVariant.Token,
}))}
/>
)}
</View>
);
},
[styles.balancesContainer, styles.balanceLabel, privacyMode],
);

const onLongPress = useCallback(
Expand Down
90 changes: 85 additions & 5 deletions app/components/UI/AccountSelectorList/__snapshots__/AccountSelector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,6 +290,7 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
style={
{
"alignItems": "flex-end",
"flexDirection": "column",
}
}
testID="account-balance-by-address-0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272"
Expand All @@ -309,7 +310,22 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
}
>
$3200.00
1 ETH
</Text>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 14,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": 22,
"textAlign": "right",
}
}
>
1 ETH
</Text>
</View>
</View>
Expand Down Expand Up @@ -583,6 +599,7 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
style={
{
"alignItems": "flex-end",
"flexDirection": "column",
}
}
testID="account-balance-by-address-0xd018538C87232FF95acbCe4870629b75640a78E7"
Expand All @@ -602,7 +619,22 @@ exports[`AccountSelectorList renders all accounts with balances 1`] = `
}
>
$6400.00
2 ETH
</Text>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 14,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": 22,
"textAlign": "right",
}
}
>
2 ETH
</Text>
</View>
</View>
Expand Down Expand Up @@ -1453,6 +1485,7 @@ exports[`AccountSelectorList renders correctly 1`] = `
style={
{
"alignItems": "flex-end",
"flexDirection": "column",
}
}
testID="account-balance-by-address-0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272"
Expand All @@ -1472,7 +1505,22 @@ exports[`AccountSelectorList renders correctly 1`] = `
}
>
$3200.00
1 ETH
</Text>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 14,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": 22,
"textAlign": "right",
}
}
>
1 ETH
</Text>
</View>
</View>
Expand Down Expand Up @@ -1746,6 +1794,7 @@ exports[`AccountSelectorList renders correctly 1`] = `
style={
{
"alignItems": "flex-end",
"flexDirection": "column",
}
}
testID="account-balance-by-address-0xd018538C87232FF95acbCe4870629b75640a78E7"
Expand All @@ -1765,7 +1814,22 @@ exports[`AccountSelectorList renders correctly 1`] = `
}
>
$6400.00
2 ETH
</Text>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 14,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": 22,
"textAlign": "right",
}
}
>
2 ETH
</Text>
</View>
</View>
Expand Down Expand Up @@ -1949,6 +2013,7 @@ exports[`AccountSelectorList should render all accounts but only the balance for
style={
{
"alignItems": "flex-end",
"flexDirection": "column",
}
}
testID="account-balance-by-address-0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272"
Expand All @@ -1968,7 +2033,22 @@ exports[`AccountSelectorList should render all accounts but only the balance for
}
>
$3200.00
1 ETH
</Text>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 14,
"fontWeight": "400",
"letterSpacing": 0,
"lineHeight": 22,
"textAlign": "right",
}
}
>
1 ETH
</Text>
</View>
</View>
Expand Down
Loading

0 comments on commit 66d72b4

Please sign in to comment.