Page Comparison

UX

...

https://www.figma.com/file/G0oXoslgcfP7OvjSEXxkWT/Token-%26-Domain-Unwrapping-Standalone?type=design&node-id=12-1907&mode=design

https://www.figma.com/file/G0oXoslgcfP7OvjSEXxkWT/Token-%26-Domain-Unwrapping-Standalone?type=design&node-id=21-4225&mode=design

Technical Link

Unwrap Fee Estimation

Types
- Usage (Actual Gas Fee)
  - Static plus percentage to ensure transaction does not default
- Tiers
  - Low, Average, and High
Information Retrieval

General Requirements

View	Requirements

Image Removed

Landing Page

Wallet View

Image Added

Links
- Unwrap Tokens
  - On click
    - Display Unwrap Tokens Page
- Unwrap Domain
  - On click
    - Display Unwrap

FIO View

Image Removed

Wallet Connection

- - - Domain Page
- Get it
  - On click
    - Display FIO Crypto Handle Selection Page

Wallet Connect Page

Image Added

Links
- MetaMask Wallet Connection
  - On click
    - Connect to the users browser based MetaMask Wallet for signin
- Close
  - On Click
    - Closes wallet connection modal

Image Removed

Unwrap FIO Tokens

Image Added

Unwrap FIO Tokens

Collect
- FIO Handle
- Amount of FIO tokens to unwrap
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

- Unwrap
  - On click
    - Trigger MetaMask wallet transaction signing and display Unwrap FIO Tokens Confirmation Page
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

Image Removed

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

Image Removed

Edit Fees

- Wallet Network
  - Validate correct network for action
    - On validation error
      - Display error message:
        Network! - The connected network <NETWORK>, is not valid for unwrapping domains

Unwrap FIO Domain

Image Added

Image AddedImage Added

Collect
- FIO Handle
- FIO Domain for unwrapping
  - Select domain from list returned from connected wallet
Display
- Current wrapped network (Polygon)
- Unwrap network (FIO)
- Links
  - Unwrap wFIO Domain
    - On click
      - Trigger MetaMask wallet transaction signing and display Unwrap FIO Domain Confirmation Page
  - Edit Fees
    - On click
      - Trigger the fee modal with both basic and advanced fee settings based on current network fees
- Transaction cost
  - Fee cost - Fees are determined by the network
Validate
- wFIO Wrapped Domain
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid wFIO domain
  - Validation rules
    - Valid and unexpired FIO Domain
- FIO 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
- Wallet Network
  - Validate correct network for action
    - On validation error
      - Display error message:
        Network! - The connected network <NETWORK>, is not valid for unwrapping domains

Edit Fees

Image Added

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

Image Removed

FIO Tokens Unwrapped

MetaMask Transaction Signing

Display
- Metamask wallet connection and transaction signing experience

FIO Tokens Unwrap Confirmation

Image Added

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 Landing Page

FIO Domain Unwrap Confirmation

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

Image Added

Display
- Wrapping Transaction Information
  - Unwrap Chain - chain_code
  - Public Address - public_address
  - Receiving FIO Crypto Handle - fio_address
  - Domain Wrapped - fio_domain
  - Blockchain Transaction ID - obt_id
- Links
  - Close and X
    - On click
      - Display Landing Page

Versions Compared

Old Version 8

New Version Current

Key

Table of Contents

UX

Technical Link

Unwrap Fee Estimation

General Requirements

Landing Page

Wallet Connect Page

Unwrap FIO Tokens

Unwrap FIO Tokens

Select FIO Crypto Handle

Edit Fees

Unwrap FIO Domain

Edit Fees

MetaMask Transaction Signing

FIO Tokens Unwrap Confirmation

FIO Domain Unwrap Confirmation

Error State - Low FIO Balance