Skip to content

Commit

Permalink
feat(ramps): updates copy on payment method selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@georgeweiler
georgeweiler committed Feb 25, 2025
1 parent 1f86b88 commit 74b00d6
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 43 deletions.
4 changes: 2 additions & 2 deletions app/components/UI/Ramp/components/AmountInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Box from './Box';
import CurrencyChevron from './CurrencyChevron';
import DownChevronText from './DownChevronText';
import ListItem from '../../../../component-library/components/List/ListItem';
import ListItemColumn, {
WidthType,
Expand Down Expand Up @@ -81,7 +81,7 @@ const AmountInput: React.FC<Props> = ({
hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
testID={BuildQuoteSelectors.SELECT_CURRENCY}
>
<CurrencyChevron currency={currencyCode} />
<DownChevronText text={currencyCode} />
</TouchableOpacity>
</ListItemColumn>
) : null}
Expand Down
4 changes: 2 additions & 2 deletions app/components/UI/Ramp/components/AssetSelectorButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { ReactNode } from 'react';
import { View } from 'react-native';
import Box from './Box';
import CurrencyChevron from './CurrencyChevron';
import DownChevronText from './DownChevronText';
import ListItem from '../../../../component-library/components/List/ListItem';
import ListItemColumn, {
WidthType,
Expand Down Expand Up @@ -52,7 +52,7 @@ const AssetSelectorButton: React.FC<Props> = ({
</ListItemColumn>

<ListItemColumn>
<CurrencyChevron currency={assetSymbol} />
<DownChevronText text={assetSymbol} />
</ListItemColumn>
</ListItem>
</View>
Expand Down
8 changes: 4 additions & 4 deletions ...ts/UI/Ramp/components/CurrencyChevron.tsx → ...ts/UI/Ramp/components/DownChevronText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ const createStyles = (colors: Colors) =>
});

interface Props {
currency?: string;
text?: string;
}

const CurrencyChevron = ({ currency, ...props }: Props) => {
const DownChevronText = ({ text, ...props }: Props) => {
const { colors } = useTheme();
const styles = createStyles(colors);
return (
<View {...props}>
<Text black>
<Text black bold>
{currency}
{text}
</Text>
{' '}
<Entypo name="chevron-down" size={16} style={styles.chevron} />
Expand All @@ -33,4 +33,4 @@ const CurrencyChevron = ({ currency, ...props }: Props) => {
);
};

export default CurrencyChevron;
export default DownChevronText;
1 change: 0 additions & 1 deletion app/components/UI/Ramp/components/PaymentMethodBadges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const PaymentMethodBadges: React.FC<Props> = ({
style,
}: Props) => {
const { themeAppearance } = useTheme();

const logos = logosByTheme[themeAppearance];

return (
Expand Down
20 changes: 17 additions & 3 deletions app/components/UI/Ramp/components/PaymentMethodSelector.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@ import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react-native';

Check failure on line 2 in app/components/UI/Ramp/components/PaymentMethodSelector.test.tsx

View workflow job for this annotation

GitHub Actions / scripts (lint) 

'render' is defined but never used
import PaymentMethodSelector from './PaymentMethodSelector';
import { Image } from 'react-native';
import { render as renderComponent } from '@testing-library/react-native/build/pure';
import renderWithProvider from '../../../../util/test/renderWithProvider';
import { backgroundState } from '../../../../util/test/initial-root-state';

const defaultState = {
engine: {
backgroundState,
},
};

jest.mock('../../../../util/theme', () => ({
useTheme: jest.fn().mockReturnValue({
Expand All @@ -25,13 +32,20 @@ const mockProps = {

describe('PaymentMethodSelector', () => {
it('renders correctly', () => {
renderComponent(<PaymentMethodSelector {...mockProps} />);
renderWithProvider(<PaymentMethodSelector {...mockProps} />, {
state: defaultState,
});
expect(screen.toJSON()).toMatchSnapshot();
});

it('calls onPress when pressed', () => {
const mockOnPress = jest.fn();
render(<PaymentMethodSelector {...mockProps} onPress={mockOnPress} />);
renderWithProvider(
<PaymentMethodSelector {...mockProps} onPress={mockOnPress} />,
{
state: defaultState,
},
);
fireEvent.press(screen.getByText(mockProps.name));
expect(mockOnPress).toHaveBeenCalledTimes(1);
});
Expand Down
20 changes: 12 additions & 8 deletions app/components/UI/Ramp/components/PaymentMethodSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import ListItemColumn, {
import Text, {
TextVariant,
} from '../../../../component-library/components/Texts/Text';
import DownChevronText from './DownChevronText';
import RemoteImage from '../../../Base/RemoteImage';

const createStyles = (colors: Colors) =>
StyleSheet.create({
Expand All @@ -19,9 +21,9 @@ const createStyles = (colors: Colors) =>
color: colors.icon.default,
},
icon: {
width: 28,
height: 18,
marginRight: 8,
width: 30,
height: 20,
marginRight: 6,
},
iconContainer: {
flexDirection: 'row',
Expand Down Expand Up @@ -70,14 +72,16 @@ const PaymentMethodSelector: React.FC<IProps> = ({
{name}
</Text>
</ListItemColumn>
<ListItemColumn>
<Entypo name="chevron-down" size={16} style={styles.chevron} />
</ListItemColumn>
<DownChevronText text="Change" />
</ListItem>
<View style={styles.divider} />
<View style={styles.iconContainer}>
{paymentMethodIcons.map((imgSrc) => (
<Image key={imgSrc} source={{ uri: imgSrc }} style={styles.icon} />
{paymentMethodIcons.map((logoURL) => (
<RemoteImage
key={logoURL}
source={{ uri: logoURL }}
style={styles.icon}
/>
))}
</View>
</Box>
Expand Down
130 changes: 107 additions & 23 deletions app/components/UI/Ramp/components/__snapshots__/PaymentMethodSelector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,36 +118,118 @@ exports[`PaymentMethodSelector renders correctly 1`] = `
}
testID="listitem-gap"
/>
<View
style={
{
"flex": -1,
}
}
testID="listitemcolumn"
>
<View>
<Text
allowFontScaling={false}
style={
[
{
"color": undefined,
"fontSize": 16,
"color": "#141618",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 30,
"fontWeight": "400",
"marginVertical": 2,
},
undefined,
undefined,
undefined,
undefined,
{
"color": "#141618",
"marginLeft": 10,
},
undefined,
undefined,
undefined,
undefined,
{
"fontFamily": "Entypo",
"fontStyle": "normal",
"fontWeight": "normal",
"color": "#141618",
},
{},
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
]
}
>
<Text
style={
[
{
"color": "#141618",
"fontFamily": "EuclidCircularB-Regular",
"fontSize": 30,
"fontWeight": "400",
"marginVertical": 2,
},
undefined,
undefined,
{
"fontFamily": "EuclidCircularB-Bold",
"fontWeight": "600",
},
undefined,
{
"color": "#141618",
},
undefined,
undefined,
undefined,
undefined,
{
"color": "#141618",
},
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
undefined,
]
}
>
Change
</Text>
<Text
allowFontScaling={false}
style={
[
{
"color": undefined,
"fontSize": 16,
},
{
"color": "#141618",
"marginLeft": 10,
},
{
"fontFamily": "Entypo",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>
</Text>
</View>
</View>
Expand All @@ -171,30 +253,32 @@ exports[`PaymentMethodSelector renders correctly 1`] = `
}
>
<Image
onError={[Function]}
source={
{
"uri": "https://on-ramp-content.api.cx.metamask.io/assets/Visa-regular@3x.png",
}
}
style={
{
"height": 18,
"marginRight": 8,
"width": 28,
"height": 20,
"marginRight": 6,
"width": 30,
}
}
/>
<Image
onError={[Function]}
source={
{
"uri": "https://on-ramp-content.api.cx.metamask.io/assets/Mastercard-regular@3x.png",
}
}
style={
{
"height": 18,
"marginRight": 8,
"width": 28,
"height": 20,
"marginRight": 6,
"width": 30,
}
}
/>
Expand Down

0 comments on commit 74b00d6

Please sign in to comment.