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();
});
});