Merge pull request #919 from josepfo/fix/confidence-checking-ui-up-to-spec

fix: confidence checking ui up to spec

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

@@ -46,6 +46,7 @@ const GET_INFO = gql`
     }
   }
 `
+const LOCALE = 'locale'
 
 const Wallet = ({ name: SCREEN_KEY }) => {
   const [editingSchema, setEditingSchema] = useState(null)
@@ -69,8 +70,10 @@ const Wallet = ({ name: SCREEN_KEY }) => {
     return saveConfig({ variables: { config, accounts } })
   }
 
-  const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)
+  const fiatCurrency =
+    data?.config && fromNamespace(LOCALE)(data.config).fiatCurrency
 
+  const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)
   const accountsConfig = data?.accountsConfig
   const cryptoCurrencies = data?.cryptoCurrencies ?? []
   const accounts = data?.accounts ?? []
@@ -135,6 +138,7 @@ const Wallet = ({ name: SCREEN_KEY }) => {
               save={save}
               error={error?.message}
               cryptoCurrencies={cryptoCurrencies}
+              fiatCurrency={fiatCurrency}
               userAccounts={data?.config?.accounts}
               accounts={accounts}
               accountsConfig={accountsConfig}

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

@@ -1,6 +1,7 @@
 import { utils as coinUtils } from 'lamassu-coins'
 import * as R from 'ramda'
 import React, { useState } from 'react'
+import * as Yup from 'yup'
 
 import Modal from 'src/components/Modal'
 import schema from 'src/pages/Services/schemas'
@@ -9,7 +10,7 @@ import { toNamespace } from 'src/utils/config'
 import WizardSplash from './WizardSplash'
 import WizardStep from './WizardStep'
 
-const LAST_STEP = 4
+const LAST_STEP = 5
 const MODAL_WIDTH = 554
 
 const contains = crypto => R.compose(R.contains(crypto), R.prop('cryptos'))
@@ -34,7 +35,15 @@ const getItems = (accountsConfig, accounts, type, crypto) => {
   return { filled, unfilled }
 }
 
-const Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => {
+const Wizard = ({
+  coin,
+  onClose,
+  accountsConfig,
+  accounts,
+  fiatCurrency,
+  save,
+  error
+}) => {
   const [{ step, config, accountsToSave }, setState] = useState({
     step: 0,
     config: { active: true },
@@ -63,7 +72,6 @@ const Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => {
       )
       const configToSave = {
         ...newConfig,
-        zeroConfLimit: 0,
         cryptoUnits: defaultCryptoUnit
       }
       return save(toNamespace(coin.code, configToSave), newAccounts)
@@ -85,7 +93,16 @@ const Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => {
       case 3:
         return { type: 'exchange', ...exchanges }
       case 4:
-        return { type: 'zeroConf', name: 'zero conf', ...zeroConfs }
+        return {
+          type: 'zeroConf',
+          name: 'confidence checking',
+          schema: Yup.object().shape({
+            zeroConfLimit: Yup.number().required()
+          }),
+          ...zeroConfs
+        }
+      case 5:
+        return { type: 'zeroConfLimit', name: '0-conf limit', ...zeroConfs }
       default:
         return null
     }
@@ -107,6 +124,8 @@ const Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => {
       {step !== 0 && (
         <WizardStep
           step={step}
+          coin={coin.display}
+          fiatCurrency={fiatCurrency}
           error={error}
           lastStep={isLastStep}
           {...getStepData()}

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

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

@@ -1,4 +1,4 @@
-import { errorColor } from 'src/styling/variables'
+import { errorColor, fontSize1, fontPrimary } from 'src/styling/variables'
 
 const LABEL_WIDTH = 150
 
@@ -38,5 +38,23 @@ export default {
   },
   picker: {
     width: LABEL_WIDTH
+  },
+  horizontalAlign: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  centerAlignment: {
+    alignItems: 'center'
+  },
+  zeroConfLimit: {
+    marginRight: 5,
+    '& > div': {
+      fontSize: fontSize1,
+      fontFamily: fontPrimary,
+      fontWeight: 300,
+      '& > input': {
+        padding: [[6, 0, 2]]
+      }
+    }
   }
 }

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

@@ -162,6 +162,7 @@ const getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => {
     },
     {
       name: 'zeroConfLimit',
+      header: '0-conf Limit',
       size: 'sm',
       stripe: true,
       view: (it, row) =>

new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.js

@@ -86,7 +86,7 @@ const Blockcypher = ({ addData }) => {
         {selected === 'disable' && (
           <Button
             size="lg"
-            onClick={() => addData({ zeroConf: 'all-zero-conf' })}
+            onClick={() => addData({ zeroConf: 'none', zeroConfLimit: 0 })}
             className={classes.button}>
             Continue
           </Button>

new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.js

@@ -38,7 +38,7 @@ const ChooseCoin = ({ addData }) => {
     if (!schema.isValidSync(it)) return setError(true)
 
     if (it.coin !== 'BTC') {
-      return addData({ coin: it.coin, zeroConf: 'all-zero-conf' })
+      return addData({ coin: it.coin, zeroConf: 'none', zeroConfLimit: 0 })
     }
 
     addData(it)