Giter Site home page Giter Site logo

explorer-frontend's People

Contributors

avive avatar dbublienko avatar dependabot[bot] avatar despablos avatar kacpersaw avatar motzart avatar pigmej avatar valar999 avatar

Stargazers

avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

despablos forkkit dbublienko

explorer-frontend's Issues

Additional fields in block view

Add:

  • Smesher with link to the smesher screen.
  • Activation with link to block's activation.

This is blocked until the API is going to be updated with atx and smesher id per block.

Misc Enhancements for next dev cycle

This is an epic with list of new features and missing features that we'll want to implement in next dev cycle on this project:

  1. Block screen. Make number of transactions clickable and display a screen with block's transactions on click.
  2. Vaults related screens and data.
  3. Rewards related changes to reflect sm rewards scheme changes for 0.2.
  4. Add link to browse all blocks in an epoch to epoch screen.
  5. Add link to browse all blocks submitted by smesher in the smesher screen.

Layer's blocks page review

  • Title: Layer xxxx Blocks.
  • Subtitle: empty.
  • right-side callout: layer blocks -> blocks.
  • Smesher id should be displayed - it is the id of the smesher who submitted that block. Currently --. Should be link to open the smesher's screen. Explore should have this data.
  • TXN value -> Value.
  • Replace age and transactions column.
  • Remove all trailing 0s from block ids (also see #95). 0x58163b6e2fed2130bbbeabb2f3a4e99202d5ac3e000000000000000000000000 -> 0x58163b6e2fed2130bbbeabb2f3a4e99202d5ac3e

Display simple coin transaction fee

Please use gas_provided smidge amount from the transaction data and display it in the simple coin transaction screen.
This amount is always paid by the user. Longer term, this data should come from the tx receipt.

Account balance is not updated

  1. Sent coin to an account.
  2. Wait for tx to be confirmed and displayed in explore.
  3. Check destination account screen.

Result: balance is not updated with the incoming coin amount.
Expected: balance to reflect confirmed transaction.

Timestamp formatting

  • In call-out modules (right-side) use a simple date format and don't display a timestamp. e.g. 05/10/2020.
  • When displaying a time-stamp, remove the + char from the format so we get: 13:29:46 UTC.
  • Display the timestamps in the user's local-time zone and not in UTC.

Vaults icon

Current look - using account icon:

Screen Shot 2020-11-12 at 8 10 38 AM

Expected: Use vault icon.

@vomcent - do we have the art for it?

Overview screen links

Layer: browse the layer number displayed in the link and not the layers screen.
Epoch: browse the epoch number and not the epochs screen.

Overview Page Colors

Transactions call-out and sub-area should be displayed in the transactions canonical color, like they do in the transactions page. It is confusing when the color shifts like that... They are purple but should be green.

Layer start and end time are wrong

It looks like layer's start-time and end-time times are off by the layer duration network constant.
In this screen https://stage-explore.spacemesh.io/layers you can see that the most recent layer start time is in the future and if you click on the most recent layer to view its screen you'll see both start and end time can be in the future.

No Search Results Page Content

  • Subtitle below search term: search returned no results -> No results.
  • Hide the content area currently displaying No Result.....
  • Right-side call-out widget - remove all items - there's nothing to display there.

Status icon color while syncing

While the explorer backend is syncing, network status light should be orange and not green. It should only be green when the backend node is synced. Same issue for dash.

Epoch's Rewards Screen fixes

  • Title: Epoch X - Rewards -> Epoch X Rewards.
  • Subtile: Rewards awarded to Smeshers.
  • Call-out right-side module: AWARDS -> REWARDS.

Can't search for an account by address

  1. Browse an account in explorer and copy its address.
  2. Paste it in search bar and click search.
    Result: no-results screen is displayed.
    Expected: display the account's screen.

Block page review

  • Title: specific details for this block -> Block [short_hash].
  • Subtitle: specific details for this block. -> Details.
  • Block Number - make 0 for now. This will be the index of the block in the layer once the api supports this.
  • Remove block end timestamp row.
  • Change block start timestamp label to block time.
  • Make the layer data item clickable to view this layer's page on click.
  • Make the epoch data item clickable to view the epoch's page on click.
  • Total Transactions -> Transactions.
  • Total Rewards -> Rewards.
  • Missing field: Smesher - The smesher who submitted this block to the mesh. Linkable to smesher's screen.
  • Finality: 0% if layer is bigger then verified layer number. 99% if layer is equal or smaller to verified layer number.
  • Total rewards data item: numerical. If no rewards then display 0 instead of --.
  • Total rewards value data item. Units is coin. If 0 then display 0 SMH instead of --.
  • Hash - display full block hash but w/o all the trailing 0s.
  • Callout area: Total Coin Rewards: - remove : from label (like we did for all other screens). txns -> Transactions.
  • Fix the number of transactions in callout. It is currently constant 000 even for a block with transactions. see: https://stage-explore.spacemesh.io/blocks/0x58163b6e2fed2130bbbeabb2f3a4e99202d5ac3e000000000000000000000000

Genesis Accounts

Current behavior: only appear in dash and explore on the layer of the first tx from them.
Expected behavior: appear from genesis in both explore and dash and with correct balances.

404 page

  1. Browse overview page.
  2. Click on Smeshing rewards - rewards screen is displayed.
  3. Click back

Result: ore.spacemesh.io/404
Expected: go back to rewards screen.

Mini dashboard links in overview page

Please remove the underline from the linkable data - only display them on hover. I know I asked for it to look like a link but it doesn't look good.

Account screen callout changes

  • Add label next to balance amount - Balance.
  • Date-time display (right column) should indicate when the account was created (added to global state).

Modules title text capitalization

Please update these titles:

  • Smeshing rewards -> Smeshing Rewards
  • Tx/S Capacity -> Transactions / Second
  • Active smeshers -> Active Smeshers

Smesher field in blocks screen

Add the missing smesher ID data item for a block in the blocks view.
Blocked by the API currently not returning this data per block.
We are working on updating the API to return smesher id per block.

Design Review

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.