diff --git a/app/components/UI/AssetActionButton/__snapshots__/index.test.tsx.snap b/app/components/UI/AssetActionButton/__snapshots__/index.test.tsx.snap index e58d1a16f0c..e8667b6cfaf 100644 --- a/app/components/UI/AssetActionButton/__snapshots__/index.test.tsx.snap +++ b/app/components/UI/AssetActionButton/__snapshots__/index.test.tsx.snap @@ -51,12 +51,15 @@ exports[`AssetActionButtons should render correctly 1`] = ` Object { "color": "#037DD6", "fontSize": 14, + "marginHorizontal": 3, "marginTop": 8, } } underline={false} upper={false} - /> + > + mock text + `; @@ -125,12 +128,15 @@ exports[`AssetActionButtons should render type add correctly 1`] = ` Object { "color": "#037DD6", "fontSize": 14, + "marginHorizontal": 3, "marginTop": 8, } } underline={false} upper={false} - /> + > + mock text + `; @@ -199,12 +205,15 @@ exports[`AssetActionButtons should render type information correctly 1`] = ` Object { "color": "#037DD6", "fontSize": 14, + "marginHorizontal": 3, "marginTop": 8, } } underline={false} upper={false} - /> + > + mock text + `; @@ -285,12 +294,15 @@ exports[`AssetActionButtons should render type receive correctly 1`] = ` Object { "color": "#037DD6", "fontSize": 14, + "marginHorizontal": 3, "marginTop": 8, } } underline={false} upper={false} - /> + > + receive... + `; @@ -359,12 +371,15 @@ exports[`AssetActionButtons should render type send correctly 1`] = ` Object { "color": "#037DD6", "fontSize": 14, + "marginHorizontal": 3, "marginTop": 8, } } underline={false} upper={false} - /> + > + mock text + `; @@ -439,11 +454,14 @@ exports[`AssetActionButtons should render type swap correctly 1`] = ` Object { "color": "#037DD6", "fontSize": 14, + "marginHorizontal": 3, "marginTop": 8, } } underline={false} upper={false} - /> + > + mock text + `; diff --git a/app/components/UI/AssetActionButton/index.js b/app/components/UI/AssetActionButton/index.js index 7fca1bc2871..918d98fae20 100644 --- a/app/components/UI/AssetActionButton/index.js +++ b/app/components/UI/AssetActionButton/index.js @@ -38,6 +38,7 @@ const createStyles = (colors) => }, buttonText: { marginTop: 8, + marginHorizontal: 3, color: colors.primary.default, fontSize: 14, }, @@ -60,6 +61,8 @@ function AssetActionButton({ onPress, icon, label, disabled }) { const { colors } = useAppThemeFromContext() || mockTheme; const styles = createStyles(colors); + const maxStringLength = 10; + const getIcon = (type) => { switch (type) { case 'send': { @@ -123,7 +126,9 @@ function AssetActionButton({ onPress, icon, label, disabled }) { {icon && (typeof icon === 'string' ? getIcon(icon) : icon)} - {label} + {label.length > maxStringLength + ? `${label.substring(0, maxStringLength - 3)}...` + : label} ); diff --git a/app/components/UI/AssetActionButton/index.test.tsx b/app/components/UI/AssetActionButton/index.test.tsx index 2a24718bafb..283f1abdfa9 100644 --- a/app/components/UI/AssetActionButton/index.test.tsx +++ b/app/components/UI/AssetActionButton/index.test.tsx @@ -3,28 +3,33 @@ import { shallow } from 'enzyme'; import AssetActionButton from './'; describe('AssetActionButtons', () => { + const mockText = 'mock text'; it('should render correctly', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it('should render type send correctly', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it('should render type receive correctly', () => { - const wrapper = shallow(); + // String with more than 10 characters + const text = 'receive receive'; + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it('should render type add correctly', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it('should render type information correctly', () => { - const wrapper = shallow(); + const wrapper = shallow( + , + ); expect(wrapper).toMatchSnapshot(); }); it('should render type swap correctly', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); });