fix: rework wallet screen

new-lamassu-admin/src/pages/Wallet/WizardStep.js

@@ -0,0 +1,155 @@
+import { makeStyles } from '@material-ui/core'
+import classnames from 'classnames'
+import * as R from 'ramda'
+import React, { useReducer, useEffect } from 'react'
+
+import ErrorMessage from 'src/components/ErrorMessage'
+import Stepper from 'src/components/Stepper'
+import { Button } from 'src/components/buttons'
+import { RadioGroup, Autocomplete } from 'src/components/inputs'
+import { Info2, H4 } from 'src/components/typography'
+import FormRenderer from 'src/pages/Services/FormRenderer'
+import schema from 'src/pages/Services/schemas'
+import { startCase } from 'src/utils/string'
+
+import styles from './WizardStep.styles'
+const useStyles = makeStyles(styles)
+
+const initialState = {
+  form: null,
+  selected: null,
+  isNew: false,
+  iError: false
+}
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'select':
+      return {
+        form: null,
+        selected: action.selected,
+        isNew: null,
+        iError: false
+      }
+    case 'new':
+      return { form: state.form, selected: null, isNew: true, iError: false }
+    case 'form':
+      return {
+        form: action.form,
+        selected: action.form.code,
+        isNew: true,
+        iError: false
+      }
+    case 'error':
+      return R.merge(state, { iError: true })
+    case 'reset':
+      return initialState
+    default:
+      throw new Error()
+  }
+}
+
+const WizardStep = ({
+  type,
+  name,
+  step,
+  error,
+  lastStep,
+  onContinue,
+  filled,
+  unfilled,
+  getValue
+}) => {
+  const classes = useStyles()
+  const [{ iError, selected, form, isNew }, dispatch] = useReducer(
+    reducer,
+    initialState
+  )
+
+  useEffect(() => {
+    dispatch({ type: 'reset' })
+  }, [step])
+
+  const iContinue = (config, account) => {
+    if (!config || !config[type]) {
+      return dispatch({ type: 'error' })
+    }
+    onContinue(config, account)
+  }
+
+  const label = lastStep ? 'Finish' : 'Next'
+  const displayName = name ?? type
+  const subtitleClass = {
+    [classes.subtitle]: true,
+    [classes.error]: iError
+  }
+
+  return (
+    <>
+      <Info2 className={classes.title}>{startCase(type)}</Info2>
+      <Stepper steps={4} currentStep={step} />
+      <H4 className={classnames(subtitleClass)}>
+        Select a {displayName} or set up a new one
+      </H4>
+      <RadioGroup
+        options={filled}
+        value={selected}
+        className={classes.radioGroup}
+        onChange={(evt, it) => {
+          dispatch({ type: 'select', selected: it })
+        }}
+        labelClassName={classes.radioLabel}
+        radioClassName={classes.radio}
+      />
+      <div className={classes.setupNew}>
+        {!R.isEmpty(unfilled) && !R.isNil(unfilled) && (
+          <RadioGroup
+            value={isNew}
+            onChange={(evt, it) => {
+              dispatch({ type: 'new' })
+            }}
+            labelClassName={classes.radioLabel}
+            radioClassName={classes.radio}
+            options={[{ display: 'Set up new', code: true }]}
+          />
+        )}
+        {isNew && (
+          <Autocomplete
+            fullWidth
+            label={`Select ${displayName}`}
+            className={classes.picker}
+            getOptionSelected={R.eqProps('code')}
+            getLabel={R.path(['display'])}
+            options={unfilled}
+            onChange={(evt, it) => {
+              dispatch({ type: 'form', form: it })
+            }}
+          />
+        )}
+      </div>
+      {form && (
+        <FormRenderer
+          save={it =>
+            iContinue({ [type]: form.code }, R.merge(it, { code: form.code }))
+          }
+          elements={schema[form.code].elements}
+          validationSchema={schema[form.code].validationSchema}
+          value={getValue(form.code)}
+          buttonLabel={label}
+        />
+      )}
+      {!form && (
+        <div className={classes.submit}>
+          {error && <ErrorMessage>Failed to save</ErrorMessage>}
+          <Button
+            className={classes.button}
+            onClick={() => iContinue({ [type]: selected })}>
+            {label}
+          </Button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default WizardStep