From 091b1abae8bfac48019596e14a9afdc0f5965fb2 Mon Sep 17 00:00:00 2001 From: Viterbo Date: Wed, 21 Feb 2024 11:42:19 -0300 Subject: [PATCH 01/10] saving wip --- src/i18n/en-us/index.js | 24 +++ src/pages/Block.vue | 171 -------------------- src/pages/BlockPage.vue | 347 ++++++++++++++++++++++++++++++++++++++++ src/router/routes.js | 2 +- src/types/BlockData.ts | 18 +++ src/types/index.ts | 1 + 6 files changed, 391 insertions(+), 172 deletions(-) delete mode 100644 src/pages/Block.vue create mode 100644 src/pages/BlockPage.vue create mode 100644 src/types/BlockData.ts create mode 100644 src/types/index.ts diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js index 68ced2114..b02ccdf77 100644 --- a/src/i18n/en-us/index.js +++ b/src/i18n/en-us/index.js @@ -109,6 +109,30 @@ export default { unstake_stlos_error: 'Failed to unstake sTLOS { message }', withdraw_failed: 'Failed to withdraw unlocked TLOS: { message }', }, + blockpage: { + block: 'Block', + block_height: 'Block Height', + status: 'Status', + timestamp: 'Timestamp', + proposed_on: 'Proposed on', + transactions: 'Transactions', + withdrawals: 'Withdrawals', + fee_recipient: 'Fee Recipient', + block_reward: 'Block Reward', + total_difficulty: 'Total Difficulty', + size: 'Size', + gas_used: 'Gas Used', + gas_limit: 'Gas Limit', + base_fee_per_gas: 'Base Fee Per Gas', + burnt_fees: 'Burnt Fees', + extra_data: 'Extra Data', + hash: 'Hash', + parent_hash: 'Parent Hash', + state_root: 'State Root', + transactions_root: 'Transactions Root', + nonce: 'Nonce', + withdrawals_root: 'Withdrawals Root', + }, issuer: 'Issuer', account_not_found: 'We could not find this account', approvals: 'Approvals', diff --git a/src/pages/Block.vue b/src/pages/Block.vue deleted file mode 100644 index cfd02de29..000000000 --- a/src/pages/Block.vue +++ /dev/null @@ -1,171 +0,0 @@ - - - - diff --git a/src/pages/BlockPage.vue b/src/pages/BlockPage.vue new file mode 100644 index 000000000..5fc222854 --- /dev/null +++ b/src/pages/BlockPage.vue @@ -0,0 +1,347 @@ + + + + + + + + + + + diff --git a/src/router/routes.js b/src/router/routes.js index ee3234a79..351de2645 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -48,7 +48,7 @@ const routes = [ children: [{ path: '', name: 'block', - component: () => import('pages/Block.vue'), + component: () => import('pages/BlockPage.vue'), }], }, { diff --git a/src/types/BlockData.ts b/src/types/BlockData.ts new file mode 100644 index 000000000..755a3166d --- /dev/null +++ b/src/types/BlockData.ts @@ -0,0 +1,18 @@ +export interface BlockData { + extraData: string; + gasLimit: string; + gasUsed: string; + hash: string; + logsBloom: string; + miner: string; + mixHash: string; + nonce: string; + number: string; + parentHash: string; + sha3Uncles: string; + size: string; + stateRoot: string; + timestamp: number; + transactionsCount: number; + transactionsRoot: string; +} diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 000000000..9fd6d47cf --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1 @@ +export * from 'src/types/BlockData'; From a3fb60ca248ba7879a746323e2cb1db5afccc067 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= Date: Wed, 21 Feb 2024 17:44:09 -0300 Subject: [PATCH 02/10] adding BlockPage --- src/i18n/de-de/index.js | 22 +++ src/i18n/en-us/index.js | 22 ++- src/i18n/es-es/index.js | 22 +++ src/i18n/fr-fr/index.js | 22 +++ src/i18n/pt-br/index.js | 22 +++ src/pages/BlockPage.vue | 315 ++++++++++++++++++++++++---------------- 6 files changed, 284 insertions(+), 141 deletions(-) diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js index c7a33fdfa..4413e3a39 100644 --- a/src/i18n/de-de/index.js +++ b/src/i18n/de-de/index.js @@ -109,6 +109,28 @@ export default { unstake_stlos_error: 'sTLOS konnte nicht abgehoben werden: { message }', withdraw_failed: 'TLOS Position konnte nicht ausgezahlt werden: { message }', }, + blockpage: { + block: 'Block', + overview: 'Übersicht', + block_height: 'Blockhöhe', + timestamp: 'Zeitstempel', + transactions: 'Transaktionen', + size: 'Größe', + gas_used: 'Verbrauchtes Gas', + gas_limit: 'Gaslimit', + hash: 'Hash', + parent_hash: 'Eltern-Hash', + nonce: 'Nonce', + block_height_tooltip: 'Auch "Blocknummer" genannt. Die Blockhöhe repräsentiert die Länge der Blockchain, die um eins nach dem Hinzufügen eines neuen Blocks zunimmt', + timestamp_tooltip: 'Die Zeit und das Datum, zu dem der Block produziert wurde', + transactions_tooltip: 'Die Anzahl der Transaktionen im Block. Interne Transaktionen sind Transaktionen, die als Ergebnis der Vertragsausführung auftreten und einen TLOS-Wert beinhalten', + size_tooltip: 'die Menge an Daten im Block, bestimmt durch das Gaslimit', + gas_used_tooltip: 'Die Menge an im Block verwendeten Gas', + gas_limit_tooltip: 'Das Gaslimit für alle Transaktionen im Block', + nonce_tooltip: 'Der Wert, der beim Mining verwendet wird, um einen Konsens über den Proof of Work für den Block zu erreichen', + hash_tooltip: 'Der Hash des Blockheaders', + parent_hash_tooltip: 'Der Hash des Elternblock', + }, issuer: 'Issuer', account_not_found: 'Wir konnten dieses Konto nicht finden', approvals: 'Approvals', diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js index b02ccdf77..edd5fdef2 100644 --- a/src/i18n/en-us/index.js +++ b/src/i18n/en-us/index.js @@ -111,27 +111,25 @@ export default { }, blockpage: { block: 'Block', + overview: 'Overview', block_height: 'Block Height', - status: 'Status', timestamp: 'Timestamp', - proposed_on: 'Proposed on', transactions: 'Transactions', - withdrawals: 'Withdrawals', - fee_recipient: 'Fee Recipient', - block_reward: 'Block Reward', - total_difficulty: 'Total Difficulty', size: 'Size', gas_used: 'Gas Used', gas_limit: 'Gas Limit', - base_fee_per_gas: 'Base Fee Per Gas', - burnt_fees: 'Burnt Fees', - extra_data: 'Extra Data', hash: 'Hash', parent_hash: 'Parent Hash', - state_root: 'State Root', - transactions_root: 'Transactions Root', nonce: 'Nonce', - withdrawals_root: 'Withdrawals Root', + block_height_tooltip: 'Also called "Block Number". The block height represents the length of of the blockchain, increasing by one after the addition of a new block', + timestamp_tooltip: 'The time and date the block was produced', + transactions_tooltip: 'The number of transactions in the block. Internal Transactions are transactions which occur as a result of contract execution and include a TLOS value', + size_tooltip: 'the amount of data in the block, determined by the gas limit', + gas_used_tooltip: 'The amount of gas used in the block', + gas_limit_tooltip: 'The gas limit for all transactions in the block', + nonce_tooltip: 'The value used during mining to achieve consensus on Proof of Work for the block', + hash_tooltip: 'The hash of the block header', + parent_hash_tooltip: 'The hash of the parent block', }, issuer: 'Issuer', account_not_found: 'We could not find this account', diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js index 09e02df7b..476fde40b 100644 --- a/src/i18n/es-es/index.js +++ b/src/i18n/es-es/index.js @@ -109,6 +109,28 @@ export default { unstake_stlos_error: 'Error al desbloquear sTLOS { message }', withdraw_failed: 'Error al retirar TLOS desbloqueado: { message }', }, + blockpage: { + block: 'Bloque', + overview: 'Visión General', + block_height: 'Altura del Bloque', + timestamp: 'Marca de Tiempo', + transactions: 'Transacciones', + size: 'Tamaño', + gas_used: 'Gas Utilizado', + gas_limit: 'Límite de Gas', + hash: 'Hash', + parent_hash: 'Hash Padre', + nonce: 'Nonce', + block_height_tooltip: 'También llamado "Número de Bloque". La altura del bloque representa la longitud de la blockchain, incrementando en uno después de la adición de un nuevo bloque', + timestamp_tooltip: 'El momento y fecha en que el bloque fue producido', + transactions_tooltip: 'El número de transacciones en el bloque. Las transacciones internas son transacciones que ocurren como resultado de la ejecución de un contrato e incluyen un valor TLOS', + size_tooltip: 'la cantidad de datos en el bloque, determinada por el límite de gas', + gas_used_tooltip: 'La cantidad de gas utilizado en el bloque', + gas_limit_tooltip: 'El límite de gas para todas las transacciones en el bloque', + nonce_tooltip: 'El valor utilizado durante la minería para lograr un consenso sobre la Prueba de Trabajo para el bloque', + hash_tooltip: 'El hash del encabezado del bloque', + parent_hash_tooltip: 'El hash del bloque anterior', + }, issuer: 'Issuer', account_not_found: 'No pudimos encontrar esta cuenta', approvals: 'Aprobaciones', diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js index 7d2967a5d..e6c70ab75 100644 --- a/src/i18n/fr-fr/index.js +++ b/src/i18n/fr-fr/index.js @@ -109,6 +109,28 @@ export default { unstake_stlos_error: 'Échec lors de l\'unstake de sTLOS { message }', withdraw_failed: 'Échec du retrait des TLOS déverrouillés: { message }', }, + blockpage: { + block: 'Bloc', + overview: 'Vue d\'ensemble', + block_height: 'Hauteur du bloc', + timestamp: 'Horodatage', + transactions: 'Transactions', + size: 'Taille', + gas_used: 'Gaz utilisé', + gas_limit: 'Limite de gaz', + hash: 'Hachage', + parent_hash: 'Hachage parent', + nonce: 'Nonce', + block_height_tooltip: 'Aussi appelé "Numéro de bloc". La hauteur du bloc représente la longueur de la chaîne de blocs, augmentant de un après l\'ajout d\'un nouveau bloc', + timestamp_tooltip: 'Le moment et la date de production du bloc', + transactions_tooltip: 'Le nombre de transactions dans le bloc. Les transactions internes sont des transactions qui se produisent à la suite de l\'exécution d\'un contrat et incluent une valeur TLOS', + size_tooltip: 'la quantité de données dans le bloc, déterminée par la limite de gaz', + gas_used_tooltip: 'La quantité de gaz utilisée dans le bloc', + gas_limit_tooltip: 'La limite de gaz pour toutes les transactions dans le bloc', + nonce_tooltip: 'La valeur utilisée lors du minage pour atteindre un consensus sur la Preuve de Travail pour le bloc', + hash_tooltip: 'Le hachage de l\'en-tête du bloc', + parent_hash_tooltip: 'Le hachage du bloc parent', + }, issuer: 'Émetteur', account_not_found: 'Nous n\'avons pas pu trouver ce compte', approvals: 'Permissions', diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js index c0159f8f6..d2afda789 100644 --- a/src/i18n/pt-br/index.js +++ b/src/i18n/pt-br/index.js @@ -109,6 +109,28 @@ export default { unstake_stlos_error: 'Falha ao desaplicar sTLOS { message }', withdraw_failed: 'Falha ao retirar TLOS desbloqueado: { message }', }, + blockpage: { + block: 'Bloco', + overview: 'Visão Geral', + block_height: 'Altura do Bloco', + timestamp: 'Timestamp', + transactions: 'Transações', + size: 'Tamanho', + gas_used: 'Gás Usado', + gas_limit: 'Limite de Gás', + hash: 'Hash', + parent_hash: 'Hash Pai', + nonce: 'Nonce', + block_height_tooltip: 'Também chamado de "Número do Bloco". A altura do bloco representa o comprimento da blockchain, aumentando um após a adição de um novo bloco', + timestamp_tooltip: 'O momento e data em que o bloco foi produzido', + transactions_tooltip: 'O número de transações no bloco. Transações Internas são transações que ocorrem como resultado da execução de contrato e incluem um valor TLOS', + size_tooltip: 'a quantidade de dados no bloco, determinada pelo limite de gás', + gas_used_tooltip: 'A quantidade de gás usada no bloco', + gas_limit_tooltip: 'O limite de gás para todas as transações no bloco', + nonce_tooltip: 'O valor usado durante a mineração para alcançar consenso sobre a Prova de Trabalho para o bloco', + hash_tooltip: 'O hash do cabeçalho do bloco', + parent_hash_tooltip: 'O hash do bloco pai', + }, issuer: 'Issuer', account_not_found: 'Não conseguimos encontrar esse conta', approvals: 'Approvals', diff --git a/src/pages/BlockPage.vue b/src/pages/BlockPage.vue index b6ca79fb2..5d895c7c8 100644 --- a/src/pages/BlockPage.vue +++ b/src/pages/BlockPage.vue @@ -8,30 +8,34 @@ import { defineComponent } from 'vue'; import DateField from 'components/DateField.vue'; +import TransactionTable from 'components/TransactionTable.vue'; import { BlockData } from 'src/types'; import { ethers } from 'ethers'; +const defaultTab = 'overview'; +const tabs = ['overview', 'transactions']; export default defineComponent({ name: 'BlockPage', - components: { DateField }, + components: { + DateField, + TransactionTable, + }, data: () => ({ - tab: 'overview', + tab: '', block: '', blockData: null as BlockData | null, error: '', showDateAge: false, }), async mounted() { + this.checkTabFromUrl(); await this.loadBlock(); }, computed: { blockHeight() { return parseInt(this.block); }, - status() { - return 'finalized'; - }, timestamp() { if (this.blockData) { return this.blockData.timestamp; @@ -44,31 +48,39 @@ export default defineComponent({ } return 0; }, - Withdrawals() { - if (this.blockData) { - return this.blockData.transactionsCount; - } + internalTrxCount() { return 0; }, size() { if (this.blockData) { - //const size = ethers.utils.formatUnits(this.blockData.size, 'wei'); const size = ethers.BigNumber.from(this.blockData.size).toNumber(); - return `${size} bytes`; + return `${size.toLocaleString()} bytes`; } return 0; }, gasUsed() { if (this.blockData) { console.log('this.blockData.gasUsed', typeof this.blockData.gasUsed, this.blockData.gasUsed); - return parseInt(this.blockData.gasUsed, 16); + const gas = ethers.BigNumber.from(this.blockData.gasUsed); + try { + return gas.toNumber().toLocaleString(); + } catch (e) { + console.error(e); + return gas.toString(); + } } return 0; }, gasLimit() { if (this.blockData) { console.log('this.blockData.gasLimit', typeof this.blockData.gasLimit, this.blockData.gasLimit); - return parseInt(this.blockData.gasLimit, 16); + const gas = ethers.BigNumber.from(this.blockData.gasLimit); + try { + return gas.toNumber().toLocaleString(); + } catch (e) { + console.error(e); + return gas.toString(); + } } return 0; }, @@ -90,18 +102,6 @@ export default defineComponent({ } return ''; }, - stateRoot() { - if (this.blockData) { - return this.blockData.stateRoot; - } - return ''; - }, - transactionsRoot() { - if (this.blockData) { - return this.blockData.transactionsRoot; - } - return ''; - }, }, watch: { '$route.params.block': { @@ -114,8 +114,22 @@ export default defineComponent({ }, immediate: true, }, + '$route.query.tab'(newTab) { + this.tab = newTab || defaultTab; + }, + tab(newTab) { + this.$router.push({ query: { tab: newTab } }); + }, }, methods: { + checkTabFromUrl() { + const tabQueryParam = this.$route.query.tab as string; + if (tabQueryParam && tabs.includes(tabQueryParam)) { + this.tab = tabQueryParam; + } else { + this.tab = defaultTab; + } + }, async loadBlock() { try { const blockResponse = await this.$indexerApi.get(`/block/${this.block}?includeAbi=true`); @@ -143,136 +157,155 @@ export default defineComponent({ + diff --git a/src/pages/BlockPage.vue b/src/pages/BlockPage.vue index a2b3ea07c..e5c649533 100644 --- a/src/pages/BlockPage.vue +++ b/src/pages/BlockPage.vue @@ -1,161 +1,123 @@ - - - - - - - +