Token Unwrapping

Table of Contents

UX

Unwrap Fee Estimation

General Requirements

View

Requirements

View

Requirements

 

Wallet View

  • Links

    • Unwrap

      • On click

        • Display Unwrap FIO View

 

Wallet Connection

  • Links

    • MetaMask Wallet Connection

      • On click

        • Connect to the users browser based MetaMask Wallet for signin

    • Close

      • On Click

        • Closes wallet connection modal

 

Unwrap FIO Tokens

  • Display

    • Wallet Name

    • Current wrapped network (Ethereum)

    • Unwrap network (FIO)

    • Links

      • Select FIO Crypto Handle

        • On click

          • Display FIO Crypto Handle Modal with associated handles

      • Unwrap wFIO Tokens

        • On click

          • Trigger MetaMask wallet transaction signing

      • Edit Fees

        • On click

          • Trigger the fee modal with both basic and advanced fee settings based on current network fees

      • Max

        • On click

          • Prepopulates maximum available FIO

    • Transaction cost

      • Fee cost - Fees are determined by the network

  • Collect

    • Amount of FIO tokens to unwrap

  • Validate

    • wFIO Wrapped Amount

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Please enter valid wFIO amount

      • Validation rules

        • Valid amount of SUFs to unwrap

    • FIO Crypto Handle

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Please enter valid FIO Crypto Handle

      • Validation rules

        • Valid FIO Address where domain should be delivered

Select FIO Crypto Handle

  • Choose FIO Crypto Handle

    • Display available FIO crypto handles

    • Links

      • Cancel

        • On Click

          • Cancels the view

      • FIO crypto handle selection

        • On Click

          • Returns the user to the main unwrap view with the selected FIO crypto handle populated

      • Done

        • On Click

          • If the user manually enters a FIO crypto handle, they must click the done CTA to return to the main unwrap view and populate the FIO crypto handle view.

      • Clear

        • On Click

          • Clears the manual FIO crypto handle entry

    • Collect

      • FIO Crypto Handle

        • Via Clipboard Paste

        • Via Manual Entry

 

Edit Fees

  • Overall

    • Links

      • Close

        • On Click

          • Returns the user to the main unwrap view

      • Cancel

        • On Click

          • Cancels the view

      • Advance

        • On Click

          • Displays the advanced fee view to the user

      • Basic

        • On Click

          • Displays the basic fee view to the user

  • Basic

    • Display available tiers of network fees

      • Use 60,000 gas limit and gas price from Etherscan API

    • Links

      • Tier Selection

        • On Click

          • Selects the fee tier the user wishes to use

  • Advanced

    • Collect

      • Gas Limit and Gas Price

        • Defaults

          • Use 60,000 gas limit and gas price from Etherscan API for high

        • On Entry

          • Allows the user to set fee amount for both gas limit and gas price

          • Return the potential transaction time

        • Validation rules

          • If the user enters in an amount lower than the low threshold, an error state is triggered and the user notified that the transaction could fee with fees being unrecoverable

 

MetaMask Transaction Signing

  • Display

    • Metamask wallet connection and transaction signing experience

 

FIO Tokens Unwrapped

  • Display

    • Unwrapping Transaction Information

      • Unwrap Chain - chain_code

      • Public Address - public_address

      • Receiving FIO Crypto Handle - fio_address

      • Tokens Unwrapped - amount

      • Blockchain Transaction ID - obt_id

    • Links

      • Close and X

        • On click

          • Display Wallet View

 

Error State - Low FIO Balance

In the scenario where the user has an associated address and a balance which is to low display the following:

  • Additional Display

    • Display low FIO balance banner