diff --git a/src/components/Header/component/Layout.jsx b/src/components/Header/component/Layout.jsx index f88053f2..6500a31a 100644 --- a/src/components/Header/component/Layout.jsx +++ b/src/components/Header/component/Layout.jsx @@ -1,9 +1,6 @@ // @flow import * as React from 'react' import { withStyles } from '@material-ui/core/styles' -import ClickAwayListener from '@material-ui/core/ClickAwayListener' -import Grow from '@material-ui/core/Grow' -import Popper from '@material-ui/core/Popper' import Divider from '~/components/layout/Divider' import openHoc, { type Open } from '~/components/hoc/OpenHoc' import Col from '~/components/layout/Col' @@ -11,17 +8,12 @@ import Img from '~/components/layout/Img' import Row from '~/components/layout/Row' import Spacer from '~/components/Spacer' import { border, sm, md } from '~/theme/variables' -import Provider from './Provider' -import UserDetails from './UserDetails' const logo = require('../assets/gnosis-safe-logo.svg') type Props = Open & { - provider: string, classes: Object, - network: string, - userAddress: string, - connected: boolean, + children: React$Node, } const styles = () => ({ @@ -37,9 +29,7 @@ const styles = () => ({ }, }) -const Header = openHoc(({ - open, toggle, provider, network, connected, classes, userAddress, -}: Props) => ( +const Header = openHoc(({ classes, children }: Props) => ( @@ -48,35 +38,9 @@ const Header = openHoc(({ - - {providerRef => ( - - {({ TransitionProps }) => ( - - - - - - )} - - )} - + { children } )) -export default withStyles(styles)(openHoc(Header)) +export default withStyles(styles)(Header) diff --git a/src/components/Header/component/Provider/Connected.jsx b/src/components/Header/component/Provider/Connected.jsx new file mode 100644 index 00000000..981155a5 --- /dev/null +++ b/src/components/Header/component/Provider/Connected.jsx @@ -0,0 +1,109 @@ +// @flow +import * as React from 'react' +import { withStyles } from '@material-ui/core/styles' +import IconButton from '@material-ui/core/IconButton' +import ExpandLess from '@material-ui/icons/ExpandLess' +import ExpandMore from '@material-ui/icons/ExpandMore' +import Paragraph from '~/components/layout/Paragraph' +import Col from '~/components/layout/Col' +import Img from '~/components/layout/Img' +import { type Open } from '~/components/hoc/OpenHoc' +import { sm, md } from '~/theme/variables' +import Identicon from '~/components/Identicon' + +const connectedLogo = require('../../assets/connected.svg') + +type Props = Open & { + provider: string, + network: string, + classes: Object, + userAddress: string, + connected: boolean, + children: Function, +} + +const styles = () => ({ + root: { + height: '100%', + display: 'flex', + alignItems: 'center', + }, + provider: { + padding: `${sm} ${md}`, + alignItems: 'center', + flex: '0 1 auto', + display: 'flex', + cursor: 'pointer', + }, + network: { + fontFamily: 'Montserrat, sans-serif', + }, + logo: { + top: '10px', + position: 'relative', + right: '13px', + }, + account: { + paddingRight: sm, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + address: { + letterSpacing: '-0.5px', + }, + expand: { + width: '30px', + height: '30px', + }, +}) + +type ProviderRef = { current: null | HTMLDivElement } + +class Provider extends React.Component { + constructor(props: Props) { + super(props) + + this.myRef = React.createRef() + } + + myRef: ProviderRef + + render() { + const { + open, toggle, provider, network, userAddress, connected, children, classes, + } = this.props + + const providerText = connected ? `${provider} [${network}]` : 'Not connected' + const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' + + return ( + +
+ + { connected && + + + Status connected + + } + + {providerText} + {cutAddress} + + + { open ? : } + + +
+ { children(this.myRef) } +
+ ) + } +} + +export default withStyles(styles)(Provider) diff --git a/src/components/Header/component/UserDetails/index.jsx b/src/components/Header/component/Provider/UserDetails.jsx similarity index 100% rename from src/components/Header/component/UserDetails/index.jsx rename to src/components/Header/component/Provider/UserDetails.jsx diff --git a/src/components/Header/component/Provider/index.jsx b/src/components/Header/component/Provider/index.jsx index 981155a5..9153f3bf 100644 --- a/src/components/Header/component/Provider/index.jsx +++ b/src/components/Header/component/Provider/index.jsx @@ -1,109 +1,49 @@ // @flow import * as React from 'react' -import { withStyles } from '@material-ui/core/styles' -import IconButton from '@material-ui/core/IconButton' -import ExpandLess from '@material-ui/icons/ExpandLess' -import ExpandMore from '@material-ui/icons/ExpandMore' -import Paragraph from '~/components/layout/Paragraph' -import Col from '~/components/layout/Col' -import Img from '~/components/layout/Img' -import { type Open } from '~/components/hoc/OpenHoc' -import { sm, md } from '~/theme/variables' -import Identicon from '~/components/Identicon' - -const connectedLogo = require('../../assets/connected.svg') +import openHoc, { type Open } from '~/components/hoc/OpenHoc' +import ClickAwayListener from '@material-ui/core/ClickAwayListener' +import Grow from '@material-ui/core/Grow' +import Popper from '@material-ui/core/Popper' +import Connected from './Connected' +import UserDetails from './UserDetails' type Props = Open & { provider: string, network: string, - classes: Object, userAddress: string, connected: boolean, - children: Function, } -const styles = () => ({ - root: { - height: '100%', - display: 'flex', - alignItems: 'center', - }, - provider: { - padding: `${sm} ${md}`, - alignItems: 'center', - flex: '0 1 auto', - display: 'flex', - cursor: 'pointer', - }, - network: { - fontFamily: 'Montserrat, sans-serif', - }, - logo: { - top: '10px', - position: 'relative', - right: '13px', - }, - account: { - paddingRight: sm, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - }, - address: { - letterSpacing: '-0.5px', - }, - expand: { - width: '30px', - height: '30px', - }, -}) +const Provider = ({ + open, toggle, provider, network, userAddress, connected, +}: Props) => ( + + {providerRef => ( + + {({ TransitionProps }) => ( + + + + + + )} + + )} + +) -type ProviderRef = { current: null | HTMLDivElement } - -class Provider extends React.Component { - constructor(props: Props) { - super(props) - - this.myRef = React.createRef() - } - - myRef: ProviderRef - - render() { - const { - open, toggle, provider, network, userAddress, connected, children, classes, - } = this.props - - const providerText = connected ? `${provider} [${network}]` : 'Not connected' - const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' - - return ( - -
- - { connected && - - - Status connected - - } - - {providerText} - {cutAddress} - - - { open ? : } - - -
- { children(this.myRef) } -
- ) - } -} - -export default withStyles(styles)(Provider) +export default openHoc(Provider) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index d69651ad..e73377ac 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -1,6 +1,8 @@ // @flow import * as React from 'react' import { connect } from 'react-redux' +import { logComponentStack, type Info } from '~/utils/logBoundaries' +import Provider from './component/Provider' import Layout from './component/Layout' import actions from './actions' import selector from './selector' @@ -13,11 +15,25 @@ type Props = { connected: boolean, } -class Header extends React.PureComponent { +type State = { + hasError: boolean, +} + +class Header extends React.PureComponent { + state = { + hasError: false, + } + componentDidMount() { this.props.fetchProvider() } + componentDidCatch(error: Error, info: Info) { + this.setState({ hasError: true }) + + logComponentStack(error, info) + } + reloadWallet = () => { this.props.fetchProvider() } @@ -27,14 +43,26 @@ class Header extends React.PureComponent { provider, userAddress, network, connected, } = this.props + const { hasError } = this.state + + // const providerDisconnected = !hasError && !connected + const providerConnected = !hasError && connected + return ( + > + {/* hasError && */} + {/* providerDisconnected && */} + { providerConnected && + + } + ) } }