From 847d51e060076196311fab301ccc54f7c86bc6a4 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Tue, 8 Mar 2022 10:23:01 -0800
Subject: [PATCH] use components from ui-toolkit, add form-group, adjust input
 widths

---
 apps/trading/lib/connectors.ts                |  4 +-
 .../src/lib/vega-wallet/connectors.ts         |  5 +-
 .../lib/vega-wallet/rest-connector-form.tsx   | 58 +++++++++----------
 .../src/components/form-group/index.tsx       | 20 +++++++
 .../components/input-error/input-error.tsx    |  2 +-
 .../ui-toolkit/src/components/input/input.tsx |  3 +-
 libs/ui-toolkit/src/index.ts                  |  1 +
 7 files changed, 52 insertions(+), 41 deletions(-)
 create mode 100644 libs/ui-toolkit/src/components/form-group/index.tsx

diff --git a/apps/trading/lib/connectors.ts b/apps/trading/lib/connectors.ts
index 2fdb3da2c..9df9ef51b 100644
--- a/apps/trading/lib/connectors.ts
+++ b/apps/trading/lib/connectors.ts
@@ -1,9 +1,7 @@
-import { InjectedConnector, RestConnector } from '@vegaprotocol/react-helpers';
+import { RestConnector } from '@vegaprotocol/react-helpers';
 
-export const injected = new InjectedConnector();
 export const rest = new RestConnector();
 
 export const Connectors = {
-  injected,
   rest,
 };
diff --git a/libs/react-helpers/src/lib/vega-wallet/connectors.ts b/libs/react-helpers/src/lib/vega-wallet/connectors.ts
index 5d3b3bb4d..e8712a36e 100644
--- a/libs/react-helpers/src/lib/vega-wallet/connectors.ts
+++ b/libs/react-helpers/src/lib/vega-wallet/connectors.ts
@@ -64,10 +64,9 @@ export class RestConnector implements VegaConnector {
       // Store the token, and other things for later
       this.setConfig({ connector: 'rest', token: res.token });
 
-      return true;
+      return { success: true, error: null };
     } catch (err) {
-      console.error(err);
-      return false;
+      return { success: false, error: err };
     }
   }
 
diff --git a/libs/react-helpers/src/lib/vega-wallet/rest-connector-form.tsx b/libs/react-helpers/src/lib/vega-wallet/rest-connector-form.tsx
index c39fb0924..6826a68ba 100644
--- a/libs/react-helpers/src/lib/vega-wallet/rest-connector-form.tsx
+++ b/libs/react-helpers/src/lib/vega-wallet/rest-connector-form.tsx
@@ -1,5 +1,5 @@
-import { Button, Input, InputError } from '@vegaprotocol/ui-toolkit';
-import { useState } from 'react';
+import { Button, FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { RestConnector } from '.';
 
@@ -17,7 +17,7 @@ export function RestConnectorForm({
   connector,
   onAuthenticate,
 }: RestConnectorFormProps) {
-  const [error, setError] = useState<Error | null>(null);
+  const [error, setError] = useState('');
 
   const {
     register,
@@ -27,62 +27,56 @@ export function RestConnectorForm({
 
   async function onSubmit(fields: FormFields) {
     try {
-      const success = await connector.authenticate({
+      setError('');
+      const res = await connector.authenticate({
         wallet: fields.wallet,
         passphrase: fields.passphrase,
       });
 
-      if (success) {
+      if (res.success) {
         onAuthenticate();
       } else {
-        throw new Error('Authentication failed');
+        throw res.error;
       }
     } catch (err) {
-      if (err instanceof Error) {
-        setError(err);
-      } else if (typeof err === 'string') {
-        setError(new Error(err));
+      if (err instanceof TypeError) {
+        setError('Wallet not running at http://localhost:1789');
+      } else if (err instanceof Error) {
+        setError('Authentication failed');
       } else {
-        setError(new Error('Something went wrong'));
+        setError('Something went wrong');
       }
     }
   }
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="mb-12">
+      <FormGroup label="Wallet" labelFor="wallet">
         <Input
-          className="w-full px-12 py-4 border-black border"
           {...register('wallet', { required: 'Required' })}
+          id="wallet"
           type="text"
-          placeholder="Wallet"
+          autoFocus={true}
         />
         {errors.wallet?.message && (
-          <InputError
-            intent="danger"
-            className="mt-4 text-sm text-intent-danger"
-          >
-            {errors.wallet.message}
-          </InputError>
+          <InputError intent="danger">{errors.wallet.message}</InputError>
         )}
-      </div>
-      <div className="mb-12">
+      </FormGroup>
+      <FormGroup label="Passphrase" labelFor="passphrase">
         <Input
-          className="w-full px-12 py-4 border-black border"
           {...register('passphrase', { required: 'Required' })}
+          id="passphrase"
           type="password"
-          placeholder="Passphrase"
         />
         {errors.passphrase?.message && (
-          <InputError
-            intent="danger"
-            className="mt-4 text-sm text-intent-danger"
-          >
-            {errors.passphrase.message}
-          </InputError>
+          <InputError intent="danger">{errors.passphrase.message}</InputError>
         )}
-      </div>
-      {error && <div className="mb-12 text-intent-danger">{error.message}</div>}
+      </FormGroup>
+      {error && (
+        <InputError intent="danger" className="mb-12">
+          {error}
+        </InputError>
+      )}
       <Button variant="primary" type="submit">
         Connect
       </Button>
diff --git a/libs/ui-toolkit/src/components/form-group/index.tsx b/libs/ui-toolkit/src/components/form-group/index.tsx
new file mode 100644
index 000000000..72972b6aa
--- /dev/null
+++ b/libs/ui-toolkit/src/components/form-group/index.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+interface FormGroupProps {
+  children: ReactNode;
+  label: string;
+  labelFor: string;
+}
+
+export const FormGroup = ({ children, label, labelFor }: FormGroupProps) => {
+  return (
+    <div className="mb-12">
+      {label && (
+        <label className="block text-ui" htmlFor={labelFor}>
+          {label}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+};
diff --git a/libs/ui-toolkit/src/components/input-error/input-error.tsx b/libs/ui-toolkit/src/components/input-error/input-error.tsx
index 66e1b4c95..1fceb6ca2 100644
--- a/libs/ui-toolkit/src/components/input-error/input-error.tsx
+++ b/libs/ui-toolkit/src/components/input-error/input-error.tsx
@@ -14,7 +14,7 @@ export const InputError = ({
 }: InputErrorProps) => {
   const effectiveClassName = classNames(
     [
-      'inline-flex',
+      'flex',
       'items-center',
       'box-border',
       'h-28',
diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx
index 555fbea29..ad3e5199c 100644
--- a/libs/ui-toolkit/src/components/input/input.tsx
+++ b/libs/ui-toolkit/src/components/input/input.tsx
@@ -22,8 +22,7 @@ export const inputClassNames = ({
 }) => {
   return classNames(
     [
-      'inline-flex',
-      'items-center',
+      'flex items-center w-full',
       'box-border',
       'border',
       'bg-clip-padding',
diff --git a/libs/ui-toolkit/src/index.ts b/libs/ui-toolkit/src/index.ts
index 1085ffb63..7bb54ce63 100644
--- a/libs/ui-toolkit/src/index.ts
+++ b/libs/ui-toolkit/src/index.ts
@@ -4,6 +4,7 @@ export { Button, AnchorButton } from './components/button';
 export { Callout } from './components/callout';
 export { EthereumUtils };
 export { EtherscanLink } from './components/etherscan-link';
+export { FormGroup } from './components/form-group';
 export { Icon } from './components/icon';
 export { Input } from './components/input';
 export { InputError } from './components/input-error';