add main menu, footer, styles

icons/Apps.svg

-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 15.943H6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7H7v-5h5v5Zm12-18h-7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7h-5v-5h5v5Zm1 4h-7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7h-5v-5h5v5Zm-10-18H6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7H7v-5h5v5Z" fill="#4A5568"/></svg>
\ No newline at end of file

icons/Tokens (1).svg

-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.466 11.652c-1.382 0-2.697-.3-3.697-.848C5.63 10.182 5 9.3 5 8.326c0-.974.628-1.854 1.77-2.478C7.768 5.301 9.081 5 10.465 5c1.385 0 2.698.301 3.695.848 1.142.624 1.77 1.504 1.77 2.478 0 .974-.626 1.856-1.77 2.478-.997.547-2.31.848-3.695.848Zm0-5.171c-1.123 0-2.212.243-2.986.666-.635.345-1 .777-1 1.18 0 .4.365.83 1 1.178.774.424 1.863.666 2.986.666 1.123 0 2.213-.242 2.987-.666.635-.345.999-.777.999-1.179s-.364-.832-1-1.179c-.771-.423-1.862-.666-2.986-.666Z" fill="#4A5568"/><path d="M22.131 14.976a.74.74 0 0 1-.484-1.3c.216-.187.473-.48.473-.82 0-.871-1.704-1.845-3.985-1.845-.967 0-1.907.177-2.647.5a.74.74 0 1 1-.592-1.357c.935-.408 2.056-.624 3.239-.624 1.384 0 2.697.3 3.696.848 1.142.624 1.77 1.504 1.77 2.478 0 .713-.341 1.382-.987 1.94a.74.74 0 0 1-.483.18ZM10.466 21.032c-1.382 0-2.697-.302-3.697-.849C5.629 19.56 5 18.679 5 17.705V8.328a.74.74 0 0 1 1.48 0v9.377c0 .402.365.832 1 1.179.774.424 1.862.667 2.986.667a7.128 7.128 0 0 0 2.205-.333c.111-.037.218-.076.316-.115a.74.74 0 0 1 .556 1.372 5.529 5.529 0 0 1-.409.148 8.633 8.633 0 0 1-2.668.409Z" fill="#4A5568"/><path d="M15.192 14.456a.74.74 0 0 1-.74-.74v-5.39a.74.74 0 0 1 1.48 0v5.39a.74.74 0 0 1-.74.74ZM10.466 18.63c-1.382 0-2.697-.3-3.697-.848C5.629 17.159 5 16.28 5 15.305a.74.74 0 1 1 1.48 0c0 .87 1.705 1.845 3.986 1.845a7.134 7.134 0 0 0 2.205-.332c.159-.053.31-.11.449-.172a.74.74 0 1 1 .597 1.355c-.181.08-.377.155-.581.223a8.624 8.624 0 0 1-2.67.407Z" fill="#4A5568"/><path d="M10.466 16.231c-1.382 0-2.697-.301-3.697-.848C5.629 14.758 5 13.879 5 12.905a.74.74 0 1 1 1.48 0c0 .871 1.705 1.845 3.986 1.845.941 0 1.829-.161 2.567-.466a.74.74 0 1 1 .566 1.368c-.916.379-1.999.579-3.133.579ZM14.868 14.587a.74.74 0 0 1-.602-1.17.882.882 0 0 0 .186-.512.74.74 0 1 1 1.48 0c0 .482-.155.944-.46 1.373a.74.74 0 0 1-.604.31Z" fill="#4A5568"/><path d="M10.466 13.83c-1.382 0-2.697-.3-3.697-.848C5.63 12.358 5 11.478 5 10.505a.74.74 0 1 1 1.48 0c0 .401.365.83 1 1.178.774.424 1.863.667 2.986.667 1.123 0 2.215-.243 2.987-.667.635-.345.999-.777.999-1.178a.74.74 0 1 1 1.48 0c0 .973-.627 1.853-1.769 2.477-.999.548-2.312.849-3.697.849ZM18.134 19.686c-1.52 0-2.96-.33-4.055-.93-1.236-.676-1.917-1.625-1.917-2.673s.681-1.997 1.917-2.674c1.096-.599 2.536-.929 4.055-.929 1.52 0 2.962.33 4.055.93 1.236.676 1.918 1.628 1.918 2.673 0 1.045-.681 1.996-1.918 2.674-1.095.599-2.535.929-4.055.929Zm0-5.725c-1.257 0-2.475.272-3.343.747-.73.4-1.148.9-1.148 1.375s.418.976 1.148 1.375c.868.473 2.085.747 3.343.747 1.26 0 2.476-.272 3.344-.747.73-.4 1.148-.9 1.148-1.375s-.42-.976-1.148-1.375c-.868-.475-2.085-.747-3.344-.747Z" fill="#4A5568"/><path d="M18.134 25c-1.52 0-2.96-.33-4.055-.93-1.236-.675-1.917-1.625-1.917-2.673v-5.314a.74.74 0 0 1 1.481 0v5.314c0 .475.418.976 1.148 1.375.868.475 2.086.748 3.343.748 1.258 0 2.476-.273 3.344-.748.728-.398 1.148-.9 1.148-1.375v-5.314a.74.74 0 0 1 1.48 0v5.314c0 1.048-.68 1.998-1.917 2.674-1.095.6-2.535.93-4.055.93Z" fill="#4A5568"/><path d="M18.134 22.343c-1.52 0-2.96-.33-4.055-.93-1.236-.676-1.917-1.626-1.917-2.673a.74.74 0 1 1 1.481 0c0 .474.418.976 1.148 1.374.868.476 2.086.748 3.343.748 1.258 0 2.476-.272 3.344-.748.728-.398 1.148-.9 1.148-1.374a.74.74 0 1 1 1.48 0c0 1.047-.68 1.997-1.917 2.674-1.095.599-2.535.929-4.055.929ZM22.86 15.67a.74.74 0 0 1-.74-.741v-2.073a.74.74 0 1 1 1.48 0v2.073a.74.74 0 0 1-.74.74Z" fill="#4A5568"/></svg>
\ No newline at end of file

icons/apps.svg

+<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13 15.943H6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7H7v-5h5v5Zm12-18h-7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7h-5v-5h5v5Zm1 4h-7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7h-5v-5h5v5Zm-10-18H6a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1Zm-1 7H7v-5h5v5Z"/></svg>
\ No newline at end of file

icons/block.svg

-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.925 3 5 8.653v11.541l7.671 4.47-.037-1.878-6.094-3.568v-8.574l7.596 4.291V25.03l.801.451.827-.45V14.935l7.584-4.292v8.574L17.29 22.71v1.878L25 20.279V8.653L14.925 3Zm0 10.583L7.516 9.217l7.409-4.358 7.587 4.358-7.587 4.366Zm-5.712 4.235 1.484-.845-.126-.221-1.483.845.125.22Zm2.598-1.487 1.484-.845-.126-.22-1.484.845.126.22Zm3.224-3.964v-1.7h-.254v1.7h.254Zm0-2.963v-1.71h-.254v1.71h.254Zm0-2.848V4.847h-.254v1.709h.254Zm3.21 9.564-1.475-.854-.127.22 1.474.854.127-.22Zm2.57 1.487-1.485-.855-.126.22 1.483.855.127-.22ZM6.59 19.317l1.474-.846-.127-.22-1.473.845.126.22Zm16.836-.224-1.473-.855-.128.22 1.474.855.127-.22Z" fill="#4A5568"/></svg>
+<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M14.925 3 5 8.653v11.541l7.671 4.47-.037-1.878-6.094-3.568v-8.574l7.596 4.291V25.03l.801.451.827-.45V14.935l7.584-4.292v8.574L17.29 22.71v1.878L25 20.279V8.653L14.925 3Zm0 10.583L7.516 9.217l7.409-4.358 7.587 4.358-7.587 4.366Zm-5.712 4.235 1.484-.845-.126-.221-1.483.845.125.22Zm2.598-1.487 1.484-.845-.126-.22-1.484.845.126.22Zm3.224-3.964v-1.7h-.254v1.7h.254Zm0-2.963v-1.71h-.254v1.71h.254Zm0-2.848V4.847h-.254v1.709h.254Zm3.21 9.564-1.475-.854-.127.22 1.474.854.127-.22Zm2.57 1.487-1.485-.855-.126.22 1.483.855.127-.22ZM6.59 19.317l1.474-.846-.127-.22-1.473.845.126.22Zm16.836-.224-1.473-.855-.128.22 1.474.855.127-.22Z"/></svg>
\ No newline at end of file

icons/Blockscout.svg → icons/blockscout.svg

-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m23.528 10.345-.622-1.08a1.913 1.913 0 0 0-2.609-.704v0a1.904 1.904 0 0 1-2.609-.678 1.83 1.83 0 0 1-.256-.915v0A1.914 1.914 0 0 0 15.519 5h-1.254a1.904 1.904 0 0 0-1.904 1.913v0a1.913 1.913 0 0 1-1.913 1.886 1.83 1.83 0 0 1-.915-.257v0a1.913 1.913 0 0 0-2.609.705l-.668 1.098a1.913 1.913 0 0 0 .695 2.61v0a1.913 1.913 0 0 1 0 3.313v0a1.904 1.904 0 0 0-.695 2.6v0l.631 1.088a1.913 1.913 0 0 0 2.61.742v0a1.895 1.895 0 0 1 2.599.696c.164.277.252.593.256.915v0c0 1.056.856 1.913 1.913 1.913h1.254a1.913 1.913 0 0 0 1.913-1.904v0a1.904 1.904 0 0 1 1.913-1.913c.322.009.636.097.915.256v0a1.913 1.913 0 0 0 2.61-.695v0l.658-1.099a1.904 1.904 0 0 0-.696-2.608v0a1.904 1.904 0 0 1-.695-2.61c.166-.289.406-.529.695-.695v0a1.913 1.913 0 0 0 .696-2.6v0-.008Z" stroke="#4A5568" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14.896" cy="14.611" r="2.636" stroke="#4A5568" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m23.528 10.345-.622-1.08a1.913 1.913 0 0 0-2.609-.704v0a1.904 1.904 0 0 1-2.609-.678 1.83 1.83 0 0 1-.256-.915v0A1.914 1.914 0 0 0 15.519 5h-1.254a1.904 1.904 0 0 0-1.904 1.913v0a1.913 1.913 0 0 1-1.913 1.886 1.83 1.83 0 0 1-.915-.257v0a1.913 1.913 0 0 0-2.609.705l-.668 1.098a1.913 1.913 0 0 0 .695 2.61v0a1.913 1.913 0 0 1 0 3.313v0a1.904 1.904 0 0 0-.695 2.6v0l.631 1.088a1.913 1.913 0 0 0 2.61.742v0a1.895 1.895 0 0 1 2.599.696c.164.277.252.593.256.915v0c0 1.056.856 1.913 1.913 1.913h1.254a1.913 1.913 0 0 0 1.913-1.904v0a1.904 1.904 0 0 1 1.913-1.913c.322.009.636.097.915.256v0a1.913 1.913 0 0 0 2.61-.695v0l.658-1.099a1.904 1.904 0 0 0-.696-2.608v0a1.904 1.904 0 0 1-.695-2.61c.166-.289.406-.529.695-.695v0a1.913 1.913 0 0 0 .696-2.6v0-.008Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><circle cx="14.896" cy="14.611" r="2.636" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file

icons/social/git.svg

+<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.568 13.835c1.948-.23 4.02-.939 4.02-4.304 0-.957-.336-1.737-.885-2.34.089-.23.372-1.097-.106-2.302 0 0-.709-.23-2.374.886a8.582 8.582 0 0 0-2.214-.32 8.37 8.37 0 0 0-2.215.32c-1.683-1.116-2.391-.886-2.391-.886-.478 1.205-.195 2.073-.106 2.303-.55.602-.886 1.382-.886 2.339 0 3.365 2.072 4.074 4.021 4.304-.248.213-.478.62-.567 1.187-.496.212-1.789.62-2.568-.726 0 0-.461-.833-1.329-.886 0 0-.868-.018-.07.531 0 0 .584.266.974 1.276 0 0 .53 1.683 2.975 1.151v1.506c0 .23-.177.496-.62.425a8.751 8.751 0 0 1-5.97-8.308 8.747 8.747 0 0 1 8.752-8.75c4.818 0 8.75 3.914 8.733 8.75 0 3.862-2.498 7.139-5.97 8.308-.443.089-.62-.177-.62-.425v-2.427c0-.815-.266-1.346-.584-1.612ZM20 10.009C20 4.482 15.518 0 10.009 0 4.482 0 0 4.482 0 10.009 0 15.519 4.482 20 10.009 20 15.519 20 20 15.518 20 10.009Z"/></svg>
\ No newline at end of file

icons/social/stats.svg

+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.193 15.193h.702a.526.526 0 0 0 .526-.527V5.193a.526.526 0 0 0-.526-.526h-.702a.526.526 0 0 0-.526.526v9.473a.526.526 0 0 0 .526.527Zm5.614 0h-.702a.526.526 0 0 1-.526-.527V6.947a.526.526 0 0 1 .526-.526h.702a.526.526 0 0 1 .527.526v7.72a.526.526 0 0 1-.527.526Zm-2.456 0H9.65a.526.526 0 0 1-.526-.527V9.403a.526.526 0 0 1 .526-.526h.702a.526.526 0 0 1 .526.526v5.263a.526.526 0 0 1-.526.527Z" fill="currentColor"/><circle cx="10" cy="10" r="9" stroke="currentColor" stroke-width="2"/></svg>
\ No newline at end of file

icons/social/telega.svg

+<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.48 5.399 4.63 9.197c-.672.27-.668.645-.123.812l2.53.79 5.85-3.692c.277-.169.53-.078.322.106l-4.74 4.279h-.002.001L8.294 14.1c.255 0 .368-.117.512-.256l1.228-1.194 2.555 1.887c.471.26.81.126.927-.436l1.677-7.905c.171-.688-.263-1-.712-.796Z" fill="currentColor"/><circle cx="10.333" cy="10" r="9" stroke="currentColor" stroke-width="2"/></svg>
\ No newline at end of file

icons/social/tweet.svg

+<svg width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.067 3.928A9.984 9.984 0 0 0 10.997 1 9.983 9.983 0 0 0 3.93 3.928 9.973 9.973 0 0 0 1 11.003a9.969 9.969 0 0 0 2.929 7.069A9.983 9.983 0 0 0 10.998 21a9.984 9.984 0 0 0 7.069-2.928 9.97 9.97 0 0 0 2.928-7.07 9.974 9.974 0 0 0-2.928-7.074Zm-.554 13.59a9.187 9.187 0 0 1-6.516 2.702 9.187 9.187 0 0 1-6.515-2.702 9.175 9.175 0 0 1-2.701-6.515 9.178 9.178 0 0 1 2.7-6.521 9.182 9.182 0 0 1 6.517-2.696 9.181 9.181 0 0 1 6.515 2.696 9.177 9.177 0 0 1 2.701 6.52c0 2.542-1.03 4.85-2.701 6.516Z" fill="currentColor" stroke="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.825 7.067c-.404.238-.858.41-1.334.504a2.088 2.088 0 0 0-1.534-.654c-1.151 0-2.093.925-2.093 2.06 0 .166.028.32.061.47a5.945 5.945 0 0 1-4.318-2.153c-.177.31-.287.659-.287 1.035 0 .72.411 1.35.965 1.716-.343-.005-.703-.1-.911-.255v.028c0 .266.014.51.108.742a2.062 2.062 0 0 0 1.522 1.273c-.183.05-.369.078-.563.078a1.91 1.91 0 0 1-.397-.045 2.109 2.109 0 0 0 1.952 1.44c-.72.553-1.618.88-2.598.88-.171 0-.332-.011-.504-.028.93.581 2.031.925 3.21.925 3.272 0 5.283-2.265 5.808-4.617.095-.42.129-.836.129-1.246v-.265a4.167 4.167 0 0 0 1.05-1.069 4.43 4.43 0 0 1-1.196.327c.437-.26.774-.659.93-1.146Z" fill="currentColor"/></svg>
\ No newline at end of file

icons/token.svg

+<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M10.466 11.652c-1.382 0-2.697-.3-3.697-.848C5.63 10.182 5 9.3 5 8.326c0-.974.628-1.854 1.77-2.478C7.768 5.301 9.081 5 10.465 5c1.385 0 2.698.301 3.695.848 1.142.624 1.77 1.504 1.77 2.478 0 .974-.626 1.856-1.77 2.478-.997.547-2.31.848-3.695.848Zm0-5.171c-1.123 0-2.212.243-2.986.666-.635.345-1 .777-1 1.18 0 .4.365.83 1 1.178.774.424 1.863.666 2.986.666 1.123 0 2.213-.242 2.987-.666.635-.345.999-.777.999-1.179s-.364-.832-1-1.179c-.771-.423-1.862-.666-2.986-.666Z" /><path d="M22.131 14.976a.74.74 0 0 1-.484-1.3c.216-.187.473-.48.473-.82 0-.871-1.704-1.845-3.985-1.845-.967 0-1.907.177-2.647.5a.74.74 0 1 1-.592-1.357c.935-.408 2.056-.624 3.239-.624 1.384 0 2.697.3 3.696.848 1.142.624 1.77 1.504 1.77 2.478 0 .713-.341 1.382-.987 1.94a.74.74 0 0 1-.483.18ZM10.466 21.032c-1.382 0-2.697-.302-3.697-.849C5.629 19.56 5 18.679 5 17.705V8.328a.74.74 0 0 1 1.48 0v9.377c0 .402.365.832 1 1.179.774.424 1.862.667 2.986.667a7.128 7.128 0 0 0 2.205-.333c.111-.037.218-.076.316-.115a.74.74 0 0 1 .556 1.372 5.529 5.529 0 0 1-.409.148 8.633 8.633 0 0 1-2.668.409Z"/><path d="M15.192 14.456a.74.74 0 0 1-.74-.74v-5.39a.74.74 0 0 1 1.48 0v5.39a.74.74 0 0 1-.74.74ZM10.466 18.63c-1.382 0-2.697-.3-3.697-.848C5.629 17.159 5 16.28 5 15.305a.74.74 0 1 1 1.48 0c0 .87 1.705 1.845 3.986 1.845a7.134 7.134 0 0 0 2.205-.332c.159-.053.31-.11.449-.172a.74.74 0 1 1 .597 1.355c-.181.08-.377.155-.581.223a8.624 8.624 0 0 1-2.67.407Z"/><path d="M10.466 16.231c-1.382 0-2.697-.301-3.697-.848C5.629 14.758 5 13.879 5 12.905a.74.74 0 1 1 1.48 0c0 .871 1.705 1.845 3.986 1.845.941 0 1.829-.161 2.567-.466a.74.74 0 1 1 .566 1.368c-.916.379-1.999.579-3.133.579ZM14.868 14.587a.74.74 0 0 1-.602-1.17.882.882 0 0 0 .186-.512.74.74 0 1 1 1.48 0c0 .482-.155.944-.46 1.373a.74.74 0 0 1-.604.31Z"/><path d="M10.466 13.83c-1.382 0-2.697-.3-3.697-.848C5.63 12.358 5 11.478 5 10.505a.74.74 0 1 1 1.48 0c0 .401.365.83 1 1.178.774.424 1.863.667 2.986.667 1.123 0 2.215-.243 2.987-.667.635-.345.999-.777.999-1.178a.74.74 0 1 1 1.48 0c0 .973-.627 1.853-1.769 2.477-.999.548-2.312.849-3.697.849ZM18.134 19.686c-1.52 0-2.96-.33-4.055-.93-1.236-.676-1.917-1.625-1.917-2.673s.681-1.997 1.917-2.674c1.096-.599 2.536-.929 4.055-.929 1.52 0 2.962.33 4.055.93 1.236.676 1.918 1.628 1.918 2.673 0 1.045-.681 1.996-1.918 2.674-1.095.599-2.535.929-4.055.929Zm0-5.725c-1.257 0-2.475.272-3.343.747-.73.4-1.148.9-1.148 1.375s.418.976 1.148 1.375c.868.473 2.085.747 3.343.747 1.26 0 2.476-.272 3.344-.747.73-.4 1.148-.9 1.148-1.375s-.42-.976-1.148-1.375c-.868-.475-2.085-.747-3.344-.747Z"/><path d="M18.134 25c-1.52 0-2.96-.33-4.055-.93-1.236-.675-1.917-1.625-1.917-2.673v-5.314a.74.74 0 0 1 1.481 0v5.314c0 .475.418.976 1.148 1.375.868.475 2.086.748 3.343.748 1.258 0 2.476-.273 3.344-.748.728-.398 1.148-.9 1.148-1.375v-5.314a.74.74 0 0 1 1.48 0v5.314c0 1.048-.68 1.998-1.917 2.674-1.095.6-2.535.93-4.055.93Z"/><path d="M18.134 22.343c-1.52 0-2.96-.33-4.055-.93-1.236-.676-1.917-1.626-1.917-2.673a.74.74 0 1 1 1.481 0c0 .474.418.976 1.148 1.374.868.476 2.086.748 3.343.748 1.258 0 2.476-.272 3.344-.748.728-.398 1.148-.9 1.148-1.374a.74.74 0 1 1 1.48 0c0 1.047-.68 1.997-1.917 2.674-1.095.599-2.535.929-4.055.929ZM22.86 15.67a.74.74 0 0 1-.74-.741v-2.073a.74.74 0 1 1 1.48 0v2.073a.74.74 0 0 1-.74.74Z"/></svg>
\ No newline at end of file

icons/transactions.svg

-<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.433 12.64a1.212 1.212 0 0 1-.857.354H6.212a1.212 1.212 0 0 1-1.12-.745 1.212 1.212 0 0 1 .266-1.321L8.994 7.29a1.212 1.212 0 0 1 1.71 1.71L9.14 10.57h13.436a1.212 1.212 0 0 1 .857 2.068ZM7.424 17.236h16.363a1.213 1.213 0 0 1 1.121.745 1.212 1.212 0 0 1-.266 1.321l-3.636 3.637a1.213 1.213 0 1 1-1.71-1.71l1.564-1.569H7.424a1.212 1.212 0 0 1 0-2.424Z" fill="#4A5568"/></svg>
+<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.433 12.64a1.212 1.212 0 0 1-.857.354H6.212a1.212 1.212 0 0 1-1.12-.745 1.212 1.212 0 0 1 .266-1.321L8.994 7.29a1.212 1.212 0 0 1 1.71 1.71L9.14 10.57h13.436a1.212 1.212 0 0 1 .857 2.068ZM7.424 17.236h16.363a1.213 1.213 0 0 1 1.121.745 1.212 1.212 0 0 1-.266 1.321l-3.636 3.637a1.213 1.213 0 1 1-1.71-1.71l1.564-1.569H7.424a1.212 1.212 0 0 1 0-2.424Z"/></svg>
\ No newline at end of file

package.json

@@ -10,6 +10,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.2",
     "@chakra-ui/react": "^2.1.2",
     "@chakra-ui/theme-tools": "^2.0.2",
     "@emotion/react": "^11",

theme/components/Form.ts

@@ -48,7 +48,7 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
         pointerEvents: 'none',
         margin: 0,
         transformOrigin: 'left top',
-        fontSize: '16px',
+        fontSize: 'md',
         lineHeight: '20px',
       },
       'input:not(:placeholder-shown) + label': {

theme/components/Input.ts

@@ -6,7 +6,7 @@ import getDefaultFormColors from '../utils/getDefaultFormColors';
 
 const sizes: Record<string, SystemStyleObject> = {
   md: {
-    fontSize: '16px',
+    fontSize: 'md',
     lineHeight: '20px',
     px: '20px',
     py: '20px',

theme/components/Modal.ts

@@ -17,7 +17,7 @@ const Modal: ComponentMultiStyleConfig = {
     header: {
       padding: 0,
       marginBottom: '20px',
-      fontSize: '24px',
+      fontSize: '2xl',
     },
     body: {
       padding: 0,

ui/AddressModal/AddressModal.tsx

@@ -102,7 +102,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
             <Input placeholder=" " onChange={ onTagChange } value={ tag || '' } maxLength={ 35 }/>
             <FormLabel>Private tag (max 35 characters)</FormLabel>
           </FormControl>
-          <Text color="gray.600" fontSize="14px" marginBottom="32px">
+          <Text color="gray.600" fontSize="sm" marginBottom="32px">
             Please select what types of notifications you will receive:
           </Text>
           <Box marginBottom="32px">
@@ -118,7 +118,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
               }) }
             </Grid>
           </Box>
-          <Text color="gray.600" fontSize="14px" marginBottom="20px">Notification methods:</Text>
+          <Text color="gray.600" fontSize="sm" marginBottom="20px">Notification methods:</Text>
           <Checkbox
             isChecked={ notification }
             colorScheme="green"

ui/Page/Page.tsx

@@ -14,10 +14,10 @@ const Page = ({ children }: Props) => {
       <HStack
         w="100%"
         minH="100vh"
-        padding="36px 60px 48px 40px"
         bgColor="white"
-        spacing="12"
+        spacing={ 12 }
         alignItems="stretch"
+        paddingRight="60px"
       >
         <AccountNav/>
         <VStack>

ui/WatchlistTable/WatchListAddressItem.tsx

@@ -10,34 +10,34 @@ import WalletIcon from '../../icons/wallet.svg';
 
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   return (
-    <HStack spacing="12px" align="top">
+    <HStack spacing={ 3 } align="top">
       <Image src="/acc.png" alt="Account Image" w="50px" h="50px"/>
       <VStack align="stretch" overflow="hidden">
-        <HStack spacing="8px" alignContent="center">
+        <HStack spacing={ 2 } alignContent="center">
           <Link href="#" color="blue.500" title={ item.address } overflow="hidden" textOverflow="ellipsis">
             { item.address }
           </Link>
           <CopyToClipboard text={ item.address }/>
         </HStack>
         { item.tokenBalance && (
-          <HStack spacing="0">
+          <HStack spacing={ 0 } fontSize="xs">
             <Image src="./xdai.png" alt="chain-logo" marginRight="10px" w="16px" h="16px"/>
-            <Text fontSize="12px">{ item.tokenBalance + ' xDAI' }</Text>
-            <Text fontSize="12px" color="gray.500">{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
+            <Text>{ item.tokenBalance + ' xDAI' }</Text>
+            <Text color="gray.500">{ `${ nbsp }($${ item.tokenBalanceUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.tokensAmount && (
-          <HStack spacing="0">
+          <HStack spacing={ 0 } fontSize="xs">
             <Icon as={ TokensIcon } marginRight="10px" w="17px" h="16px"/>
-            <Text fontSize="12px">{ item.tokensAmount + ' tokens' }</Text>
-            <Text fontSize="12px" color="gray.500">{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
+            <Text>{ item.tokensAmount + ' tokens' }</Text>
+            <Text color="gray.500">{ `${ nbsp }($${ item.tokensUSD } USD)` }</Text>
           </HStack>
         ) }
         { item.totalUSD && (
-          <HStack spacing="0">
+          <HStack spacing={ 0 } fontSize="xs">
             <Icon as={ WalletIcon } marginRight="10px" w="16px" h="16px"/>
-            <Text fontSize="12px">{ `Total balance:${ nbsp }` }</Text>
-            <Link fontSize="12px" href="#" color="blue.500">{ `$${ item.totalUSD } USD` }</Link>
+            <Text>{ `Total balance:${ nbsp }` }</Text>
+            <Link href="#" color="blue.500">{ `$${ item.totalUSD } USD` }</Link>
           </HStack>
         ) }
       </VStack>

ui/header/Header.tsx

@@ -3,7 +3,7 @@ import { HStack, Text } from '@chakra-ui/react';
 
 const AccountNav = () => {
   return (
-    <HStack height="60px" width="100%" bg="gray.50" alignItems="center" justifyContent="center">
+    <HStack height="60px" width="100%" bg="gray.50" alignItems="center" justifyContent="center" marginTop={ 9 }>
       <Text>Header</Text>
     </HStack>
   )

ui/navigation/AccountNavLink.tsx

@@ -20,6 +20,7 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
         p="15px 20px"
         color={ isActive ? 'blue.600' : 'gray.600' }
         bgColor={ isActive ? 'blue.50' : 'transparent' }
+        _hover={{ color: 'blue.600' }}
         borderRadius="base"
       >
         <HStack spacing={ 3 }>

ui/navigation/MainNavLink.tsx

+import React from 'react';
+import { Link, Icon, Text, HStack } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import { ChevronRightIcon } from '@chakra-ui/icons'
+
+interface Props {
+  pathname: string;
+  text: string;
+  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+
+const MainNavLink = ({ text, pathname, icon }: Props) => {
+  const router = useRouter();
+  const isActive = router.pathname === pathname;
+
+  return (
+    <NextLink href={ pathname } passHref>
+      <Link
+        w="220px"
+        p="15px 20px"
+        color={ isActive ? 'blue.600' : 'gray.600' }
+        bgColor={ isActive ? 'blue.50' : 'transparent' }
+        borderRadius="base"
+        _hover={{ color: 'blue.600' }}
+      >
+        <HStack justifyContent="space-between">
+          <HStack spacing={ 3 }>
+            <Icon as={ icon } boxSize="30px"/>
+            <Text>{ text }</Text>
+          </HStack>
+          <ChevronRightIcon boxSize={ 6 }/>
+        </HStack>
+      </Link>
+    </NextLink>
+  )
+}
+
+export default MainNavLink;

ui/navigation/MainNavigation.tsx

 import React from 'react';
+import { VStack } from '@chakra-ui/react';
+import MainNavLink from './MainNavLink';
+import BlocksIcon from '../../icons/block.svg'
+import TransactionsIcon from '../../icons/transactions.svg'
+import TokensIcon from '../../icons/token.svg'
+import AppsIcon from '../../icons/apps.svg';
+import BlockscoutIcon from '../../icons/blockscout.svg';
 
-import { VStack, Text } from '@chakra-ui/react';
+const navItems = [
+  { text: 'Blocks', pathname: '/blocks', icon: BlocksIcon },
+  { text: 'Transactions', pathname: '/transactions', icon: TransactionsIcon },
+  { text: 'Tokens', pathname: '/tokens', icon: TokensIcon },
+  { text: 'Apps', pathname: '/apps', icon: AppsIcon },
+  { text: 'Blockscout', pathname: '/blockscout', icon: BlockscoutIcon },
+]
 
 const MainNavigation = () => {
   return (
-    <VStack spacing="3" bg="gray.50" w="100%" h="200px" alignItems="center" justifyContent="center">
-      <Text>MainNav</Text>
+    <VStack spacing="3">
+      { navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
     </VStack>
   )
 }

ui/navigation/NavFooter.tsx

 import React from 'react';
 
-import { VStack, Text } from '@chakra-ui/react';
+import { VStack, Text, HStack, Icon, Link } from '@chakra-ui/react';
+
+import ghIcon from '../../icons/social/git.svg';
+import twIcon from '../../icons/social/tweet.svg';
+import tgIcon from '../../icons/social/telega.svg';
+import statsIcon from '../../icons/social/stats.svg';
+
+const SOCIAL_LINKS = [
+  { link: '#gh', icon: ghIcon },
+  { link: '#tw', icon: twIcon },
+  { link: '#tg', icon: tgIcon },
+  { link: '#stats', icon: statsIcon },
+]
 
 const NavFooter = () => {
   return (
-    <VStack spacing="3" bg="gray.50" w="100%" h="100px" alignItems="center" justifyContent="center">
-      <Text>Footer</Text>
+    <VStack
+      spacing={ 8 }
+      borderTop="1px solid"
+      borderColor="gray.200"
+      paddingTop={ 8 }
+      w="100%"
+      alignItems="baseline"
+      color="gray.500"
+      fontSize="xs"
+    >
+      <HStack>
+        { SOCIAL_LINKS.map(sl => {
+          return (
+            <Link href={ sl.link } key={ sl.link }>
+              <Icon as={ sl.icon } boxSize={ 5 }/>
+            </Link>
+          )
+        }) }
+      </HStack>
+      <Text>
+        Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
+      </Text>
+      <Text>Version: <Link color="blue.500">v4.2.1-beta</Link></Text>
     </VStack>
   )
 }

ui/navigation/Navigation.tsx

@@ -10,7 +10,14 @@ import networksIcon from '../../icons/networks.svg';
 
 const Navigation = () => {
   return (
-    <VStack alignItems="flex-start" spacing={ 12 }>
+    <VStack
+      alignItems="flex-start"
+      spacing={ 12 }
+      borderRight="1px solid"
+      borderColor="gray.200"
+      padding="48px 40px"
+      width="300px"
+    >
       <HStack justifyContent="space-between" w="100%" padding={ 4 }>
         <Icon as={ logoIcon } width="142px" height="26px" color="blue.600"/>
         <Icon as={ networksIcon } width="20px" height="20px"/>

yarn.lock

@@ -227,6 +227,21 @@
   dependencies:
     "@chakra-ui/utils" "2.0.1"
 
+"@chakra-ui/icon@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.2.tgz#e8b380981690a543382f56f9d184f6b28f4b3d83"
+  integrity sha512-sas37byldn5O/TTIKHzxHBujEYqVPXegisoMqutLtF60fpXnb62aG1JTyorXSG3zJxJWQW7+AvjbOGyWKHXc0Q==
+  dependencies:
+    "@chakra-ui/utils" "2.0.2"
+
+"@chakra-ui/icons@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.2.tgz#4ef4c3e1c6eb7a8f7d5de59635811f0c68104d4b"
+  integrity sha512-UY7vP8E5pv2a4sd1SiezgVbmq1/tRfnehk6PatunrTvGMxQNhSKJJoiRI/wCtUfMoMz+yp9+ekc1ksJVCnokRg==
+  dependencies:
+    "@chakra-ui/icon" "3.0.2"
+    "@types/react" "^18.0.1"
+
 "@chakra-ui/image@2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.2.tgz#167a38d6c96a635ea5989f0e0e9eee27be005fe4"
@@ -937,6 +952,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.1":
+  version "18.0.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d"
+  integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"