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