#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	8b70a0d
🔍 Latest deploy log	https://app.netlify.com/sites/testnet-teloscan/deploys/6629b364fb572f000867ae3a
😎 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.

The base branch was changed.

[donnyquixotic]

Default output is 100 records

[Viterbo]

Options

Option 1

Option 2

Option 3

[netlify]

✅ Deploy Preview for dev-mainnet-teloscan ready!

Name	Link
🔨 Latest commit	8b70a0d
🔍 Latest deploy log	https://app.netlify.com/sites/dev-mainnet-teloscan/deploys/6629b36482f3ac0008e8a046
😎 Deploy Preview	https://deploy-preview-517--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 configuration.

[netlify]

✅ Deploy Preview for teloscan-stage ready!

Name	Link
🔨 Latest commit	8b70a0d
🔍 Latest deploy log	https://app.netlify.com/sites/teloscan-stage/deploys/6629b364fb572f000867ae3e
😎 Deploy Preview	https://deploy-preview-517--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 configuration.

[Viterbo]

@tomtomcrypto

I added the new export API and it works really fast!!! 🔥 🔥

However, I cannot request a range by timestamp, time, or date. I always get a code 500.
Can you check if I am doing something wrong here?
https://api.testnet.teloscan.io/export/0xa30b5e3c8Fee56C135Aecb733cd708cC31A5657a/transactions/csv?captcha=10000000-aaaa-bbbb-cccc-000000000001&limit=10000&startTimestamp=1709262000000&endTimestamp=1709348400000

[tomtomcrypto]

@tomtomcrypto

I added the new export API and it works really fast!!! 🔥 🔥

However, I cannot request a range by timestamp, time, or date. I always get a code 500. Can you check if I am doing something wrong here? https://api.testnet.teloscan.io/export/0xa30b5e3c8Fee56C135Aecb733cd708cC31A5657a/transactions/csv?captcha=10000000-aaaa-bbbb-cccc-000000000001&limit=10000&startTimestamp=1709262000000&endTimestamp=1709348400000

Looking into it

[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,.