New tab for show internal transactions history for a given address

[Viterbo]

Fixes #226

Description

This PR adds a new tab on the account page to show the same transaction pagination but focused on showing the internal transactions for each parent transaction.

As default behavior, the internal transactions data is visible for all transactions but the user can close and reopen the section for each transaction individually using a switcher on the right of the transaction header.

Test scenarios

• Normal navigation
  • Go to this address account page
  • Press the Internal Transactions Tab
  • You should see the first page of transactions (currently all of them have zero int-trxs)
  • change the page until you see a transaction with some internal transactions
  • close ad reopen the content section of any transaction (using the switcher on the right of the header)
• Pagination by url: access directly
  • Go directly to the second page with 20 rows per page
  • You should be on the second page and see 20 rows
• Pagination by url: back button
  • Go to the internal transaction tab
  • Navigate to several pages forward
  • Then navigate away from the current table
  • press the back button from your browser
  • You should see the last pagination in the internal transaction tab

Screenshots

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

[netlify]

✅ Deploy Preview for teloscan-stage ready!

Name	Link
🔨 Latest commit	8a4b877
🔍 Latest deploy log	https://app.netlify.com/sites/teloscan-stage/deploys/63de9765f8fc570008426e17
😎 Deploy Preview	https://deploy-preview-346--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.

[netlify]

✅ Deploy Preview for dev-mainnet-teloscan ready!

Name	Link
🔨 Latest commit	8a4b877
🔍 Latest deploy log	https://app.netlify.com/sites/dev-mainnet-teloscan/deploys/63de97652ecd8c0008d848a0
😎 Deploy Preview	https://deploy-preview-346--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.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	8a4b877
Status:	✅  Deploy successful!
Preview URL:	https://9a6aa3f7.teloscan.pages.dev
Branch Preview URL:	https://226-implement-the-same-inter.teloscan.pages.dev

View logs

[ezra-sg]

looks really good overall, nice work! i think this seems to accomplish the goal of the ticket. lets see if @tomtomcrypto agrees as he made the original ticket.

the only issue i found is that if you go a few pages in the table, then navigate to somewhere else like the Health page, if you try to navigate back in history it goes to a URL like https://deploy-preview-346--dev-mainnet-teloscan.netlify.app/?page=2&pagesize=10 (which is the home page with pagination). I think the issue might be at line 138 in the new component because it uses pushState instead of replaceState.

[Viterbo]

@EJSG, thanks for that review! That bug you found was the last drop I needed to push myself to find a better solution. Fortunately, I did.

I changed the strategy from a homemade solution using history.pushState to a more easy and elegant solution using $router (which is intended for these cases).

    async onPaginationChange(props) {
        const { page, rowsPerPage } = props.pagination;
        this.$router.push({
            hash: window.location.hash,
            query: {
                ...this.$route.query,
                page: `${page},${rowsPerPage}`,
            },
        });
    },

watch: {
    '$route.query.page': {
        handler(_pag) {
            let pag = _pag;
            let page = 1;
            let size = this.pagination.rowsPerPage;

            // we also allow to pass a single number as the page number
            if (typeof pag === 'number') {
                page = pag;
            } else if (typeof pag === 'string') {
                // we also allow to pass a string of two numbers: [page, rowsPerPage]
                const [p, s] = pag.split(',');
                page = p;
                size = s;
            }

            this.setPagination(page, size);
        },
        immediate: true,
    },
},

I'm going to create a new issue to implement this same solution on the TransactionTable

[ezra-sg]

awesome 🚀

[ezra-sg]

sorry haha, found one issue, see my comment here
#351 (review)

[ezra-sg]

👏