l2 menu

icons/arrows/south-east.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" d="M18.233 20.005 8.18 9.953a1 1 0 0 1 0-1.414l.353-.353a1 1 0 0 1 1.414 0L20 18.236V9.755a1 1 0 0 1 1-1h.5a1 1 0 0 1 1 1v12.75H9.75a1 1 0 0 1-1-1v-.5a1 1 0 0 1 1-1h8.483Z"/>
+</svg>

icons/output_roots.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" fill-rule="evenodd" d="M14.917 3.667c0-.92.746-1.667 1.666-1.667h5c.92 0 1.667.746 1.667 1.667v5c0 .92-.746 1.666-1.667 1.666h-5c-.92 0-1.666-.746-1.666-1.666V7h-.837a1.656 1.656 0 0 0-1.663 1.663v6.674A1.654 1.654 0 0 0 14.08 17h.837v-1.667c0-.92.746-1.666 1.666-1.666h5c.92 0 1.667.746 1.667 1.666v5c0 .92-.746 1.667-1.667 1.667h-5c-.92 0-1.666-.746-1.666-1.667v-1.666h-.832a3.323 3.323 0 0 1-3.335-3.335v-2.499h-2.5v1.25c0 .92-.746 1.667-1.667 1.667H2.417c-.92 0-1.667-.746-1.667-1.667V9.917c0-.92.746-1.667 1.667-1.667h4.166c.92 0 1.667.746 1.667 1.667v1.25h2.5V8.668a3.323 3.323 0 0 1 3.335-3.335h.832V3.667Zm1.666 2.498v2.502h5v-5h-5v2.498Zm0 11.67v2.498h5v-5h-5v2.502Zm-10-7.918v4.166H2.417V9.917h4.166Z" clip-rule="evenodd"/>
+  <path fill="currentColor" d="M14.917 7h.1a.1.1 0 0 0-.1-.1V7Zm-.834 0v.1V7Zm-.003 0v.1V7Zm-.638.125.038.092-.038-.092Zm-.54.36.07.07-.07-.07Zm-.36.54-.093-.037.092.038Zm-.125.638h.1-.1Zm0 .004h.1-.1Zm0 6.666h.1-.1Zm0 .004h.1-.1Zm.124.637-.092.038.092-.038Zm.36.54.072-.07-.071.07Zm.541.361-.038.093.038-.093Zm.638.125v-.1.1Zm.003 0v-.1.1Zm.834 0v.1a.1.1 0 0 0 .1-.1h-.1Zm0 1.667h.1a.1.1 0 0 0-.1-.1v.1Zm-.832 0v-.1.1Zm-1.277-.25.038-.093-.038.092Zm-1.085-.724.071-.07-.07.07ZM11 16.61l-.092.038.092-.038Zm-.25-1.277h.1-.1Zm0-2.499h.1a.1.1 0 0 0-.1-.1v.1Zm-2.5 0v-.1a.1.1 0 0 0-.1.1h.1Zm0-1.666h-.1a.1.1 0 0 0 .1.1v-.1Zm2.5 0v.1a.1.1 0 0 0 .1-.1h-.1Zm0-2.499h.1-.1ZM11 7.391l-.092-.038.092.038Zm.723-1.084.071.07-.07-.07Zm1.085-.723.038.092-.038-.092Zm1.277-.25v.1-.1Zm.832 0v.1a.1.1 0 0 0 .1-.1h-.1Zm1.666 3.333h-.1a.1.1 0 0 0 .1.1v-.1Zm5 0v.1a.1.1 0 0 0 .1-.1h-.1Zm0-5h.1a.1.1 0 0 0-.1-.1v.1Zm-5 0v-.1a.1.1 0 0 0-.1.1h.1Zm0 16.666h-.1a.1.1 0 0 0 .1.1v-.1Zm5 0v.1a.1.1 0 0 0 .1-.1h-.1Zm0-5h.1a.1.1 0 0 0-.1-.1v.1Zm-5 0v-.1a.1.1 0 0 0-.1.1h.1ZM6.583 12h.1-.1Zm0-2.083h.1a.1.1 0 0 0-.1-.1v.1Zm0 4.166v.1a.1.1 0 0 0 .1-.1h-.1Zm-4.166 0h-.1a.1.1 0 0 0 .1.1v-.1Zm0-4.166v-.1a.1.1 0 0 0-.1.1h.1ZM16.583 1.9c-.975 0-1.766.791-1.766 1.767h.2c0-.866.701-1.567 1.566-1.567v-.2Zm5 0h-5v.2h5v-.2Zm1.767 1.767c0-.976-.791-1.767-1.767-1.767v.2c.866 0 1.567.701 1.567 1.567h.2Zm0 5v-5h-.2v5h.2Zm-1.767 1.766c.976 0 1.767-.79 1.767-1.766h-.2c0 .865-.701 1.566-1.567 1.566v.2Zm-5 0h5v-.2h-5v.2Zm-1.766-1.766c0 .975.79 1.766 1.766 1.766v-.2a1.567 1.567 0 0 1-1.566-1.566h-.2Zm0-1.667v1.667h.2V7h-.2Zm.1-.1h-.834v.2h.834v-.2Zm-.833 0h-.004v.2h.003v-.2Zm-.004 0a1.756 1.756 0 0 0-.676.132l.076.185a1.56 1.56 0 0 1 .6-.117v-.2Zm-.676.132a1.77 1.77 0 0 0-.573.382l.142.142c.145-.145.317-.26.507-.339l-.076-.185Zm-.573.382a1.757 1.757 0 0 0-.382.574l.185.076c.078-.19.193-.363.338-.508l-.141-.142Zm-.382.574a1.755 1.755 0 0 0-.132.676l.2-.001a1.56 1.56 0 0 1 .117-.6l-.185-.075Zm-.132.675v.004h.2v-.004h-.2Zm0 .004v6.666h.2V8.667h-.2Zm0 6.666v.004h.2v-.003h-.2Zm0 .003c-.001.232.044.462.132.676l.185-.076a1.554 1.554 0 0 1-.117-.599h-.2Zm.132.676c.088.215.218.41.382.574l.142-.142a1.556 1.556 0 0 1-.34-.508l-.184.076Zm.382.574c.164.164.359.294.573.382l.076-.185a1.555 1.555 0 0 1-.508-.339l-.141.142Zm.573.382c.215.088.444.133.676.132v-.2a1.58 1.58 0 0 1-.6-.117l-.076.185Zm.676.132h.004v-.2h-.004v.2Zm.003 0h.834v-.2h-.834v.2Zm.934-.1v-1.667h-.2V17h.2Zm0-1.667c0-.865.701-1.566 1.566-1.566v-.2c-.975 0-1.766.79-1.766 1.766h.2Zm1.566-1.566h5v-.2h-5v.2Zm5 0c.866 0 1.567.701 1.567 1.566h.2c0-.975-.791-1.766-1.767-1.766v.2Zm1.567 1.566v5h.2v-5h-.2Zm0 5c0 .866-.701 1.567-1.567 1.567v.2c.976 0 1.767-.791 1.767-1.767h-.2ZM21.583 21.9h-5v.2h5v-.2Zm-5 0a1.567 1.567 0 0 1-1.566-1.567h-.2c0 .976.79 1.767 1.766 1.767v-.2Zm-1.566-1.567v-1.666h-.2v1.666h.2Zm-.1-1.766h-.832v.2h.832v-.2Zm-.832 0a3.223 3.223 0 0 1-1.24-.243l-.075.185c.417.172.864.26 1.315.258v-.2Zm-1.24-.243a3.221 3.221 0 0 1-1.051-.701l-.142.141c.32.32.7.573 1.118.745l.076-.185Zm-1.051-.701c-.3-.301-.54-.659-.701-1.052l-.185.076c.172.418.425.798.745 1.117l.141-.141Zm-.701-1.052a3.223 3.223 0 0 1-.243-1.239h-.2c-.002.45.086.898.258 1.315l.185-.076Zm-.243-1.24v-2.498h-.2v2.499h.2Zm-2.6-2.398h2.5v-.2h-2.5v.2Zm.1 1.15v-1.25h-.2v1.25h.2ZM6.583 15.85c.976 0 1.767-.791 1.767-1.767h-.2c0 .866-.701 1.567-1.567 1.567v.2Zm-4.166 0h4.166v-.2H2.417v.2ZM.65 14.083c0 .976.791 1.767 1.767 1.767v-.2A1.567 1.567 0 0 1 .85 14.083h-.2Zm0-4.166v4.166h.2V9.917h-.2ZM2.417 8.15C1.44 8.15.65 8.941.65 9.917h.2c0-.866.701-1.567 1.567-1.567v-.2Zm4.166 0H2.417v.2h4.166v-.2ZM8.35 9.917c0-.976-.791-1.767-1.767-1.767v.2c.866 0 1.567.701 1.567 1.567h.2Zm0 1.25v-1.25h-.2v1.25h.2Zm2.4-.1h-2.5v.2h2.5v-.2Zm.1.1V8.668h-.2v2.499h.2Zm0-2.5c-.002-.424.08-.845.243-1.238l-.185-.076a3.41 3.41 0 0 0-.258 1.316l.2-.001Zm.243-1.238c.162-.393.4-.75.701-1.052l-.142-.141c-.319.32-.572.7-.744 1.117l.185.076Zm.701-1.052c.3-.3.658-.539 1.052-.7l-.076-.186a3.424 3.424 0 0 0-1.117.745l.141.141Zm1.052-.7a3.223 3.223 0 0 1 1.239-.244v-.2a3.423 3.423 0 0 0-1.315.258l.076.185Zm1.239-.244h.832v-.2h-.832v.2Zm.732-1.766v1.666h.2V3.667h-.2Zm1.666 2.498v.001h.2-.2Zm0 .002h.2-.2Zm.2 2.5v-2.5h-.2v2.5h.2Zm4.9-.1h-5v.2h5v-.2Zm-.1-4.9v5h.2v-5h-.2Zm-4.9.1h5v-.2h-5v.2Zm.1 2.398V3.667h-.2v2.498h.2Zm-.2 11.67v2.498h.2v-2.498h-.2Zm.1 2.598h5v-.2h-5v.2Zm5.1-.1v-5h-.2v5h.2Zm-.1-5.1h-5v.2h5v-.2Zm-5.1.1v2.5h.2v-2.5h-.2Zm0 2.5h.2-.2Zm0 0v.002h.2v-.002h-.2ZM6.683 12V9.917h-.2V12h.2Zm0 2.083V12h-.2v2.083h.2Zm-4.266.1h4.166v-.2H2.417v.2Zm-.1-4.266v4.166h.2V9.917h-.2Zm4.266-.1H2.417v.2h4.166v-.2Z"/>
+</svg>

icons/txn_batches.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path fill="currentColor" fill-rule="evenodd" d="M14.806 21.313H4.582A.583.583 0 0 1 4 20.731V6.179c0-.322.261-.583.582-.583h2.654V3.27c0-.321.26-.582.582-.582h7.313c.007 0 .013.002.02.004.005.001.01.003.017.003a.558.558 0 0 1 .153.031l.02.006a.575.575 0 0 1 .194.118l4.285 4.11-.002.002a.58.58 0 0 1 .181.419v9.064a1.96 1.96 0 0 1-1.958 1.959h-1.277v.95a1.96 1.96 0 0 1-1.96 1.959ZM18.31 6.798l-2.598-2.506v1.713c0 .437.356.793.793.793h1.805Zm-3.42-3.289H8.058v14.072h10.327a.794.794 0 0 0 .793-.793V7.62h-2.671c-1.08 0-1.616-.535-1.616-1.615V3.509ZM7.236 6.42H4.822v14.07H15.15c.437 0 .793-.7.793-1.136v-.951H7.818a.582.582 0 0 1-.582-.583V6.42Zm9.482 4.532a.39.39 0 1 0 0-.78h-5.12l.502-.504a.39.39 0 0 0-.55-.549l-1.168 1.169a.39.39 0 0 0 .059.599.39.39 0 0 0 .216.065h6.06Zm-.012 1.363h-6.061a.39.39 0 0 0 0 .779h5.12l-.502.504a.39.39 0 1 0 .549.55l1.168-1.17a.39.39 0 0 0-.058-.598.39.39 0 0 0-.216-.065Z" clip-rule="evenodd"/>
+  <path fill="currentColor" d="M7.236 5.596v.25h.25v-.25h-.25Zm7.915-2.905-.07.24.07-.24Zm.017.003.014-.25-.014.25Zm.153.031.085-.235-.003-.001-.082.236Zm.02.006.072-.239-.072.24Zm.031.012.104-.228h-.001l-.103.228Zm.162.106.173-.18-.173.18Zm4.287 4.111.177.177.18-.18-.184-.177-.173.18Zm-.002.002-.176-.177-.18.18.183.177.173-.18Zm-3.054 11.442v-.25h-.25v.25h.25ZM15.713 4.292l.174-.18-.424-.408v.588h.25Zm2.598 2.506v.25h.62l-.446-.43-.174.18ZM8.058 3.51v-.25h-.25v.25h.25Zm6.833 0h.25v-.25h-.25v.25ZM8.058 17.581h-.25v.25h.25v-.25Zm11.12-9.96h.25v-.25h-.25v.25ZM4.822 6.418v-.25h-.25v.25h.25Zm2.414 0h.25v-.25h-.25v.25ZM4.822 20.49h-.25v.25h.25v-.25Zm11.12-2.087h.25v-.25h-.25v.25Zm1.051-7.567-.177-.177.177.177Zm0-.551-.177.177.177-.177Zm-5.396-.114-.177-.177-.425.427h.602v-.25Zm.503-.505.177.177.007-.007.006-.007-.19-.163Zm.093-.268.25-.01-.25.01Zm-.114-.26.177-.177-.177.177Zm-.26-.114.01-.25-.01.25Zm-.268.093-.163-.19-.007.007-.007.007.177.176Zm-1.169 1.169.177.177-.177-.177Zm-.107.199.245.05-.245-.05Zm.022.225-.232.095.001.001.23-.096Zm.143.175.139-.209-.139.209Zm.217.065v-.25.25Zm6.049 1.363v.25-.25Zm-6.337.114.177.177-.177-.177Zm0 .55.177-.176-.177.177Zm5.396.115.177.176.425-.426h-.602v.25Zm-.502.504.162.19.008-.007.007-.007-.177-.176Zm-.098.126.225.11-.225-.11Zm-.038.155-.25-.01.25.01Zm.026.157.233-.091-.233.09Zm.088.133-.177.177.177-.177Zm.29.114-.01-.25.01.25Zm.154-.039.11.225-.11-.225Zm.127-.097-.177-.177-.007.007-.006.007.19.163Zm1.168-1.168-.176-.178v.001l.176.177Zm.086-.425.23-.095v-.001l-.23.096Zm-.144-.174-.139.208.139-.208Zm-12.34 9.184h10.224v-.5H4.582v.5Zm-.832-.832c0 .46.373.832.832.832v-.5a.333.333 0 0 1-.332-.332h-.5Zm0-14.552V20.73h.5V6.179h-.5Zm.832-.833a.833.833 0 0 0-.832.833h.5c0-.184.149-.333.332-.333v-.5Zm2.654 0H4.582v.5h2.654v-.5Zm-.25-2.077v2.327h.5V3.27h-.5Zm.832-.832a.832.832 0 0 0-.832.832h.5c0-.183.148-.332.332-.332v-.5Zm7.313 0H7.818v.5h7.313v-.5Zm.09.014c-.002 0-.041-.014-.09-.014v.5a.202.202 0 0 1-.042-.004c-.007-.002-.013-.004-.009-.002l.14-.48Zm-.04-.006a.2.2 0 0 1 .034.004l.006.002-.14.48s.034.01.073.013l.027-.5Zm.222.044a.808.808 0 0 0-.22-.044l-.03.499a.307.307 0 0 1 .085.017l.165-.472Zm.01.003a2.077 2.077 0 0 1-.007-.002s-.001 0 0 0l-.17.47.032.01.145-.478Zm.062.022a.443.443 0 0 0-.062-.022l-.145.479a.198.198 0 0 1 .008.002l-.006-.002.205-.457Zm.232.154a.823.823 0 0 0-.231-.153l-.208.455c.041.018.07.038.093.06l.346-.362Zm4.287 4.112-4.287-4.111-.346.36 4.287 4.112.346-.361Zm.002.359.002-.002-.354-.354-.001.002.353.354Zm.254.242a.83.83 0 0 0-.257-.6l-.347.361a.33.33 0 0 1 .104.239h.5Zm0 9.064V7.381h-.5v9.064h.5Zm-2.208 2.209a2.21 2.21 0 0 0 2.208-2.209h-.5a1.71 1.71 0 0 1-1.708 1.709v.5Zm-1.277 0h1.277v-.5h-1.277v.5Zm.25.7v-.95h-.5v.95h.5Zm-2.21 2.209a2.21 2.21 0 0 0 2.21-2.208h-.5a1.71 1.71 0 0 1-1.71 1.708v.5Zm.735-17.09 2.598 2.505.347-.36-2.598-2.506-.348.36Zm.423 1.532V4.292h-.5v1.713h.5Zm.543.543a.544.544 0 0 1-.543-.543h-.5c0 .575.468 1.043 1.043 1.043v-.5Zm1.805 0h-1.805v.5h1.805v-.5ZM8.058 3.76h6.833v-.5H8.058v.5Zm.25 13.822V3.51h-.5v14.072h.5Zm10.077-.25H8.058v.5h10.327v-.5Zm.543-.543c0 .3-.244.543-.543.543v.5c.575 0 1.043-.468 1.043-1.043h-.5Zm0-9.168v9.168h.5V7.62h-.5Zm-2.421.25h2.67v-.5h-2.67v.5ZM14.64 6.005c0 .578.143 1.057.476 1.39.333.332.812.475 1.39.475v-.5c-.502 0-.831-.124-1.037-.33-.205-.205-.33-.533-.33-1.035h-.5Zm0-2.496v2.496h.5V3.509h-.5ZM4.822 6.67h2.414v-.5H4.822v.5Zm.25 13.822V6.419h-.5V20.49h.5Zm10.077-.25H4.822v.5h10.326v-.5Zm.543-.886c0 .162-.07.401-.195.599-.13.21-.264.287-.348.287v.5c.352 0 .616-.272.772-.522.164-.26.27-.59.27-.864h-.5Zm0-.951v.95h.5v-.95h-.5Zm-7.874.25h8.124v-.5H7.818v.5Zm-.832-.833c0 .46.372.833.832.833v-.5a.332.332 0 0 1-.332-.333h-.5Zm0-11.402v11.4h.5V6.42h-.5Zm9.83 4.24a.14.14 0 0 1-.098.042v.5a.64.64 0 0 0 .452-.188l-.354-.353Zm.041-.098a.14.14 0 0 1-.04.099l.353.353a.64.64 0 0 0 .187-.452h-.5Zm-.04-.098a.14.14 0 0 1 .04.098h.5a.64.64 0 0 0-.187-.452l-.354.354Zm-.1-.041a.14.14 0 0 1 .1.04l.353-.353a.64.64 0 0 0-.452-.187v.5Zm-5.12 0h5.12v-.5h-5.12v.5Zm.326-.931-.503.504.355.353.502-.504-.354-.353Zm.02-.082a.14.14 0 0 1-.033.096l.38.325a.64.64 0 0 0 .153-.44l-.5.019Zm-.04-.093a.14.14 0 0 1 .04.093l.5-.02a.64.64 0 0 0-.187-.427l-.353.354Zm-.094-.041a.14.14 0 0 1 .094.04l.353-.353a.64.64 0 0 0-.427-.187l-.02.5Zm-.096.033a.14.14 0 0 1 .096-.033l.02-.5a.64.64 0 0 0-.44.153l.324.38Zm-1.154 1.155 1.168-1.168-.353-.353-1.168 1.168.353.354Zm-.039.072a.139.139 0 0 1 .039-.071l-.353-.355a.64.64 0 0 0-.176.328l.49.098Zm.008.081a.139.139 0 0 1-.008-.08l-.49-.1a.64.64 0 0 0 .036.37l.462-.19Zm.05.061a.14.14 0 0 1-.05-.062l-.462.192c.049.117.13.217.236.287l.277-.417Zm.078.024a.14.14 0 0 1-.077-.024l-.277.417a.64.64 0 0 0 .356.107l-.002-.5Zm6.062 0h-6.061v.5h6.06v-.5Zm-6.073 1.863h6.06v-.5h-6.06v.5Zm-.099.04a.14.14 0 0 1 .099-.04v-.5a.64.64 0 0 0-.452.187l.353.354Zm-.04.1a.14.14 0 0 1 .04-.1l-.353-.353a.639.639 0 0 0-.188.452h.5Zm.04.098a.14.14 0 0 1-.04-.099h-.5c0 .17.067.333.187.452l.353-.353Zm.099.04a.14.14 0 0 1-.099-.04l-.353.353a.64.64 0 0 0 .452.188v-.5Zm5.12 0h-5.12v.5h5.12v-.5Zm-.325.931.502-.504-.354-.353-.502.505.354.352Zm-.05.06a.138.138 0 0 1 .035-.046l-.325-.38a.639.639 0 0 0-.16.207l.45.218Zm-.014.054a.14.14 0 0 1 .014-.055l-.45-.218a.64.64 0 0 0-.063.254l.5.02Zm.01.057a.139.139 0 0 1-.01-.057l-.5-.019a.64.64 0 0 0 .045.258l.465-.182Zm.031.047a.139.139 0 0 1-.03-.047l-.466.182a.64.64 0 0 0 .143.219l.353-.354Zm.048.032a.139.139 0 0 1-.048-.032l-.353.354a.64.64 0 0 0 .219.143l.182-.465Zm.056.01a.139.139 0 0 1-.056-.01l-.182.465a.64.64 0 0 0 .258.044l-.02-.5Zm.056-.015a.138.138 0 0 1-.056.014l.02.5a.64.64 0 0 0 .253-.064l-.217-.45Zm.045-.035a.138.138 0 0 1-.045.035l.217.45a.64.64 0 0 0 .208-.16l-.38-.325Zm1.181-1.182-1.168 1.168.354.354 1.168-1.168-.354-.354Zm.04-.072a.139.139 0 0 1-.04.071l.353.355a.64.64 0 0 0 .176-.327l-.49-.099Zm-.009-.08a.14.14 0 0 1 .008.08l.49.099a.64.64 0 0 0-.035-.37l-.463.19Zm-.05-.062a.14.14 0 0 1 .051.063l.461-.193a.64.64 0 0 0-.236-.286l-.276.416Zm-.078-.023a.14.14 0 0 1 .078.023l.276-.416a.639.639 0 0 0-.355-.107l.001.5Z"/>
+</svg>

lib/hooks/useNavItems.tsx

@@ -6,9 +6,11 @@ import appConfig from 'configs/app/config';
 import abiIcon from 'icons/ABI.svg';
 import apiKeysIcon from 'icons/API.svg';
 import appsIcon from 'icons/apps.svg';
+// import withdrawalsIcon from 'icons/arrows/north-east.svg';
 import blocksIcon from 'icons/block.svg';
 import gearIcon from 'icons/gear.svg';
 import globeIcon from 'icons/globe-b.svg';
+// import outputRootsIcon from 'icons/output_roots.svg';
 import privateTagIcon from 'icons/privattags.svg';
 import profileIcon from 'icons/profile.svg';
 import publicTagIcon from 'icons/publictags.svg';
@@ -16,8 +18,11 @@ import statsIcon from 'icons/stats.svg';
 import tokensIcon from 'icons/token.svg';
 import topAccountsIcon from 'icons/top-accounts.svg';
 import transactionsIcon from 'icons/transactions.svg';
+// import depositsIcon from 'icons/arrows/south-east.svg';
+// import txnBatchIcon from 'icons/txn_batches.svg';
 // import verifiedIcon from 'icons/verified.svg';
 import watchlistIcon from 'icons/watchlist.svg';
+// import { rightLineArrow } from 'lib/html-entities';
 import notEmpty from 'lib/notEmpty';
 
 export interface NavItem {
@@ -29,7 +34,7 @@ export interface NavItem {
 }
 
 export interface NavGroupItem extends Omit<NavItem, 'nextRoute'> {
-  subItems: Array<NavItem>;
+  subItems: Array<NavItem> | Array<Array<NavItem>>;
 }
 
 interface ReturnType {
@@ -50,13 +55,47 @@ export default function useNavItems(): ReturnType {
   const pathname = router.pathname;
 
   return React.useMemo(() => {
-    const blockchainNavItems: Array<NavItem> = [
-      { text: 'Top accounts', nextRoute: { pathname: '/accounts' as const }, icon: topAccountsIcon, isActive: pathname === '/accounts', isNewUi: true },
-      { text: 'Blocks', nextRoute: { pathname: '/blocks' as const }, icon: blocksIcon, isActive: pathname.startsWith('/block'), isNewUi: true },
-      { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true },
+    let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
+
+    const topAccounts =
+      { text: 'Top accounts', nextRoute: { pathname: '/accounts' as const }, icon: topAccountsIcon, isActive: pathname === '/accounts', isNewUi: true };
+    const blocks = { text: 'Blocks', nextRoute: { pathname: '/blocks' as const }, icon: blocksIcon, isActive: pathname.startsWith('/block'), isNewUi: true };
+    const txs = { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true };
+    // const verifiedContracts =
     // eslint-disable-next-line max-len
     //  { text: 'Verified contracts', nextRoute: { pathname: '/verified_contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified_contracts', isNewUi: false },
+
+    if (appConfig.L2.isL2Network) {
+      blockchainNavItems = [
+        [
+          topAccounts,
+        ],
+        [
+          blocks,
+          // eslint-disable-next-line max-len
+          // { text: 'Txn batches', nextRoute: { pathname: '/txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/txn-batches', isNewUi: true },
+          // eslint-disable-next-line max-len
+          // { text: 'Output roots', nextRoute: { pathname: '/output-roots' as const }, icon: outputRootsIcon, isActive: pathname === '/output-roots', isNewUi: true },
+        ],
+        [
+          txs,
+          // eslint-disable-next-line max-len
+          // { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/deposits' as const }, icon: depositsIcon, isActive: pathname === '/deposits', isNewUi: true },
+          // eslint-disable-next-line max-len
+          // { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/withdrawals' as const }, icon: withdrawalsIcon, isActive: pathname === '/withdrawals', isNewUi: true },
+        ],
+        // [
+        //   verifiedContracts
+        // ],
       ];
+    } else {
+      blockchainNavItems = [
+        topAccounts,
+        blocks,
+        txs,
+        // verifiedContracts,
+      ];
+    }
 
     const otherNavItems: Array<NavItem> = [
       hasAPIDocs ? {
@@ -73,7 +112,7 @@ export default function useNavItems(): ReturnType {
       {
         text: 'Blockchain',
         icon: globeIcon,
-        isActive: blockchainNavItems.some(item => item.isActive),
+        isActive: blockchainNavItems.flat().some(item => item.isActive),
         isNewUi: true,
         subItems: blockchainNavItems,
       },
@@ -86,7 +125,7 @@ export default function useNavItems(): ReturnType {
       // at this stage custom menu items is under development, we will implement it later
       otherNavItems.length > 0 ?
         { text: 'Other', icon: gearIcon, isActive: otherNavItems.some(item => item.isActive), subItems: otherNavItems } : null,
-    ].filter(notEmpty);
+    ].filter(notEmpty) as Array<NavItem | NavGroupItem>;
 
     const accountNavItems = [
       {

ui/snippets/navigation/NavLink.tsx

-import { Link, Icon, Text, HStack, Tooltip, Box } from '@chakra-ui/react';
+import { Link, Icon, Text, HStack, Tooltip, Box, useBreakpointValue, chakra } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { route } from 'nextjs-routes';
 import React from 'react';
@@ -11,14 +11,17 @@ import useNavLinkStyleProps from './useNavLinkStyleProps';
 type Props = NavItem & {
   isCollapsed?: boolean;
   px?: string | number;
+  className?: string;
 }
 
-const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi }: Props) => {
+const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi, className }: Props) => {
   const colors = useColors();
   const isExpanded = isCollapsed === false;
 
   const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive });
 
+  const isXLScreen = useBreakpointValue({ base: false, xl: true });
+
   const content = (
     <Link
       { ...(isNewUi ? {} : { href: route(nextRoute) }) }
@@ -32,7 +35,7 @@ const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi }:
       <Tooltip
         label={ text }
         hasArrow={ false }
-        isDisabled={ !isCollapsed }
+        isDisabled={ isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
         placement="right"
         variant="nav"
         gutter={ 20 }
@@ -49,7 +52,7 @@ const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi }:
   );
 
   return (
-    <Box as="li" listStyleType="none" w="100%">
+    <Box as="li" listStyleType="none" w="100%" className={ className }>
       { /* why not NextLink in all cases? since prev UI and new one are hosting in the same domain and global routing is managed by nginx */ }
       { /* we have to hard reload page on every transition between urls from different part of the app */ }
       { isNewUi ? (
@@ -61,4 +64,4 @@ const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi }:
   );
 };
 
-export default React.memo(NavLink);
+export default React.memo(chakra(NavLink));

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -2,7 +2,6 @@ import {
   Icon,
   Text,
   HStack,
-  Flex,
   Box,
   Link,
   Popover,
@@ -42,12 +41,8 @@ const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Pr
             pl={{ lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 }}
             pr={{ lg: isExpanded ? 0 : '15px', xl: isCollapsed ? '15px' : 0 }}
             aria-label={ `${ text } link group` }
-            display="grid"
-            gridColumnGap={ 3 }
-            gridTemplateColumns="auto, 30px"
-            overflow="hidden"
+            position="relative"
           >
-            <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
             <HStack spacing={ 3 } overflow="hidden">
               <Icon as={ icon } boxSize="30px"/>
               <Text
@@ -55,9 +50,10 @@ const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Pr
               >
                 { text }
               </Text>
-              </HStack>
               <Icon
                 as={ chevronIcon }
+                position="absolute"
+                right="7px"
                 transform="rotate(180deg)"
                 boxSize={ 6 }
                 opacity={{ lg: isExpanded ? '1' : '0', xl: isCollapsed ? '0' : '1' }}
@@ -65,16 +61,31 @@ const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Pr
                 transitionDuration="normal"
                 transitionTimingFunction="ease"
               />
-            </Flex>
+            </HStack>
           </Link>
         </PopoverTrigger>
-        <PopoverContent width="auto" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
+        <PopoverContent width="252px" top={{ lg: isExpanded ? '-16px' : 0, xl: isCollapsed ? 0 : '-16px' }}>
           <PopoverBody p={ 4 }>
             <Text variant="secondary" fontSize="sm" mb={ 2 } display={{ lg: isExpanded ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}>
               { text }
             </Text>
             <VStack spacing={ 1 } alignItems="start">
-              { subItems.map(item => <NavLink key={ item.text } { ...item } isCollapsed={ false }/>) }
+              { subItems.map(item => Array.isArray(item) ? (
+                <Box
+                  w="100%"
+                  as="ul"
+                  _notLast={{
+                    mb: 2,
+                    pb: 2,
+                    borderBottomWidth: '1px',
+                    borderColor: 'divider',
+                  }}
+                >
+                  { item.map(subItem => <NavLink key={ subItem.text } { ...subItem } isCollapsed={ false }/>) }
+                </Box>
+              ) :
+                <NavLink key={ item.text } { ...item } isCollapsed={ false }/>,
+              ) }
             </VStack>
           </PopoverBody>
         </PopoverContent>

ui/snippets/navigation/NavigationDesktop.tsx

@@ -79,7 +79,7 @@ const NavigationDesktop = () => {
         <NetworkLogo isCollapsed={ isCollapsed }/>
         <NetworkMenu isCollapsed={ isCollapsed }/>
       </Box>
-      <Box as="nav" mt={ 8 }>
+      <Box as="nav" mt={ 8 } w="100%">
         <VStack as="ul" spacing="1" alignItems="flex-start">
           { mainNavItems.map((item) => {
             if (isGroupItem(item)) {
@@ -91,7 +91,7 @@ const NavigationDesktop = () => {
         </VStack>
       </Box>
       { hasAccount && (
-        <Box as="nav" mt={ 8 }>
+        <Box as="nav" mt={ 8 } w="100%">
           <VStack as="ul" spacing="1" alignItems="flex-start">
             { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
           </VStack>

ui/snippets/navigation/NavigationMobile.tsx

@@ -81,18 +81,32 @@ const NavigationMobile = () => {
             style={{ x: subX }}
             key="sub"
           >
-            <VStack
-              w="100%"
-              as="ul"
-              spacing="1"
-              alignItems="flex-start"
-            >
-              <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose }>
+            <Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
               <Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
               <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
             </Flex>
-              { isGroupItem(openedItem) && openedItem.subItems?.map((item) => <NavLink key={ item.text } { ...item }/>) }
-            </VStack>
+            <Box
+              w="100%"
+              as="ul"
+            >
+              { isGroupItem(openedItem) && openedItem.subItems?.map(
+                item => Array.isArray(item) ? (
+                  <Box
+                    w="100%"
+                    as="ul"
+                    _notLast={{
+                      mb: 2,
+                      pb: 2,
+                      borderBottomWidth: '1px',
+                      borderColor: 'divider',
+                    }}
+                  >
+                    { item.map(subItem => <NavLink key={ subItem.text } { ...subItem }/>) }
+                  </Box>
+                ) :
+                  <NavLink key={ item.text } { ...item } mb={ 1 }/>,
+              ) }
+            </Box>
           </Box>
         ) }
       </Box>