diff --git a/new-lamassu-admin/src/pages/Wizard/components/Twilio.js b/new-lamassu-admin/src/pages/Wizard/components/Twilio.js
index b8f53767..b83ed4f1 100644
--- a/new-lamassu-admin/src/pages/Wizard/components/Twilio.js
+++ b/new-lamassu-admin/src/pages/Wizard/components/Twilio.js
@@ -1,23 +1,18 @@
import { useMutation, useQuery } from '@apollo/react-hooks'
-import { makeStyles } from '@material-ui/core'
+import { makeStyles, Box } from '@material-ui/core'
import classnames from 'classnames'
import gql from 'graphql-tag'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
+import InfoMessage from 'src/components/InfoMessage'
import Tooltip from 'src/components/Tooltip'
-import { IconButton } from 'src/components/buttons'
+import { Button } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
-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 { H1, H4, P } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
import twilio from 'src/pages/Services/schemas/twilio'
-import styles from 'src/pages/Wizard/Radio.styles'
-import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
-import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
+
+import styles from './Wallet/Shared.styles'
const GET_CONFIG = gql`
{
@@ -34,23 +29,32 @@ const SAVE_ACCOUNTS = gql`
const useStyles = makeStyles({
...styles,
- ...globalStyles,
- ...contactInfoStyles,
- ...addMachineStyles,
content: {
- width: 820,
- flex: 0
+ width: 820
},
radioLabel: {
...styles.radioLabel,
width: 280
+ },
+ wrapper: {
+ width: 1200,
+ height: 100,
+ margin: [[0, 'auto']]
+ },
+ title: {
+ marginLeft: 8,
+ marginBottom: 5
+ },
+ info: {
+ marginTop: 20,
+ marginBottom: 20
}
})
const options = [
{
code: 'enable',
- display: 'Yes, I will add two-way machines'
+ display: 'Yes, I will'
},
{
code: 'disable',
@@ -58,85 +62,89 @@ const options = [
}
]
-function Twilio({ dispatch, namespace }) {
+function Twilio({ doContinue }) {
+ const classes = useStyles()
+ const [selected, setSelected] = useState(null)
+ const [error, setError] = useState(false)
+
const { data, refetch } = useQuery(GET_CONFIG)
- const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
+ const [saveAccounts] = useMutation(SAVE_ACCOUNTS, {
+ onCompleted: doContinue
+ })
+
const accounts = data?.accounts ?? []
- 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 })
+ const onSelect = e => {
+ setSelected(e.target.value)
+ setError(false)
}
- useEffect(() => {
- dispatch({ type: 'wizard/SET_STEP', payload: namespace })
- }, [dispatch, namespace])
- const classes = useStyles()
+ const clickContinue = () => {
+ if (!selected) return setError(true)
+ doContinue()
+ }
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 saveAccounts({ variables: { accounts } }).then(() => refetch())
+ }
+
+ const titleClasses = {
+ [classes.title]: true,
+ [classes.error]: error
}
return (
Twilio (SMS service)
-
- Will you setup a two way machine?
-
+
+
+ Will you setup a two way machine or compliance?
+
+
Two-way machines allow your customers not only to buy (cash-in)
but also sell cryptocurrencies (cash-out).
- 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.
+ You’ll need an SMS service for cash-out transactions and for any
+ complaince triggers
-
+
handleRadio(event.target.value)}
+ value={selected}
+ onChange={onSelect}
/>
-
-
-
- Before configuring Twilio, create an account and phone number to use
- the Admin.
-
-
- {enable === 'enable' && (
-
+
+ Before configuring Twilio, create an account and phone number to use
+ the Admin.
+
+
+ {selected === 'enable' && (
+ <>
+ Enter credentials
+
+
+ )}
+ {selected !== 'enable' && (
+
)}
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet.js
deleted file mode 100644
index 370a8749..00000000
--- a/new-lamassu-admin/src/pages/Wizard/components/Wallet.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import React, { useState, useEffect } from 'react'
-
-import Sidebar from 'src/components/layout/Sidebar'
-import TitleSection from 'src/components/layout/TitleSection'
-import styles from 'src/pages/AddMachine/styles'
-import ChooseCoin from 'src/pages/Wizard/components/ChooseCoin'
-import ChooseWallet from 'src/pages/Wizard/components/ChooseWallet'
-
-import AllSet from './AllSet'
-import Blockcypher from './Blockcypher'
-import ChooseExchange from './ChooseExchange'
-
-const useStyles = makeStyles(styles)
-
-const COIN = 'Choose cryptocurrency'
-const WALLET = 'Choose wallet'
-const EXCHANGE = 'Exchange'
-const CASHOUT_OR_NOT = 'Blockcypher'
-const ALL_SET = 'All set'
-
-const pages = [COIN, WALLET, EXCHANGE, CASHOUT_OR_NOT, ALL_SET]
-
-const Wallet = ({ dispatch, namespace }) => {
- useEffect(() => {
- dispatch({ type: 'wizard/SET_STEP', payload: namespace })
- }, [dispatch, namespace])
- const [selected, setSelected] = useState(COIN)
- const classes = useStyles()
-
- const isSelected = it => selected === it
-
- return (
-
-
-
-
-
-
it}
- onClick={it => setSelected(it)}
- />
-
- {isSelected(COIN) &&
}
- {isSelected(WALLET) &&
}
- {isSelected(EXCHANGE) &&
}
- {isSelected(CASHOUT_OR_NOT) &&
}
- {isSelected(ALL_SET) &&
}
-
-
- )
-}
-
-export default Wallet
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.js
new file mode 100644
index 00000000..82f564d8
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/AllSet.js
@@ -0,0 +1,87 @@
+import { useQuery, useMutation } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core'
+import gql from 'graphql-tag'
+import * as R from 'ramda'
+import React, { useState } from 'react'
+
+import { Button } from 'src/components/buttons'
+import { NamespacedTable as EditableTable } from 'src/components/editableTable'
+import { P, H4 } from 'src/components/typography'
+import { getElements, WalletSchema } from 'src/pages/Wallet/helper'
+import { toNamespace, namespaces } from 'src/utils/config'
+
+import styles from './Shared.styles'
+
+const useStyles = makeStyles(styles)
+const GET_INFO = gql`
+ query getData {
+ config
+ accounts
+ accountsConfig {
+ code
+ display
+ class
+ cryptos
+ }
+ cryptoCurrencies {
+ code
+ display
+ }
+ }
+`
+
+const SAVE_CONFIG = gql`
+ mutation Save($config: JSONObject, $accounts: JSONObject) {
+ saveConfig(config: $config)
+ saveAccounts(accounts: $accounts)
+ }
+`
+
+const AllSet = ({ data: currentData, doContinue }) => {
+ const classes = useStyles()
+ console.log(currentData)
+
+ const { data } = useQuery(GET_INFO)
+ const [saveConfig] = useMutation(SAVE_CONFIG, {
+ onCompleted: doContinue
+ })
+
+ const [error, setError] = useState(false)
+
+ const coin = currentData?.coin
+
+ const accountsConfig = data?.accountsConfig
+ const cryptoCurrencies = data?.cryptoCurrencies ?? []
+
+ const save = () => {
+ if (!WalletSchema.isValidSync(currentData)) return setError(true)
+
+ const withCoin = toNamespace(coin, R.omit('coin', currentData))
+ const config = toNamespace(namespaces.WALLETS)(withCoin)
+ setError(false)
+ return saveConfig({ variables: { config } })
+ }
+
+ return (
+ <>
+
All set
+
+ This are your wallet settings. You can later edit these and add
+ additional coins.
+
+
+
+
+ )
+}
+
+export default AllSet
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Blockcypher.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.js
similarity index 65%
rename from new-lamassu-admin/src/pages/Wizard/components/Blockcypher.js
rename to new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.js
index d49e29f6..7559a8dc 100644
--- a/new-lamassu-admin/src/pages/Wizard/components/Blockcypher.js
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Blockcypher.js
@@ -1,14 +1,15 @@
import { useMutation, useQuery } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core'
import gql from 'graphql-tag'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
-import { Link } from 'src/components/buttons'
+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 'src/pages/Wizard/Radio.styles'
+
+import styles from './Shared.styles'
const useStyles = makeStyles({
...styles,
@@ -25,7 +26,7 @@ const GET_CONFIG = gql`
}
`
const SAVE_ACCOUNTS = gql`
- mutation Save($accounts: JSONObject) {
+ mutation SaveAccountsBC($accounts: JSONObject) {
saveAccounts(accounts: $accounts)
}
`
@@ -41,23 +42,22 @@ const options = [
}
]
-const Blockcypher = () => {
+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 classes = useStyles()
- const [saveConfig] = useMutation(SAVE_ACCOUNTS)
- const [currentCode, setCurrentCode] = useState('disable')
-
- useEffect(() => {
- if (!accounts?.blockcypher) return
- schema.blockcypher.validationSchema.isValidSync(accounts.blockcypher) &&
- setCurrentCode('enable')
- }, [accounts])
-
- const handleRadio = cashoutOrNot => {
- setCurrentCode(cashoutOrNot)
- cashoutOrNot === 'disable' && save({})
+ const onSelect = e => {
+ setSelected(e.target.value)
+ setError(false)
}
const save = blockcypher => {
@@ -67,7 +67,7 @@ const Blockcypher = () => {
return (
<>
-
Blockcypher
+
Blockcypher
If you are enabling cash-out services,{' '}
@@ -84,17 +84,26 @@ const Blockcypher = () => {
labelClassName={classes.radioLabel}
className={classes.radioGroup}
options={options}
- value={currentCode}
- onChange={event => handleRadio(event.target.value)}
+ value={selected}
+ onChange={onSelect}
/>
- {currentCode === 'enable' && (
+ {selected === 'disable' && (
+
+ )}
+ {selected === 'enable' && (
)}
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.js
new file mode 100644
index 00000000..c240a139
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseCoin.js
@@ -0,0 +1,72 @@
+import { useQuery } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core'
+import { Formik, Form, Field } from 'formik'
+import gql from 'graphql-tag'
+import React, { useState } from 'react'
+import * as Yup from 'yup'
+
+import PromptWhenDirty from 'src/components/PromptWhenDirty'
+import { Button } from 'src/components/buttons'
+import { RadioGroup } from 'src/components/inputs/formik'
+import { H4 } from 'src/components/typography'
+
+import styles from './Shared.styles'
+
+const useStyles = makeStyles(styles)
+
+const GET_CONFIG = gql`
+ {
+ cryptoCurrencies {
+ code
+ display
+ }
+ }
+`
+
+const schema = Yup.object().shape({
+ coin: Yup.string().required()
+})
+
+const ChooseCoin = ({ addData }) => {
+ const classes = useStyles()
+ const [error, setError] = useState(false)
+
+ const { data } = useQuery(GET_CONFIG)
+ const cryptoCurrencies = data?.cryptoCurrencies ?? []
+
+ const onSubmit = it => {
+ if (!schema.isValidSync(it)) return setError(true)
+ addData(it)
+ }
+
+ return (
+ <>
+
+ Choose your first cryptocurrency
+
+
+
+
+
+
+ )
+}
+
+export default ChooseCoin
diff --git a/new-lamassu-admin/src/pages/Wizard/components/ChooseExchange.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.js
similarity index 51%
rename from new-lamassu-admin/src/pages/Wizard/components/ChooseExchange.js
rename to new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.js
index ea4e9b5a..e6487b6e 100644
--- a/new-lamassu-admin/src/pages/Wizard/components/ChooseExchange.js
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseExchange.js
@@ -2,26 +2,24 @@ import { useQuery, useMutation } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core'
import gql from 'graphql-tag'
import * as R from 'ramda'
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState } from 'react'
-import { ActionButton } from 'src/components/buttons'
+import { Button, ActionButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { H4, Info3 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
import schema from 'src/pages/Services/schemas'
-import styles from 'src/pages/Wizard/Radio.styles'
import { ReactComponent as InverseLinkIcon } from 'src/styling/icons/action/external link/white.svg'
import { ReactComponent as LinkIcon } from 'src/styling/icons/action/external link/zodiac.svg'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
-import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
+import styles from './Shared.styles'
import { getItems } from './getItems'
const useStyles = makeStyles(styles)
const GET_CONFIG = gql`
{
- config
accounts
accountsConfig {
code
@@ -36,65 +34,33 @@ const GET_CONFIG = gql`
}
`
-const SAVE_CONFIG = gql`
- mutation Save($config: JSONObject) {
- saveConfig(config: $config)
- }
-`
const SAVE_ACCOUNTS = gql`
mutation Save($accounts: JSONObject) {
saveAccounts(accounts: $accounts)
}
`
-const ChooseExchange = () => {
+
+const isConfigurable = it => R.contains(it)(['kraken', 'itbit', 'bitstamp'])
+
+const ChooseExchange = ({ data: currentData, addData }) => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
- const [saveConfig] = useMutation(SAVE_CONFIG)
- const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
- const [currentCode, setCurrentCode] = useState(null)
- const [currentName, setCurrentName] = useState(null)
+ const [saveAccounts] = useMutation(SAVE_ACCOUNTS, {
+ onCompleted: () => submit()
+ })
+
+ const [selected, setSelected] = useState(null)
+ const [error, setError] = useState(false)
+
const accounts = data?.accounts ?? []
const accountsConfig = data?.accountsConfig ?? []
- const walletConfigs =
- data?.config && fromNamespace(namespaces.WALLETS)(data.config)
- const wizardCoin =
- walletConfigs &&
- Object.keys(walletConfigs).find(
- k => k.endsWith('_wizard') && walletConfigs[k]
- )
+ const coin = currentData.coin
+ const exchanges = getItems(accountsConfig, accounts, 'exchange', coin)
- const coinCode = wizardCoin && wizardCoin.replace('_wizard', '')
- const exchanges = getItems(accountsConfig, accounts, 'exchange', coinCode)
-
- const setCurrName = useCallback(
- currentCode => {
- const ex =
- currentCode &&
- R.union(exchanges.filled, exchanges.unfilled).find(
- ({ code }) => code === currentCode
- )
- setCurrentName(ex && ex.display)
- },
- [exchanges]
- )
-
- useEffect(() => {
- if (currentCode) return
- const exchange =
- walletConfigs && coinCode && fromNamespace(coinCode)(walletConfigs)
- setCurrentCode(exchange && exchange.exchange)
- setCurrName(exchange && exchange.exchange)
- }, [walletConfigs, coinCode, currentCode, setCurrName])
-
- const save = exchange => {
- setCurrentCode(exchange)
- setCurrName(exchange)
- const config = toNamespace(`wallets_${coinCode}`)({
- active: true,
- exchange
- })
- return saveConfig({ variables: { config } })
+ const submit = () => {
+ if (!selected) return setError(true)
+ addData({ exchange: selected })
}
const saveExchange = name => exchange => {
@@ -102,6 +68,11 @@ const ChooseExchange = () => {
return saveAccounts({ variables: { accounts } })
}
+ const onSelect = e => {
+ setSelected(e.target.value)
+ setError(false)
+ }
+
const supportArticles = {
kraken:
'https://support.lamassu.is/hc/en-us/articles/115001206891-Kraken-trading',
@@ -113,22 +84,27 @@ const ChooseExchange = () => {
return (
-
Choose your exchange
+
Choose your exchange
save(event.target.value)}
+ value={selected}
+ onChange={onSelect}
/>
- {['kraken', 'itbit', 'bitstamp'].includes(currentCode) && (
+ {!isConfigurable(selected) && (
+
+ )}
+ {isConfigurable(selected) && (
<>
- Make sure you set up {currentName} to enter the necessary
- information below. Please follow the instructions on our support
- page if you haven’t.
+ Make sure you set up {selected} to enter the necessary information
+ below. Please follow the instructions on our support page if you
+ haven’t.
{
className={classes.actionButtonLink}
target="_blank"
rel="noopener noreferrer"
- href={supportArticles[currentCode]}>
- {currentName} trading
+ href={supportArticles[selected]}>
+ {selected} trading
Enter exchange information
)}
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.js
new file mode 100644
index 00000000..ca5e0955
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseTicker.js
@@ -0,0 +1,67 @@
+import { useQuery } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core'
+import gql from 'graphql-tag'
+import * as R from 'ramda'
+import React, { useState } from 'react'
+
+import { Button } from 'src/components/buttons'
+import { RadioGroup } from 'src/components/inputs'
+import { H4 } from 'src/components/typography'
+
+import styles from './Shared.styles'
+import { getItems } from './getItems'
+
+const useStyles = makeStyles(styles)
+
+const GET_CONFIG = gql`
+ {
+ accountsConfig {
+ code
+ display
+ class
+ cryptos
+ }
+ }
+`
+
+const ChooseTicker = ({ data: currentData, addData }) => {
+ const classes = useStyles()
+ const { data } = useQuery(GET_CONFIG)
+
+ const [selected, setSelected] = useState(null)
+ const [error, setError] = useState(false)
+
+ const accounts = data?.accounts ?? []
+ const accountsConfig = data?.accountsConfig ?? []
+
+ const coin = currentData.coin
+ const tickers = getItems(accountsConfig, accounts, 'ticker', coin)
+
+ const submit = () => {
+ if (!selected) return setError(true)
+ addData({ ticker: selected })
+ }
+
+ const onSelect = e => {
+ setSelected(e.target.value)
+ setError(false)
+ }
+
+ return (
+
+
Choose your ticker
+
+
+
+ )
+}
+
+export default ChooseTicker
diff --git a/new-lamassu-admin/src/pages/Wizard/components/ChooseWallet.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.js
similarity index 52%
rename from new-lamassu-admin/src/pages/Wizard/components/ChooseWallet.js
rename to new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.js
index 899356fa..e754dff0 100644
--- a/new-lamassu-admin/src/pages/Wizard/components/ChooseWallet.js
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/ChooseWallet.js
@@ -2,27 +2,25 @@ import { useQuery, useMutation } from '@apollo/react-hooks'
import { makeStyles } from '@material-ui/core'
import gql from 'graphql-tag'
import * as R from 'ramda'
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
-import { ActionButton } from 'src/components/buttons'
+import { Button, ActionButton } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { H4, Info3 } from 'src/components/typography'
import FormRenderer from 'src/pages/Services/FormRenderer'
import schema from 'src/pages/Services/schemas'
import bitgo from 'src/pages/Services/schemas/singlebitgo'
-import styles from 'src/pages/Wizard/Radio.styles'
import { ReactComponent as InverseLinkIcon } from 'src/styling/icons/action/external link/white.svg'
import { ReactComponent as LinkIcon } from 'src/styling/icons/action/external link/zodiac.svg'
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
-import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
+import styles from './Shared.styles'
import { getItems } from './getItems'
const useStyles = makeStyles(styles)
const GET_CONFIG = gql`
{
- config
accounts
accountsConfig {
code
@@ -37,68 +35,80 @@ const GET_CONFIG = gql`
}
`
-const SAVE_CONFIG = gql`
- mutation Save($config: JSONObject) {
- saveConfig(config: $config)
- }
-`
const SAVE_ACCOUNTS = gql`
mutation Save($accounts: JSONObject) {
saveAccounts(accounts: $accounts)
}
`
-const WalletCoin = () => {
+
+const isConfigurable = it => R.contains(it)(['infura', 'bitgo'])
+
+const isLocalHosted = it =>
+ R.contains(it)([
+ 'bitcoind',
+ 'geth',
+ 'litecoind',
+ 'dashd',
+ 'zcashd',
+ 'bitcoincashd'
+ ])
+
+const ChooseWallet = ({ data: currentData, addData }) => {
const classes = useStyles()
const { data } = useQuery(GET_CONFIG)
- const [saveConfig] = useMutation(SAVE_CONFIG)
- const [saveAccounts] = useMutation(SAVE_ACCOUNTS)
- const [currentCode, setCurrentCode] = useState(null)
+ const [saveAccounts] = useMutation(SAVE_ACCOUNTS, {
+ onCompleted: () => submit()
+ })
+
+ const [selected, setSelected] = useState(null)
+ const [error, setError] = useState(false)
+
const accounts = data?.accounts ?? []
const accountsConfig = data?.accountsConfig ?? []
- const walletConfigs =
- data?.config && fromNamespace(namespaces.WALLETS)(data.config)
- const wizardCoin =
- walletConfigs &&
- Object.keys(walletConfigs).find(
- k => k.endsWith('_wizard') && walletConfigs[k]
- )
-
- const coinCode = wizardCoin && wizardCoin.replace('_wizard', '')
- const wallets = getItems(accountsConfig, accounts, 'wallet', coinCode)
-
- useEffect(() => {
- if (currentCode) return
- const wallet =
- walletConfigs && coinCode && fromNamespace(coinCode)(walletConfigs)
- setCurrentCode(wallet && wallet.wallet)
- }, [walletConfigs, coinCode, currentCode])
-
- const save = wallet => {
- setCurrentCode(wallet)
- const config = toNamespace(`wallets_${coinCode}`)({
- active: true,
- wallet
- })
- return saveConfig({ variables: { config } })
- }
+ const coin = currentData.coin
+ const wallets = getItems(accountsConfig, accounts, 'wallet', coin)
const saveWallet = name => wallet => {
const accounts = { [name]: wallet }
return saveAccounts({ variables: { accounts } })
}
+ const submit = () => {
+ if (!selected) return setError(true)
+ addData({ wallet: selected })
+ }
+
+ const onSelect = e => {
+ setSelected(e.target.value)
+ setError(false)
+ }
+
return (
-
Choose your wallet
+
Choose your wallet
save(event.target.value)}
+ value={selected}
+ onChange={onSelect}
/>
- {currentCode === 'bitgo' && (
+ {isLocalHosted(selected) && (
+
+
+
+ To setup {selected} please read our instructions from our support
+ article.
+
+
+ )}
+ {!isConfigurable(selected) && (
+
+ )}
+ {selected === 'bitgo' && (
<>
@@ -108,48 +118,40 @@ const WalletCoin = () => {
page if you haven’t.
-
-
+
+
Support article
-
-
+
+
Enter wallet information
)}
- {currentCode === 'bitcoind' && (
-
-
-
- To setup bitcoind please read our instructions from our support
- article. We’ll later verify if your wallet is correctly set up for
- you to progress
-
-
- )}
- {currentCode === 'infura' && (
+ {selected === 'infura' && (
<>
- Enter wallet information
+ Enter wallet information
)}
@@ -157,4 +159,4 @@ const WalletCoin = () => {
)
}
-export default WalletCoin
+export default ChooseWallet
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js
new file mode 100644
index 00000000..4af8b17a
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Shared.styles.js
@@ -0,0 +1,42 @@
+import { errorColor, spacer, primaryColor } from 'src/styling/variables'
+
+const LABEL_WIDTH = 150
+
+export default {
+ radioGroup: {
+ flexDirection: 'row',
+ width: 600
+ },
+ radioLabel: {
+ width: LABEL_WIDTH,
+ height: 48
+ },
+ mdForm: {
+ width: 385
+ },
+ infoMessage: {
+ display: 'flex',
+ marginBottom: 20,
+ '& > p': {
+ width: 330,
+ marginTop: 4,
+ marginLeft: 16
+ }
+ },
+ actionButton: {
+ marginBottom: spacer * 4
+ },
+ actionButtonLink: {
+ textDecoration: 'none',
+ color: primaryColor
+ },
+ error: {
+ color: errorColor
+ },
+ button: {
+ marginTop: spacer * 5
+ },
+ formButton: {
+ margin: [[spacer * 3, 0, 0]]
+ }
+}
diff --git a/new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.js b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.js
new file mode 100644
index 00000000..0a9c77af
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Wizard/components/Wallet/Wallet.js
@@ -0,0 +1,78 @@
+import { makeStyles } from '@material-ui/core'
+import * as R from 'ramda'
+import React, { useState } from 'react'
+
+import Sidebar, { Stepper } from 'src/components/layout/Sidebar'
+import TitleSection from 'src/components/layout/TitleSection'
+import styles from 'src/pages/AddMachine/styles'
+
+import AllSet from './AllSet'
+import Blockcypher from './Blockcypher'
+import ChooseCoin from './ChooseCoin'
+import ChooseExchange from './ChooseExchange'
+import ChooseTicker from './ChooseTicker'
+import ChooseWallet from './ChooseWallet'
+
+const useStyles = makeStyles(styles)
+
+const steps = [
+ {
+ label: 'Choose cryptocurrency',
+ component: ChooseCoin
+ },
+ {
+ label: 'Choose wallet',
+ component: ChooseWallet
+ },
+ {
+ label: 'Choose ticker',
+ component: ChooseTicker
+ },
+ {
+ label: 'Exchange',
+ component: ChooseExchange
+ },
+ {
+ label: 'Blockcypher',
+ component: Blockcypher
+ },
+ {
+ label: 'All set',
+ component: AllSet
+ }
+]
+
+const Wallet = ({ doContinue }) => {
+ const [step, setStep] = useState(0)
+ const [data, setData] = useState({})
+
+ const classes = useStyles()
+ const mySteps = data?.coin === 'BTC' ? steps : R.remove(4, 1, steps)
+
+ const Component = mySteps[step].component
+
+ const addData = it => {
+ setData(R.merge(data, it))
+ setStep(step + 1)
+ }
+
+ return (
+
+
+
+
+
+
+ {mySteps.map((it, idx) => (
+
+ ))}
+
+
+
+
+
+
Welcome to Lamassu Admin
@@ -43,7 +35,7 @@ function Welcome({ dispatch }) {
help set up you need before start adding machines.
-
diff --git a/new-lamassu-admin/src/pages/Wizard/helper.js b/new-lamassu-admin/src/pages/Wizard/helper.js
new file mode 100644
index 00000000..b20467b1
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Wizard/helper.js
@@ -0,0 +1,128 @@
+import * as R from 'ramda'
+import React from 'react'
+
+import { schema as CommissionsSchema } from 'src/pages/Commissions/helper'
+import { LocaleSchema } from 'src/pages/Locales/helper'
+import { WalletSchema } from 'src/pages/Wallet/helper'
+import { fromNamespace, namespaces } from 'src/utils/config'
+
+import Commissions from './components/Commissions'
+import Locale from './components/Locales'
+// import Notifications from './components/Notifications'
+// import WizardOperatorInfo from './components/OperatorInfo'
+import Twilio from './components/Twilio'
+import Wallet from './components/Wallet/Wallet'
+import Welcome from './components/Welcome'
+
+const hasValidWallet = (config, crypto) => {
+ const wallet = fromNamespace(namespaces.WALLETS, config)
+ const coins = R.map(it => fromNamespace(it.code, wallet))(crypto)
+
+ const hasValidConfig = R.compose(
+ R.any(R.identity),
+ R.map(it => WalletSchema.isValidSync(it))
+ )(coins)
+
+ return hasValidConfig
+}
+
+const hasValidLocale = config => {
+ const locale = fromNamespace(namespaces.LOCALE, config)
+ return LocaleSchema.isValidSync(locale)
+}
+
+const hasValidCommissions = config => {
+ const commission = fromNamespace(namespaces.COMMISSIONS, config)
+ return CommissionsSchema.isValidSync(commission)
+}
+
+const getWizardStep = (config, crypto) => {
+ if (!config) return 0
+
+ const validWallet = hasValidWallet(config, crypto)
+ if (!validWallet) return 1
+
+ const validLocale = hasValidLocale(config)
+ if (!validLocale) return 2
+
+ const validCommission = hasValidCommissions(config)
+ if (!validCommission) return 3
+
+ return 0
+}
+
+const STEPS = [
+ {
+ id: 'welcome',
+ Component: Welcome
+ },
+ {
+ id: 'wallet',
+ Component: Wallet,
+ exImage: '/fullexample.wallet.png',
+ subtitle: 'Wallet settings',
+ text: `Your wallet settings are the first step for this wizard. We'll start
+ by setting one of cryptocurrency to get you up and running, but you
+ can later setup as many cryptocurrencies as you want.`
+ },
+ {
+ id: 'locale',
+ Component: Locale,
+ exImage: '/fullexample.locale.png',
+ subtitle: 'Locales',
+ text: `From the Locales page, you can define some important default settings
+ of your machines. These values will be the default values of all
+ machines you'll later add to your network. Default settings keep you
+ from having to enther the same values everytime you add a new machine.
+ Once a machine is added, you may override some of these values in the
+ overrides section.`
+ },
+ {
+ id: 'twilio',
+ Component: Twilio,
+ exImage: '/fullexample.twilio.png',
+ subtitle: 'Twilio (SMS service)',
+ text: (
+ <>
+ Twilio is used for SMS operator notifications, phone number collection
+ for compliance, and 1-confirmation redemptions on cash-out transactions.
+
+ You'll need to configure Twilio if you're offering cash-out or any
+ compliance options
+
+ )
+ },
+ {
+ id: 'commissions',
+ Component: Commissions,
+ exImage: '/fullexample.commissions.png',
+ subtitle: 'Commissions',
+ text: `From the Commissions page, you can define all the commissions of your
+ machines. The values set here will be default values of all machines
+ you'll later add to your network. Default settings keep you from
+ having to enter the same values everytime you add a new machine. Once
+ a machine is added, you may override these values per machine and per
+ cryptocurrency in the overrides section.`
+ }
+ // {
+ // id: 'notifications',
+ // Component: Notifications,
+ // exImage: '/fullexample.notifications.png',
+ // subtitle: 'Notifications',
+ // text: `Your notification settings will allow customize what notifications you
+ // get and where. You can later override all default balance alerts setup
+ // here.`
+ // },
+ // {
+ // id: 'operatorInfo',
+ // Component: WizardOperatorInfo,
+ // exImage: '/fullexample.operatorinfo.png',
+ // subtitle: 'Operator info',
+ // text: `Your contact information is important for your customer to be able
+ // to contact you in case there’s a problem with one of your machines.
+ // In this page, you also be able to set up what you want to share with
+ // Coin ATM Radar and add the Terms & Services text that is displayed by your machines.`
+ // }
+]
+
+export { getWizardStep, STEPS }
diff --git a/new-lamassu-admin/src/stories/index.js b/new-lamassu-admin/src/stories/index.js
index e30ee344..030c9e56 100644
--- a/new-lamassu-admin/src/stories/index.js
+++ b/new-lamassu-admin/src/stories/index.js
@@ -13,17 +13,11 @@ import extendJss from 'jss-plugin-extend'
import React from 'react'
import { ActionButton, Button, Link } from 'src/components/buttons'
-import {
- Radio,
- TextInput,
- Switch,
- CashIn,
- CashOut
-} from 'src/components/inputs'
+import { TextInput, Switch, CashIn, CashOut } from 'src/components/inputs'
import { ReactComponent as AuthorizeIconReversed } from 'src/styling/icons/button/authorize/white.svg'
import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.svg'
-import ConfirmDialog from '../components/ConfirmDialog'
+// import ConfirmDialog from '../components/ConfirmDialog'
import {
H1,
H2,
@@ -169,21 +163,6 @@ story.add('Checkbox', () => (
))
-story.add('ConfirmDialog', () => (
-
- {
- window.alert('dissmised')
- }}
- onConfirmed={() => {
- window.alert('confirmed')
- }}
- toBeConfirmed="there-is-no-fate"
- />
-
-))
-
story.add('Cashbox', () => (
@@ -211,8 +190,6 @@ story.add('Cashbox', () => (
))
-story.add('Radio', () => )
-
const typographyStory = storiesOf('Typography', module)
typographyStory.add('H1', () =>
Hehehe
)