partial: blacklist css migration
This commit is contained in:
Rafael Taranto
parent
6cca41a5c2
commit
b07a3d9ad6
5 changed files with 45 additions and 144 deletions
|
|
@ -1,9 +1,8 @@
|
|||
import { useQuery, useMutation, gql } from '@apollo/client'
|
||||
import Dialog from '@mui/material/Dialog'
|
||||
import DialogTitle from '@mui/material/DialogTitle'
|
||||
import DialogContent from '@mui/material/DialogContent'
|
||||
import DialogActions from '@mui/material/DialogActions'
|
||||
import Switch from '@mui/material/Switch'
|
||||
import { makeStyles } from '@mui/styles'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
import { HelpTooltip } from 'src/components/Tooltip'
|
||||
|
|
@ -21,13 +20,10 @@ import {
|
|||
} from 'src/components/buttons'
|
||||
import { fromNamespace, toNamespace } from 'src/utils/config'
|
||||
|
||||
import styles from './Blacklist.styles'
|
||||
import BlackListAdvanced from './BlacklistAdvanced'
|
||||
import BlackListModal from './BlacklistModal'
|
||||
import BlacklistTable from './BlacklistTable'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const DELETE_ROW = gql`
|
||||
mutation DeleteBlacklistRow($address: String!) {
|
||||
deleteBlacklistRow(address: $address) {
|
||||
|
|
@ -88,8 +84,6 @@ const EDIT_BLACKLIST_MESSAGE = gql`
|
|||
`
|
||||
|
||||
const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
|
|
@ -103,28 +97,32 @@ const PaperWalletDialog = ({ onConfirmed, onDissmised, open, props }) => {
|
|||
}
|
||||
}}
|
||||
{...props}>
|
||||
<div className={classes.closeButton}>
|
||||
<IconButton size={16} aria-label="close" onClick={onDissmised}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<div className="p-2">
|
||||
<DialogTitle className="flex flex-col">
|
||||
<IconButton
|
||||
size={30}
|
||||
aria-label="close"
|
||||
onClick={onDissmised}
|
||||
className="-mt-2 -mr-4 ml-auto">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<H2 noMargin>{'Are you sure you want to enable this?'}</H2>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Info3>{`This mode means that only paper wallets will be printed for users, and they won't be permitted to scan an address from their own wallet.`}</Info3>
|
||||
<Info3>{`This mode is only useful for countries like Switzerland which mandates such a feature.\n`}</Info3>
|
||||
<Info2>{`Don't enable this if you want users to be able to scan an address of their choosing.`}</Info2>
|
||||
<div className="flex justify-end mt-8">
|
||||
<Button
|
||||
backgroundColor="grey"
|
||||
className="mr-2 p-0"
|
||||
onClick={() => onDissmised()}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => onConfirmed(true)}>Confirm</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</div>
|
||||
<H2 className={classes.dialogTitle}>
|
||||
{'Are you sure you want to enable this?'}
|
||||
</H2>
|
||||
<DialogContent className={classes.dialogContent}>
|
||||
<Info3>{`This mode means that only paper wallets will be printed for users, and they won't be permitted to scan an address from their own wallet.`}</Info3>
|
||||
<Info3>{`This mode is only useful for countries like Switzerland which mandates such a feature.\n`}</Info3>
|
||||
<Info2>{`Don't enable this if you want users to be able to scan an address of their choosing.`}</Info2>
|
||||
</DialogContent>
|
||||
<DialogActions className={classes.dialogActions}>
|
||||
<Button
|
||||
backgroundColor="grey"
|
||||
className={classes.cancelButton}
|
||||
onClick={() => onDissmised()}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => onConfirmed(true)}>Confirm</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
|
@ -162,8 +160,6 @@ const Blacklist = () => {
|
|||
refetchQueries: () => ['getBlacklistData']
|
||||
})
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const blacklistData = R.path(['blacklist'])(blacklistResponse) ?? []
|
||||
|
||||
const complianceConfig =
|
||||
|
|
@ -289,7 +285,7 @@ const Blacklist = () => {
|
|||
)}
|
||||
</TitleSection>
|
||||
{!advancedSettings && (
|
||||
<div className={classes.content}>
|
||||
<div className="flex flex-col flex-1">
|
||||
<BlacklistTable
|
||||
data={blacklistData}
|
||||
handleDeleteEntry={handleDeleteEntry}
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
import { spacer, white } from 'src/styling/variables'
|
||||
const styles = {
|
||||
grid: {
|
||||
flex: 1,
|
||||
height: '100%'
|
||||
},
|
||||
content: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 1
|
||||
},
|
||||
advancedForm: {
|
||||
'& > *': {
|
||||
marginTop: 20
|
||||
},
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%'
|
||||
},
|
||||
footer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
margin: [['auto', 0, spacer * 3, 0]]
|
||||
},
|
||||
submit: {
|
||||
margin: [['auto', 0, 0, 'auto']]
|
||||
},
|
||||
modalTitle: {
|
||||
margin: [['auto', 0, 8.5, 'auto']]
|
||||
},
|
||||
subtitle: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row'
|
||||
},
|
||||
white: {
|
||||
color: white
|
||||
},
|
||||
deleteButton: {
|
||||
paddingLeft: 13
|
||||
},
|
||||
addressRow: {
|
||||
marginLeft: 8
|
||||
},
|
||||
error: {
|
||||
marginTop: 20
|
||||
},
|
||||
closeButton: {
|
||||
display: 'flex',
|
||||
padding: [[spacer * 2, spacer * 2, 0, spacer * 2]],
|
||||
paddingRight: spacer * 1.5,
|
||||
justifyContent: 'end'
|
||||
},
|
||||
dialogTitle: {
|
||||
margin: [[0, spacer * 2, spacer, spacer * 4 + spacer]]
|
||||
},
|
||||
dialogContent: {
|
||||
width: 615,
|
||||
marginLeft: 16
|
||||
},
|
||||
dialogActions: {
|
||||
padding: spacer * 4,
|
||||
paddingTop: spacer * 2
|
||||
},
|
||||
cancelButton: {
|
||||
marginRight: 8,
|
||||
padding: 0
|
||||
},
|
||||
resetToDefault: {
|
||||
width: 145
|
||||
}
|
||||
}
|
||||
|
||||
export default styles
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import { Form, Formik, Field } from 'formik'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
|
|
@ -15,10 +14,6 @@ import * as Yup from 'yup'
|
|||
import { ActionButton, IconButton, Button } from 'src/components/buttons'
|
||||
import { TextInput } from 'src/components/inputs/formik'
|
||||
|
||||
import styles from './Blacklist.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const DEFAULT_MESSAGE = `This address may be associated with a deceptive offer or a prohibited group. Please make sure you're using an address from your own wallet.`
|
||||
|
||||
const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
|
||||
|
|
@ -35,7 +30,6 @@ const BlacklistAdvanced = ({
|
|||
onClose,
|
||||
mutationError
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
const [selectedMessage, setSelectedMessage] = useState(null)
|
||||
|
||||
const elements = [
|
||||
|
|
@ -63,7 +57,7 @@ const BlacklistAdvanced = ({
|
|||
size: 'sm',
|
||||
view: it => (
|
||||
<IconButton
|
||||
className={classes.deleteButton}
|
||||
className="pl-3"
|
||||
onClick={() => setSelectedMessage(it)}
|
||||
size="large">
|
||||
<EditIcon />
|
||||
|
|
@ -78,7 +72,7 @@ const BlacklistAdvanced = ({
|
|||
size: 'sm',
|
||||
view: it => (
|
||||
<IconButton
|
||||
className={classes.deleteButton}
|
||||
className="pl-3"
|
||||
disabled={
|
||||
!R.isNil(R.path(['allowToggle'], it)) &&
|
||||
!R.path(['allowToggle'], it)
|
||||
|
|
@ -138,12 +132,12 @@ const BlacklistAdvanced = ({
|
|||
handleSubmit({ id: selectedMessage.id, ...values })
|
||||
}>
|
||||
{({ errors, touched, setFieldValue }) => (
|
||||
<Form className={classes.advancedForm}>
|
||||
<Form className="flex flex-col h-full gap-5 py-5">
|
||||
<ActionButton
|
||||
color="primary"
|
||||
Icon={DefaultIcon}
|
||||
InverseIcon={DefaultIconReverse}
|
||||
className={classes.resetToDefault}
|
||||
className="w-36"
|
||||
type="button"
|
||||
onClick={() => setFieldValue('content', DEFAULT_MESSAGE)}>
|
||||
Reset to default
|
||||
|
|
@ -156,15 +150,13 @@ const BlacklistAdvanced = ({
|
|||
rows={6}
|
||||
component={TextInput}
|
||||
/>
|
||||
<div className={classes.footer}>
|
||||
<div className="flex flex-row ml-auto mt-auto">
|
||||
{getErrorMsg(errors, touched, mutationError) && (
|
||||
<ErrorMessage>
|
||||
{getErrorMsg(errors, touched, mutationError)}
|
||||
</ErrorMessage>
|
||||
)}
|
||||
<Button type="submit" className={classes.submit}>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button type="submit">Confirm</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import { Formik, Form, Field } from 'formik'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
|
@ -10,11 +9,7 @@ import * as Yup from 'yup'
|
|||
import { Link } from 'src/components/buttons'
|
||||
import { TextInput } from 'src/components/inputs/formik'
|
||||
|
||||
import styles from './Blacklist.styles'
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
|
||||
const classes = useStyles()
|
||||
const handleAddToBlacklist = address => {
|
||||
addToBlacklist(address)
|
||||
}
|
||||
|
|
@ -40,8 +35,8 @@ const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
|
|||
onSubmit={({ address }) => {
|
||||
handleAddToBlacklist(address.trim())
|
||||
}}>
|
||||
<Form id="address-form">
|
||||
<H3 className={classes.modalTitle}>Blacklist new address</H3>
|
||||
<Form id="address-form" className="flex flex-col">
|
||||
<H3 className="mt-auto mb-2">Blacklist new address</H3>
|
||||
<Field
|
||||
name="address"
|
||||
fullWidth
|
||||
|
|
@ -50,16 +45,16 @@ const BlackListModal = ({ onClose, addToBlacklist, errorMsg }) => {
|
|||
placeholder={`ex: ${placeholderAddress}`}
|
||||
component={TextInput}
|
||||
/>
|
||||
<div className="flex flex-row mt-auto">
|
||||
{!R.isNil(errorMsg) && <ErrorMessage>{errorMsg}</ErrorMessage>}
|
||||
<div className="flex ml-auto mt-12">
|
||||
<Link type="submit" form="address-form">
|
||||
Blacklist address
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</Formik>
|
||||
<div className={classes.footer}>
|
||||
{!R.isNil(errorMsg) && <ErrorMessage>{errorMsg}</ErrorMessage>}
|
||||
<div className="flex ml-auto">
|
||||
<Link type="submit" form="address-form">
|
||||
Blacklist address
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from '@mui/styles'
|
||||
import * as R from 'ramda'
|
||||
import React, { useState } from 'react'
|
||||
import { DeleteDialog } from 'src/components/DeleteDialog'
|
||||
|
|
@ -8,10 +7,6 @@ import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
|
|||
|
||||
import { IconButton } from 'src/components/buttons'
|
||||
|
||||
import styles from './Blacklist.styles'
|
||||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const BlacklistTable = ({
|
||||
data,
|
||||
handleDeleteEntry,
|
||||
|
|
@ -20,8 +15,6 @@ const BlacklistTable = ({
|
|||
deleteDialog,
|
||||
setDeleteDialog
|
||||
}) => {
|
||||
const classes = useStyles()
|
||||
|
||||
const [toBeDeleted, setToBeDeleted] = useState()
|
||||
|
||||
const elements = [
|
||||
|
|
@ -32,7 +25,7 @@ const BlacklistTable = ({
|
|||
textAlign: 'left',
|
||||
size: 'sm',
|
||||
view: it => (
|
||||
<div className={classes.addressRow}>
|
||||
<div className="ml-2">
|
||||
<CopyToClipboard>{R.path(['address'], it)}</CopyToClipboard>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -45,7 +38,7 @@ const BlacklistTable = ({
|
|||
size: 'sm',
|
||||
view: it => (
|
||||
<IconButton
|
||||
className={classes.deleteButton}
|
||||
className="pl-3"
|
||||
onClick={() => {
|
||||
setDeleteDialog(true)
|
||||
setToBeDeleted(it)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue