refactor: separate logic from checkbox component

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

@@ -1,10 +1,7 @@
-import { useQuery } from '@apollo/react-hooks'
 import Checkbox from '@material-ui/core/Checkbox'
 import { makeStyles } from '@material-ui/core/styles'
 import CheckBoxIcon from '@material-ui/icons/CheckBox'
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
-import gql from 'graphql-tag'
-import * as R from 'ramda'
 import React from 'react'
 
 import { Label2, Info3 } from 'src/components/typography'
@@ -43,24 +40,13 @@ const useStyles = makeStyles({
   }
 })
 
-const GET_INFO = gql`
+const CheckboxInput = ({ name, onChange, value, settings, ...props }) => {
-  query getData {
+  const { enabled, label, disabledMessage } = settings
-    config
-  }
-`
-
-const CheckboxInput = ({ name, onChange, value, ...props }) => {
-  const { data: configData } = useQuery(GET_INFO)
-
-  const disabledMessage = 'RBF verification not available'
-  const label = 'Enable RBF verification'
-  const wallet = R.lensPath(['config', 'wallets_BTC_wallet'])
-  const isEnabled = R.equals(R.view(wallet, configData), 'bitcoind')
   const classes = useStyles()
 
   return (
     <>
-      {isEnabled ? (
+      {enabled ? (
         <div className={classes.checkBoxLabel}>
           <Label2>{label}</Label2>
           <Checkbox

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

@@ -63,17 +63,20 @@ const FormRenderer = ({
       onSubmit={saveNonEmptySecret}>
       <Form className={classes.form}>
         <Grid container spacing={3} className={classes.grid}>
-          {elements.map(({ component, code, display, inputProps }) => (
+          {elements.map(
+            ({ component, code, display, settings, inputProps }) => (
               <Grid item xs={xs} key={code}>
                 <FastField
                   component={component}
                   {...inputProps}
                   name={code}
                   label={display}
+                  settings={settings}
                   fullWidth={true}
                 />
               </Grid>
-          ))}
+            )
+          )}
         </Grid>
         <Button
           className={classnames(classes.button, buttonClass)}

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

@@ -6,6 +6,7 @@ import React, { useState } from 'react'
 
 import Modal from 'src/components/Modal'
 import { SecretInput } from 'src/components/inputs/formik'
+import CheckboxInput from 'src/components/inputs/formik/Checkbox'
 import TitleSection from 'src/components/layout/TitleSection'
 import SingleRowTable from 'src/components/single-row-table/SingleRowTable'
 import { formatLong } from 'src/utils/string'
@@ -16,6 +17,7 @@ import schemas from './schemas'
 const GET_INFO = gql`
   query getData {
     accounts
+    config
   }
 `
 
@@ -57,8 +59,17 @@ const Services = () => {
     }))(faceElements)
   }
 
+  const updateSettings = element => {
+    const settings = element.settings
+    const wallet = R.lensPath(['config', 'wallets_BTC_wallet'])
+    const isEnabled = R.equals(R.view(wallet, data), settings.requirement)
+    settings.enabled = isEnabled
+    return element
+  }
+
   const getElements = ({ code, elements }) => {
     return R.map(elem => {
+      if (elem.component === CheckboxInput) return updateSettings(elem)
       if (elem.component !== SecretInput) return elem
       return {
         ...elem,

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

@@ -24,6 +24,12 @@ export default {
     {
       code: 'rbf',
       component: CheckboxInput,
+      settings: {
+        enabled: true,
+        disabledMessage: 'RBF verification not available',
+        label: 'Enable RBF verification',
+        requirement: 'bitcoind'
+      },
       face: true
     }
   ],