Add basic settings page

This commit is contained in:
Germán Martínez 2019-05-22 14:20:36 +02:00
parent 34aa15bee8
commit 320ed91ec2
3 changed files with 99 additions and 0 deletions

View File

@ -19,6 +19,7 @@ import {
} from '~/theme/variables'
import { copyToClipboard } from '~/utils/clipboard'
import Balances from './Balances'
import Settings from './Settings'
type Props = SelectorProps & {
classes: Object,
@ -141,6 +142,14 @@ class Layout extends React.Component<Props, State> {
createTransaction={createTransaction}
/>
)}
{tabIndex === 2 && (
<Settings
granted={granted}
safeAddress={address}
safeName={name}
etherScanLink={etherScanLink}
/>
)}
</React.Fragment>
)
}

View File

@ -0,0 +1,73 @@
// @flow
import * as React from 'react'
import { withStyles } from '@material-ui/core/styles'
import Col from '~/components/layout/Col'
import Row from '~/components/layout/Row'
import RemoveSafeModal from './RemoveSafeModal'
import Paragraph from '~/components/layout/Paragraph'
import { styles } from './style'
type State = {
showRemoveSafe: boolean,
}
type Props = {
classes: Object,
granted: boolean,
etherScanLink: string,
safeAddress: string,
safeName: string,
}
type Action = 'RemoveSafe'
class Settings extends React.Component<Props, State> {
state = {
showRemoveSafe: false,
}
onShow = (action: Action) => () => {
this.setState(() => ({ [`show${action}`]: true }))
}
onHide = (action: Action) => () => {
this.setState(() => ({ [`show${action}`]: false }))
}
render() {
const { showRemoveSafe } = this.state
const {
classes,
granted,
etherScanLink,
safeAddress,
safeName,
} = this.props
return (
<React.Fragment>
<Row align="center" className={classes.message}>
<Col xs={6}>
<Paragraph className={classes.settings}>Settings</Paragraph>
</Col>
<Col xs={6} end="sm">
<Paragraph noMargin size="md" color="error" className={classes.links} onClick={this.onShow('RemoveSafe')}>
Remove Safe
</Paragraph>
<RemoveSafeModal
onClose={this.onHide('RemoveSafe')}
isOpen={showRemoveSafe}
etherScanLink={etherScanLink}
safeAddress={safeAddress}
safeName={safeName}
/>
</Col>
</Row>
Settings page content
</React.Fragment>
)
}
}
export default withStyles(styles)(Settings)

View File

@ -0,0 +1,17 @@
// @flow
import { sm, xs } from '~/theme/variables'
export const styles = (theme: Object) => ({
settings: {
letterSpacing: '-0.5px',
},
message: {
margin: `${sm} 0`,
},
links: {
textDecoration: 'underline',
'&:hover': {
cursor: 'pointer',
},
},
})