#82 | Token detail page v1 - WIP

[ezra-sg]

DNM while indexer work is WIP

TODO

• update pr testing notes
  • include disclaimer about holders chart

---

Addresses #82

This PR contains an initial implementation of the /token route, which allows users to view transactions and holders for a given token contract address.

At this time, result set is fixed at 1000 rows for both tx and holders, with client-side pagination to navigate that result set (using quasar's built-in table component + pagination).

Notes:

• added new directory src/pages/token for related files
• Vue instances now have access to this.$teloscanApi for uniform usage to this.$telosApi (which is an Axios instance) for endpoints hosted at TELOSCAN_API_ENDPOINT (https://api.teloscan.io/v1)

Testing notes:

Happy path:

• go to the WTLOS token page: http://localhost:8080/token/0xD102cE6A4dB07D247fcc28F366A623Df0938CA9E
  • you should be redirected to http://localhost:8080/token/0xD102cE6A4dB07D247fcc28F366A623Df0938CA9E#transfers
  • you should see a loading state, then,
  • you should see the WTLOS token icon (purple circle with white acorn shape) and the text Wrapped TLOS (WTLOS)
  • you should see working links to the creation tx, creator address, and link to Contract/Address page
  • you should see the Transfers table with 50 rows
• click the Contract info link in the header section
  • you should be taken to the WTLOS contract info (/address) page
  • you should see a link back to the token info page
• click transaction, to, and from addresses from any row(s)
  • you should be taken to the correct route, /tx/{id} for the transaction hash and /address/{id} for to/from
• click on the holders tab
  • route should now be http://localhost:8080/token/0xD102cE6A4dB07D247fcc28F366A623Df0938CA9E#holders
  • you should see the Holders table with 50 rows
• click on any link in the Address column
  • you should be taken to /address/{id}
  • the address page should not have a link back to the token page (assuming the clicked address is not a token contract)

Invalid token address / no data:

• go to http://localhost:8080/token/0x123
  • you should see a loading state, then,
  • you should see a placeholder icon (translucent purple circle with gray Telos EVM logo) and the text "Unknown token"
  • Transfers table should be empty
• click on Holders tab
  • table should be empty

Address formatting:

• go to a valid token contract address with non-checksum capitalization, eg. all lowercase, http://localhost:8080/token/0xd102ce6a4db07d247fcc28f366a623df0938ca9e
  • you should be redirected to /token/0xD102cE6A4dB07D247fcc28F366A623Df0938CA9E#transfers

[netlify]

✅ Deploy Preview for dev-mainnet-teloscan ready!

Name	Link
🔨 Latest commit	483dbbc
🔍 Latest deploy log	https://app.netlify.com/sites/dev-mainnet-teloscan/deploys/63ab5415c297e50008f3e0c4
😎 Deploy Preview	https://deploy-preview-87--dev-mainnet-teloscan.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for teloscan-stage ready!

Name	Link
🔨 Latest commit	483dbbc
🔍 Latest deploy log	https://app.netlify.com/sites/teloscan-stage/deploys/63ab5415d0e37e0008df1a76
😎 Deploy Preview	https://deploy-preview-87--teloscan-stage.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	483dbbc
Status:	✅  Deploy successful!
Preview URL:	https://bf67b2b6.teloscan.pages.dev
Branch Preview URL:	https://token-route.teloscan.pages.dev

View logs