Modularization/Layout/Blocks

web-ui/src/app/app-routing.module.ts

@@ -1,20 +1,17 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { HomeComponent } from './components/home/home.component';
-import { TransactionComponent } from './components/transaction/transaction.component';
-import { AddressDetailsComponent } from './components/address-details/address-details.component';
-import { BlockComponent } from './components/block/block.component';
-import { MasternodeDetailsComponent } from './components/masternode-details/masternode-details.component';
 import { TrezorConnectComponent } from './components/trezor-connect/trezor-connect.component';
+import { CalculatorComponent } from './components/calculator/calculator.component';
 
 const routes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'addresses/:address', component: AddressDetailsComponent },
-  { path: 'blocks/:query', component: BlockComponent },
-  { path: 'transactions/:txid', component: TransactionComponent },
-  { path: 'masternodes/:ip', component: MasternodeDetailsComponent },
+  { path: '', loadChildren: './components/home/home.module#HomeModule' },
+  { path: 'blocks', loadChildren: './components/blocks/blocks.module#BlocksModule' },
+  { path: 'transactions', loadChildren: './components/transactions/transactions.module#TransactionsModule' },
+  { path: 'nodes', loadChildren: './components/nodes/nodes.module#NodesModule' },
+  { path: 'addresses', loadChildren: './components/addresses/addresses.module#AddressesModule' },
   { path: 'trezor', component: TrezorConnectComponent },
+  { path: 'calculator', component: CalculatorComponent },
   { path: '**', redirectTo: '' }
 ];
 

web-ui/src/app/app.component.html

@@ -1,6 +1,8 @@
 <app-navbar></app-navbar>
-<div class="container-fluid">
-  <router-outlet></router-outlet>
+<div class="tab-container">
+  <div class="col-lg-10 col-lg-offset-1 col-md-12">
+    <router-outlet></router-outlet>
+  </div>
 </div>
 <ng-http-loader [filteredUrlPatterns]="['/blocks$']"></ng-http-loader>
-<app-footer></app-footer>
+<app-footer></app-footer>

web-ui/src/app/app.component.ts

@@ -73,14 +73,15 @@ export class AppComponent implements OnInit {
       'TPoS': 'Trustless Proof of Stake',
 
       // messages
-      'message.unavailable': 'Unavailable',
+      'message.unavailable': '-',
       'message.serverUnavailable': 'The server unavailable, please try again in a minute',
       'message.unknownErrors': 'Unknown error, please try again in a minute',
       'message.transactionNotFound': 'Transaction not found',
       'message.addressNotFound': 'Address not found',
       'message.blockNotFound': 'Block not found',
       'message.masternodeNotFound': 'Masternode not found',
       'message.loadingLatestBlocks': 'Loading latest blocks...',
+      'message.loadingTransactions': 'Loading transactions...',
       'message.loadingRichestAddresses': 'Loading richest addresses...',
       'message.transactionsNotAvailable': 'The transactions are not available, please try again in some minutes',
       'message.totalSupply': 'The total number of coins generated (excluding the burned coins)',
@@ -98,11 +99,11 @@ export class AppComponent implements OnInit {
       'action.verifyAddress': 'Show full address',
 
       // labels
-      'label.searchField': 'Transaction id, Blockhash, Block number, Address, IP address',
+      'label.searchField': 'Search by transaction ID, address, blockhash, block height, IP address',
       'label.transactionId': 'Transaction Id',
       'label.confirmations': 'Confirmations',
       'label.blockhash': 'Block Hash',
-      'label.blocktime': 'Block Time',
+      'label.blocktime': 'Time',
       'label.medianTime': 'Median Time',
       'label.noInput': 'No input',
       'label.coinbase': 'Coinbase',
@@ -120,13 +121,24 @@ export class AppComponent implements OnInit {
       'label.normalFee': 'Normal',
       'label.lowFee': 'Low',
       'label.satoshis': 'Satoshis',
+      'label.showMore': 'Show More',
+      'label.currentInflation': 'Current Inflation',
+      'label.masternodeROI': 'Masternode ROI',
+      'label.stakingROI': 'Staking ROI',
+      'label.coinsInMasternodes': 'Coins in Masternodes',
+      'label.tposNodes': 'TPoS Nodes',
+      'label.coinsStaking': 'Coins Staking',
+      'label.coinsTrustlesslyStaking': 'Coins Trustlessly Staking',
 
       'label.address': 'Address',
+      'label.addresses': 'Addresses',
+      'label.ip': 'IP',
       'label.balance': 'Balance',
       'label.available': 'Available',
       'label.received': 'Received',
       'label.spent': 'Spent',
       'label.transactionCount': 'Transactions',
+      'label.transactinoLabel': 'Transactions',
 
       'label.blockType': 'Block type',
       'label.next': 'Next',
@@ -138,21 +150,28 @@ export class AppComponent implements OnInit {
       'label.bits': 'Bits',
       'label.chainwork': 'Chainwork',
       'label.difficulty': 'Difficulty',
-      'label.transactions': 'Transactions',
+      'label.transactions': 'TXS',
       'label.rewards': 'Rewards',
       'label.coinstake': 'Coinstake',
       'label.masternode': 'Masternode',
       'label.amount': 'Amount',
       'label.blockReward': 'Block reward',
 
+      'label.txHash': 'TX Hash',
+      'label.type': 'Type',
+      'label.result': 'Result',
+      'label.time': 'Time',
+
       'label.tposContract': 'Contract',
       'label.owner': 'Owner',
       'label.merchant': 'Merchant',
       'label.total': 'Total',
       'label.summary': 'Summary',
       'label.block': 'Block',
       'label.transaction': 'Transaction',
-      'label.height': 'Block height',
+      'label.height': 'Height',
+      'label.inflation': 'Inflation',
+      'label.price': 'Price',
       'label.extractedBy': 'Extracted by',
       'label.latestBlocks': 'Latest 10 blocks',
       'label.totalSupply': 'Total supply',
@@ -165,12 +184,41 @@ export class AppComponent implements OnInit {
       'label.protocol': 'Protocol',
       'label.status': 'Status',
       'label.lastSeen': 'Last seen',
-      'label.payee': 'Payee',
-      'label.active': 'Active',
+      'label.payee': 'Payee Address',
+      'label.active': 'Active Since',
       'label.details': 'Details',
       'label.raw': 'Raw',
       'label.date': 'Date',
-      'label.more': 'More'
+      'label.more': 'More',
+      'label.enabled': 'Enabled',
+      'label.distributedAcross': 'Distributed Across',
+      'label.protocols': 'Protocols',
+
+      'label.isStakingCoinsTrustlessly': 'Is this address staking coins trustlessly?',
+      'label.contractState': 'Contract state',
+      'label.merchantAddress': 'Merchant address',
+      'label.merchantCommission': 'Merchant commission',
+      'label.contractTxid': 'Contract txid',
+
+      'label.yes': 'Yes',
+      'label.no': 'No',
+      'label.tposDetails': 'TPoS Details',
+
+      'label.calculator': 'Calculator',
+      'label.xsnAmountHold': 'Amount of XSN you hold',
+      'label.optimalSetup': 'Optimal setup',
+      'label.masternodeAnd': 'Masternode(s) and',
+      'label.xsnStaking': 'XSN staking',
+      'label.masternodeStakingRemaining': 'Masternode(s) + staking remaining',
+      'label.moreProfitable': 'is 33% more profitable',
+      'label.stakingAllCoins': 'Staking all coins',
+      'label.daily': 'Daily',
+      'label.monthly': 'Monthly',
+      'label.yearly': 'Yearly',
+      'label.days': 'days',
+      'label.waitingTimePerReward': 'Waiting time per reward (est.)',
+      'label.requiredForMasternode': 'Required for Masternode',
+      'label.rewardPerBlock': 'Reward per block'
     };
   }
 }

web-ui/src/app/app.module.ts

@@ -1,22 +1,15 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
-import { AlertModule, BsDropdownModule, CollapseModule, TooltipModule, ModalModule } from 'ngx-bootstrap';
+import { AlertModule } from 'ngx-bootstrap';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 import { TranslateModule } from '@ngx-translate/core';
 import { ToastrModule } from 'ngx-toastr';
+import { FormsModule } from '@angular/forms';
 
 import { NgHttpLoaderModule } from 'ng-http-loader';
-import { NgxPaginationModule } from 'ngx-pagination';
-
-import { MomentModule } from 'ngx-moment';
-
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AddressesService } from './services/addresses.service';
 import { BalancesService } from './services/balances.service';
@@ -31,71 +24,30 @@ import { TransactionsService } from './services/transactions.service';
 import { TrezorRepositoryService } from './services/trezor-repository.service';
 
 import { AppComponent } from './app.component';
-import { HomeComponent } from './components/home/home.component';
-import { FooterComponent } from './components/footer/footer.component';
-import { NavbarComponent } from './components/navbar/navbar.component';
-import { TransactionDetailsComponent } from './components/transaction-details/transaction-details.component';
-import { FinderComponent } from './components/finder/finder.component';
-import { AddressDetailsComponent } from './components/address-details/address-details.component';
-import { BlockDetailsComponent } from './components/block-details/block-details.component';
-import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
-import { TickerComponent } from './components/ticker/ticker.component';
-import { RichestAddressesComponent } from './components/richest-addresses/richest-addresses.component';
-import { MasternodesComponent } from './components/masternodes/masternodes.component';
-import { MasternodeDetailsComponent } from './components/masternode-details/masternode-details.component';
-import { TransactionRawComponent } from './components/transaction-raw/transaction-raw.component';
-import { TransactionComponent } from './components/transaction/transaction.component';
-import { BlockComponent } from './components/block/block.component';
-import { BlockRawComponent } from './components/block-raw/block-raw.component';
-import { ExplorerDatetimePipe } from './pipes/explorer-datetime.pipe';
-import { ExplorerCurrencyPipe } from './pipes/explorer-currency.pipe';
-import { ExplorerAmountPipe } from './pipes/explorer-amount.pipe';
 import { TrezorConnectComponent } from './components/trezor-connect/trezor-connect.component';
+import { SharedModule } from './components/shared/shared.module';
+import { PipesModule } from './pipes/pipes.module';
+import { TposnodesService } from './services/tposnodes.service';
+import { CalculatorComponent } from './components/calculator/calculator.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent,
-    FooterComponent,
-    NavbarComponent,
-    TransactionDetailsComponent,
-    FinderComponent,
-    AddressDetailsComponent,
-    BlockDetailsComponent,
-    LatestBlocksComponent,
-    TickerComponent,
-    RichestAddressesComponent,
-    MasternodesComponent,
-    MasternodeDetailsComponent,
-    TransactionRawComponent,
-    TransactionComponent,
-    BlockComponent,
-    BlockRawComponent,
-    ExplorerDatetimePipe,
-    ExplorerCurrencyPipe,
-    ExplorerAmountPipe,
-    TrezorConnectComponent
+    TrezorConnectComponent,
+    CalculatorComponent
   ],
   imports: [
     AppRoutingModule,
-    AlertModule.forRoot(),
-    BsDropdownModule.forRoot(),
-    CollapseModule.forRoot(),
-    TooltipModule.forRoot(),
-    ModalModule.forRoot(),
-    CommonModule,
+    FormsModule,
+    SharedModule,
+    PipesModule,
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
-    BrowserModule,
-    FormsModule,
-    ReactiveFormsModule,
     HttpClientModule,
     NgHttpLoaderModule,
     TranslateModule.forRoot(),
-    NgxPaginationModule,
     TabsModule.forRoot(),
-    MomentModule,
-    InfiniteScrollModule
+    AlertModule.forRoot()
   ],
   providers: [
     AddressesService,
@@ -104,6 +56,7 @@ import { TrezorConnectComponent } from './components/trezor-connect/trezor-conne
     ErrorService,
     LanguageService,
     MasternodesService,
+    TposnodesService,
     NavigatorService,
     NotificationService,
     TickerService,

web-ui/src/app/components/addresses/address-details/address-details.component.css

@@ -0,0 +1,5 @@
+.transaction-table-wrapper {
+    width: 100%;
+    padding: 0;
+    margin-top: 15px;
+}