Final UX Specification for mTBILL Product Page (Invest/Redeem Module)

Executive Summary

This specification details the design and functionality for the Invest/Redeem module of the mTBILL Product page. The module allows users to invest in and redeem mTBILL tokens using USDC, with options for setting slippage tolerance, choosing between instant and standard transactions, and displaying key transaction details. This document consolidates all decisions made during the design process and provides a clear guideline for implementation.

1. Invest/Redeem Module Structure

A. Main Fields

1. "You Pay" Field:
   • Label: "You Pay"
   • Details: Displays the amount of USDC the user wishes to invest or redeem.
   • Balance: Shows the user's current USDC balance next to the input field.
   • Max Button: A "Max" button is included next to the balance, allowing users to auto-fill the maximum available USDC amount in their wallet.
2. "You Receive" Field:
   • Label: "You Receive"
   • Details: Displays the amount of mTBILL the user will receive (when investing) or the amount of USDC they will receive (when redeeming).
   • Balance: Shows the user's current mTBILL balance next to the input field.
3. Main Action Button:
   • Label: "Invest" or "Redeem," depending on the selected tab.
   • Functionality: Finalizes the transaction based on user inputs and selected settings.

B. Settings Tooltip

1. Access:
   • The settings are accessible via a gear icon located near the input fields.
   • Toggle: Clicking the icon opens a dropdown where users can adjust their transaction preferences.
2. Slippage Tolerance Section:
   • Label: "Slippage Tolerance (%)"
   • Input Field: Allows users to set the maximum percentage slippage they’re willing to accept.
   • Default Setting: Pre-set to "0.5% (Auto)."
   • Auto Button: An "Auto" button is provided to quickly reset the slippage tolerance to 0.5%.
   • Description: "Set the maximum percentage slippage you’re willing to accept. The transaction will revert if the amount you receive is less than the quoted amount minus the tolerance you provided."
3. Transaction Type Section:
   • Label: "Transaction Type"
   • Dropdown Menu:
     • Options: "Instant" and "Standard."
   • Description: "Choose between an instant transaction for immediate execution or a standard transaction, which may take some time to process. Note: The instant option may sometimes be unavailable."

C. Information Display Below the Action Button (Gray Section)

1. Layout:
   • The key information is displayed in a gray section below the main action button, with the key labels aligned to the left and the corresponding values aligned to the right.
2. Content:
   • Minimum Amount Received:
     • Text: "Minimum Amount Received: X mTBILL/USDC (based on slippage tolerance)."
   • Minimum Investment Requirement:
     • Text: "Minimum Investment: X USDC/mTBILL."
   • Fees Breakdown:
     • Text: "Instant Fees: X USDC | Pair Fees: X USDC/mTBILL."
   • Current Exchange Rate:
     • Text: "Current Exchange Rate: 1 mTBILL = [current rate] USDC."
   • Transaction Type Indicator:
     • Text: "Current Mode: [Instant/Standard] - Adjust in the settings."
   • Processing Time (for Standard Transactions):
     • Text: "Standard transactions may take up to [specified time] to process."

2. Implementation Notes

• Balances: The balances shown next to the "You Pay" and "You Receive" fields are automatically synced with the user's wallet.