use components from ui-toolkit, add form-group, adjust input widths

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,
 };

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 };
     }
   }
 

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>

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>
+  );
+};

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',

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',

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';