bring search bar to life

theme/global.ts

@@ -8,6 +8,9 @@ const global = (props: StyleFunctionProps) => ({
     bg: mode('white', 'black')(props),
     ...getDefaultTransitionProps(),
   },
+  form: {
+    w: '100%',
+  },
 });
 
 export default global;

ui/header/ColorModeToggler.tsx

@@ -25,7 +25,7 @@ export interface ColorModeTogglerProps
   ThemingProps<'Switch'> {
 }
 
-export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) => {
+const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref) => {
   const ownProps = omitThemingProps(props);
   const { toggleColorMode, colorMode } = useColorMode();
 
@@ -91,3 +91,5 @@ export const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((prop
 if (__DEV__) {
   ColorModeToggler.displayName = 'ColorModeToggler';
 }
+
+export default ColorModeToggler;

ui/header/Header.tsx

-import { SearchIcon } from '@chakra-ui/icons';
-import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, useColorModeValue } from '@chakra-ui/react';
+import { HStack, Center, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import Identicon from 'react-identicons';
 
-import { ColorModeToggler } from './ColorModeToggler';
+import ColorModeToggler from './ColorModeToggler';
 import styles from './Header.module.css';
+import SearchBar from './SearchBar';
 
 const Header = () => {
   return (
@@ -17,13 +17,7 @@ const Header = () => {
       marginTop={ 9 }
       gap={ 12 }
     >
-      <InputGroup>
-        <InputLeftAddon w="111px">All filters</InputLeftAddon>
-        <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
-          <SearchIcon w={ 5 } h={ 5 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
-        </InputLeftElement>
-        <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions / block / token... " ml="1px"/>
-      </InputGroup>
+      <SearchBar/>
       <ColorModeToggler/>
       <Center minWidth="50px" width="50px" height="50px" bg={ useColorModeValue('blackAlpha.100', 'white') } borderRadius="50%" overflow="hidden">
         { /* the displayed size is 48px, but we need to generate x2 for retina displays */ }

ui/header/SearchBar.tsx

+import { SearchIcon } from '@chakra-ui/icons';
+import { InputGroup, Input, InputLeftAddon, InputLeftElement, useColorModeValue } from '@chakra-ui/react';
+import type { ChangeEvent, FormEvent } from 'react';
+import React from 'react';
+
+const SearchBar = () => {
+  const [ value, setValue ] = React.useState('');
+
+  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  }, []);
+
+  const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    window.location.assign(`https://blockscout.com/xdai/mainnet/search-results?q=${ value }`);
+  }, [ value ]);
+
+  return (
+    <form noValidate onSubmit={ handleSubmit }>
+      <InputGroup>
+        <InputLeftAddon w="111px">All filters</InputLeftAddon>
+        <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
+          <SearchIcon w={ 5 } h={ 5 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
+        </InputLeftElement>
+        <Input
+          paddingInlineStart="50px"
+          placeholder="Search by addresses / transactions / block / token... "
+          ml="1px"
+          onChange={ handleChange }
+        />
+      </InputGroup>
+    </form>
+  );
+};
+
+export default SearchBar;