refactor: simplify and cleanup front-end

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

@@ -2,9 +2,9 @@ import React, { memo, useState } from 'react'
 
 import { TextInput } from '../base'
 
-const SecretInput = memo(({ value, onFocus, onBlur, ...props }) => {
+const SecretInput = memo(
+  ({ value, onFocus, isPasswordFilled, onBlur, ...props }) => {
     const [focused, setFocused] = useState(false)
-  const isPasswordFilled = props.isPasswordFilled
     const placeholder = '⚬ ⚬ ⚬ This field is set ⚬ ⚬ ⚬'
     const innerOnFocus = event => {
       setFocused(true)
@@ -22,12 +22,14 @@ const SecretInput = memo(({ value, onFocus, onBlur, ...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

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

@@ -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 = {

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

@@ -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}

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

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

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

@@ -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)
   }
 }

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

@@ -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)
   }
 }

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

@@ -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,8 +21,8 @@ export default {
       face: true
     }
   ],
-
+  getValidationSchema: () => {
-  validationSchema: Yup.object().shape({
+    return Yup.object().shape({
       token: Yup.string()
         .max(100, 'Too long')
         .required(),
@@ -33,3 +32,4 @@ export default {
         .required()
     })
   }
+}

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

@@ -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)
   }
 }

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

@@ -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)
   }
 }

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

@@ -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)
   }
 }

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

@@ -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,7 +30,8 @@ export default {
       face: true
     }
   ],
-  validationSchema: Yup.object().shape({
+  getValidationSchema: () => {
+    return Yup.object().shape({
       apiKey: Yup.string()
         .max(100, 'Too long')
         .required(),
@@ -48,3 +48,4 @@ export default {
         .required()
     })
   }
+}

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

@@ -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)
   }
 }

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

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

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

@@ -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}
           />