WA-238 Using NoRights component on safe route layout

src/routes/safe/component/NoRights/index.jsx

@@ -0,0 +1,31 @@
+// @flow
+import * as React from 'react'
+import Bold from '~/components/layout/Bold'
+import Button from '~/components/layout/Button'
+import Link from '~/components/layout/Link'
+import Col from '~/components/layout/Col'
+import Row from '~/components/layout/Row'
+import Paragraph from '~/components/layout/Paragraph/index'
+import { SAFELIST_ADDRESS } from '~/routes/routes'
+
+const NoRights = () => (
+  <Row>
+    <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
+      <Paragraph size="lg">
+        <Bold>You do not have rights to operate with this safe. Pleave visit the Safe List.</Bold>
+      </Paragraph>
+    </Col>
+    <Col xs={12} center="xs" sm={10} smOffset={2} start="sm" margin="md">
+      <Button
+        component={Link}
+        to={SAFELIST_ADDRESS}
+        variant="raised"
+        color="primary"
+      >
+        Safe List
+      </Button>
+    </Col>
+  </Row>
+)
+
+export default NoRights

src/routes/safe/component/NoRights/index.stories.js

@@ -0,0 +1,17 @@
+// @flow
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+import styles from '~/components/layout/PageFrame/index.scss'
+import Component from './index.jsx'
+
+const FrameDecorator = story => (
+  <div className={styles.frame}>
+    { story() }
+  </div>
+)
+
+storiesOf('Components', module)
+  .addDecorator(FrameDecorator)
+  .add('NoRights', () => (
+    <Component />
+  ))

src/routes/safe/container/index.jsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { connect } from 'react-redux'
 import Page from '~/components/layout/Page'
 import Layout from '~/routes/safe/component/Layout'
+import NoRights from '~/routes/safe/component/NoRights'
 import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
 
@@ -39,11 +40,10 @@ class SafeView extends React.PureComponent<Props> {
 
     return (
       <Page>
-        { granted && <Layout
-          balance={balance}
-          provider={provider}
-          safe={safe}
-        /> }
+        { granted
+          ? <Layout balance={balance} provider={provider} safe={safe} />
+          : <NoRights />
+        }
       </Page>
     )
   }