text: import React from 'react'
  import PropTypes from 'prop-types'
  import { Transition, animated } from 'react-spring'
  import errorToUserFriendly from 'lib/utils/userFriendlyErrors'
  import Notification from 'components/UI/Notification'
  import { Box } from 'rebass'
  
  class GlobalError extends React.Component {
    componentDidUpdate(prevProps) {
      const { clearError, error } = this.props
      if (!prevProps.error && error) {
        setTimeout(clearError, 10000)
      }
    }
  
    render() {
      const { error, clearError } = this.props
  
      return (
        <Transition from={{ opacity: 0 }} enter={{ opacity: 1 }} leave={{ opacity: 0 }} native>
          {error &&
            (springStyles => (
              <Box
                mt="22px"
                px={3}
                width={1}
                css={{
                  position: 'absolute',
                  'z-index': 100
                }}
              >
                <animated.div style={springStyles}>
                  <Notification variant="error" onClick={clearError}>
                    {errorToUserFriendly(error)}
                  </Notification>
                </animated.div>
              </Box>
            ))}
        </Transition>
      )
    }
  }
  
  GlobalError.propTypes = {
    error: PropTypes.string,
    clearError: PropTypes.func.isRequired
  }
  
  export default GlobalError
  