feat: rbf checkbox in blockcypher settings

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

@@ -1,10 +1,20 @@
+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 { fontSize2, fontSize3, secondaryColor } from 'src/styling/variables'
+import { Label2, Info3 } from 'src/components/typography'
+import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
+import {
+  fontSize2,
+  fontSize3,
+  secondaryColor,
+  offColor
+} from 'src/styling/variables'
 
 const useStyles = makeStyles({
   root: {
@@ -13,31 +23,72 @@ const useStyles = makeStyles({
       color: secondaryColor
     }
   },
-  checked: {}
+  checked: {},
+  checkBoxLabel: {
+    display: 'flex'
+  },
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    '& > svg': {
+      marginRight: 10
+    }
+  },
+  message: {
+    display: 'flex',
+    alignItems: 'center',
+    color: offColor,
+    margin: 0,
+    whiteSpace: 'break-spaces'
+  }
 })
 
-const CheckboxInput = ({ name, onChange, value, label, ...props }) => {
+const GET_INFO = gql`
+  query getData {
+    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 (
-    <Checkbox
-      id={name}
-      classes={{
-        root: classes.root,
-        checked: classes.checked
-      }}
-      onChange={onChange}
-      value={value}
-      checked={value}
-      icon={
-        <CheckBoxOutlineBlankIcon
-          style={{ marginLeft: 2, fontSize: fontSize3 }}
-        />
-      }
-      checkedIcon={<CheckBoxIcon style={{ fontSize: fontSize2 }} />}
-      disableRipple
-      {...props}
-    />
+    <>
+      {isEnabled ? (
+        <div className={classes.checkBoxLabel}>
+          <Label2>{label}</Label2>
+          <Checkbox
+            id={name}
+            classes={{
+              root: classes.root,
+              checked: classes.checked
+            }}
+            onChange={onChange}
+            value={value}
+            checked={value}
+            icon={
+              <CheckBoxOutlineBlankIcon
+                style={{ marginLeft: 2, fontSize: fontSize3 }}
+              />
+            }
+            checkedIcon={<CheckBoxIcon style={{ fontSize: fontSize2 }} />}
+            disableRipple
+            {...props}
+          />
+        </div>
+      ) : (
+        <div className={classes.wrapper}>
+          <WarningIcon />
+          <Info3 className={classes.message}>{disabledMessage}</Info3>
+        </div>
+      )}
+    </>
   )
 }
 

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

@@ -1,5 +1,6 @@
 import * as Yup from 'yup'
 
+import CheckboxInput from 'src/components/inputs/formik/Checkbox'
 import TextInputFormik from 'src/components/inputs/formik/TextInput'
 
 export default {
@@ -19,6 +20,11 @@ export default {
       display: 'Confidence Factor',
       component: TextInputFormik,
       face: true
+    },
+    {
+      code: 'rbf',
+      component: CheckboxInput,
+      face: true
     }
   ],
   getValidationSchema: () => {