#380 | CSV Export

[ezra-sg]

TODO discuss adding CSV export endpoint / hcaptcha validation endpoint

Fixes #380

Description

This PR adds the ability to export transactions and token transfers as CSV

Test scenarios

• run this branch locally: run git fetch --all && git checkout 380-csv-export && yarn install && yarn dev
• go to http://localhost:8080
• open the 'Advanced' menu on the home page
  • you should see a new Export Data option
• click Export Data
  • you should be taken to the new export page
• go to any account page, e.g. http://localhost:8080/address/0x160505F3dfD1cb58B91e322c828Ae0F74c043c3C
• scroll to the bottom
  • you should see a 'Download CSV' link
• click the download link
  • you should be taken to the new export page with the address pre-filled and the 'transactions' option selected
• go to an erc-20 transfers page, e.g. http://localhost:8080/address/0x160505F3dfD1cb58B91e322c828Ae0F74c043c3C#erc20_transfers
• scroll to the bottom
  • you should see a 'Download CSV' link
• click the download link
  • you should be taken to the new export page with the address pre-filled and the 'ERC-20 Transfers' option selected
• go to an erc-721 transfers page, e.g. http://localhost:8080/address/0x160505F3dfD1cb58B91e322c828Ae0F74c043c3C#erc721_transfers
• scroll to the bottom
  • you should see a 'Download CSV' link
• click the download link
  • you should be taken to the new export page with the address pre-filled and the 'ERC-721 Transfers' option selected
• go to an erc-1155 transfers page, e.g. http://localhost:8080/address/0x160505F3dfD1cb58B91e322c828Ae0F74c043c3C#erc1155_transfers
• scroll to the bottom
  • you should see a 'Download CSV' link
• click the download link
  • you should be taken to the new export page with the address pre-filled and the 'ERC-1155 Transfers' option selected
• set Export Type to Transactions
• enter a date range
  • the Download button should still be disabled
• complete the captcha
  • the Download button should be enabled
• click the Reset button
  • form fields should clear
• re-enter an address and date range
• click Download
  • the download button should enter a loading state
  • the data should download
  • the file name should make sense
  • the rows should be correct (make sure to check the details of a couple transactions against teloscan)
  • after the data downloads, the button should no longer be in a loading state and a notification should pop
• open the downloaded file in a program which can view CSV data like google sheets, or in VSCode using the extension Rainbow CSV
  • the file should be correctly formatted
• go back to the download page
• switch export type to ERC-20 Transfers
• click Download
  • the download button should enter a loading state
  • the data should download
  • the file name should make sense
  • the rows should be correct (make sure to check the details of a couple transactions against teloscan)
  • after the data downloads, the button should no longer be in a loading state and a notification should pop
• verify the downloaded file is formatted correctly
• repeat the last 3 steps for ERC-721 and ERC-1155 transfers
• change the download option to Block Range
• enter a block range (if using the account above, 0x...3c3c, select Transactions and then you can enter start block 320792430 to end block 320792434 to get one tx)
  • you should see the proper number of transactions for the block range
• using the selector in the Advanced menu, change the language to each language listed
  • the page should be fully localized

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have cleaned up the code in the areas my change touches
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings
• I have removed any unnecessary console messages
• I have included all english text to the translation file and/or created a new issue with the required translations for the currently supported languages
• I have tested for mobile functionality and responsiveness
• I have added appropriate test coverage

[Viterbo]

Excellent work!
Just a few minor changes, all related to the word "deposit" being translated into Latin-rooted languages.

[netlify]

✅ Deploy Preview for testnet-teloscan ready!

Name	Link
🔨 Latest commit	82102de
🔍 Latest deploy log	https://app.netlify.com/sites/testnet-teloscan/deploys/669ad371c4ff760008192012
😎 Deploy Preview	https://deploy-preview-517--testnet-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 configuration.

[pmjanus]

I have a couple of changes I'd like to make to the export functionality:

Please adjust the width of the input boxes for selecting the export type (Transactions, Internal Transactions, Token Transfers, etc.). They currently appear too wide, and I'd like them to be narrower to take up less horizontal space.
Regarding the calendar control for selecting the date range, I'd like to change it from a single control that allows selecting a range to two separate controls. Please replace the current range selector with two individual calendar controls:

One calendar control should be used for selecting the start date
The other calendar control should be used for selecting the end date

This will allow users to choose the start and end dates independently,.

[pmjanus]

We are missing the CSV Export option on the More section of the Navbar. (not on Advanced as it says on the PR).

[rozzaswap]

@Viterbo Block number filtering doesn't seem to be working properly for me. I filtered from block 277737852 to 297737852

After downloading the csv, blocks are shown from block 218418469 to 289651935

[rozzaswap]

@Viterbo the block filter fix has been deployed.

[rozzaswap]

@Viterbo currently investigating why date filtering now not working:

[pmjanus]

Getting an error on this:

URL: https://deploy-preview-517--dev-mainnet-teloscan.netlify.app/export?type=erc20Transfers&account=0x5a35282125647253afd8af1a43bcde757bc10b3b

{
"message": "Request failed.",
"url": "http://api.teloscan.io/export/0x5a35282125647253afd8af1a43bcde757bc10b3b/transfers?captcha=P1_eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.hadwYXNza2V5xQVmwoDpB_cNWU2J9d8aCnd053Mzoq-shmapvrzsYItVetHEO9kPx6pxHGa5VgBlz-yKyDq26uAEAnWXjP2wB9wA4fWzNpimJb6piNCIrXff-XEmlGluaJwhU7P75VOaFFKTbLwaLaPY-zNFyHmmA7nuo-NEMMYL9FmZb6KU7tyV160Yiux4npXb-rXYqUEjuY0Ltmxp1UrQ4VuzxSHjTFvn7gFDyzPpYEjEtMDaYc2Z8fKDfjfk-Ihix1Zgq5Gw-5Q1abMY1bezPZqVtIpeJ-oa_rvkBabMQyY6-muKJHfRGtYVpD3Yx8XuYLebYO3uwqwkiFoFE6uF8DZw98C49RZImjxuIvO0QtWZuxc6m6XNro6bX8gHbpKloOZhn9IWhaTavfQ_QyZ9D5nm40C50Ff7f-6CH7J_KrOk3nkpWFZoKsu2qNUUc7CmJvL1saJumWug69pmy9xJIg9sQGlciAqdZp5uq8JiApcywnQVWC2RIYF4oPOi1pk_Kd2q4_EZ-BgiTfvnsWVDnfpxq9DlULX5_4t8u8ty-E_9wyeJKJjVL_2676JGNCIl8xC7FEZSCw2X44oiI32ShV9RyFm5LnzOECO6AXR70fSXV0FcHTRtFwa1ROi6v5ZEkKAzgpeRYqHSNTnAtEv3qikvgv4ZLkaEPUhxQIcUlkADbICVQS2wjHqgWtxd1nLqHyCYfinJoJrmsOcdYhHr5VF8cTT-QNG-Nl4VphyBW7qdKSIV-mcNE-92xgHIoQSzzWA7m9dHqQLNjCY8KuNYKNidEb4YzXz1D361RaLp34csnFJuwR6ScmyaODFpVz28Phpv6ttrXY226BMwNaSYOioy1oksLN3oIOSiyKzWZOgM3CmkoKr1UbGLeuXImvWiFMDjnCBMZC4MRQtlY1S3VmUY5TqdLWvzexc3YjTxs678avUR4m4iQVu11SHhyJRZwjwLcPXgHUok_b1w9SSkkZElXX_--nAijLg7lLFnPaYqsANRLK3x16b8KtucpT241408BRLnbcBcmVtswhsXa9mG4d-c9dud6e4zRuXU74iP6qTbtSlF3xp6EfbD6qhAcfvu17kRzdrpf9svnZ5RmawCotbt09e4OZyRhOElg4MVZefxESstwmsHHJun-3o-Cp1OYyqTjXiiiTaccXQBTcm243MtYVCuIMmKZK-Wizpvwl_WTyC_lete3WtU8Ld3iSvjQayGsS_ciksMuHSvVs6QL-EdIjhQw92L4-2-uf4P_bvoNFYttSLyRs8DhI-XM0GZwZdbgdr8FL0fkRamUDYRs-kVnFPZLlucDVUdLSHIt1H0Z6ur38aUKM0rubZHF0aZalwp4H-77Pv6t-6cKJ7LRMMFMSNheeDFOgrhEEdiQqpJTFtnj1AwMRcWMY-JXLxDpbJecu7XRVobB4eha2gqqqlOWOXfU011HkKYXW1Bsmr7hZNdovfehEokryV9_N89b553Y-WK4mBKGoj1f9GWPZRKhB2aeQLskVTJccsYVwFi8g9pmr3EMAWGR6GEA4ZY1S0LzPtnBzBuZ9tVfXh24tSURyHWSEYjRyDFiNqSf99XbYa8anlb24DU8pLVcxBgispLYlhX2yr8MdYUSvqS2viweiOW0_vuZEjPhcMw09AiXLGwBi5YUnH58u3E-qaz0UGSxp1jzG6F0NIl2ELNKbvDCv7R2f0QG42I4GXFmuwg_vUpLeHoQB7FQk0b1nRKzfW7KDEBe5dZD8erS89vy4n2wv3f1H_fVqGrh6Q3lAYEsw9o-sluIzzXv9xlTlvU47_y6oYRJsioU59YZuLy0tE1YatAcaqm1EFQcqozMTleASWf7nEsR48TbJyjZXhwzmZ4SSGoc2hhcmRfaWTOMa1MgaJrcqgxYzYxMzgwOKJwZAA.JWWJA2VCT7yvwiQOODoheLRn9BSIKLvrMIflj3Q1hMs&limit=10000&types=erc20&startTimestamp=1687233600000&endTimestamp=1688097600000&startDate=1687233600000&endDate=1688097600000&startTime=1687233600000&endTime=1688097600000",
"status": "500"
}

[rozzaswap]

Waiting for @tomtomcrypto to take a look at https://github.com/telosnetwork/teloscan-indexer/issues/255

[Viterbo]

Tested with ERC transactions and date range. Ready for final test and merge

[pmjanus]

There are issues with date and block validations:
Dates:
You can set an end date that is previous to the start date.

Nitpick since who would input negative block - Blocks:
You can set negative blocks, Download CSV button is disabled but theres no indication that the block field is the issue.