Add basic settings page
This commit is contained in:
parent
34aa15bee8
commit
320ed91ec2
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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)
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
})
|
Loading…
Reference in New Issue