Swap screen

[prayagd]

As a user of the Vortex platform, I want to initiate a withdrawal of my cryptocurrency to fiat currency, So that I can transfer funds to my bank account.

Acceptance criteria

• Show a clear "Withdraw" title.
• Show a cryptocurrency I want to withdraw (USDC in this case).
• Show input field for the amount I wish to withdraw (300 USDC in this example).
• Show me an estimate of how much I will receive in my local currency (1746.24 BRL).
• Show the current exchange rate (1 USDC = 5.41 BRL). Fetched from Forex AMM.
• Show final amount I will receive after fees.
• There is an option to hide or show fee details.
• The total fees are displayed when expanded ($0.5 in this case). 0.5%
• Show following text below the fees
  • You could save up to 43.74 USD (Calculate using 3% of the USDC amount)
  • Should arrive in 5 minutes
  • Verify super fast with your Tax ID
• A "Connect Wallet" button is available to proceed with the withdrawal.
• The app clearly shows which cryptocurrency I'm withdrawing (USDC) and what I'm receiving (BRL).
• The navigation bar remains visible, showing my connect wallet button.
• The withdrawal form is contained within a distinct white box on the page for clear visual separation.
• If the user successfully connects wallet, the "Connect wallet" button should change to "Continue"
• After clicking the "Continue" button, a new section titled "Bank transfer details" open up with two new input fields appear below:
  • A field for entering the PIX code
  • A field for entering the CPF
• The "Continue" button changes to "Confirm" and is positioned below the new input fields. The button stays disabled until the details for Bank account and Tax number are added.

Error reporting

• The system validates the withdrawal amount and displays appropriate error messages:
  • If the BRL amount is less than 25, an error message states: "Minimum withdrawal amount is 25 BRL."
  • If the BRL amount is higher than 25000, an error message states: "Maximum withdrawal amount is 25000 BRL."
• The system checks the user's USDC balance:
  • If the user has insufficient USDC, an error message displays: "Insufficient USDC balance. Please check your wallet and try again."
• The system verifies liquidity for the USDC to BRL exchange:
  • If there's not enough liquidity, an error message shows: "Insufficient liquidity for this exchange. Please try a smaller amount or try again later."
• Error messages are clearly visible, preferably in red text near the relevant input field.
• When an error occurs, the "Connect Wallet" button is disabled until the issue is resolved.
• After resolving an error, the user can attempt the withdrawal again without needing to re-enter all information.

Note

• The error reporting should only happen if the user wallet is connected, No error should be shown if the wallet is not connected

• The bank details section should only show-up with the wallet is connected

• USDC icon -

• BRL icon -

Wireframe

https://www.figma.com/proto/cOx99YQtxf8LLdlhZjvkoC/Vortex?node-id=330-2058&t=ZQ4qp8wIaTzGutV7-0&scaling=min-zoom&content-scaling=fixed&page-id=330%3A556&starting-point-node-id=330%3A557

[prayagd]

Hey team! Please add your planning poker estimate with Zenhub @bogdanS98 @ebma @gianfra-t @TorstenStueber

[ebma]

@prayagd are you going to adjust the tickets again in light of the meeting that we had about the vortex UI? ie. merging some screens etc.

[prayagd]

@ebma updated the changes for single screen now

[ebma]

Cool 👍 the figma wireframes don't reflect those changes yet, do they @prayagd? It's important for @Sharqiewicz to know which of the wireframes are up-to-date and which are not.

[TorstenStueber]

@prayagd how many decimals to show for the estimated output? Always 2? How many decimals to show for the exchange rate? Always 4?

Furthermore:

• "Tax ID" or "Tax Number" should be "CPF".
• Bank Account number should be "Pix Code"

[prayagd]

Cool 👍 the figma wireframes don't reflect those changes yet, do they @prayagd?

They are ready, just that its a click dummy so those might be hidden behind animation. Will add directly the click dummy link

How many decimals to show for the exchange rate? Always 4?

Yes

how many decimals to show for the estimated output? Always 2?

Yes, we can ahead with this now.

[prayagd]

@Sharqiewicz Updated the wireframe link to click dummy and also added the icons. Let me know if any questions

[prayagd]

closing this ticket as the PR is merged