< div fxLayout = "row" fxLayoutAlign = "start center" class = "page-title-container" >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faChartPie " / >
< span class = "page-title" > On-chain Balance< / span >
< / div >
< div fxLayout = "column" class = "padding-gap-x mb-4" >
< mat-card >
< mat-card-content fxLayout = "column" >
< rtl-currency-unit-converter [ values ] = " balances " / >
< / mat-card-content >
< / mat-card >
< / div >
< div fxLayout = "row" fxLayoutAlign = "start center" class = "page-title-container" >
< fa-icon class = "page-title-img mr-1" [ icon ] = " faExchangeAlt " / >
< span class = "page-title" > On-chain Transactions< / span >
< / div >
< div fxLayout = "column" class = "padding-gap-x" >
< mat-card >
< mat-card-content fxLayout = "column" >
< nav mat-tab-nav-bar mat-stretch-tabs = "false" mat-align-tabs = "start" [ tabPanel ] = " tabPanel " >
< div * ngFor = "let link of links" tabindex = "1" mat-tab-link class = "mat-tab-label" [ active ] = " activeLink = == link . link " routerLink = "{{link.link}}" ( click ) = " activeLink = link.link" > {{link.name}}< / div >
< / nav >
< mat-tab-nav-panel # tabPanel / >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "padding-gap-x-large" >
< router-outlet / >
< / div >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "padding-gap-x-large" >
< rtl-ecl-on-chain-transaction-history fxLayout = "row" fxFlex = "100" / >
< / div >
< / mat-card-content >
< / mat-card >
< / div >