Token Wrapping

Table of Contents

UX

Technical Link

Video Demo Link

General Requirements

View

Requirements

View

Requirements

Wallet View

  • Links

    • Wrap

      • On click

        • Display Wrap FIO View

Wrap FIO Tokens

  • Display

    • Wallet name

    • Wrapping Network

    • Links

      • Paste Public Address

        • On click

          • Paste the Public Address from Users Clipboard

      • Connect Wallet

        • On click

          • Display Wallet Modal with the option to connect to the users wallet

      • Max FIO Wrap Amount

        • On click

          • Display maximum amount of FIO to be wrapped

      • Wrap FIO Tokens

        • On click

          • Collect PIN

          • Execute /wrap_fio_tokens

          • On processing

            • Display Transaction Processing View

          • On success

            • Display FIO Request Confirmation Page

    • Transaction cost

  • Collect

    • FIO Public Address for Wrapping

      • Via Clipboard Paste

      • Via Wallet Connection

    • FIO Wrap Amount

      • Amount denominated in FIO

  • Validate

    • Wrap Amount

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Please enter valid amount

      • Validation rules

        • Format

          • Numeric

          • Max 9 decimals

    • Fee transaction count

Wallet Connection

  • Links

    • MetaMask Wallet Connection

      • On click

        • Connect to the users browser based MetaMask Wallet

    • Close

      • On Click

        • Closes wallet connection modal

Public Address Displayed

  • Wallet Connected

    • Display Connected MetaMask Wallet

    • Links

      • Cancel

        • On Click

          • Cancels the wallet connection

  • Pasted Public Address

    • Display Public Address from Clipboard

    • Links

      • Cancel

        • On Click

          • Clears the pasted public address

Confirm Wrapping

  • Collect

    • PIN code

  • Display Transaction Processing Page

  • Wrap using /wrap_fio_tokens

  • Display Wrapping Confirmation Page

FIO Tokens Wrapped - With Fees

  • Display

    • Wrapping Transaction Information

      • Wrap Chain - chain_code

      • Public Address - public_address

      • FIO Wrapped - amount

      • Fee cost and corresponding USDC

        • max_oracle_fee - oracle_fee_collected

        • max_fee - fee_collected

      • FIO ID - tpid

    • Links

      • Close and X

        • On click

          • Display Wallet Detail 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