burnsignal / burnSignal-Spec

This repo is the specification for the Burner Vote application
3 stars 2 forks source link

Burn Signal Web App MVP Specification

Contents

  1. Overview
  2. Routes
  3. Data sources
  4. Basic Elements
  5. Home
  6. Poll Pages
  7. Profile Pages
  8. Modals

Overview

This document is the specification for the Burn Signal MVP Web Application, often referred to herein as "the application" or "the dapp". Where this specification is insufficient or vague, the figma prototype should be used as a reference. That failing, Twitter's desktop browser UI and UX should serve as a reference, where applicable. And, where any ambiguity remains, @auryn-macmillan should be consulted for clarity.

Wherever possible, and ideally without compromise, the application should run client-side with data hosted on public and trustless (trust minimized) sources. The current state of the application should be permissionlessly reconstructable by any user whether they are running the application locally or using our hosted version.

Routes

The following routes exist in the dapp, all others should 404 gracefully.

/ --> /home

/home --> The application's home feed.

/new/poll --> The "new poll" modal, which should render over whichever page is already displayed or over the contents of /home if it was navigated to directly.

/{ethAddress} --> the user profile corresponding to ethAddress.

/{ENSDomain} --> the user profile corresponding to the ethereum address that ENSDomain resolves to.

/poll/{pollAddress} --> the poll page for the poll at ethereum address pollAddress.

/poll/{pollAddress}/yes --> the "yes" voting information for the poll at ethereum address pollAddress. Displayed as a modal over the current page, or over the contents of /poll/{pollAddress} page if navigated to directly.

/poll/{pollAddress}/no --> the "no" voting information for the poll at ethereum address pollAddress. Displayed as a modal over the current page, or over the contents of /poll/{pollAddress} page if navigated to directly.

/404 --> A 404 page containing all of the basic elements listed below, along with a lighthearted message.

Data Sources

3Box

Most profile data will be sourced from 3Box.

BrightID

BrightID will be used a an oracle for uniqueness.

TheGraph

TheGraph's GraphQL API will be used to populate feeds with poll and vote data.

Basic Elements

These elements are common to most pages, although their contents may vary slightly on each page.

Nav Bar

Title

Displayed on the left side of the Nav Bar is a title for the current page. The title should be "Home" for the home page, "Poll" for a poll page, or {username} for a profile page. The title should link back to the current page. e.g. The title on the home page should link to /home, the title on a poll's page should link to /poll/{pollAddress}, etc.

Search Field

The search field is a single line text entry box that should filter the feed based on a pollAddress, pollText, username of creator, or ethereumAddress of creator. The search field is not displayed on poll pages (/poll/{pollAddress}).

Back Button

The back button is displayed on all pages other than /home and should link back to /home. It should be placed to the left of the title.

Activity Feed

The activity feed contains the primary content of each page, which consists of a feed of relevant polls, and some additional visualizations in the case of a poll's page (/poll/{pollAddress}).

Poll Items

Each poll items should include:

Left Gutter

Burn Signal Logo

A Burn Signal logo that links to /home

New Poll Button

The "New Poll" button should open the "new poll" modal (/new/poll), which should render over the contents of whichever page is already displayed or over the contents of /home if it was navigated to directly.

Right Gutter

In the MVP version, the right gutter is empty. However, in future versions this space will be used display things like trending polls (something like the top five most voted on polls in the previous 24 hours) and promoted polls (there will be a small number of slots in which people can pay to promote polls, these slots will be purchasable using a Harberger tax).

Home

The home page /home consists primarily of a feed of use created polls. The home page also includes a "New Poll" button and a "Search" field. The feed should progressively load content as the user scrolls.

Activity Feed

In the MVP version of the dapp, the activity feed on /home will be a global feed of all polls, sorted in reverse chronological order.

If volume or spam becomes an issue, we may need to introduce some default quality filters or Reddit style sorting options.

In future iterations, we may introduce the ability to follow users and/or hashtags, in which case this feed may become more personalized.

Poll Pages

Each poll should have its own dedicated page who's route is /poll/{pollAddress}.

Activity Feed

The first item in the activity feed on a poll page is the relevant [poll item]().

Below that, there should be a variety of visualizations for the current results of the polls. This should include:

Profile Pages

Profile pages can be reached via two different routes, /{ethAddress} or /{ENSDomain}. The profile page will display the profile associate with the ethereum address in the URL or the ethereum address that the ENSDomain resolves to.

Any 40 character hexadecimal string prepended by "0x" will be treated as an ethereum address. As such, any ENS domain that mimics the form of an ethereum address will resolve to the mimicked ethereum address, rather than the ethereum address that the ENS domain points to.

Any string that is not a 40 character hexadecimal string will be assumed to be an ENS domain, regardless of whether .eth is appended.

e.g.

/0xD1220A0cf47c7B9Be7A2E6BA89F429762e7b9aDb would resolve to /0xD1220A0cf47c7B9Be7A2E6BA89F429762e7b9aDb

/0xD1220A0cf47c7B9Be7A2E6BA89F429762e7b9aDb.eth would resolve to the profile of whichever ethereum address is pointed to by 0xD1220A0cf47c7B9Be7A2E6BA89F429762e7b9aDb.eth

/barry would resolve to the profile of whichever ethereum address is pointed to by barry.eth

/barry.eth would resolve to the profile of whichever ethereum address is pointed to by barry.eth

Profile Details

On the profile page, the

Feed

The feed displayed on a user's profile will include all polls created by that user, displayed in reverse chronological order.

3Box

The application will import the following user profile information from 3Box:

In cases where a 3Box profile does not exist (or has not yet loaded), the application will simply fallback to using the etherurm address in place of Name and the ethereum address's blockie in place of a Profile Image. All other fields will be not be displayed.

Blockies

Each profile image should be replaced by its associated ethereum account's blockie image on hover.

Modals

New Poll Modal

The "new poll" modal is accessed by clicking the "New Poll" button in the left gutter and should render over whichever page is already displayed or over the contents of /home if it was navigated to directly.

The profile page should include the profile image of the current user, along with a form to create the new poll.

The fields are:

Vote Yes/No Modal

Todo