diff --git a/src/buy/components/BuyMessage.test.tsx b/src/buy/components/BuyMessage.test.tsx
index 189fc47a7e..5dae926723 100644
--- a/src/buy/components/BuyMessage.test.tsx
+++ b/src/buy/components/BuyMessage.test.tsx
@@ -23,7 +23,7 @@ describe('BuyMessage', () => {
it('renders error message when statusName is "error"', () => {
(useBuyContext as Mock).mockReturnValue({
- lifecycleStatus: { statusName: 'error' },
+ lifecycleStatus: { statusName: 'error', statusData: { error: '' } },
});
render();
@@ -34,13 +34,20 @@ describe('BuyMessage', () => {
expect(
screen.getByText('Something went wrong. Please try again.'),
).toHaveClass('text-sm');
+ expect(
+ screen.getByText('Something went wrong. Please try again.'),
+ ).toHaveClass('ock-text-error');
});
it('renders missing required fields message', () => {
(useBuyContext as Mock).mockReturnValue({
lifecycleStatus: {
statusName: 'error',
- statusData: { code: 'TmBPc05', error: 'Missing required fields' },
+ statusData: {
+ code: 'TmBPc05',
+ error: 'Missing required fields',
+ message: 'Complete the field to continue',
+ },
},
});
@@ -52,5 +59,8 @@ describe('BuyMessage', () => {
expect(screen.getByText('Complete the field to continue')).toHaveClass(
'text-sm',
);
+ expect(screen.getByText('Complete the field to continue')).toHaveClass(
+ 'ock-text-foreground-muted',
+ );
});
});
diff --git a/src/buy/components/BuyMessage.tsx b/src/buy/components/BuyMessage.tsx
index cc0dcd2c22..5bd7afefc5 100644
--- a/src/buy/components/BuyMessage.tsx
+++ b/src/buy/components/BuyMessage.tsx
@@ -5,24 +5,18 @@ import { useBuyContext } from './BuyProvider';
export function BuyMessage() {
const { lifecycleStatus } = useBuyContext();
- // Missing required fields
- if (
- isSwapError(lifecycleStatus.statusData) &&
- lifecycleStatus?.statusData?.code === 'TmBPc05'
- ) {
- return (
-
- Complete the field to continue
-
- );
- }
+ if (isSwapError(lifecycleStatus.statusData)) {
+ const message =
+ lifecycleStatus.statusData.message ||
+ 'Something went wrong. Please try again.';
+
+ // on missing required fields, show muted text
+ const textColor =
+ lifecycleStatus?.statusData?.code === 'TmBPc05'
+ ? color.foregroundMuted
+ : color.error;
- if (lifecycleStatus?.statusName === 'error') {
- return (
-
- Something went wrong. Please try again.
-
- );
+ return {message}
;
}
return null;