Build UI for swap feature

[lw-cdm]

No description provided.

[Sokol142196]

Version test: https://a7e7bf04.subwallet-webapp.pages.dev/

Please check issues:

• Do not show Swap quote on Substrate acc on the first time visit page

  

• Quote show incorrect information when change pair or change Amount

  

• solution: if form is invalid, show error on the right block

• Handle case Swap with Ledger account

  • Expect: Filter out Ledger account if Ledger account is invalid with selected pair.

• Handle case Swap quote expired when standing on Swap confirmation screen

  • Expect: Still standing on Confirmation screen and show more warning message

• Clickable area of the Change slippage

  • Expect:
    

• Other UI

  • Swap token

    • Actual: Show Token name
    • Expect: Show Network

    

[nampc1]

• Error page with this route, click on pDOT token on token page

• Choose default swap pair based on the selected account
• Animation showing swap quote
• Swap transaction history item
• Swap quote loading animation

[Sokol142196]

Version test: https://ec76fa9b.subwallet-webapp.pages.dev/

• UI on transaction confirmation
  

[Sokol142196]

Version test: https://fe247b3c.subwallet-webapp.pages.dev
Please check issues:

• Do not show popup turn on network on the first time open Swap screen in case stand on Specific account

  • Actual:

  

  • Expect: Show popup turn on message

• Show error message although user do not input data yet

  • Actual:
    

  • Expect: Only validate require data when user click Swap button

[Sokol142196]

Version test: https://f4e9eeba.subwallet-webapp.pages.dev/

• Update fee transaction

  • Actual: Transaction fee on Swap screen differ Confirmation/ History screen
  • Expect: Information as same as on the screens

• Improve UX: Filter swap token by Sender account (HieuDao feedback)

• Do not show Account Name on the transaction history details screen in case send internal wallet

  • Expect:
    • If send internal wallet -> show account name
    • If send external wallet -> show address
      

• Handle case Ledger account

  • Expect: Discuss more
  • With Recipient account: Filter out Ledger account if Ledger account is invalid with received token
    
  • With Sender account in case Specific account: Still show Ledger account then click Swap button then show error message not support
    

[Sokol142196]

• Sometimes, show error message although account is valid -> Resolved (Actual: Filter token by account)
  

• Add Terms of service: https://www.notion.so/subwallet/App-content-cho-t-nh-n-ng-swap-94cd4f1faf0942d1be6383d25e34e521?pvs=4#296a223575154ba9bbe4eb0203cc7358

• Add tooltip for:

  • Slippage: https://www.notion.so/subwallet/App-content-cho-t-nh-n-ng-swap-94cd4f1faf0942d1be6383d25e34e521?pvs=4#fb34ae6fff00445c898b3cbfd0b9c840
  • Min receivable: https://www.notion.so/subwallet/App-content-cho-t-nh-n-ng-swap-94cd4f1faf0942d1be6383d25e34e521?pvs=4#908545a120494761836e2ef905759852

• Update content:

  • Error message: https://www.notion.so/subwallet/App-content-cho-t-nh-n-ng-swap-94cd4f1faf0942d1be6383d25e34e521?pvs=4#d828769b5ec04334b5691f5e16be4dad
  • Warning message about arrival time: https://www.notion.so/subwallet/App-content-cho-t-nh-n-ng-swap-94cd4f1faf0942d1be6383d25e34e521?pvs=4#19677120473a42928a9dc6d10cc5eee0

• Update filter criteria on History screen
  -Expect

  • Add "Swap" criteria to filter swap action
  • Remove "Start earning" criteria
  • Update "Stake action" to "Earning transaction"
  • Update "Claim staking reward" to "Claim reward"

• UI bug about sub-logo on the Confirmation and History screen

  • Actual:

  
  

• Show error popup when click Swap button in case chain disconnect

  • Actual: Stil navigate to the Confirmation screen
  • Expect: Show error message: https://www.notion.so/subwallet/App-content-cho-t-nh-n-ng-swap-94cd4f1faf0942d1be6383d25e34e521?pvs=4#a9427671021048c88a36c612744cf83f

---

Improve later

• Do not reset swap quote
  

[Sokol142196]

Version test: https://b1259d16.subwallet-webapp.pages.dev/
Responsive screen

• Show incorrect account when changing account
  

• Stick Swap button on bottom screen

[nampc1]

• We should show all decimals point of the swap amount
• toAmount input should show the every decimal point value
• quoteRate, minimumReceived should show 8 decimal points

• Missing logo for Chainflip
• Stop fetching quote on click swap
• Resume fetching quote on canceling swap confirmation
• Add expected arrival time
• Add low liquidity warning
• Calculate amount on fee option screen
  

[nampc1]

• Need to review performance due to the quote reset interval causing the screen to re-render a lot

[nampc1]

• The swap quote is delayed and shows no loading animation. It should show skeleton immediately and fill information later
• Estimated fee should show only 2 decimal points (swap quote, confirmation, tx history)
• Complete "Are you there screen"
• Missing chainflip testnet provider logo

[ThaoNguyen998]

• Bug UI when standing on T&C swap screen, Select token

  

  

• Do not show message for Receive account field when switch account
  Steps:

  1. Go to swap screen (All account mode)
  2. Select Swap from account = Substrate account and input valid Recipient account
  3. Switch Swap from account = EVM account and observe the displayed screen

  Actual: Do not show error message

  

  Expect: Show error message

• Handle the case where the token does not have a price id

  • Actual: Show NaN
    

  • Expect:

    • If token does not have a price id then show [Token symbol]
    • Else then show [Number] [Token Symbol]

[nampc1]

• Update low liquidity warning content
• Update T&C content

[ThaoNguyen998]

Version test: https://2c8d0f6a.subwallet-webapp.pages.dev/transaction/swap

• UI bug T&C

• Show incorrect token

  

[Sokol142196]

• Add delay time when reset quote
• Highlight time when time of quote reset <= 10 s
• Update Quote route: USDC --> DOT: @nampc1 handle

[ThaoNguyen998]

• Do not reset quote

  

• Do not reset quote in case change Amount = 0, remove amount

  

• Update content: Please recheck from values -> Invalid input. Re-enter information in the red field and try again

• Follow-up: Reset data before the deadline expires

[ThaoNguyen998]

Version test: https://447d0246.subwallet-webapp.pages.dev/transaction/swap

• Show incorrect quote rate in case swap USDC -> DOT

  

[Sokol142196]

Implemention continues in #2780