WPOKT UX/UI Frontend Scoping Document

Overview

This document details the developement requirements to build the wPokt bridge as illustrated in the visual design. This proposal is to create a minimum viable version of the bridge, 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.

Tech Stack

• NextJS/ReactJS
• Chakra UI
• Web3 Connection and Tools:
  • Send Wallet (POKT Network)
  • Wallet Connect (Ethereum)
  • Metamask / injected providers

Core Functions

• Connect Wallet
  • POKT: Send Wallet
  • Ethereum: Metamask, wallet connect, etc.
• Bridge from POKT to wPOKT
  • Check balance
  • Check valid Ethereum address
  • Format memo and prompt send transaction
• Bridge from wPOKT to POKT
  • Check balance
  • Check allowance
  • Approve amount
  • Prompt "bridge" transaction
• Feedback
  • Fetch transaction confirmations (ETH and POKT)
  • Fetch Copper confirmation (if applicable)
  • Timeout
• Error handling

UI Components

• Wallet Connection
  • Button to connect wallet
  • One each to connect to POKT network and Ethereum network
  • Fetch and persist address(es) and balance(s) of wallet(s)
• Bridge
  • Button to connect send wallet (if not already)
  • Form input for amount
  • Text display / input for recipient ETH address
    • Autofilled if ETH wallet already connected
  • Icon and input to change address
  • Button to approve wPOKT amount (Ethereum only)
  • Button to confirm transaction
• Feedback
  • Display visual for processing bridge
  • Share links of tx receipts from etherscan and pocket explorer
  • Time estimate and warning text if taking longer than usual
  • Error handle display