Apologize if this is described somewhere, but I want to help make this a reality as I have some bandwidth in January to help out.

• Is there a design mock-up for what the OBE should look like in the end? ( is the goal to make telos.bloks.io like clone?)
• (Similarly, I assume colors/fonts/etc would be based on telos.net, but there is no Branding guide or at least not one I can easily find)
• Is there a board like Trello or using the Github projects page for feature development that we as contributors can help with?
• In the same vein, what features need to be done vs nice to have etc.

Happy to help contribute in any way I can with the above too!

With the goal of getting this out by end of February, I wanted to help ensure success as I am passionate about this project and Telos as a whole.

The Attach an Account modal is opened via the "connect" button in the top-right of the header. It allows users to use their external wallet to select an account and securely attach it to the OBE.

The main screen of the modal simply displays supported wallets which we can pull the account name (or public key or whatever magic you guys are using) into the OBE.

Following this, there is a confirmation screen

In this confirmation screen we are displaying the user's selected accountname and the permission they have granted us access to. In the case that it is the OWNER permission, we should probably add a warning that this is stupid and dangerous.

The X button at the top-right of the modal acts as a "stop this process" button and will simply revert the user to the main OBE screen which they started from.

Describe the bug
vue-router treats path with periods as local file path in local dev environment.

To Reproduce
Steps to reproduce the behavior:

1. Start up local dev environment (yarn dev)
2. Navigate to localhost:8080/account/eosio.evm (or click on an account name in the tx table that contains a period)
3. View 'cannot get...' error/fail to load

Expected behavior
Loads the path like the live sites

Screenshots

Desktop (please complete the following information):

• Brave (Chrome)
• Ubuntu 20.04

Additional context
Issue is unique to local dev environment and isn't present on live site(s).

see: https://forum.vuejs.org/t/vue-router-does-not-catch-routes-with-a-dot/14717

Describe the bug
Console Bug when Navigating to Account Page: HTTP 500 on get_creator

To Reproduce
Steps to reproduce the behavior:

1. Search Any Account
2. Open Developer Consoler
3. Look at Response for get_credator call

Expected behavior
Creation Details for the Telos Account

{"statusCode":500,"error":"Internal Server Error","message":"account creation not found"}

Describe feature

• connect a single account via Anchor
• see #70 for connect/disconnect & modal

Additional context
It is not possible to connect multiple anchor accounts via UAL atm.

Description
Suppress 0 balance records.

Pros: Easier to scroll through list
Cons: ?

Description

Would it be better to use the same Font within the same page ?

As implemented:

As designed:

Missing:

• Colored memo
• Colored action

I deeply dislike the expand functionality you guys added. It looks weird and works weird. It also feels unnecessary.

Describe the bug
Console Error on Domain Account Page

To Reproduce
Steps to reproduce the behavior:

1. Search for eosio
2. Open Developer Console

Expected behavior
Values in Detail Fields

TypeError: Cannot read properties of null (reading 'ram_bytes') at Proxy.<anonymous> (/js/75.92e26e8a.js:1:7853) at Generator.next (<anonymous>) at s (/js/75.92e26e8a.js:1:6994)

Describe the bug

• Known Issue: Possible to Search and Lookup Invalid Account Names

Missing Responsive Design on Account Page

• Known Issue

Create a Vibrant README ✏️

suggestions per @chiedo from issue #23

We have lots of room to make the Open Block Explorer README more inviting to open source developers. See the next.js README as an example.

1. Describe what Open Block Explorer is
2. Link out to a live example of the Open Block Explorer
3. Add a “contributing” guide which guide developers new to the project in the contribution process
4. Include Links to design docs if available
5. Link to some “good first issues” for developers new to the project
6. Describe who the core contributors are in the footer
7. Link out to the Open Block Explorer Discord and/or Telegram community

Description
Increase testing coverage to meet minimum threshold(s) & enforce for new PRs

Minimum Initial Requirements

• address any failing tests
• remove any/all instances of /* istanbul ignore */
• 100% coverage for all vue component files in /components, /pages, /layouts
• minimal global coverage

Running tests & coverage reports

• run yarn test in root to run the test suite, this will also print out coverage & threshold stats, and generate istanbul report
• run npx jest <filename/regex> to run an individual test file
• open open-block-explorer/test/jest/coverage/lcov-report/index.html in broswer to view static istanbul report page (useful for identifying uncovered code)

Describe the bug
Sorting on Latest Transactions render Table sideways

To Reproduce
Steps to reproduce the behavior:

1. Go to homepage
2. Sort on any column in the Transaction Table

Expected behavior
Same Data Size vertical/horizontal should not adjust column/row width/height

Screenshots

Description
After enforcing a TX bug, the new data is not cleared and the old data is sent as input after correction.

To Reproduce
1: Enforce a TX error with an incorrect value on Sign.
2: Correct the incorrect value after TX error is received.
3: Observer that the fields are not updated with the corrected data.

Expected behavior
If the data is supposed to be retained, dialog should be open on error ?
If the data is not supposed to be retained.
1: Data should be cleared

Expecting corrected value to be used in TX.

Screenshots

Desktop (please complete the following information):

• OS: OSX 11.6.1
• Browser: Chrome 99.0.4844.83

Describe feature

• Allow user to send tokens from logged-in account
• Wire functionality to the send tokens modal #74

Additional context

• see Issue #73

Describe the bug
Staked by others missing precision on Account Page

To Reproduce
Steps to reproduce the behavior:

1. Search for doublewabbit
2. Look at Staked by others

Expected behavior
Should render as 40.0000 and not 400000

Description

Should we use the same precision notation for high-precision tokens > 4 decimals ?

Example:

pBTC:

KANDA:

Description
Sending 0.00001 TLOS is not catched until Anchor push the TX.

To Reproduce
1: Add too many decimals vs the precision of the token and make sure the next digit is less than 5 to avoid rounding up.

Expected behavior
Frontend should warn the user before signing.

Desktop (please complete the following information):

• OS: OSX 11.6.1
• Browser Chrome 99.0.4844.83

This wasn't well defined, but in the original designs, as resources reach their max, the color should change. I'm open to suggestion how to tackle this, but I think that anything above 80% should be red.

Description
While the project currently supports both APIs for components, moving forward we will only use Vue3.

Tasks

• AccountCard
• ViewTransaction
• loginHandler
• childrenPanel
• coinSelector
• dateField

Describe the bug
Ram usage is calculated incorrectly

Solution
use ram_quota as divisor instead of total_resources.ram_bytes

Describe the bug
Display of transactions does not work as expected on Safari. Content in rows overflow to next rows. Same applies to account detail page (same component?)

On transaction detail page, collapse feature does not work either. Adds scroll bar to transaction row instead.

To Reproduce

Open OBE and view transactions
Click on transaction hash and open transaction details page

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Homepage:

Transaction Details:

Account page:

Desktop (please complete the following information):

• OS: MacOS 12.2.1
• Browser Safari
• Version 15.3

Description
Account Info could be optimized to suppress whitespace.

OSX/Chrome:

Android:

Describe the bug
When sending an amount ≥1,000.0000 tokens, the Amount field verification inserts commas for thousands, millions places, etc. This creates an invalid amount for sending. Attempting to edit creates "NaN" result. If the transaction is sent to Anchor Wallet, the number is incorrect.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Send Tokens page
2. Populate fields to create a valid transaction in any token with an amount ≥1,000.0000 tokens (any token).
3. Navigate away from the Amount field and commas will be inserted into the amount and the message.
4. Click the confirm button to sent transaction to Anchor Wallet.
5. In Anchor Wallet, the amount of the transaction will be different than expected - roughly 10x more.

Expected behavior
The expected behavior is that the wallet would remove any special characters in the display and send the correct format (without commas etc) to Anchor Wallet.

Screenshots

• Screenshot: Send Tokens screen
• Screenshot: Resulting Anchor Wallet screen

Desktop:

• OS: iOS 10.15.7 (seems to occur on all as it's a server-side issue)
• Browser: Brave
• Version: Version 1.34.80 Chromium: 97.0.4692.71 (Official Build) (x86_64)

Suggested Fix
Perform pre-submit text verification of the Amount field to remove commas and send correct amount to Anchor Wallet as a properly formatted numeric decimal string value.

This pre-submit text verification can also be used to address Issue 113, Issue 115 and Issue 117

If this approach is used, please remove the "Invalid Amount" warning for entries with commas that will result in a correct transaction with the post-submit text verification.

Describe the bug
Misleading Behaviour without Formatted Error Message - Human Readable

To Reproduce
Steps to reproduce the behavior:

1. Alter a valid TX Id
2. Search for the Invalid TX Id

TypeError: Cannot read properties of undefined (reading 'map') at Proxy.<anonymous> (933.2d361609.js:1:3745) at Generator.next (<anonymous>) at i (933.2d361609.js:1:2556)

After a user has logged in, they can navigate to their account via the connect account dropdown.

In each account there is a button for "Staking" which opens a modal that allows a user to manage three things:

1. Stake
2. Unstake
3. Refund

These three sets of functionality ensure that a user can manage the resources necessary to complete transactions on the network using the traditional staking model of EOSIO networks.

Informational table

At the top of the modal there is a small table which outlines the current status of this account's staking. It shows the total account balance, staked to CPU, staked to NET, staked by others, and amount refunding.

Stake

The Stake tab allows users to stake CPU/NET to the network, either for their own account or for another account. For now, we should limit this to only the user's account as there is no functionality in this design to manage staking to other accounts.

Unstake

Unstake removes resources from the staked pool and refunds them to the user's balance.

Refund

This tab shows the current status of unstaking funds. Each unstaking action has its own row in the table, with a bar that counts down the unstaking period.

In the case that a refund fails after the refund has expired, the user can manually perform the action to refund the tokens to their account.

Describe the bug
Console Error on Accounts with . address

To Reproduce
Steps to reproduce the behavior:

1. Search for auctns.dstny
2. Open Developer Console

Expected behavior
Staked by others should contain data

TypeError: Cannot read properties of null (reading 'staked') at Proxy.<anonymous> (75.92e26e8a.js:1:7729) at Generator.next (<anonymous>) at s (75.92e26e8a.js:1:6994)

Mobile view problem

When doing lookup of account name on mobile the first letter of account name is automatically capitalised and the lookup fails even if its a valid account name.

To Reproduce
Steps to reproduce the behavior:

1. View on android mobile
2. type in valid account name
3. search returns an error

Expected behavior
All inputs should be lowered or lookups should be case insensitive

Screenshots
Recording attached

Desktop (please complete the following information):
Not applicable

Smartphone (please complete the following information):

• Device: Samsung

As implemented:

As designed:

Missing:

• The entire top block is missing
• Tabs are missing
• Trace is missing
• RAW is missing

Labeling on Account Page.

• Total <- Available
• Staked by others <- Split in Staked Types

To support the new single attached account template, we need a Send Tokens modal

For this first permutation, we should limit support to just fungible tokens. This means that the NFT selector should be hidden.

Necessary fields for this modal are:

• Receiving accountname
• Token selector
• Token amount, which shows the current balance of the sending account (attached account). Clicking on this fills the field with the full balance (send all tokens)
• Optional memo

Which clicking the confirm button, there must be a confirmation of the success/error of the transaction.

If there was an error, we can use the same template.

Please describe.
Using type ahead will reduce guesswork for the user & ensure that the selected entry is a valid search term and/or nav path.

Possible feature would be a toggle to switch typeahead off.

Describe the solution you'd like
add ui dropdown element to search bar to display possible search results

resources
[https://github.com/darrenjennings/vue-autosuggest] (https://github.com/darrenjennings/vue-autosuggest)
backup option: https://github.com/pespantelis/vue-typeahead

To be able to access a user's account information securely, we're going to allow a user to "attach" and "detach" accounts. This will happen through the "connect" button in the top-right of the page.

Let's take a look at the dropdown itself. First, it has an empty state which new users will first encounter.

For the connected state, we will have a dropdown selector that has the following functionality:

• Select active account
• List all attached accounts
• Detach account
• Detach all accounts
• Attach a new account

The Detach account functionality (the X) only shows on hover.

The Attach an Account functionality opens the Attach an Account Modal.

Disconnect all removes all accounts, and should clear the local storage, leaving a clean reset state.

Format timestamp value for all tables

• method to format date see https://teloscan.io table for example
• add formatting method to 'Timestamp' column definition

Overview

Transactions that share the same timestamp and transaction hash are not being showed as a single transaction that can be expanded.

Acceptance Criteria

• collapse transaction sets (same tx id, same timestamp) into one visible row
• add chevron icon to visible row
• clicking the icon should expand to see all txs in set
• expanding another tx set collapses any other tx set that may be open

The transaction

Additional context
See the data column for quasar expand/collapse implementation

Original reference: issue #55

Is your feature request related to a problem? Please describe.
Group Transaction Sets and Data sections to save space and improve Scrolling

• Expand TX Set with Arrow
• Expand Data with Arrow
• Close Previous on New Expand

TX Set Group

Data Group

Scrolling
Same as Above where values are too long for the width...

Description

• display relative account creation time (w/timestamp on hover) on account view page
• link creation tx

Additional notes

• use momentjs method(s) as in table, refactor to import from util

Summary 🚀

The Open Block Explorer is a first of its kind open source EOSIO block explorer that supports EOSIO-based blockchains. The current leading EOSIO block explorers are feature-rich but closed source, which has resulted in Telos and other EOSIO based blockchains at risk of losing access to their block explorers or paying high fees to the vendors who support the existing block explorers. While Telos is focused on the EVM as our strategic focus area, Telos Native is the foundation of the EVM, driving core functionality and governance and must be actively maintained. As a stop-gap solution, we are utilizing the EOSIO Authority block explorer but with that block explorer being private, we are still at risk of losing access to that block explorer at any time.

We are building the Open Block Explorer to ensure we have an EOSIO block explorer for Telos Native and open sourcing it to benefit other EOSIO based blockchains while leveraging the network of EOSIO blockchain developers by open sourcing the project.

Goals 🥅 - ✔️ = implemented/completed

1. Launch a new Telos block explorer using Open Block Explorer - ✔️
2. Arrive at a vibrant community of open source contributors for the Open Block Explorer

Recommendations 👨🏿‍🏫

Create a Vibrant README ✏️ - migrated to issue #84

We have lots of room to make the Open Block Explorer README more inviting to open source developers. See the next.js README as an example.

Some suggestions:

1. Describe what Open Block Explorer is
2. Link out to a live example of the Open Block Explorer ✔️
3. Link out to clear, comprehensive documentation (eg. how do I configure Open Block Explorer to reference different Blockchains?) - TBD (left out of issue #84 for now)
4. Add a “contributing” guide which guide developers new to the project in the contribution process
5. Link to some “good first issues” for developers new to the project
6. Describe who the core contributors are in the footer
7. Link out to the Open Block Explorer Discord and/or Telegram community
8. Ship the alpha version of the Telos Block Explorer that’s powered by Open Block Explorer and link to it in the GitHub README as an example. This will help make the project real. And let people feel the features that are missing to encourage contribution. Ship the alpha and then iterate. ✔️

I would recommend making all of these changes and submitting them as a pull request on the Open Block Explorer Repo and adding me as a reviewer.

GitHub as the Source of Truth - ✔️ https://github.com/orgs/telosnetwork/projects/4

A familiar experience for an open source project would be having GitHub Issues as the source of truth. GitHub issues should encapsulate all of the known bugs, upcoming features planned, and so on.

This keeps everything transparent and helps serendipity happen as community members stumble upon plans and progress in conversations that take place is Issues.

GitHub Projects (beta) can add some structure to working with Issues. It will need to be enabled for the Telosnetwork GitHub organization. Watch this video to get a better understanding of how GitHub Projects would be helpful.

Define High Priority Features 📊 - ✔️

High priority features need to be defined in GitHub Issues with the enhancement label and each of these features need to be clearly defined in such a way that a new developer can read the description and start asking questions and coding.

Community engagement 💬

Any strong open source project needs strong community engagement from the core contributors. Someone will need to be responsible for engaging with this community, doing code reviews, merging pull requests, and such.

Once the README is clear and high priority features are defined in GitHub Issues, we should share the project in as many EOS blockchain discords as possible and on Twitter.

Utilization of GitCoin 💰

If we need to utilize GitCoin to compensate developers with funds from the Telos Core Developers treasury, we should do so on a feature-by-feature basis. There needs to be a clearly defined scope for each feature. We can do this once we have a list of features that need to be built stored in GitHub Issues.

While I have not used GitCoin in the past, it seems that posting Freelance code bounties would be the way we would want to engage.

The following look like some good examples of feature-based code bounties:

• Sum - Up Volumen In PancakeSwap
• V2 (Alpha): Ability To Withdraw From Expired Vaults
• LedgerLive Integration For Optimism

Closing this issue 🚢

I'd recommend closing this issue after this strategy has been rolled out in a partial or complete capacity or outright rejected 😆

cc @telosnetwork/telos-core-devs

To support the new connected account functionality, we'll be updating all the Single Account templates.

For all accounts, except for ones that the user has attached, users will now see:

In the main informational section, this will show the user:

• accountname
• creator account
• status of the resources, with a nice circle graph around each
• a table of the account's balances for:
  -- total
  -- refunding tokens
  -- staked by other accounts
  -- staked to REX (for later, I think)

In the secondary detail section, we will have tabs with sub-content:

• Transactions
• Tokens
• Keys
• Children (child accounts created by this account)

Transactions

Transactions will use the typical quasar table functionality already developed to show transactions.

Tokens

Tokens will use the following layout:

Keys

Keys and permissions will be shown using this layout:

Children

Children will be shown using a simple quasar table.

see 'secondary details section': #72 (comment)

Describe the bug
On mobile, timestamp and action columns overlap eachother

To Reproduce
Steps to reproduce the behavior:

1. Navigate to https://explorer.telos.net in phone browser
2. scroll down to transaction table to view

Expected behavior
Timestamp & Action headers should not overlap. Timestamp column values should break instead of overlapping.

Screenshots

Smartphone (please complete the following information):

• Device: Samsung S20
• Browser: Brave (Chrome)

Additional context
Only in portrait mode

Describe the bug
Link to Account Creator is Broken

To Reproduce
Steps to reproduce the behavior:

1. Search for eosmechanics
2. Click on alohaeosprod

Expected behavior
https://explorer-test.telos.net/account/alohaeosprod

Erroneous Link:
https://explorer-test.telos.net/account/account

Describe the bug
wrong favicon & title

To Reproduce
Steps to reproduce the behavior:

1. open OBE
2. View tab icon is Quasar favicon & 'OBE' tab title

Expected behavior

• show purple telos circle for favicon
• change title to 'Open Block Explorer'

Screenshots

Describe the bug
Incorrect Resource Data on Account Page

To Reproduce
Steps to reproduce the behavior:

1. Search for 5abuetdetaci
2. Resources show %

Expected behavior
Expected CPU and NET 0% vs %
Expected RAM 36.5857%

Equation Used:

ram_usage: 2996 / ( ram_bytes: 8189 / 100 )

Powerup is a resource model improvement that aims to be easier to use for users who require a quick way to perform a transaction on an EOSIO network.

In the user's account, after signing in, they will have access to a "Powerup" button.

This button opens a Powerup Modal, which has three fields: the receiving account, the amount of CPU, and the amount of NET.

As an extension to #72, we must also add functionality that enables an attached account to perform the following basic actions:

• Send tokens
• Manage staking
• Powerup the account

I'm going to break these up into three separate issues, since there's a lot of functionality here.

What is important for this ticket is that we support this functionality at the template level by adding the appropriate buttons:

Ignore the REX button for now, we'll deal with that in a future version.

Description
Sending -1.000 TLOS is not catched until Anchor push the TX.

To Reproduce
1: Transfer a negative number.

Expected behavior
Frontend should warn the user before signing.

Desktop

• OS: OSX 11.6.1
• Browser Chrome 99.0.4844.83

As implemented:

As designed:

Missing:

• Connect multiple accounts
• Disconnect single account
• Disconnect all accounts
• Link to view single account