ui/{Block, Transactions, TransactionTabs}: include clpTxs, pegTxs

imports/ui/blocks/Block.jsx

@@ -20,19 +20,25 @@ export default class Block extends Component{
             distributionTxs: {},
             governanceTxs: {},
             slashingTxs: {},
+            clpTxs: {},
+            pegTxs: {},
+
         };
     }
 
     componentDidUpdate(prevProps){
         if (this.props != prevProps){
             if (this.props.transactionsExist){
-                // console.log("have txs.");
+                // console.log("have txs.", this.props);
                 this.setState({
                     transferTxs: this.props.transferTxs,
                     stakingTxs: this.props.stakingTxs,
                     distributionTxs: this.props.distributionTxs,
                     governanceTxs: this.props.governanceTxs,
-                    slashingTxs: this.props.slashingTxs
+                    slashingTxs: this.props.slashingTxs,
+                    clpTxs: this.props.clpTxs,
+                    pegTxs: this.props.pegTxs
+
                 })
             }
         }
@@ -79,6 +85,8 @@ export default class Block extends Component{
                         distributionTxs={this.state.distributionTxs}
                         governanceTxs={this.state.governanceTxs}
                         slashingTxs={this.state.slashingTxs}
+                        clpTxs={this.state.clpTxs}
+                        pegTxs={this.state.pegTxs}
                     />
                 </Container>
             }

imports/ui/components/Transactions.jsx

@@ -14,6 +14,8 @@ export default class ValidatorTransactions extends Component{
             distributionTxs: {},
             governanceTxs: {},
             slashingTxs: {},
+            clpTxs: {},
+            pegTxs: {}
         };  
     }
 
@@ -26,7 +28,9 @@ export default class ValidatorTransactions extends Component{
                     stakingTxs: this.props.stakingTxs,
                     distributionTxs: this.props.distributionTxs,
                     governanceTxs: this.props.governanceTxs,
-                    slashingTxs: this.props.slashingTxs
+                    slashingTxs: this.props.slashingTxs,
+                    clpTxs: this.props.clpTxs,
+                    pegTxs: this.props.pegTxs
                 })
             }
         }
@@ -43,6 +47,8 @@ export default class ValidatorTransactions extends Component{
                 distributionTxs={this.state.distributionTxs}
                 governanceTxs={this.state.governanceTxs}
                 slashingTxs={this.state.slashingTxs}
+                clpTxs={this.state.clpTxs}
+                pegTxs={this.state.pegTxs}                
             />
         }
         else {

imports/ui/transactions/TransactionTabs.jsx

@@ -16,7 +16,9 @@ export default class TransactionTabs extends Component{
             stakingTxs: {},
             distributionTxs: {},
             governanceTxs: {},
-            slashingTxs: {}
+            slashingTxs: {},
+            clpTxs: {},
+            pegTxs: {}
         }
     }
 
@@ -35,7 +37,9 @@ export default class TransactionTabs extends Component{
                 stakingTxs: this.props.stakingTxs,
                 distributionTxs: this.props.distributionTxs,
                 governanceTxs: this.props.governanceTxs,
-                slashingTxs: this.props.slashingTxs
+                slashingTxs: this.props.slashingTxs,
+                clpTxs: this.props.clpTxs,
+                pegTxs: this.props.pegTxs
             })    
         }
     }
@@ -85,6 +89,22 @@ export default class TransactionTabs extends Component{
                             <T>transactions.slashing</T> ({numbro(this.state.slashingTxs.length).format("0,0")})
                         </NavLink>
                     </NavItem>
+                    <NavItem>
+                        <NavLink
+                            className={classnames({ active: this.state.activeTab === 'tx-clp' })}
+                            onClick={() => { this.toggle('tx-clp'); }}
+                        >
+                            <T>transactions.clp</T> ({numbro(this.state.clpTxs.length).format("0,0")})
+                        </NavLink>
+                    </NavItem>
+                    <NavItem>
+                        <NavLink
+                            className={classnames({ active: this.state.activeTab === 'tx-peg' })}
+                            onClick={() => { this.toggle('tx-peg'); }}
+                        >
+                            <T>transactions.peg</T> ({numbro(this.state.pegTxs.length).format("0,0")})
+                        </NavLink>
+                    </NavItem>
                 </Nav>
                 <TabContent activeTab={this.state.activeTab}>
                     <TabPane tabId="tx-transfer">
@@ -157,6 +177,34 @@ export default class TransactionTabs extends Component{
                             </Col>
                         </Row>
                     </TabPane>
+                    <TabPane tabId="tx-clp">
+                        <Row>
+                            <Col>
+                                {(this.state.clpTxs.length > 0)?this.state.clpTxs.map((tx, i) => {
+                                    return <TransactionRow 
+                                        key={i} 
+                                        index={i} 
+                                        tx={tx} 
+                                        blockList
+                                    />
+                                }):''}
+                            </Col>
+                        </Row>
+                    </TabPane>
+                    <TabPane tabId="tx-peg">
+                        <Row>
+                            <Col>
+                                {(this.state.pegTxs.length > 0)?this.state.pegTxs.map((tx, i) => {
+                                    return <TransactionRow 
+                                        key={i} 
+                                        index={i} 
+                                        tx={tx} 
+                                        blockList
+                                    />
+                                }):''}
+                            </Col>
+                        </Row>
+                    </TabPane>                    
                 </TabContent>
             </CardBody>
         </Card>