From 9b709f8e29989334b66d7bc5993c234e8aa65e0b Mon Sep 17 00:00:00 2001 From: mmv Date: Wed, 10 Jul 2019 17:59:22 +0400 Subject: [PATCH] pull from manage-owners --- src/components/Footer/index.scss | 1 + src/components/Table/index.jsx | 14 +- src/components/forms/validator.js | 20 +- src/components/layout/Img/index.jsx | 7 +- src/components/layout/Row/index.jsx | 5 +- src/components/layout/Table/index.jsx | 2 +- src/logic/safe/utils/safeStorage.js | 2 +- src/logic/tokens/store/actions/fetchTokens.js | 2 +- src/logic/tokens/store/actions/removeToken.js | 2 +- src/logic/wallets/tokens.js | 2 +- .../components/ReviewInformation/index.jsx | 4 +- .../open/components/SafeOwnersForm/index.jsx | 7 +- .../AddOwner/AddOwnerForm/index.jsx | 70 ----- .../safe/components/AddOwner/Review/index.jsx | 48 ---- .../safe/components/AddOwner/actions.js | 12 - src/routes/safe/components/AddOwner/index.jsx | 105 ------- .../safe/components/AddOwner/selector.js | 11 - .../screens/AddCustomToken/validators.js | 14 +- src/routes/safe/components/Layout.jsx | 2 + .../RemoveOwner/RemoveOwnerForm/index.jsx | 50 ---- .../components/RemoveOwner/Review/index.jsx | 47 ---- .../safe/components/RemoveOwner/actions.js | 12 - .../safe/components/RemoveOwner/index.jsx | 121 -------- .../safe/components/RemoveOwner/selector.js | 21 -- src/routes/safe/components/Safe/Address.jsx | 21 -- .../safe/components/Safe/BalanceInfo.jsx | 80 ------ .../safe/components/Safe/Confirmations.jsx | 36 --- .../safe/components/Safe/MultisigTx.jsx | 35 --- src/routes/safe/components/Safe/Owners.jsx | 91 ------ .../components/Safe/assets/gnosis_safe.svg | 17 -- src/routes/safe/components/Safe/index.jsx | 135 --------- .../Settings/ChangeSafeName/index.jsx | 7 +- .../Settings/ChangeSafeName/style.js | 6 +- .../ManageOwners/AddOwnerModal/index.jsx | 171 ++++++++++++ .../AddOwnerModal/screens/OwnerForm/index.jsx | 116 ++++++++ .../AddOwnerModal/screens/OwnerForm/style.js | 32 +++ .../AddOwnerModal/screens/Review/index.jsx | 176 ++++++++++++ .../AddOwnerModal/screens/Review/style.js | 78 ++++++ .../screens/ThresholdForm/index.jsx | 125 +++++++++ .../screens/ThresholdForm/style.js | 45 +++ .../ManageOwners/EditOwnerModal/index.jsx | 135 +++++++++ .../ManageOwners/EditOwnerModal/style.js | 39 +++ .../OwnerAddressTableCell/index.jsx | 21 ++ .../ManageOwners/RemoveOwnerModal/index.jsx | 188 +++++++++++++ .../screens/CheckOwner/index.jsx | 107 ++++++++ .../screens/CheckOwner/style.js | 45 +++ .../RemoveOwnerModal/screens/Review/index.jsx | 194 +++++++++++++ .../RemoveOwnerModal/screens/Review/style.js | 78 ++++++ .../screens/ThresholdForm/index.jsx | 130 +++++++++ .../screens/ThresholdForm/style.js | 45 +++ .../ManageOwners/ReplaceOwnerModal/index.jsx | 178 ++++++++++++ .../screens/OwnerForm/index.jsx | 159 +++++++++++ .../screens/OwnerForm/style.js | 44 +++ .../screens/Review/index.jsx | 222 +++++++++++++++ .../ReplaceOwnerModal/screens/Review/style.js | 83 ++++++ .../assets/icons/rename-owner.svg | 3 + .../assets/icons/replace-owner.svg | 3 + .../Settings/ManageOwners/dataFetcher.js | 56 ++++ .../Settings/ManageOwners/index.jsx | 259 ++++++++++++++++++ .../components/Settings/ManageOwners/style.js | 31 +++ .../safe/components/Settings/actions.js | 10 + .../components/Settings/assets/icons/bin.svg | 3 + src/routes/safe/components/Settings/index.jsx | 71 +++-- src/routes/safe/components/Settings/style.js | 10 + src/routes/safe/container/selector.js | 2 +- .../safe/store/actions/updateSafeName.js | 10 + .../safe/store/middleware/safeStorage.js | 6 + src/test/builder/safe.dom.utils.js | 15 +- ...test.js => safe.dom.settings.name.test.js} | 2 +- src/test/safe.dom.settings.owners.test.js | 218 +++++++++++++++ src/test/safe.dom.transactions.test.js | 12 +- src/test/tokens.dom.adding.test.js | 2 +- src/test/utils/DOMNavigation/tokens.js | 5 +- src/test/utils/logTransactions.js | 9 +- src/test/utils/safeHelper.js | 2 +- .../utils/transactions/addOwner.helper.js | 53 ---- .../utils/transactions/removeOwner.helper.js | 49 ---- 77 files changed, 3141 insertions(+), 1110 deletions(-) delete mode 100644 src/routes/safe/components/AddOwner/AddOwnerForm/index.jsx delete mode 100644 src/routes/safe/components/AddOwner/Review/index.jsx delete mode 100644 src/routes/safe/components/AddOwner/actions.js delete mode 100644 src/routes/safe/components/AddOwner/index.jsx delete mode 100644 src/routes/safe/components/AddOwner/selector.js delete mode 100644 src/routes/safe/components/RemoveOwner/RemoveOwnerForm/index.jsx delete mode 100644 src/routes/safe/components/RemoveOwner/Review/index.jsx delete mode 100644 src/routes/safe/components/RemoveOwner/actions.js delete mode 100644 src/routes/safe/components/RemoveOwner/index.jsx delete mode 100644 src/routes/safe/components/RemoveOwner/selector.js delete mode 100644 src/routes/safe/components/Safe/Address.jsx delete mode 100644 src/routes/safe/components/Safe/BalanceInfo.jsx delete mode 100644 src/routes/safe/components/Safe/Confirmations.jsx delete mode 100644 src/routes/safe/components/Safe/MultisigTx.jsx delete mode 100644 src/routes/safe/components/Safe/Owners.jsx delete mode 100644 src/routes/safe/components/Safe/assets/gnosis_safe.svg delete mode 100644 src/routes/safe/components/Safe/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg create mode 100644 src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg create mode 100644 src/routes/safe/components/Settings/ManageOwners/dataFetcher.js create mode 100644 src/routes/safe/components/Settings/ManageOwners/index.jsx create mode 100644 src/routes/safe/components/Settings/ManageOwners/style.js create mode 100644 src/routes/safe/components/Settings/actions.js create mode 100644 src/routes/safe/components/Settings/assets/icons/bin.svg create mode 100644 src/routes/safe/store/actions/updateSafeName.js rename src/test/{safe.dom.settings.test.js => safe.dom.settings.name.test.js} (96%) create mode 100644 src/test/safe.dom.settings.owners.test.js delete mode 100644 src/test/utils/transactions/addOwner.helper.js delete mode 100644 src/test/utils/transactions/removeOwner.helper.js diff --git a/src/components/Footer/index.scss b/src/components/Footer/index.scss index 91887ad4..0f3b3eba 100644 --- a/src/components/Footer/index.scss +++ b/src/components/Footer/index.scss @@ -7,6 +7,7 @@ align-items: center; border: solid 0.5px $border; background-color: white; + margin-top: 50px; } @media only screen and (max-width: $(screenXs)px) { diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx index af5b471f..487c2ede 100644 --- a/src/components/Table/index.jsx +++ b/src/components/Table/index.jsx @@ -22,6 +22,7 @@ type Props = { size: number, defaultFixed?: boolean, defaultOrder?: 'desc' | 'asc', + noBorder: boolean, } type State = { @@ -127,7 +128,7 @@ class GnoTable extends React.Component, State> { render() { const { - data, label, columns, classes, children, size, defaultOrderBy, defaultOrder, defaultFixed, + data, label, columns, classes, children, size, defaultOrderBy, defaultOrder, defaultFixed, noBorder, } = this.props const { order, orderBy, page, orderProp, rowsPerPage, fixed, @@ -138,7 +139,7 @@ class GnoTable extends React.Component, State> { const paginationClasses = { selectRoot: classes.selectRoot, - root: classes.paginationRoot, + root: !noBorder && classes.paginationRoot, input: classes.white, } @@ -153,13 +154,16 @@ class GnoTable extends React.Component, State> { return ( {!isEmpty && ( - - +
+ {children(sortedData)}
)} {isEmpty && ( - + )} diff --git a/src/components/forms/validator.js b/src/components/forms/validator.js index d885bc59..de0f30ff 100644 --- a/src/components/forms/validator.js +++ b/src/components/forms/validator.js @@ -2,9 +2,21 @@ import { type FieldValidator } from 'final-form' import { getWeb3 } from '~/logic/wallets/getWeb3' +export const simpleMemoize = (fn: Function) => { + let lastArg + let lastResult + return (arg: any) => { + if (arg !== lastArg) { + lastArg = arg + lastResult = fn(arg) + } + return lastResult + } +} + type Field = boolean | string | null | typeof undefined -export const required = (value: Field) => (value ? undefined : 'Required') +export const required = simpleMemoize((value: Field) => (value ? undefined : 'Required')) export const mustBeInteger = (value: string) => (!Number.isInteger(Number(value)) || value.includes('.') ? 'Must be an integer' : undefined) @@ -46,17 +58,17 @@ export const maxValue = (max: number) => (value: string) => { export const ok = () => undefined -export const mustBeEthereumAddress = (address: Field) => { +export const mustBeEthereumAddress = simpleMemoize((address: Field) => { const isAddress: boolean = getWeb3().utils.isAddress(address) return isAddress ? undefined : 'Address should be a valid Ethereum address' -} +}) export const minMaxLength = (minLen: string | number, maxLen: string | number) => (value: string) => (value.length >= +minLen && value.length <= +maxLen ? undefined : `Should be ${minLen} to ${maxLen} symbols`) export const ADDRESS_REPEATED_ERROR = 'Address already introduced' -export const uniqueAddress = (addresses: string[]) => (value: string) => (addresses.includes(value) ? ADDRESS_REPEATED_ERROR : undefined) +export const uniqueAddress = (addresses: string[]) => simpleMemoize((value: string) => (addresses.includes(value) ? ADDRESS_REPEATED_ERROR : undefined)) export const composeValidators = (...validators: Function[]): FieldValidator => (value: Field) => validators.reduce((error, validator) => error || validator(value), undefined) diff --git a/src/components/layout/Img/index.jsx b/src/components/layout/Img/index.jsx index dd5886ff..94dbd5f4 100644 --- a/src/components/layout/Img/index.jsx +++ b/src/components/layout/Img/index.jsx @@ -10,15 +10,16 @@ type Props = { fullwidth?: boolean, bordered?: boolean, className?: string, - style?: React.Node, + style?: Object, + testId?: string, } const Img = ({ - fullwidth, alt, bordered, className, style, ...props + fullwidth, alt, bordered, className, style, testId = '', ...props }: Props) => { const classes = cx(styles.img, { fullwidth, bordered }, className) - return {alt} + return {alt} } export default Img diff --git a/src/components/layout/Row/index.jsx b/src/components/layout/Row/index.jsx index 0d4433ae..1bb6e855 100644 --- a/src/components/layout/Row/index.jsx +++ b/src/components/layout/Row/index.jsx @@ -12,10 +12,11 @@ type Props = { margin?: 'xs' | 'sm' | 'md' | 'lg' | 'xl', align?: 'center' | 'end' | 'start', grow?: boolean, + testId?: string, } const Row = ({ - children, className, margin, align, grow, ...props + children, className, margin, align, grow, testId = '', ...props }: Props) => { const rowClassNames = cx( styles.row, @@ -26,7 +27,7 @@ const Row = ({ ) return ( -
+
{children}
) diff --git a/src/components/layout/Table/index.jsx b/src/components/layout/Table/index.jsx index 886e9ee4..7c21f556 100644 --- a/src/components/layout/Table/index.jsx +++ b/src/components/layout/Table/index.jsx @@ -20,7 +20,7 @@ const buildWidthFrom = (size: number) => ({ }) const overflowStyle = { - overflowX: 'scroll', + overflowX: 'auto', } // see: https://css-tricks.com/responsive-data-tables/ diff --git a/src/logic/safe/utils/safeStorage.js b/src/logic/safe/utils/safeStorage.js index dbe8aa7d..0dc3ce82 100644 --- a/src/logic/safe/utils/safeStorage.js +++ b/src/logic/safe/utils/safeStorage.js @@ -28,7 +28,7 @@ export const saveSafes = async (safes: Object) => { export const setOwners = async (safeAddress: string, owners: List) => { try { - const ownersAsMap = Map(owners.map((owner: Owner) => [owner.get('address').toLowerCase(), owner.get('name')])) + const ownersAsMap = Map(owners.map((owner: Owner) => [owner.address.toLowerCase(), owner.name])) await saveToStorage(`${OWNERS_KEY}-${safeAddress}`, ownersAsMap) } catch (err) { // eslint-disable-next-line diff --git a/src/logic/tokens/store/actions/fetchTokens.js b/src/logic/tokens/store/actions/fetchTokens.js index 04d8a1c3..d3654f96 100644 --- a/src/logic/tokens/store/actions/fetchTokens.js +++ b/src/logic/tokens/store/actions/fetchTokens.js @@ -5,7 +5,7 @@ import type { Dispatch as ReduxDispatch } from 'redux' import StandardToken from '@gnosis.pm/util-contracts/build/contracts/GnosisStandardToken.json' import HumanFriendlyToken from '@gnosis.pm/util-contracts/build/contracts/HumanFriendlyToken.json' import { getWeb3 } from '~/logic/wallets/getWeb3' -import { type GlobalState } from '~/store/index' +import { type GlobalState } from '~/store' import { makeToken, type TokenProps } from '~/logic/tokens/store/model/token' import { fetchTokenList } from '~/logic/tokens/api' import { ensureOnce } from '~/utils/singleton' diff --git a/src/logic/tokens/store/actions/removeToken.js b/src/logic/tokens/store/actions/removeToken.js index 40059789..0dedb20a 100644 --- a/src/logic/tokens/store/actions/removeToken.js +++ b/src/logic/tokens/store/actions/removeToken.js @@ -1,9 +1,9 @@ // @flow import { createAction } from 'redux-actions' +import type { Dispatch as ReduxDispatch } from 'redux' import { type Token } from '~/logic/tokens/store/model/token' import { removeTokenFromStorage, removeFromActiveTokens } from '~/logic/tokens/utils/tokensStorage' import { type GlobalState } from '~/store/index' -import type { Dispatch as ReduxDispatch } from 'redux' export const REMOVE_TOKEN = 'REMOVE_TOKEN' diff --git a/src/logic/wallets/tokens.js b/src/logic/wallets/tokens.js index 890ef840..b573f250 100644 --- a/src/logic/wallets/tokens.js +++ b/src/logic/wallets/tokens.js @@ -1,6 +1,6 @@ // @flow -import { getWeb3 } from '~/logic/wallets/getWeb3' import { BigNumber } from 'bignumber.js' +import { getWeb3 } from '~/logic/wallets/getWeb3' export const toNative = (amt: string | number | BigNumber, decimal: number): BigNumber => { const web3 = getWeb3() diff --git a/src/routes/open/components/ReviewInformation/index.jsx b/src/routes/open/components/ReviewInformation/index.jsx index 36b424d8..704a1498 100644 --- a/src/routes/open/components/ReviewInformation/index.jsx +++ b/src/routes/open/components/ReviewInformation/index.jsx @@ -1,10 +1,10 @@ // @flow import * as React from 'react' import classNames from 'classnames' -import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor' -import Block from '~/components/layout/Block' import { withStyles } from '@material-ui/core/styles' import OpenInNew from '@material-ui/icons/OpenInNew' +import { getNamesFrom, getAccountsFrom } from '~/routes/open/utils/safeDataExtractor' +import Block from '~/components/layout/Block' import Identicon from '~/components/Identicon' import OpenPaper from '~/components/Stepper/OpenPaper' import Col from '~/components/layout/Col' diff --git a/src/routes/open/components/SafeOwnersForm/index.jsx b/src/routes/open/components/SafeOwnersForm/index.jsx index e82d15de..cec64ddc 100644 --- a/src/routes/open/components/SafeOwnersForm/index.jsx +++ b/src/routes/open/components/SafeOwnersForm/index.jsx @@ -74,8 +74,11 @@ const styles = () => ({ }) const getAddressValidators = (addresses: string[], position: number) => { + // thanks Rich Harris + // https://twitter.com/Rich_Harris/status/1125850391155965952 const copy = addresses.slice() - copy.splice(position, 1) + copy[position] = copy[copy.length - 1] + copy.pop() return composeValidators(required, mustBeEthereumAddress, uniqueAddress(copy)) } @@ -97,7 +100,7 @@ export const calculateValuesAfterRemoving = (index: number, notRemovedOwners: nu return initialValues } -class SafeOwners extends React.Component { +class SafeOwners extends React.PureComponent { state = { numOwners: 1, } diff --git a/src/routes/safe/components/AddOwner/AddOwnerForm/index.jsx b/src/routes/safe/components/AddOwner/AddOwnerForm/index.jsx deleted file mode 100644 index b756f2d3..00000000 --- a/src/routes/safe/components/AddOwner/AddOwnerForm/index.jsx +++ /dev/null @@ -1,70 +0,0 @@ -// @flow -import * as React from 'react' -import Field from '~/components/forms/Field' -import OpenPaper from '~/components/Stepper/OpenPaper' -import TextField from '~/components/forms/TextField' -import Checkbox from '~/components/forms/Checkbox' -import { - composeValidators, required, mustBeEthereumAddress, uniqueAddress, -} from '~/components/forms/validator' -import Block from '~/components/layout/Block' -import Heading from '~/components/layout/Heading' - -export const CONFIRMATIONS_ERROR = 'Number of confirmations can not be higher than the number of owners' - -export const NAME_PARAM = 'name' -export const OWNER_ADDRESS_PARAM = 'ownerAddress' -export const INCREASE_PARAM = 'increase' - -export const safeFieldsValidation = (values: Object) => { - const errors = {} - - if (Number.parseInt(values.owners, 10) < Number.parseInt(values.confirmations, 10)) { - errors.confirmations = CONFIRMATIONS_ERROR - } - - return errors -} - -type Props = { - numOwners: number, - threshold: number, - addresses: string[], -} - -const AddOwnerForm = ({ addresses, numOwners, threshold }: Props) => (controls: React.Node) => ( - - - Add Owner - - - {`Actual number of owners: ${numOwners}, with threshold: ${threshold}`} - - - - - - - - - - Increase threshold? - - -) - -export default AddOwnerForm diff --git a/src/routes/safe/components/AddOwner/Review/index.jsx b/src/routes/safe/components/AddOwner/Review/index.jsx deleted file mode 100644 index 4ce516ad..00000000 --- a/src/routes/safe/components/AddOwner/Review/index.jsx +++ /dev/null @@ -1,48 +0,0 @@ -// @flow -import * as React from 'react' -import CircularProgress from '@material-ui/core/CircularProgress' -import OpenPaper from '~/components/Stepper/OpenPaper' -import Block from '~/components/layout/Block' -import Bold from '~/components/layout/Bold' -import Heading from '~/components/layout/Heading' -import Paragraph from '~/components/layout/Paragraph' -import { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from '~/routes/safe/components/AddOwner/AddOwnerForm' - -type FormProps = { - values: Object, - submitting: boolean, -} - -const spinnerStyle = { - minHeight: '50px', -} - -const Review = () => (controls: React.Node, { values, submitting }: FormProps) => { - const text = values[INCREASE_PARAM] - ? 'This operation will increase the threshold of the safe' - : 'This operation will not modify the threshold of the safe' - - return ( - - Review the Add Owner operation - - Owner Name: - {' '} - {values[NAME_PARAM]} - - - Owner Address: - {' '} - {values[OWNER_ADDRESS_PARAM]} - - - {text} - - - { submitting && } - - - ) -} - -export default Review diff --git a/src/routes/safe/components/AddOwner/actions.js b/src/routes/safe/components/AddOwner/actions.js deleted file mode 100644 index 32f51f38..00000000 --- a/src/routes/safe/components/AddOwner/actions.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow -import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions' - -type FetchTransactions = typeof fetchTransactions - -export type Actions = { - fetchTransactions: FetchTransactions, -} - -export default { - fetchTransactions, -} diff --git a/src/routes/safe/components/AddOwner/index.jsx b/src/routes/safe/components/AddOwner/index.jsx deleted file mode 100644 index 920f056e..00000000 --- a/src/routes/safe/components/AddOwner/index.jsx +++ /dev/null @@ -1,105 +0,0 @@ -// @flow -import * as React from 'react' -import { List } from 'immutable' -import Stepper from '~/components/Stepper' -import { connect } from 'react-redux' -import { type Safe } from '~/routes/safe/store/models/safe' -import { type Owner, makeOwner } from '~/routes/safe/store/models/owner' -import { setOwners } from '~/logic/safe/utils' -import { createTransaction } from '~/logic/safe/safeFrontendOperations' -import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts' -import AddOwnerForm, { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from './AddOwnerForm' -import Review from './Review' -import selector, { type SelectorProps } from './selector' -import actions, { type Actions } from './actions' - -const getSteps = () => ['Fill Owner Form', 'Review Add order operation'] - -type Props = SelectorProps & - Actions & { - safe: Safe, - threshold: number, - } - -type State = { - done: boolean, -} - -export const ADD_OWNER_RESET_BUTTON_TEXT = 'RESET' - -const getOwnerAddressesFrom = (owners: List) => { - if (!owners) { - return [] - } - - return owners.map((owner: Owner) => owner.get('address')) -} - -export const addOwner = async (values: Object, safe: Safe, threshold: number, executor: string) => { - const safeAddress = safe.get('address') - const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) - const nonce = await gnosisSafe.nonce() - - const newThreshold = values[INCREASE_PARAM] ? threshold + 1 : threshold - const newOwnerAddress = values[OWNER_ADDRESS_PARAM] - const newOwnerName = values[NAME_PARAM] - - const data = gnosisSafe.contract.methods.addOwnerWithThreshold(newOwnerAddress, newThreshold).encodeABI() - await createTransaction(safe, `Add Owner ${newOwnerName}`, safeAddress, '0', nonce, executor, data) - setOwners(safeAddress, safe.get('owners').push(makeOwner({ name: newOwnerName, address: newOwnerAddress }))) -} - -class AddOwner extends React.Component { - state = { - done: false, - } - - onAddOwner = async (values: Object) => { - try { - const { - safe, threshold, userAddress, fetchTransactions, - } = this.props - await addOwner(values, safe, threshold, userAddress) - fetchTransactions(safe.get('address')) - this.setState({ done: true }) - } catch (error) { - this.setState({ done: false }) - // eslint-disable-next-line - console.log('Error while adding owner ' + error) - } - } - - onReset = () => { - this.setState({ done: false }) - } - - render() { - const { safe } = this.props - const { done } = this.state - const steps = getSteps() - const finishedButton = - const addresses = getOwnerAddressesFrom(safe.get('owners')) - - return ( - - - - {AddOwnerForm} - - {Review} - - - ) - } -} - -export default connect( - selector, - actions, -)(AddOwner) diff --git a/src/routes/safe/components/AddOwner/selector.js b/src/routes/safe/components/AddOwner/selector.js deleted file mode 100644 index cefe3460..00000000 --- a/src/routes/safe/components/AddOwner/selector.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow -import { createStructuredSelector } from 'reselect' -import { userAccountSelector } from '~/logic/wallets/store/selectors' - -export type SelectorProps = { - userAddress: userAccountSelector, -} - -export default createStructuredSelector({ - userAddress: userAccountSelector, -}) diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js index 56478291..aa312930 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js +++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js @@ -3,18 +3,8 @@ import { List } from 'immutable' import { type Token } from '~/logic/tokens/store/model/token' import { sameAddress } from '~/logic/wallets/ethAddresses' import { isAddressAToken } from '~/logic/tokens/utils/tokenHelpers' - -export const simpleMemoize = (fn: Function) => { - let lastArg - let lastResult - return (arg: any) => { - if (arg !== lastArg) { - lastArg = arg - lastResult = fn(arg) - } - return lastResult - } -} +import { simpleMemoize } from '~/components/forms/validator' +// import { getStandardTokenContract } from '~/logic/tokens/store/actions/fetchTokens' // eslint-disable-next-line export const addressIsTokenContract = simpleMemoize(async (tokenAddress: string) => { diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx index bfbafd82..85bb75a3 100644 --- a/src/routes/safe/components/Layout.jsx +++ b/src/routes/safe/components/Layout.jsx @@ -183,6 +183,8 @@ class Layout extends React.Component { updateSafe={updateSafe} threshold={safe.threshold} owners={safe.owners} + network={network} + userAddress={userAddress} createTransaction={createTransaction} /> )} diff --git a/src/routes/safe/components/RemoveOwner/RemoveOwnerForm/index.jsx b/src/routes/safe/components/RemoveOwner/RemoveOwnerForm/index.jsx deleted file mode 100644 index 5f1a61a4..00000000 --- a/src/routes/safe/components/RemoveOwner/RemoveOwnerForm/index.jsx +++ /dev/null @@ -1,50 +0,0 @@ -// @flow -import * as React from 'react' -import Field from '~/components/forms/Field' -import SnackbarContent from '~/components/SnackbarContent' -import OpenPaper from '~/components/Stepper/OpenPaper' -import Checkbox from '~/components/forms/Checkbox' -import Block from '~/components/layout/Block' -import Heading from '~/components/layout/Heading' - -export const DECREASE_PARAM = 'decrease' - -type Props = { - numOwners: number, - threshold: number, - name: string, - disabled: boolean, - pendingTransactions: boolean, -} - -const RemoveOwnerForm = ({ - numOwners, threshold, name, disabled, pendingTransactions, -}: Props) => ( - controls: React.Node, -) => ( - - - Remove Owner - {' '} - {!!name && name} - - - {`Actual number of owners: ${numOwners}, threhsold of safe: ${threshold}`} - - {pendingTransactions && ( - - )} - - - - {disabled && '(disabled) '} - Decrease threshold? - - - -) - -export default RemoveOwnerForm diff --git a/src/routes/safe/components/RemoveOwner/Review/index.jsx b/src/routes/safe/components/RemoveOwner/Review/index.jsx deleted file mode 100644 index f9e35c2d..00000000 --- a/src/routes/safe/components/RemoveOwner/Review/index.jsx +++ /dev/null @@ -1,47 +0,0 @@ -// @flow -import * as React from 'react' -import CircularProgress from '@material-ui/core/CircularProgress' -import Block from '~/components/layout/Block' -import OpenPaper from '~/components/Stepper/OpenPaper' -import Bold from '~/components/layout/Bold' -import Heading from '~/components/layout/Heading' -import Paragraph from '~/components/layout/Paragraph' -import { DECREASE_PARAM } from '~/routes/safe/components/RemoveOwner/RemoveOwnerForm' - -type Props = { - name: string, -} - -type FormProps = { - values: Object, - submitting: boolean, -} - -const spinnerStyle = { - minHeight: '50px', -} - -const Review = ({ name }: Props) => (controls: React.Node, { values, submitting }: FormProps) => { - const text = values[DECREASE_PARAM] - ? 'This operation will decrease the threshold of the safe' - : 'This operation will not modify the threshold of the safe' - - return ( - - Review the Remove Owner operation - - Owner Name: - {' '} - {name} - - - {text} - - - { submitting && } - - - ) -} - -export default Review diff --git a/src/routes/safe/components/RemoveOwner/actions.js b/src/routes/safe/components/RemoveOwner/actions.js deleted file mode 100644 index 32f51f38..00000000 --- a/src/routes/safe/components/RemoveOwner/actions.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow -import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions' - -type FetchTransactions = typeof fetchTransactions - -export type Actions = { - fetchTransactions: FetchTransactions, -} - -export default { - fetchTransactions, -} diff --git a/src/routes/safe/components/RemoveOwner/index.jsx b/src/routes/safe/components/RemoveOwner/index.jsx deleted file mode 100644 index d82592ab..00000000 --- a/src/routes/safe/components/RemoveOwner/index.jsx +++ /dev/null @@ -1,121 +0,0 @@ -// @flow -import * as React from 'react' -import Stepper from '~/components/Stepper' -import { connect } from 'react-redux' -import { type Safe } from '~/routes/safe/store/models/safe' -import { createTransaction } from '~/logic/safe/safeFrontendOperations' -import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts' -import RemoveOwnerForm, { DECREASE_PARAM } from './RemoveOwnerForm' -import Review from './Review' -import selector, { type SelectorProps } from './selector' -import actions, { type Actions } from './actions' - -const getSteps = () => [ - 'Fill Owner Form', 'Review Remove order operation', -] - -type Props = SelectorProps & Actions & { - safe: Safe, - threshold: number, - name: string, - userToRemove: string, -} - -type State = { - done: boolean, -} - -const SENTINEL_ADDRESS = '0x0000000000000000000000000000000000000001' -export const REMOVE_OWNER_RESET_BUTTON_TEXT = 'RESET' - -export const initialValuesFrom = (decreaseMandatory: boolean = false) => ({ - [DECREASE_PARAM]: decreaseMandatory, -}) - -export const shouldDecrease = (numOwners: number, threshold: number) => threshold === numOwners - -export const removeOwner = async ( - values: Object, - safe: Safe, - threshold: number, - userToRemove: string, - name: string, - executor: string, -) => { - const safeAddress = safe.get('address') - const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) - const nonce = await gnosisSafe.nonce() - const newThreshold = values[DECREASE_PARAM] ? threshold - 1 : threshold - const storedOwners = await gnosisSafe.getOwners() - const index = storedOwners.findIndex(ownerAddress => ownerAddress === userToRemove) - const prevAddress = index === 0 ? SENTINEL_ADDRESS : storedOwners[index - 1] - const data = gnosisSafe.contract.removeOwner(prevAddress, userToRemove, newThreshold).encodeABI() - const text = name || userToRemove - - return createTransaction(safe, `Remove Owner ${text}`, safeAddress, '0', nonce, executor, data) -} - -class RemoveOwner extends React.Component { - state = { - done: false, - } - - onRemoveOwner = async (values: Object) => { - try { - const { - safe, threshold, executor, fetchTransactions, userToRemove, name, - } = this.props - await removeOwner(values, safe, threshold, userToRemove, name, executor) - fetchTransactions(safe.get('address')) - this.setState({ done: true }) - } catch (error) { - this.setState({ done: false }) - // eslint-disable-next-line - console.log('Error while adding owner ' + error) - } - } - - onReset = () => { - this.setState({ done: false }) - } - - render() { - const { safe, name, pendingTransactions } = this.props - const { done } = this.state - const steps = getSteps() - const numOwners = safe.get('owners').count() - const threshold = safe.get('threshold') - const finishedButton = - const decrease = shouldDecrease(numOwners, threshold) - const initialValues = initialValuesFrom(decrease) - const disabled = decrease || threshold === 1 - - return ( - - - - { RemoveOwnerForm } - - - { Review } - - - - ) - } -} - -export default connect(selector, actions)(RemoveOwner) diff --git a/src/routes/safe/components/RemoveOwner/selector.js b/src/routes/safe/components/RemoveOwner/selector.js deleted file mode 100644 index 92dacedb..00000000 --- a/src/routes/safe/components/RemoveOwner/selector.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import { List } from 'immutable' -import { createStructuredSelector, createSelector } from 'reselect' -import { userAccountSelector } from '~/logic/wallets/store/selectors' -import { type Transaction } from '~/routes/safe/store/models/transaction' -import { safeTransactionsSelector } from '~/routes/safe/store/selectors/index' - -const pendingTransactionsSelector = createSelector( - safeTransactionsSelector, - (transactions: List) => transactions.findEntry((tx: Transaction) => tx.get('isExecuted')), -) - -export type SelectorProps = { - executor: typeof userAccountSelector, - pendingTransactions: typeof pendingTransactionsSelector, -} - -export default createStructuredSelector({ - executor: userAccountSelector, - pendingTransactions: pendingTransactionsSelector, -}) diff --git a/src/routes/safe/components/Safe/Address.jsx b/src/routes/safe/components/Safe/Address.jsx deleted file mode 100644 index 52dd3135..00000000 --- a/src/routes/safe/components/Safe/Address.jsx +++ /dev/null @@ -1,21 +0,0 @@ -// @flow -import * as React from 'react' -import ListItem from '@material-ui/core/ListItem' -import Avatar from '@material-ui/core/Avatar' -import Mail from '@material-ui/icons/Mail' -import ListItemText from '~/components/List/ListItemText' - -type Props = { - address: string, -} - -const Address = ({ address }: Props) => ( - - - - - - -) - -export default Address diff --git a/src/routes/safe/components/Safe/BalanceInfo.jsx b/src/routes/safe/components/Safe/BalanceInfo.jsx deleted file mode 100644 index 470ae2a4..00000000 --- a/src/routes/safe/components/Safe/BalanceInfo.jsx +++ /dev/null @@ -1,80 +0,0 @@ -// @flow -import * as React from 'react' -import classNames from 'classnames' -import AccountBalance from '@material-ui/icons/AccountBalance' -import Avatar from '@material-ui/core/Avatar' -import Collapse from '@material-ui/core/Collapse' -import IconButton from '@material-ui/core/IconButton' -import List from '@material-ui/core/List' -import Img from '~/components/layout/Img' -import ListItem from '@material-ui/core/ListItem' -import ListItemIcon from '@material-ui/core/ListItemIcon' -import ListItemText from '@material-ui/core/ListItemText' -import { withStyles } from '@material-ui/core/styles' -import ExpandLess from '@material-ui/icons/ExpandLess' -import ExpandMore from '@material-ui/icons/ExpandMore' -import { Map } from 'immutable' -import Button from '~/components/layout/Button' -import openHoc, { type Open } from '~/components/hoc/OpenHoc' -import { type WithStyles } from '~/theme/mui' -import { type Token } from '~/logic/tokens/store/model/token' - -type Props = Open & WithStyles & { - tokens: Map, - onMoveFunds: (token: Token) => void, -} - -const styles = { - nested: { - paddingLeft: '40px', - }, -} - -export const MOVE_FUNDS_BUTTON_TEXT = 'Move' - -const BalanceComponent = openHoc(({ - open, toggle, tokens, classes, onMoveFunds, -}: Props) => { - const hasBalances = tokens.count() > 0 - - return ( - - - - - - - - {open - ? - : - } - - - - - {tokens.valueSeq().map((token: Token) => { - const symbol = token.get('symbol') - const name = token.get('name') - const disabled = Number(token.get('funds')) === 0 - const onMoveFundsClick = () => onMoveFunds(token) - - return ( - - - {name} - - - - - ) - })} - - - - ) -}) - -export default withStyles(styles)(BalanceComponent) diff --git a/src/routes/safe/components/Safe/Confirmations.jsx b/src/routes/safe/components/Safe/Confirmations.jsx deleted file mode 100644 index 06aeb23d..00000000 --- a/src/routes/safe/components/Safe/Confirmations.jsx +++ /dev/null @@ -1,36 +0,0 @@ -// @flow -import * as React from 'react' -import ListItem from '@material-ui/core/ListItem' -import Avatar from '@material-ui/core/Avatar' -import DoneAll from '@material-ui/icons/DoneAll' -import ListItemText from '~/components/List/ListItemText' -import Button from '~/components/layout/Button' - -type Props = { - confirmations: number, - onEditThreshold: () => void, -} - -const EDIT_THRESHOLD_BUTTON_TEXT = 'EDIT' - -const Confirmations = ({ confirmations, onEditThreshold }: Props) => ( - - - - - - - -) - -export default Confirmations diff --git a/src/routes/safe/components/Safe/MultisigTx.jsx b/src/routes/safe/components/Safe/MultisigTx.jsx deleted file mode 100644 index db9b3c4f..00000000 --- a/src/routes/safe/components/Safe/MultisigTx.jsx +++ /dev/null @@ -1,35 +0,0 @@ -// @flow -import * as React from 'react' -import ListItem from '@material-ui/core/ListItem' -import Avatar from '@material-ui/core/Avatar' -import AcoountBalanceWallet from '@material-ui/icons/AccountBalanceWallet' -import Button from '~/components/layout/Button' -import ListItemText from '~/components/List/ListItemText' - -type Props = { - onSeeTxs: () => void, -} - -export const SEE_MULTISIG_BUTTON_TEXT = 'TXs' - -const MultisigTransactionsComponent = ({ onSeeTxs }: Props) => { - const text = 'See multisig txs executed on this Safe' - - return ( - - - - - - - - ) -} - -export default MultisigTransactionsComponent diff --git a/src/routes/safe/components/Safe/Owners.jsx b/src/routes/safe/components/Safe/Owners.jsx deleted file mode 100644 index acc106c3..00000000 --- a/src/routes/safe/components/Safe/Owners.jsx +++ /dev/null @@ -1,91 +0,0 @@ -// @flow -import * as React from 'react' -import openHoc, { type Open } from '~/components/hoc/OpenHoc' -import { withStyles } from '@material-ui/core/styles' -import Collapse from '@material-ui/core/Collapse' -import ListItemText from '~/components/List/ListItemText' -import List from '@material-ui/core/List' -import ListItem from '@material-ui/core/ListItem' -import ListItemIcon from '@material-ui/core/ListItemIcon' -import Avatar from '@material-ui/core/Avatar' -import IconButton from '@material-ui/core/IconButton' -import Button from '~/components/layout/Button' -import Group from '@material-ui/icons/Group' -import Delete from '@material-ui/icons/Delete' -import Person from '@material-ui/icons/Person' -import ExpandLess from '@material-ui/icons/ExpandLess' -import ExpandMore from '@material-ui/icons/ExpandMore' -import { type OwnerProps } from '~/routes/safe/store/models/owner' -import { type WithStyles } from '~/theme/mui' -import { sameAddress } from '~/logic/wallets/ethAddresses' - -const styles = { - nested: { - paddingLeft: '40px', - }, -} - -type Props = Open & WithStyles & { - owners: List, - userAddress: string, - onAddOwner: () => void, - onRemoveOwner: (name: string, addres: string) => void, -} - -export const ADD_OWNER_BUTTON_TEXT = 'Add' -export const REMOVE_OWNER_BUTTON_TEXT = 'Delete' - -const Owners = openHoc(({ - open, toggle, owners, classes, onAddOwner, userAddress, onRemoveOwner, -}: Props) => ( - - - - - - - - {open - ? - : - } - - - - - - {owners.map((owner) => { - const onRemoveIconClick = () => onRemoveOwner(owner.name, owner.address) - - return ( - - - - - - { !sameAddress(userAddress, owner.address) - && ( - - - - ) - } - - ) - })} - - - -)) - -export default withStyles(styles)(Owners) diff --git a/src/routes/safe/components/Safe/assets/gnosis_safe.svg b/src/routes/safe/components/Safe/assets/gnosis_safe.svg deleted file mode 100644 index c7bf5502..00000000 --- a/src/routes/safe/components/Safe/assets/gnosis_safe.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/src/routes/safe/components/Safe/index.jsx b/src/routes/safe/components/Safe/index.jsx deleted file mode 100644 index 23af1114..00000000 --- a/src/routes/safe/components/Safe/index.jsx +++ /dev/null @@ -1,135 +0,0 @@ -// @flow -import ListComponent from '@material-ui/core/List' -import * as React from 'react' -import { List } from 'immutable' -import Block from '~/components/layout/Block' -import Col from '~/components/layout/Col' -import Bold from '~/components/layout/Bold' -import Img from '~/components/layout/Img' -import Paragraph from '~/components/layout/Paragraph' -import Row from '~/components/layout/Row' -import { type Safe } from '~/routes/safe/store/models/safe' -import { type Token } from '~/logic/tokens/store/model/token' - -import Transactions from '~/routes/safe/components/Transactions' -import Threshold from '~/routes/safe/components/Threshold' -import AddOwner from '~/routes/safe/components/AddOwner' -import RemoveOwner from '~/routes/safe/components/RemoveOwner' -import SendToken from '~/routes/safe/components/SendToken' - -import Address from './Address' -import BalanceInfo from './BalanceInfo' -import Owners from './Owners' -import Confirmations from './Confirmations' -import MultisigTx from './MultisigTx' - -const safeIcon = require('./assets/gnosis_safe.svg') - -type SafeProps = { - safe: Safe, - tokens: List, - userAddress: string, -} - -type State = { - component?: React.Node, -} - -const listStyle = { - width: '100%', -} - -class GnoSafe extends React.PureComponent { - state = { - component: undefined, - } - - onListTransactions = () => { - const { safe } = this.props - - this.setState({ - component: ( - - ), - }) - } - - onEditThreshold = () => { - const { safe } = this.props - - this.setState({ - component: , - }) - } - - onAddOwner = (e: SyntheticEvent) => { - const { safe } = this.props - e.stopPropagation() - this.setState({ component: }) - } - - onRemoveOwner = (name: string, address: string) => { - const { safe } = this.props - - this.setState({ - component: ( - - ), - }) - } - - onMoveTokens = (ercToken: Token) => { - const { safe } = this.props - - this.setState({ - component: ( - - ), - }) - } - - render() { - const { safe, tokens, userAddress } = this.props - const { component } = this.state - const address = safe.get('address') - - return ( - - - - - - -
- - - - - - - {safe.name.toUpperCase()} - - - - - {component || Safe Icon} - - - - - ) - } -} - -export default GnoSafe diff --git a/src/routes/safe/components/Settings/ChangeSafeName/index.jsx b/src/routes/safe/components/Settings/ChangeSafeName/index.jsx index 5e82b219..1908f5a8 100644 --- a/src/routes/safe/components/Settings/ChangeSafeName/index.jsx +++ b/src/routes/safe/components/Settings/ChangeSafeName/index.jsx @@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles' import Block from '~/components/layout/Block' import Col from '~/components/layout/Col' import Field from '~/components/forms/Field' +import Heading from '~/components/layout/Heading' import { composeValidators, required, minMaxLength } from '~/components/forms/validator' import TextField from '~/components/forms/TextField' import GnoForm from '~/components/forms/GnoForm' @@ -44,10 +45,8 @@ const ChangeSafeName = (props: Props) => { {() => ( - - Modify Safe name - - + Modify Safe name + You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or any third parties. diff --git a/src/routes/safe/components/Settings/ChangeSafeName/style.js b/src/routes/safe/components/Settings/ChangeSafeName/style.js index e3c6da68..b7426867 100644 --- a/src/routes/safe/components/Settings/ChangeSafeName/style.js +++ b/src/routes/safe/components/Settings/ChangeSafeName/style.js @@ -2,12 +2,8 @@ import { lg, sm, boldFont } from '~/theme/variables' export const styles = () => ({ - title: { - padding: `${lg} 0 20px`, - fontSize: '16px', - }, formContainer: { - padding: '0 20px', + padding: lg, minHeight: '369px', }, root: { diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx new file mode 100644 index 00000000..11a68e73 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx @@ -0,0 +1,171 @@ +// @flow +import React, { useState, useEffect } from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import { SharedSnackbarConsumer } from '~/components/SharedSnackBar' +import Modal from '~/components/Modal' +import { type Owner, makeOwner } from '~/routes/safe/store/models/owner' +import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts' +import { getOwners } from '~/logic/safe/utils' +import OwnerForm from './screens/OwnerForm' +import ThresholdForm from './screens/ThresholdForm' +import ReviewAddOwner from './screens/Review' + +const styles = () => ({ + biggerModalWindow: { + width: '775px', + minHeight: '500px', + position: 'static', + }, +}) + +type Props = { + onClose: () => void, + classes: Object, + isOpen: boolean, + safeAddress: string, + safeName: string, + owners: List, + threshold: number, + network: string, + updateSafe: Function, + createTransaction: Function, +} +type ActiveScreen = 'selectOwner' | 'selectThreshold' | 'reviewAddOwner' + +export const sendAddOwner = async ( + values: Object, + safeAddress: string, + ownersOld: List, + openSnackbar: Function, + createTransaction: Function, + updateSafe: Function, +) => { + const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) + const txData = gnosisSafe.contract.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI() + + const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar) + + const owners = [] + const storedOwners = await getOwners(safeAddress) + storedOwners.forEach((value, key) => owners.push(makeOwner({ + address: key, + name: (values.ownerAddress.toLowerCase() === key.toLowerCase()) ? values.ownerName : value, + }))) + const newOwnerIndex = List(owners).findIndex(o => o.address.toLowerCase() === values.ownerAddress.toLowerCase()) + if (newOwnerIndex < 0) { + owners.push(makeOwner({ address: values.ownerAddress, name: values.ownerName })) + } + + if (txHash) { + updateSafe({ + address: safeAddress, + owners: List(owners), + }) + } +} + +const AddOwner = ({ + onClose, + isOpen, + classes, + safeAddress, + safeName, + owners, + threshold, + network, + createTransaction, + updateSafe, +}: Props) => { + const [activeScreen, setActiveScreen] = useState('selectOwner') + const [values, setValues] = useState({}) + + useEffect( + () => () => { + setActiveScreen('selectOwner') + setValues({}) + }, + [isOpen], + ) + + const onClickBack = () => { + if (activeScreen === 'reviewAddOwner') { + setActiveScreen('selectThreshold') + } else if (activeScreen === 'selectThreshold') { + setActiveScreen('selectOwner') + } + } + + const ownerSubmitted = (newValues: Object) => { + setValues(stateValues => ({ + ...stateValues, + ownerName: newValues.ownerName, + ownerAddress: newValues.ownerAddress, + })) + setActiveScreen('selectThreshold') + } + + const thresholdSubmitted = (newValues: Object) => { + setValues(stateValues => ({ + ...stateValues, + threshold: newValues.threshold, + })) + setActiveScreen('reviewAddOwner') + } + + return ( + + + {({ openSnackbar }) => { + const onAddOwner = async () => { + onClose() + try { + sendAddOwner(values, safeAddress, owners, openSnackbar, createTransaction, updateSafe) + } catch (error) { + // eslint-disable-next-line + console.log('Error while removing an owner ' + error) + } + } + + return ( + + + {activeScreen === 'selectOwner' && ( + + )} + {activeScreen === 'selectThreshold' && ( + + )} + {activeScreen === 'reviewAddOwner' && ( + + )} + + + ) + }} + + + ) +} + +export default withStyles(styles)(AddOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx new file mode 100644 index 00000000..f661110f --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx @@ -0,0 +1,116 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import GnoForm from '~/components/forms/GnoForm' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import Field from '~/components/forms/Field' +import TextField from '~/components/forms/TextField' +import { type Owner } from '~/routes/safe/store/models/owner' +import { + composeValidators, + required, + mustBeEthereumAddress, + minMaxLength, + uniqueAddress, +} from '~/components/forms/validator' +import { styles } from './style' + +export const ADD_OWNER_NAME_INPUT_TESTID = 'add-owner-name-input' +export const ADD_OWNER_ADDRESS_INPUT_TESTID = 'add-owner-address-testid' +export const ADD_OWNER_NEXT_BTN_TESTID = 'add-owner-next-btn' + +type Props = { + onClose: () => void, + classes: Object, + onSubmit: Function, + owners: List, +} + +const OwnerForm = ({ + classes, onClose, onSubmit, owners, +}: Props) => { + const handleSubmit = (values) => { + onSubmit(values) + } + const ownerDoesntExist = uniqueAddress(owners.map(o => o.address)) + + return ( + + + + Add new owner + + 1 of 3 + + + + + + + {() => ( + + + + Add a new owner to the active Safe + + + + + + + + + + + + + + + + + + + )} + + + ) +} + +export default withStyles(styles)(OwnerForm) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/style.js b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/style.js new file mode 100644 index 00000000..3a5123bd --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/style.js @@ -0,0 +1,32 @@ +// @flow +import { lg, md, sm } from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + formContainer: { + padding: `${md} ${lg}`, + minHeight: '340px', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx new file mode 100644 index 00000000..8f3a9fda --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx @@ -0,0 +1,176 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import classNames from 'classnames' +import { withStyles } from '@material-ui/core/styles' +import OpenInNew from '@material-ui/icons/OpenInNew' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import Identicon from '~/components/Identicon' +import Link from '~/components/layout/Link' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import type { Owner } from '~/routes/safe/store/models/owner' +import { getEtherScanLink } from '~/logic/wallets/getWeb3' +import { secondary } from '~/theme/variables' +import { styles } from './style' + +export const ADD_OWNER_SUBMIT_BTN_TESTID = 'add-owner-submit-btn' + +const openIconStyle = { + height: '16px', + color: secondary, +} + +type Props = { + onClose: () => void, + classes: Object, + safeName: string, + owners: List, + network: string, + values: Object, + onClickBack: Function, + onSubmit: Function, +} + +const ReviewAddOwner = ({ + classes, onClose, safeName, owners, network, values, onClickBack, onSubmit, +}: Props) => { + const handleSubmit = () => { + onSubmit() + } + return ( + + + + Add new owner + + 3 of 3 + + + + + + + + + + + + Details + + + + + Safe name + + + {safeName} + + + + + Any transaction requires the confirmation of: + + + {values.threshold} + {' '} + out of + {' '} + {owners.size + 1} + {' '} + owner(s) + + + + + + + + {owners.size + 1} + {' '} + Safe owner(s) + + + + {owners.map(owner => ( + + + + + + + + + {owner.name} + + + + {owner.address} + + + + + + + + + + + ))} + + + ADDING NEW OWNER ↓ + + + + + + + + + + + {values.ownerName} + + + + {values.ownerAddress} + + + + + + + + + + + + + + + + + + + ) +} + +export default withStyles(styles)(ReviewAddOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.js b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.js new file mode 100644 index 00000000..91a527e9 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/style.js @@ -0,0 +1,78 @@ +// @flow +import { + lg, sm, border, background, +} from '~/theme/variables' + +export const styles = () => ({ + root: { + height: '372px', + }, + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + info: { + backgroundColor: background, + padding: sm, + justifyContent: 'center', + textAlign: 'center', + flexDirection: 'column', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + details: { + padding: lg, + borderRight: `solid 1px ${border}`, + height: '100%', + }, + owners: { + overflow: 'auto', + height: '100%', + }, + ownersTitle: { + padding: lg, + }, + owner: { + padding: sm, + alignItems: 'center', + }, + name: { + textOverflow: 'ellipsis', + overflow: 'hidden', + }, + userName: { + whiteSpace: 'nowrap', + }, + selectedOwner: { + padding: sm, + alignItems: 'center', + backgroundColor: '#fff3e2', + }, + user: { + justifyContent: 'left', + }, + open: { + paddingLeft: sm, + width: 'auto', + '&:hover': { + cursor: 'pointer', + }, + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx new file mode 100644 index 00000000..2d15e999 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx @@ -0,0 +1,125 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import MenuItem from '@material-ui/core/MenuItem' +import SelectField from '~/components/forms/SelectField' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import GnoForm from '~/components/forms/GnoForm' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import Field from '~/components/forms/Field' +import type { Owner } from '~/routes/safe/store/models/owner' +import { + composeValidators, required, minValue, maxValue, mustBeInteger, +} from '~/components/forms/validator' +import { styles } from './style' + +export const ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID = 'add-owner-threshold-next-btn' + +type Props = { + onClose: () => void, + classes: Object, + owners: List, + threshold: number, + onClickBack: Function, + onSubmit: Function, +} + +const ThresholdForm = ({ + classes, onClose, owners, threshold, onClickBack, onSubmit, +}: Props) => { + const handleSubmit = (values) => { + onSubmit(values) + } + + return ( + + + + Add new owner + + 2 of 3 + + + + + + + {() => ( + + + + + Set the required owner confirmations: + + + + + Any transaction over any daily limit requires the confirmation of: + + + + + ( + + + {[...Array(Number(owners.size + 1))].map((x, index) => ( + + {index + 1} + + ))} + + {props.meta.error && props.meta.touched && ( + + {props.meta.error} + + )} + + )} + validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))} + data-testid="threshold-select-input" + /> + + + + out of + {' '} + {owners.size + 1} + {' '} +owner(s) + + + + + + + + + + + )} + + + ) +} + +export default withStyles(styles)(ThresholdForm) diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js new file mode 100644 index 00000000..dfd2de15 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/style.js @@ -0,0 +1,45 @@ +// @flow +import { lg, md, sm } from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + headingText: { + fontSize: '16px', + }, + formContainer: { + padding: `${md} ${lg}`, + minHeight: '340px', + }, + ownersText: { + marginLeft: sm, + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + inputRow: { + position: 'relative', + }, + errorText: { + position: 'absolute', + bottom: '-25px', + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx new file mode 100644 index 00000000..835970f4 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.jsx @@ -0,0 +1,135 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import OpenInNew from '@material-ui/icons/OpenInNew' +import IconButton from '@material-ui/core/IconButton' +import Row from '~/components/layout/Row' +import Link from '~/components/layout/Link' +import Block from '~/components/layout/Block' +import GnoForm from '~/components/forms/GnoForm' +import Button from '~/components/layout/Button' +import Hairline from '~/components/layout/Hairline' +import Field from '~/components/forms/Field' +import TextField from '~/components/forms/TextField' +import Paragraph from '~/components/layout/Paragraph' +import Identicon from '~/components/Identicon' +import { getEtherScanLink } from '~/logic/wallets/getWeb3' +import type { Owner } from '~/routes/safe/store/models/owner' +import { composeValidators, required, minMaxLength } from '~/components/forms/validator' +import Modal from '~/components/Modal' +import { styles } from './style' +import { secondary } from '~/theme/variables' + +export const RENAME_OWNER_INPUT_TESTID = 'rename-owner-input' +export const SAVE_OWNER_CHANGES_BTN_TESTID = 'save-owner-changes-btn' + +const openIconStyle = { + height: '16px', + color: secondary, +} + +const stylesModal = () => ({ + smallerModalWindow: { + height: 'auto', + position: 'static', + }, +}) + +type Props = { + onClose: () => void, + classes: Object, + isOpen: boolean, + safeAddress: string, + ownerAddress: string, + owners: List, + network: string, + selectedOwnerName: string, + updateSafe: Function, +} + +const EditOwnerComponent = ({ + onClose, + isOpen, + classes, + safeAddress, + ownerAddress, + selectedOwnerName, + updateSafe, + owners, + network, +}: Props) => { + const handleSubmit = (values) => { + const ownerToUpdateIndex = owners.findIndex(o => o.address === ownerAddress) + const updatedOwners = owners.update(ownerToUpdateIndex, owner => owner.set('name', values.ownerName)) + + updateSafe({ address: safeAddress, owners: updatedOwners }) + onClose() + } + + return ( + + + + Edit owner name + + + + + + + + {() => ( + + + + + + + + + + {ownerAddress} + + + + + + + + + + + + + + )} + + + ) +} + +const EditOwnerModal = withStyles(styles)(EditOwnerComponent) + +export default EditOwnerModal diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/style.js b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/style.js new file mode 100644 index 00000000..3b0d113c --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/style.js @@ -0,0 +1,39 @@ +// @flow +import { + lg, md, sm, error, +} from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'space-between', + maxHeight: '75px', + boxSizing: 'border-box', + }, + manage: { + fontSize: '24px', + }, + container: { + padding: `${md} ${lg}`, + paddingBottom: '40px', + }, + close: { + height: '35px', + width: '35px', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + buttonEdit: { + color: '#fff', + backgroundColor: error, + }, + open: { + paddingLeft: sm, + width: 'auto', + '&:hover': { + cursor: 'pointer', + }, + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx new file mode 100644 index 00000000..5b7b8c9c --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell/index.jsx @@ -0,0 +1,21 @@ +// @flow +import * as React from 'react' +import Block from '~/components/layout/Block' +import Paragraph from '~/components/layout/Paragraph' +import Identicon from '~/components/Identicon' + +type Props = { + address: string, +} + +const OwnerAddressTableCell = (props: Props) => { + const { address } = props + return ( + + + {address} + + ) +} + +export default OwnerAddressTableCell diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.jsx new file mode 100644 index 00000000..9bd2c1c1 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/index.jsx @@ -0,0 +1,188 @@ +// @flow +import React, { useState, useEffect } from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import { SharedSnackbarConsumer } from '~/components/SharedSnackBar' +import Modal from '~/components/Modal' +import { type Owner, makeOwner } from '~/routes/safe/store/models/owner' +import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts' +import { getOwners } from '~/logic/safe/utils' +import CheckOwner from './screens/CheckOwner' +import ThresholdForm from './screens/ThresholdForm' +import ReviewRemoveOwner from './screens/Review' + +const styles = () => ({ + biggerModalWindow: { + width: '775px', + minHeight: '500px', + position: 'static', + }, +}) + +type Props = { + onClose: () => void, + classes: Object, + isOpen: boolean, + safeAddress: string, + safeName: string, + ownerAddress: string, + ownerName: string, + owners: List, + threshold: number, + network: string, + createTransaction: Function, + updateSafe: Function, +} +type ActiveScreen = 'checkOwner' | 'selectThreshold' | 'reviewRemoveOwner' + +const SENTINEL_ADDRESS = '0x0000000000000000000000000000000000000001' + +export const sendRemoveOwner = async ( + values: Object, + safeAddress: string, + ownerAddressToRemove: string, + ownerNameToRemove: string, + ownersOld: List, + openSnackbar: Function, + createTransaction: Function, + updateSafe: Function, +) => { + const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) + const safeOwners = await gnosisSafe.getOwners() + const index = safeOwners.findIndex(ownerAddress => ownerAddress.toLowerCase() === ownerAddressToRemove.toLowerCase()) + const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1] + const txData = gnosisSafe.contract.methods + .removeOwner(prevAddress, ownerAddressToRemove, values.threshold) + .encodeABI() + + const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar) + + let owners = [] + const storedOwners = await getOwners(safeAddress) + storedOwners.forEach((value, key) => owners.push(makeOwner({ address: key, name: value }))) + owners = List(owners).filter(o => o.address.toLowerCase() !== ownerAddressToRemove.toLowerCase()) + + if (txHash) { + updateSafe({ + address: safeAddress, + owners, + }) + } +} + +const RemoveOwner = ({ + onClose, + isOpen, + classes, + safeAddress, + safeName, + ownerAddress, + ownerName, + owners, + threshold, + network, + createTransaction, + updateSafe, +}: Props) => { + const [activeScreen, setActiveScreen] = useState('checkOwner') + const [values, setValues] = useState({}) + + useEffect( + () => () => { + setActiveScreen('checkOwner') + setValues({}) + }, + [isOpen], + ) + + const onClickBack = () => { + if (activeScreen === 'reviewRemoveOwner') { + setActiveScreen('selectThreshold') + } else if (activeScreen === 'selectThreshold') { + setActiveScreen('checkOwner') + } + } + + const ownerSubmitted = () => { + setActiveScreen('selectThreshold') + } + + const thresholdSubmitted = (newValues: Object) => { + values.threshold = newValues.threshold + setValues(values) + setActiveScreen('reviewRemoveOwner') + } + + return ( + + + {({ openSnackbar }) => { + const onRemoveOwner = () => { + onClose() + try { + sendRemoveOwner( + values, + safeAddress, + ownerAddress, + ownerName, + owners, + openSnackbar, + createTransaction, + updateSafe, + ) + } catch (error) { + // eslint-disable-next-line + console.log('Error while removing an owner ' + error) + } + } + + return ( + + + {activeScreen === 'checkOwner' && ( + + )} + {activeScreen === 'selectThreshold' && ( + + )} + {activeScreen === 'reviewRemoveOwner' && ( + + )} + + + ) + }} + + + ) +} + +export default withStyles(styles)(RemoveOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx new file mode 100644 index 00000000..a059bb08 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/index.jsx @@ -0,0 +1,107 @@ +// @flow +import React from 'react' +import classNames from 'classnames/bind' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import OpenInNew from '@material-ui/icons/OpenInNew' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import Link from '~/components/layout/Link' +import Identicon from '~/components/Identicon' +import { getEtherScanLink } from '~/logic/wallets/getWeb3' +import { styles } from './style' +import { secondary } from '~/theme/variables' + +export const REMOVE_OWNER_MODAL_NEXT_BTN_TESTID = 'remove-owner-next-btn' + +const openIconStyle = { + height: '16px', + color: secondary, +} + +type Props = { + onClose: () => void, + classes: Object, + ownerAddress: string, + ownerName: string, + network: string, + onSubmit: Function, +} + +const CheckOwner = ({ + classes, + onClose, + ownerAddress, + ownerName, + network, + onSubmit, +}: Props) => { + const handleSubmit = (values) => { + onSubmit(values) + } + + return ( + + + + Remove owner + + 1 of 3 + + + + + + + + + Review the owner you want to remove from the active Safe: + + + + + + + + + + {ownerName} + + + + {ownerAddress} + + + + + + + + + + + + + + + + ) +} + +export default withStyles(styles)(CheckOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/style.js b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/style.js new file mode 100644 index 00000000..d05cc023 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner/style.js @@ -0,0 +1,45 @@ +// @flow +import { lg, md, sm } from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + formContainer: { + padding: `${md} ${lg}`, + minHeight: '340px', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + name: { + textOverflow: 'ellipsis', + overflow: 'hidden', + }, + userName: { + whiteSpace: 'nowrap', + }, + owner: { + alignItems: 'center', + }, + user: { + justifyContent: 'left', + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.jsx new file mode 100644 index 00000000..f7e2d63e --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/index.jsx @@ -0,0 +1,194 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import classNames from 'classnames' +import { withStyles } from '@material-ui/core/styles' +import OpenInNew from '@material-ui/icons/OpenInNew' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import Identicon from '~/components/Identicon' +import Link from '~/components/layout/Link' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import type { Owner } from '~/routes/safe/store/models/owner' +import { getEtherScanLink } from '~/logic/wallets/getWeb3' +import { secondary } from '~/theme/variables' +import { styles } from './style' + +export const REMOVE_OWNER_REVIEW_BTN_TESTID = 'remove-owner-review-btn' + +const openIconStyle = { + height: '16px', + color: secondary, +} + +type Props = { + onClose: () => void, + classes: Object, + safeName: string, + owners: List, + network: string, + values: Object, + ownerAddress: string, + ownerName: string, + onClickBack: Function, + onSubmit: Function, +} + +const ReviewRemoveOwner = ({ + classes, + onClose, + safeName, + owners, + network, + values, + ownerAddress, + ownerName, + onClickBack, + onSubmit, +}: Props) => { + const handleSubmit = () => { + onSubmit() + } + + return ( + + + + Remove owner + + 3 of 3 + + + + + + + + + + + + Details + + + + + Safe name + + + {safeName} + + + + + Any transaction requires the confirmation of: + + + {values.threshold} + {' '} + out of + {' '} + {owners.size - 1} + {' '} + owner(s) + + + + + + + + {owners.size - 1} + {' '} + Safe owner(s) + + + + {owners.map( + owner => owner.address !== ownerAddress && ( + + + + + + + + + {owner.name} + + + + {owner.address} + + + + + + + + + + + ), + )} + + + REMOVING OWNER ↓ + + + + + + + + + + + {ownerName} + + + + {ownerAddress} + + + + + + + + + + + + + + + + + + + ) +} + +export default withStyles(styles)(ReviewRemoveOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.js b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.js new file mode 100644 index 00000000..bbab6aa3 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review/style.js @@ -0,0 +1,78 @@ +// @flow +import { + lg, sm, border, background, +} from '~/theme/variables' + +export const styles = () => ({ + root: { + height: '372px', + }, + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + info: { + backgroundColor: background, + padding: sm, + justifyContent: 'center', + textAlign: 'center', + flexDirection: 'column', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + details: { + padding: lg, + borderRight: `solid 1px ${border}`, + height: '100%', + }, + owners: { + overflow: 'auto', + height: '100%', + }, + ownersTitle: { + padding: lg, + }, + owner: { + padding: sm, + alignItems: 'center', + }, + name: { + textOverflow: 'ellipsis', + overflow: 'hidden', + }, + userName: { + whiteSpace: 'nowrap', + }, + selectedOwner: { + padding: sm, + alignItems: 'center', + backgroundColor: '#ffe6ea', + }, + user: { + justifyContent: 'left', + }, + open: { + paddingLeft: sm, + width: 'auto', + '&:hover': { + cursor: 'pointer', + }, + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.jsx new file mode 100644 index 00000000..56f118f3 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/index.jsx @@ -0,0 +1,130 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import MenuItem from '@material-ui/core/MenuItem' +import IconButton from '@material-ui/core/IconButton' +import SelectField from '~/components/forms/SelectField' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import GnoForm from '~/components/forms/GnoForm' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import Field from '~/components/forms/Field' +import type { Owner } from '~/routes/safe/store/models/owner' +import { + composeValidators, required, minValue, maxValue, mustBeInteger, +} from '~/components/forms/validator' +import { styles } from './style' + +export const REMOVE_OWNER_THRESHOLD_NEXT_BTN_TESTID = 'remove-owner-threshold-next-btn' + +type Props = { + onClose: () => void, + classes: Object, + owners: List, + threshold: number, + onClickBack: Function, + onSubmit: Function, +} + +const ThresholdForm = ({ + classes, onClose, owners, threshold, onClickBack, onSubmit, +}: Props) => { + const handleSubmit = (values) => { + onSubmit(values) + } + const defaultThreshold = threshold > 1 ? threshold - 1 : threshold + + return ( + + + + Remove owner + + 2 of 3 + + + + + + + {() => { + const numOptions = owners.size > 1 ? owners.size - 1 : 1 + + return ( + + + + + Set the required owner confirmations: + + + + + Any transaction over any daily limit requires the confirmation of: + + + + + ( + + + {[...Array(Number(numOptions))].map((x, index) => ( + + {index + 1} + + ))} + + {props.meta.error && props.meta.touched && ( + + {props.meta.error} + + )} + + )} + validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(numOptions))} + data-testid="threshold-select-input" + /> + + + + out of + {' '} + {owners.size - 1} + {' '} +owner(s) + + + + + + + + + + + ) + }} + + + ) +} + +export default withStyles(styles)(ThresholdForm) diff --git a/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/style.js b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/style.js new file mode 100644 index 00000000..dfd2de15 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm/style.js @@ -0,0 +1,45 @@ +// @flow +import { lg, md, sm } from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + headingText: { + fontSize: '16px', + }, + formContainer: { + padding: `${md} ${lg}`, + minHeight: '340px', + }, + ownersText: { + marginLeft: sm, + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + inputRow: { + position: 'relative', + }, + errorText: { + position: 'absolute', + bottom: '-25px', + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.jsx new file mode 100644 index 00000000..33b676e2 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/index.jsx @@ -0,0 +1,178 @@ +// @flow +import React, { useState, useEffect } from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import { SharedSnackbarConsumer } from '~/components/SharedSnackBar' +import Modal from '~/components/Modal' +import { type Owner, makeOwner } from '~/routes/safe/store/models/owner' +import { getOwners } from '~/logic/safe/utils' +import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts' +import OwnerForm from './screens/OwnerForm' +import ReviewReplaceOwner from './screens/Review' + +const styles = () => ({ + biggerModalWindow: { + width: '775px', + minHeight: '500px', + position: 'static', + }, +}) + +type Props = { + onClose: () => void, + classes: Object, + isOpen: boolean, + safeAddress: string, + safeName: string, + ownerAddress: string, + ownerName: string, + owners: List, + network: string, + threshold: string, + createTransaction: Function, + updateSafe: Function, +} +type ActiveScreen = 'checkOwner' | 'reviewReplaceOwner' + +const SENTINEL_ADDRESS = '0x0000000000000000000000000000000000000001' + +export const sendReplaceOwner = async ( + values: Object, + safeAddress: string, + ownerAddressToRemove: string, + ownerNameToRemove: string, + ownersOld: List, + openSnackbar: Function, + createTransaction: Function, + updateSafe: Function, +) => { + const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress) + const safeOwners = await gnosisSafe.getOwners() + const index = safeOwners.findIndex(ownerAddress => ownerAddress.toLowerCase() === ownerAddressToRemove.toLowerCase()) + const prevAddress = index === 0 ? SENTINEL_ADDRESS : safeOwners[index - 1] + const txData = gnosisSafe.contract.methods + .swapOwner(prevAddress, ownerAddressToRemove, values.ownerAddress) + .encodeABI() + + const txHash = await createTransaction(safeAddress, safeAddress, 0, txData, openSnackbar) + + let owners = [] + const storedOwners = await getOwners(safeAddress) + storedOwners.forEach((value, key) => owners.push(makeOwner({ + address: key, + name: (values.ownerAddress.toLowerCase() === key.toLowerCase()) ? values.ownerName : value, + }))) + const newOwnerIndex = List(owners).findIndex(o => o.address.toLowerCase() === values.ownerAddress.toLowerCase()) + if (newOwnerIndex < 0) { + owners.push(makeOwner({ address: values.ownerAddress, name: values.ownerName })) + } + owners = List(owners).filter(o => o.address.toLowerCase() !== ownerAddressToRemove.toLowerCase()) + + if (txHash) { + updateSafe({ + address: safeAddress, + owners, + }) + } +} + +const ReplaceOwner = ({ + onClose, + isOpen, + classes, + safeAddress, + safeName, + ownerAddress, + ownerName, + owners, + network, + threshold, + createTransaction, + updateSafe, +}: Props) => { + const [activeScreen, setActiveScreen] = useState('checkOwner') + const [values, setValues] = useState({}) + + useEffect( + () => () => { + setActiveScreen('checkOwner') + setValues({}) + }, + [isOpen], + ) + + const onClickBack = () => setActiveScreen('checkOwner') + + const ownerSubmitted = (newValues: Object) => { + values.ownerName = newValues.ownerName + values.ownerAddress = newValues.ownerAddress + setValues(values) + setActiveScreen('reviewReplaceOwner') + } + + return ( + + + {({ openSnackbar }) => { + const onReplaceOwner = () => { + onClose() + try { + sendReplaceOwner( + values, + safeAddress, + ownerAddress, + ownerName, + owners, + openSnackbar, + createTransaction, + updateSafe, + ) + } catch (error) { + // eslint-disable-next-line + console.log('Error while removing an owner ' + error) + } + } + + return ( + + + {activeScreen === 'checkOwner' && ( + + )} + {activeScreen === 'reviewReplaceOwner' && ( + + )} + + + ) + }} + + + ) +} + +export default withStyles(styles)(ReplaceOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx new file mode 100644 index 00000000..861ec813 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx @@ -0,0 +1,159 @@ +// @flow +import React from 'react' +import classNames from 'classnames/bind' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import OpenInNew from '@material-ui/icons/OpenInNew' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import GnoForm from '~/components/forms/GnoForm' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import Field from '~/components/forms/Field' +import TextField from '~/components/forms/TextField' +import Identicon from '~/components/Identicon' +import Link from '~/components/layout/Link' +import { getEtherScanLink } from '~/logic/wallets/getWeb3' +import { type Owner } from '~/routes/safe/store/models/owner' +import { + composeValidators, + required, + mustBeEthereumAddress, + minMaxLength, + uniqueAddress, +} from '~/components/forms/validator' +import { styles } from './style' +import { secondary } from '~/theme/variables' + +export const REPLACE_OWNER_NAME_INPUT_TESTID = 'replace-owner-name-input' +export const REPLACE_OWNER_ADDRESS_INPUT_TESTID = 'replace-owner-address-testid' +export const REPLACE_OWNER_NEXT_BTN_TESTID = 'replace-owner-next-btn' + +const openIconStyle = { + height: '16px', + color: secondary, +} + +type Props = { + onClose: () => void, + classes: Object, + ownerAddress: string, + ownerName: string, + network: string, + onSubmit: Function, + owners: List, +} + +const OwnerForm = ({ + classes, onClose, ownerAddress, ownerName, network, onSubmit, owners, +}: Props) => { + const handleSubmit = (values) => { + onSubmit(values) + } + const ownerDoesntExist = uniqueAddress(owners.map(o => o.address)) + + return ( + + + + Replace owner + + 1 of 2 + + + + + + + {() => ( + + + + + Review the owner you want to replace from the active Safe. Then specify the new owner you want to + replace it with: + + + + Current owner + + + + + + + + + {ownerName} + + + + {ownerAddress} + + + + + + + + + + New owner + + + + + + + + + + + + + + + + + + + )} + + + ) +} + +export default withStyles(styles)(OwnerForm) diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js new file mode 100644 index 00000000..54952dc1 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/style.js @@ -0,0 +1,44 @@ +// @flow +import { lg, md, sm } from '~/theme/variables' + +export const styles = () => ({ + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + formContainer: { + padding: `${md} ${lg}`, + minHeight: '340px', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + owner: { + alignItems: 'center', + }, + user: { + justifyContent: 'left', + }, + userName: { + whiteSpace: 'nowrap', + }, + name: { + marginRight: `${sm}`, + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx new file mode 100644 index 00000000..8c92dd7f --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx @@ -0,0 +1,222 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import classNames from 'classnames' +import { withStyles } from '@material-ui/core/styles' +import OpenInNew from '@material-ui/icons/OpenInNew' +import Close from '@material-ui/icons/Close' +import IconButton from '@material-ui/core/IconButton' +import Identicon from '~/components/Identicon' +import Link from '~/components/layout/Link' +import Paragraph from '~/components/layout/Paragraph' +import Row from '~/components/layout/Row' +import Col from '~/components/layout/Col' +import Button from '~/components/layout/Button' +import Block from '~/components/layout/Block' +import Hairline from '~/components/layout/Hairline' +import type { Owner } from '~/routes/safe/store/models/owner' +import { getEtherScanLink } from '~/logic/wallets/getWeb3' +import { secondary } from '~/theme/variables' +import { styles } from './style' + +export const REPLACE_OWNER_SUBMIT_BTN_TESTID = 'replace-owner-submit-btn' + +const openIconStyle = { + height: '16px', + color: secondary, +} + +type Props = { + onClose: () => void, + classes: Object, + safeName: string, + owners: List, + network: string, + values: Object, + ownerAddress: string, + ownerName: string, + onClickBack: Function, + onSubmit: Function, + threshold: string, +} + +const ReviewRemoveOwner = ({ + classes, + onClose, + safeName, + owners, + network, + values, + ownerAddress, + ownerName, + onClickBack, + threshold, + onSubmit, +}: Props) => { + const handleSubmit = () => { + onSubmit() + } + + return ( + + + + Replace owner + + 2 of 2 + + + + + + + + + + + + Details + + + + + Safe name + + + {safeName} + + + + + Any transaction requires the confirmation of: + + + {threshold} + {' '} + out of + {' '} + {owners.size} + {' '} + owner(s) + + + + + + + + {owners.size} + {' '} + Safe owner(s) + + + + {owners.map( + owner => owner.address !== ownerAddress && ( + + + + + + + + + {owner.name} + + + + {owner.address} + + + + + + + + + + + ), + )} + + + REMOVING OWNER ↓ + + + + + + + + + + + {ownerName} + + + + {ownerAddress} + + + + + + + + + + + ADDING NEW OWNER ↓ + + + + + + + + + + + {values.ownerName} + + + + {values.ownerAddress} + + + + + + + + + + + + + + + + + + + ) +} + +export default withStyles(styles)(ReviewRemoveOwner) diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js new file mode 100644 index 00000000..24228d7d --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/style.js @@ -0,0 +1,83 @@ +// @flow +import { + lg, sm, border, background, +} from '~/theme/variables' + +export const styles = () => ({ + root: { + height: '372px', + }, + heading: { + padding: `${sm} ${lg}`, + justifyContent: 'flex-start', + boxSizing: 'border-box', + maxHeight: '75px', + }, + annotation: { + letterSpacing: '-1px', + color: '#a2a8ba', + marginRight: 'auto', + marginLeft: '20px', + }, + manage: { + fontSize: '24px', + }, + closeIcon: { + height: '35px', + width: '35px', + }, + info: { + backgroundColor: background, + padding: sm, + justifyContent: 'center', + textAlign: 'center', + flexDirection: 'column', + }, + buttonRow: { + height: '84px', + justifyContent: 'center', + }, + details: { + padding: lg, + borderRight: `solid 1px ${border}`, + height: '100%', + }, + owners: { + overflow: 'auto', + height: '100%', + }, + ownersTitle: { + padding: lg, + }, + owner: { + padding: sm, + alignItems: 'center', + }, + name: { + textOverflow: 'ellipsis', + overflow: 'hidden', + }, + userName: { + whiteSpace: 'nowrap', + }, + selectedOwnerRemoved: { + padding: sm, + alignItems: 'center', + backgroundColor: '#ffe6ea', + }, + selectedOwnerAdded: { + padding: sm, + alignItems: 'center', + backgroundColor: '#fff3e2', + }, + user: { + justifyContent: 'left', + }, + open: { + paddingLeft: sm, + width: 'auto', + '&:hover': { + cursor: 'pointer', + }, + }, +}) diff --git a/src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg b/src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg new file mode 100644 index 00000000..b5b1c3b4 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/assets/icons/rename-owner.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg b/src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg new file mode 100644 index 00000000..1fd14cd9 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/assets/icons/replace-owner.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/Settings/ManageOwners/dataFetcher.js b/src/routes/safe/components/Settings/ManageOwners/dataFetcher.js new file mode 100644 index 00000000..9575d735 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/dataFetcher.js @@ -0,0 +1,56 @@ +// @flow +import { List } from 'immutable' +import type { Owner } from '~/routes/safe/store/models/owner' +import { type SortRow } from '~/components/Table/sorting' +import { type Column } from '~/components/Table/TableHead' + +export const OWNERS_TABLE_NAME_ID = 'name' +export const OWNERS_TABLE_ADDRESS_ID = 'address' +export const OWNERS_TABLE_ACTIONS_ID = 'actions' + +type OwnerData = { + name: string, + address: string, +} + +export type OwnerRow = SortRow + +export const getOwnerData = (owners: List): List => { + const rows = owners.map((owner: Owner) => ({ + [OWNERS_TABLE_NAME_ID]: owner.name, + [OWNERS_TABLE_ADDRESS_ID]: owner.address, + })) + + return rows +} + +export const generateColumns = () => { + const nameColumn: Column = { + id: OWNERS_TABLE_NAME_ID, + order: false, + disablePadding: false, + label: 'Name', + width: 150, + custom: false, + align: 'left', + } + + const addressColumn: Column = { + id: OWNERS_TABLE_ADDRESS_ID, + order: false, + disablePadding: false, + label: 'Address', + custom: false, + align: 'left', + } + + const actionsColumn: Column = { + id: OWNERS_TABLE_ACTIONS_ID, + order: false, + disablePadding: false, + label: '', + custom: true, + } + + return List([nameColumn, addressColumn, actionsColumn]) +} diff --git a/src/routes/safe/components/Settings/ManageOwners/index.jsx b/src/routes/safe/components/Settings/ManageOwners/index.jsx new file mode 100644 index 00000000..51222476 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/index.jsx @@ -0,0 +1,259 @@ +// @flow +import React from 'react' +import { List } from 'immutable' +import { withStyles } from '@material-ui/core/styles' +import TableRow from '@material-ui/core/TableRow' +import TableCell from '@material-ui/core/TableCell' +import Block from '~/components/layout/Block' +import Col from '~/components/layout/Col' +import Table from '~/components/Table' +import { type Column, cellWidth } from '~/components/Table/TableHead' +import Row from '~/components/layout/Row' +import Heading from '~/components/layout/Heading' +import Hairline from '~/components/layout/Hairline' +import Button from '~/components/layout/Button' +import Img from '~/components/layout/Img' +import AddOwnerModal from './AddOwnerModal' +import RemoveOwnerModal from './RemoveOwnerModal' +import ReplaceOwnerModal from './ReplaceOwnerModal' +import EditOwnerModal from './EditOwnerModal' +import OwnerAddressTableCell from './OwnerAddressTableCell' +import type { Owner } from '~/routes/safe/store/models/owner' +import { + getOwnerData, generateColumns, OWNERS_TABLE_NAME_ID, OWNERS_TABLE_ADDRESS_ID, type OwnerRow, +} from './dataFetcher' +import { lg, sm, boldFont } from '~/theme/variables' +import { styles } from './style' +import ReplaceOwnerIcon from './assets/icons/replace-owner.svg' +import RenameOwnerIcon from './assets/icons/rename-owner.svg' +import RemoveOwnerIcon from '../assets/icons/bin.svg' + +export const RENAME_OWNER_BTN_TESTID = 'rename-owner-btn' +export const REMOVE_OWNER_BTN_TESTID = 'remove-owner-btn' +export const ADD_OWNER_BTN_TESTID = 'add-owner-btn' +export const REPLACE_OWNER_BTN_TESTID = 'replace-owner-btn' +export const OWNERS_ROW_TESTID = 'owners-row' + +const controlsStyle = { + backgroundColor: 'white', + padding: sm, +} + +const addOwnerButtonStyle = { + marginRight: sm, + fontWeight: boldFont, +} + +const title = { + padding: lg, +} + +type Props = { + classes: Object, + safeAddress: string, + safeName: string, + owners: List, + network: string, + threshold: number, + userAddress: string, + createTransaction: Function, + updateSafe: Function, + granted: boolean, +} + +type State = { + selectedOwnerAddress?: string, + selectedOwnerName?: string, + showAddOwner: boolean, + showRemoveOwner: boolean, + showReplaceOwner: boolean, + showEditOwner: boolean, +} + +type Action = 'AddOwner' | 'EditOwner' | 'ReplaceOwner' | 'RemoveOwner' + +class ManageOwners extends React.Component { + state = { + selectedOwnerAddress: undefined, + selectedOwnerName: undefined, + showAddOwner: false, + showRemoveOwner: false, + showReplaceOwner: false, + showEditOwner: false, + } + + onShow = (action: Action, row?: Object) => () => { + this.setState({ + [`show${action}`]: true, + selectedOwnerAddress: row && row.address, + selectedOwnerName: row && row.name, + }) + } + + onHide = (action: Action) => () => { + this.setState({ + [`show${action}`]: false, + selectedOwnerAddress: undefined, + selectedOwnerName: undefined, + }) + } + + render() { + const { + classes, + safeAddress, + safeName, + owners, + threshold, + network, + userAddress, + createTransaction, + updateSafe, + granted, + } = this.props + const { + showAddOwner, + showRemoveOwner, + showReplaceOwner, + showEditOwner, + selectedOwnerName, + selectedOwnerAddress, + } = this.state + + const columns = generateColumns() + const autoColumns = columns.filter(c => !c.custom) + const ownerData = getOwnerData(owners) + + return ( + + + Manage Safe Owners + + {(sortedData: Array) => sortedData.map((row: any, index: number) => ( + + {autoColumns.map((column: Column) => ( + + {column.id === OWNERS_TABLE_ADDRESS_ID ? ( + + ) : ( + row[column.id] + )} + + ))} + + {granted && ( + + Edit owner + Replace owner + {ownerData.size > 1 && ( + Remove owner + )} + + )} + + + )) + } +
+ + {granted && ( + + + + + + + + + )} + + + + + + ) + } +} + +export default withStyles(styles)(ManageOwners) diff --git a/src/routes/safe/components/Settings/ManageOwners/style.js b/src/routes/safe/components/Settings/ManageOwners/style.js new file mode 100644 index 00000000..161d71f9 --- /dev/null +++ b/src/routes/safe/components/Settings/ManageOwners/style.js @@ -0,0 +1,31 @@ +// @flow +import { lg } from '~/theme/variables' + +export const styles = () => ({ + formContainer: { + minHeight: '369px', + }, + hide: { + '&:hover': { + backgroundColor: '#fff3e2', + }, + '&:hover $actions': { + visibility: 'initial', + }, + }, + actions: { + justifyContent: 'flex-end', + visibility: 'hidden', + }, + editOwnerIcon: { + cursor: 'pointer', + }, + replaceOwnerIcon: { + marginLeft: lg, + cursor: 'pointer', + }, + removeOwnerIcon: { + marginLeft: lg, + cursor: 'pointer', + }, +}) diff --git a/src/routes/safe/components/Settings/actions.js b/src/routes/safe/components/Settings/actions.js new file mode 100644 index 00000000..0f1aae07 --- /dev/null +++ b/src/routes/safe/components/Settings/actions.js @@ -0,0 +1,10 @@ +// @flow +import updateSafeName from '~/routes/safe/store/actions/updateSafeName' + +export type Actions = { + updateSafeName: Function, +} + +export default { + updateSafeName, +} diff --git a/src/routes/safe/components/Settings/assets/icons/bin.svg b/src/routes/safe/components/Settings/assets/icons/bin.svg new file mode 100644 index 00000000..f8fe7071 --- /dev/null +++ b/src/routes/safe/components/Settings/assets/icons/bin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/safe/components/Settings/index.jsx b/src/routes/safe/components/Settings/index.jsx index ab8d38d9..d3b3df1d 100644 --- a/src/routes/safe/components/Settings/index.jsx +++ b/src/routes/safe/components/Settings/index.jsx @@ -2,24 +2,32 @@ import * as React from 'react' import cn from 'classnames' import { List } from 'immutable' +import { connect } from 'react-redux' import { withStyles } from '@material-ui/core/styles' import Block from '~/components/layout/Block' import Col from '~/components/layout/Col' import Row from '~/components/layout/Row' +import Span from '~/components/layout/Span' +import Img from '~/components/layout/Img' import RemoveSafeModal from './RemoveSafeModal' import Paragraph from '~/components/layout/Paragraph' import Hairline from '~/components/layout/Hairline' import { type Owner } from '~/routes/safe/store/models/owner' import ChangeSafeName from './ChangeSafeName' import ThresholdSettings from './ThresholdSettings' +import ManageOwners from './ManageOwners' +import actions, { type Actions } from './actions' import { styles } from './style' +import RemoveSafeIcon from './assets/icons/bin.svg' + +export const OWNERS_SETTINGS_TAB_TESTID = 'owner-settings-tab' type State = { showRemoveSafe: boolean, menuOptionIndex: number, } -type Props = { +type Props = Actions & { classes: Object, granted: boolean, etherScanLink: string, @@ -27,8 +35,10 @@ type Props = { safeName: string, owners: List, threshold: number, + network: string, createTransaction: Function, updateSafe: Function, + userAddress: string, } type Action = 'RemoveSafe' @@ -59,10 +69,12 @@ class Settings extends React.Component { etherScanLink, safeAddress, safeName, - updateSafe, - owners, threshold, + owners, + network, + userAddress, createTransaction, + updateSafe, } = this.props return ( @@ -74,8 +86,11 @@ class Settings extends React.Component { - - Remove Safe + + + Remove Safe + + Trash Icon { Safe name + + Owners ( + {owners.size} +) + + {granted && ( - - Owners - - { Required confirmations - - Modules - - )} @@ -128,7 +139,19 @@ class Settings extends React.Component { {menuOptionIndex === 1 && ( )} - {granted && menuOptionIndex === 2 &&

To be done

} + {menuOptionIndex === 2 && ( + + )} {granted && menuOptionIndex === 3 && ( { safeAddress={safeAddress} /> )} - {granted && menuOptionIndex === 4 &&

To be done

} @@ -146,4 +168,9 @@ class Settings extends React.Component { } } -export default withStyles(styles)(Settings) +const settingsComponent = withStyles(styles)(Settings) + +export default connect( + undefined, + actions, +)(settingsComponent) diff --git a/src/routes/safe/components/Settings/style.js b/src/routes/safe/components/Settings/style.js index c6cc3304..c7b24c88 100644 --- a/src/routes/safe/components/Settings/style.js +++ b/src/routes/safe/components/Settings/style.js @@ -39,4 +39,14 @@ export const styles = () => ({ cursor: 'pointer', }, }, + removeSafeText: { + height: '16px', + lineHeight: '16px', + paddingRight: sm, + float: 'left', + }, + removeSafeIcon: { + height: '16px', + cursor: 'pointer', + }, }) diff --git a/src/routes/safe/container/selector.js b/src/routes/safe/container/selector.js index e29eee1f..68debdaa 100644 --- a/src/routes/safe/container/selector.js +++ b/src/routes/safe/container/selector.js @@ -64,7 +64,7 @@ export const grantedSelector: Selector = crea return false } - return owners.find((owner: Owner) => sameAddress(owner.get('address'), userAccount)) !== undefined + return owners.find((owner: Owner) => sameAddress(owner.address, userAccount)) !== undefined }, ) diff --git a/src/routes/safe/store/actions/updateSafeName.js b/src/routes/safe/store/actions/updateSafeName.js new file mode 100644 index 00000000..131201f3 --- /dev/null +++ b/src/routes/safe/store/actions/updateSafeName.js @@ -0,0 +1,10 @@ +// @flow +import type { Dispatch as ReduxDispatch } from 'redux' +import { type GlobalState } from '~/store' +import updateSafe from './updateSafe' + +const updateSafeName = (safeAddress: string, safeName: string) => async (dispatch: ReduxDispatch) => { + dispatch(updateSafe({ address: safeAddress, name: safeName })) +} + +export default updateSafeName diff --git a/src/routes/safe/store/middleware/safeStorage.js b/src/routes/safe/store/middleware/safeStorage.js index 85a2e177..f6dc81aa 100644 --- a/src/routes/safe/store/middleware/safeStorage.js +++ b/src/routes/safe/store/middleware/safeStorage.js @@ -41,6 +41,12 @@ const safeStorageMware = (store: Store) => (next: Function) => asyn if (action.type === ADD_SAFE) { const { safe } = action.payload setOwners(safe.address, safe.owners) + } else if (action.type === UPDATE_SAFE) { + const { address, owners } = action.payload + + if (address && owners) { + setOwners(address, owners) + } } else if (action.type === REMOVE_SAFE) { const safeAddress = action.payload removeOwners(safeAddress) diff --git a/src/test/builder/safe.dom.utils.js b/src/test/builder/safe.dom.utils.js index 585cf173..ad5a195a 100644 --- a/src/test/builder/safe.dom.utils.js +++ b/src/test/builder/safe.dom.utils.js @@ -3,14 +3,13 @@ import * as React from 'react' import TestUtils from 'react-dom/test-utils' import { type Store } from 'redux' import { Provider } from 'react-redux' -import { ConnectedRouter } from 'connected-react-router' import { render } from '@testing-library/react' +import { ConnectedRouter } from 'connected-react-router' import PageFrame from '~/components/layout/PageFrame' import ListItemText from '~/components/List/ListItemText/index' -import { SEE_MULTISIG_BUTTON_TEXT } from '~/routes/safe/components/Safe/MultisigTx' import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions' import { sleep } from '~/utils/timer' -import { history } from '~/store' +import { history, type GlobalState } from '~/store' import AppRoutes from '~/routes' import { SAFELIST_ADDRESS } from '~/routes/routes' import { EMPTY_DATA } from '~/logic/wallets/ethTransactions' @@ -23,16 +22,6 @@ export const EDIT_INDEX = 4 export const WITHDRAW_INDEX = 5 export const LIST_TXS_INDEX = 6 -export const listTxsClickingOn = async (store: Store, seeTxsButton: Element, safeAddress: string) => { - await store.dispatch(fetchTransactions(safeAddress)) - await sleep(1200) - expect(seeTxsButton.getElementsByTagName('span')[0].innerHTML).toEqual(SEE_MULTISIG_BUTTON_TEXT) - TestUtils.Simulate.click(seeTxsButton) - - // give some time to expand the transactions - await sleep(800) -} - export const checkMinedTx = (Transaction: React.Component, name: string) => { const paragraphs = TestUtils.scryRenderedDOMComponentsWithTag(Transaction, 'p') diff --git a/src/test/safe.dom.settings.test.js b/src/test/safe.dom.settings.name.test.js similarity index 96% rename from src/test/safe.dom.settings.test.js rename to src/test/safe.dom.settings.name.test.js index c635e9d0..2cfd40b5 100644 --- a/src/test/safe.dom.settings.test.js +++ b/src/test/safe.dom.settings.name.test.js @@ -10,7 +10,7 @@ import { SAFE_NAME_INPUT_TESTID, SAFE_NAME_SUBMIT_BTN_TESTID } from '~/routes/sa afterEach(cleanup) -describe('DOM > Feature > Settings', () => { +describe('DOM > Feature > Settings - Name', () => { let store let safeAddress beforeEach(async () => { diff --git a/src/test/safe.dom.settings.owners.test.js b/src/test/safe.dom.settings.owners.test.js new file mode 100644 index 00000000..34619ff4 --- /dev/null +++ b/src/test/safe.dom.settings.owners.test.js @@ -0,0 +1,218 @@ +// @flow +import { fireEvent, cleanup } from '@testing-library/react' +import { aNewStore } from '~/store' +import { aMinedSafe } from '~/test/builder/safe.redux.builder' +import { renderSafeView } from '~/test/builder/safe.dom.utils' +import { sleep } from '~/utils/timer' +import 'jest-dom/extend-expect' +import { SETTINGS_TAB_BTN_TESTID } from '~/routes/safe/components/Layout' +import { OWNERS_SETTINGS_TAB_TESTID } from '~/routes/safe/components/Settings' +import { + RENAME_OWNER_BTN_TESTID, + OWNERS_ROW_TESTID, + REMOVE_OWNER_BTN_TESTID, + ADD_OWNER_BTN_TESTID, + REPLACE_OWNER_BTN_TESTID, +} from '~/routes/safe/components/Settings/ManageOwners' +import { + RENAME_OWNER_INPUT_TESTID, + SAVE_OWNER_CHANGES_BTN_TESTID, +} from '~/routes/safe/components/Settings/ManageOwners/EditOwnerModal' +import { REMOVE_OWNER_MODAL_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner' +import { REMOVE_OWNER_THRESHOLD_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm' +import { REMOVE_OWNER_REVIEW_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review' +import { ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm' +import { + ADD_OWNER_NAME_INPUT_TESTID, + ADD_OWNER_ADDRESS_INPUT_TESTID, + ADD_OWNER_NEXT_BTN_TESTID, +} from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm' +import { ADD_OWNER_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review' +import { + REPLACE_OWNER_NEXT_BTN_TESTID, + REPLACE_OWNER_NAME_INPUT_TESTID, + REPLACE_OWNER_ADDRESS_INPUT_TESTID, +} from '~/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm' +import { REPLACE_OWNER_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review' + +afterEach(cleanup) + +describe('DOM > Feature > Settings - Manage owners', () => { + let store + let safeAddress + beforeEach(async () => { + store = aNewStore() + safeAddress = await aMinedSafe(store) + }) + + it("Changes owner's name", async () => { + const NEW_OWNER_NAME = 'NEW OWNER NAME' + + const SafeDom = renderSafeView(store, safeAddress) + await sleep(1300) + + // Travel to settings + const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID) + fireEvent.click(settingsBtn) + await sleep(200) + + // click on owners settings + const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TESTID) + fireEvent.click(ownersSettingsBtn) + await sleep(200) + + // open rename owner modal + const renameOwnerBtn = SafeDom.getByTestId(RENAME_OWNER_BTN_TESTID) + fireEvent.click(renameOwnerBtn) + + // rename owner + const ownerNameInput = SafeDom.getByTestId(RENAME_OWNER_INPUT_TESTID) + const saveOwnerChangesBtn = SafeDom.getByTestId(SAVE_OWNER_CHANGES_BTN_TESTID) + fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } }) + fireEvent.click(saveOwnerChangesBtn) + await sleep(200) + + // check if the name updated + const ownerRow = SafeDom.getByTestId(OWNERS_ROW_TESTID) + expect(ownerRow).toHaveTextContent(NEW_OWNER_NAME) + }) + + it('Removes an owner', async () => { + const twoOwnersSafeAddress = await aMinedSafe(store, 2) + + const SafeDom = renderSafeView(store, twoOwnersSafeAddress) + await sleep(1300) + + // Travel to settings + const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID) + fireEvent.click(settingsBtn) + await sleep(200) + + // click on owners settings + const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TESTID) + fireEvent.click(ownersSettingsBtn) + await sleep(200) + + // check if there are 2 owners + let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID) + expect(ownerRows.length).toBe(2) + expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1') + expect(ownerRows[1]).toHaveTextContent('Adol 2 Eth Account0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0') + + // click remove owner btn which opens the modal + const removeOwnerBtn = SafeDom.getAllByTestId(REMOVE_OWNER_BTN_TESTID)[1] + fireEvent.click(removeOwnerBtn) + + // modal navigation + const nextBtnStep1 = SafeDom.getByTestId(REMOVE_OWNER_MODAL_NEXT_BTN_TESTID) + fireEvent.click(nextBtnStep1) + + const nextBtnStep2 = SafeDom.getByTestId(REMOVE_OWNER_THRESHOLD_NEXT_BTN_TESTID) + fireEvent.click(nextBtnStep2) + + const nextBtnStep3 = SafeDom.getByTestId(REMOVE_OWNER_REVIEW_BTN_TESTID) + fireEvent.click(nextBtnStep3) + await sleep(1300) + + // check if owner was removed + ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID) + expect(ownerRows.length).toBe(1) + expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1') + }) + + it('Adds a new owner', async () => { + const NEW_OWNER_NAME = 'I am a new owner' + const NEW_OWNER_ADDRESS = '0x0E329Fa8d6fCd1BA0cDA495431F1F7ca24F442c3' + + const SafeDom = renderSafeView(store, safeAddress) + await sleep(1300) + + // Travel to settings + const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID) + fireEvent.click(settingsBtn) + await sleep(200) + + // click on owners settings + const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TESTID) + fireEvent.click(ownersSettingsBtn) + await sleep(200) + + // check if there is 1 owner + let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID) + expect(ownerRows.length).toBe(1) + expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1') + + // click add owner btn + fireEvent.click(SafeDom.getByTestId(ADD_OWNER_BTN_TESTID)) + await sleep(200) + + // fill and travel add owner modal + const ownerNameInput = SafeDom.getByTestId(ADD_OWNER_NAME_INPUT_TESTID) + const ownerAddressInput = SafeDom.getByTestId(ADD_OWNER_ADDRESS_INPUT_TESTID) + const nextBtn = SafeDom.getByTestId(ADD_OWNER_NEXT_BTN_TESTID) + fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } }) + fireEvent.change(ownerAddressInput, { target: { value: NEW_OWNER_ADDRESS } }) + fireEvent.click(nextBtn) + await sleep(200) + + fireEvent.click(SafeDom.getByTestId(ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID)) + await sleep(200) + fireEvent.click(SafeDom.getByTestId(ADD_OWNER_SUBMIT_BTN_TESTID)) + await sleep(1000) + + // check if owner was added + ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID) + expect(ownerRows.length).toBe(2) + expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1') + expect(ownerRows[1]).toHaveTextContent(`${NEW_OWNER_NAME}${NEW_OWNER_ADDRESS}`) + }) + + it('Replaces an owner', async () => { + const NEW_OWNER_NAME = 'I replaced an old owner' + const NEW_OWNER_ADDRESS = '0x1dF62f291b2E969fB0849d99D9Ce41e2F137006e' + + const twoOwnersSafeAddress = await aMinedSafe(store, 2) + + const SafeDom = renderSafeView(store, twoOwnersSafeAddress) + await sleep(1300) + + // Travel to settings + const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID) + fireEvent.click(settingsBtn) + await sleep(200) + + // click on owners settings + const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TESTID) + fireEvent.click(ownersSettingsBtn) + await sleep(200) + + // check if there are 2 owners + let ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID) + expect(ownerRows.length).toBe(2) + expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1') + expect(ownerRows[1]).toHaveTextContent('Adol 2 Eth Account0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0') + + // click replace owner btn which opens the modal + const replaceOwnerBtn = SafeDom.getAllByTestId(REPLACE_OWNER_BTN_TESTID)[1] + fireEvent.click(replaceOwnerBtn) + + // fill and travel add owner modal + const ownerNameInput = SafeDom.getByTestId(REPLACE_OWNER_NAME_INPUT_TESTID) + const ownerAddressInput = SafeDom.getByTestId(REPLACE_OWNER_ADDRESS_INPUT_TESTID) + const nextBtn = SafeDom.getByTestId(REPLACE_OWNER_NEXT_BTN_TESTID) + fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } }) + fireEvent.change(ownerAddressInput, { target: { value: NEW_OWNER_ADDRESS } }) + fireEvent.click(nextBtn) + await sleep(200) + + const replaceSubmitBtn = SafeDom.getByTestId(REPLACE_OWNER_SUBMIT_BTN_TESTID) + fireEvent.click(replaceSubmitBtn) + await sleep(1000) + + // check if the owner was replaced + ownerRows = SafeDom.getAllByTestId(OWNERS_ROW_TESTID) + expect(ownerRows.length).toBe(2) + expect(ownerRows[0]).toHaveTextContent('Adol 1 Eth Account0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1') + expect(ownerRows[1]).toHaveTextContent(`${NEW_OWNER_NAME}${NEW_OWNER_ADDRESS}`) + }) +}) diff --git a/src/test/safe.dom.transactions.test.js b/src/test/safe.dom.transactions.test.js index ba93243c..cf6474da 100644 --- a/src/test/safe.dom.transactions.test.js +++ b/src/test/safe.dom.transactions.test.js @@ -3,15 +3,9 @@ // TBD describe('DOM > Feature > SAFE MULTISIG Transactions', () => { - it.only('mines correctly all multisig txs in a 1 owner & 1 threshold safe', async () => { + it.only('mines correctly all multisig txs in a 1 owner & 1 threshold safe', async () => {}) - }) + it.only('mines withdraw process correctly all multisig txs in a 2 owner & 2 threshold safe', async () => {}) - it.only('mines withdraw process correctly all multisig txs in a 2 owner & 2 threshold safe', async () => { - - }) - - it.only('approves and executes pending transactions', async () => { - - }) + it.only('approves and executes pending transactions', async () => {}) }) diff --git a/src/test/tokens.dom.adding.test.js b/src/test/tokens.dom.adding.test.js index a77c734a..0daf9b76 100644 --- a/src/test/tokens.dom.adding.test.js +++ b/src/test/tokens.dom.adding.test.js @@ -1,6 +1,6 @@ // @flow -import { getWeb3 } from '~/logic/wallets/getWeb3' import { fireEvent } from '@testing-library/react' +import { getWeb3 } from '~/logic/wallets/getWeb3' import { getFirstTokenContract } from '~/test/utils/tokenMovements' import { aNewStore } from '~/store' import { aMinedSafe } from '~/test/builder/safe.redux.builder' diff --git a/src/test/utils/DOMNavigation/tokens.js b/src/test/utils/DOMNavigation/tokens.js index 7ed1a422..698933fd 100644 --- a/src/test/utils/DOMNavigation/tokens.js +++ b/src/test/utils/DOMNavigation/tokens.js @@ -1,7 +1,10 @@ // @flow import { fireEvent } from '@testing-library/react' import { MANAGE_TOKENS_BUTTON_TEST_ID } from '~/routes/safe/components/Balances' -import { ADD_CUSTOM_TOKEN_BUTTON_TEST_ID, TOGGLE_TOKEN_TEST_ID } from '~/routes/safe/components/Balances/Tokens/screens/TokenList' +import { + ADD_CUSTOM_TOKEN_BUTTON_TEST_ID, + TOGGLE_TOKEN_TEST_ID, +} from '~/routes/safe/components/Balances/Tokens/screens/TokenList' import { MANAGE_TOKENS_MODAL_CLOSE_BUTTON_TEST_ID } from '~/routes/safe/components/Balances/Tokens' export const clickOnManageTokens = (dom: any): void => { diff --git a/src/test/utils/logTransactions.js b/src/test/utils/logTransactions.js index e76f197e..f73c4d2a 100644 --- a/src/test/utils/logTransactions.js +++ b/src/test/utils/logTransactions.js @@ -1,9 +1,9 @@ // @flow import React from 'react' -import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts' -import GnoStepper from '~/components/Stepper' import Stepper from '@material-ui/core/Stepper' import TestUtils from 'react-dom/test-utils' +import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts' +import GnoStepper from '~/components/Stepper' export const printOutApprove = async ( subject: string, @@ -38,7 +38,10 @@ type FinsihedTx = { finishedTransaction: boolean, } -export const whenExecuted = (SafeDom: React.Component, ParentComponent: React.ElementType): Promise => new Promise((resolve, reject) => { +export const whenExecuted = ( + SafeDom: React.Component, + ParentComponent: React.ElementType, +): Promise => new Promise((resolve, reject) => { let times = 0 const interval = setInterval(() => { if (times >= MAX_TIMES_EXECUTED) { diff --git a/src/test/utils/safeHelper.js b/src/test/utils/safeHelper.js index 6449ff9d..2e7c2b5b 100644 --- a/src/test/utils/safeHelper.js +++ b/src/test/utils/safeHelper.js @@ -1,7 +1,7 @@ // @flow +import { type Match } from 'react-router-dom' import { buildMatchPropsFrom } from '~/test/utils/buildReactRouterProps' import { safeSelector } from '~/routes/safe/store/selectors/index' -import { type Match } from 'react-router-dom' import { type GlobalState } from '~/store' import { type Safe } from '~/routes/safe/store/models/safe' diff --git a/src/test/utils/transactions/addOwner.helper.js b/src/test/utils/transactions/addOwner.helper.js deleted file mode 100644 index fe038f3d..00000000 --- a/src/test/utils/transactions/addOwner.helper.js +++ /dev/null @@ -1,53 +0,0 @@ -// @flow -import TestUtils from 'react-dom/test-utils' -import { sleep } from '~/utils/timer' -import { checkMinedTx, checkPendingTx } from '~/test/builder/safe.dom.utils' -import { whenExecuted } from '~/test/utils/logTransactions' -import AddOwner from '~/routes/safe/components/AddOwner' - -export const sendAddOwnerForm = async ( - SafeDom: React.Component, - addOwner: React.Component, - ownerName: string, - ownerAddress: string, - increase: boolean = false, -) => { - // load add multisig form component - TestUtils.Simulate.click(addOwner) - // give time to re-render it - await sleep(400) - - // fill the form - const inputs = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'input') - const nameInput = inputs[0] - const addressInput = inputs[1] - TestUtils.Simulate.change(nameInput, { target: { value: ownerName } }) - TestUtils.Simulate.change(addressInput, { target: { value: ownerAddress } }) - - if (increase) { - const increaseInput = inputs[2] - TestUtils.Simulate.change(increaseInput, { target: { value: 'true' } }) - } - - // $FlowFixMe - const form = TestUtils.findRenderedDOMComponentWithTag(SafeDom, 'form') - - // submit it - TestUtils.Simulate.submit(form) - TestUtils.Simulate.submit(form) - - return whenExecuted(SafeDom, AddOwner) -} - -export const checkMinedAddOwnerTx = (Transaction: React.Component, name: string) => { - checkMinedTx(Transaction, name) -} - -export const checkPendingAddOwnerTx = async ( - Transaction: React.Component, - safeThreshold: number, - name: string, - statusses: string[], -) => { - await checkPendingTx(Transaction, safeThreshold, name, statusses) -} diff --git a/src/test/utils/transactions/removeOwner.helper.js b/src/test/utils/transactions/removeOwner.helper.js deleted file mode 100644 index fd492ae9..00000000 --- a/src/test/utils/transactions/removeOwner.helper.js +++ /dev/null @@ -1,49 +0,0 @@ -// @flow -import * as React from 'react' -import TestUtils from 'react-dom/test-utils' -import { sleep } from '~/utils/timer' -import { checkMinedTx, EXPAND_OWNERS_INDEX, checkPendingTx } from '~/test/builder/safe.dom.utils' -import { filterMoveButtonsFrom } from '~/test/builder/safe.dom.builder' -import { whenExecuted } from '~/test/utils/logTransactions' -import RemoveOwner from '~/routes/safe/components/RemoveOwner' - -export const sendRemoveOwnerForm = async ( - SafeDom: React.Component, - expandOwners: React.Component, -) => { - // Expand owners - TestUtils.Simulate.click(expandOwners) - await sleep(400) - - // Get delete button user - const allButtons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button') - const buttons = filterMoveButtonsFrom(allButtons) - const removeUserButton = buttons[EXPAND_OWNERS_INDEX + 2] // + 2 one the Add and the next delete - expect(removeUserButton.getAttribute('aria-label')).toBe('Delete') - - // render form for deleting the user - TestUtils.Simulate.click(removeUserButton) - await sleep(400) - - // $FlowFixMe - const form = TestUtils.findRenderedDOMComponentWithTag(SafeDom, 'form') - - // submit it - TestUtils.Simulate.submit(form) - TestUtils.Simulate.submit(form) - - return whenExecuted(SafeDom, RemoveOwner) -} - -export const checkMinedRemoveOwnerTx = (Transaction: React.Component, name: string) => { - checkMinedTx(Transaction, name) -} - -export const checkPendingRemoveOwnerTx = async ( - Transaction: React.Component, - safeThreshold: number, - name: string, - statusses: string[], -) => { - await checkPendingTx(Transaction, safeThreshold, name, statusses) -}