header

decs.d.ts

+declare module 'react-identicons'

package.json

@@ -21,6 +21,7 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-hook-form": "^7.33.1",
+    "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4"
   },
   "devDependencies": {

tsconfig.json

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", "decs.d.ts"],
   "exclude": ["node_modules"]
 }

ui/Page/Page.tsx

@@ -15,12 +15,12 @@ const Page = ({ children }: Props) => {
         w="100%"
         minH="100vh"
         bgColor="white"
-        spacing={ 12 }
+        spacing={ 16 }
         alignItems="stretch"
-        paddingRight={ 15 }
+        paddingRight="60px"
       >
         <Navigation/>
-        <VStack>
+        <VStack width="100%">
           <Header/>
           <Box
             as="main"
@@ -28,7 +28,6 @@ const Page = ({ children }: Props) => {
             w="100%"
             overflow="hidden"
             bgColor="white"
-            px={ 5 }
             py={ 8 }
           >
             { children }

ui/header/Header.module.css

+.identicon {
+    max-width: 40px;
+    max-height: 40px;
+}
\ No newline at end of file

ui/header/Header.tsx

 import React from 'react';
-import { HStack, Text } from '@chakra-ui/react';
+import { Box, HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center } from '@chakra-ui/react';
+import { SearchIcon } from '@chakra-ui/icons'
+import Identicon from 'react-identicons';
+
+import styles from './Header.module.css';
 
 const AccountNav = () => {
   return (
@@ -7,12 +11,23 @@ const AccountNav = () => {
       as="header"
       height="60px"
       width="100%"
-      bg="gray.50"
       alignItems="center"
       justifyContent="center"
       marginTop={ 9 }
+      gap={ 12 }
     >
-      <Text>Header</Text>
+      <InputGroup>
+        <InputLeftAddon w="111px">All filters</InputLeftAddon>
+        <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
+          <SearchIcon w={ 5 } h={ 5 } color="gray.500"/>
+        </InputLeftElement>
+        <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/>
+      </InputGroup>
+      <Box>Switch</Box>
+      <Center minWidth="50px" width="50px" height="50px" bg="blackAlpha.100" borderRadius="50%" overflow="hidden">
+        { /* the displayed size is 40px, but we need to generate x2 for retina displays */ }
+        <Identicon className={ styles.identicon } string="randomness" size={ 80 }/>
+      </Center>
     </HStack>
   )
 }

yarn.lock

@@ -2778,6 +2778,11 @@ react-hook-form@^7.33.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.33.1.tgz#8c4410e3420788d3b804d62cc4c142915c2e46d0"
   integrity sha512-ydTfTxEJdvgjCZBj5DDXRc58oTEfnFupEwwTAQ9FSKzykEJkX+3CiAkGtAMiZG7IPWHuzgT6AOBfogiKhUvKgg==
 
+react-identicons@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/react-identicons/-/react-identicons-1.2.5.tgz#3502249e49d88f4e3500092694410a984bb102fa"
+  integrity sha512-x7prkDoc2pD7wSl2C1pGxS+XAoSdq1ABWJWTBUimVTDVJArKOLd0B4wRUJpDm4r+9y7pgf8ylyPGsmlWSV5n2g==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"