From c199fd9b9a7ae5f2a9d3cc2abc1c104479eb2b93 Mon Sep 17 00:00:00 2001 From: Dmitry Usov Date: Mon, 17 Jun 2019 17:21:32 +0300 Subject: [PATCH] init (#35) * update block view in mobile * update models / add block extension view --- api.yaml | 26 +++++++ .../block-extension.component.tsx | 52 +++++++++++++ .../block-extension/block-extension.scss | 78 +++++++++++++++++++ .../block-header/block-header.component.tsx | 21 +++-- .../payment-request-modal.scss | 15 ++-- .../transaction-io-summary.component.tsx | 2 +- client/src/locales/en/translations.json | 8 +- client/src/locales/ru/translations.json | 8 +- client/src/models/generated/blockExtension.ts | 23 ++++++ .../generated/blockchainStatsBlockSummary.ts | 6 +- .../generated/blockchainStatsMiningCost.ts | 12 +-- .../blockchainStatsTransactionSummary.ts | 8 +- client/src/models/generated/fullBlock.ts | 4 +- .../src/models/generated/fullTransaction.ts | 3 +- client/src/models/generated/iOSummary.ts | 27 +++++++ client/src/models/generated/keyValueItem.ts | 15 ++++ client/src/models/generated/models.ts | 4 +- .../generated/transactionSummaryBlock.ts | 12 +-- client/src/pages/block/block.component.tsx | 8 ++ package.json | 1 - server/pages/block.page.tsx | 7 +- yarn.lock | 54 ------------- 22 files changed, 294 insertions(+), 100 deletions(-) create mode 100644 client/src/components/block/block-extension/block-extension.component.tsx create mode 100644 client/src/components/block/block-extension/block-extension.scss create mode 100755 client/src/models/generated/blockExtension.ts create mode 100644 client/src/models/generated/iOSummary.ts create mode 100755 client/src/models/generated/keyValueItem.ts diff --git a/api.yaml b/api.yaml index 9a3bc71c..ab67da29 100644 --- a/api.yaml +++ b/api.yaml @@ -722,6 +722,7 @@ components: - header - blockTransactions - adProofs + - extension properties: header: $ref: '#/components/schemas/BlockHeader' @@ -732,6 +733,8 @@ components: $ref: '#/components/schemas/Transaction' adProofs: $ref: '#/components/schemas/SerializedAdProof' + extension: + $ref: '#/components/schemas/BlockExtension' SearchBlock: description: Block for search results @@ -853,6 +856,29 @@ components: adProofsId: $ref: '#/components/schemas/ModifierId' + BlockExtension: + type: object + required: + - headerId + - digest + - fields + properties: + headerId: + $ref: '#/components/schemas/ModifierId' + digest: + $ref: '#/components/schemas/Digest32' + fields: + description: List of key-value records + type: array + nullable: true + items: + $ref: '#/components/schemas/KeyValueItem' + + KeyValueItem: + type: array + items: + $ref: '#/components/schemas/HexString' + PowSolutions: description: An object containing all components of pow solution type: object diff --git a/client/src/components/block/block-extension/block-extension.component.tsx b/client/src/components/block/block-extension/block-extension.component.tsx new file mode 100644 index 00000000..f3d0d419 --- /dev/null +++ b/client/src/components/block/block-extension/block-extension.component.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { BlockExtension } from '../../../models/generated/blockExtension'; + + +interface IBlockExtProps { + extension: BlockExtension; +} + +import './block-extension.scss'; + +export class BlockExtensionComponent extends React.Component { + render (): JSX.Element { + + return ( +
+
+
+
+ +
+ +
+ { this.props.extension.headerId } +
+
+
+
+ +
+ +
+ { this.props.extension.digest } +
+
+
+
+ +
+ +
+ {this.props.extension.fields.map((i) =>
+ {i[0]}: {i[1]} +
+ )} +
+
+
+
+ ); + } +} diff --git a/client/src/components/block/block-extension/block-extension.scss b/client/src/components/block/block-extension/block-extension.scss new file mode 100644 index 00000000..f29ee9e9 --- /dev/null +++ b/client/src/components/block/block-extension/block-extension.scss @@ -0,0 +1,78 @@ +@import '~styles/base/variables'; + +// #BLOCK EXTENSION +//------------------------------------- +$block-ext-bg-color: #ffffff; +$block-ext-row-hover-bg-color: #f8f8f8; +$block-ext-border-color: #eeeeee; +$block-table-title-color: $theme-primary-color; +$block-table-cell-color: $theme-primary-color; +$block-table-cell-border-color: $theme-color-blue; + +.bi-block-ext { + font-family: $theme-main-font; + + // [ Components ] + //-------------------------------------------------- + &__table { + width: 100%; + border: 1px solid $block-ext-border-color; + background-color: $block-ext-bg-color; + } + + &__row { + border-bottom: 1px solid $block-ext-border-color; + + &:hover { + background-color: $block-ext-row-hover-bg-color; + + .bi-block-ext__cell:first-child:after { + visibility: visible; + } + } + } + + &__cell { + position: relative; + padding: $grid-offset-step * 4; + border: 1px solid $block-ext-border-color; + border-right: 0; + border-left: 0; + color: $block-table-cell-color; + font-size: 15px; + + &:first-child:after { + visibility: hidden; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 2px; + background-color: $block-table-cell-border-color; + content: ''; + } + } + + &__interlink { + display: block; + } + + &__cell--header { + width: 200px; + font-size: 14px; + font-weight: 600; + } +} + +@media screen and (max-width: $mobile-device-width) { + .bi-block-ext { + &__cell { + padding: ($grid-offset-step * 2) ($grid-offset-step * 2); + border-bottom: 0; + } + + &__cell--header + &__cell { + border-top: 0; + } + } +} diff --git a/client/src/components/block/block-header/block-header.component.tsx b/client/src/components/block/block-header/block-header.component.tsx index deee403d..69b52410 100644 --- a/client/src/components/block/block-header/block-header.component.tsx +++ b/client/src/components/block/block-header/block-header.component.tsx @@ -23,18 +23,18 @@ export class BlockHeaderComponent extends React.Component { - + - +
#{ this.props.block.header.height }
- +
{ (this.props.references.previousId && this.props.block.header.height !== 0) ? @@ -43,7 +43,7 @@ export class BlockHeaderComponent extends React.Component { : null } - + { this.props.references.nextId ? { : null }
- +
{ to={ `/blocks/${this.props.block.header.id}` }> - + - + + + + + ; +} \ No newline at end of file diff --git a/client/src/models/generated/blockchainStatsBlockSummary.ts b/client/src/models/generated/blockchainStatsBlockSummary.ts index 48f23399..6c653a00 100755 --- a/client/src/models/generated/blockchainStatsBlockSummary.ts +++ b/client/src/models/generated/blockchainStatsBlockSummary.ts @@ -15,13 +15,13 @@ export interface BlockchainStatsBlockSummary { /** * Number of mined blocks */ - total: number; + total?: number; /** * Time between blocks in ms */ - averageMiningTime: number; + averageMiningTime?: number; /** * Total mined coins */ - totalCoins: number; + totalCoins?: number; } diff --git a/client/src/models/generated/blockchainStatsMiningCost.ts b/client/src/models/generated/blockchainStatsMiningCost.ts index c245e13d..20fff2b2 100755 --- a/client/src/models/generated/blockchainStatsMiningCost.ts +++ b/client/src/models/generated/blockchainStatsMiningCost.ts @@ -15,25 +15,25 @@ export interface BlockchainStatsMiningCost { /** * Total Miners Revenue */ - totalMinersRevenue: number; + totalMinersRevenue?: number; /** * Miners revenue as percentage of the transaction fees */ - percentEarnedTransactionsFees: number; + percentEarnedTransactionsFees?: number; /** * Miners revenue as percentage of the transaction volume */ - percentTransactionVolume: number; + percentTransactionVolume?: number; /** * Miners revenue divided by the number of transactions */ - costPerTransaction: number; + costPerTransaction?: number; /** * Difficulty */ - difficulty: number; + difficulty?: number; /** * Hash Rate */ - hashRate: number; + hashRate?: number; } diff --git a/client/src/models/generated/blockchainStatsTransactionSummary.ts b/client/src/models/generated/blockchainStatsTransactionSummary.ts index dba08673..f13e4476 100755 --- a/client/src/models/generated/blockchainStatsTransactionSummary.ts +++ b/client/src/models/generated/blockchainStatsTransactionSummary.ts @@ -15,17 +15,17 @@ export interface BlockchainStatsTransactionSummary { /** * Number of transactions */ - total: number; + total?: number; /** * Total Transaction Fees */ - totalFee: number; + totalFee?: number; /** * Total Output Volume */ - totalOutput: number; + totalOutput?: number; /** * Estimated Transaction Volume */ - estimatedTransactionVolume: number; + estimatedTransactionVolume?: number; } diff --git a/client/src/models/generated/fullBlock.ts b/client/src/models/generated/fullBlock.ts index b302cf43..8b71ab93 100755 --- a/client/src/models/generated/fullBlock.ts +++ b/client/src/models/generated/fullBlock.ts @@ -8,7 +8,8 @@ * NOTE: This class is auto generated by the swagger code generator program. * https://github.com/swagger-api/swagger-codegen.git * Do not edit the class manually. - */import { BlockHeader } from './blockHeader'; + */import { BlockExtension } from './blockExtension'; +import { BlockHeader } from './blockHeader'; import { SerializedAdProof } from './serializedAdProof'; import { Transaction } from './transaction'; @@ -23,4 +24,5 @@ export interface FullBlock { */ blockTransactions: Array; adProofs: SerializedAdProof; + extension: BlockExtension; } \ No newline at end of file diff --git a/client/src/models/generated/fullTransaction.ts b/client/src/models/generated/fullTransaction.ts index 216ffab8..e225ed3e 100755 --- a/client/src/models/generated/fullTransaction.ts +++ b/client/src/models/generated/fullTransaction.ts @@ -8,8 +8,7 @@ * NOTE: This class is auto generated by the swagger code generator program. * https://github.com/swagger-api/swagger-codegen.git * Do not edit the class manually. - */ -import { IOSummary } from './IOSummary'; + */import { IOSummary } from './iOSummary'; import { TransactionInput } from './transactionInput'; import { TransactionOutput } from './transactionOutput'; import { TransactionSummary } from './transactionSummary'; diff --git a/client/src/models/generated/iOSummary.ts b/client/src/models/generated/iOSummary.ts new file mode 100644 index 00000000..eb0a0342 --- /dev/null +++ b/client/src/models/generated/iOSummary.ts @@ -0,0 +1,27 @@ +/** + * Ergo blockchain explorer + * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen) + * + * OpenAPI spec version: 2.0.0 + * + * + * NOTE: This class is auto generated by the swagger code generator program. + * https://github.com/swagger-api/swagger-codegen.git + * Do not edit the class manually. + */ + + +export interface IOSummary { + /** + * Total Coins Transferred + */ + totalCoinsTransferred: number; + /** + * Total fee + */ + totalFee: number; + /** + * Fee per Byte + */ + feePerByte: number; +} diff --git a/client/src/models/generated/keyValueItem.ts b/client/src/models/generated/keyValueItem.ts new file mode 100755 index 00000000..a3937234 --- /dev/null +++ b/client/src/models/generated/keyValueItem.ts @@ -0,0 +1,15 @@ +/** + * Ergo blockchain explorer + * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen) + * + * OpenAPI spec version: 2.0.0 + * + * + * NOTE: This class is auto generated by the swagger code generator program. + * https://github.com/swagger-api/swagger-codegen.git + * Do not edit the class manually. + */import { HexString } from './hexString'; + + +export interface KeyValueItem extends Array { +} \ No newline at end of file diff --git a/client/src/models/generated/models.ts b/client/src/models/generated/models.ts index e1e7d6e1..a0cffbb4 100755 --- a/client/src/models/generated/models.ts +++ b/client/src/models/generated/models.ts @@ -1,6 +1,7 @@ export * from './aDDigest'; export * from './addressId'; export * from './asset'; +export * from './blockExtension'; export * from './blockHeader'; export * from './blockchainInfo'; export * from './blockchainStats'; @@ -15,7 +16,7 @@ export * from './fullAddressTransactions'; export * from './fullBlock'; export * from './fullTransaction'; export * from './hexString'; -export * from './IOSummary'; +export * from './iOSummary'; export * from './inlineResponse200'; export * from './inlineResponse2001'; export * from './inlineResponse20010'; @@ -28,6 +29,7 @@ export * from './inlineResponse2006'; export * from './inlineResponse2007'; export * from './inlineResponse2008'; export * from './inlineResponse2009'; +export * from './keyValueItem'; export * from './miner'; export * from './modifierId'; export * from './powSolutions'; diff --git a/client/src/models/generated/transactionSummaryBlock.ts b/client/src/models/generated/transactionSummaryBlock.ts index 6398196a..7ecf1760 100755 --- a/client/src/models/generated/transactionSummaryBlock.ts +++ b/client/src/models/generated/transactionSummaryBlock.ts @@ -3,7 +3,7 @@ * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen) * * OpenAPI spec version: 2.0.0 - * + * * * NOTE: This class is auto generated by the swagger code generator program. * https://github.com/swagger-api/swagger-codegen.git @@ -12,11 +12,11 @@ import { Timestamp } from './timestamp'; -export interface TransactionSummaryBlock { - timestamp: Timestamp; - headerId: ModifierId; +export interface TransactionSummaryBlock { + timestamp?: Timestamp; + headerId?: ModifierId; /** * Block height */ - height: number; -} + height?: number; +} \ No newline at end of file diff --git a/client/src/pages/block/block.component.tsx b/client/src/pages/block/block.component.tsx index 38385a8b..69123d2f 100644 --- a/client/src/pages/block/block.component.tsx +++ b/client/src/pages/block/block.component.tsx @@ -14,6 +14,7 @@ import { BlockActions } from '../../actions/block.actions'; import { BlockState } from '../../reducers/block.reducer'; import { BlockAdproofsComponent } from '../../components/block/block-adproofs/block-adproofs.component'; +import { BlockExtensionComponent } from '../../components/block/block-extension/block-extension.component'; import { BlockHeaderComponent } from '../../components/block/block-header/block-header.component'; import { BlockInfoComponent } from '../../components/block/block-info/block-info.component'; import { TransactionsComponent } from '../../components/transactions/transactions.component'; @@ -103,6 +104,13 @@ class Block extends React.Component { transactions={ this.props.block.blockTransactions }/>) }/> + ) + }/> + { }, type: GET_BLOCK_SUCCESS }); - + req.explorer.preloadedState = { ...req.explorer.preloadedState, block: { @@ -23,12 +23,12 @@ const render = (req: any, res: any, next: any) => { preloaded: true } }; - + next(); }) .catch(() => { req.explorer.hasError = true; - + next(); }); }; @@ -36,4 +36,5 @@ const render = (req: any, res: any, next: any) => { BlockPage.get('/:id', render); BlockPage.get('/:id/transactions', render); +BlockPage.get('/:id/extension', render); BlockPage.get('/:id/adproofs', render); diff --git a/yarn.lock b/yarn.lock index 8e200950..8d7fdcdc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1390,11 +1390,6 @@ airbnb-prop-types@^2.13.2: prop-types-exact "^1.2.0" react-is "^16.8.6" -ajv-errors@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d" - integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ== - ajv-keywords@^2.0.0: version "2.1.1" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762" @@ -6715,16 +6710,6 @@ min-document@^2.19.0: dependencies: dom-walk "^0.1.0" -mini-css-extract-plugin@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.6.0.tgz#a3f13372d6fcde912f3ee4cd039665704801e3b9" - integrity sha512-79q5P7YGI6rdnVyIAV4NXpBQJFWdkzJxCim3Kog4078fM0piAaFlwocqbejdWtLW1cEzCexPrh6EdyFsPgVdAw== - dependencies: - loader-utils "^1.1.0" - normalize-url "^2.0.1" - schema-utils "^1.0.0" - webpack-sources "^1.1.0" - minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -7165,15 +7150,6 @@ normalize-url@^1.4.0: query-string "^4.1.0" sort-keys "^1.0.0" -normalize-url@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6" - integrity sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw== - dependencies: - prepend-http "^2.0.0" - query-string "^5.0.1" - sort-keys "^2.0.0" - npm-bundled@^1.0.1: version "1.0.6" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd" @@ -8207,11 +8183,6 @@ prepend-http@^1.0.0, prepend-http@^1.0.1: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= -prepend-http@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" - integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= - preserve@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" @@ -8440,15 +8411,6 @@ query-string@^4.1.0, query-string@^4.3.2: object-assign "^4.1.0" strict-uri-encode "^1.0.0" -query-string@^5.0.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb" - integrity sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw== - dependencies: - decode-uri-component "^0.2.0" - object-assign "^4.1.0" - strict-uri-encode "^1.0.0" - query-string@^6.1.0: version "6.5.0" resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.5.0.tgz#2e1a70125af01f6f04573692d02c09302a1d8bfc" @@ -9382,15 +9344,6 @@ schema-utils@^0.4.5: ajv "^6.1.0" ajv-keywords "^3.1.0" -schema-utils@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" - integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g== - dependencies: - ajv "^6.1.0" - ajv-errors "^1.0.0" - ajv-keywords "^3.1.0" - scss-tokenizer@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1" @@ -9666,13 +9619,6 @@ sort-keys@^1.0.0: dependencies: is-plain-obj "^1.0.0" -sort-keys@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128" - integrity sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg= - dependencies: - is-plain-obj "^1.0.0" - source-list-map@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"