Merge pull request #24 from blockscout/redesign-i

page layout, navigation, footer

icons/ABI.svg

-<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M5.176 5.29a1.253 1.253 0 0 0-1.76.16L.29 9.2a1.247 1.247 0 0 0 0 1.6l3.125 3.75a1.25 1.25 0 1 0 1.919-1.601L2.876 10l2.459-2.949a1.25 1.25 0 0 0-.159-1.76Zm6.318-2.765a1.261 1.261 0 0 0-1.47.981l-2.5 12.5a1.247 1.247 0 0 0 1.229 1.493 1.249 1.249 0 0 0 1.223-1.005l2.5-12.5a1.246 1.246 0 0 0-.982-1.47ZM19.709 9.2l-3.125-3.75a1.249 1.249 0 1 0-1.919 1.6L17.124 10l-2.459 2.949a1.251 1.251 0 0 0 .584 2 1.248 1.248 0 0 0 1.335-.399l3.125-3.75a1.247 1.247 0 0 0 0-1.6Z"/></svg>
+<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M10.176 10.291a1.253 1.253 0 0 0-1.76.159L5.29 14.2a1.247 1.247 0 0 0 0 1.6l3.125 3.75a1.25 1.25 0 1 0 1.919-1.6L7.876 15l2.459-2.949a1.25 1.25 0 0 0-.159-1.76ZM16.494 7.525a1.261 1.261 0 0 0-1.47.981l-2.5 12.5a1.246 1.246 0 0 0 1.229 1.494 1.249 1.249 0 0 0 1.223-1.006l2.5-12.5a1.246 1.246 0 0 0-.982-1.469ZM24.709 14.2l-3.125-3.75a1.251 1.251 0 0 0-2.209.687 1.25 1.25 0 0 0 .29.914l2.459 2.95-2.459 2.948a1.248 1.248 0 0 0 .584 2 1.25 1.25 0 0 0 1.335-.398l3.125-3.75a1.247 1.247 0 0 0 0-1.601Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(5 5)" d="M0 0h20v20H0z"/></clipPath></defs></svg>
\ No newline at end of file

icons/API.svg

+<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.297 8.699a1.699 1.699 0 0 1 3.397 0V9.6a1 1 0 1 0 2 0v-.902a3.699 3.699 0 1 0-7.397 0v6.268a1 1 0 1 0 2 0V8.699Zm5.397 6.298a1 1 0 1 0-2 0v6.295a1.699 1.699 0 0 1-3.397 0v-.913a1 1 0 1 0-2 0v.913a3.699 3.699 0 1 0 7.397 0v-6.295Zm-10.003-1.7c-.931 0-1.691.758-1.691 1.699 0 .94.76 1.698 1.691 1.698h6.304a1 1 0 0 1 0 2H8.691A3.695 3.695 0 0 1 5 14.996c0-2.04 1.65-3.699 3.691-3.699h.902a1 1 0 1 1 0 2h-.902Zm6.304-2a1 1 0 0 0 0 2h6.292c.943 0 1.704.762 1.704 1.699 0 .936-.761 1.698-1.704 1.698h-.865a1 1 0 1 0 0 2h.865a3.701 3.701 0 0 0 3.704-3.698 3.701 3.701 0 0 0-3.704-3.699h-6.292Z"/></svg>
\ No newline at end of file

icons/apiKeys.svg

-<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.297 3.699a1.699 1.699 0 0 1 3.397 0V4.6a1 1 0 1 0 2 0v-.902a3.699 3.699 0 1 0-7.397 0v6.268a1 1 0 0 0 2 0V3.699Zm5.397 6.298a1 1 0 1 0-2 0v6.295a1.699 1.699 0 0 1-3.397 0v-.913a1 1 0 1 0-2 0v.913a3.699 3.699 0 0 0 7.397 0V9.997ZM3.69 8.297c-.93 0-1.69.758-1.69 1.699 0 .94.76 1.698 1.691 1.698h6.304a1 1 0 0 1 0 2H3.691A3.695 3.695 0 0 1 0 9.996c0-2.04 1.65-3.699 3.691-3.699h.902a1 1 0 1 1 0 2h-.902Zm6.304-2a1 1 0 1 0 0 2h6.292c.943 0 1.704.762 1.704 1.699a1.7 1.7 0 0 1-1.704 1.698h-.865a1 1 0 1 0 0 2h.865a3.701 3.701 0 0 0 3.704-3.698 3.701 3.701 0 0 0-3.704-3.699H9.995Z"/></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="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

+<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/logo.svg

+<svg width="143" height="26" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.513 1a1 1 0 0 0-1-1H6.068a1 1 0 0 0-1 1v3.417a1 1 0 0 1-1 1H1.49a1 1 0 0 0-1 1V25a1 1 0 0 0 1 1h3.445a1 1 0 0 0 1-1V6.417a1 1 0 0 1 1-1h2.578a1 1 0 0 0 1-1V1Zm10.926 0a1 1 0 0 0-1-1h-3.445a1 1 0 0 0-1 1v3.417a1 1 0 0 0 1 1h2.389a1 1 0 0 1 1 1V25a1 1 0 0 0 1 1h3.444a1 1 0 0 0 1-1V6.417a1 1 0 0 0-1-1H22.44a1 1 0 0 1-1-1V1Zm-5.52 10.369a1 1 0 0 0-1-1h-3.445a1 1 0 0 0-1 1v8.524a1 1 0 0 0 1 1h3.445a1 1 0 0 0 1-1v-8.524Z"/><path d="M35.113 5.893h6.228c2.638 0 4.065 1.434 4.065 3.498.02.645-.15 1.28-.486 1.825a3.12 3.12 0 0 1-1.395 1.221v.067a3.548 3.548 0 0 1 1.842 1.364c.453.652.687 1.44.666 2.242 0 2.308-1.544 4.122-4.346 4.122h-6.574V5.893Zm6.27 5.827c.996 0 1.71-.761 1.71-1.92 0-1.158-.714-1.92-1.71-1.92h-3.95v3.84h3.95Zm.282 6.54c1.19 0 2.054-.94 2.054-2.306 0-1.367-.865-2.285-2.054-2.285h-4.232v4.592h4.232ZM48.93 7.599h-1.303V5.436h3.59v14.786h-2.293L48.931 7.6Zm4.409 7.324c0-3.248 2.317-5.644 5.517-5.644s5.535 2.374 5.535 5.644-2.313 5.623-5.535 5.623-5.517-2.375-5.517-5.623Zm4.911 3.495h1.236c1.406 0 2.638-1.546 2.638-3.495 0-1.948-1.236-3.52-2.638-3.52H58.25c-1.405 0-2.638 1.6-2.638 3.52s1.233 3.495 2.638 3.495Zm7.63-3.518c0-3.314 2.21-5.621 5.388-5.621 2.552 0 4.562 1.366 4.887 4.16h-2.227c-.217-1.412-1.19-2.039-2.184-2.039h-1.082c-1.384 0-2.508 1.568-2.508 3.52s1.124 3.54 2.508 3.54h1.082a2.163 2.163 0 0 0 1.494-.597c.409-.386.662-.916.711-1.487h2.227c-.308 2.755-2.335 4.189-4.942 4.189-3.17-.02-5.353-2.349-5.353-5.664Zm12.348-9.464h2.27v8.156h1.647l3.07-4.01h2.595l-3.784 4.951 3.957 5.69h-2.725l-3.308-4.704h-1.452v4.703h-2.27V5.436ZM89.02 17.029h2.185c.108.94.67 1.546 1.853 1.546h1.43c1.017 0 1.493-.538 1.493-1.255 0-.717-.39-1.142-1.32-1.28l-2.403-.32c-2.032-.246-2.94-1.5-2.94-3.136 0-2.15 1.544-3.315 4.303-3.315 2.64 0 4.24 1.098 4.324 3.54h-2.184c-.108-.92-.475-1.569-1.6-1.569h-1.3c-.973 0-1.428.538-1.428 1.232 0 .695.433 1.165 1.363 1.3l2.425.32c1.968.246 2.876 1.343 2.876 3.046 0 2.195-1.406 3.404-4.52 3.404-3.012.004-4.473-1.184-4.556-3.513ZM99.524 14.9c0-3.314 2.205-5.621 5.387-5.621 2.552 0 4.563 1.366 4.887 4.16h-2.227c-.216-1.412-1.189-2.039-2.184-2.039h-1.081c-1.387 0-2.512 1.568-2.512 3.52s1.125 3.54 2.512 3.54h1.081a2.165 2.165 0 0 0 1.495-.597 2.32 2.32 0 0 0 .711-1.487h2.227c-.309 2.755-2.336 4.189-4.943 4.189-3.166-.02-5.353-2.349-5.353-5.664Zm11.738.023c0-3.248 2.314-5.644 5.514-5.644 3.201 0 5.539 2.374 5.539 5.644s-2.314 5.623-5.539 5.623c-3.225 0-5.514-2.375-5.514-5.623Zm4.909 3.495h1.236c1.405 0 2.641-1.546 2.641-3.495 0-1.948-1.236-3.52-2.641-3.52h-1.236c-1.406 0-2.638 1.6-2.638 3.52s1.239 3.495 2.644 3.495h-.006Zm8.029-2.128V9.595h2.27v6.295c0 1.545.757 2.464 1.752 2.464h1.235c1.06 0 2.011-1.008 2.011-2.464V9.595h2.274v10.64h-2.209V18.78c-.618 1.098-1.708 1.77-3.373 1.77-2.49-.003-3.96-1.504-3.96-4.26Zm13.32 1.456v-6.08h-1.99v-2.07h1.99V6.612h2.292v2.982h2.681v2.061h-2.681v5.42c0 .695.216 1.031.951 1.031h1.817v2.128h-2.472c-1.662-.003-2.588-.899-2.588-2.49Z"/></svg>
\ No newline at end of file

icons/networks.svg

+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.632a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263ZM0 10a2.632 2.632 0 1 1 5.263 0A2.632 2.632 0 0 1 0 10Zm7.368 0a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0Zm10-2.632a2.632 2.632 0 1 0 0 5.264 2.632 2.632 0 0 0 0-5.264Zm-2.631 10a2.632 2.632 0 1 1 5.263 0 2.632 2.632 0 0 1-5.263 0ZM2.632 14.737a2.632 2.632 0 1 0 0 5.263 2.632 2.632 0 0 0 0-5.263Zm7.368 0A2.632 2.632 0 1 0 10 20a2.632 2.632 0 0 0 0-5.263Z" fill="#718096"/></svg>
\ No newline at end of file

icons/privateTag.svg

-<svg width="21" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M8.61 20a2.262 2.262 0 0 1-1.615-.665L.677 13.017a2.265 2.265 0 0 1 0-3.23L9.133 1.33C9.893.57 11.271 0 12.316 0h5.416c1.235 0 2.28 1.045 2.28 2.28v5.416c0 1.045-.57 2.423-1.33 3.183l-8.456 8.456A2.262 2.262 0 0 1 8.61 20Zm3.706-18.575c-.665 0-1.71.428-2.185.903l-8.456 8.456a.832.832 0 0 0 0 1.188l6.318 6.318c.332.332.902.332 1.188 0l8.456-8.456c.475-.475.902-1.473.902-2.186V2.233a.852.852 0 0 0-.855-.855h-5.368v.047Z"/><path d="M14.311 8.504A2.808 2.808 0 0 1 11.508 5.7a2.808 2.808 0 0 1 2.803-2.803A2.808 2.808 0 0 1 17.114 5.7a2.808 2.808 0 0 1-2.803 2.803Zm0-4.276a1.48 1.48 0 0 0-1.473 1.473 1.48 1.48 0 0 0 1.473 1.472 1.48 1.48 0 0 0 1.473-1.472 1.48 1.48 0 0 0-1.473-1.473Z"/></svg>
\ No newline at end of file

icons/privattags.svg

+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.61 25a2.262 2.262 0 0 1-1.615-.665l-6.318-6.318a2.265 2.265 0 0 1 0-3.23l8.456-8.457c.76-.76 2.138-1.33 3.183-1.33h5.416c1.235 0 2.28 1.045 2.28 2.28v5.416c0 .403-.085.856-.233 1.304h-1.588c.208-.443.348-.944.348-1.351V7.232a.852.852 0 0 0-.855-.855h-5.368v.047c-.665 0-1.71.428-2.185.903l-8.456 8.456a.832.832 0 0 0 0 1.187l6.318 6.319c.332.332.902.332 1.188 0L16 21.47v2.09l-.774.775A2.262 2.262 0 0 1 13.61 25Z" fill="currentColor"/><path d="m11.995 24.335-.176.177.176-.177Zm-6.318-6.318.177-.177-.177.177Zm0-3.23.177.176-.177-.177Zm8.456-8.457-.177-.177.177.177ZM24.779 14v.25h.18l.057-.172L24.78 14Zm-1.588 0-.227-.107-.167.357h.394V14Zm-5.875-7.622v-.25h-.25v.25h.25Zm0 .047v.25h.25v-.25h-.25Zm-2.185.903-.177-.177.177.177Zm-8.456 8.456.176.177-.176-.177Zm0 1.187-.177.177.177-.177Zm6.318 6.319-.177.177.177-.177Zm1.188 0-.177-.177-.007.007-.006.007.19.163ZM16 21.47h.25v-.603l-.427.427.177.176Zm0 2.09.177.177.073-.073v-.103H16Zm-.774.775.176.177-.176-.177Zm-3.408.177a2.512 2.512 0 0 0 1.792.738v-.5a2.012 2.012 0 0 1-1.438-.592l-.354.354ZM5.5 18.193l6.319 6.319.353-.354-6.318-6.318-.354.353Zm0-3.584c-1 1-1 2.584 0 3.584l.354-.353a2.015 2.015 0 0 1 0-2.877l-.354-.354Zm8.456-8.456L5.5 14.61l.354.354 8.456-8.456-.354-.354Zm3.36-1.403c-.564 0-1.203.153-1.795.4-.592.246-1.156.595-1.565 1.003l.354.354c.351-.352.856-.668 1.404-.896.548-.229 1.12-.361 1.602-.361v-.5Zm5.416 0h-5.416v.5h5.416v-.5Zm2.53 2.53c0-1.373-1.157-2.53-2.53-2.53v.5c1.097 0 2.03.933 2.03 2.03h.5Zm0 5.416V7.28h-.5v5.416h.5Zm-.246 1.382c.155-.466.246-.946.246-1.382h-.5c0 .37-.079.796-.22 1.226l.474.156Zm-1.825.172h1.588v-.5h-1.588v.5Zm.098-1.601c0 .359-.126.822-.325 1.245l.453.213c.218-.464.372-1.002.372-1.458h-.5Zm0-5.416v5.416h.5V7.232h-.5Zm-.605-.605c.337 0 .605.268.605.605h.5c0-.613-.492-1.105-1.105-1.105v.5Zm-5.368 0h5.368v-.5h-5.368v.5Zm.25-.203v-.047h-.5v.047h.5Zm-2.259 1.08c.206-.206.553-.416.94-.575.387-.16.781-.255 1.069-.255v-.5c-.377 0-.839.119-1.26.292-.42.173-.833.414-1.102.684l.353.354ZM6.851 15.96l8.456-8.456-.353-.354-8.456 8.456.353.354Zm0 .834a.582.582 0 0 1 0-.834l-.353-.354c-.43.43-.43 1.111 0 1.541l.353-.353Zm6.319 6.318L6.85 16.795l-.353.353 6.318 6.319.354-.354Zm.82.014c-.178.208-.577.23-.82-.014l-.354.354c.422.422 1.162.443 1.554-.014l-.38-.326Zm1.833-1.833-1.82 1.819.354.354 1.82-1.82-.354-.353Zm.427 2.267v-2.09h-.5v2.09h.5Zm-.848.95.775-.774-.354-.353-.774.774.353.354Zm-1.792.739c.684 0 1.318-.264 1.792-.738l-.353-.354c-.38.38-.887.592-1.439.592v.5ZM25 24v-5c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1Zm-3-2.5c0 .55-.45 1-1 1s-1-.45-1-1 .45-1 1-1 1 .45 1 1Z" fill="currentColor"/><path d="M23.5 20v-2.5c0-1.4-1.1-2.5-2.5-2.5s-2.5 1.1-2.5 2.5V20" stroke="currentColor" stroke-miterlimit="10"/></svg>
\ No newline at end of file

icons/publicTag.svg

-<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 3.75h-5.732l-8.75 8.75 5.732 5.733 8.75-8.75V3.75Zm0-1.25a1.25 1.25 0 0 1 1.25 1.25v5.732c0 .332-.132.65-.366.884l-8.75 8.75a1.25 1.25 0 0 1-1.768 0l-5.732-5.732a1.25 1.25 0 0 1 0-1.768l8.75-8.75a1.25 1.25 0 0 1 .883-.366H17.5Z"/><path d="M13.75 6.875a.625.625 0 1 1 1.25 0 .625.625 0 0 1-1.25 0Zm-1.25 0a1.875 1.875 0 1 0 3.75 0 1.875 1.875 0 0 0-3.75 0ZM11.143 1.25c-.332 0-.65.132-.884.366L.937 10.937l-.053-.053a1.25 1.25 0 0 1 0-1.768l8.75-8.75A1.25 1.25 0 0 1 10.517 0h5.733a1.25 1.25 0 0 1 1.25 1.25h-6.357Z"/></svg>
\ No newline at end of file

icons/publictags.svg

+<svg width="30" height="30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.61 25a2.262 2.262 0 0 1-1.615-.665l-6.318-6.318a2.265 2.265 0 0 1 0-3.23l8.456-8.457c.76-.76 2.138-1.33 3.183-1.33h5.416c1.235 0 2.28 1.045 2.28 2.28v5.416c0 1.045-.57 2.423-1.33 3.183l-8.456 8.456A2.262 2.262 0 0 1 13.61 25Zm3.706-18.575c-.665 0-1.71.428-2.185.903l-8.456 8.456a.832.832 0 0 0 0 1.187l6.318 6.319c.332.332.902.332 1.188 0l8.456-8.456c.475-.475.902-1.473.902-2.185V7.232a.852.852 0 0 0-.855-.855h-5.368v.047Z" stroke="currentColor" stroke-width=".5"/><path d="M19.311 13.504a2.808 2.808 0 0 1-2.803-2.803 2.808 2.808 0 0 1 2.803-2.803 2.808 2.808 0 0 1 2.803 2.803 2.808 2.808 0 0 1-2.803 2.803Zm0-4.276a1.48 1.48 0 0 0-1.473 1.473 1.48 1.48 0 0 0 1.473 1.473 1.48 1.48 0 0 0 1.473-1.473 1.48 1.48 0 0 0-1.473-1.473Z" stroke="currentColor" stroke-width=".5"/></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" viewBox="0 0 22 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/star.svg

-<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M15.713 20a.724.724 0 0 1-.354-.09L10 16.956 4.64 19.91a.728.728 0 0 1-.796-.061.788.788 0 0 1-.256-.342.827.827 0 0 1-.045-.432l1.024-6.252L.229 8.394a.802.802 0 0 1-.207-.377.829.829 0 0 1 .015-.435.795.795 0 0 1 .232-.361.741.741 0 0 1 .379-.179L6.64 6.13 9.321.442a.78.78 0 0 1 .28-.323.731.731 0 0 1 .798 0 .78.78 0 0 1 .28.323l2.68 5.688 5.993.912a.74.74 0 0 1 .379.178.8.8 0 0 1 .232.361.828.828 0 0 1-.192.813l-4.338 4.428 1.024 6.252a.83.83 0 0 1-.167.644.762.762 0 0 1-.26.208.728.728 0 0 1-.319.074h.002ZM2.383 8.38l3.523 3.598c.088.09.154.2.192.321a.829.829 0 0 1 .026.378l-.832 5.08 4.355-2.397a.73.73 0 0 1 .706 0l4.356 2.399-.833-5.082a.828.828 0 0 1 .026-.378.799.799 0 0 1 .191-.323l3.524-3.596-4.87-.74a.738.738 0 0 1-.335-.143.785.785 0 0 1-.234-.29L10 2.585 7.822 7.207a.785.785 0 0 1-.234.29.738.738 0 0 1-.336.143l-4.87.74Z"/></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="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

icons/watchlist.svg

+<svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.712 25a.724.724 0 0 1-.353-.09L15 21.956 9.64 24.91a.728.728 0 0 1-.796-.061.788.788 0 0 1-.256-.342.827.827 0 0 1-.045-.432l1.024-6.252-4.338-4.428a.803.803 0 0 1-.207-.377.828.828 0 0 1 .015-.435.795.795 0 0 1 .232-.361.741.741 0 0 1 .379-.179l5.993-.912 2.68-5.688a.78.78 0 0 1 .28-.323.732.732 0 0 1 .798 0 .78.78 0 0 1 .28.323l2.68 5.688 5.993.912c.14.021.27.083.379.178.108.096.188.22.232.361a.828.828 0 0 1-.192.813l-4.338 4.428 1.024 6.252a.83.83 0 0 1-.167.644.762.762 0 0 1-.26.208.728.728 0 0 1-.319.074h.002ZM7.382 13.38l3.524 3.598a.8.8 0 0 1 .192.321.829.829 0 0 1 .026.378l-.832 5.08 4.355-2.397a.73.73 0 0 1 .706 0l4.356 2.399-.833-5.082a.828.828 0 0 1 .026-.378.799.799 0 0 1 .191-.323l3.524-3.596-4.87-.74a.738.738 0 0 1-.335-.143.785.785 0 0 1-.234-.29L15 7.585l-2.178 4.622a.785.785 0 0 1-.234.29.738.738 0 0 1-.336.143l-4.87.74Z" fill="currentColor" stroke="currentColor" stroke-width=".5"/></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",

pages/index.tsx

 import React from 'react';
 import type { NextPage } from 'next';
 import { Center } from '@chakra-ui/react';
-import Page from '../components/Page/Page';
+import Page from '../ui/Page/Page';
 
 const Home: NextPage = () => {
   return (

pages/watchlist.tsx

-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import type { NextPage } from 'next';
+import Head from 'next/head'
 
-import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
-
-import Page from '../components/Page/Page';
-
-import WatchlistTable from '../components/WatchlistTable/WatchlistTable';
-import AddressModal from '../components/AddressModal/AddressModal';
-
-import type { TWatchlistItem } from '../data/watchlist';
-import { watchlist } from '../data/watchlist';
-import DeleteModal from '../components/DeleteModal/DeleteModal';
-
-const WatchList: NextPage = () => {
-  const addressModalProps = useDisclosure();
-  const deleteModalProps = useDisclosure();
-
-  const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
-  const [ deleteModalData, setDeleteModalData ] = useState<string>();
-
-  const onEditClick = useCallback((data: TWatchlistItem) => {
-    setAddressModalData(data);
-    addressModalProps.onOpen();
-  }, [ addressModalProps ])
-
-  const onAddressModalClose = useCallback(() => {
-    setAddressModalData(undefined);
-    addressModalProps.onClose();
-  }, [ addressModalProps ]);
-
-  const onDeleteClick = useCallback((data: TWatchlistItem) => {
-    setDeleteModalData(data.address);
-    deleteModalProps.onOpen();
-  }, [ deleteModalProps ])
-
-  const onDeleteModalClose = useCallback(() => {
-    setDeleteModalData(undefined);
-    deleteModalProps.onClose();
-  }, [ deleteModalProps ]);
+import WatchList from '../ui/pages/Watchlist';
 
+const WatchListPage: NextPage = () => {
   return (
-    <Page>
-      <Box h="100%">
-        <Text marginBottom="40px">An Email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
-        { Boolean(watchlist.length) && (
-          <WatchlistTable
-            data={ watchlist }
-            onDeleteClick={ onDeleteClick }
-            onEditClick={ onEditClick }
-          />
-        ) }
-        <Box marginTop="32px">
-          <Button
-            colorScheme="blue"
-            onClick={ addressModalProps.onOpen }
-          >
-            Add address
-          </Button>
-        </Box>
-      </Box>
-      <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
-      <DeleteModal { ...deleteModalProps } onClose={ onDeleteModalClose } address={ deleteModalData }/>
-    </Page>
+    <>
+      <Head><title>Watch list</title></Head>
+      <WatchList/>
+    </>
   );
-};
+}
 
-export default WatchList
+export default WatchListPage

theme/components/Button.ts

@@ -4,6 +4,34 @@ const Button: ComponentStyleConfig = {
   baseStyle: {
     fontWeight: 'normal',
   },
+  variants: {
+    primary: {
+      bg: 'blue.600',
+      color: 'white',
+      _hover: {
+        bg: 'blue.400',
+        _disabled: {
+          bg: 'blue.600',
+        },
+      },
+      _disabled: {
+        opacity: 0.2,
+      },
+    },
+    secondary: {
+      bg: 'white',
+      color: 'blue.600',
+      borderColor: 'blue.600',
+      border: '2px solid',
+      _hover: {
+        color: 'blue.400',
+        borderColor: 'blue.400',
+      },
+      _disabled: {
+        opacity: 0.2,
+      },
+    },
+  },
 }
 
 export default Button;

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,

theme/foundations/colors.ts

 const colors = {
-// standard colors
   green: {
-    '50': '#dcfff0',
-    '100': '#b1feda',
-    '200': '#84fbc8',
-    '300': '#56f9b8',
-    '400': '#30f7ae',
-    '500': '#1fdd9b',
-    '600': '#11ad7d',
-    '700': '#047b5d', // <-
-    '800': '#004a33',
-    '900': '#001b0f',
+    '100': '#C6F6D5',
+    '400': '#48BB78',
+    '500': '#38A169',
+    '600': '#25855A',
   },
   blue: {
-    '50': '#e7f0ff',
-    '100': '#c2d2f1',
-    '200': '#9db3e3',
-    '300': '#7895d4',
-    '400': '#5277c6',
-    '500': '#395ead', // <-
-    '600': '#2b4987',
-    '700': '#1e3462',
-    '800': '#0f1f3e',
-    '900': '#010a1b',
+    '50': '#EBF8FF',
+    '100': '#BEE3F8',
+    '200': '#90CDF4',
+    '300': '#63B3ED',
+    '400': '#4299E1',
+    '500': '#3182CE',
+    '600': '#2B6CB0',
+    '700': '#2C5282',
+    '800': '#2A4365',
+    '900': '#1A365D',
   },
   red: {
-    '50': '#ffe4ef',
-    '100': '#feb7cc',
-    '200': '#f689aa',
-    '300': '#f15a88',
-    '400': '#ec2d66', // <-
-    '500': '#d2134c',
-    '600': '#a50c3b',
-    '700': '#77062a',
-    '800': '#490118',
-    '900': '#1e0008',
+    '500': '#E53E3E',
   },
   gray: {
-    '50': '#f0f2f4', // <-
-    '100': '#d7d8d9',
-    '200': '#bcbec0',
-    '300': '#a0a5aa',
-    '400': '#848b93',
-    '500': '#6a727a',
-    '600': '#53585e',
-    '700': '#3c3f43',
-    '800': '#242628',
-    '900': '#0b0d0f',
+    '50': '#F7FAFC', // <-
+    '100': '#EDF2F7',
+    '200': '#E2E8F0',
+    '300': '#CBD5E0',
+    '400': '#A0AEC0',
+    '500': '#718096',
+    '600': '#4A5568',
+    '700': '#2D3748',
+    '800': '#1A202C',
+    '900': '#171923',
   },
-  // main colors
-  brand: {
-    '50': '#dcfff0',
-    '100': '#b1feda',
-    '200': '#84fbc8',
-    '300': '#56f9b8',
-    '400': '#30f7ae',
-    '500': '#1fdd9b',
-    '600': '#11ad7d',
-    '700': '#047b5d', // <-
-    '800': '#004a33',
-    '900': '#001b0f',
+  black: '#101112',
+  white: '#ffffff',
+  blackAlpha: {
+    '50': 'RGBA(16, 17, 18, 0.04)',
+    '100': 'RGBA(16, 17, 18, 0.06)',
+    '200': 'RGBA(16, 17, 18, 0.08)',
+    '300': 'RGBA(16, 17, 18, 0.16)',
+    '400': 'RGBA(16, 17, 18, 0.24)',
+    '500': 'RGBA(16, 17, 18, 0.36)',
+    '600': 'RGBA(16, 17, 18, 0.48)',
+    '700': 'RGBA(16, 17, 18, 0.64)',
+    '800': 'RGBA(16, 17, 18, 0.80)',
+    '900': 'RGBA(16, 17, 18, 0.92)',
   },
 }
 

theme/foundations/typography.ts

@@ -2,9 +2,16 @@ import { theme } from '@chakra-ui/react';
 
 const typography = {
   fonts: {
-    heading: `Inter, ${ theme.fonts.heading }`,
+    heading: `Poppins, ${ theme.fonts.heading }`,
     body: `Inter, ${ theme.fonts.body }`,
   },
+  textStyles: {
+    h2: {
+      fontSize: [ '32px' ],
+      fontWeight: 'semibold',
+      lineHeight: '40px',
+    },
+  },
 }
 
 export default typography;

components/AddressModal/AddressModal.tsx → 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"
@@ -129,7 +129,7 @@ const AddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
         </ModalBody>
 
         <ModalFooter justifyContent="flex-start">
-          <Button colorScheme="blue" onClick={ onButtonClick } disabled={ addressError }>
+          <Button variant="primary" onClick={ onButtonClick } disabled={ addressError }>
             { data ? 'Save changes' : 'Add address' }
           </Button>
         </ModalFooter>

components/DeleteModal/DeleteModal.tsx → ui/DeleteModal/DeleteModal.tsx

@@ -35,8 +35,8 @@ const DeleteModal: React.FC<Props> = ({ isOpen, onClose, address }) => {
         </ModalBody>
 
         <ModalFooter>
-          <Button variant="ghost" onClick={ onDeleteClick }>Yes</Button>
-          <Button colorScheme="blue" ml={ 3 } onClick={ onClose }>
+          <Button variant="secondary" onClick={ onDeleteClick }>Yes</Button>
+          <Button variant="primary" ml={ 3 } onClick={ onClose }>
               No
           </Button>
         </ModalFooter>

components/Page/Page.tsx → ui/Page/Page.tsx

 import React from 'react';
-import { Box, HStack, LightMode } from '@chakra-ui/react';
+import { Box, HStack, LightMode, VStack } from '@chakra-ui/react';
 
-import AccountNav from '../AccountNav/AccountNav';
+import Navigation from '../navigation/Navigation';
+import Header from '../header/Header';
 
 interface Props {
   children: React.ReactNode;
@@ -13,13 +14,26 @@ const Page = ({ children }: Props) => {
       <HStack
         w="100%"
         minH="100vh"
-        padding="140px 48px 48px 48px"
-        bgColor="gray.50"
-        spacing="12"
+        bgColor="white"
+        spacing={ 12 }
         alignItems="stretch"
+        paddingRight={ 15 }
       >
-        <AccountNav/>
-        <Box borderRadius="base" w="100%" overflow="hidden" bgColor="white" padding="32px 20px">{ children }</Box>
+        <Navigation/>
+        <VStack>
+          <Header/>
+          <Box
+            as="main"
+            borderRadius="base"
+            w="100%"
+            overflow="hidden"
+            bgColor="white"
+            px={ 5 }
+            py={ 8 }
+          >
+            { children }
+          </Box>
+        </VStack>
       </HStack>
     </LightMode>
   );

components/WatchlistTable/WatchListAddressItem.tsx → 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

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

components/AccountNav/AccountNavLink.tsx → ui/navigation/AccountNavLink.tsx

@@ -16,14 +16,18 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
   return (
     <NextLink href={ pathname } passHref>
       <Link
+        as="li"
+        listStyleType="none"
         w="220px"
-        p="15px 20px"
-        color={ isActive ? 'white' : 'black' }
-        bgColor={ isActive ? 'brand.700' : 'transparent' }
+        px={ 5 }
+        py={ 4 }
+        color={ isActive ? 'blue.600' : 'gray.600' }
+        bgColor={ isActive ? 'blue.50' : 'transparent' }
+        _hover={{ color: 'blue.600' }}
         borderRadius="base"
       >
-        <HStack spacing="4">
-          <Icon as={ icon } boxSize="5"/>
+        <HStack spacing={ 3 }>
+          <Icon as={ icon } boxSize="30px"/>
           <Text>{ text }</Text>
         </HStack>
       </Link>

components/AccountNav/AccountNav.tsx → ui/navigation/AccountNavigation.tsx

 import React from 'react';
-import { VStack, Text } from '@chakra-ui/react';
+import { Box, VStack } from '@chakra-ui/react';
 import AccountNavLink from './AccountNavLink';
-import StarIcon from '../../icons/star.svg'
-// тут кривая иконка в макете, потом доделаем
-import PrivateTagIcon from '../../icons/privateTag.svg'
-import PublicTagIcon from '../../icons/publicTag.svg'
-import ApiKeysIcon from '../../icons/apiKeys.svg';
+import WatchlistIcon from '../../icons/watchlist.svg'
+import PrivateTagIcon from '../../icons/privattags.svg'
+import PublicTagIcon from '../../icons/publictags.svg'
+import ApiKeysIcon from '../../icons/API.svg';
 import ABIIcon from '../../icons/ABI.svg';
 
 const navItems = [
-  { text: 'Watchlist', pathname: '/watchlist', icon: StarIcon },
+  { text: 'Watchlist', pathname: '/watchlist', icon: WatchlistIcon },
   { text: 'Private tags', pathname: '/private-tags', icon: PrivateTagIcon },
   { text: 'Public tags', pathname: '/public-tags', icon: PublicTagIcon },
   { text: 'API keys', pathname: '/api-keys', icon: ApiKeysIcon },
   { text: 'Custom ABI', pathname: '/custom-abi', icon: ABIIcon },
 ]
 
-const AccountNav = () => {
+const AccountNavigation = () => {
   return (
-    <VStack alignItems="flex-start" spacing="4">
-      <Text
-        paddingLeft="16px"
-        fontSize="12px"
-        lineHeight="20px"
-        color="gray.600"
-      >
-        Watch List & Notes
-      </Text>
-      <VStack spacing="3">
+    <Box as="nav">
+      <VStack as="ul" spacing="3">
         { navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
       </VStack>
-    </VStack>
+    </Box>
   )
 }
 
-export default AccountNav;
+export default AccountNavigation;

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
+        as="li"
+        listStyleType="none"
+        w="220px"
+        px={ 5 }
+        py={ 4 }
+        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 { Box, 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';
+
+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 (
+    <Box as="nav">
+      <VStack as="ul" spacing="3">
+        { navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
+      </VStack>
+    </Box>
+  )
+}
+
+export default MainNavigation;

ui/navigation/NavFooter.tsx

+import React from '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
+      as="footer"
+      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>
+  )
+}
+
+export default NavFooter;

ui/navigation/Navigation.tsx

+import React from 'react';
+import { VStack, HStack, Icon } from '@chakra-ui/react';
+
+import AccountNavigation from './AccountNavigation';
+import MainNavigation from './MainNavigation';
+import NavFooter from './NavFooter'
+
+import logoIcon from '../../icons/logo.svg';
+import networksIcon from '../../icons/networks.svg';
+
+const Navigation = () => {
+  return (
+    <VStack
+      alignItems="flex-start"
+      spacing={ 12 }
+      borderRight="1px solid"
+      borderColor="gray.200"
+      px={ 10 }
+      py={ 12 }
+      width="300px"
+    >
+      <HStack as="header" justifyContent="space-between" w="100%" padding={ 4 }>
+        <Icon as={ logoIcon } width="142px" height="26px" color="blue.600"/>
+        <Icon as={ networksIcon } width="20px" height="20px"/>
+      </HStack>
+      <MainNavigation/>
+      <AccountNavigation/>
+      <NavFooter/>
+    </VStack>
+  )
+}
+
+export default Navigation;

ui/pages/Watchlist.tsx

+import React, { useCallback, useState } from 'react';
+
+import { Box, Button, Text, useDisclosure } from '@chakra-ui/react';
+
+import Page from '../Page/Page';
+
+import WatchlistTable from '../WatchlistTable/WatchlistTable';
+import AddressModal from '../AddressModal/AddressModal';
+
+import type { TWatchlistItem } from '../../data/watchlist';
+import { watchlist } from '../../data/watchlist';
+import DeleteModal from '../DeleteModal/DeleteModal';
+
+const WatchList: React.FC = () => {
+  const addressModalProps = useDisclosure();
+  const deleteModalProps = useDisclosure();
+
+  const [ addressModalData, setAddressModalData ] = useState<TWatchlistItem>();
+  const [ deleteModalData, setDeleteModalData ] = useState<string>();
+
+  const onEditClick = useCallback((data: TWatchlistItem) => {
+    setAddressModalData(data);
+    addressModalProps.onOpen();
+  }, [ addressModalProps ])
+
+  const onAddressModalClose = useCallback(() => {
+    setAddressModalData(undefined);
+    addressModalProps.onClose();
+  }, [ addressModalProps ]);
+
+  const onDeleteClick = useCallback((data: TWatchlistItem) => {
+    setDeleteModalData(data.address);
+    deleteModalProps.onOpen();
+  }, [ deleteModalProps ])
+
+  const onDeleteModalClose = useCallback(() => {
+    setDeleteModalData(undefined);
+    deleteModalProps.onClose();
+  }, [ deleteModalProps ]);
+
+  return (
+    <Page>
+      <Box h="100%">
+        <Box as="h1" textStyle="h2" marginBottom={ 8 }>Watch list</Box>
+        <Text marginBottom="40px">An Email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
+        { Boolean(watchlist.length) && (
+          <WatchlistTable
+            data={ watchlist }
+            onDeleteClick={ onDeleteClick }
+            onEditClick={ onEditClick }
+          />
+        ) }
+        <Box marginTop="32px">
+          <Button
+            variant="primary"
+            onClick={ addressModalProps.onOpen }
+          >
+            Add address
+          </Button>
+        </Box>
+      </Box>
+      <AddressModal { ...addressModalProps } onClose={ onAddressModalClose } data={ addressModalData }/>
+      <DeleteModal { ...deleteModalProps } onClose={ onDeleteModalClose } address={ deleteModalData }/>
+    </Page>
+  );
+};
+
+export default WatchList

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"