chore: remove direction option from trigger page
This commit is contained in:
parent
3a6f3a2915
commit
f7f5cba7c2
4 changed files with 151 additions and 136 deletions
|
|
@ -50,7 +50,9 @@ const Triggers = () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
const add = rawConfig => {
|
const add = rawConfig => {
|
||||||
const toSave = R.concat([{ id: v4(), ...rawConfig }])(triggers)
|
const toSave = R.concat([{ id: v4(), direction: 'both', ...rawConfig }])(
|
||||||
|
triggers
|
||||||
|
)
|
||||||
setError(false)
|
setError(false)
|
||||||
return saveConfig({ variables: { config: { triggers: toServer(toSave) } } })
|
return saveConfig({ variables: { config: { triggers: toServer(toSave) } } })
|
||||||
}
|
}
|
||||||
|
|
@ -73,9 +75,13 @@ const Triggers = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TitleSection title="Compliance Triggers">
|
<TitleSection title="Compliance Triggers" className={classes.tableWidth}>
|
||||||
<Box display="flex" alignItems="center">
|
<Box display="flex" alignItems="center">
|
||||||
<Box display="flex" alignItems="center" justifyContent="end" mr={3}>
|
<Box
|
||||||
|
display="flex"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="end"
|
||||||
|
mr="-5px">
|
||||||
<P>Reject reused addresses</P>
|
<P>Reject reused addresses</P>
|
||||||
<Switch
|
<Switch
|
||||||
checked={rejectAddressReuse}
|
checked={rejectAddressReuse}
|
||||||
|
|
@ -95,11 +101,17 @@ const Triggers = () => {
|
||||||
</P>
|
</P>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Box>
|
</Box>
|
||||||
<Link color="primary" onClick={() => setWizard(true)}>
|
|
||||||
+ Add new trigger
|
|
||||||
</Link>
|
|
||||||
</Box>
|
</Box>
|
||||||
</TitleSection>
|
</TitleSection>
|
||||||
|
<Box
|
||||||
|
marginBottom={2}
|
||||||
|
className={classes.tableWidth}
|
||||||
|
display="flex"
|
||||||
|
justifyContent="end">
|
||||||
|
<Link color="primary" onClick={() => setWizard(true)}>
|
||||||
|
+ Add new trigger
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
<EditableTable
|
<EditableTable
|
||||||
data={triggers}
|
data={triggers}
|
||||||
name="triggers"
|
name="triggers"
|
||||||
|
|
|
||||||
|
|
@ -9,5 +9,8 @@ export default {
|
||||||
},
|
},
|
||||||
tableRadioLabel: {
|
tableRadioLabel: {
|
||||||
marginRight: 0
|
marginRight: 0
|
||||||
|
},
|
||||||
|
tableWidth: {
|
||||||
|
width: 918
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,9 +10,9 @@ import { Button } from 'src/components/buttons'
|
||||||
import { H5, Info3 } from 'src/components/typography'
|
import { H5, Info3 } from 'src/components/typography'
|
||||||
import { comet } from 'src/styling/variables'
|
import { comet } from 'src/styling/variables'
|
||||||
|
|
||||||
import { txDirection, type, requirements } from './helper'
|
import { type, requirements } from './helper'
|
||||||
|
|
||||||
const LAST_STEP = 3
|
const LAST_STEP = 2
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
stepper: {
|
stepper: {
|
||||||
|
|
@ -43,11 +43,11 @@ const useStyles = makeStyles(styles)
|
||||||
|
|
||||||
const getStep = step => {
|
const getStep = step => {
|
||||||
switch (step) {
|
switch (step) {
|
||||||
|
// case 1:
|
||||||
|
// return txDirection
|
||||||
case 1:
|
case 1:
|
||||||
return txDirection
|
|
||||||
case 2:
|
|
||||||
return type
|
return type
|
||||||
case 3:
|
case 2:
|
||||||
return requirements
|
return requirements
|
||||||
default:
|
default:
|
||||||
return Fragment
|
return Fragment
|
||||||
|
|
@ -56,11 +56,11 @@ const getStep = step => {
|
||||||
|
|
||||||
const getText = (step, config, currency) => {
|
const getText = (step, config, currency) => {
|
||||||
switch (step) {
|
switch (step) {
|
||||||
|
// case 1:
|
||||||
|
// return `In ${getDirectionText(config)} transactions`
|
||||||
case 1:
|
case 1:
|
||||||
return `In ${getDirectionText(config)} transactions`
|
return `If the user ${getTypeText(config, currency)}`
|
||||||
case 2:
|
case 2:
|
||||||
return `if the user ${getTypeText(config, currency)}`
|
|
||||||
case 3:
|
|
||||||
return `the user will be ${getRequirementText(config)}.`
|
return `the user will be ${getRequirementText(config)}.`
|
||||||
default:
|
default:
|
||||||
return ''
|
return ''
|
||||||
|
|
@ -71,18 +71,18 @@ const orUnderline = value => {
|
||||||
return R.isEmpty(value) || R.isNil(value) ? '⎼⎼⎼⎼⎼ ' : value
|
return R.isEmpty(value) || R.isNil(value) ? '⎼⎼⎼⎼⎼ ' : value
|
||||||
}
|
}
|
||||||
|
|
||||||
const getDirectionText = config => {
|
// const getDirectionText = config => {
|
||||||
switch (config.direction) {
|
// switch (config.direction) {
|
||||||
case 'both':
|
// case 'both':
|
||||||
return 'both cash-in and cash-out'
|
// return 'both cash-in and cash-out'
|
||||||
case 'cashIn':
|
// case 'cashIn':
|
||||||
return 'cash-in'
|
// return 'cash-in'
|
||||||
case 'cashOut':
|
// case 'cashOut':
|
||||||
return 'cash-out'
|
// return 'cash-out'
|
||||||
default:
|
// default:
|
||||||
return orUnderline(null)
|
// return orUnderline(null)
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
const getTypeText = (config, currency) => {
|
const getTypeText = (config, currency) => {
|
||||||
switch (config.triggerType) {
|
switch (config.triggerType) {
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,8 @@ import * as Yup from 'yup'
|
||||||
|
|
||||||
import { TextInput, RadioGroup } from 'src/components/inputs/formik'
|
import { TextInput, RadioGroup } from 'src/components/inputs/formik'
|
||||||
import { H4, Label2, Label1, Info2 } from 'src/components/typography'
|
import { H4, Label2, Label1, Info2 } from 'src/components/typography'
|
||||||
import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
|
// import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
|
||||||
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
|
// import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
|
||||||
import { errorColor } from 'src/styling/variables'
|
import { errorColor } from 'src/styling/variables'
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles({
|
||||||
|
|
@ -68,7 +68,7 @@ const useStyles = makeStyles({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const direction = Yup.string().required('Required')
|
// const direction = Yup.string().required('Required')
|
||||||
const triggerType = Yup.string().required('Required')
|
const triggerType = Yup.string().required('Required')
|
||||||
const threshold = Yup.object().shape({
|
const threshold = Yup.object().shape({
|
||||||
threshold: Yup.number(),
|
threshold: Yup.number(),
|
||||||
|
|
@ -82,95 +82,95 @@ const requirement = Yup.object().shape({
|
||||||
const Schema = Yup.object().shape({
|
const Schema = Yup.object().shape({
|
||||||
triggerType,
|
triggerType,
|
||||||
requirement,
|
requirement,
|
||||||
threshold,
|
threshold
|
||||||
direction
|
// direction
|
||||||
})
|
})
|
||||||
|
|
||||||
// Direction
|
// Direction V2 only
|
||||||
const directionSchema = Yup.object().shape({ direction })
|
// const directionSchema = Yup.object().shape({ direction })
|
||||||
|
|
||||||
const directionOptions = [
|
// const directionOptions = [
|
||||||
{
|
// {
|
||||||
display: 'Both',
|
// display: 'Both',
|
||||||
code: 'both'
|
// code: 'both'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
display: 'Only cash-in',
|
// display: 'Only cash-in',
|
||||||
code: 'cashIn'
|
// code: 'cashIn'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
display: 'Only cash-out',
|
// display: 'Only cash-out',
|
||||||
code: 'cashOut'
|
// code: 'cashOut'
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
|
|
||||||
const directionOptions2 = [
|
// const directionOptions2 = [
|
||||||
{
|
// {
|
||||||
display: (
|
// display: (
|
||||||
<>
|
// <>
|
||||||
<TxInIcon /> in
|
// <TxInIcon /> in
|
||||||
</>
|
// </>
|
||||||
),
|
// ),
|
||||||
code: 'cashIn'
|
// code: 'cashIn'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
display: (
|
// display: (
|
||||||
<>
|
// <>
|
||||||
<TxOutIcon /> out
|
// <TxOutIcon /> out
|
||||||
</>
|
// </>
|
||||||
),
|
// ),
|
||||||
code: 'cashOut'
|
// code: 'cashOut'
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
display: (
|
// display: (
|
||||||
<>
|
// <>
|
||||||
<Box display="flex">
|
// <Box display="flex">
|
||||||
<Box mr={0.25}>
|
// <Box mr={0.25}>
|
||||||
<TxOutIcon />
|
// <TxOutIcon />
|
||||||
</Box>
|
// </Box>
|
||||||
<Box>
|
// <Box>
|
||||||
<TxInIcon />
|
// <TxInIcon />
|
||||||
</Box>
|
// </Box>
|
||||||
</Box>
|
// </Box>
|
||||||
</>
|
// </>
|
||||||
),
|
// ),
|
||||||
code: 'both'
|
// code: 'both'
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
|
|
||||||
const Direction = () => {
|
// const Direction = () => {
|
||||||
const classes = useStyles()
|
// const classes = useStyles()
|
||||||
const { errors } = useFormikContext()
|
// const { errors } = useFormikContext()
|
||||||
|
|
||||||
const titleClass = {
|
// const titleClass = {
|
||||||
[classes.error]: errors.direction
|
// [classes.error]: errors.direction
|
||||||
}
|
// }
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<>
|
// <>
|
||||||
<Box display="flex" alignItems="center">
|
// <Box display="flex" alignItems="center">
|
||||||
<H4 className={classnames(titleClass)}>
|
// <H4 className={classnames(titleClass)}>
|
||||||
In which type of transactions will it trigger?
|
// In which type of transactions will it trigger?
|
||||||
</H4>
|
// </H4>
|
||||||
</Box>
|
// </Box>
|
||||||
<Field
|
// <Field
|
||||||
component={RadioGroup}
|
// component={RadioGroup}
|
||||||
name="direction"
|
// name="direction"
|
||||||
options={directionOptions}
|
// options={directionOptions}
|
||||||
labelClassName={classes.radioLabel}
|
// labelClassName={classes.radioLabel}
|
||||||
radioClassName={classes.radio}
|
// radioClassName={classes.radio}
|
||||||
className={classes.radioGroup}
|
// className={classes.radioGroup}
|
||||||
/>
|
// />
|
||||||
</>
|
// </>
|
||||||
)
|
// )
|
||||||
}
|
// }
|
||||||
|
|
||||||
const txDirection = {
|
// const txDirection = {
|
||||||
schema: directionSchema,
|
// schema: directionSchema,
|
||||||
options: directionOptions,
|
// options: directionOptions,
|
||||||
Component: Direction,
|
// Component: Direction,
|
||||||
initialValues: { direction: '' }
|
// initialValues: { direction: '' }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// TYPE
|
// TYPE
|
||||||
const typeSchema = Yup.object().shape({
|
const typeSchema = Yup.object().shape({
|
||||||
|
|
@ -317,20 +317,20 @@ const getView = (data, code, compare) => it => {
|
||||||
return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data)
|
return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const DirectionDisplay = ({ code }) => {
|
// const DirectionDisplay = ({ code }) => {
|
||||||
const classes = useStyles()
|
// const classes = useStyles()
|
||||||
const displayName = getView(directionOptions, 'display')(code)
|
// const displayName = getView(directionOptions, 'display')(code)
|
||||||
const showCashIn = code === 'cashIn' || code === 'both'
|
// const showCashIn = code === 'cashIn' || code === 'both'
|
||||||
const showCashOut = code === 'cashOut' || code === 'both'
|
// const showCashOut = code === 'cashOut' || code === 'both'
|
||||||
|
|
||||||
return (
|
// return (
|
||||||
<div>
|
// <div>
|
||||||
{showCashOut && <TxOutIcon className={classes.directionIcon} />}
|
// {showCashOut && <TxOutIcon className={classes.directionIcon} />}
|
||||||
{showCashIn && <TxInIcon className={classes.directionIcon} />}
|
// {showCashIn && <TxInIcon className={classes.directionIcon} />}
|
||||||
<span className={classes.directionName}>{displayName}</span>
|
// <span className={classes.directionName}>{displayName}</span>
|
||||||
</div>
|
// </div>
|
||||||
)
|
// )
|
||||||
}
|
// }
|
||||||
|
|
||||||
const RequirementInput = () => {
|
const RequirementInput = () => {
|
||||||
const { values } = useFormikContext()
|
const { values } = useFormikContext()
|
||||||
|
|
@ -505,19 +505,19 @@ const getElements = (currency, classes) => [
|
||||||
textAlign: 'right',
|
textAlign: 'right',
|
||||||
input: () => <ThresholdInput currency={currency} />,
|
input: () => <ThresholdInput currency={currency} />,
|
||||||
view: (it, config) => <ThresholdView config={config} currency={currency} />
|
view: (it, config) => <ThresholdView config={config} currency={currency} />
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'direction',
|
|
||||||
size: 'sm',
|
|
||||||
width: 282,
|
|
||||||
view: it => <DirectionDisplay code={it} />,
|
|
||||||
input: RadioGroup,
|
|
||||||
inputProps: {
|
|
||||||
labelClassName: classes.tableRadioLabel,
|
|
||||||
className: classes.tableRadioGroup,
|
|
||||||
options: directionOptions2
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// name: 'direction',
|
||||||
|
// size: 'sm',
|
||||||
|
// width: 282,
|
||||||
|
// view: it => <DirectionDisplay code={it} />,
|
||||||
|
// input: RadioGroup,
|
||||||
|
// inputProps: {
|
||||||
|
// labelClassName: classes.tableRadioLabel,
|
||||||
|
// className: classes.tableRadioGroup,
|
||||||
|
// options: directionOptions2
|
||||||
|
// }
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
|
|
||||||
const triggerOrder = R.map(R.prop('code'))(typeOptions)
|
const triggerOrder = R.map(R.prop('code'))(typeOptions)
|
||||||
|
|
@ -555,7 +555,7 @@ const toServer = triggers =>
|
||||||
export {
|
export {
|
||||||
Schema,
|
Schema,
|
||||||
getElements,
|
getElements,
|
||||||
txDirection,
|
// txDirection,
|
||||||
type,
|
type,
|
||||||
requirements,
|
requirements,
|
||||||
sortBy,
|
sortBy,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue