UX

Use Flow

Token Management - Wallet

Assets

Sketch UX Assets

FIO Token

...

Visual

...

Functionality

...

Wallet List

...

Display
- All FIO Wallets associated with user account
  - Wallet name
  - Balance
    - FIO
    - USDC
- All FIO Wallet balance which comes from sum of wall wallet values
  - Total
  - If locked > 0, also show:
    - Locked
    - Available
  - If staked > 0, also show:
    - Staked
    - Available
Links
- Add Wallet
  - On click
    - Display Create New Wallet Page
- Import Wallet
  - On click
    - Display Import Wallet Page
- Wallet Details
  - On click
    - Display Wallet Details Page
Tiles
- Display - This Tile will persist on the view
  - Tile
    - Content
      - Header
        Need to Get FIO Tokens?
      - Subhead
        FIO tokens are used to pay fees for certian transaction types such as FIO Domain and Crypto Handle registrations or adding bundles.
        Get FIO Token from one of our partners today.
    - Link
      - Get Now
        On Click
        Display FIO Token Partner Page

...

Create/Edit New Wallet

...

Collect
- Wallet name
  - Pre-populate with: “My FIO Wallet X” where X is a sequential number of FIO Wallets associated to user account (first is “My FIO Wallet”, second is “My FIO Wallet 2”, third is “My FIO Wallet 3” and so on.
Validate
- Wallet name
  - Validation rules
    - Format:
      - Allowed characters: a-z, A-Z, 0-9, space, - dash, _ underscore
      - Min 1
      - Max 32
Links
- Create Wallet
  - On click
    - Create new wallet and redirect to Wallet Details Page
      - If PIN required, collect PIN
    - Store server-side
- X
  - On click
    - Close window and display Wallet List Page

...

Import Wallet

...

Cancel import Confirmation

...

Valid Key but no active account

...

Invalid Key

...

Display
- Links
  - Import Wallet
    - On click
      - Check if corresponding FIO Public Key exists on chain
        If Yes import
        If No Display Error: Valid Key but no active account
      - Import private key and add to account
        If seed phrase entered import only key at index 0 (firs one)
      - Display Wallet List Page with confirmation banner
      - On error
  - Cancel or Back
    - On click
      - Display Cancel Confirmation
        On confirm Display Wallet List Page
        On cancel Display Import Wallet Page
Collect
- Private Key or Mnemonic Seed Phrase
- Wallet name
Validate
- Private key
  - Valid FIO Private key format
- Seed Phrase
  - Valid BIP-39 Seed Phrase
- Wallet name
  - Validation rules
    - Format:
      - Allowed characters: a-z, A-Z, 0-9, space, - dash, _ underscore
      - Min 1
      - Max 32
    - Error
      - Display Invalid Key Page

...

Wallet Transaction List

...

Display

...

Wallet name

...

UX

Use Flow

Token Management - Wallet

Assets

Sketch UX Assets

FIO Token

Visual

Functionality

New FIO Request

Image Removed

Display
- Wallet name
- Transaction cost
  - Bundle cost (this can be hard-coded to 2) and remaining
- Links
  - Back
    - On click
      - Display Wallet Transactions Page
  - Send FIO Request
    - On click
      - Collect PIN
      - Execute /new_funds_request
      - On error
        Display Generic Error
      - On success
        Display FIO Request Confirmation Page
Collect
- Requesting FIO Address
  - If user has 0 FIO Addresses - do not show label and field
  - If user has only 1 FIO Address show label and FIO Address as text
  - If user has more than 1 FIO Address - show available FIO Addresses selector with first (alphabetically FIO Address pre-selected)
- Request from FIO Address
  - On click
    - Display FIO Address/Public Key collector overlay
      - Display list of all FIO Addresses used by this account as destination FIO Address for Send FIO Tokens to, Request FIO Tokens from
- Amount denominated in FIO with as you type conversion to USDC with ability for user to switch to entry in USDC with as you type conversion to FIO
- Token Code
  - Pre-populate with FIO
- Chain Code
  - Pre-populate with FIO
- Memo
Validate
- Requesting FIO Address
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid FIO Address
  - Validation rules
    - Format
      - Registered FIO Address with a valid FIO Public Key mapped to chain: FIO, token: FIO
- Send Amount
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid amount
  - Validation rules
    - Format
      - Numeric
      - Max 9 decimals
- Chain code
  - Min: 1
  - Max: 10
  - Pattern: ^[A-Z0-9]+$
- Token code
  - Min: 1
  - Max: 10
  - Pattern: ^[A-Z0-9]+$
- Memo
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid memo
  - Validation rules
    - Max length has to be computed on the total size of the encrypted data as for /new_funds_request
- Bundled transaction count
  - If <2 display Low balance banner prevent clicking Send FIO Request

FIO Request Confirmation

Image Removed

Display
- Requesting FIO Address
- Request sent to FIO Address
- Amount Requested
- Chain: FIO
- ID: transaction ID
  - See FIO Data transaction linking
- Memo
- Transaction cost
  - Bundle cost (this can be hard-coded to 2) and remaining
- Links
  - Close and X
    - On click
      - Display Wallet Transactions Page

Reject FIO Request

Image Removed

Display
- Date/Time: FIO Request time_stamp in browser time
- Type: Request
- From: FIO Request payee_fio_address
- Amount: FIO Request amount + token_code
  - If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display
- Chain: FIO Request chain_code
- Transaction cost
  - Bundle cost (this can be hard-coded to 1) and remaining
Links
- Back
  - On click
    - Display Transaction Details Page
- Reject
  - On click
    - Collect PIN
    - Execute /reject_funds_request
    - On error
      - Display Generic Error
    - On success
      - Display FIO Request Confirmation Page
Validate
- Bundled transaction count
  - If <1 display Low balance banner prevent clicking Reject

FIO Request Rejected Confirmation

Image Removed

Display

Requesting FIO Address

Request sent to FIO Address

Amount Requested

Chain: FIO

Visual	Functionality
Wallet List Image Added	Display All FIO Wallets associated with user account Wallet name Balance FIO USDC All FIO Wallet balance which comes from sum of wall wallet values Total If locked > 0, also show: Locked Available If staked > 0, also show: Staked Available Obtain using /get_fio_balance (modified in FIP-6 - spec not yet updated) Transactions Show 25 of type on initial load and load next 25 when user scrolls to bottom (lazy scroll) Sent FIO Requests (default view) “Sent” label and icon Date/Time: FIO Request time_stamp in browser time To: FIO Request’s payer_fio_address FIO Request status Obtained using /get_sent_fio_requests (modified in FIP-1) Received FIO Requests (fetch on click) “Received” label and icon Date/Time: FIO Request time_stamp in browser time From: FIO Request’s payee_fio_address FIO Request status Obtained using get_received_fio_requests (added in FIP-19) Sent/Received FIO Data (fetch on click) “Sent” or “Received” label and icon Date/Time: FIO Data time_stamp in browser time Counter-party FIO Address For OBT data sent by user show To label For OBT data received by user show From label Obtained using /get_obt_data Transactions (fetch on click) “Sent” or “Received” label and icon Date/Time: FIO Data time_stamp in browser time Transaction ID Show FIO TX ID Copy On Click - Copy FIO TX ID to pasteboard Open Explorer On Click - Open new browser tab linking to https://fio.bloks.io/transaction/<txid> Display: Transaction amount Links Wallet Name pencil On click Display Create/Edit Wallet Name Page Request arrow On click Display New FIO Request Page Send arrow On click Display Send FIO Token Page Private Key On click Display Show Private Key Page FIO Token Management \| Show Private Key Wrap FIO Tokens On click Display New FIO Wrapping Page Unwrap FIO Tokens On click Display New FIO Unwrapping Page Tiles Display - This Tile will persist on the view Tile Content Header Need to Get FIO Tokens? Subhead FIO tokens are used to pay fees for certian transaction types such as FIO Domain and Crypto Handle registrations or adding bundles. Get FIO Token from one of our partners today. Link Get Now On Click Display FIO Token Partner Page
Transaction Details Sent FIO Request Image RemovedImage Removed Received FIO Request Image RemovedImage RemovedImage Removed FIO Data Image Removed	Collect PIN on display to fetch private key to decrypt the data Display Sent FIO Request FIO Request Information Status: FIO Request status Pending Rejected Paid = sent_to_blockchain Date/Time: FIO Request time_stamp in browser time Type: Request Requestor: FIO Request payee_fio_address To: FIO Request payer_fio_address Amount: FIO Request amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Request chain_code Memo: FIO Request memo If status = Paid show Payment information tab (content from obt_data with matching fio_request_id) Date/Time: FIO Data time_stamp in browser time Type: Payment Payer: FIO Data payer_fio_address To: FIO Data payee_fio_address Amount: FIO Data amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Data chain_code ID: FIO Data obt_id See FIO Data transaction linking Memo: FIO Data memo Received FIO Request FIO Request Information Status: FIO Request status Pending Rejected Paid = sent_to_blockchain Date/Time: FIO Request time_stamp in browser time Type: Request From: FIO Request payee_fio_address Amount: FIO Request amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Request chain_code Memo: FIO Request memo Actions If status = Pending Reject link On click display Reject FIO Request Page If status = Pending and chain_code = FIO and token_code = FIO Pay link On click display Send FIO Token Page and pre-populate Your Sending FIO Address, Send to Address, Send Amount, Memo If status = Pending and chain_code != FIO and token_code != FIO Pay link On click display Enter Payment Details Page If status = Paid show Payment information tab (content from obt_data with matching fio_request_id) Date/Time: FIO Data time_stamp in browser time Type: Payment Payer: FIO Data payer_fio_address To: FIO Data payee_fio_address Amount: FIO Data amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Data chain_code ID: FIO Data obt_id See FIO Data transaction linking Memo: FIO Data memo Sent/Received FIO Data FIO Data Information Status: FIO Data status Sent to Blockchain = sent_to_blockchain Date/Time: FIO Data time_stamp in browser time From: FIO Data payer_fio_address To: FIO Data payee_fio_address Amount: FIO Data amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Data chain_code ID: FIO Data obt_id See FIO Data transaction linking Memo: FIO Data memo
FIO Data transaction linking	When displaying FIO Data, the ID field should be a link: If chain_code = FIO Link to https://fio.bloks.io/transaction/XXX where XXX is obt_id If chain_code = BTC Link to https://blockchair.com/bitcoin/transaction/XXX where XXX is obt_id If chain_code = ETH Link to https://etherscan.io/tx/XXX where XXX is obt_id
Wallet Details Image Removed	Display FIO Public Key FIO Public Key QR code Links Copy On click Copy to clipboard Share - show if native share functionality available On click Trigger native share functionality Private Key On click Display Show Private Key Page X On click Close overlay
Show Private Key Image RemovedImage Removed	Collect Password Password is displayed as ••••••• Validate Log-in Validate on Confirm click On validation error Turn border for Password red Display error message: Invalid Password Validation rules Password match Display Links Confirm On click Display Private Key Cancel or X On click Display Wallet Transaction List Page Copy icon On click Copy to clipboard
Send FIO Token With memo or in response to FIO Request Image Removed Without memo Image Removed Address Selector Image Removed	Display Wallet name Available FIO balance Transaction cost Transaction fee in FIO as obtained from /get_fee for /transfer_tokens_pub_key and in USDC equivalent If memo was entered or if tokens sent in response to FIO Request In addition to transaction cost in FIO, display bundle cost (this can be hard-coded to 2) and remaining Links Back On click Display Wallet Transactions Page Send FIO Tokens On click Collect PIN Execute /transfer_tokens_pub_key On error Display Generic Error If memo entered or if tokens sent in response to FIO Request, when transfer_tokens_pub_key finishes, get the transaction and execute /record_obt_data If transfer_tokens_pub_key succeeded and record_obt_data failed, display FIO Tokens Sent Confirmation Page with banner that memo failed to send. On success Display FIO Tokens Sent Confirmation Page Collect Sending FIO Address If user has 0 FIO Addresses - do not show label and field If user has only 1 FIO Address show label and FIO Address as text If user has more than 1 FIO Address - show available FIO Addresses selector with first (alphabetically FIO Address pre-selected) Send to Address On click Display FIO Address/Public Key collector overlay Display list of all FIO Addresses used by this account as destination FIO Address for Send FIO Tokens to, Request FIO Tokens from Amount denominated in FIO with as you type conversion to USDC with ability for user to switch to entry in USDC with as you type conversion to FIO Memo - show only if user has at least 1 FIO Address registered and the “Send to Address” is FIO Address and not a public key If user enters a memo field display bundle cost Validate Send to Address Validate onfocusout On validation error Display error message: Please enter valid FIO Address or FIO Public Key Validation rules Format Valid FIO Public Key or registered FIO Address with a valid FIO Public Key mapped to chain: FIO, token: FIO Send Amount Validate onfocusout On validation error Display error message: Please enter valid amount Validation rules Format Numeric Max 9 decimals Available amount If wallet balance is less than Send Amount + fee display Low Balance banner and prevent clicking Send FIO Tokens. Memo Validate onfocusout On validation error Display error message: Please enter valid memo Validation rules Max length has to be computed on the total size of the encrypted data as for /record_obt_data. Bundled transaction count If <5 display Low balance banner prevent clicking Send FIO Tokens Wallet balance If balance is less than fee display Low Balance and prevent clicking Send FIO Tokens
FIO Tokens Sent Confirmation With memo or in response to FIO Request Image Removed Without memo Image Removed Send succeeded, but memo failed Image Removed	Display Sending FIO Address Send to Address (or public key) Send Amount Memo - if entered Chain code ID: transaction ID See FIO Data transaction linking Transaction cost Memo not entered Transaction fee in FIO as obtained from fee_collected in response and USDC equivalent Memo entered Bundle cost (this can be hard-coded to 5) and remaining Links Close and X On click Display Wallet Transactions Page

FIO Request

Links Add Wallet On click Display Create New Wallet Page Import Wallet On click Display Import Wallet Page Wallet Details On click Display Wallet Details Page Tiles Display - This Tile will persist on the view (notice: copy different from image, use copy below) Tile Content Header Need FIO Tokens? Subhead FIO Tokens are used to pay fees for certain transaction types such as FIO Domain and Crypto Handle registrations or adding bundles. Get FIO Token from one of our partners today. Link Get Now On Click Display Get FIO Tokens Page
Create/Edit New Wallet Image AddedImage Added	Collect Wallet name Pre-populate with: “My FIO Wallet X” where X is a sequential number of FIO Wallets associated to user account (first is “My FIO Wallet”, second is “My FIO Wallet 2”, third is “My FIO Wallet 3” and so on. Validate Wallet name Validation rules Format: Allowed characters: a-z, A-Z, 0-9, space, - dash, _ underscore Min 1 Max 32 Links Create Wallet On click Create new wallet and redirect to Wallet Details Page If PIN required, collect PIN Store server-side X On click Close window and display Wallet List Page
Import Wallet Image AddedImage Added Cancel import Confirmation Image Added Valid Key but no active account Image Added Invalid Key Image Added	Display Links Import Wallet On click Check if corresponding FIO Public Key exists on chain If Yes import If No Display Error: Valid Key but no active account Import private key and add to account If seed phrase entered import only key at index 0 (firs one) Display Wallet List Page with confirmation banner On error Cancel or Back On click Display Cancel Confirmation On confirm Display Wallet List Page On cancel Display Import Wallet Page Collect Private Key or Mnemonic Seed Phrase Wallet name Validate Private key Valid FIO Private key format Seed Phrase Valid BIP-39 Seed Phrase Wallet name Validation rules Format: Allowed characters: a-z, A-Z, 0-9, space, - dash, _ underscore Min 1 Max 32 Error Display Invalid Key Page
Wallet Transaction List Image AddedImage AddedImage AddedImage Added	Display Wallet name Balance in FIO and USDC at the time of display Total If locked > 0, also show: Locked Available If staked > 0, also show: Staked Available Obtain using /get_fio_balance (modified in FIP-6 - spec not yet updated) Transactions Show 25 of type on initial load and load next 25 when user scrolls to bottom (lazy scroll) Sent FIO Requests (fetch on click) “Sent” label and icon Date/Time: FIO Request time_stamp in browser time To: FIO Request’s payer_fio_address FIO Request status Obtained using /get_sent_fio_requests (modified in FIP-1) Received FIO Requests (fetch on click) “Received” label and icon Date/Time: FIO Request time_stamp in browser time From: FIO Request’s payee_fio_address FIO Request status Obtained using get_received_fio_requests (added in FIP-19) Sent/Received FIO Data (fetch on click) “Sent” or “Received” label and icon Date/Time: FIO Data time_stamp in browser time Counter-party FIO Address For OBT data sent by user show To label For OBT data received by user show From label Obtained using /get_obt_data Transactions (default view) “Sent” or “Received” label and icon Date/Time: FIO Data time_stamp in browser time Transaction ID Show FIO TX ID Copy On Click - Copy FIO TX ID to pasteboard Open Explorer On Click - Open new browser tab linking to https://fio.bloks.io/transaction/<txid> Display: Transaction amount Links Wallet Name pencil On click Display Create/Edit Wallet Name Page Request arrow On click Display Receive FIO Page Send arrow On click Display Send FIO Token Page Private Key On click Display FIO Token Management \| Show Private Key Page Wrap FIO Tokens On click Display New FIO Wrapping Page Unwrap FIO Tokens On click Display New FIO Unwrapping Page Tiles Display - This Tile will persist on the view (notice: copy different from image, use copy below) Tile Content Header Need to Get FIO Tokens? Subhead FIO tokens are used to pay fees for certain transaction types such as FIO Domain and Crypto Handle registrations or adding bundles. Get FIO Token from one of our partners today. Link Get Now On Click Display FIO Token Partner Page
Wallet Transaction List - 0 balance and no transactions Image Added	Display Same as Wallet Transaction list above (except Need FIO token tile) Display instead of Transaction tab (notice: copy different from image, use copy below) Intro Section Header We see that you do not have any FIO tokens in your wallet. Subhead You can get FIO Tokens by sending them to a public address or FIO Crypto Handle from another wallet, sending a FIO Request for tokens to another FIO-enabled wallet, or getting them from one of your partners. Send Section Header Send FIO Tokens Sub-head Send FIO Tokens to your wallet by QR code capture or copying your public address / FIO Crypto Handle to an external wallet. Wallet Details Sub-Section QR Code Public Address Display wallet’s FIO public address Action On click - Copy public address to pasteboard Associated FIO Crypto Handles Display all FCH owned by Wallet Action On click - Copy FIO Crypto Handle to pasteboard Send FIO Request Section Header Send FIO Request Subhead Send a FIO Request for FIO Tokens to another FIO-enabled wallet. Action: FIO Request On click - Display FIO Token Management \| FIO Request page Get FIO Section Header Need FIO Tokens? Subhead FIO tokens are used to pay fees for certain transaction types such as FIO Domain and Crypto Handle registrations or adding bundles. Get FIO Token from one of our partners today. Action: Get FIO Tokens On click - Display Get FIO Tokens Page
Receive FIO Image Added	Content same as Wallet Transaction List - 0 balance and no transactions except: Intro Section Head Receive FIO Tokens
Transaction Details Sent FIO Request Image AddedImage Added Received FIO Request Image AddedImage AddedImage Added FIO Data Image Added	Collect PIN on display to fetch private key to decrypt the data Display Sent FIO Request FIO Request Information Status: FIO Request status Pending Rejected Paid = sent_to_blockchain Date/Time: FIO Request time_stamp in browser time Type: Request Requestor: FIO Request payee_fio_address To: FIO Request payer_fio_address Amount: FIO Request amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Request chain_code Memo: FIO Request memo If status = Paid show Payment information tab (content from obt_data with matching fio_request_id) Date/Time: FIO Data time_stamp in browser time Type: Payment Payer: FIO Data payer_fio_address To: FIO Data payee_fio_address Amount: FIO Data amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Data chain_code ID: FIO Data obt_id See FIO Data transaction linking Memo: FIO Data memo Received FIO Request FIO Request Information Status: FIO Request status Pending Rejected Paid = sent_to_blockchain Date/Time: FIO Request time_stamp in browser time Type: Request From: FIO Request payee_fio_address Amount: FIO Request amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Request chain_code Memo: FIO Request memo Actions If status = Pending Reject link On click display Reject FIO Request Page If status = Pending and chain_code = FIO and token_code = FIO Pay link On click display Send FIO Token Page and pre-populate Your Sending FIO Address, Send to Address, Send Amount, Memo If status = Pending and chain_code != FIO and token_code != FIO Pay link On click display Enter Payment Details Page If status = Paid show Payment information tab (content from obt_data with matching fio_request_id) Date/Time: FIO Data time_stamp in browser time Type: Payment Payer: FIO Data payer_fio_address To: FIO Data payee_fio_address Amount: FIO Data amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Data chain_code ID: FIO Data obt_id See FIO Data transaction linking Memo: FIO Data memo Sent/Received FIO Data FIO Data Information Status: FIO Data status Sent to Blockchain = sent_to_blockchain Date/Time: FIO Data time_stamp in browser time From: FIO Data payer_fio_address To: FIO Data payee_fio_address Amount: FIO Data amount + token_code If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display Chain: FIO Data chain_code ID: FIO Data obt_id See FIO Data transaction linking Memo: FIO Data memo
FIO Data transaction linking	When displaying FIO Data, the ID field should be a link: If chain_code = FIO Link to https://fio.bloks.io/transaction/XXX where XXX is obt_id If chain_code = BTC Link to https://blockchair.com/bitcoin/transaction/XXX where XXX is obt_id If chain_code = ETH Link to https://etherscan.io/tx/XXX where XXX is obt_id
Show Private Key Image AddedImage Added	Collect Password Password is displayed as ••••••• Validate Log-in Validate on Confirm click On validation error Turn border for Password red Display error message: Invalid Password Validation rules Password match Display Links Confirm On click Display Private Key Cancel or X On click Display Wallet Transaction List Page Copy icon On click Copy to clipboard
Send FIO Token With memo or in response to FIO Request Image Added Without memo Image Added Address Selector Image Added	Display Wallet name Available FIO balance Transaction cost Transaction fee in FIO as obtained from /get_fee for /transfer_tokens_pub_key and in USDC equivalent If memo was entered or if tokens sent in response to FIO Request In addition to transaction cost in FIO, display bundle cost (this can be hard-coded to 2) and remaining Links Back On click Display Wallet Transactions Page Send FIO Tokens On click Collect PIN Execute /transfer_tokens_pub_key On error Display Generic Error If memo entered or if tokens sent in response to FIO Request, when transfer_tokens_pub_key finishes, get the transaction and execute /record_obt_data If transfer_tokens_pub_key succeeded and record_obt_data failed, display FIO Tokens Sent Confirmation Page with banner that memo failed to send. On success Display FIO Tokens Sent Confirmation Page Collect Sending FIO Address If user has 0 FIO Addresses - do not show label and field If user has only 1 FIO Address show label and FIO Address as text If user has more than 1 FIO Address - show available FIO Addresses selector with first (alphabetically FIO Address pre-selected) Send to Address On click Display FIO Address/Public Key collector overlay Display list of all FIO Addresses used by this account as destination FIO Address for Send FIO Tokens to, Request FIO Tokens from Amount denominated in FIO with as you type conversion to USDC with ability for user to switch to entry in USDC with as you type conversion to FIO Memo - show only if user has at least 1 FIO Address registered and the “Send to Address” is FIO Address and not a public key If user enters a memo field display bundle cost Validate Send to Address Validate onfocusout On validation error Display error message: Please enter valid FIO Address or FIO Public Key Validation rules Format Valid FIO Public Key or registered FIO Address with a valid FIO Public Key mapped to chain: FIO, token: FIO Send Amount Validate onfocusout On validation error Display error message: Please enter valid amount Validation rules Format Numeric Max 9 decimals Available amount If wallet balance is less than Send Amount + fee display Low Balance banner and prevent clicking Send FIO Tokens. Memo Validate onfocusout On validation error Display error message: Please enter valid memo Validation rules Max length has to be computed on the total size of the encrypted data as for /record_obt_data. Bundled transaction count If <5 display Low balance banner prevent clicking Send FIO Tokens Wallet balance If balance is less than fee display Low Balance and prevent clicking Send FIO Tokens
FIO Tokens Sent Confirmation With memo or in response to FIO Request Image Added Without memo Image Added Send succeeded, but memo failed Image Added	Display Sending FIO Address Send to Address (or public key) Send Amount Memo - if entered Chain code ID: transaction ID See FIO Data transaction linking Transaction cost Memo not entered Transaction fee in FIO as obtained from fee_collected in response and USDC equivalent Memo entered Bundle cost (this can be hard-coded to

2

- - - 5) and remaining
- Links
  - Close and X
    - On click
      - Display Wallet Transactions Page

FIO

...

Request

Visual	Functionality

Enter Payment Details

Image Removed

New FIO Request

Image Added

Display

Type: Request

To FIO Address from payee_fio_address in FIO Request

Public address from FIO Request

- Wallet name
- Transaction cost
  - Bundle cost (this can be hard-coded to 2) and remaining
- Links
  - Back
    - On click
      - Display Wallet Transactions

Details

- - - - Page
  - Send

Payment Details

- - FIO Request
    - On click
      - Collect PIN
      - Execute /

record

- - - - new_

obt

- - - - funds_

data

- - - - request
      - On error
        Display Generic Error
      - On success
        Display

Payment Details

- - - - FIO Request Confirmation Page

Copy public address

On click
- Copy to clipboard

QR code

On click
- Display QR code

Collect

Amount
- Pre-populate from amount in FIO Request
Token code
- Pre-populate from token_code in FIO Request
Chain code
- Pre-populate from chain_code in FIO Request
Memo
- Pre-populate from memo in FIO Request
Transaction ID

Validate

Collect
- Requesting FIO Address
  - If user has 0 FIO Addresses - do not show label and field
  - If user has only 1 FIO Address show label and FIO Address as text
  - If user has more than 1 FIO Address - show available FIO Addresses selector with first (alphabetically FIO Address pre-selected)
- Request from FIO Address
  - On click
    - Display FIO Address/Public Key collector overlay
      - Display list of all FIO Addresses used by this account as destination FIO Address for Send FIO Tokens to, Request FIO Tokens from
- Amount denominated in FIO with as you type conversion to USDC with ability for user to switch to entry in USDC with as you type conversion to FIO
- Token Code
  - Pre-populate with FIO
- Chain Code
  - Pre-populate with FIO
- Memo
Validate
- Requesting FIO Address
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid FIO Address
  - Validation rules
    - Format
      - Registered FIO Address with a valid FIO Public Key mapped to chain: FIO, token: FIO
- Send Amount
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid amount
  - Validation rules
    - Format
      - Numeric
      - Max 9 decimals
- Chain code
  - Min: 1
  - Max: 10
  - Pattern: ^[A-Z0-9]+$
- Token code
  - Min: 1
  - Max: 10
  - Pattern: ^[A-Z0-9]+$
- Memo
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid memo
  - Validation rules
    - Max length has to be computed on the total size of the encrypted data as for /

record_obt_data

Transaction ID

Validate onfocusout
- On validation error
  - Display error message:
    - Please enter valid transaction ID
Validation rules
- Allowed chcracters a-z, A-Z, 0-9
- Max length has to be computed on the total size of the encrypted data as for /record_obt_data

Bundled transaction count

If <1 display Low balance banner prevent clicking Send Payment Details

Payment Details Confirmation

Image Removed

Display

To FIO Address

Amount

Token code

Chain code

ID: transaction ID

See FIO Data transaction linking

Memo

- - - new_funds_request
- Bundled transaction count
  - If <2 display Low balance banner prevent clicking Send FIO Request

FIO Request Confirmation

Image Added

Display
- Requesting FIO Address
- Request sent to FIO Address
- Amount Requested
- Chain: FIO
- ID: transaction ID
  - See FIO Data transaction linking
- Memo
- Transaction cost
  - Bundle cost (this can be hard-coded to 2) and remaining
- Links
  - Close and X
    - On click
      - Display Wallet Transactions Page

Reject FIO Request

Image Added

Display
- Date/Time: FIO Request time_stamp in browser time
- Type: Request
- From: FIO Request payee_fio_address
- Amount: FIO Request amount + token_code
  - If chain_code = FIO and token_code = FIO display USDC equivalent based on rate of exchange at time of display
- Chain: FIO Request chain_code
- Transaction cost
  - Bundle cost (this can be hard-coded to

2

- - 1) and remaining
Links

Close and X

- Back
  - On click
    - Display

Wallet Transactions

View

Requirements

Wallet View - 1st Time - No Tokens

Image Removed

Send or Get FIO - First Time Experience

Component
- Content
  - Header
    - We see that you do not have any FIO tokens in your wallet.
  - Subhead
    - Send FIO tokens to your wallet or get FIO tokens from one of our partners.
- Send Section
  - Content
    - Header
      - Send FIO tokens
    - Sub-head
      - Send FIO tokens to your wallet by QR code capture or copying your public address / FIO Crypto Handle to an external wallet.
  - Wallet Details Sub-Section
    - QR Code
    - Public Address
      - Action
        On click - Copy public address to pasteboard
    - Public Crypto Handle Tile
      - Content
        Public Crypto Handles
      - Action
        On click - Copy FIO Crypto Handle to pasteboard
- Send FIO Request Sub-section
  - Content
    - Header
      - Send FIO Request
    - Subhead
      - Initiate a FIO request for FIO tokens from the the FIO dashboard
  - Action
    - On click - Display FIO Request Use Flow
      - FIO Token Management | FIO Request
- Get FIO Section
  - Content
    - Header
      - Need FIO Tokens?
    - Subhead
      - FIO tokens are used to pay fees for certian transaction types such as FIO Domain and Crypto Handle registrations or adding bundles.
        Get FIO Token from one of our partners today.
    - CTA - Get FIO Tokens
    - Action
      - On click - Display partner view

Receive FIO

Image Removed

Receive Details

Send or Get FIO
- Component
  - Header
    - Title
      - Receive FIO Tokens
    - Sub-title
      - Receive FIO tokens by sending to your wallet, creating a request of getting from one of our partners.
  - Send Section
    - Content
      - Header
        Receive FIO Tokens
      - Sub-head
        You can get FIO Tokens by sending them to a public address or FIO Crypto Handle from another wallet, sending a FIO Request for tokens to another FIO-enabled wallet, or getting them from one of your partners.
    - Wallet Details Sub-Section
      - QR Code
      - Public Address
        Action
        On click - Copy public address to pasteboard
      - Public Crypto Handle Tile
        Content
        Public Crypto Handles
        Action
        On click - Copy FIO Crypto Handle to pasteboard
  - Send FIO Request Sub-section
    - Content
      - Header
        Send FIO Requests
      - Subhead
        Send a FIO Request for FIO Tokens to another FIO-enabled wallet.
    - Action
      - On click - Display FIO Request Use Flow
        FIO Token Management | FIO Request
  - Get FIO Section
    - Content
      - Header
        Need FIO Tokens?
      - Subhead
        FIO tokens are used to pay fees for certian transaction types such as FIO Domain and Crypto Handle registrations or adding bundles.
        Get FIO Token from one of our partners today.
      - CTA - Get FIO Tokens
      - Action
        On click - Display partner view

Partner View

Image Removed

Get FIO Tokens

Component Title

Where to Get FIO Tokens

Component

Content
- Easily get FIO tokens with a Credit/Debit Card or Crypto with ChangeNOW.
Display
- ChangeNow CTA
  - On Click - Open new tab - https://changenow.io/exchange?to=fio

Component

Content
- You can also get FIO through on of our many partners below as well.

Component - Messaging Ribbon

Content

Registration - Some FIO partners may require registration, others may not.

- - - Transaction Details Page

Get FIO Tokens

Reject On click Collect PIN Execute /reject_funds_request On error Display Generic Error On success Display FIO Request Confirmation Page Validate Bundled transaction count If <1 display Low balance banner prevent clicking Reject
FIO Request Rejected Confirmation Image Added	Display Requesting FIO Address Request sent to FIO Address Amount Requested Chain: FIO ID: transaction ID See FIO Data transaction linking Transaction cost Bundle cost (this can be hard-coded to 2) and remaining Links Close and X On click Display Wallet Transactions Page

FIO Data

Visual

Functionality

Enter Payment Details

Image Added

Display
- Type: Request
- To FIO Address from payee_fio_address in FIO Request
- Public address from FIO Request
- Transaction cost
  - Bundle cost (this can be hard-coded to 2) and remaining
- Links
  - Back
    - On click
      - Display Transactions Details Page
  - Send Payment Details
    - On click
      - Collect PIN
      - Execute /record_obt_data
      - On error
        Display Generic Error
      - On success
        Display Payment Details Confirmation Page
  - Copy public address
    - On click
      - Copy to clipboard
  - QR code
    - On click
      - Display QR code
Collect
- Amount
  - Pre-populate from amount in FIO Request
- Token code
  - Pre-populate from token_code in FIO Request
- Chain code
  - Pre-populate from chain_code in FIO Request
- Memo
  - Pre-populate from memo in FIO Request
- Transaction ID
Validate
- Send Amount
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid amount
  - Validation rules
    - Format
      - Numeric
      - Max 9 decimals
- Memo
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid memo
  - Validation rules
    - Max length has to be computed on the total size of the encrypted data as for /record_obt_data
- Transaction ID
  - Validate onfocusout
    - On validation error
      - Display error message:
        Please enter valid transaction ID
  - Validation rules
    - Allowed chcracters a-z, A-Z, 0-9
    - Max length has to be computed on the total size of the encrypted data as for /record_obt_data
- Bundled transaction count
  - If <1 display Low balance banner prevent clicking Send Payment Details

Payment Details Confirmation

Image Added

Display
- To FIO Address
- Amount
- Token code
- Chain code
- ID: transaction ID
  - See FIO Data transaction linking
- Memo
- Transaction cost
  - Bundle cost (this can be hard-coded to 2) and remaining
- Links
  - Close and X
    - On click
      - Display Wallet Transactions Page

Get FIO Tokens

View

Requirements

Get FIO Tokens

Image Added

Partner logos are all downloadable assets from the sketch file: https://sketch.com/s/c4efea7f-4b52-4928-ae53-f4e9393e735a
Partner Section - Credit Card / Fiat
- Partner CTA
  - Indacoin
  - Action
    - On Click - Open new tab to partner: https://indacoin.io/
- Partner CTA
  - Monero
  - Action
    - On Click - Open new tab to partner: https://monero.com/
Partner Section - Exchanges and Token Swapping
Partner CTA
Binance

Action

Display (notice: copy different from image, use copy below)

Intro Section
- Head
  - Where to Get FIO Tokens
- Sub-head
- WhiteBIT
- Action
  - Easily get FIO tokens with a Credit/Debit Card or Crypto with ChangeNOW.
  - ChangeNow CTA
    - On Click - Open new tab
    to partner: https://www.binance.com/en/trade/FIO_USDT?theme=dark&type=spot
Partner CTA
- - - - https://changenow.io?link_id=90905fc19e7f9b&to=fio
- Sub-head
  - You can also get FIO through on of our many partners below.
- Messaging Ribbon
  - Registration - Some FIO partners may require registration.
Credit Card / Bank Section
- Sub-head
  - Credit Card / Bank
- Indacoin
  - On Click - Open new tab to partner: https://whitebitindacoin.comio/
Partner CTA
- Liquid
- ActionMonero
  - On Click - Open new tab to partner: https://wwwmonero.liquid.com/
Partner CTA
Gate.io

Action

Exchanges and Token Swapping Section
- Sub-head
  - Exchanges and Token Swapping
- Binance
  - On Click - Open new tab to partner: https://www.gatebinance.iocom/en/trade/FIO_USDT
Partner CTA
- Changelly
- Action
  - On Click - Open new tab to partner: https://changelly.com/
Partner CTA
- BitMart
- Action
- WhiteBIT
  - On Click - Open new tab to partner: https://wwwwhitebit.bitmart.com/trade/en?symbol=FIO_USDT&layout=basic
Partner CTA
- XT.com
- Action
- Liquid
  - On Click - Open new tab to partner: https://www.xtliquid.com/
Partner CTA
- AscendEX
- Action
  Gate.io
- Edge
- Action
  - On Click - Open new tab to partner: https://ascendexwww.gate.comio/en/global-digital-asset-platform
Partner CTA
- - trade/FIO_USDT
- Changelly
  - On Click - Open new tab to partner: https://dlchangelly.edge.appcom/fio
Partner CTA
- Infinity Wallet
- Action
- BitMart
- Simba
- Action
  - On Click - Open new tab to partner: https://infinitywallet.io/
Partner CTA
- - www.bitmart.com/trade/en?symbol=FIO_USDT&layout=basic
- XT.com
  - On Click - Open new tab to partner: https://www.cryptosimbaxt.com/
Partner CTA
- SimpleSwap
- Action
  AscendEX
  - On Click - Open new tab to partner: https://simpleswap.io/ascendex.com/en/global-digital-asset-platform
- Edge
  - On Click - Open new tab to partner: https://simpleswapdl.edge.ioapp/

Navigation Addition

Image Removed

Navigation Link

Component Title
- Get FIO Tokens
  - On click - Takes the user to the receive FIO Tokens view
Get FIO Section
- Content
  - Header
    - Need FIO Tokens?
  - Subhead
    - FIO tokens are used to pay fees for certian transaction types such as FIO Domain and Crypto Handle registrations or adding bundles.
      Get FIO Token from one of our partners today.
  - CTA - Get FIO Tokens
  - Action
    - On click - Display partner viewfio
  - Infinity Wallet
    - On Click - Open new tab to partner: https://infinitywallet.io/
  - Simba
    - On Click - Open new tab to partner: https://www.cryptosimba.com/
  - SimpleSwap
    - On Click - Open new tab to partner: https://simpleswap.io

Page Comparison

Versions Compared

Old Version 38

New Version 39

Key

Table of Contents

UX

Use Flow

Assets

FIO Token

Wallet List

Create/Edit New Wallet

Import Wallet

Cancel import Confirmation

Valid Key but no active account

Invalid Key

Wallet Transaction List

UX

Use Flow

Assets

FIO Token

New FIO Request

FIO Request Confirmation

Reject FIO Request

FIO Request Rejected Confirmation

Wallet List

Transaction Details

Sent FIO Request

Received FIO Request

FIO Data

FIO Data transaction linking

Wallet Details

Show Private Key

Send FIO Token

With memo or in response to FIO Request

Without memo

Address Selector

FIO Tokens Sent Confirmation

With memo or in response to FIO Request

Without memo

Send succeeded, but memo failed

FIO Request

Create/Edit New Wallet

Import Wallet

Cancel import Confirmation

Valid Key but no active account

Invalid Key

Wallet Transaction List

Wallet Transaction List - 0 balance and no transactions

Receive FIO

Transaction Details

Sent FIO Request

Received FIO Request

FIO Data

FIO Data transaction linking

Show Private Key

Send FIO Token

With memo or in response to FIO Request

Without memo

Address Selector

FIO Tokens Sent Confirmation

With memo or in response to FIO Request

Without memo

Send succeeded, but memo failed

FIO

Request

Enter Payment Details

New FIO Request

Payment Details Confirmation

FIO Request Confirmation

Reject FIO Request

Wallet View - 1st Time - No Tokens

Send or Get FIO - First Time Experience

Receive FIO

Receive Details

Partner View

Get FIO Tokens

FIO Request Rejected Confirmation

FIO Data

Enter Payment Details