Enhancement: Clarity and Usability Improvement on Approval Modal (Spending cap)

[fairlighteth]

Description
Upon clicking the 'approve [token]' button, users are presented with a modal offering a choice between 'max' and 'default' limits. Feedback indicates that the modal does not make it apparent how to proceed after it appears. Users expect to be able to select one of the two options but find no way to do so. This confusion is detracting from the user experience and potentially hindering transaction completion.

Steps to Reproduce

• Navigate to swap.cow.fi and click to approve a token that has no allowance set.
• Observe the modal that appears with 'max' and 'default' options.

Expected Behavior

• The modal that appears should clarify the purpose of showing 'max' and 'default' without requiring a selection, and provide a clear path to proceed with the transaction.

Actual Behavior
The modal displays 'max' and 'default' options without any interaction mechanism or explanation, causing confusion on how to proceed with the transaction.

Potential Solutions

• Redesign the modal to provide a clear 'continue' button, before triggering the approve transaction.
• Adjust the presentation of the 'max' and 'default' options to clearly indicate they are not choices to be made at this stage. This could be achieved by incorporating them into the informational text above the 'Continue' button to emphasize that they are merely informative.

Impact
This issue is causing user confusion and may lead to a drop in successful transactions. Enhancing this modal's clarity will improve user trust and transaction success rates.

Suggested Assignees

@fairlighteth for interface design and front-end changes
Mindy for user experience and user testing