WPOKT UX/UI Design Scoping Document

UPDATES for 1.1

  1. Remove the input/display for a custom destination address.
  2. Add an extra modal for wrapping POKT with a button for the wPOKT mint
  3. Change out all mentions of Copper/Copper iconography
  4. Add explanation on the 'Wrap' side of the bridge widget that there will be a second transaction users need to sign. I will include the gas cost for the mint in the estimated gas costs here, so users aren't surprised by paying gas midway through the bridge.

Overview

This document details the user experience and visual design needs to build Wrapped Pocket, or wPOKT. This proposal is to create a minimum viable version of wPOKT, and so will not contain every feature that may be eventually added to the product. If you do not see something in this document, assume it will not be designed as a part of this initial project.

At this point, the project consists of the ERC-20 token wPOKT, and the bridging tool which allows it to be swapped for POKT.

Elements

  • Bridge
  • Visual Design

Bridge

An end-user oriented web page which will allow cross-chain swapping between POKT and wPOKT. This page is expected to be hosted on what is currently https://wrapped.pokt.network/

  • Pocket Network (Home)
  • Connect ETH Wallet (Metamask: any others?)
    • Disconnect
  • Connect SendWallet
    Sendwallet is currently the only wallet on the POKT network which supports transactions pre-filled with data sent directly to the wallet, which is required to avoid a lot of possible user input error when bridging.
    • Disconnect

Bridge Widget

  • Heading: “Wrapped Pocket Bridge”
    • Directional control (Swap POKT->wPOKT, or wPOKT->POKT)
  • Explainer text: Explaining what the bridge does, and what the user has to pay for the service.
  • Form field: Amount of tokens to bridge (Fractions up to 18 digits are supported, but not required)
    • Caption: Amount of tokens available to send from wallet (N/A unless a wallet is connected)
  • Display: Destination wallet
    • If disconnected, a “Connect Wallet” button will appear here instead
    • Button 'Edit': Brings up the edit modal, allows the user to overwrite the destination address.
    • Modal 'Edit': If the user presses the edit button, this modal displays. It contains:
      • Form Field 'Custom Destination Address' which can accept a valid wallet address on ETH or Pocket (depending on the direction of the bridge)
      • Explainer Text: If you want to bridge your Pocket or wPocket to a specific wallet not connected to this bridge, you can input it here. Triple check your address is correct, because tokens sent to the wrong address cannot be recovered!
      • Button 'Confirm'
      • Button 'Cancel'
  • Display: Estimated gas cost (Unwrapping only)
  • Display: POKT Network transaction cost (Wrapping only, fixed at 0.01 POKT)
  • Display: Estimated tokens received (minus gas or 0.01 POKT cost)
  • Display: Estimated time for bridge transaction to take
  • Button: ‘Wrap’ or 'Unwrap'
  • Progress indicator: Once a bridging transaction has been signed, this element will inform the user of the status of the transaction.
    • In progress: This element will present three different states:
      • 1.Sending tokens from the user's wallet to Copper
        1. Copper performing verification
        1. Copper sending tokens to the destination address
          How much granularity we display during each of these stages depends on the data available on each network, and how fast the transaction usually takes. (Does the Pocket network have block confirmations?) Transaction times of a few seconds should only have high-level states. Transaction times of a few minutes or more should display as much data as possible.
    • Approved: A confirmation that tokens have been successfully bridged and are waiting in the destination address.
    • Refunded: An explanation that the transaction failed, but that the tokens, minus the gas fee, have been refunded to the user.
    • Failed/Timeout: If a transaction has taken much longer to complete than anticipated, after a predetermined a amount of time a 'timeout' error message displays, explaining that the transaction is taking too long to process, but is still trying to complete, and the user should not try again in the meantime.
    • Link: View transaction Etherscan and/or Pocket Explorer
  • Modal: "Error"
    • Depending on the data we have available when a transaction fails, this small modal will explain to the user that something went wrong, what it was, and possible fixes they could try. (i.e. try again later, send a smaller balance, etc.)
In case the bridge requires a call to transferFrom the following UI will be necessary.
  • Button 'Approve': Only applies to unwrapping, an extra step to approve the transfer of ERC-20 tokens. Prompts a signature to approve in the connected wallet. Disappears after the user has approved the transaction, or if they have approved the transfer of a functionally infinite amount of tokens.
    • Checkbox 'Trust this bridge': Approves a functionally infinite amount of tokens to be transfered by the bridge.
    • Explainer text: Text explaining what checking the box does, and any security concerns involved.

Visual Design

We expect POKT to undergo a brand refresh in the near future. To make that process smoother, this project will match POKT’s brand guide whenever possible:
https://www.pokt.network/wp-content/uploads/2023/04/Pocket-Network-Brand-Guidelines-2022.pdf

The only unknown is the WPOKT token icon: at this time, we plan to use a recolor of the POKT token icon. No other design assets are planned for this token.

Select a repo