Skip to content

F
frontend
Commit d22d85e3 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

Merge pull request #642 from blockscout/l2-menu 

l2 menu
parents 7a30f1fa 839a7010
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 43 deletions
icons/arrows/south-east.svg 0 → 100644
View file @ d22d85e3
<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 0 → 100644
View file @ d22d85e3
<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 0 → 100644
View file @ d22d85e3
<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
View file @ d22d85e3
......@@ -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 },
// eslint-disable-next-line max-len
// { text: 'Verified contracts', nextRoute: { pathname: '/verified_contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified_contracts', isNewUi: false },
];
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 = [
[
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 },
],
[
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 },
],
[
topAccounts,
],
// [
// verifiedContracts
// ],
];
} else {
blockchainNavItems = [
txs,
blocks,
topAccounts,
// 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
View file @ d22d85e3
import { Link, Icon, Text, HStack, Tooltip, Box } from '@chakra-ui/react';
import { Link, Icon, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp } 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,16 @@ const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi }:
);
};
export default React.memo(NavLink);
const NavLinkChakra = chakra(NavLink, {
shouldForwardProp: (prop) => {
const isChakraProp = !shouldForwardProp(prop);
if (isChakraProp && prop !== 'px') {
return false;
}
return true;
},
});
export default React.memo(NavLinkChakra);
ui/snippets/navigation/NavLinkGroupDesktop.tsx
View file @ d22d85e3
......@@ -2,7 +2,6 @@ import {
Icon,
Text,
HStack,
Flex,
Box,
Link,
Popover,
......@@ -42,22 +41,19 @@ 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
{ ...styleProps.textProps }
>
{ text }
</Text>
</HStack>
<HStack spacing={ 3 } overflow="hidden">
<Icon as={ icon } boxSize="30px"/>
<Text
{ ...styleProps.textProps }
>
{ text }
</Text>
<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
View file @ d22d85e3
......@@ -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" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 }>
<VStack as="ul" spacing="1" alignItems="flex-start">
{ accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
</VStack>
......
ui/snippets/navigation/NavigationMobile.tsx
View file @ d22d85e3
......@@ -64,6 +64,9 @@ const NavigationMobile = () => {
<Box
as={ motion.nav }
mt={ 6 }
pt={ 6 }
borderTopWidth="1px"
borderColor="divider"
style={{ x: mainX }}
>
<VStack as="ul" spacing="1" alignItems="flex-start">
......@@ -81,18 +84,32 @@ const NavigationMobile = () => {
style={{ x: subX }}
key="sub"
>
<VStack
<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>
<Box
w="100%"
as="ul"
spacing="1"
alignItems="flex-start"
>
<Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose }>
<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>
{ 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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment