< 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" role = "tab" mat-tab-link class = "mat-tab-label" [ active ] = " activeLink = == link ? . link " [ routerLink ] = " [ link ? . link , selectedTable ? . name ] " ( click ) = " activeLink = link?.link" > {{link?.name}}< / div >
< / nav >
< mat-tab-nav-panel # tabPanel / >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "mat-tab-body-wrapper" >
< router-outlet / >
< / div >
< div fxLayout = "column" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "padding-gap-x-large" >
< rtl-cln-utxo-tables fxLayout = "row" fxFlex = "100" [ selectedTableIndex ] = " selectedTable ? . id " ( selectedTableIndexChange ) = " onSelectedTableIndexChanged ( $ event ) " / >
< / div >
< / mat-card-content >
< / mat-card >
< / div >