Auto teleport V1

[exezbcz]

• this issue got pretty messy, thus creating new one.
  Teleport integration in action buttons in single click // automatic bridging #4917

• here we go. After some iterations, simplifications, and an almost complete modal transition, here is our auto teleport.

Overview

• Auto Teleport

  • Automates fund transfers between chains where the users have the most assets to a chain where they are making the action.
  • Can be activated or deactivated via a toggle button.

• First-time User Onboarding Modal

  • Activated when Auto Teleport is switched on for the first time.
  • Highlights benefits:
    • Effortless Transfers
    • Time-saving
    • Smooth Experience
  • Informs user to approve an extra transaction each time the feature is needed.
  • then button: "Got it!"

• Disabled State of Auto Teleport

  • When no funds are available on any chain, display "Not Available" label with a tooltip icon.

• Signing Modal

  • Contains steps for approving transactions.
  • Includes 'Checking Funds' step to confirm successful transfer of required funds before proceeding.

• Signing Modal

  • there is also a tooltip for the auto teleport in the transaction summary - which shows users the path we chose for them, introduction, option to learn more.

---

Design

• updated in figma handoff: https://www.figma.com/file/JXNtryaNYhY0XJNArzvPQx/Handoff?type=design&node-id=4354%3A15507&mode=design&t=b1QX6PAfX3d9IHP1-1
  

Auto teleport row

• Tooltip: Displayed for users to explain the functionality and working of Auto Teleport when hovered or clicked. Correspondingly changes based on user fund availability across chains.

• Auto Teleport Modal States:

  • labeled in the designs
  • Sufficient Funds: The Auto Teleport feature is not displayed when all funds are sufficient for a transaction.
  • Insufficient Source Chain Funds: When funds on source chain are insufficient but available on other chains, the feature row is displayed allowing teleport and purchase confirmation with Auto Teleport turned on. If turned off, it provides low-fund warning.
  • No Funds: When no enough funds are available at all, the row is disabled and shows "Not Available" text.

Tooltip

• Tooltip when no funds are available: Explains the Auto Teleport feature and tells users why it's currently unable to function due to no available funds.
  

• Tooltip when funds are available on other chains: Details how Auto Teleport can transfer assets from the user's most asset-rich chain to enable the transaction.
  

Onboarding Modal (First-time user)

• Displayed for first-time activation of Auto Teleport. (from off -> on)
• displayed over the current modal, it does not replace, its on top of it. You can close it both ways, got it button or x-mark
  

Signing

• similar to Migration UI #7552

• Header: The modal has a clear heading, "Sign Transactions"

• Loader wheel: A loader or progress indicator is displayed next to each transaction section (Teleporting/Bridging, Checking Funds, and Buying NFT). This loader becomes active when the respective transaction is ongoing, providing visuals about the current process status.

• Transaction sections:. These include:

  1. Teleporting/Bridging
  2. Checking Funds
  3. Buying NFT

• Transaction state labels: Each transaction have labels showing transaction states: 'please sign' (for initial user approval), 'transaction pending', and 'completed' (once all operations within that step are successfully executed) It has also link to a transaction which when clicked will open new window on transaction explorer

states for the single row:

End

• one thing missing is the confirmation screen - when everything is okay. I will make this later.
• again, if you have any questions, let me know! Thank you

[hassnian]

is this intern ? I'd like to take this one

[exezbcz]

is this intern ? I'd like to take this one

Go for it sir, looking forward 👀

[hassnian]

👋

[kodabot]

ASSIGNED - @hassnian 🔒 LOCKED -> Tuesday, October 17th 2023, 21:39:47 UTC -> 36 hours

[JustLuuuu]

@exezbcz: here is a nice example of autoteleport (bridge) - check this free mint) - https://zora.co/collect/zora:0x8358ba4df22d1d07c1eab243ea40cc8b92f8181b/1 its all in one step

[exezbcz]

@exezbcz: here is a nice example of autoteleport (bridge) - check this free mint) - https://zora.co/collect/zora:0x8358ba4df22d1d07c1eab243ea40cc8b92f8181b/1 its all in one step

Yup, will check. We have it in one step as well 😃 apart from the signing. On eth could be imo less txs