Add error display

Sergvh · Apr 26, 2022 · 032fcd3 · 032fcd3
1 parent c0d6cf3
commit 032fcd3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/ecosystem/web-wallet/src/pages/App.css b/ecosystem/web-wallet/src/pages/App.css
@@ -8,3 +8,8 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+.Error-message {
+  font-size: calc(8px + 1vmin);
+  color: rgb(255, 0, 0);
+}
diff --git a/ecosystem/web-wallet/src/pages/Login.tsx b/ecosystem/web-wallet/src/pages/Login.tsx
@@ -7,6 +7,7 @@ import './App.css'
 
 export default function Login () {
   const [key, setKey] = useState('')
+  const [error, setError] = useState('')
   const [, dispatch] = useGlobalState()
   const navigate = useNavigate()
 
@@ -18,17 +19,22 @@ export default function Login () {
       dispatch({ account })
       navigate('/wallet')
     } else {
-      // todo: show error toast
-      throw result.error
+      setError(result.error.message)
     }
   }
 
+  function onChange (event: React.ChangeEvent<HTMLInputElement>) {
+    setKey(event.target.value)
+    setError('')
+  }
+
   return (
     <div className="App-header">
       <h2>Aptos Wallet</h2>
       <form onSubmit={handleSubmit}>
-        <input onChange={(e) => setKey(e.target.value)}/>
+        <input onChange={onChange}/>
       </form>
+      <text className="Error-message">{error}</text>
     </div>
   )
 }