From f98541040dfda8f3648ce84da41cf0b9dd5c5c26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kysel=C3=A1k?= <martin@kyselak.name>
Date: Fri, 29 Dec 2023 15:06:46 +0000
Subject: [PATCH] feat: add wallet address search form

Adds a Search Wallet form component - with validation, without any search logic.
---
 package-lock.json        | 17 +++++++++++++
 package.json             |  1 +
 src/App.tsx              |  8 +++++-
 src/SearchWalletForm.tsx | 53 ++++++++++++++++++++++++++++++++++++++++
 src/WalletPage.tsx       | 18 ++++++++++++++
 src/api/types.ts         |  3 +++
 6 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 src/SearchWalletForm.tsx
 create mode 100644 src/WalletPage.tsx
 create mode 100644 src/api/types.ts

diff --git a/package-lock.json b/package-lock.json
index 1f6014e..e401ff7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@types/react-dom": "^18.2.18",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.49.2",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -14762,6 +14763,22 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.49.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.2.tgz",
+      "integrity": "sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==",
+      "engines": {
+        "node": ">=18",
+        "pnpm": "8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index f3658f1..fa76754 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
diff --git a/src/App.tsx b/src/App.tsx
index eb25bdb..701ccab 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,13 @@
 import { Header } from './Header';
+import { WalletPage } from './WalletPage';
 
 function App() {
-  return <Header />;
+  return (
+    <>
+      <Header />
+      <WalletPage />
+    </>
+  );
 }
 
 export default App;
diff --git a/src/SearchWalletForm.tsx b/src/SearchWalletForm.tsx
new file mode 100644
index 0000000..97bd646
--- /dev/null
+++ b/src/SearchWalletForm.tsx
@@ -0,0 +1,53 @@
+import { FieldError, useForm } from 'react-hook-form';
+import { SearchCriteria } from './api/types';
+
+type Props = {
+  onSearch: (search: SearchCriteria) => void;
+};
+
+export function SearchWalletForm({ onSearch }: Props) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<SearchCriteria>();
+
+  const fieldStyle = 'flex flex-col mb-2';
+  function getEditorStyle(fieldError: FieldError | undefined) {
+    return fieldError ? 'border-red-500' : 'border-slate-300';
+  }
+  return (
+    <form noValidate className="border-b py-4" onSubmit={handleSubmit(onSearch)}>
+      <div className={fieldStyle}>
+        <label htmlFor="address">Wallet Address</label>
+        <input
+          type="text"
+          id="address"
+          {...register('address', { required: 'You must enter a wallet address' })}
+          className={getEditorStyle(errors.address)}
+        />
+        <ValidationError fieldError={errors.address} />
+      </div>
+      <div className={fieldStyle}>
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="mt-2 h-10 px-6 font-semibold bg-slate-700 text-white self-start"
+        >
+          Search
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function ValidationError({ fieldError }: { fieldError: FieldError | undefined }) {
+  if (!fieldError) {
+    return null;
+  }
+  return (
+    <div role="alert" className="text-red-500 text-xs mt-1">
+      {fieldError.message}
+    </div>
+  );
+}
diff --git a/src/WalletPage.tsx b/src/WalletPage.tsx
new file mode 100644
index 0000000..63c3916
--- /dev/null
+++ b/src/WalletPage.tsx
@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { SearchCriteria } from './api/types';
+import { SearchWalletForm } from './SearchWalletForm';
+
+export function WalletPage() {
+  const [searchCriteria, setSearchCriteria] = useState<SearchCriteria | undefined>();
+
+  function handleSearch(search: SearchCriteria) {
+    setSearchCriteria(search);
+  }
+
+  return (
+    <main className="max-w-xs ml-auto mr-auto">
+      <SearchWalletForm onSearch={handleSearch} />
+      <div>Wallet balance and last ten transactions will be here.</div>
+    </main>
+  );
+}
diff --git a/src/api/types.ts b/src/api/types.ts
new file mode 100644
index 0000000..300e00d
--- /dev/null
+++ b/src/api/types.ts
@@ -0,0 +1,3 @@
+export type SearchCriteria = {
+  address: string;
+};