Skip to content

Design Review #35

Closed
Closed
Design Review#35
Assignees
Motzart
@avive

Description

@avive
avive
opened on Sep 29, 2020

General comments

  • Wrong dark gray color used for some text not readable. e.g. transaction page, account page. Change that text style to white when in dark-mode. See ref mock in Figma.
  • In all places we display UTC times should be rendered in the user's local time-zone. e.g. 10:33:6 + UTC => 1:54pm (local time zone code). Also remove the + char between time and time zone code. e.g 10:53:16 + UTC -> 10:43:16 UTC.
  • Change text in age label from few secs ago to just now.
  • Epoch and label age should be their start time which can't be in the future - it should always be 'just now' or 'x seconds ago...'.
  • There is an issue with all routes - when viewing a sub-page of an entity, e.g. epoch's rewards, epoch's transactions the route should be /epoch/xxxx/rewards, /epoch/xxxx/layers and not /epochs/566/rewards. Needs to be fixed for all routes - see shared doc for reference of requested path syntax...
  • Callout area (top-right module) - in some cases the label is light-gray, in some white (in dark mode) - always display label in white (dark-mode) (like in overview page).
  • We need to set a short descriptive page title for each of the routes. Currently page title is Spacemesh Explorer for all pages. For example, transactions detail page title should be Transaction Details.
  • All hex ids short strings should be in this format: 0x1234...5678 for consistency.
  • Columns that display a number of an amount in table views should be right-aligned. For example, here: http://stage-explore.spacemesh.io/txs - the data in the value column is wrongly center-aligned.

Start page

  • Data in mini dashboard should be linked to the appropriate page, e.g. accounts, epoch, layer, smeshers....
  • Title should be Transactions and not Latest Transaction. Subtitle: Recent transactions.
  • Search bar: add spaces around / chars in placeholder text.
  • Browse all link - wrong color in dark mode - please look at Figma mock - should be white...
  • Total TXS value since genesis: 0.3 SMH -> Coin transferred: 0.3 SMHH. We will add help tooltips with more detailed explanation to figure but we want to keep them very short for now.

Transactions Page

  • Callout. Main data item label: Since Genesis. It is obvious these are transactions. Right-most column: Value Since Genesis: 0.028 SMH. No need to state 'total txns'.

Transaction Page

  • dark mode - data is not readable due to being light-gray on dark gray. Make dark-gray text white so it is high contrast against the black background. It is the same issue on other pages such as a layer page - check the ref mocks in figma. The dark gray text color needs to be changed to white.
  • Title label: Transaction Details. Subtitle: 0x1234...6789.
  • Timestamp: add space char after ago and (.
  • Fee is always displayed 0 - should be taken from the tx object - user provider fee in smidge units.
  • Page url should be /tx/xxx and not /txs/xxx.
  • The coin and sent small labels in the call-out area should be aligned to the top and bottom of the text (see figma mocks).

Layers Page

  • Change column header from Age to Started (to be consistent with other pages such as epochs).
  • Age/Started data should be layer start time and not end time (same for epochs). Also applicable to the call-out module (top-right). It should display the last known layer start time.
  • ATX VALUE -> 'ATX'.
  • Replace 'Started' and 'Transactions' column.
  • Unify Transactions and TXN Value column into one with this data formatting: [num_of_txs] [smh_value]. e.g. 10 Transactions (32.302 SMH).
  • Call-out right-most column. Change to these 3 lines: Most Recent layer\n date\n \nage - no need for time stamp here. It is not clear what the data is without this label.

Epochs Page

  • Total SMC -> Value.
  • Add a bit more left space in layout for the value column. It is too close to the rewards data column on its left.
  • We need to clarify that the time in the call-out is time since genesis. Add label Genesis Time. Remove detailed time-stamp and only keep date and age. e.g. 3 lines of text should be: Genesis Time\n 8/21/2020\n 9 days ago.
  • Callout area. Epochs -> Epochs since genesis and make the label white like in the overview screen (dark mode reviewed).

Layer Page

  • Blue title: Layer 1278. Subtitle white: Layer details.
  • Times: let's please unify on the same age formatting we discussed. e.g.
  • Remove 'Layer' from the text of the top 3 row. It is obvious that these are layer properties.
  • Finality -> Confidence. For now there should be only 2 possible values Confirmed or Pending. Confirmed is for any layer that was verified. Pending is for layers which have not been verified yet.
  • Blocks row: 22 blocks -> 22 - it is obvious these are blocks and this is more consistent with other rows.
  • Page url should be /layer/xxx and not /layers/xxx.
  • Total Rewards -> Rewards.
  • Total Transactions -> Transactions.
  • In top-right call-out area: TOTAL COIN REWARDS: 35.417 SMH -> Rewards 35.417 SMH - in 2 lines.
  • Age should be based on the layer's start time and not its end time. So, current layer age will always be ago and not from now in the future...

Layer Transactions Page

  • Change route (url) from /layers/xxx/txs to /layer/xxxx/txs`
  • Title: Layer XXX Transactions. Subtitle: empty.
  • Call-out module: Total TXNS value: 0 SMH -> Transactions Value: 0 SMH

Accounts Page

  • Call-out on right side: 'accnts' -> 'Accounts' and make label white - it is light grey in dark-mode.
  • Call-out right-most column: Most Recent Account \n data\n age\n - no need for time-stamp and needs a label as it is not clear what the data is without one.

--

Account Page

  • Title: 'Account'. Subtitle: Coin account (for simple coin accounts)
  • Title for address row should be 'Address' and not 'Account'.
  • Add Balance row. Some users may miss the call-out amount.

Account Transactions Page

EPOCH Page

  • title: Epoch XXX - DETAILS -> Epoch XXX. Sub-tile: Epoch details.
  • Route (url): epochs/xxx -> epoch/xxx.
  • Update labels: Epoch Number -> Number, Total Layers -> Layers. Total Rewards number -> Rewards. Total Rewards value -> Rewards Amount.

EPOCH transactions page

  • Route (url): epochs/xxx -> epoch/xxx

EPOCH layers page

  • Route (url): epochs/xxx/layers -> epoch/xxx/layer (see routes table in g doc spec).

Search Bar

  • When entering something there are no results for, hide the empty details area (id..., type...).

Rewards Page

  • Title: All Mining Rewards -> Smeshing Rewards. Don't use mining anywhere - just smeshing.
  • Add a bit space between the rewards distributed number and the label - they are too close together.
  • Smesh rewards since genesis -> Rewards value since genesis.
  • Rewards column label -> Reward.

Reward Page

  • Title: Reward 0x1235...4567. Subtitle: 'Details'.
  • Layer Number -> Layer.
  • Smesher ID -> Smesher Id.

Smeshers Page

  • Use new smesher color (non-black) so 2 top modules are readable.
  • Committed Space -> Space.
  • ID -> Smesher Id.
  • Total ATX TXNS -> Activations.
  • Subtitle: make it empty for now.
  • call-out, right-most column: display total space committed by all Smeshers. e.g. Total Space\n [total_space].

Smesher Page

  • Url should be /smesher/0x... and not /smeshers/0x...
  • Use the new smesher color (non-black).
  • Reward Committed -> Rewards.
  • Total Transactions -> Activations.
  • Title: 'Smesher 0x1234...5678'. Subtitle: 'Details'.

ATXs Page

  • Use ATX color for top modules and not black.
  • Title: Smesher 0x1345..6789 Activations. Subtitle: empty string for now.
  • atxns -> Activations in right-side module.
  • PREVATX -> 'Previous Activation'.

ATX Page

  • Use ATX color and not coin-transaction color.
  • Title: Activation 0x1234...5678.
  • Id -> Activation Id.
  • Remove block row for now.
  • Previous ATX -> Previous Activation.
  • Label 'sent' in call-out area should not be displayed for an atx.
  • Align label 'atx' in callout area to text baseline (bottom).

VAULT Page

  • Url should be /app/.. and not /apps/...
  • Title: Smart Wallet... -> Vault [vault_name]. Subtitle: A vault app.
  • Hide State Hash row.
  • Daily Spend Address -> Daily Spend Account.
  • Authorized Accounts -> Master Accounts. Value for that is 1 or 3 clickable addresses.
  • Add row Monthly Vested Amount and value is a SMH value.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions