Overview

It would improve user experience if login interstitial/edge cases were made more apparent to the user.

Acceptance criteria

1. when a user has connected their wallet but not switched network to Telos EVM Mainnet/testnet, the user should be informed they need to switch networks (or abort login)
2. if the user manually switches network to one other than the correct Telos EVM network, the same state as above should occur
3. write actions should not be able to execute from the Function Interface unless user is fully logged in
   

Technical considerations

N/A

Tasks

Describe the bug
After connecting an invalid Native Address, the interface is stuck, ie can't reconnect, no error given in interface.

To Reproduce
1: Click Connect
2: Select Native Wallet
3: Select a non existing address
4: Try to reconnect with an exosting.

Expected behavior
Error message should be provided to the user, interface should be reset for a new connection attempt.

Screenshots
Error: No address associated with doublewabbit at m.<anonymous> (vendor.99856eba.js:300:9289) at Generator.next (<anonymous>) at c (vendor.99856eba.js:300:1794)

No information is given to the user.

Environment Used

• OS: OSX
• Browser Chrome

For contracts which are not verified, let users paste the ABI into the page so they can still interact with the contract if needed.

Instead of EOS Authority, redirect to explorer.telos.net

Blocked by ongoing prerequisite Indexer work

Overview

It would be a big improvement to user experience if a /token route were implemented, so the user could view token-specific information about a token contract

Acceptance criteria

• navigating to /token for a token contract should bring user to a new Token page, eg. for WTLOS, /token/0xD102cE6A4dB07D247fcc28F366A623Df0938CA9E

• going to /token/{address} should redirect you to `/token/{address}#transfers

• there should be a loading state while page loads

• there should be two tabs, Transactions and Holders

• Token icon should be visible in the header

• there should be links in the page header to creation tx, creator address, and link to Contract/Address page

• there should be a Transfers table with up to 50 rows

• when visiting the /address page for a token contract, there should be a link to go to the /token page for the same address

• clicking transaction, to, or from address from any row should take you to the relevant /tx or /address page

• clicking on the holders tab should bring the user to /token/{address}#holders, where there should be a Holders table with 50 rows

• clicking any address in the Holders table should take user to the appropriate /address page

• navigating to an invalid token address, eg. /token/0x123 should bring user to an empty token page, showing:

  • generic/placeholder tEVM logo
  • title "Unknown token"
  • empty transfers table
  • empty holders table

• navigating to a valid token contract address with non-checksum capitalization, eg. all lowercase, /token/0xd102ce6a4db07d247fcc28f366a623df0938ca9e should redirect user to formatted version, eg. /token/0xD102cE6A4dB07D247fcc28F366A623Df0938CA9E#transfers

Technical considerations

Completed (though PR possibly in need of dev merge updates) in #87

Tasks

• Check the indexing progress and how this affects the holder chart

Overview

Routing to conditional tab should be handled.

Steps to reproduce

1. Go to https://www.teloscan.io/address/0xfa9da51631268a30ec3ddd1ccbf46c65fad99251#contract
2. See the empty screen with no data and no indication that this is not supposed to exist

Current behavior

The page does not redirect when direct-loading a conditionally valid tab, resulting in a blank screen

Expected behavior

Redirect the user to the Transactions tab

Overview

Teloscan presently has all strings in the UI hardcoded. It would be great if the application instead supported i18n so that site translations could be possible

Acceptance criteria

• a list of all magic strings in the application
  • including html label, alt, placeholder, hint, aria-label, etc. attributes

Tasks

Need to sort the token-list tokens in this order:

1. WTLOS
2. All non-telosevm tagged tokens (i.e. anyswap bridged tokens) are sorted A-Z
3. All telosevm tagged tokens are sorted A-Z

This also means an audit of the token-list to ensure the tags are set properly, and an update to the readme to make it clear the rules for adding to token-list and what tags to use.

Also, should let a Telos account be searched for, and it will find the linked address and show it if found.

Originally posted by @poplexity in #4 (comment)

check around the site for other occurrences too

Add a Tag/Display Name to a Contract Address

Overview

This is a feature request to add a way for contract creators to assign a custom tag or display name to a deployed contract address. The purpose is to improve the readability and discoverability of contracts in block explorers.

Links

Please provide any relevant links to documentation, specifications, or related issues, if available.

Acceptance Criteria

• Contract creators can send a transaction to a specific address with encoded input data containing the desired display name for that contract address.
• The input data format should be 0xcontractAddress:DesiredDisplayName.
• Block explorer should recognize and display the provided name for the specified contract address.
• Only the account that deployed the contract should be able to set or modify the display name.

Tasks

• Define the input data format and encoding for the display name.
• Update block explorer to parse and display the assigned display names for contract addresses.
• Add documentation and examples for using this feature.
• Implement access control to ensure only the contract creator can set the display name.

Either a button to download directly to clipboard or show the ABI in a field all alone so it's easy to copy/paste. If it's own field, maybe still a button to copy to clipboard

Overview

when calling the create action on the following contract, https://testnet.teloscan.io/address/0x6F174B0a2c6B6807CcCc18b6643dbf755E31400c/#contract , there is an RPC error.

Blocked by #104

Steps to reproduce

1. Go to 'testnet teloscan'
2. Input the information as indicated in the screenshot below
3. Click the Write button, sign the transaction.
4. See the error
   

Current behavior

Method call fails with an RPC error

Expected behavior

The transaction should be successful.

Note: issue may be related to parameter type handing, as contract has args of type uint8 . see #104

A list of RPC endpoints that tests latency via a call to eth_getBlockNumber, similar to https://www.bscproject.org/#/rpcserver

Probably would want to maintain a list of RPC endpoints in a github somewhere so it's easy to manage without updating the site.

Overview

The clickable area to toggle date format on the transaction page is too wide

Steps to reproduce

1. Go to https://www.teloscan.io/tx/0x4467878b4b1f48995087ec23a584b08a3bb468a43213be9f8a79cb24cc00f395
2. Hover anywhere on the Date row to the right of the actual date text; notice that a tooltip appears
3. Click the row
4. Date format is changed

Current behavior

Date format clickable area is too wide; clicking a blank area to the right of the date field changes the date format

Expected behavior

date format should only change when the date is clicked (ie. the date element should have width: max-content; or some similar style)

Describe the bug
pending requests (promises) will not resolve if multiple clients are enabled resulting in no prompts to the user.

To Reproduce
Steps to reproduce the behavior:

1. Have one or more web3 providers enabled (metamask and coinbase extensions)
2. go to teloscan.io and click 'connect'
3. nav away and remove network from account settings
4. nav back and click connect
5. observe no prompt and pending request error in console.

Expected behavior
appropriate prompts (switch/add network) should display for users with eth providers

propososed solution

• prompt user to disconnect all eth providers except provider of choice to connect

Screenshots

Desktop (please complete the following information):

• Ubuntu 20.04
• Brave (Chrome)

if you trigger a search and nothing is found, a dialog or toast to let the user know we tried and failed would be nice.

Originally posted by @poplexity in #4 (comment)

Overview

It would improve user experience if the internal transactions in the transaction view got the same UI treatment as the Logs tab.

Acceptance criteria

• internal transactions, eg. here, should have the same appearance and view mode toggle as the Logs tab

Technical considerations

N/A

Tasks

https://stackoverflow.com/questions/57782617/how-to-remove-pwa-service-worker-and-its-cache-from-client-browser-after-remove

Ask Kushal to test when this is done, he's having it on mobile android.

Should support Metamask and wallet connect… Anchor for extra credit (ideally via a web3 provider that can be reused elsewhere, @poplexity has this started, ask him)

Do some research on appropriate ways to store the web3 instance in the store.

Store should have an “isLoggedIn” getter, and/or a “getAddress” getter and we can do “if (this.getAddress)” for the “isLoggedIn” logic.

This is a dependency for adding contract read/write interface on the contract tab (account page) for verified contracts where we have the ABI.

• Users should be able to see the amount of ERC20 tokens transfered on the transaction page
• Users should be able to see the amount of ERC20 tokens transfered on the transactions page if there is no TLOS value
• Human readable logs
• Human readable function arguments

Overview

Presently, users can only search for specific addresses in the search bar. Usability would be improved if users could search by account name/alias, eg. typing in CharmDojo would allow the user to go to /address/0x730d2fa7dc7642e041bce231e85b39e9bf4a6a64

Acceptance criteria

• when typing in a non-address string into the search bar, a dropdown/card should appear prompting the user to go to the address page matching the query
  • clicking the dropdown/card should bring the user to the address page
  • by default, pressing enter (as opposed to clicking the new UI element) should first attempt to use the search query as an address;
• a minimum of 3 character should trigger the alias UI element
• multiple results will need to be handled, eg. if the user types TLO, at least 2 results will match--Wrapped TLOS and sTLOS
  • there should be a maximum number of matches to prevent vertical overflow, or follow etherscan pattern of creating a scrollable container with a max height
• new UI element should be keyboard navigable; tab/shift+tab and arrow up/arrow down should allow the user to select the new UI element, and enter/space should go to the selected element; esc should hide the result(s)
• the dropdown menu should indicate tokens vs addresses vs contracts

Technical considerations

• it may be that the [currently in progress] indexer is required to do this mapping on the fly. See TransferTable.vue or AccountAddress.vue to determine if existing logic can be reused to this end

• refer to etherscan for their handling of this pattern for inspiration

• though WTLOS is used as an example, actual /token route is not yet implemented, and as such are out of scope here. navigating to WTLOS should go to the address/ route for now, with token route implementation being added in #83

Tasks

Enter 147705693 in the search bar and press enter… nothing happens migrated to new feature request

• set limit on main bundle (20Kb?) to detect accidental growth
• tree shaking / route webpack chunking
• code splitting / lazy loading opportunities, eg. all q-tabs can be async components
• add in bundle analysis https://bundlephobia.com/package/[email protected]

Overview

Presently, users can see if a contract is verified on its /address page. It would improve user experience if they could see a contract's verification status in other locations, like from the Transaction table view.

Acceptance criteria

• AddressField component should check if the address is a verified contract, and if so, should display a green check mark, like is shown here (but smaller)

Technical considerations

there should be a prop to disable the verification badge

Tasks

Describe the bug
Table does not update with txs if you search using the top search bar.

To Reproduce
Steps to reproduce the behavior:

1. go to teloscan.io
2. Click on any account
3. Enter or copy & paste a different account address into search bar and click 'Enter'
4. View table unchanged (header and account name do update but table does not)

Expected behavior
On 'Enter' table updates with account's txs like on initial account click.

Desktop (please complete the following information):

• Ubuntu 20.04
• Brave (Chrome)

Is your feature request related to a problem? Please describe.
wallet actions (such as add network) only target metamask but would work with other providers (such as coinbase wallet extension)

Describe the solution you'd like
let user choose from available providers if more than one

Describe any alternatives you've considered
check for metamask is an option first, if not, try to connect to another provider (if available)

Additional context
encountered when testing the 'add to Metamask' network dropdown option, the default behavior assumed metamask but if more than one provider is present, window.ethereum.providers contains the available options.

Describe the bug
It looks wonky with the downward offset top and the sharp corners but no background (when not hovering on a tab).
It's inconsistent with mobile view.

To Reproduce
Steps to reproduce the behavior:

1. Go to teloscan.io
2. select an account address
3. view top of tx table

Screenshots

possible suggestions

• make table slightly overlap the header like it does for Transaction Details on mobile (see screenshot below)
• add a background to the tabs (can still retain a hover style change)
• (or instead of adding background) add border radius to the top corners when not hovering on a tab
• (or instead of all the above) make it flush with header everywhere

Desktop (please complete the following information):

• Ubuntu 20.04
• Brave (Chrome)

Describe the bug
Searching for an incorrect transaction hash, does not produce an error message. Hash is changed in detail view, but the same data is present.

To Reproduce
1: Open any transaction.
2: Change one of the bits ie. a with b
3: Observe that the same data is present, whereas the TX hash is changed.
4: Searching for the invalid hash in a new query windoe or through the URL produce the correct behavior.

Expected behavior
Produce an error.

Screenshots
Alter a bit.

Desktop

• OS: OSX
• Browser:

Describe the bug
When searching in the top search bar the page is redirected to 404 page

To Reproduce
Steps to reproduce the behavior:

1. Go to teloscan.io & click into the search bar
2. type anything, then backspace to remove the value
3. Click 'Enter' & view 404 redirect

Expected behavior
Same behavior that you get when you click into the search bar and click 'Enter' without typing anything (error toast & remain on page).

Desktop (please complete the following information):

• Ubuntu 20.04
• Brave (Chrome)
• Version [e.g. 22]

Add copy address icon in the AddressField and in ConnectButton

blocked by #82 & #48

Overview

It would improve user experience if they could navigate to the /token route for a token contract using its display name. This functionality is a followup to #48, moving known token contracts to their own Token section of the search dropdown

Acceptance criteria

• behavior should be generally unmodified from #48
• names/aliases which match known token contracts should display in a new section, "Tokens" rather than under the "Contracts" or "Addresses" header of the search menu dropdown

Technical considerations

N/A

Tasks

A lot of the remaining alerts are related to the quasar version. Should be able to upgrade minor version and upgrade major version at a later date.

• upgrade @quasar/app from 2.3.1 to 2.4.0: https://github.com/quasarframework/quasar/releases/tag/%40quasar%2Fapp-v2.4.0

Overview

There would be many opportunities to improve user experience if there were a global system for monitoring the status of a transaction triggered by the UI

Acceptance criteria

• when the user stakes or claims unstaked s/tlos, a toast notification should be displayed saying what happened, eg. "Staked 1 TLOS for .3 sTLOS completed"
• functions invoked from the function interfaces in the contract tab, eg. here, should pop a toast when the transaction is completed

Technical considerations

A global api which is given a transaction hash and other data, it then polls for the transaction to be executed and renders a toast to the user, and calls a callback from the component.

Possibly this could be integrated into a centralized "sendTransaction" function.

Data to pass into it:

Name: "sTLOS staking"
Completion message: "Staked 1 TLOS for .3 sTLOS completed"
Callback: function from sTLOS page that would reload balances

• when transactions initiated by the UI are completed, a toast should be displayed to the user
• there should also be the ability to trigger a callback, or possibly a singleton pub/sub pattern, to allow components to react to the completion of a transaction
• this solution should gracefully handle multiple transactions, showing toasts in succession when multiple complete in overlapping timeframes

Tasks

Overview

Presently, only some types of parameters are handled for the Function Interface (accessible via the Contract tab of any /address page for a contract). Users attempting to interact with a contract method using args of type other than uint256 or uint256[x] (fixed-length uint256 array) can result in an error.

Acceptance criteria

• users should be able to enter solidity data of any type using FunctionInterface.vue
• each type of data should get its own input component, including
  • a tooltip should be present explaining the data type and how it should be entered
  • ability to validate data, eg. checking that an address is 20 bytes after parsing (42 chars including 0x)
  • feedback / error message when the user has entered malformed data
• there should be a demo route (eg. /demo/inputs) allowing one to use/test each kind of input

Technical considerations

Related to #102
Also related to #171, which will partially implement address array handling

Because every type must be parsed differently, there should be an input for each type of solidity data. Types resources:
https://docs.ethers.io/v5/single-page/#/v5/api/utils/abi/
https://blog.logrocket.com/ultimate-guide-data-types-solidity/

solidity data inputs will need to be designed as a part of this ticket. we should attempt to use quasar inputs with as few modifications as possible while still meeting the acceptance criteria

for array inputs, we should see if there is a better pattern for entering several items, though any solution must be compatible with the user copy & pasting a full value (rather than only allowing use to type each one by one, and pressing enter to add it to the array)

inputs don't necessarily need masking, just validation

Tasks

• enumerate all valid solidity types and their JS equivalent (e.g. uint256 -> BigNumber)
• determine which types can share an input component (e.g. uint128 and uint256 only vary in valid length) & stub out the expected input components
• determine best approach for complex types such as arrays and arbitrary objects
• determine shared functionality across all input components, e.g. error message, label, placeholder
• implement a BaseFunctionParameterInput with vmodel and above shared functionality
• implement specific inputs one by one
• add a demo route to allow components to be used in isolation, e.g. /test/inputs/
• update the FunctionInterface.vue component to use new inputs

Since many token contracts are not verified, give users a button/dropdown to use the ABI from ERC20/ERC721 so they can still interact with them.

We likely are already getting this via the hyperion API call, or we just need to add that call into the page load when contract == true. Just need to find a good place to show it on the page and have it be a link to the transaction/address.

Description
Wombat Logo is blurry

Reproduce
1: Click Connect
2: Select Native Wallet

Expected Behavior
Clear Logo of accepted Wallets

Environment Used
OS: OSX
Browser: Chrome

Describe the bug
Connecting Wallet switches network, but Mainnet Address is approved.
Looking up the address will result in an error as the address is not created on Testnet.

To Reproduce
1: Click Connect
2: Login to MetaMask
3: Select a Mainnet Address
4: Approve
5: Click on View Address

Expected Behaviour
Should not be able to connect an invalid address

Environment Used
OS: OSX
Browser: Chrome
Wallet: MetaMask extension for Chrome

On transaction table, indicate failed transactions somehow. On the transaction page possibly make it more obvious too.

Overview

Presently, addresses are sometimes displayed in all lower case. Addresses should always be displayed in checksum format

Acceptance criteria

1. going to /addresss/{address} should always redirect to the checksum address if it is a valid address
2. copying the address from an AddressField instance, such as the one on /address should always be formatted as a checksum
3. all addresses displayed on the /address route header should be formatted as checksum

Technical considerations

There may be other places address is present as all lower case. We should do a search for .toLowerCase and see if any places in the code are obviously doing this, and correct those as well

Tasks

Overview

Steps to reproduce

1. Go to https://teloscan.io
2. If you are logged in, log out
3. Click on Connect Wallet in the upper right corner

Current behavior

Modal pops open with the metamask logo and text overflowing

Expected behavior

Text should not overflow its container; it should be centered and legible

On the contract tab for verified contracts, allow running view (read) functions and if the user is logged in allow them to call the write functions.

Example:
https://testnet.teloscan.io/address/0xb13d91d5d76B75f3f66aA9B3dcB049Bf5bFAb97E/#contract > startLottery

input is treated as a string exactly as entered, thus entering [1, 2, 3, 4, 5] results in the string '[1, 2, 3, 4, 5]' being passed to BigNumber.from() which throws an exception and prevents function execution. The correct type for these args is BigNumber[]

These are misc. items which I believe are needed for Teloscan
Deliverable to be prioritized & categorized Issues - no code changes

Including but not limited to:

• ticket out all extant TODOs, replace TODO with ticket URL #134
• update linting rules #127
• standardize / unify file types
  • pug -> vue html #128
  • sass -> scss #129
  • vue sfc structure template > script > style #130
• defined text styles #131
• scss spacer variables to match quasar's system (eg. q-pa-md => $spacer-md) #135
• remove/replace quasar overrides (eg. .shadow-2 { box-shadow: none !important } from app.sass) #136
• consolidate app colors #132
• component styles cleanup #137
  • namespace selectors using BEM
  • remove/replace all inline styles
  • remove scoped styles, track down all overly-specific selectors which break after this is removed
• switch margin-tops with margin-bottoms (and padding-) on preceding elements where possible #126
• general directory structure & organization #138
• documentation #139
  • make docs directory
  • update repo first time setup
  • git / contribution workflow, deployment info incl. netlify preview
  • styling basics (refer to other points in this ticket)
  • unit testing
  • require JSdocs (eslint-plugin-jsdoc)
• github #140
  - issue naming & labeling & templates
  - PR template
  - pre-push hooks for lint & possibly build
  - assignees
• setup unit testing