chore: update BuyMessage to show "user rejected" error (#1768)

Co-authored-by: Alissa Crane <[email protected]>

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(<BuyMessage />);
@@ -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',
+    );
   });
 });

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 (
-      <div className={cn('text-sm', color.foregroundMuted)}>
-        Complete the field to continue
-      </div>
-    );
-  }
+  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 (
-      <div className={cn(color.error, 'text-sm')}>
-        Something went wrong. Please try again.
-      </div>
-    );
+    return <div className={cn(textColor, 'text-sm')}>{message}</div>;
   }
 
   return null;