fix: wizard rework

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

@@ -0,0 +1,114 @@
+import { useMutation, useQuery } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core'
+import gql from 'graphql-tag'
+import React, { useState } from 'react'
+
+import { Link, Button } from 'src/components/buttons'
+import { RadioGroup } from 'src/components/inputs'
+import { P, H4 } from 'src/components/typography'
+import FormRenderer from 'src/pages/Services/FormRenderer'
+import schema from 'src/pages/Services/schemas'
+
+import styles from './Shared.styles'
+
+const useStyles = makeStyles({
+  ...styles,
+  radioGroup: styles.radioGroup,
+  radioLabel: {
+    ...styles.radioLabel,
+    width: 200
+  }
+})
+
+const GET_CONFIG = gql`
+  {
+    accounts
+  }
+`
+const SAVE_ACCOUNTS = gql`
+  mutation SaveAccountsBC($accounts: JSONObject) {
+    saveAccounts(accounts: $accounts)
+  }
+`
+
+const options = [
+  {
+    code: 'enable',
+    display: 'I will enable cash-out'
+  },
+  {
+    code: 'disable',
+    display: "I won't enable cash-out"
+  }
+]
+
+const Blockcypher = ({ addData }) => {
+  const classes = useStyles()
+
+  const { data } = useQuery(GET_CONFIG)
+  const [saveConfig] = useMutation(SAVE_ACCOUNTS, {
+    onCompleted: () => addData({ zeroConf: 'blockcypher' })
+  })
+
+  const [selected, setSelected] = useState(null)
+  const [error, setError] = useState(false)
+
+  const accounts = data?.accounts ?? []
+
+  const onSelect = e => {
+    setSelected(e.target.value)
+    setError(false)
+  }
+
+  const save = blockcypher => {
+    const accounts = { blockcypher }
+    return saveConfig({ variables: { accounts } })
+  }
+
+  return (
+    <>
+      <H4 className={error && classes.error}>Blockcypher</H4>
+      <P>
+        If you are enabling cash-out services,{' '}
+        <Link>
+          <a
+            className={classes.actionButtonLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://support.lamassu.is/hc/en-us/articles/115001209472-Blockcypher">
+            create a Blockcypher account.
+          </a>
+        </Link>
+      </P>
+      <RadioGroup
+        labelClassName={classes.radioLabel}
+        className={classes.radioGroup}
+        options={options}
+        value={selected}
+        onChange={onSelect}
+      />
+      <div className={classes.mdForm}>
+        {selected === 'disable' && (
+          <Button
+            size="lg"
+            onClick={() => addData({ zeroConf: 'all-zero-conf' })}
+            className={classes.button}>
+            Continue
+          </Button>
+        )}
+        {selected === 'enable' && (
+          <FormRenderer
+            value={accounts.blockcypher}
+            save={save}
+            elements={schema.blockcypher.elements}
+            validationSchema={schema.blockcypher.validationSchema}
+            buttonLabel={'Continue'}
+            buttonClass={classes.formButton}
+          />
+        )}
+      </div>
+    </>
+  )
+}
+
+export default Blockcypher