(Feature) Modals types improvements (#2027)
* Fix types, styles and default exports Co-authored-by: Fernando <fernando.greco@gmail.com>
This commit is contained in:
parent
188175d690
commit
f1547c1188
|
@ -2,6 +2,4 @@ import { createAction } from 'redux-actions'
|
|||
|
||||
export const ADD_SAFE_OWNER = 'ADD_SAFE_OWNER'
|
||||
|
||||
const addSafeOwner = createAction(ADD_SAFE_OWNER)
|
||||
|
||||
export default addSafeOwner
|
||||
export const addSafeOwner = createAction(ADD_SAFE_OWNER)
|
||||
|
|
|
@ -8,8 +8,8 @@ import { getLocalSafe, getSafeName } from 'src/logic/safe/utils'
|
|||
import { enabledFeatures, safeNeedsUpdate } from 'src/logic/safe/utils/safeVersion'
|
||||
import { sameAddress } from 'src/logic/wallets/ethAddresses'
|
||||
import { getBalanceInEtherOf } from 'src/logic/wallets/getWeb3'
|
||||
import addSafeOwner from 'src/logic/safe/store/actions/addSafeOwner'
|
||||
import removeSafeOwner from 'src/logic/safe/store/actions/removeSafeOwner'
|
||||
import { addSafeOwner } from 'src/logic/safe/store/actions/addSafeOwner'
|
||||
import { removeSafeOwner } from 'src/logic/safe/store/actions/removeSafeOwner'
|
||||
import updateSafe from 'src/logic/safe/store/actions/updateSafe'
|
||||
import { makeOwner } from 'src/logic/safe/store/models/owner'
|
||||
import { checksumAddress } from 'src/utils/checksumAddress'
|
||||
|
|
|
@ -2,6 +2,4 @@ import { createAction } from 'redux-actions'
|
|||
|
||||
export const REMOVE_SAFE_OWNER = 'REMOVE_SAFE_OWNER'
|
||||
|
||||
const removeSafeOwner = createAction(REMOVE_SAFE_OWNER)
|
||||
|
||||
export default removeSafeOwner
|
||||
export const removeSafeOwner = createAction(REMOVE_SAFE_OWNER)
|
||||
|
|
|
@ -2,6 +2,4 @@ import { createAction } from 'redux-actions'
|
|||
|
||||
export const REPLACE_SAFE_OWNER = 'REPLACE_SAFE_OWNER'
|
||||
|
||||
const replaceSafeOwner = createAction(REPLACE_SAFE_OWNER)
|
||||
|
||||
export default replaceSafeOwner
|
||||
export const replaceSafeOwner = createAction(REPLACE_SAFE_OWNER)
|
||||
|
|
|
@ -33,7 +33,7 @@ import {
|
|||
generateColumns,
|
||||
} from 'src/routes/safe/components/AddressBook/columns'
|
||||
import SendModal from 'src/routes/safe/components/Balances/SendModal'
|
||||
import OwnerAddressTableCell from 'src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell'
|
||||
import { OwnerAddressTableCell } from 'src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell'
|
||||
import RenameOwnerIcon from 'src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg'
|
||||
import RemoveOwnerIcon from 'src/routes/safe/components/Settings/assets/icons/bin.svg'
|
||||
import { addressBookQueryParamsSelector, safesListSelector } from 'src/logic/safe/store/selectors'
|
||||
|
|
|
@ -6,7 +6,7 @@ import Modal from 'src/components/Modal'
|
|||
import { addOrUpdateAddressBookEntry } from 'src/logic/addressBook/store/actions/addOrUpdateAddressBookEntry'
|
||||
import { getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
|
||||
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
|
||||
import addSafeOwner from 'src/logic/safe/store/actions/addSafeOwner'
|
||||
import { addSafeOwner } from 'src/logic/safe/store/actions/addSafeOwner'
|
||||
import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
|
||||
import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
|
||||
import { checksumAddress } from 'src/utils/checksumAddress'
|
||||
|
@ -16,7 +16,7 @@ import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionPara
|
|||
|
||||
import { OwnerForm } from './screens/OwnerForm'
|
||||
import { ReviewAddOwner } from './screens/Review'
|
||||
import ThresholdForm from './screens/ThresholdForm'
|
||||
import { ThresholdForm } from './screens/ThresholdForm'
|
||||
|
||||
const styles = createStyles({
|
||||
biggerModalWindow: {
|
||||
|
@ -65,7 +65,7 @@ type Props = {
|
|||
onClose: () => void
|
||||
}
|
||||
|
||||
const AddOwner = ({ isOpen, onClose }: Props): React.ReactElement => {
|
||||
export const AddOwnerModal = ({ isOpen, onClose }: Props): React.ReactElement => {
|
||||
const classes = useStyles()
|
||||
const [activeScreen, setActiveScreen] = useState('selectOwner')
|
||||
const [values, setValues] = useState<OwnerValues>({ ownerName: '', ownerAddress: '', threshold: '' })
|
||||
|
@ -138,5 +138,3 @@ const AddOwner = ({ isOpen, onClose }: Props): React.ReactElement => {
|
|||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddOwner
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import IconButton from '@material-ui/core/IconButton'
|
||||
import MenuItem from '@material-ui/core/MenuItem'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import Close from '@material-ui/icons/Close'
|
||||
import React from 'react'
|
||||
import React, { ReactElement } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
import { styles } from './style'
|
||||
|
@ -21,10 +21,24 @@ import { safeOwnersSelector, safeThresholdSelector } from 'src/logic/safe/store/
|
|||
|
||||
export const ADD_OWNER_THRESHOLD_NEXT_BTN_TEST_ID = 'add-owner-threshold-next-btn'
|
||||
|
||||
const ThresholdForm = ({ classes, onClickBack, onClose, onSubmit }) => {
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
type SubmitProps = {
|
||||
threshold: number
|
||||
}
|
||||
|
||||
type Props = {
|
||||
onClickBack: () => void
|
||||
onClose: () => void
|
||||
onSubmit: (values: SubmitProps) => void
|
||||
}
|
||||
|
||||
export const ThresholdForm = ({ onClickBack, onClose, onSubmit }: Props): ReactElement => {
|
||||
const classes = useStyles()
|
||||
const threshold = useSelector(safeThresholdSelector) as number
|
||||
const owners = useSelector(safeOwnersSelector)
|
||||
const handleSubmit = (values) => {
|
||||
|
||||
const handleSubmit = (values: SubmitProps) => {
|
||||
onSubmit(values)
|
||||
}
|
||||
|
||||
|
@ -110,5 +124,3 @@ const ThresholdForm = ({ classes, onClickBack, onClose, onSubmit }) => {
|
|||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default withStyles(styles as any)(ThresholdForm)
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { lg, md, secondaryText, sm } from 'src/theme/variables'
|
||||
import { createStyles } from '@material-ui/core'
|
||||
|
||||
export const styles = () => ({
|
||||
export const styles = createStyles({
|
||||
heading: {
|
||||
padding: `${sm} ${lg}`,
|
||||
justifyContent: 'flex-start',
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ReactElement, useEffect, useState } from 'react'
|
||||
|
||||
import Identicon from 'src/components/Identicon'
|
||||
import Block from 'src/components/layout/Block'
|
||||
|
@ -16,7 +16,7 @@ type OwnerAddressTableCellProps = {
|
|||
sendModalOpenHandler?: () => void
|
||||
}
|
||||
|
||||
const OwnerAddressTableCell = (props: OwnerAddressTableCellProps): React.ReactElement => {
|
||||
export const OwnerAddressTableCell = (props: OwnerAddressTableCellProps): ReactElement => {
|
||||
const { address, knownAddress, showLinks, userName, sendModalOpenHandler } = props
|
||||
const [cut, setCut] = useState(0)
|
||||
const { width } = useWindowDimensions()
|
||||
|
@ -50,5 +50,3 @@ const OwnerAddressTableCell = (props: OwnerAddressTableCellProps): React.ReactEl
|
|||
</Block>
|
||||
)
|
||||
}
|
||||
|
||||
export default OwnerAddressTableCell
|
||||
|
|
|
@ -4,13 +4,13 @@ import { useDispatch, useSelector } from 'react-redux'
|
|||
|
||||
import CheckOwner from './screens/CheckOwner'
|
||||
import { ReviewRemoveOwnerModal } from './screens/Review'
|
||||
import ThresholdForm from './screens/ThresholdForm'
|
||||
import { ThresholdForm } from './screens/ThresholdForm'
|
||||
|
||||
import Modal from 'src/components/Modal'
|
||||
import { SENTINEL_ADDRESS, getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
|
||||
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
|
||||
import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
|
||||
import removeSafeOwner from 'src/logic/safe/store/actions/removeSafeOwner'
|
||||
import { removeSafeOwner } from 'src/logic/safe/store/actions/removeSafeOwner'
|
||||
import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
|
||||
import { Dispatch } from 'src/logic/safe/store/actions/types.d'
|
||||
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
|
||||
|
|
|
@ -30,7 +30,7 @@ type Props = {
|
|||
onSubmit: (txParameters: TxParameters) => void
|
||||
}
|
||||
|
||||
const ThresholdForm = ({ onClickBack, onClose, onSubmit }: Props): ReactElement => {
|
||||
export const ThresholdForm = ({ onClickBack, onClose, onSubmit }: Props): ReactElement => {
|
||||
const classes = useStyles()
|
||||
const owners = useSelector(safeOwnersSelector)
|
||||
const threshold = useSelector(safeThresholdSelector) as number
|
||||
|
@ -120,5 +120,3 @@ const ThresholdForm = ({ onClickBack, onClose, onSubmit }: Props): ReactElement
|
|||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThresholdForm
|
||||
|
|
|
@ -7,15 +7,15 @@ import { addOrUpdateAddressBookEntry } from 'src/logic/addressBook/store/actions
|
|||
import { SENTINEL_ADDRESS, getGnosisSafeInstanceAt } from 'src/logic/contracts/safeContracts'
|
||||
import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
|
||||
import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
|
||||
import replaceSafeOwner from 'src/logic/safe/store/actions/replaceSafeOwner'
|
||||
import { replaceSafeOwner } from 'src/logic/safe/store/actions/replaceSafeOwner'
|
||||
import { safeParamAddressFromStateSelector, safeThresholdSelector } from 'src/logic/safe/store/selectors'
|
||||
import { checksumAddress } from 'src/utils/checksumAddress'
|
||||
import { makeAddressBookEntry } from 'src/logic/addressBook/model/addressBook'
|
||||
import { sameAddress } from 'src/logic/wallets/ethAddresses'
|
||||
import { Dispatch } from 'src/logic/safe/store/actions/types.d'
|
||||
|
||||
import OwnerForm from './screens/OwnerForm'
|
||||
import { ReviewReplaceOwnerModal } from './screens/Review'
|
||||
import { OwnerForm } from 'src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm'
|
||||
import { ReviewReplaceOwnerModal } from 'src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review'
|
||||
import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
|
||||
|
||||
const styles = createStyles({
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import IconButton from '@material-ui/core/IconButton'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Close from '@material-ui/icons/Close'
|
||||
import classNames from 'classnames/bind'
|
||||
import React from 'react'
|
||||
import React, { ReactElement } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
|
||||
import CopyBtn from 'src/components/CopyBtn'
|
||||
|
@ -30,6 +29,7 @@ import { safeOwnersAddressesListSelector, safeParamAddressFromStateSelector } fr
|
|||
import { styles } from './style'
|
||||
import { getExplorerInfo } from 'src/config'
|
||||
import { ExplorerButton } from '@gnosis.pm/safe-react-components'
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
|
||||
export const REPLACE_OWNER_NAME_INPUT_TEST_ID = 'replace-owner-name-input'
|
||||
export const REPLACE_OWNER_ADDRESS_INPUT_TEST_ID = 'replace-owner-address-testid'
|
||||
|
@ -41,8 +41,24 @@ const formMutators = {
|
|||
},
|
||||
}
|
||||
|
||||
const OwnerForm = ({ classes, onClose, onSubmit, ownerAddress, ownerName }) => {
|
||||
const handleSubmit = (values) => {
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
type NewOwnerProps = {
|
||||
ownerAddress: string
|
||||
ownerName: string
|
||||
}
|
||||
|
||||
type OwnerFormProps = {
|
||||
onClose: () => void
|
||||
onSubmit: (values: NewOwnerProps) => void
|
||||
ownerAddress: string
|
||||
ownerName: string
|
||||
}
|
||||
|
||||
export const OwnerForm = ({ onClose, onSubmit, ownerAddress, ownerName }: OwnerFormProps): ReactElement => {
|
||||
const classes = useStyles()
|
||||
|
||||
const handleSubmit = (values: NewOwnerProps) => {
|
||||
onSubmit(values)
|
||||
}
|
||||
const owners = useSelector(safeOwnersAddressesListSelector)
|
||||
|
@ -114,7 +130,6 @@ const OwnerForm = ({ classes, onClose, onSubmit, ownerAddress, ownerName }) => {
|
|||
<Row margin="md">
|
||||
<Col xs={8}>
|
||||
<Field
|
||||
className={classes.addressInput}
|
||||
component={TextField}
|
||||
name="ownerName"
|
||||
placeholder="Owner name*"
|
||||
|
@ -128,7 +143,6 @@ const OwnerForm = ({ classes, onClose, onSubmit, ownerAddress, ownerName }) => {
|
|||
<Row margin="md">
|
||||
<Col xs={8}>
|
||||
<AddressInput
|
||||
className={classes.addressInput}
|
||||
fieldMutator={mutators.setOwnerAddress}
|
||||
name="ownerAddress"
|
||||
placeholder="Owner address*"
|
||||
|
@ -144,11 +158,10 @@ const OwnerForm = ({ classes, onClose, onSubmit, ownerAddress, ownerName }) => {
|
|||
</Block>
|
||||
<Hairline />
|
||||
<Row align="center" className={classes.buttonRow}>
|
||||
<Button className={classes.button} minWidth={140} onClick={onClose}>
|
||||
<Button minWidth={140} onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className={classes.button}
|
||||
color="primary"
|
||||
minWidth={140}
|
||||
testId={REPLACE_OWNER_NEXT_BTN_TEST_ID}
|
||||
|
@ -165,5 +178,3 @@ const OwnerForm = ({ classes, onClose, onSubmit, ownerAddress, ownerName }) => {
|
|||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default withStyles(styles as any)(OwnerForm)
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { lg, md, secondaryText, sm } from 'src/theme/variables'
|
||||
import { createStyles } from '@material-ui/core'
|
||||
|
||||
export const styles = () => ({
|
||||
export const styles = createStyles({
|
||||
heading: {
|
||||
padding: `${sm} ${lg}`,
|
||||
justifyContent: 'flex-start',
|
||||
|
|
|
@ -8,9 +8,9 @@ import { List } from 'immutable'
|
|||
|
||||
import RemoveOwnerIcon from '../assets/icons/bin.svg'
|
||||
|
||||
import AddOwnerModal from './AddOwnerModal'
|
||||
import { AddOwnerModal } from './AddOwnerModal'
|
||||
import { EditOwnerModal } from './EditOwnerModal'
|
||||
import OwnerAddressTableCell from './OwnerAddressTableCell'
|
||||
import { OwnerAddressTableCell } from './OwnerAddressTableCell'
|
||||
import { RemoveOwnerModal } from './RemoveOwnerModal'
|
||||
import { ReplaceOwnerModal } from './ReplaceOwnerModal'
|
||||
import RenameOwnerIcon from './assets/icons/rename-owner.svg'
|
||||
|
|
Loading…
Reference in New Issue