v1.3-beta: cleanup 2

namesys-eth · Jan 4, 2024 · cae20e6 · cae20e6
1 parent 69e902a
commit cae20e6
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 80 deletions.
diff --git a/components/Preview.tsx b/components/Preview.tsx
@@ -13,7 +13,7 @@ import Options from '../components/Options'
 import Error from '../components/Error'
 import Info from '../components/Info'
 import Savings from '../components/WrapUp'
-import Loading from './Loading'
+import Loading from '../components/Loading'
 import Success from '../components/Success'
 import Confirm from '../components/Confirm'
 import * as constants from '../utils/constants'

diff --git a/components/BigSearch.tsx → components/Search.tsx b/components/BigSearch.tsx → components/Search.tsx
@@ -5,7 +5,74 @@ interface SearchBoxProps {
   onSearch: (query: string) => void
 }
 
-const BigSearch: React.FC<SearchBoxProps> = ({ onSearch }) => {
+export const SearchBox: React.FC<SearchBoxProps> = ({ onSearch }) => {
+  const [query, setQuery] = useState("")
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value.toLowerCase())
+  }
+
+  const handleInputInvalid = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.target.setCustomValidity("Please enter a valid .eth name")
+  }
+
+  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.target.setCustomValidity("")
+  }
+
+  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    onSearch(query)
+  }
+
+  return (
+    <form 
+      className="flex-column-sans-justify"
+      onSubmit={handleFormSubmit}
+    >
+      <div
+        className="flex-row-sans-justify"
+      >
+        <input
+          type="text"
+          placeholder={"search".toLowerCase()}
+          value={query.toLowerCase()}
+          name=".eth search"
+          id="eth-search"
+          onChange={handleInputChange}
+          onInvalid={handleInputInvalid}
+          onInput={handleInput}
+          required
+          pattern=".*\.eth$"
+          title="❗ Input must end with '.eth'"
+        />
+        <button 
+          className="button"
+          style={{
+            height: '38px',
+            width: '50px',
+            marginLeft: '15px'
+          }}
+          type="submit"
+          data-tooltip='Search'
+          disabled={!query.length}
+        >
+          <span 
+            className="material-icons"
+            style={{
+              fontSize: '22px',
+              fontWeight: '700'
+            }}
+          >
+            search
+          </span>
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export const BigSearch: React.FC<SearchBoxProps> = ({ onSearch }) => {
   const [query, setQuery] = useState("")
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -88,4 +155,3 @@ const BigSearch: React.FC<SearchBoxProps> = ({ onSearch }) => {
   );
 };
 
-export default BigSearch
diff --git a/components/SearchBox.tsx b/components/SearchBox.tsx
diff --git a/components/Stealth.tsx b/components/Stealth.tsx
@@ -10,7 +10,7 @@ import Help from '../components/Help'
 import Salt from '../components/Salt'
 import PayTo from '../components/PayTo'
 import Error from '../components/Error'
-import Loading from './Loading'
+import Loading from '../components/Loading'
 import Success from '../components/Success'
 import * as constants from '../utils/constants'
 import { KEYGEN } from '../utils/keygen'

diff --git a/pages/account.tsx b/pages/account.tsx
@@ -25,7 +25,7 @@ import Gateway from '../components/Gateway'
 import List from '../components/List'
 import Ticker from '../components/Ticker'
 import Loading from '../components/Loading'
-import SearchBox from '../components/SearchBox'
+import { SearchBox } from '../components/Search'
 import Confirm from '../components/Confirm'
 import Export from '../components/Export'
 import * as constants from '../utils/constants'

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -18,7 +18,7 @@ import Error from '../components/Error'
 import List from '../components/List'
 import GasTicker from '../components/Ticker'
 import Loading from '../components/Loading'
-import BigSearch from '../components/BigSearch'
+import { BigSearch } from '../components/Search'
 import * as constants from '../utils/constants'
 import * as verifier from '../utils/verifier'
 import * as ensContent from '../utils/contenthash'