UX

https://overflow.io/s/Q6O7B4L2/ Overflow UX Flow

Profile View

Visual	Functionality
Profile Look-up

Image Removed

Image Added

FCH Not Found

Image Removed

Image Added

Collect
- FIO Crypto Handle
Validate
- FIO Crypto Handle
  - Validate on Look It Up click
    - On validation error
      - Display FCH Not Found error
  - Validation rules
    - Format: See validation rules
    - Existence: avail_check
Display
- Links
  - Look It Up
    - On click
      - Validate FCH
      - Display
  - Get your own
    - On click
      - Display https://fioprotocol.atlassian.net/wiki/spaces/DAO/pages/500793345/Shopping+and+Checkout#FIO-Crypto-Handle-Selection
  - Manage your FIO Handle
    - On click
      - Display https://fioprotocol.atlassian.net/wiki/spaces/DAO/pages/83886086/Dash+Functional+Specification#Authenticated
  - Privacy Policy
    - On click
      - Display https://dashboard.fioprotocol.io/privacy-policy
  - Terms of Service
    - On click
      - Display https://dashboard.fioprotocol.io/terms-of-service

Profile - Payments

Image Removed

Image Added

Display
- FIO Crypto Handle
- Payments option
  - Obtained from /get_pub_address
  - Elements
    - Token Logo - corresponds to token_code, show specific for:

TBD

- - - - See https://github.com/fioprotocol/fips/tree/master/data/token_icons/
    - Token name - use https://github.com/fioprotocol/fips/blob/master/data/tokens.md
      - If not available display code as CODE (CODE)
    - Chain name - use https://github.com/fioprotocol/fips/blob/master/data/chains.md
      - Do not show if token_code and chain_code are the same

Links

Look One Up

- - It’s possible that token_code returned is a wildcard (“*”). If so:
    - Display Token Logo as if token_code matched chain_code, e.g. chain_code: ETH, token_code: * should show Ethereum logo
    - Use Chain name for Token name and append “ Tokens”, e.g. chain_code: ETH, token_code: * should show “Ethereum Tokens” as Token name
    - Do not display to token_code
- Links
  - Back to Profile Lookup
    - On click
      - Display Profile Look-up Page
  - Payment option
    - On click
      - Display

Profile -

- - - - Payment Details Page
  - Profile tabs
    - Payments
      - On click display Profile - Payments Page
    - NFT Signatures
      - On click display Profile - NFT Signatures Page
    - Socials
      - On click display Profile - Socials Page

Profile -

Payment Details

Image Removed

Image Added

Display
- Elements as defined on Profile - Payments Page
- Disclaimer

- only show if

- - If token_code and chain_code are not the same and token_code is not *
    - “Chain - You’re sending [Token name] ([Token]) on the [Chain name] chain. Please make sure this is correct.”
      - Example: “Chain - You’re sending USD Coin (USDC) on the Ethereum chain. Please make sure this is correct.”
  - If token_code is *
    - “You can send any [Chain name] token to this address.”
      - Example: “You can send any Ethereum token to this address.”
- FIO Crypto Handle
- Public address as obtained from /get_pub_address
- Public address QR code
- Links
  - X
    - On click
      - Close pop-up
  - Copy
    - On click
      - Copy public address to clipboard

Profile - NFT Signatures

Image Removed

Image Added

Empty State

Image Added

Display
- FIO Crypto Handle
- NFT Signatures option
  - Obtained from /get_nfts_fio_address
  - Elements

Image

- - - See NFT Metadata

TBD

- Links

Look One Up

- - Back to Profile Lookup
    - On click
      - Display Profile Look-up Page
  - NFT

option

- - Image
    - On click
      - Display NFT Signature Details Page
  - Profile tabs
    - Payments
      - On click display Profile - Payments Page
    - NFT Signatures
      - On click display Profile - NFT Signatures Page
    - Socials
      - On click display Profile - Socials Page

NFT Signature Details

Image Added

Image Altered

Image Added

Image not Available

Image Added

Multiple Signatures

Image Added

Display
- FIO Crypto Handle
- Elements
  - See NFT Metadata
    - Show element and header only if element available
- Links
  - X
    - On click
      - Close pop-up
  - View NFT - show if External URL available
    - On click
      - Open External URL in New Tab

Profile - Socials

Image Added

Empty State

Image Added

Display
- FIO Crypto Handle
- Social links - show only when data returned
  - Obtained from /get_pup_addresses and using chain_code: SOCIALS and the following token_codes:
    - DISCORD
      - Url
        https://discordapp.com/users/username
    - DISCORDSER
      - Url
        https://discord.gg/username
    - FACEBOOK
      - Url
        https://facebook.com/username
    - HIVE
      - Url
        https://peakd.com/@username
    - INSTAGRAM
      - Url
        https://instagram.com/username
    - LINKEDIN
      - Url
        https://www.linkedin.com/in/username
    - LINKEDINCO
      - Url
        https://www.linkedin.com/company/username
    - MASTADONE
      - Url
        https://mastodon.social/@username
    - NOSTR
      - Url
        https://iris.to/username
    - REDDIT
      - Url
        https://www.reddit.com/user/username
    - TWITTER
      - Url
        https://twitter.com/username
    - TELEGRAM
      - Url
        https://t.me/username
    - WHATSUP
      - Url
        https://wa.me/username
    - YOUTUBE
      - Url
        https://www.youtube.com/@username
    - FARCASTER
      - Url
        https://warpcast.com/username
- Links
  - Back to Profile Lookup
    - On click
      - Display Profile Look-up Page
  - Social Handle Tile
    - On click
      - Open url in New Tab
  - Profile tabs
    - Payments
      - On click display Profile - Payments Page
    - NFT Signatures
      - On click display Profile - NFT Signatures Page
    - Socials
      - On click display Profile - Socials Page

NFT Metadata

Requirement	Details
Token wildcard	It’s possible that token_id returned is a wildcard (“*”). If so no metadata is returned and “Multiple Signatures” variant is shown.
Fetching NFT Metadata	Get data from both /get_nfts_fio_address Infura NFT API spec
Combine Metadata	From /get_nfts_fio_address NFT Hash Creator URL From Infura NFT API NFT Name NFT Description External URL Conditional NFT Image hostname rewrite If NFT Image hostname is `ipfs.infura.io` change to `fio.infura-ipfs.io` Source priority Use if present in /get_nfts_fio_address and is image Else Use if present in Infura NFT API and is image Else Show “No image” variant
Imaged Altered banner	If image is present and hash is available, hash the image using SHA-256 and compare to hash from FIO API: If same Display “Image Not Altered Since Signed” If not same Display “Image Altered Since Signed” Otherwise do not display any banner

FIO API spec

Requirement	Details
API spec	https://developers.fioprotocol.io/pages/api/fio-api/#post-/get_nfts_fio_address
Request Parameters	`fio_address` - FCH of profile `limit` - 100 `offset` - 0
Response	`url` - NFT Image `hash` - NFT Hash `metadata` → `creator_url` - Creator URL `more` - If more > 0 submit another request with offset set to total number of results returned

Infura NFT API spec

Requirement	Details
Authentication	In order to not expose API key, make calls server side API key/secret to be provided
Endpoint	https://nft.api.infura.io/networks/{chainId}/nfts/{tokenAddress}/tokens/{tokenId}
API spec	https://docs.infura.io/infura/infura-expansion-apis/nft-api/rest-apis/api-reference/metadata
Request Parameters	`chain_code` to `chainId` mapping ETH = 1 MATIC = 137 ARB1 = 42161 BSC = 56 AVAX = 43114 FTM = 250 `tokenAddress` - `contract_address` returned by /get_nfts_fio_address `tokenId` - `token_id` returned by /get_nfts_fio_address
Response	`metadata` -> `name` - NFT Name `metadata` -> `image` - NFT Image `metadata` -> `description`- NFT Description `metadata` -> `external_url` - External URL Or `metadata` -> `nft` -> `name` - NFT Name `image` - NFT Image `description`- NFT Description `external_url` - External URL

Moralis NFT API spec

Requirement	Details
Authentication	In order to not expose API key, make calls server side API key/secret to be provided
Endpoint	https://deep-index.moralis.io/api/v2.2/nft/{address}/{token_id}?{chain}=bsc&format=decimal&normalizeMetadata=true&media_items=false'
API spec	https://docs.moralis.io/web3-data-api/evm/how-to-get-the-metadata-of-an-nft https://docs.moralis.io/web3-data-api/evm/reference/get-contract-nfts
Request Parameters	`chain_code` to `chain` mapping ETH = eth MATIC = polygon ARB1 = arbitrum BSC = bsc AVAX = avalanche FTM = fantom CRO = cronos `address` - `contract_address` returned by /get_nfts_fio_address `token_id` - `token_id` returned by /get_nfts_fio_address
Response	`metadata` -> `name` - NFT Name `metadata` -> `image` - NFT Image `metadata` -> `description`- NFT Description `metadata` -> `external_url` - External URL
Resync API call	https://docs.moralis.io/web3-data-api/evm/reference/resync-metadata

Versions Compared

Old Version 2

New Version Current

Key

Table of Contents

UX

Profile View

Profile Look-up

FCH Not Found

Profile - Payments

Payment Details

Profile - NFT Signatures

Empty State

NFT Signature Details

Image Altered

Image not Available

Multiple Signatures

Profile - Socials

Empty State

NFT Metadata

FIO API spec

Infura NFT API spec

Moralis NFT API spec

Page Comparison

Versions Compared

Old Version 2

New Version Current

Key

Table of Contents

UX

Profile View

Profile Look-up

FCH Not Found

Profile - Payments

Payment Details

Profile - NFT Signatures

Empty State

NFT Signature Details

Image Altered

Image not Available

Multiple Signatures

Profile - Socials

Empty State

NFT Metadata

FIO API spec

Infura NFT API spec

Moralis NFT API spec