trueblocks / trueblocks-explorer Goto Github PK

In version 1.0, we can switch a small collection of about 10 CSS definitions to change the 'skin' of the app. (It's easier to show you what I mean than explain it.)

This issue to design a mechanism that would allow us to modify the application's 'skin.'

Think of switching between light and dark mode on steroids. Not only switching between light and dark mode, but switching between skin1, skin2, skin3, etc.

Sorting on calculated fields in the datatable does not work. For example, Digests, nApps/Block

If you do a pull on the trueblocks-core repo and then hand copy the file ./src/other/install/mockData/mockData.tar.gz to ~/.quickBlocks/mockData, and then unzip and unpack that file, you will get a new (more interesting) set of mocked up data.

Then, if you turn mock data on, and go to this page: http://localhost:3002/monitors/explore?addrs=0x5ed8cee6b63b1c6afce3ad7c92f4fd7e1b8fad9f&name=Vitalik and then click on 'Balances' you should see a pretty poorly done scatter chart.

Push on the 'bar' chart type and notice that the chart doesn't change.

This is because the BarChart component and the ScatterChart component are identical.

This issue is to expand on the three 'Chart' types (bar, line, and scatter) to display the mocked data better.

I did some work with 'd3' and put it in a folder called ./src/other/d3-charts. You can copy the contents of that folder to a new folder and do:

yarn install
yarn start
to see that code which I like especially because it's animated and it is 'responsive' in the sense that the svg canvas changes shape if you change the shape of the window. I learned how to do this by watching these YouTube videos, which I think are pretty good.

https://www.youtube.com/playlist?list=PLDZ4p-ENjbiPo4WH7KdHjh_EMI7Ic8b2B

In the previous version we used a library for fetching data from the backend that allowed two things:

1. periodic refresh of the data (for example, every 14 seconds)
2. refresh of the data if the window goes out of focus and returns to focus (hidden by another window for example).

The library was called SWR. Not sure we want to use that, but we need the same functionality.

https://swr.vercel.app

Please review this and consider using it since I'm already a little bit familiar with it. Although, I'm open to other suggestions for similar functionality.

I modified one of the TrueBlock Core tools to sleep for 10 seconds as a way to test the 'Loading' component.

It works well.

However, I wanted to cancel the request by hitting the escape key on my browser. I expected the application to cancel the request and return control to the user, however, it simply continues to spin the spinner.

Question:

1. Should the user be able to able to cancel the request?
2. Can we fix our application so it does that?

There is a missing dependency on the package.json file.

One of the things I love about version 1.0 is the fact that I can scroll through the entries in any table with the keyboard. Down/up arrows for next/previous record. Left/right keys for next/previous page. Home/End for first record/last record.

This makes the application feel very much more like a spreadsheet program than a web page where navigation through a table of data is primarily by clicking on pagination controls.

The docs for starting the explorer are wrong. They reference nf start which tries to start the electron version which isn't working in the explorer folder.

I'm sure you've thought of this, but I notice that a lot of the keyboard handling code has "leaked" into the NameTable component. I'd like to abstract all of the keyboard handling code into a table component that can be much more easily used elsewhere without duplicating complicated code.

I'm envisioning an underlying keyboard handling table and then slightly higher level tables. One for displaying rows. One for displaying objects and a third for display a spreadsheet-like grid (for use with the Indexes view). The row and grid tables would have the ability to display detail view object tables.

(All of this is implemented in the old version of the explorer if you need to better understand what I mean.)

version
nocolor
wei
ether
dollars
raw
very_raw
fmt
api_mode
to_file
output
file
noop
help
parity

I will just put all of these into a single issue so I don't create a ton of them:

• We should be able to customize the Mac menu
• The window should be much bigger on initial launch and it should retain its own size when closed.
• Addresses should be displayed as Name (0x123...456) everywhere they are displayed
• Addresses within a given monitor_group should be colored consistently (first - green, second - blue, third - orange, etc.)
• The margin of the table should be larger so the data table doesn't bump up against the edge of the window.
• The electron app should use the QuickBlocks logo when I use Alt+Tab to switch programs
• The title bar should say Tokenomics - Powered by QuickBlocks
• White background may look better light yellow, but then header might want to fade from different colors.
• Last visited monitor_group should be highlighted when the app first starts up so there's not a blank screen.
• The column rows 'Block Number', 'Transaction Index', and 'Trace ID' should be collapsed into a single column showing bn.txid.traceid. Call transaction indexes transaction ids (or at least be consistent with trace id).
• I like black bars, but other colors might look good as well.
• Bar charts should not show 'in-error' transactions by default. We want to see the actual usage not the attempted usage.
• Gas cost column can go away.
• Monitored Address column can go away since it's identical for all rows.
• If we had to choose between date and blockNumber.txid.trid, I would choose to show dates.
• When the electron app window closes, the app should close (although this may be a Mac thing)
• Should be able to specify period length in the charts (hourly, daily, minutely, monthly)
• Functional lists should be sorted alpha within contract address (with any non-monitored address included in other).
• Should be able to click on function name and see views filtered by function.
• Gas would be very, very interesting especial 'gas wasted' by throws, reverts, etc.
• If the range of dates is more than a year, show monthly data. If more than a month, less than a year, show weekly data, if more than a week and less than a month, show daily data, otherwise hourly data.

On the develop branch, there are five main menu items.

The first one, Dashboard, has five tabs: Overview, Accounts, Monitors, etc.

The second tab, Accounts, is supposed to have sub-tabs which display vertically for various things (Transactions, Functions, Neighbors, Tokens, Accounting, etc. -- only Transactions and Functions show now -- names are not finalized.)

I can get the tabs to work, etc, but I can't seem to get the routing to work. When I click on Accounts, it properly goes to the Accounts tab, but when I click on any of the sub-tabs (Transactions or Functions), it returns to the Overview tab.

I can't really figure out how to make this work.

We can discuss later if this mode (sub-tabs within tabs) is a good UI choice, but for now, let's just get it to work so we can see the data we have to deal with. Fixing the actual structure of the UI can wait a bit.

There's a mixup between SystemsView/SettingsView and the folder Settings/System.

Decide on which is better (I think it's probably Settings) and then make them the same.

I notice that the status panel has hard coded data.

This issue makes note that we should use real data.

https://fees.wtf/

Do this:

Without starting the server, go to ./trueblocks-explorer folder and type yarn install then yarn start.

The application starts by opening the browser window, but a small popup window appears saying Error running 'status' which is true, but way to cryptic.

We need a way to display a must more obvious error messages saying something like "The application cannot run if it can't connect to its back end." This should be a generic solution so that the same warning mechanism can be used for other warning such as "We cannot attach to the RPC server" or other things.

I have started the API server. And installed trueblocks explorer. However, when I shoot yarn develop it throws the error The futex facility returned an unexpected error code.[1] trueblocks-explorer/node_modules/electron/dist/electron exited with signal SIGABRT[1]. Though it still runs and the web app pops up, but it shows me empty rows and an error symbol. Any idea what am I doing wrong?

Detailed log --

[0] <i> [webpack-dev-server] Project is running at:
[0] <i> [webpack-dev-server] Loopback: http://localhost:1234/
[0] <i> [webpack-dev-server] On Your Network (IPv4): http://localhost:1234/
[0] <i> [webpack-dev-server] Content not from webpack is served from 'trueblocks-explorer/public' directory
[0] <i> [webpack-dev-server] 404s will fallback to '/index.html'
The futex facility returned an unexpected error code.[1] trueblocks-explorer/node_modules/electron/dist/electron exited with signal SIGABRT
[1] yarn develop:electron exited with code 1
[0] asset bundle.js 10.4 MiB [emitted] (name: main) 1 related asset
[0] asset index.html 230 bytes [emitted]
[0] orphan modules 3.95 MiB [orphan] 807 modules
[0] runtime modules 26.3 KiB 14 modules
[0] modules by path ./node_modules/ 7.53 MiB 2655 modules
[0] modules by path ./src/ui/ 74.3 KiB
[0]   modules by path ./src/ui/views/ 39.8 KiB 36 modules
[0]   modules by path ./src/ui/components/ 19.8 KiB 16 modules
[0]   modules by path ./src/ui/*.tsx 7.43 KiB 4 modules
[0]   modules by path ./src/ui/*.css 2.17 KiB 2 modules
[0]   modules by path ./src/ui/*.ts 1.98 KiB
[0]     ./src/ui/utils.ts 387 bytes [built] [code generated]
[0]     ./src/ui/locations.ts 1.61 KiB [built] [code generated]
[0]   modules by path ./src/ui/modules/ 1.8 KiB
[0]     ./src/ui/modules/core/index.ts 1.61 KiB [built] [code generated]
[0]     ./src/ui/modules/error_notification.ts 197 bytes [built] [code generated]
[0]   ./src/ui/hooks/useCommand.ts 1.34 KiB [built] [code generated]
[0] webpack 5.38.1 compiled successfully in 21714 ms
[0] No issues found.

Review the structure of the folders / filenames in the repo and suggest removal of any unusual / incorrect ways of naming files and / or folders.

The idea to make the repo be familiar to a person who's new to the repo.

I made decisions without having any experience of what a 'regular' Javascript/Typescript project would do.

Let's do this issue earlier rather than later -- rip the bandaid off quickly.

Error Modes on Startup:

1. API is not running
2. RPC is not running
3. PATH is incorrect (can't find chifra or it's children)
4. Error return from chifra
5. Error return from API (bad, non-existent route) -- can we remove this one -- thin API?
6. EMPTY returns (i.e no OWNED accounts)
7. Can't find PATH or PATH not set or (if we remove all the built items
   in ./bin of core) any of the individual executables not being present.
8. Set the paths in ~/.quickBlocks/quickBlocks.toml to invalid paths
9. Remove the entire folder ~/.quickBlocks after install
10. $PATH must contain trueblocks-core/bin
11. trueblocks-core/bin must contain chifra (assumes all other tools are available if chifra is)
12. There must be a path to the node
13. There must be an API
14. Sample data must exist for collections, monitors
15. Names data must exist and have at least X records
16. Whenblock data must exist
17. As unfortunate as it is, if the user has no Etherscan key, the API fails with bad JSON.

This function ( https://github.com/TrueBlocks/trueblocks-explorer/blob/master/src/ui/modules/core/index.ts#L65) centralizes access to the backend. We did this in anticipation of 'reading the backend files directly into memory' under the Electron application using ideas (potentially) as described here: https://nodejs.dev/learn/nodejs-streams.

I'd like to start with the 'names' database which a simple binary file generated by the backend from an installed text file on first run after installation. The format of the binary file is fairly simple according to this code in the backend: https://github.com/TrueBlocks/trueblocks-core/blob/master/src/libs/utillib/accountname.cpp#L313

Basically native types (ints, bools, etc) are stored directly. Strings are stored with leading uint length followed by the bytes of the string. Types are described here: https://github.com/TrueBlocks/trueblocks-core/blob/master/src/libs/utillib/accountname.h#L30

TrueBlocks core returns a valid response even in the case of an error. This is the result of the way the command line versions of the code works and will not change in the future.

For example, this curl request:

curl "http://localhost:8080/transactions?transaction=12"

Does not complain even though the transaction does not exist. In this case, it returns valid JSON thus:

{
  "errors": [
    "chifra transactions - 12 does not appear to be a valid transaction index."
  ]
}
```

We should handle this case as an error and report the message returned in `@modules/core` I think.

Issue 1
Go to names table
Hit home
Hit up arrow key
Should do nothing....scrolls to bottom of current page instead.

Issue 2
Rows per page control captures keyboard control if changed.

• On any page, confirm that keyboard control works
• Change the number of rows per page control (notice it captures keyboard control)
• Hit next/prev key or nextpage/prevpage. Row selection does not work
• Suggestion: after changing rows per page value return to first page and select the first row in the table.
• Note that the same does not happen if one clicks on page link directly.

Issue 3
Hit the home key
Hit down arrow once (selected row is now second row on page)
Hit next page key
The selected row is correctly the second row on the page. All good
Hot the home key again (first row is selected)
Hit next page key
Fourth row on page is selected -- would have expected first row to be selected.

I need a way to navigate through blockchain data in the explorer such as next/prev/first/last. Suggestions on how to navigate to particular places in the app is needed <NavLink>?

An aside. You can use chifra blocks bn.prev, chifra blocks bn.next, chifra blocks first, and chifra blocks latest to navigate the API, so the buttons should be super simple.

In version 1.0, there is a 'status' panel whose display I like. It's informative and looks professional. I'd like to re-create it in version 2.0. Currently, we query the data but we only present it as formatted JSON data.

We talked about an installer for Mac (and Linux?). Can you @dszlachta link to the tool you mentioned?

If you run the old UI, you will see that the backend API server communicates progress to the front end through web sockets which feed into a component at the bottom of the display I call the 'console.'

This 'feedback' to the user, which gives information about what's happening on the server, is important to me, and I would like to re-enable it in the new UI.

The 'feeding of progress' data is already implemented and working in the back end, so this issue is just re-enabling it on the frontend. There shouldn't be any backend work needed as that code has not changed.

Steps:

1. Run the old version of the UI to see how the console component works
2. Read the code related to that component in the old version and either copy it over to the new version or re-implement it.

What is the best way to preserve user decisions?

For example, if the user closed the help/status panels and hits reload, the panel re-open. I'd like to preserve that.

For one reason, if I select more than 10 items per page, the navigation disappears from view and I must scroll down to use it.

I want to start changing the OS specific Electron menus. Any suggestions on how to do that?

(extend-help)@./trueblocks-explorer:jrush>$ yarn install
yarn install v1.22.10
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning @types/[email protected]: This is a stub types definition. filesize provides its own type definitions, so you do not need this installed.
warning @types/[email protected]: This is a stub types definition. react-jss provides its own type definitions, so you do not need this installed.
warning cypress > @cypress/request > [email protected]: this library is no longer supported
warning cypress > @cypress/request > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning webpack-dev-server > sockjs > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
[2/4] 🚚 Fetching packages...
error @ctrl/[email protected]: The engine "node" is incompatible with this module. Expected version ">=10". Got "8.9.3"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

TODO(tjayrush): This code should notice the lack of a path
but allow the API to run anyway. All requests to the API should
return an error to the requestor instread of refusing to run.

Currently, we link only to http://localhost:1234/names, http://localhost:1234/explorer, etc.

@deeayeen suggests we link all the way down into each sub-tab which makes sense for both directing users directly into the sub-view and it makes help files easier.

Use cookies to store the state of the UI.

I was working on one of the subviews (Transactions under Explorer) and I made a mistake in the URL to access the API.

I used http://localhost:8080/transactions?transaction=latest when I should have used http://localhost:8080/transactions?transactions=latest (missing 's').

The front end didn't fail in an obvious way. Dan suggests it should report an error through a 'Toast'.

But this is a bit of a larger issue...

We need a way to respond to problems with the back end in general. There's a number of different scenarios detailed in this issue: #305.

This issue tracks the need for a 'methodology' to handle errors (not the solution to each issue -- just an overall mechanism to handle errors from anywhere in the code).

I can handle each individual error using the above issue.

Related TrueBlocks/trueblocks-core#50

For example, set an invalid path for cachePath. Then do a query for blocks. Returns the block, but reports an error that is ignored in the UI. The block data is correct.

There's a mismatch between the name of the view MonitorsView, the route /monitors and the files in the folder Names. All should be called names.

This has always been a very confused idea. It was meant to allow the end user to specify a group of related addresses and look at them in a combined view. I think that idea is still valid, but may not warrant a top level menu item. It may, but my guess is that it doesn't. In any case, in order to move forward, I want to remove it. We can always add it back later.

I'd like to be able to search for names on the names table (or any other table for that matter).

Also, I'd like to be able to filter the table by various things -- perhaps things like tags or things the user defines (such as tags).

Filtering could also filter on smart contracts, not smart contracts, prefunds, etc.

In a shell that does not have PATH set to include trueblocks-core/bin, if you open the API, the API will fail but only on it's first attempt to start chifra.

Instead, it should check to see if it can find chifra before trying to start the API.

1. API is not running
2. RPC is not running
3. PATH is incorrect (can't find chifra or it's children)
4. Error return from chifra
5. Error return from API (bad, non-existent route) -- can we remove this one -- thin API?
6. EMPTY returns (i.e no OWNED accounts)

The way the folders are laid out is weird, I think

docker
| ---- frontend
| ---- api
| ---- electron

I think it might be better if it was

electron
| ---- frontend
| ---- api
| ---- docker

since the primary thing we're building is the electron app.

Some of the tables in some of the sub-views show un-editable data (such as the explorer views, the signatures view, and others.

Some of the tables (such as names / tags) allow the user to edit some of the values in the database.

This is tracks enabling editing values in one of the tables inline. In other words, the user clicks on a value and an editor opens up that he/she can change.

This could be done by opening up an expanded view that changes into a edit form if the user clicks a button or something.

There will need to be some backend work done in the blaze server to accept the user's edited data and prepare it for sending to chifra, but that part, I will do. Before I do that though, I need the front end to send the data.

Here's a bunch of small issues. Not sure if you'd rather have them in individual issues or all together. If you want me to separate these out, let me know.

• Key strokes on any page that contains a table should take focus to the table right away -- in other words, I don't want to have to put the mouse over the table -- hands on keyboard at all times
• First arrow down puts blue line under row 0. Second arrow down puts highlighted row on row 1. There should only ever be a highlighted row -- never a row with just a blue line. On second thought, this appears to be an issue with the row when the mouse is over the row not the top line.
• The actions to the right of the display need to be highlighted as well (the whole row needs to be highlighted).
• Double blue marks above and below the Tags column should not be there. Fields should not be highlighted -- only entire rows
• When at the bottom of the current page, if user hits down arrow, switch to next page (if not on last page)
• When at top of page, if user hits up arrow, switch to previous page (if not on first page)
• Home should go to page 1, record 1. Currently it stays on the current page, but goes to record 1 on the current page.
• End should go to the last row of the last page (be careful around off-by-one errors when number of rows is even division of pages)
• Left / right key correctly switches pages, but the first row in when that happens should be highlighted. It currently requires a page down to highlight it.
• Two consecutive end keys toggle between last row and second to last row (on page -- should be in entering table)
• Let's disable expanded rows for now -- keep the functionality there, but hide the icon and ignore the enter key -- for now -- we can revisit this.
• If no row is selected (highlighted) and the user presses the end key, the first row is selected. If user hits end key again, last row on current page (should be last ever row) is selected.
• Two consecutive presses of home key causes selected row to toggle between row 0 and row 1