Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Table of Contents

UX

https://overflow.io/s/3BP0P6ZM

https://overflow.io/s/TJ9L8PK5

UX Assets

https://www.sketch.com/s/cec9b923-1f4f-4ed7-9df4-fdf098e57a18

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

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

    • 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

    • 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 (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

    • Links

      • Wallet Name pencil

        • On click

          • Display Create/Edit Wallet Name Page

      • Transaction details

        • On click

          • Display Transaction Details Page

      • View Transaction History

      • Request arrow

        • On click

          • Display New FIO Request Page

      • Send arrow

        • On click

          • Display Send FIO Token Page

      • Wallet Details

        • On click

          • Display Wallet Details Page

Transaction Details

Sent FIO Request

Received FIO Request

FIO Data

  • 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

Wallet Details

  • 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

  • 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 RemovedImage Added

Without memo

Image RemovedImage Added

Address Selector

  • 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

    • 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

Without memo

Send succeeded, but memo failed

  • 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

Visual

Functionality

New FIO Request

  • 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

    • Bundled transaction count

      • If <2 display Low balance banner prevent clicking Send FIO Request

FIO Request Confirmation

  • 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

  • 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

  • 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

  • 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

    • Transaction ID

      • Validate onfocusout

        • On validation error

          • Display error message:

            • Please enter valid transaction ID

      • Validation rules

    • Bundled transaction count

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

Payment Details Confirmation

  • 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

...