feat: add keyboard shortcut for account & block search input

src/views/components/representatives-search/representatives-search.styl

@@ -16,18 +16,3 @@
   &.left
     margin 8px
 
-.search__shortcut-icon
-  display flex
-  align-items center
-  justify-content center
-  padding 4px
-  cursor pointer
-  margin-right 4px
-
-  border 1px solid #e0e0e0
-  border-radius 6px
-
-  .MuiSvgIcon-root
-    width 14px
-    height 14px
-

src/views/components/search-bar/search-bar.js

@@ -1,6 +1,8 @@
-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react'
+import KeyboardCommandKeyIcon from '@mui/icons-material/KeyboardCommandKey'
 import ClearIcon from '@mui/icons-material/Clear'
 import SearchIcon from '@mui/icons-material/Search'
+import hotkeys from 'hotkeys-js'
 
 import history from '@core/history'
 
@@ -9,49 +11,60 @@ import './search-bar.styl'
 const ACCOUNT_REGEX = /((nano|xrb)_)?[13][13-9a-km-uw-z]{59}/
 const BLOCK_REGEX = /[0-9A-F]{64}/
 
-export default class SearchBar extends React.Component {
-  constructor(props) {
-    super(props)
+const SearchBar = () => {
+  const [value, setValue] = useState('')
+  const [invalid, setInvalid] = useState(false)
+  const input_ref = useRef(null)
 
-    this.state = {
-      value: '',
-      invalid: false
+  useEffect(() => {
+    const handle_hotkeys = (event, handler) => {
+      event.preventDefault()
+      input_ref.current.focus()
     }
-  }
 
-  handleClick = () => {
-    const value = ''
-    this.setState({ value })
+    hotkeys('command+l,ctrl+l', handle_hotkeys)
+
+    return () => {
+      hotkeys.unbind('command+l,ctrl+l')
+    }
+  }, [])
+
+  const handle_click = () => {
+    setValue('')
   }
 
-  handleChange = (event) => {
+  const handle_change = (event) => {
     const { value } = event.target
-    this.setState({ value })
+    setValue(value)
     if (ACCOUNT_REGEX.test(value) || BLOCK_REGEX.test(value)) {
       history.push(`/${value}`)
     } else {
-      this.setState({ invalid: true })
+      setInvalid(true)
     }
   }
 
-  render() {
-    const isFilled = Boolean(this.state.value)
-    return (
-      <div className={`search__bar ${this.state.invalid && 'invalid'}`}>
-        <SearchIcon className='search__icon' />
-        <input
-          className={`search__input ${isFilled ? 'filled' : ''}`}
-          type='text'
-          placeholder='Search by Address / Block Hash'
-          value={this.state.value}
-          onChange={this.handleChange}
-        />
-        {this.state.value && (
-          <div className='search__input-clear' onClick={this.handleClick}>
-            <ClearIcon />
-          </div>
-        )}
+  const is_filled = Boolean(value)
+  return (
+    <div className={`search__bar ${invalid && 'invalid'}`}>
+      <SearchIcon className='search__icon' />
+      <input
+        ref={input_ref}
+        className={`search__input ${is_filled ? 'filled' : ''}`}
+        type='text'
+        placeholder='Search by Address / Block Hash'
+        value={value}
+        onChange={handle_change}
+      />
+      <div className='search__shortcut-icon'>
+        <KeyboardCommandKeyIcon fontSize='small' />L
       </div>
-    )
-  }
+      {value && (
+        <div className='search__input-clear' onClick={handle_click}>
+          <ClearIcon />
+        </div>
+      )}
+    </div>
+  )
 }
+
+export default SearchBar

src/views/components/search-bar/search-bar.styl

@@ -1,6 +1,6 @@
 .search__bar
   background white
-  border-radius 32px
+  border-radius 6px
   margin 0 32px 16px
   height 48px
   display flex
@@ -31,6 +31,21 @@
     display flex
     align-items center
 
+.search__shortcut-icon
+  display flex
+  align-items center
+  justify-content center
+  padding 4px
+  cursor pointer
+  margin-right 4px
+
+  border 1px solid #e0e0e0
+  border-radius 6px
+
+  .MuiSvgIcon-root
+    width 14px
+    height 14px
+
 @media (min-width 750px)
   .search__bar .search__input
     &.filled