fix: confidence checking ui up to spec

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

@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
+import { Formik, Form, Field } from 'formik'
 import * as R from 'ramda'
 import React, { useReducer, useEffect } from 'react'
 
@@ -7,6 +8,7 @@ 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 { NumberInput } from 'src/components/inputs/formik'
 import { H4, Info2 } from 'src/components/typography'
 import FormRenderer from 'src/pages/Services/FormRenderer'
 import schema from 'src/pages/Services/schemas'
@@ -52,11 +54,14 @@ const reducer = (state, action) => {
 
 const WizardStep = ({
   type,
+  schema: stepSchema,
+  coin,
   name,
   step,
   error,
   lastStep,
   onContinue,
+  fiatCurrency,
   filled,
   unfilled,
   getValue
@@ -86,21 +91,60 @@ const WizardStep = ({
   }
   return (
     <>
-      <Info2 className={classes.title}>{startCase(type)}</Info2>
-      <Stepper steps={4} currentStep={step} />
+      <Info2 className={classes.title}>{startCase(displayName)}</Info2>
+      <Stepper steps={5} currentStep={step} />
       <H4 className={classnames(subtitleClass)}>
-        Select a {displayName} or set up a new one
+        {step < 4
+          ? `Select a ${displayName} or set up a new one`
+          : `Select ${displayName} for ${coin}`}
       </H4>
-      <RadioGroup
-        options={filled}
-        value={selected}
-        className={classes.radioGroup}
-        onChange={(evt, it) => {
-          dispatch({ type: 'select', selected: it })
-        }}
-        labelClassName={classes.radioLabel}
-        radioClassName={classes.radio}
-      />
+      {step !== 5 && (
+        <RadioGroup
+          options={filled}
+          value={selected}
+          className={classes.radioGroup}
+          onChange={(evt, it) => {
+            dispatch({ type: 'select', selected: it })
+          }}
+          labelClassName={classes.radioLabel}
+          radioClassName={classes.radio}
+        />
+      )}
+      {step === 5 && (
+        <Formik
+          validateOnBlur={false}
+          validateOnChange={true}
+          initialValues={{ zeroConfLimit: '' }}
+          enableReinitialize
+          validationSchema={stepSchema}>
+          {({ values, setFieldValue }) => (
+            <Form>
+              <div
+                className={classnames(
+                  classes.horizontalAlign,
+                  classes.lineAlignment
+                )}>
+                <Field
+                  component={NumberInput}
+                  decimalPlaces={0}
+                  width={50}
+                  placeholder={'0'}
+                  name={`zeroConfLimit`}
+                  onChange={event => {
+                    dispatch({
+                      type: 'select',
+                      selected: event.target.value
+                    })
+                    setFieldValue(event.target.id, event.target.value)
+                  }}
+                  className={classes.zeroConfLimit}
+                />
+                <Info2>{fiatCurrency}</Info2>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      )}
       <div className={classes.setupNew}>
         {!R.isEmpty(unfilled) && !R.isNil(unfilled) && (
           <RadioGroup