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

Some refactor to the code

This commit is contained in:
Mati Dastugue 2021-06-04 15:23:54 -03:00
parent 096938ad59
commit ec3acf16bc
6 changed files with 95 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/AppLayout/Header/components/Layout.tsx
View File

@ -5,12 +5,9 @@ import Popper from '@material-ui/core/Popper'
import { withStyles } from '@material-ui/core/styles'
import * as React from 'react'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import { Divider, Icon } from '@gnosis.pm/safe-react-components'
import Provider from './Provider'
import NetworkSelector from './NetworkSelector'
import NetworkLabel from './NetworkLabel'
import Spacer from 'src/components/Spacer'
import Col from 'src/components/layout/Col'
@ -21,22 +18,6 @@ import { useStateHandler } from 'src/logic/hooks/useStateHandler'
import SafeLogo from '../assets/gnosis-safe-multisig-logo.svg'
import { getNetworkName, getNetworks } from 'src/config'
import { sameString } from 'src/utils/strings'
const StyledDivider = styled(Divider)`
margin: 0;
`
const StyledLink = styled.a`
margin: 0;
text-decoration: none;
display: flex;
justify-content: space-between;
padding: 14px 16px 14px 0;
:hover {
background-color: ${({ theme }) => theme.colors.background};
}
`
const styles = () => ({
root: {
@ -123,39 +104,10 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
/>
<NetworkSelector
open={openNetworks}
networks={networks}
selected={networkName}
toggle={toggleNetworks}
render={(networkRef) => (
<Popper
anchorEl={networkRef.current}
className={classes.popper}
open={openNetworks}
placement="bottom"
popperOptions={{ positionFixed: true }}
>
{({ TransitionProps }) => (
<Grow {...TransitionProps}>
<>
<ClickAwayListener mouseEvent="onClick" onClickAway={clickAwayNetworks} touchEvent={false}>
<List className={classes.network} component="div">
{networks.map((network) => (
<React.Fragment key={network.id}>
<StyledLink href={network.safeUrl}>
<NetworkLabel networkInfo={network} networkName={network.label} />
{sameString(networkName, network.label.toLowerCase()) && (
<Icon type="check" size="md" color="primary" />
)}
</StyledLink>
<StyledDivider />
</React.Fragment>
))}
</List>
</ClickAwayListener>
</>
</Grow>
)}
</Popper>
)}
clickAway={clickAwayNetworks}
/>
</Row>
)

2
src/components/AppLayout/Header/components/NetworkLabel.tsx
View File

@ -32,7 +32,7 @@ const NetworkLabel = ({
networkName,
networkInfo,
}: {
networkName: string
networkName?: string
networkInfo?: Partial<NetworkSettings>
}): React.ReactElement => {
const selectedNetwork = networkInfo || currentNetworkInfo

113
src/components/AppLayout/Header/components/NetworkSelector.tsx
View File

@ -1,15 +1,25 @@
import * as React from 'react'
import styled from 'styled-components'
import { makeStyles } from '@material-ui/core/styles'
import ClickAwayListener from '@material-ui/core/ClickAwayListener'
import Grow from '@material-ui/core/Grow'
import List from '@material-ui/core/List'
import Popper from '@material-ui/core/Popper'
import IconButton from '@material-ui/core/IconButton'
import { withStyles } from '@material-ui/core/styles'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore'
import * as React from 'react'
import { Divider, Icon } from '@gnosis.pm/safe-react-components'
import NetworkLabel from './NetworkLabel'
import Col from 'src/components/layout/Col'
import Divider from 'src/components/layout/Divider'
import { screenSm, sm } from 'src/theme/variables'
const styles = () => ({
import { sameString } from 'src/utils/strings'
import { ReturnValue } from 'src/logic/hooks/useStateHandler'
import { NetworkSettings } from 'src/config/networks/network'
const styles = {
root: {
alignItems: 'center',
display: 'flex',
@ -34,35 +44,86 @@ const styles = () => ({
height: '30px',
width: '30px',
},
})
popper: {
zIndex: 2000,
},
network: {
backgroundColor: 'white',
borderRadius: sm,
boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
marginTop: '11px',
minWidth: '180px',
padding: '0',
},
}
class NetworkSelector extends React.Component<any> {
myRef
const useStyles = makeStyles(styles)
constructor(props) {
super(props)
const StyledLink = styled.a`
margin: 0;
text-decoration: none;
display: flex;
justify-content: space-between;
padding: 14px 16px 14px 0;
this.myRef = React.createRef()
:hover {
background-color: ${({ theme }) => theme.colors.background};
}
`
const StyledDivider = styled(Divider)`
margin: 0;
`
render() {
const { render, classes, open, toggle, selected } = this.props
type NetworkSelectorProps = ReturnValue & {
selected: string
networks: (Partial<NetworkSettings> & { safeUrl: string })[]
}
return (
<>
<div className={classes.root} ref={this.myRef}>
<Col className={classes.networkList} end="sm" middle="xs" onClick={toggle}>
<NetworkLabel networkName={selected} />
<IconButton className={classes.expand} disableRipple>
{open ? <ExpandLess /> : <ExpandMore />}
</IconButton>
</Col>
<Divider />
</div>
{render(this.myRef)}
</>
)
}
const NetworkSelector = ({ open, toggle, selected, networks, clickAway }: NetworkSelectorProps): React.ReactElement => {
const networkRef = React.useRef(null)
const classes = useStyles()
return (
<>
<div className={classes.root} ref={networkRef}>
<Col className={classes.networkList} end="sm" middle="xs" onClick={toggle}>
<NetworkLabel networkName={selected} />
<IconButton className={classes.expand} disableRipple>
{open ? <ExpandLess /> : <ExpandMore />}
</IconButton>
</Col>
<Divider />
</div>
<Popper
anchorEl={networkRef.current}
className={classes.popper}
open={open}
placement="bottom"
popperOptions={{ positionFixed: true }}
>
{({ TransitionProps }) => (
<Grow {...TransitionProps}>
<>
<ClickAwayListener mouseEvent="onClick" onClickAway={clickAway} touchEvent={false}>
<List className={classes.network} component="div">
{networks.map((network) => (
<React.Fragment key={network.id}>
<StyledLink href={network.safeUrl}>
<NetworkLabel networkInfo={network} networkName={network.label} />
{sameString(selected, network.label?.toLowerCase()) && (
<Icon type="check" size="md" color="primary" />
)}
</StyledLink>
<StyledDivider />
</React.Fragment>
))}
</List>
</ClickAwayListener>
</>
</Grow>
)}
</Popper>
</>
)
}
export default withStyles(styles as any)(NetworkSelector)

6
src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx
View File

@ -1,10 +1,10 @@
import * as React from 'react'
import styled from 'styled-components'
import classNames from 'classnames'
import { makeStyles } from '@material-ui/core/styles'
import Dot from '@material-ui/icons/FiberManualRecord'
import classNames from 'classnames'
import * as React from 'react'
import { EthHashInfo, Identicon, Card } from '@gnosis.pm/safe-react-components'
import { createStyles } from '@material-ui/core'
import styled from 'styled-components'
import Spacer from 'src/components/Spacer'
import Block from 'src/components/layout/Block'

2
src/config/index.ts
View File

@ -67,7 +67,7 @@ const configuration = (): NetworkSpecificConfiguration => {
const getConfig: () => NetworkSpecificConfiguration = ensureOnce(configuration)
export const getNetworks = (): { id: number; label: string; backgroundColor: string; safeUrl: string }[] => {
export const getNetworks = (): Partial<NetworkSettings> & { safeUrl: string }[] => {
const { local, ...usefulNetworks } = networks
return Object.values(usefulNetworks).map((networkObj) => ({
id: networkObj.network.id,

2
src/logic/hooks/useStateHandler.tsx
View File

@ -1,6 +1,6 @@
import { useState } from 'react'
type ReturnValue = {
export type ReturnValue = {
open: boolean
toggle: () => void
clickAway: () => void