status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

pull from dev

This commit is contained in:
Mikhail Mikheev 2019-06-26 17:38:01 +04:00
parent 905de7afab 3201cce218
commit 9001c52524
18 changed files with 816 additions and 19564 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
package.json
View File

@ -32,13 +32,13 @@
"dependencies": {
"@gnosis.pm/safe-contracts": "^1.0.0",
"@gnosis.pm/util-contracts": "2.0.1",
"@material-ui/core": "4.1.1",
"@material-ui/icons": "4.2.0",
"@material-ui/core": "4.1.3",
"@material-ui/icons": "4.2.1",
"@welldone-software/why-did-you-render": "3.2.1",
"axios": "0.19.0",
"bignumber.js": "9.0.0",
"connected-react-router": "^6.3.1",
"final-form": "4.15.0",
"final-form": "4.16.1",
"history": "^4.7.2",
"immortal-db": "^1.0.2",
"immutable": "^4.0.0-rc.9",
@ -47,7 +47,7 @@
"qrcode.react": "^0.9.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-final-form": "6.2.1",
"react-final-form": "6.3.0",
"react-final-form-listeners": "^1.0.2",
"react-hot-loader": "4.11.1",
"react-infinite-scroll-component": "^4.5.2",
@ -86,10 +86,11 @@
"@babel/preset-flow": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
"@sambego/storybook-state": "^1.0.7",
"@storybook/addon-actions": "5.1.8",
"@storybook/addon-knobs": "5.1.8",
"@storybook/addon-links": "5.1.8",
"@storybook/react": "5.1.8",
"@storybook/addon-actions": "5.1.9",
"@storybook/addon-knobs": "5.1.9",
"@storybook/addon-links": "5.1.9",
"@storybook/react": "5.1.9",
"@testing-library/react": "^8.0.1",
"autoprefixer": "9.6.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "10.0.2",
@ -103,15 +104,15 @@
"detect-port": "^1.2.2",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-flowtype": "3.10.3",
"eslint-plugin-import": "2.17.3",
"eslint-plugin-jest": "22.6.4",
"eslint-plugin-flowtype": "3.11.1",
"eslint-plugin-import": "2.18.0",
"eslint-plugin-jest": "22.7.1",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "7.13.0",
"eslint-plugin-react": "7.14.2",
"ethereumjs-abi": "^0.6.7",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "4.0.0",
"flow-bin": "0.101.0",
"flow-bin": "0.102.0",
"fs-extra": "8.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.4",
@ -128,13 +129,13 @@
"storybook-host": "^5.0.3",
"storybook-router": "^0.3.3",
"style-loader": "^0.23.1",
"truffle": "5.0.22",
"truffle-contract": "4.0.20",
"truffle-solidity-loader": "0.1.21",
"truffle": "5.0.24",
"truffle-contract": "4.0.21",
"truffle-solidity-loader": "0.1.23",
"uglifyjs-webpack-plugin": "2.1.3",
"webpack": "4.34.0",
"webpack": "4.35.0",
"webpack-bundle-analyzer": "3.3.2",
"webpack-cli": "3.3.4",
"webpack-cli": "3.3.5",
"webpack-dev-server": "3.7.2",
"webpack-manifest-plugin": "^2.0.0-rc.2"
}

5
readme.md
View File

@ -43,13 +43,12 @@ git clone https://github.com/gnosis/safe-contracts.git
cd safe-contracts
yarn
ganache-cli -l 7000000
npx truffle compile
npx truffle migrate
```
2. Compiling Token Contracts for the tests:
2. Migrate Token Contracts for the tests:
Inside `safe-react` directory
```
npx truffle compile
npx truffle migrate
```
3. Run the tests:
```

16
src/components/layout/Heading/index.jsx
View File

@ -6,7 +6,7 @@ import styles from './index.scss'
const cx = classNames.bind(styles)
type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4'
type Props = {
align?: 'left' | 'center' | 'right',
@ -15,24 +15,18 @@ type Props = {
tag: HeadingTag,
truncate?: boolean,
children: React.Node,
testId?: string,
}
class Heading extends React.PureComponent<Props> {
render() {
const {
align, tag, truncate, margin, color, children, ...props
align, tag, truncate, margin, color, children, testId, ...props
} = this.props
const className = cx(
'heading',
align,
tag,
margin ? capitalize(margin, 'margin') : undefined,
color,
{ truncate },
)
const className = cx('heading', align, tag, margin ? capitalize(margin, 'margin') : undefined, color, { truncate })
return React.createElement(tag, { ...props, className }, children)
return React.createElement(tag, { ...props, className, 'data-testid': testId || '' }, children)
}
}

157
src/routes/load/components/OwnerList/index.jsx
View File

@ -1,11 +1,11 @@
// @flow
import * as React from 'react'
import Block from '~/components/layout/Block'
import React, { useState, useEffect } from 'react'
import { withStyles } from '@material-ui/core/styles'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Block from '~/components/layout/Block'
import Field from '~/components/forms/Field'
import { required } from '~/components/forms/validator'
import TextField from '~/components/forms/TextField'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Identicon from '~/components/Identicon'
import OpenPaper from '~/components/Stepper/OpenPaper'
import Col from '~/components/layout/Col'
@ -78,10 +78,6 @@ type Props = LayoutProps & {
updateInitialProps: (initialValues: Object) => void,
}
type State = {
owners: Array<string>,
}
const calculateSafeValues = (owners: Array<string>, threshold: Number, values: Object) => {
const initialValues = { ...values }
for (let i = 0; i < owners.length; i += 1) {
@ -91,87 +87,80 @@ const calculateSafeValues = (owners: Array<string>, threshold: Number, values: O
return initialValues
}
class OwnerListComponent extends React.PureComponent<Props, State> {
state = {
owners: [],
}
const OwnerListComponent = (props: Props) => {
const [owners, setOwners] = useState<Array<string>>([])
const {
values, updateInitialProps, network, classes,
} = props
mounted = false
useEffect(() => {
let isCurrent = true
componentDidMount = async () => {
this.mounted = true
const { values, updateInitialProps } = this.props
const safeAddress = values[FIELD_LOAD_ADDRESS]
const fetchSafe = async () => {
const safeAddress = values[FIELD_LOAD_ADDRESS]
const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
const safeOwners = await gnosisSafe.getOwners()
const threshold = await gnosisSafe.getThreshold()
const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
const owners = await gnosisSafe.getOwners()
const threshold = await gnosisSafe.getThreshold()
const initialValues = calculateSafeValues(owners.sort(), threshold, values)
updateInitialProps(initialValues)
if (!owners) {
return
if (isCurrent && owners) {
const sortedOwners = safeOwners.sort()
const initialValues = calculateSafeValues(sortedOwners, threshold, values)
updateInitialProps(initialValues)
setOwners(sortedOwners)
}
}
if (this.mounted) {
this.setState(() => ({ owners: owners.sort() }))
fetchSafe()
return () => {
isCurrent = false
}
}
}, [])
componentWillUnmount() {
this.mounted = false
}
render() {
const { network, classes } = this.props
const { owners } = this.state
return (
<React.Fragment>
<Block className={classes.title}>
<Paragraph noMargin size="md" color="primary">
{`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
</Paragraph>
</Block>
<Hairline />
<Row className={classes.header}>
<Col xs={4}>NAME</Col>
<Col xs={8}>ADDRESS</Col>
</Row>
<Hairline />
<Block margin="md" padding="md">
{owners.map((x, index) => (
<Row key={owners[index].address} className={classes.owner}>
<Col xs={4}>
<Field
className={classes.name}
name={getOwnerNameBy(index)}
component={TextField}
type="text"
validate={required}
defaultValue={`Owner #${index + 1}`}
placeholder="Owner Name*"
text="Owner Name"
/>
</Col>
<Col xs={7}>
<Row className={classes.ownerAddresses}>
<Identicon address={owners[index]} diameter={32} />
<Paragraph size="md" color="disabled" noMargin className={classes.address}>
{owners[index]}
</Paragraph>
<Link className={classes.open} to={getEtherScanLink(owners[index], network)} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Row>
</Col>
</Row>
)) }
</Block>
</React.Fragment>
)
}
return (
<React.Fragment>
<Block className={classes.title}>
<Paragraph noMargin size="md" color="primary">
{`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
</Paragraph>
</Block>
<Hairline />
<Row className={classes.header}>
<Col xs={4}>NAME</Col>
<Col xs={8}>ADDRESS</Col>
</Row>
<Hairline />
<Block margin="md" padding="md">
{owners.map((address, index) => (
<Row key={address} className={classes.owner}>
<Col xs={4}>
<Field
className={classes.name}
name={getOwnerNameBy(index)}
component={TextField}
type="text"
validate={required}
initialValue={`Owner #${index + 1}`}
placeholder="Owner Name*"
text="Owner Name"
/>
</Col>
<Col xs={7}>
<Row className={classes.ownerAddresses}>
<Identicon address={address} diameter={32} />
<Paragraph size="md" color="disabled" noMargin className={classes.address}>
{address}
</Paragraph>
<Link className={classes.open} to={getEtherScanLink(address, network)} target="_blank">
<OpenInNew style={openIconStyle} />
</Link>
</Row>
</Col>
</Row>
))}
</Block>
</React.Fragment>
)
}
const OwnerListPage = withStyles(styles)(OwnerListComponent)
@ -179,11 +168,7 @@ const OwnerListPage = withStyles(styles)(OwnerListComponent)
const OwnerList = ({ updateInitialProps }: Object, network: string) => (controls: React$Node, { values }: Object) => (
<React.Fragment>
<OpenPaper controls={controls} padding={false}>
<OwnerListPage
network={network}
updateInitialProps={updateInitialProps}
values={values}
/>
<OwnerListPage network={network} updateInitialProps={updateInitialProps} values={values} />
</OpenPaper>
</React.Fragment>
)

2
src/routes/load/components/fields.js
View File

@ -1,4 +1,4 @@
// @flow
export const FIELD_LOAD_NAME: string = 'name'
export const FIELD_LOAD_ADDRESS: string = 'address'
export const THRESHOLD: Number = 'threshold'
export const THRESHOLD: string = 'threshold'

23
src/routes/safe/components/Layout.jsx
View File

@ -3,10 +3,10 @@ import * as React from 'react'
import OpenInNew from '@material-ui/icons/OpenInNew'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'
import { withStyles } from '@material-ui/core/styles'
import Hairline from '~/components/layout/Hairline'
import Block from '~/components/layout/Block'
import Identicon from '~/components/Identicon'
import { withStyles } from '@material-ui/core/styles'
import Heading from '~/components/layout/Heading'
import Row from '~/components/layout/Row'
import Link from '~/components/layout/Link'
@ -21,10 +21,14 @@ import { copyToClipboard } from '~/utils/clipboard'
import Balances from './Balances'
import Settings from './Settings'
export const SETTINGS_TAB_BTN_TESTID = 'settings-tab-btn'
export const SAFE_VIEW_NAME_HEADING_TESTID = 'safe-name-heading'
type Props = SelectorProps & {
classes: Object,
granted: boolean,
createTransaction: Function,
updateSafe: Function,
}
type State = {
@ -90,7 +94,16 @@ class Layout extends React.Component<Props, State> {
render() {
const {
safe, provider, network, classes, granted, tokens, activeTokens, createTransaction, userAddress, updateSafeName,
safe,
provider,
network,
classes,
granted,
tokens,
activeTokens,
createTransaction,
updateSafe,
userAddress,
} = this.props
const { tabIndex } = this.state
@ -107,7 +120,7 @@ class Layout extends React.Component<Props, State> {
<Identicon address={address} diameter={50} />
<Block className={classes.name}>
<Row>
<Heading tag="h2" color="secondary">
<Heading tag="h2" color="secondary" testId={SAFE_VIEW_NAME_HEADING_TESTID}>
{name}
</Heading>
{!granted && <Block className={classes.readonly}>Read Only</Block>}
@ -126,7 +139,7 @@ class Layout extends React.Component<Props, State> {
<Tabs value={tabIndex} onChange={this.handleChange} indicatorColor="secondary" textColor="secondary">
<Tab label="Balances" />
<Tab label="Transactions" />
<Tab label="Settings" />
<Tab label="Settings" data-testid={SETTINGS_TAB_BTN_TESTID} />
</Tabs>
</Row>
<Hairline color="#c8ced4" />
@ -148,12 +161,12 @@ class Layout extends React.Component<Props, State> {
safeAddress={address}
safeName={name}
etherScanLink={etherScanLink}
updateSafe={updateSafe}
threshold={safe.threshold}
owners={safe.owners}
network={network}
userAddress={userAddress}
createTransaction={createTransaction}
updateSafeName={updateSafeName}
/>
)}
</React.Fragment>

32
src/routes/safe/components/Settings/UpdateSafeName/index.jsx → src/routes/safe/components/Settings/ChangeSafeName/index.jsx
View File

@ -1,12 +1,10 @@
// @flow
import React, { useState } from 'react'
import React from 'react'
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 {
composeValidators, required, minMaxLength,
} from '~/components/forms/validator'
import { composeValidators, required, minMaxLength } from '~/components/forms/validator'
import TextField from '~/components/forms/TextField'
import GnoForm from '~/components/forms/GnoForm'
import Row from '~/components/layout/Row'
@ -26,23 +24,23 @@ const saveButtonStyle = {
fontWeight: boldFont,
}
export const SAFE_NAME_INPUT_TESTID = 'safe-name-input'
export const SAFE_NAME_SUBMIT_BTN_TESTID = 'change-safe-name-btn'
type Props = {
classes: Object,
safeAddress: string,
safeName: string,
updateSafe: Funtion
updateSafe: Function,
}
const UpdateSafeName = (props: Props) => {
const ChangeSafeName = (props: Props) => {
const {
classes,
safeAddress,
safeName,
updateSafeName,
classes, safeAddress, safeName, updateSafe,
} = props
const handleSubmit = (values) => {
updateSafeName(safeAddress, values.safeName)
updateSafe({ address: safeAddress, name: values.safeName })
}
return (
@ -52,7 +50,11 @@ const UpdateSafeName = (props: Props) => {
<React.Fragment>
<Block className={classes.formContainer}>
<Paragraph noMargin className={classes.title} size="lg" weight="bolder">
Modify Safe name
Modify Safe name
</Paragraph>
<Paragraph size="sm">
You can change the name of this Safe. This name is only stored locally and never shared with Gnosis or
any third parties.
</Paragraph>
<Block className={classes.root}>
<Field
@ -63,6 +65,7 @@ const UpdateSafeName = (props: Props) => {
placeholder="Safe name*"
text="Safe name*"
defaultValue={safeName}
testId={SAFE_NAME_INPUT_TESTID}
/>
</Block>
</Block>
@ -75,8 +78,9 @@ const UpdateSafeName = (props: Props) => {
size="small"
variant="contained"
color="primary"
testId={SAFE_NAME_SUBMIT_BTN_TESTID}
>
SAVE
SAVE
</Button>
</Col>
</Row>
@ -87,4 +91,4 @@ const UpdateSafeName = (props: Props) => {
)
}
export default withStyles(styles)(UpdateSafeName)
export default withStyles(styles)(ChangeSafeName)

2
src/routes/safe/components/Settings/UpdateSafeName/style.js → src/routes/safe/components/Settings/ChangeSafeName/style.js
View File

@ -1,5 +1,5 @@
// @flow
import { lg, border } from '~/theme/variables'
import { lg } from '~/theme/variables'
export const styles = () => ({
title: {

32
src/routes/safe/components/Settings/RemoveSafeModal/index.jsx
View File

@ -2,12 +2,12 @@
import React from 'react'
import classNames from 'classnames'
import { connect } from 'react-redux'
import { history } from '~/store'
import { SAFELIST_ADDRESS } from '~/routes/routes'
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 { SAFELIST_ADDRESS } from '~/routes/routes'
import { history } from '~/store'
import Block from '~/components/layout/Block'
import Modal from '~/components/Modal'
import Identicon from '~/components/Identicon'
@ -18,7 +18,7 @@ import Link from '~/components/layout/Link'
import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline'
import actions, { type Actions } from './actions'
import { lg, md, secondary } from '~/theme/variables'
import { secondary } from '~/theme/variables'
import { styles } from './style'
const openIconStyle = {
@ -36,23 +36,12 @@ type Props = Actions & {
}
const RemoveSafeComponent = ({
onClose,
isOpen,
classes,
safeAddress,
etherScanLink,
safeName,
removeSafe,
onClose, isOpen, classes, safeAddress, etherScanLink, safeName, removeSafe,
}: Props) => (
<Modal
title="Remove Safe"
description="Remove the selected Safe"
handleClose={onClose}
open={isOpen}
>
<Modal title="Remove Safe" description="Remove the selected Safe" handleClose={onClose} open={isOpen}>
<Row align="center" grow className={classes.heading}>
<Paragraph className={classes.manage} noMargin weight="bolder">
Remove Safe
Remove Safe
</Paragraph>
<IconButton onClick={onClose} disableRipple>
<Close className={classes.close} />
@ -83,17 +72,16 @@ const RemoveSafeComponent = ({
<Hairline />
<Row className={classes.description}>
<Paragraph noMargin>
Removing a Safe only removes it from your interface.
Removing a Safe only removes it from your interface.
<b>It does not delete the Safe</b>
.
You can always add it back using the Safe's address.
. You can always add it back using the Safe&apos;s address.
</Paragraph>
</Row>
</Block>
<Hairline />
<Row align="center" className={classes.buttonRow}>
<Button className={classes.button} minWidth={140} onClick={onClose}>
Cancel
Cancel
</Button>
<Button
type="submit"
@ -106,7 +94,7 @@ const RemoveSafeComponent = ({
variant="contained"
minWidth={140}
>
Remove
Remove
</Button>
</Row>
</Modal>

1
src/routes/safe/components/Settings/ThresholdSettings/index.jsx
View File

@ -14,7 +14,6 @@ import ChangeThreshold from './ChangeThreshold'
import type { Owner } from '~/routes/safe/store/models/owner'
import { styles } from './style'
import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
import { ZERO_ADDRESS } from '~/logic/wallets/ethAddresses'
type Props = {
owners: List<Owner>,

21
src/routes/safe/components/Settings/index.jsx
View File

@ -10,9 +10,9 @@ import Row from '~/components/layout/Row'
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 { type Owner } from '~/routes/safe/store/models/owner'
import ChangeSafeName from './ChangeSafeName'
import ThresholdSettings from './ThresholdSettings'
import UpdateSafeName from './UpdateSafeName'
import ManageOwners from './ManageOwners'
import actions, { type Actions } from './actions'
import { styles } from './style'
@ -33,7 +33,8 @@ type Props = Actions & {
threshold: number,
network: string,
createTransaction: Function,
updateSafeName: Function,
updateSafe: Function,
userAddress: string,
}
type Action = 'RemoveSafe'
@ -69,7 +70,7 @@ class Settings extends React.Component<Props, State> {
network,
userAddress,
createTransaction,
updateSafeName,
updateSafe,
} = this.props
return (
@ -85,7 +86,7 @@ class Settings extends React.Component<Props, State> {
<Paragraph noMargin className={cn(classes.links, classes.removeSafeText)}>
Remove Safe
</Paragraph>
<img className={classes.removeSafeIcon} src={RemoveSafeIcon} />
<img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
</Paragraph>
<RemoveSafeModal
onClose={this.onHide('RemoveSafe')}
@ -112,7 +113,9 @@ class Settings extends React.Component<Props, State> {
className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
onClick={this.handleChange(2)}
>
Owners ({owners.size})
Owners (
{owners.size}
)
</Row>
<Hairline />
<Row
@ -129,11 +132,7 @@ class Settings extends React.Component<Props, State> {
<Col xs={9} layout="column">
<Block className={classes.container}>
{menuOptionIndex === 1 && (
<UpdateSafeName
safeAddress={safeAddress}
safeName={safeName}
updateSafeName={updateSafeName}
/>
<ChangeSafeName safeAddress={safeAddress} safeName={safeName} updateSafe={updateSafe} />
)}
{granted && menuOptionIndex === 2 && (
<ManageOwners

4
src/routes/safe/components/Settings/style.js
View File

@ -1,9 +1,9 @@
// @flow
import {
sm, md, lg, border, secondary, bolderFont,
sm, lg, border, secondary, bolderFont,
} from '~/theme/variables'
export const styles = (theme: Object) => ({
export const styles = () => ({
root: {
backgroundColor: 'white',
boxShadow: '0 -1px 4px 0 rgba(74, 85, 121, 0.5)',

3
src/routes/safe/container/actions.js
View File

@ -2,15 +2,18 @@
import fetchSafe from '~/routes/safe/store/actions/fetchSafe'
import fetchTokenBalances from '~/routes/safe/store/actions/fetchTokenBalances'
import createTransaction from '~/routes/safe/store/actions/createTransaction'
import updateSafe from '~/routes/safe/store/actions/updateSafe'
export type Actions = {
fetchSafe: typeof fetchSafe,
fetchTokenBalances: typeof fetchTokenBalances,
createTransaction: typeof createTransaction,
updateSafe: typeof updateSafe,
}
export default {
fetchSafe,
fetchTokenBalances,
createTransaction,
updateSafe,
}

11
src/routes/safe/container/index.jsx
View File

@ -53,7 +53,15 @@ class SafeView extends React.Component<Props> {
render() {
const {
safe, provider, activeTokens, granted, userAddress, network, tokens, createTransaction,
safe,
provider,
activeTokens,
granted,
userAddress,
network,
tokens,
createTransaction,
updateSafe,
} = this.props
return (
@ -67,6 +75,7 @@ class SafeView extends React.Component<Props> {
network={network}
granted={granted}
createTransaction={createTransaction}
updateSafe={updateSafe}
/>
</Page>
)

4
src/test/safe.dom.load.test.js
View File

@ -61,6 +61,10 @@ describe('DOM > Feature > LOAD a safe', () => {
fireEvent.submit(form)
await sleep(400)
// submit form with owners names
fireEvent.submit(form)
await sleep(400)
// Submit
fireEvent.submit(form)
const deployedAddress = await whenSafeDeployed()

46
src/test/safe.dom.settings.test.js Normal file
View File

@ -0,0 +1,46 @@
// @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, SAFE_VIEW_NAME_HEADING_TESTID } from '~/routes/safe/components/Layout'
import { SAFE_NAME_INPUT_TESTID, SAFE_NAME_SUBMIT_BTN_TESTID } from '~/routes/safe/components/Settings/ChangeSafeName'
afterEach(cleanup)
describe('DOM > Feature > Settings', () => {
let store
let safeAddress
beforeEach(async () => {
store = aNewStore()
// using 4th account because other accounts were used in other tests and paid gas
safeAddress = await aMinedSafe(store)
})
it('Changes safe name', async () => {
const INITIAL_NAME = 'Safe Name'
const NEW_NAME = 'NEW SAFE NAME'
const SafeDom = renderSafeView(store, safeAddress)
await sleep(1300)
const safeNameHeading = SafeDom.getByTestId(SAFE_VIEW_NAME_HEADING_TESTID)
expect(safeNameHeading).toHaveTextContent(INITIAL_NAME)
// Open settings tab
// Safe name setting screen should be pre-selected
const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID)
fireEvent.click(settingsBtn)
// Change the name
const safeNameInput = SafeDom.getByTestId(SAFE_NAME_INPUT_TESTID)
const submitBtn = SafeDom.getByTestId(SAFE_NAME_SUBMIT_BTN_TESTID)
fireEvent.change(safeNameInput, { target: { value: NEW_NAME } })
fireEvent.click(submitBtn)
// Check if the name changed
expect(safeNameHeading).toHaveTextContent(NEW_NAME)
})
})

18765
yarn-error.log
View File

File diff suppressed because it is too large Load Diff

1219
yarn.lock
View File

File diff suppressed because it is too large Load Diff