Code Monkey home page Code Monkey logo

aescan's Introduction

æScan is a blockchain explorer, analytics platform, and decentralized smart contract navigation platform based on æternity.

Table of contents

Introduction

With æScan you can easily navigate between different features and live statistics of æternity blockchain: keyblocks, microblocks, accounts, transactions, smart contracts, names and tokens.

Blockchain data is retrieved from æternity middleware and æternity node.

Nuxt 3, Vue.js, Vite and Pinia provide the foundation for the project, enabling us to create a seamless and intuitive user experience with Server Side Rendering enabled.

Getting started

First, download and install Node.js. Version 20 or higher is required.

Clone æScan repository

git clone https://github.com/aeternity/aescan.git

Install required dependencies with yarn

yarn install

Copy content of .env.example file to .env

Run æScan in development mode with hot reload

yarn dev

A local instance of æScan will be available at http://localhost:8080.

Other commands

Build and minify for production

yarn build

Lint js and css files

yarn lint

Build docker image

Docker is used to run æScan in different deployment stages.

To build a docker image of æScan Docker is required.

yarn install
docker build -t aescan .
docker run -p 80:80 aescan

Deployment Stages

Three different deployment stages are available to test or use æScan:

Stage name URL Description
Production https://aescan.io Production environment deployed manually from the main branch by creating a release branch and merging an automatically created Release Pull Request.
Development https://aescan.dev.service.aepps.com Development environment deployed automatically after every push to the develop branch.
PR preview https://pr-[PR-id]-aescan.stg.service.aepps.com Pull Request preview deployed automatically after every commit to an open pull request.

Browser compatibility

Supports evergreen browsers only.

The core browser set targets the 2 most recent major versions of Chrome, Firefox, and Edge on a monthly basis and Safari on a yearly basis.

Testing

This project uses Cypress for e2e testing. Tests can be executed using the command yarn e2e:open.

Contribution

We welcome contributions to our repository! If you have an idea for a new feature or a fix for a bug, please feel free to open an issue and/or a pull request. We encourage you to read the full Contribution Guidelines to learn more about the project structure, good practices and rules to follow.

Stay in touch

Join æternity forum and participate in discussions. Share your ideas, ask questions, and get involved!

Stay up-to-date on the latest developments in the æternity ecosystem by following us on social media.

Resources

Want to learn more about æternity and how it's revolutionizing the world of blockchain technology? Check out our website, Github repositories and blog for more information.

aescan's People

Contributors

janmichek avatar lukeromanowicz avatar aeternity-bot avatar michele-franchi avatar mmpetarpeshev avatar davidyuk avatar mradkov avatar

Stargazers

 avatar  avatar  avatar Michael Kurowski avatar  avatar Marco Walz avatar

Watchers

Marco Walz avatar  avatar Yani M avatar  avatar

aescan's Issues

Adjust oracles links

Every oracle link should be adjusted in order to point at the right oracle details page.

Token details page

Details panel:

  • Name
  • Symbol
  • Price (only for listed tokens)
  • Market cap (only for listed tokens)
  • Total supply
  • Holders
  • Hash
  • Contract
  • Decimals
  • Extensions
  • API links: Middleware, DEX

Note: token name / symbol is not unique so it cannot be used to navigate to the tokens detail (check the old explorer, it’s using ct_).

Improve search bar

  • If a valid hash is entered the user is redirected to the details page
  • If an invalid hash is entered the user is redirected to the search results page and the specific "not found" panel is displayed. Example:
image
  • If a string like "abc" is entered (not a hash), the user is redirected to the search results page to display names and tokens results

The last two cases are handled here: #210

Get rid of !important in our css

In a few places of the application we use !important; in CSS, which is not ideal. We usually use it to fix quickly some code written using bad practices. The ideal solution is not to modify the internal CSS of a component from outside, which may lead to visual issues when css is loaded in a different order between dev mode and production build.

image

Implement market stats in-memory cache

Currently, to fetch market stats about aeternity tokens we are using free coingecko which has harsh API rate limits. We should implement in-memory caching in SSR to cache the results so we can avoid errors in case a user starts refreshing a page very often and gets blocked

Account: wrong info for `ChannelCreateTx` in Data column of tx-history

Context information

application version: 0.1.0 (testnet, but probably also irrelevant)
device: irrelevant
browser: irrelevant
operating system: irrelevant

Steps to reproduce

  1. Open a state channel via ChannelCreateTx (e.g. by playing the state channel demo https://statechannel.aepps.com/)

What is expected?

I expect to see two different accounts that are involved in the channel with their corresponding AE deposit value in the Data column of the explorer.

What is actually happening?

The same account appears twice:
image

Link: https://aescan-testnet.prd.aepps.com/accounts/ak_Wtx5SMXBcZcCGzxeuFybdsMxNfD142ordeFWDCrrpTWbcBkfB

Firefox CSP issue

Context information

application version:
device:
browser:
operating system:

Steps to reproduce

Firefox gives different CSP errors in the console.

What is expected?

What is actually happening?

image

State channels

A state channels page should be visible with a paginated table containing the following columns and total records:

State Channel ID Status Participants On-Chain Updates Locked Last Known Round Last Updated Last TX Type
ch_22SfHdn...Ud Open (or Close) Initiator: ak_21A27UV...7E
Responder: ak_VwtWJge...M8
1 10 AE 9 141956
2 days ago
ChannelCreateTx

Note: Last Known Round can be grouped with On-Chain Updates in a single column called "Updates" if not enough space is available.

No filters should be visible here but we can check if it's possible to filter open and close state channels.

Page anatomy should be similar to https://aescan.prd.aepps.com/contracts and the table content is similar to the State Channels table present at the bottom of https://aescan.dev.aepps.com/

Token events

A tab called “Events” should be visible in the token details page.
A paginated table with the following data should be visible in the tab:

  • Hash
  • Date
  • Name (possible values Mint, Burn, Transfer, Allowance or N/A if the event is custom)
  • Data (have a look at the possible cases below or N/A if the event is custom)

This table should be populated using the logs endpoint, example: https://mainnet.aeternity.io/mdw/v2/contracts/logs?contract=ct_7UfopTwsRuLGFEcsScbYgQ6YnySXuyMxQWhw6fjycnzS5Nyzq

The data column can be populated only with known AEX-9 events (Mint, Burn, Transfer, Allowance):

  • Mint: arg1 (account address) [chip with arg2] (value)
  • Burn: arg1 (account address) [chip with arg2] (value)
  • Transfer: arg1 (account address) --> arg2 (account address) [chip with arg3]
  • Allowance: arg1 (account address) --> arg2 (account address) [chip with arg3] (value)

Note: right now all args are decoded and mdw is implementing this new parameter to encode them:
https://staging.mdw.mainnet.aeternity.io/mdw/v2/contracts/logs?contract=ct_7UfopTwsRuLGFEcsScbYgQ6YnySXuyMxQWhw6fjycnzS5Nyzq&aexn-args=true
For development purposes we can use the staging endpoint and fix it once the mdw version containing this feature will be deployed.

Account activities tab

Columns:

  • Hash: in some cases we won’t have any tx-hash, e.g. AENS expiration won’t have any tx-hash, the same for Beneficiary reward
  • Date
  • Type
  • Activity
  • Data
Type Activity Data Technical considerations
AE Transferred toReceived fromBeneficiary reward ak_… + Æ amountak_… + Æ amountÆ amount how to deal with SH-DEX activities to avoid duplications?
AENS ClaimedExpiredRevokedReceived fromTransferred to xyz.chainxyz.chainxyz.chainak_… + xyz.chainak_… + xyz.chain  
AEX-9 Token createdTransferred toReceived fromMint receivedBurned TOKEN_SYMBOLak_… + TOKEN_SYMBOL & amountak_… + TOKEN_SYMBOL & amountTOKEN_SYMBOL & amountTOKEN_SYMBOL & amount how to deal with SH-DEX activities to avoid duplications?can we distinguish transfers, mints and burns?
AEX-141 Collection createdTransferred toReceived fromMint receivedBurned COLLECTION_NAMEak_… + COLLECTION_NAME & nft_idak_… + COLLECTION_NAME & nft_idCOLLECTION_NAME & nft_idCOLLECTION_NAME & nft_id can we distinguish transfers, mints and burns?
SH-DEX(to be checked) SwappedAdded liquidityRemoved liquidity TOKEN_SYMBOL & amount ↔︎ TOKEN_SYMBOL & amountTOKEN_SYMBOL & amount +TOKEN_SYMBOL & amount ↔︎ POOL_SYMBOL & amountPOOL_SYMBOL ↔︎ TOKEN_SYMBOL & amount + TOKEN_SYMBOL & amount see AE and AEX-9 comments, avoid duplicated outputmaybe we need to include that in the type “AEX-9” and cannot have it separately in SH-DEX as type
? ? ? ?

Endpoint: GET /v2/accounts/:id/activities

Implement information about how many tokens can be minted

Please describe the problem that your request should resolve.

Implement in the token details information on how many tokens can be minted. Some are limited, some are not.

Describe the solution you'd like

Hopefully it can be easily fetched from the contract information but that requires some research

Is it already possible to achieve the same outcome in any other way? If so, how?

Not sure

Improve SEO to score top search results

Verify that Plausible is tracking from desired stages and domains, and is using company credentials.
Verify that Sentry is tracking from desired stages and domains, and is using company credentials.
Verify the page is properly indexed by the search engines and sitemap is recognized.

Unify typography

Take new design typo variables and makes CSS reusable and remove quick wins.

Code duplication in tables

Most of the tables are having a lot of common code e.g. AuctionsPanel.vue and NamesPanel.vue. Perhaps it would be nice to create a reusable component and reduce duplication.

deduplicating api requests during client-side hydration

Please describe the problem that your request should resolve.

Some of the fetch requests on the client-side are executed even though the data has been already resolved on the server-side and provided for the client in the application state, It's because lack of return value in handlers of useAsyncData or lack of useAsyncData at all. Would be nice to improve it for hydration performance.

Describe the solution you'd like

As above

Is it already possible to achieve the same outcome in any other way? If so, how?

Yeah, but useAsyncData is the native, recommended way.

Additional context

Adjust block height information

Seems like does not belong here. It’s present for more entities.

Tables: display block height + date

Detail pages: separated rows (block height + date)
Also check name of detail pages “Date” or “Time” row.

Remove “Current keyblock" from transactions table.
image

Oracles page

A paginated table should be visible with the following columns:

  • Oracle ID
  • Registered at
  • Expiration
  • Query fee
  • Total queries (nice to have)

Oracles should be ordered by mostly used.

A filter should be visible with the following options:

  • Active
  • Expired

State channel details

A state channel details page should be visible with a "Details" panel and the following rows:

  • State Channel id (copyable hash): ch_22SfHdn...Ud
  • Status (Open / Close): Open
  • Create transaction: th_JBqeBk1...XE
  • Initial amount: 10 AE
  • Initiator: ak_21A27UV...7E
  • Responder: ak_gvxNbZf...Gc
  • On chain updates: 1
  • Last known round: 9
  • AE locked: 10 AE
  • Last updated: 761456 - 2 days ago
  • Last TX type: ChannelCreateTx
  • Middleware link

Note: initial amounts and create transaction should be displayed. Amounts should be checked to make sure they are updated and do not refer to initial amounts (responder_amount and initiator_amount).

Create transaction can be retrieved using the txs endpoint.
https://mainnet.aeternity.io/mdw/v2/txs?channel=ch_22usvXSjYaDPdhecyhub7tZnYpHeCEZdscEEyhb2M4rHb58RyD&direction=forward
BUT, this will not work for channels that were created on contract calls

Oracles details events tab

A tab called “Events” should be visible in the oracle details page.

A paginated table with the following data should be visible in the tab:

  • Query Tx
  • Queried At
  • Respond Tx
  • Respond At
  • Status

Status: Response pending, Response available, Response expired, Query timed out (should be calculated based on the TTL)

The table should display additional data based on two cases:

1 - Query sent, no response sent

  • Query id
  • Query fee
  • Query TTL

2 - The query has a response

  • Query id
  • Query fee
  • Query
  • Response
  • Response TTL

Tokens page

A paginated table should be visible with the following columns:

  • Image + Symbol
  • Name
  • Hash (contract)
  • Amount
  • A filter should be added to display Listed / All tokens.
  • Default option: Listed

Switch navigation to add Tokens page first.

Oracle details page

A new page should be created with oracle details.
The details panel should display the following data:

  • Copyable oracle id
  • Registered at (height + date)
  • Last extended (height + date)
  • Last query (height + date)
  • Expires at (height + date)
  • Query fee
  • Query format
  • Query response
  • Creator
  • Total queries

Transactions page hints

All transaction types in transaction tables should have hints to better explain the transaction and the generic "data" column.
Hints should be added in the "Type" cell.

  • Remove labels from chips and explain every chip in tooltip
    image

Token holders

A tab called “Holders” should be visible in the token details page.
A paginated table with the following data should be visible in the tab:

  • Account
  • Amount
  • Percentage

Sitemap

Implement a sitemap for implemented pages.
It probably makes sense to generate the sitemap only in the production build (no dev mode).

Acceptance criteria:

  • æScan exposes sitemap.xml, which contains links to all available pages
  • The sitemap file doesn’t get built in development mode (yarn dev)
  • The sitemap file is built automatically based on routes defined in the Vue Router config

Token details page hints

Please describe the problem that your request should resolve.

Implement hints for the token details page including a warning about the value and market cap being only theoretical. Due to how the price is calculated (comparison of two reserves), somebody can artificially inflate the price of a worthless token.
Events data can be explained as generic.

Describe the solution you'd like

Probably hint messages showing in popup messages after clicking hint icons

Is it already possible to achieve the same outcome in any other way? If so, how?

No

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.