Initial layout on safe view with dummy token data
This commit is contained in:
apanizo
parent
ed258e91e1
commit
e907b7ce0c
|
|
@ -0,0 +1,128 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import { List } from 'immutable'
|
||||
import Row from '~/components/layout/Row'
|
||||
import Checkbox from '@material-ui/core/Checkbox'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import { type Column } from '~/components/Table/TableHead'
|
||||
import Table from '~/components/Table'
|
||||
import { buildOrderFieldFrom } from '~/components/Table/sorting'
|
||||
import { sm } from '~/theme/variables'
|
||||
|
||||
const BALANCE_TABLE_ASSET_ID = 'asset'
|
||||
const BALANCE_TABLE_BALANCE_ID = 'balance'
|
||||
const BALANCE_TABLE_VALUE_ID = 'value'
|
||||
|
||||
const generateColumns = () => {
|
||||
const assetRow: Column = {
|
||||
id: BALANCE_TABLE_ASSET_ID,
|
||||
order: false,
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Asset',
|
||||
}
|
||||
|
||||
const balanceRow: Column = {
|
||||
id: BALANCE_TABLE_BALANCE_ID,
|
||||
order: true,
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'Balance',
|
||||
}
|
||||
|
||||
const valueRow: Column = {
|
||||
id: BALANCE_TABLE_VALUE_ID,
|
||||
order: true,
|
||||
numeric: true,
|
||||
disablePadding: false,
|
||||
label: 'Value',
|
||||
}
|
||||
|
||||
return List([assetRow, balanceRow, valueRow])
|
||||
}
|
||||
|
||||
type State = {
|
||||
hideZero: boolean,
|
||||
}
|
||||
|
||||
const styles = {
|
||||
root: {
|
||||
width: '20px',
|
||||
marginRight: sm,
|
||||
},
|
||||
zero: {
|
||||
letterSpacing: '-0.5px',
|
||||
},
|
||||
}
|
||||
|
||||
type Props = {
|
||||
classes: Object,
|
||||
}
|
||||
|
||||
class Balances extends React.Component<Props, State> {
|
||||
state = {
|
||||
hideZero: false,
|
||||
}
|
||||
|
||||
handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
|
||||
const { checked } = e.target
|
||||
|
||||
this.setState(() => ({ hideZero: checked }))
|
||||
}
|
||||
|
||||
render() {
|
||||
const { hideZero } = this.state
|
||||
const { classes } = this.props
|
||||
|
||||
const columns = generateColumns()
|
||||
const checkboxClasses = {
|
||||
root: classes.root,
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Row align="center">
|
||||
<Checkbox
|
||||
classes={checkboxClasses}
|
||||
checked={hideZero}
|
||||
onChange={this.handleChange}
|
||||
color="secondary"
|
||||
disableRipple
|
||||
/>
|
||||
<Paragraph className={classes.zero}>Hide zero balances</Paragraph>
|
||||
</Row>
|
||||
<Table
|
||||
label="Balances"
|
||||
defaultOrderBy={BALANCE_TABLE_ASSET_ID}
|
||||
columns={columns}
|
||||
data={[
|
||||
{
|
||||
[BALANCE_TABLE_ASSET_ID]: 'Ethereum',
|
||||
[BALANCE_TABLE_BALANCE_ID]: '9.394 ETH',
|
||||
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 9.394,
|
||||
[BALANCE_TABLE_VALUE_ID]: '$539.45',
|
||||
[buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 539.45,
|
||||
},
|
||||
{
|
||||
[BALANCE_TABLE_ASSET_ID]: 'Gnosis',
|
||||
[BALANCE_TABLE_BALANCE_ID]: '0.599 GNO',
|
||||
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 0.559,
|
||||
[BALANCE_TABLE_VALUE_ID]: '$23.11',
|
||||
[buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 23.11,
|
||||
},
|
||||
{
|
||||
[BALANCE_TABLE_ASSET_ID]: 'OmiseGO',
|
||||
[BALANCE_TABLE_BALANCE_ID]: '39.922 OMG',
|
||||
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 39.922,
|
||||
[BALANCE_TABLE_VALUE_ID]: '$2930.89',
|
||||
[buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 2930.89,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Balances)
|
||||
|
|
@ -1,20 +1,111 @@
|
|||
// @flow
|
||||
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 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 Paragraph from '~/components/layout/Paragraph'
|
||||
import NoSafe from '~/components/NoSafe'
|
||||
import { type SelectorProps } from '~/routes/safe/container/selector'
|
||||
import GnoSafe from './Safe'
|
||||
import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
|
||||
import { sm, secondary } from '~/theme/variables'
|
||||
import Balances from './Balances'
|
||||
|
||||
type Props = SelectorProps
|
||||
type Props = SelectorProps & {
|
||||
classes: Object,
|
||||
}
|
||||
|
||||
const Layout = ({
|
||||
safe, activeTokens, provider, userAddress,
|
||||
}: Props) => (
|
||||
<React.Fragment>
|
||||
{ safe
|
||||
? <GnoSafe safe={safe} tokens={activeTokens} userAddress={userAddress} />
|
||||
: <NoSafe provider={provider} text="Not found safe" />
|
||||
type State = {
|
||||
value: number,
|
||||
}
|
||||
|
||||
const openIconStyle = {
|
||||
height: '16px',
|
||||
color: secondary,
|
||||
}
|
||||
|
||||
const styles = () => ({
|
||||
container: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
name: {
|
||||
marginLeft: sm,
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
user: {
|
||||
justifyContent: 'left',
|
||||
},
|
||||
open: {
|
||||
paddingLeft: sm,
|
||||
width: 'auto',
|
||||
'&:hover': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
class Layout extends React.Component<Props, State> {
|
||||
state = {
|
||||
value: 0,
|
||||
}
|
||||
|
||||
handleChange = (event, value) => {
|
||||
this.setState({ value })
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
safe, provider, network, classes,
|
||||
} = this.props
|
||||
const { value } = this.state
|
||||
|
||||
if (!safe) {
|
||||
return <NoSafe provider={provider} text="Not found safe" />
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
// <GnoSafe safe={safe} tokens={activeTokens} userAddress={userAddress} />
|
||||
const address = safe.get('address')
|
||||
|
||||
export default Layout
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Block className={classes.container} margin="xl">
|
||||
<Identicon address={address} diameter={50} />
|
||||
<Block className={classes.name}>
|
||||
<Heading tag="h2" color="secondary">{safe.get('name')}</Heading>
|
||||
<Block align="center" className={classes.user}>
|
||||
<Paragraph size="md" color="disabled" noMargin>{address}</Paragraph>
|
||||
<OpenInNew
|
||||
className={classes.open}
|
||||
style={openIconStyle}
|
||||
onClick={openAddressInEtherScan(address, network)}
|
||||
/>
|
||||
</Block>
|
||||
</Block>
|
||||
</Block>
|
||||
<Row>
|
||||
<Tabs
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
indicatorColor="secondary"
|
||||
textColor="secondary"
|
||||
>
|
||||
<Tab label="Balances" />
|
||||
<Tab label="Transactions" />
|
||||
<Tab label="Settings" />
|
||||
</Tabs>
|
||||
</Row>
|
||||
<Hairline color="#c8ced4" />
|
||||
{value === 0 && <Balances />}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Layout)
|
||||
|
|
|
|||
Loading…
Reference in New Issue