Feat: move zeroConfLimit to wallet_CRYPTOCODE namespace

This commit is contained in:
csrapr 2021-04-07 18:50:19 +01:00 committed by Josh Harvey
parent 4681de4033
commit 5da28bc830
10 changed files with 178 additions and 119 deletions

View file

@ -11,7 +11,7 @@ import WizardSplash from './WizardSplash'
import WizardStep from './WizardStep' import WizardStep from './WizardStep'
import { DenominationsSchema } from './helper' import { DenominationsSchema } from './helper'
const LAST_STEP = 4 const LAST_STEP = 3
const MODAL_WIDTH = 554 const MODAL_WIDTH = 554
const MODAL_HEIGHT = 520 const MODAL_HEIGHT = 520
@ -70,13 +70,6 @@ const Wizard = ({ machine, locale, onClose, save, error }) => {
labelProp: 'display', labelProp: 'display',
valueProp: 'code' valueProp: 'code'
} }
},
{
type: 'zeroConfLimit',
display: '0-conf Limit',
schema: Yup.object().shape({
zeroConfLimit: Yup.number().required()
})
} }
] ]

View file

@ -38,7 +38,7 @@ const WizardStep = ({
<div className={classes.content}> <div className={classes.content}>
<div className={classes.titleDiv}> <div className={classes.titleDiv}>
<Info2 className={classes.title}>{name}</Info2> <Info2 className={classes.title}>{name}</Info2>
<Stepper steps={4} currentStep={step} /> <Stepper steps={3} currentStep={step} />
</div> </div>
{step <= 2 && ( {step <= 2 && (
@ -94,46 +94,6 @@ const WizardStep = ({
</Form> </Form>
</Formik> </Formik>
)} )}
{step === 3 && (
<Formik
validateOnBlur={false}
validateOnChange={false}
onSubmit={onContinue}
initialValues={{ zeroConfLimit: '' }}
enableReinitialize
validationSchema={steps[step - 1].schema}>
<Form>
<div className={classes.thirdStepHeader}>
<div className={classes.step}>
<H4 className={classes.edit}>Edit 0-conf Limit</H4>
<Label1>Choose a limit</Label1>
<div className={classes.bill}>
<Field
className={classes.billInput}
type="text"
size="lg"
autoFocus={true}
component={NumberInput}
fullWidth
decimalPlaces={0}
name={steps[step - 1].type}
/>
<Info1 noMargin className={classes.suffix}>
{fiatCurrency}
</Info1>
</div>
</div>
</div>
<Button className={classes.submit} type="submit">
{label}
</Button>
</Form>
</Formik>
)}
{lastStep && ( {lastStep && (
<div className={classes.disclaimer}> <div className={classes.disclaimer}>
<Info2 className={classes.title}>Cash-out Bill Count</Info2> <Info2 className={classes.title}>Cash-out Bill Count</Info2>

View file

@ -14,11 +14,6 @@ const DenominationsSchema = Yup.object().shape({
.label('Cassette 2 (Bottom)') .label('Cassette 2 (Bottom)')
.required() .required()
.min(1) .min(1)
.max(currencyMax),
zeroConfLimit: Yup.number()
.label('0-conf Limit')
.required()
.min(0)
.max(currencyMax) .max(currencyMax)
}) })
@ -27,7 +22,7 @@ const getElements = (machines, { fiatCurrency } = {}) => {
{ {
name: 'id', name: 'id',
header: 'Machine', header: 'Machine',
width: 200, width: 300,
view: it => machines.find(({ deviceId }) => deviceId === it).name, view: it => machines.find(({ deviceId }) => deviceId === it).name,
size: 'sm', size: 'sm',
editable: false editable: false
@ -36,7 +31,7 @@ const getElements = (machines, { fiatCurrency } = {}) => {
name: 'top', name: 'top',
header: 'Cassette 1 (Top)', header: 'Cassette 1 (Top)',
stripe: true, stripe: true,
width: 200, width: 250,
textAlign: 'right', textAlign: 'right',
input: NumberInput, input: NumberInput,
inputProps: { inputProps: {
@ -48,28 +43,15 @@ const getElements = (machines, { fiatCurrency } = {}) => {
{ {
name: 'bottom', name: 'bottom',
header: 'Cassette 2 (Bottom)', header: 'Cassette 2 (Bottom)',
size: 'sm',
stripe: true, stripe: true,
textAlign: 'right', textAlign: 'right',
width: 200, width: 250,
input: NumberInput, input: NumberInput,
inputProps: { inputProps: {
decimalPlaces: 0 decimalPlaces: 0
}, },
suffix: fiatCurrency, suffix: fiatCurrency
bold: bold
},
{
name: 'zeroConfLimit',
header: '0-conf Limit',
stripe: true,
textAlign: 'right',
width: 200,
input: NumberInput,
inputProps: {
decimalPlaces: 0
},
suffix: fiatCurrency,
bold: bold
} }
] ]
} }

View file

@ -224,6 +224,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
userAccounts={data?.config?.accounts} userAccounts={data?.config?.accounts}
accounts={accounts} accounts={accounts}
accountsConfig={accountsConfig} accountsConfig={accountsConfig}
locale={locale}
/> />
)} )}
</> </>

View file

@ -123,6 +123,7 @@ const Wallet = ({ name: SCREEN_KEY }) => {
userAccounts={data?.config?.accounts} userAccounts={data?.config?.accounts}
accounts={accounts} accounts={accounts}
accountsConfig={accountsConfig} accountsConfig={accountsConfig}
locale={data?.config && fromNamespace('locale')(data.config)}
/> />
)} )}
{editingSchema && ( {editingSchema && (

View file

@ -8,7 +8,7 @@ import { toNamespace } from 'src/utils/config'
import WizardSplash from './WizardSplash' import WizardSplash from './WizardSplash'
import WizardStep from './WizardStep' import WizardStep from './WizardStep'
const LAST_STEP = 4 const LAST_STEP = 5
const MODAL_WIDTH = 554 const MODAL_WIDTH = 554
const contains = crypto => R.compose(R.contains(crypto), R.prop('cryptos')) const contains = crypto => R.compose(R.contains(crypto), R.prop('cryptos'))
@ -33,7 +33,15 @@ const getItems = (accountsConfig, accounts, type, crypto) => {
return { filled, unfilled } return { filled, unfilled }
} }
const Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => { const Wizard = ({
coin,
onClose,
accountsConfig,
accounts,
save,
error,
locale
}) => {
const [{ step, config, accountsToSave }, setState] = useState({ const [{ step, config, accountsToSave }, setState] = useState({
step: 0, step: 0,
config: { active: true }, config: { active: true },
@ -77,6 +85,8 @@ const Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => {
return { type: 'exchange', ...exchanges } return { type: 'exchange', ...exchanges }
case 4: case 4:
return { type: 'zeroConf', name: 'zero conf', ...zeroConfs } return { type: 'zeroConf', name: 'zero conf', ...zeroConfs }
case 5:
return { type: 'zeroConfLimit' }
default: default:
return null return null
} }
@ -103,6 +113,7 @@ const Wizard = ({ coin, onClose, accountsConfig, accounts, save, error }) => {
{...getStepData()} {...getStepData()}
onContinue={onContinue} onContinue={onContinue}
getValue={getValue} getValue={getValue}
locale={locale}
/> />
)} )}
</Modal> </Modal>

View file

@ -2,11 +2,13 @@ import { makeStyles } from '@material-ui/core'
import classnames from 'classnames' import classnames from 'classnames'
import * as R from 'ramda' import * as R from 'ramda'
import React, { useReducer, useEffect } from 'react' import React, { useReducer, useEffect } from 'react'
import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage' import ErrorMessage from 'src/components/ErrorMessage'
import Stepper from 'src/components/Stepper' import Stepper from 'src/components/Stepper'
import { Button } from 'src/components/buttons' import { Button } from 'src/components/buttons'
import { RadioGroup, Autocomplete } from 'src/components/inputs' import { RadioGroup, Autocomplete } from 'src/components/inputs'
import { NumberInput } from 'src/components/inputs/formik'
import { H4, Info2 } from 'src/components/typography' import { H4, Info2 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer' import FormRenderer from 'src/pages/Services/FormRenderer'
import schema from 'src/pages/Services/schemas' import schema from 'src/pages/Services/schemas'
@ -59,7 +61,8 @@ const WizardStep = ({
onContinue, onContinue,
filled, filled,
unfilled, unfilled,
getValue getValue,
locale
}) => { }) => {
const classes = useStyles() const classes = useStyles()
const [{ innerError, selected, form, isNew }, dispatch] = useReducer( const [{ innerError, selected, form, isNew }, dispatch] = useReducer(
@ -68,6 +71,9 @@ const WizardStep = ({
) )
useEffect(() => { useEffect(() => {
if (step === 5) {
return dispatch({ type: 'form', form: { code: 'zeroConfLimit' } })
}
dispatch({ type: 'reset' }) dispatch({ type: 'reset' })
}, [step]) }, [step])
@ -78,17 +84,25 @@ const WizardStep = ({
onContinue(config, account) onContinue(config, account)
} }
const zeroConfLimitSchema = Yup.object().shape({
zeroConfLimit: Yup.number()
.integer()
.required()
.min(0)
.max(999999999)
})
const label = lastStep ? 'Finish' : 'Next' const label = lastStep ? 'Finish' : 'Next'
const displayName = name ?? type const displayName = name ?? type
const subtitleClass = { const subtitleClass = {
[classes.subtitle]: true, [classes.subtitle]: true,
[classes.error]: innerError [classes.error]: innerError
} }
return ( return (
<> <>
<Info2 className={classes.title}>{startCase(type)}</Info2> <Info2 className={classes.title}>{startCase(type)}</Info2>
<Stepper steps={4} currentStep={step} /> <Stepper steps={5} currentStep={step} />
{step <= 4 && (
<>
<H4 className={classnames(subtitleClass)}> <H4 className={classnames(subtitleClass)}>
Select a {displayName} or set up a new one Select a {displayName} or set up a new one
</H4> </H4>
@ -130,13 +144,40 @@ const WizardStep = ({
</div> </div>
{form && ( {form && (
<FormRenderer <FormRenderer
save={it => innerContinue({ [type]: form.code }, { [form.code]: it })} save={it =>
innerContinue({ [type]: form.code }, { [form.code]: it })
}
elements={schema[form.code].elements} elements={schema[form.code].elements}
validationSchema={schema[form.code].validationSchema} validationSchema={schema[form.code].validationSchema}
value={getValue(form.code)} value={getValue(form.code)}
buttonLabel={label} buttonLabel={label}
/> />
)} )}
</>
)}
{step === 5 && (
<>
<H4 className={classnames(subtitleClass)}>Edit 0-conf Limit</H4>
<FormRenderer
save={it =>
innerContinue(
{ [type]: Number(it.zeroConfLimit) },
{ [form.code]: it }
)
}
elements={[
{
code: 'zeroConfLimit',
display: `Choose a ${locale.fiatCurrency} limit`,
component: NumberInput
}
]}
validationSchema={zeroConfLimitSchema}
buttonLabel={label}
value={0}
/>
</>
)}
{!form && ( {!form && (
<div className={classes.submit}> <div className={classes.submit}>
{error && <ErrorMessage>Failed to save</ErrorMessage>} {error && <ErrorMessage>Failed to save</ErrorMessage>}

View file

@ -1,16 +1,22 @@
import * as R from 'ramda' import * as R from 'ramda'
import * as Yup from 'yup' import * as Yup from 'yup'
import { NumberInput } from 'src/components/inputs/formik'
import Autocomplete from 'src/components/inputs/formik/Autocomplete.js' import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
const filterClass = type => R.filter(it => it.class === type) const filterClass = type => R.filter(it => it.class === type)
const filterCoins = ({ id }) => R.filter(it => R.contains(id)(it.cryptos)) const filterCoins = ({ id }) => R.filter(it => R.contains(id)(it.cryptos))
const currencyMax = 999999999
const WalletSchema = Yup.object().shape({ const WalletSchema = Yup.object().shape({
ticker: Yup.string().required(), ticker: Yup.string().required(),
wallet: Yup.string().required(), wallet: Yup.string().required(),
exchange: Yup.string().required(), exchange: Yup.string().required(),
zeroConf: Yup.string().required() zeroConf: Yup.string().required(),
zeroConfLimit: Yup.number()
.integer()
.required()
.min(0)
.max(currencyMax)
}) })
const getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => { const getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => {
@ -100,6 +106,17 @@ const getElements = (cryptoCurrencies, accounts, onChange, wizard = false) => {
optionsLimit: null, optionsLimit: null,
onChange onChange
} }
},
{
name: 'zeroConfLimit',
size: 'sm',
stripe: true,
view: it => it,
input: NumberInput,
width: 190 - widthAdjust,
inputProps: {
decimalPlaces: 0
}
} }
] ]
} }

View file

@ -12,6 +12,7 @@ import ChooseCoin from './ChooseCoin'
import ChooseExchange from './ChooseExchange' import ChooseExchange from './ChooseExchange'
import ChooseTicker from './ChooseTicker' import ChooseTicker from './ChooseTicker'
import ChooseWallet from './ChooseWallet' import ChooseWallet from './ChooseWallet'
import ZeroConfLimit from './ZeroConfLimit'
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)
@ -36,6 +37,10 @@ const steps = [
label: 'Blockcypher', label: 'Blockcypher',
component: Blockcypher component: Blockcypher
}, },
{
label: 'Set 0-conf Limit',
component: ZeroConfLimit
},
{ {
label: 'All set', label: 'All set',
component: AllSet component: AllSet

View file

@ -0,0 +1,48 @@
import { makeStyles } from '@material-ui/core'
import React from 'react'
import * as Yup from 'yup'
import { NumberInput } from 'src/components/inputs/formik'
import { H4 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
import styles from './Shared.styles'
const useStyles = makeStyles(styles)
const zeroConfLimitSchema = Yup.object().shape({
zeroConfLimit: Yup.number()
.integer()
.required()
.min(0)
.max(999999999)
})
const ZeroConfLimit = ({ data: currentData, addData }) => {
const classes = useStyles()
const submit = value => {
addData({ zeroConfLimit: value })
}
return (
<div className={classes.mdForm}>
<H4>Set the 0-conf limit</H4>
<FormRenderer
elements={[
{
code: 'zeroConfLimit',
display: `Choose a limit`,
component: NumberInput
}
]}
validationSchema={zeroConfLimitSchema}
buttonLabel={'Continue'}
value={0}
save={it => submit(Number(it.zeroConfLimit))}
/>
</div>
)
}
export default ZeroConfLimit