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 &&
+
+
+
+
+ }
+
+
{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 &&
-
-
-
-
- }
-
-
{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 &&
+
+ }
+
)
}
}