lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: simplify and cleanup front-end

Browse source
This commit is contained in:
José Oliveira 2021-02-15 13:46:09 +00:00 • committed by Josh Harvey
parent a8fbb57bf6
commit 351d2a078b
14 changed files with 93 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

52
new-lamassu-admin/src/components/inputs/base/SecretInput.js
View file

@ -2,32 +2,34 @@ import React, { memo, useState } from 'react'
import { TextInput } from '../base'
const SecretInput = memo(({ value, onFocus, onBlur, ...props }) => {
const [focused, setFocused] = useState(false)
const isPasswordFilled = props.isPasswordFilled
const placeholder = '⚬ ⚬ ⚬ This field is set ⚬ ⚬ ⚬'
const innerOnFocus = event => {
setFocused(true)
onFocus && onFocus(event)
}
const SecretInput = memo(
({ value, onFocus, isPasswordFilled, onBlur, ...props }) => {
const [focused, setFocused] = useState(false)
const placeholder = '⚬ ⚬ ⚬ This field is set ⚬ ⚬ ⚬'
const innerOnFocus = event => {
setFocused(true)
onFocus && onFocus(event)
}
const innerOnBlur = event => {
setFocused(false)
onBlur && onBlur(event)
}
const innerOnBlur = event => {
setFocused(false)
onBlur && onBlur(event)
}
return (
<TextInput
{...props}
type="password"
onFocus={innerOnFocus}
onBlur={innerOnBlur}
value={value}
InputProps={{ value: value }}
InputLabelProps={{ shrink: isPasswordFilled || value || focused }}
placeholder={isPasswordFilled ? placeholder : ''}
/>
)
})
return (
<TextInput
{...props}
type="password"
onFocus={innerOnFocus}
onBlur={innerOnBlur}
isPasswordFilled={isPasswordFilled}
value={value}
InputProps={{ value: value }}
InputLabelProps={{ shrink: isPasswordFilled || value || focused }}
placeholder={isPasswordFilled ? placeholder : ''}
/>
)
}
)
export default SecretInput

2
new-lamassu-admin/src/components/inputs/base/TextInput.js
View file

@ -11,6 +11,7 @@ const useStyles = makeStyles(styles)
const TextInput = memo(
({
name,
isPasswordFilled,
onChange,
onBlur,
value,
@ -26,7 +27,6 @@ const TextInput = memo(
...props
}) => {
const classes = useStyles({ textAlign, width, size })
const isPasswordFilled = props.isPasswordFilled
const isTextFilled = !error && !R.isNil(value) && !R.isEmpty(value)
const filled = isPasswordFilled || isTextFilled
const inputClasses = {

4
new-lamassu-admin/src/components/inputs/formik/SecretInput.js
View file

@ -2,16 +2,16 @@ import React, { memo } from 'react'
import { SecretInput } from '../base'
const SecretInputFormik = memo(({ ...props }) => {
const SecretInputFormik = memo(({ isPasswordFilled, ...props }) => {
const { name, onChange, onBlur, value } = props.field
const { touched, errors } = props.form
const isPasswordFilled = props.isPasswordFilled
const error = !isPasswordFilled && !!(touched[name] && errors[name])
return (
<SecretInput
name={name}
isPasswordFilled={isPasswordFilled}
onChange={onChange}
onBlur={onBlur}
value={value}

46
new-lamassu-admin/src/pages/Services/Services.js
View file

@ -58,21 +58,17 @@ const Services = () => {
}
const getElements = ({ code, elements }) => {
return R.compose(
R.map(elem => {
return elem.component === SecretInput
? R.assoc(
'inputProps',
{
isPasswordFilled:
!R.isNil(accounts[code]) &&
!R.isNil(R.path([elem.code], accounts[code]))
},
elem
)
: R.identity(elem)
})
)(elements)
return R.map(elem => {
if (elem.component !== SecretInput) return elem
return {
...elem,
inputProps: {
isPasswordFilled:
!R.isNil(accounts[code]) &&
!R.isNil(R.path([elem.code], accounts[code]))
}
}
}, elements)
}
const getAccounts = ({ elements, code }) => {
@ -81,22 +77,14 @@ const Services = () => {
R.reject(R.isNil),
R.map(({ component, code }) => (component === SecretInput ? code : null))
)(elements)
return R.compose(
R.mapObjIndexed((value, key, obj) =>
R.includes(key, passwordFields) ? '' : value
)
)(account)
return R.mapObjIndexed(
(value, key) => (R.includes(key, passwordFields) ? '' : value),
account
)
}
const getValidationSchema = ({
validationSchema,
code,
hasSecret,
getValidationSchema
}) => {
if (!hasSecret) return validationSchema
return getValidationSchema(accounts[code])
}
const getValidationSchema = ({ code, getValidationSchema }) =>
getValidationSchema(accounts[code])
return (
<div className={classes.wrapper}>

49
new-lamassu-admin/src/pages/Services/schemas/bitgo.js
View file

@ -13,7 +13,6 @@ const isDefined = it => it && it.length
export default {
code: 'bitgo',
name: 'BitGo',
hasSecret: true,
title: 'BitGo (Wallet)',
elements: [
{
@ -88,51 +87,8 @@ export default {
component: SecretInput
}
],
validationSchema: Yup.object().shape({
token: Yup.string()
.max(100, 'Too long')
.required(),
BTCWalletId: Yup.string().max(100, 'Too long'),
BTCWalletPassphrase: Yup.string()
.max(100, 'Too long')
.when('BTCWalletId', {
is: isDefined,
then: Yup.string().required()
}),
LTCWalletId: Yup.string().max(100, 'Too long'),
LTCWalletPassphrase: Yup.string()
.max(100, 'Too long')
.when('LTCWalletId', {
is: isDefined,
then: Yup.string().required()
}),
ZECWalletId: Yup.string().max(100, 'Too long'),
ZECWalletPassphrase: Yup.string()
.max(100, 'Too long')
.when('ZECWalletId', {
is: isDefined,
then: Yup.string().required()
}),
BCHWalletId: Yup.string().max(100, 'Too long'),
BCHWalletPassphrase: Yup.string()
.max(100, 'Too long')
.when('BCHWalletId', {
is: isDefined,
then: Yup.string().required()
}),
DASHWalletId: Yup.string().max(100, 'Too long'),
DASHWalletPassphrase: Yup.string()
.max(100, 'Too long')
.when('DASHWalletId', {
is: isDefined,
then: Yup.string().required()
}),
environment: Yup.string()
.matches(/(prod|test)/)
.required()
}),
getValidationSchema: account => {
const schema = {
return Yup.object().shape({
token: Yup.string()
.max(100, 'Too long')
.required(),
@ -174,7 +130,6 @@ export default {
environment: Yup.string()
.matches(/(prod|test)/)
.required()
}
return Yup.object().shape(schema)
})
}
}

17
new-lamassu-admin/src/pages/Services/schemas/bitstamp.js
View file

@ -8,7 +8,6 @@ import secretTest from './helper'
export default {
code: 'bitstamp',
name: 'Bitstamp',
hasSecret: true,
title: 'Bitstamp (Exchange)',
elements: [
{
@ -31,19 +30,8 @@ export default {
component: SecretInputFormik
}
],
validationSchema: Yup.object().shape({
clientId: Yup.string()
.max(100, 'Too long')
.required(),
key: Yup.string()
.max(100, 'Too long')
.required(),
secret: Yup.string()
.max(100, 'Too long')
.required()
}),
getValidationSchema: account => {
const schema = {
return Yup.object().shape({
clientId: Yup.string()
.max(100, 'Too long')
.required(),
@ -53,7 +41,6 @@ export default {
secret: Yup.string()
.max(100, 'Too long')
.test(secretTest(account?.secret))
}
return Yup.object().shape(schema)
})
}
}

22
new-lamassu-admin/src/pages/Services/schemas/blockcypher.js
View file

@ -5,7 +5,6 @@ import TextInputFormik from 'src/components/inputs/formik/TextInput'
export default {
code: 'blockcypher',
name: 'Blockcypher',
hasSecret: false,
title: 'Blockcypher (Payments)',
elements: [
{
@ -22,14 +21,15 @@ export default {
face: true
}
],
validationSchema: Yup.object().shape({
token: Yup.string()
.max(100, 'Too long')
.required(),
confidenceFactor: Yup.number()
.integer('Please input a positive integer')
.positive('Please input a positive integer')
.required()
})
getValidationSchema: () => {
return Yup.object().shape({
token: Yup.string()
.max(100, 'Too long')
.required(),
confidenceFactor: Yup.number()
.integer('Please input a positive integer')
.positive('Please input a positive integer')
.required()
})
}
}

17
new-lamassu-admin/src/pages/Services/schemas/infura.js
View file

@ -8,7 +8,6 @@ import secretTest from './helper'
export default {
code: 'infura',
name: 'Infura',
hasSecret: true,
title: 'Infura (Wallet)',
elements: [
{
@ -30,19 +29,8 @@ export default {
face: true
}
],
validationSchema: Yup.object().shape({
apiKey: Yup.string()
.max(100, 'Too long')
.required(),
apiSecret: Yup.string()
.max(100, 'Too long')
.required(),
endpoint: Yup.string()
.max(100, 'Too long')
.required()
}),
getValidationSchema: account => {
const schema = {
return Yup.object().shape({
apiKey: Yup.string()
.max(100, 'Too long')
.required(),
@ -52,7 +40,6 @@ export default {
endpoint: Yup.string()
.max(100, 'Too long')
.required()
}
return Yup.object().shape(schema)
})
}
}

20
new-lamassu-admin/src/pages/Services/schemas/itbit.js
View file

@ -8,7 +8,6 @@ import secretTest from './helper'
export default {
code: 'itbit',
name: 'itBit',
hasSecret: true,
title: 'itBit (Exchange)',
elements: [
{
@ -36,22 +35,8 @@ export default {
component: SecretInputFormik
}
],
validationSchema: Yup.object().shape({
userId: Yup.string()
.max(100, 'Too long')
.required(),
walletId: Yup.string()
.max(100, 'Too long')
.required(),
clientKey: Yup.string()
.max(100, 'Too long')
.required(),
clientSecret: Yup.string()
.max(100, 'Too long')
.required()
}),
getValidationSchema: account => {
const schema = {
return Yup.object().shape({
userId: Yup.string()
.max(100, 'Too long')
.required(),
@ -64,7 +49,6 @@ export default {
clientSecret: Yup.string()
.max(100, 'Too long')
.test(secretTest(account?.clientSecret))
}
return Yup.object().shape(schema)
})
}
}

14
new-lamassu-admin/src/pages/Services/schemas/kraken.js
View file

@ -8,7 +8,6 @@ import secretTest from './helper'
export default {
code: 'kraken',
name: 'Kraken',
hasSecret: true,
title: 'Kraken (Exchange)',
elements: [
{
@ -24,23 +23,14 @@ export default {
component: SecretInputFormik
}
],
validationSchema: Yup.object().shape({
apiKey: Yup.string()
.max(100, 'Too long')
.required(),
privateKey: Yup.string()
.max(100, 'Too long')
.required()
}),
getValidationSchema: account => {
const schema = {
return Yup.object().shape({
apiKey: Yup.string()
.max(100, 'Too long')
.required(),
privateKey: Yup.string()
.max(100, 'Too long')
.test(secretTest(account?.privateKey))
}
return Yup.object().shape(schema)
})
}
}

35
new-lamassu-admin/src/pages/Services/schemas/mailgun.js
View file

@ -5,7 +5,6 @@ import TextInputFormik from 'src/components/inputs/formik/TextInput'
export default {
code: 'mailgun',
name: 'Mailgun',
hasSecret: false,
title: 'Mailgun (Email)',
elements: [
{
@ -31,20 +30,22 @@ export default {
face: true
}
],
validationSchema: Yup.object().shape({
apiKey: Yup.string()
.max(100, 'Too long')
.required(),
domain: Yup.string()
.max(100, 'Too long')
.required(),
fromEmail: Yup.string()
.max(100, 'Too long')
.email('Please input a valid email address')
.required(),
toEmail: Yup.string()
.max(100, 'Too long')
.email('Please input a valid email address')
.required()
})
getValidationSchema: () => {
return Yup.object().shape({
apiKey: Yup.string()
.max(100, 'Too long')
.required(),
domain: Yup.string()
.max(100, 'Too long')
.required(),
fromEmail: Yup.string()
.max(100, 'Too long')
.email('Please input a valid email address')
.required(),
toEmail: Yup.string()
.max(100, 'Too long')
.email('Please input a valid email address')
.required()
})
}
}

20
new-lamassu-admin/src/pages/Services/schemas/twilio.js
View file

@ -8,7 +8,6 @@ import secretTest from './helper'
export default {
code: 'twilio',
name: 'Twilio',
hasSecret: true,
title: 'Twilio (SMS)',
elements: [
{
@ -34,22 +33,8 @@ export default {
face: true
}
],
validationSchema: Yup.object().shape({
accountSid: Yup.string()
.max(100, 'Too long')
.required(),
authToken: Yup.string()
.max(100, 'Too long')
.required(),
fromNumber: Yup.string()
.max(100, 'Too long')
.required(),
toNumber: Yup.string()
.max(100, 'Too long')
.required()
}),
getValidationSchema: account => {
const schema = {
return Yup.object().shape({
accountSid: Yup.string()
.max(100, 'Too long')
.required(),
@ -62,7 +47,6 @@ export default {
toNumber: Yup.string()
.max(100, 'Too long')
.required()
}
return Yup.object().shape(schema)
})
}
}

4
new-lamassu-admin/src/pages/Wallet/Wizard.js
View file

@ -24,8 +24,8 @@ const getItems = (accountsConfig, accounts, type, crypto) => {
const account = find(code)
if (!schema[code]) return true
const { validationSchema } = schema[code]
return validationSchema.isValidSync(account)
const { getValidationSchema } = schema[code]
return getValidationSchema(account).isValidSync(account)
})(fConfig)
return { filled, unfilled }

4
new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.js
View file

@ -144,7 +144,9 @@ const ChooseWallet = ({ data: currentData, addData }) => {
value={accounts.infura}
save={saveWallet(selected)}
elements={schema.infura.elements}
validationSchema={schema.infura.validationSchema}
validationSchema={schema.infura.getValidationSchema(
accounts.infura
)}
buttonLabel={'Continue'}
buttonClass={classes.formButton}
/>