feat: Admin Wizard

feat: Wallet admin wizard
feat: Notifications admin wizard
feat: Twillio admin wizard
feat: Commissions admin wizard
feat: OperatorInfor admin wizard
feat: Locales admin wizard
feat: wizard admin route
fix: better margin for admin wizard sidebar
feat: allow FormRenderer to receive a field xs size
feat: add a few flags on notifications, to reuse component parts as desired
fix: wrong gql
fix: missnig prop
fix: eslint
fix: radio styles
feat: configure bitgo wallet for single cryptocurrency on wizard
fix: eslint
feat: set up infura wallet on wizard
feat: exchange account config on wizard
fix: choose wallet choose exchange DRY
fix: layout
fix: rebase wizard to use commissions new changes
fix: typo
fix: eslint
fix: horizontal radios
feat: radio interacts with mailgun enabled/disabled state
fix: use yup to validate wizard steps
fix: eslint
feat: add xl size for button
feat: admin wizard splash
feat: use fullsize modal for wizard
fix: eslint
feat: Footer styles
feat: wizard footer styles
fix: wallet step styles
fix: zeplin spec
fix: zeplin styles
feat: blockcypher link
fix: xs can only be used on item
feat: minimize wizard footer on click away
feat: read blockcypher config
fix: all set title styles do not match
fix: no need to wrap the wrapper
feat: allow to override Setup table width for wizard
fix: wrapper class for wizard steps
fix: layout elements for mailgun step
feat: use yup to validate wizard steps
style: eslint
feat: operator info components open by default on wizard
fix: all set table is too wide
feat: full example modal
feat: check if wallet has valid config
feat: check if twilio has valid config

new-lamassu-admin/src/pages/Wizard/components/Twilio.js

@@ -0,0 +1,143 @@
+import { useMutation, useQuery } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core'
+import classnames from 'classnames'
+import gql from 'graphql-tag'
+import React, { useEffect, useState } from 'react'
+
+import { H1, Label1, H4, P } from 'src/components/typography'
+import addMachineStyles from 'src/pages/AddMachine/styles'
+import {
+  styles as globalStyles,
+  contactInfoStyles
+} from 'src/pages/OperatorInfo/OperatorInfo.styles'
+import FormRenderer from 'src/pages/Services/FormRenderer'
+import twilio from 'src/pages/Services/schemas/twilio'
+import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
+import { RadioGroup } from 'src/components/inputs'
+import styles from 'src/pages/Wizard/Radio.styles'
+import Tooltip from 'src/components/Tooltip'
+import { IconButton } from 'src/components/buttons'
+import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
+
+const GET_CONFIG = gql`
+  {
+    config
+    accounts
+  }
+`
+
+const SAVE_ACCOUNTS = gql`
+  mutation Save($accounts: JSONObject) {
+    saveAccounts(accounts: $accounts)
+  }
+`
+
+const useStyles = makeStyles({
+  ...styles,
+  ...globalStyles,
+  ...contactInfoStyles,
+  ...addMachineStyles,
+  content: {
+    width: 820,
+    flex: 0
+  },
+  radioLabel: {
+    ...styles.radioLabel,
+    width: 280
+  }
+})
+
+const options = [
+  {
+    code: 'enable',
+    display: 'Yes, I will add two-way machines'
+  },
+  {
+    code: 'disable',
+    display: "No, not for now"
+  }
+]
+
+function Twilio({ dispatch, namespace }) {
+  const { data, refetch } = useQuery(GET_CONFIG)
+  const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
+  const accounts = data?.accounts ?? []
+  const config = data?.config ?? []
+
+  const [enable, setEnable] = useState('disable')
+
+  useEffect(() => {
+    if (!accounts?.twilio) return
+    twilio.validationSchema.isValidSync(accounts.twilio) && setEnable('enable')
+  }, [accounts])
+
+  const handleRadio = enableOrNot => {
+    setEnable(enableOrNot)
+    enableOrNot === 'disable' && save({})
+    enableOrNot === 'enable' && save({ enable: true, ...accounts?.twilio })
+  }
+
+  useEffect(() => {
+    dispatch({ type: 'wizard/SET_STEP', payload: namespace })
+  }, [dispatch, namespace])
+  const classes = useStyles()
+
+  const save = twilio => {
+    const accounts = { twilio }
+    return saveAccounts({ variables: { accounts } })
+      .then(() => refetch())
+      .then(({ data }) => {
+        return dispatch({
+          type: 'wizard/VALIDATE_STEP',
+          payload: { accounts: data.accounts, config: data.config }
+        })
+      })
+  }
+
+  return (
+    <div className={classes.wrapper}>
+      <div className={classes.content}>
+        <H1>Twilio (SMS service)</H1>
+        <H4>
+          Will you setup a two way machine?
+        <Tooltip width={304} enableClick Button={IconButton} Icon={HelpIcon}>
+            <P>
+              Two-way machines allow your customers not only to buy (cash-in) but also sell cryptocurrencies (cash-out).</P>
+            <P>
+              To get your admin up and running, you’ll only need an SMS service for cash-out transactions. If you’re using one-way machines, select “No” to skip this step for now. You can later set it up within the Lamassu Admin.</P>
+          </Tooltip>
+
+        </H4>
+
+        <RadioGroup
+          labelClassName={classes.radioLabel}
+          className={classes.radioGroup}
+          options={options}
+          value={enable}
+          onChange={event => handleRadio(event.target.value)}
+        />
+
+
+        <div className={classnames(classes.section, classes.infoMessage)}>
+          <WarningIcon />
+          <Label1>
+            Before configuring Twilio, create an account and phone number to use
+            the Admin.
+        </Label1>
+        </div>
+        {enable === 'enable' && (
+          <FormRenderer
+            xs={6}
+            save={save}
+            value={accounts.twilio}
+            elements={twilio.elements}
+            validationSchema={twilio.validationSchema}
+            buttonLabel={'Save'}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Twilio