Design Review

[avive]

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

• Title: Account Transactions. Subtitle: 0x1234...1234 (account address). The address displayed is not the account's address. See: http://stage-explore.spacemesh.io/address/0xa7A424f4A77Bfd4b72EC5a68214ac8f3Da849236/txs - looks like it is hard-coded.
• Add transaction timestamp to each row. e.g. 3 days ago. Not sure how we missed this :-) -
• Not clear what is the timestamp that is displayed on the top-right call-out. It should be the time of the last transaction but it is not. see: http://stage-explore.spacemesh.io/address/0xa7A424f4A77Bfd4b72EC5a68214ac8f3Da849236/txs

---

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.

---

[avive]

This is marked as fixed but I still see 0 in tx page. For example: https://stage-explore.spacemesh.io/txs/0xe1dffd47c453d88bb5f8f9891cc3d77b98c7c75bfe56bbd9de6beb2de3e0fb19

• Fee is always displayed 0 - should be taken from the tx object - user provider fee in smidge units.

[avive]

I still see the UTC time in the epochs screen and not the data, per this item (marked as fixed):

• 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.

[avive]

Typo in subtitle: Layers details -> Layer details per this issue:

• Blue title: Layer 1278. Subtitle white: Layer details.

[avive]

Regarding this issue:

• 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.

2nd line should be date - e.g day_of_month/month/year and not time stamp. I meant date in the comment and not data.
Also, first line Most Recent Account needs to appear in the first line. So we have:

Most Recent Account
8/21/2020
16 Days Ago

[avive]

Regarding:

• Not clear what is the timestamp that is displayed on the top-right call-out. It should be the time of the last transaction but it is not. see: http://stage-explore.spacemesh.io/address/0xa7A424f4A77Bfd4b72EC5a68214ac8f3Da849236/txs .
  Let's make it display like this:

Most Recent Transaction
8/22/2020
16 Days Ago

[avive]

Regarding:

• Reward Committed -> Rewards.

Label is currently Reward - please change to Rewards.

[avive]

Regarding:

• Title: Smart Wallet... -> Vault [vault_name]. Subtitle: A vault app.

For a vault page. Subtitle is still A smart wallet app. Should be 'A vault app`.

[avive]

@Primaveralina - making sure you saw the issues here in my comments....

[avive]

@Motzart - did you see my comments here on some of the fixes?

[Motzart]

Regarding:

• Title: Smart Wallet... -> Vault [vault_name]. Subtitle: A vault app.

For a vault page. Subtitle is still A smart wallet app. Should be 'A vault app`.

Fix

[Motzart]

Regarding:

• Reward Committed -> Rewards.

Label is currently Reward - please change to Rewards.

Fix

[Motzart]

I still see the UTC time in the epochs screen and not the data, per this item (marked as fixed):

• 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.

Fix

[Motzart]

This is marked as fixed but I still see 0 in tx page. For example: https://stage-explore.spacemesh.io/txs/0xe1dffd47c453d88bb5f8f9891cc3d77b98c7c75bfe56bbd9de6beb2de3e0fb19

• Fee is always displayed 0 - should be taken from the tx object - user provider fee in smidge units.

We get fee from back, it is equal 0

[Motzart]

Regarding this issue:

• 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.

2nd line should be date - e.g day_of_month/month/year and not time stamp. I meant date in the comment and not data.
Also, first line Most Recent Account needs to appear in the first line. So we have:

Most Recent Account
8/21/2020
16 Days Ago

fix

[avive]

This is marked as fixed but I still see 0 in tx page. For example: https://stage-explore.spacemesh.io/txs/0xe1dffd47c453d88bb5f8f9891cc3d77b98c7c75bfe56bbd9de6beb2de3e0fb19

• Fee is always displayed 0 - should be taken from the tx object - user provider fee in smidge units.

We get fee from back, it is equal 0

@lrettig - is this an API bug or a misunderstanding between API and backends? Currently all transactions show 0 fee. How can we address this?

[avive]

I still see the UTC time in the epochs screen and not the data, per this item (marked as fixed):

• 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.

Fix

In the 119 explorer - I still see UTC formatted time in epoch screen, layer screen, tx screen, rewards screen. All dates should be displayed in user's (browser) local time.

[lrettig]

This is marked as fixed but I still see 0 in tx page. For example: https://stage-explore.spacemesh.io/txs/0xe1dffd47c453d88bb5f8f9891cc3d77b98c7c75bfe56bbd9de6beb2de3e0fb19

• Fee is always displayed 0 - should be taken from the tx object - user provider fee in smidge units.

We get fee from back, it is equal 0

@lrettig - is this an API bug or a misunderstanding between API and backends? Currently all transactions show 0 fee. How can we address this?

Which endpoint is being used to read this? Tx returned by TransactionService/MeshService does not include a "fee" field because there is no "fee" data stored on mesh. On mesh, we store the gas offered by a tx, which includes max gas (gas_provided) and gas price (not currently implemented). See https://github.com/spacemeshos/api/blob/a2af5cc13c7c112d996848b85219499ba0cbc233/proto/spacemesh/v1/types.proto#L34.

To see gas actually used/fee paid, you'd have to look at the TransactionReceipt which IIRC is not currently implemented either: https://github.com/spacemeshos/api/blob/a2af5cc13c7c112d996848b85219499ba0cbc233/proto/spacemesh/v1/global_state_types.proto#L53 and see spacemeshos/go-spacemesh#2072

[Motzart]

I still see the UTC time in the epochs screen and not the data, per this item (marked as fixed):

• 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.

Fix

In the 119 explorer - I still see UTC formatted time in epoch screen, layer screen, tx screen, rewards screen. All dates should be displayed in user's (browser) local time.

Sorry, maybe i misunderstood, but all time in app use localtime ( time from browser ), maybe problem in label 'UTC', i removed it

[Motzart]

This is marked as fixed but I still see 0 in tx page. For example: https://stage-explore.spacemesh.io/txs/0xe1dffd47c453d88bb5f8f9891cc3d77b98c7c75bfe56bbd9de6beb2de3e0fb19

• Fee is always displayed 0 - should be taken from the tx object - user provider fee in smidge units.

We get fee from back, it is equal 0

@lrettig - is this an API bug or a misunderstanding between API and backends? Currently all transactions show 0 fee. How can we address this?

Which endpoint is being used to read this? Tx returned by TransactionService/MeshService does not include a "fee" field because there is no "fee" data stored on mesh. On mesh, we store the gas offered by a tx, which includes max gas (gas_provided) and gas price (not currently implemented). See https://github.com/spacemeshos/api/blob/a2af5cc13c7c112d996848b85219499ba0cbc233/proto/spacemesh/v1/types.proto#L34.

To see gas actually used/fee paid, you'd have to look at the TransactionReceipt which IIRC is not currently implemented either: https://github.com/spacemeshos/api/blob/a2af5cc13c7c112d996848b85219499ba0cbc233/proto/spacemesh/v1/global_state_types.proto#L53 and see spacemeshos/go-spacemesh#2072

@avive @lrettig so, judging from @lrettig comments we will have to wait until the necessary params are being implemented. right?

[avive]

I think that in the short-term the gas_provided smidge amount from the transaction should be displayed for simple coin transactions as this amount is always paid by the user. Longer term, this data should come from the tx receipt.

[avive]

I'm going to move any issue I see is not fixed yet to a new issue and close this mega issue.