(Feature) Modals types improvements (#2027)

* Fix types, styles and default exports

Co-authored-by: Fernando <fernando.greco@gmail.com>
This commit is contained in:
Agustin Pane 2021-03-16 11:57:26 -03:00 committed by GitHub
parent 188175d690
commit f1547c1188
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 62 additions and 49 deletions

View File

@ -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)

View File

@ -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'

View File

@ -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)

View File

@ -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)

View File

@ -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'

View File

@ -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

View File

@ -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)

View File

@ -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',

View File

@ -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

View File

@ -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'

View File

@ -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

View File

@ -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({

View File

@ -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)

View File

@ -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',

View File

@ -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'