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;