Implement readonly on safe overview

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

@@ -76,6 +76,7 @@ const styles = theme => ({
 
 type Props = {
   classes: Object,
+  granted: boolean,
 }
 
 type Action = 'Token' | 'Send' | 'Receive'
@@ -106,7 +107,7 @@ class Balances extends React.Component<Props, State> {
     const {
       hideZero, showToken, showReceive, showSend,
     } = this.state
-    const { classes } = this.props
+    const { classes, granted } = this.props
 
     const columns = generateColumns()
     const autoColumns = columns.filter(c => !c.custom)
@@ -160,10 +161,12 @@ class Balances extends React.Component<Props, State> {
               )) }
               <TableCell component="th" scope="row">
                 <Row align="end" className={classes.actions}>
-                  <Button variant="contained" size="small" color="secondary" className={classes.send} onClick={this.onShow('Send')}>
-                    <CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
-                    Send
-                  </Button>
+                  { granted &&
+                    <Button variant="contained" size="small" color="secondary" className={classes.send} onClick={this.onShow('Send')}>
+                      <CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
+                      Send
+                    </Button>
+                  }
                   <Button variant="contained" size="small" color="secondary" className={classes.receive} onClick={this.onShow('Receive')}>
                     <CallReceived className={classNames(classes.leftIcon, classes.iconSmall)} />
                     Receive
@@ -173,20 +176,10 @@ class Balances extends React.Component<Props, State> {
             </TableRow>
           ))}
         </Table>
-        <Modal
-          title="Send Tokens"
-          description="Send Tokens Form"
-          handleClose={this.onHide('Send')}
-          open={showSend}
-        >
+        <Modal title="Send Tokens" description="Send Tokens Form" handleClose={this.onHide('Send')} open={showSend}>
           <Send onClose={this.onHide('Send')} />
         </Modal>
-        <Modal
-          title="Receive Tokens"
-          description="Receive Tokens Form"
-          handleClose={this.onHide('Receive')}
-          open={showReceive}
-        >
+        <Modal title="Receive Tokens" description="Receive Tokens Form" handleClose={this.onHide('Receive')} open={showReceive}>
           <Receive onClose={this.onHide('Receive')} />
         </Modal>
       </React.Fragment>

src/routes/safe/component/Layout.jsx

@@ -13,11 +13,12 @@ import Paragraph from '~/components/layout/Paragraph'
 import NoSafe from '~/components/NoSafe'
 import { type SelectorProps } from '~/routes/safe/container/selector'
 import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
-import { sm, secondary } from '~/theme/variables'
+import { sm, xs, secondary, smallFontSize } from '~/theme/variables'
 import Balances from './Balances'
 
 type Props = SelectorProps & {
   classes: Object,
+  granted: boolean,
 }
 
 type State = {
@@ -50,6 +51,18 @@ const styles = () => ({
       cursor: 'pointer',
     },
   },
+  readonly: {
+    fontSize: smallFontSize,
+    letterSpacing: '0.5px',
+    color: '#ffffff',
+    backgroundColor: '#a2a8ba',
+    fontFamily: 'Roboto Mono, monospace',
+    textTransform: 'uppercase',
+    padding: `0 ${sm}`,
+    marginLeft: sm,
+    borderRadius: xs,
+    lineHeight: '28px',
+  },
 })
 
 class Layout extends React.Component<Props, State> {
@@ -63,7 +76,7 @@ class Layout extends React.Component<Props, State> {
 
   render() {
     const {
-      safe, provider, network, classes,
+      safe, provider, network, classes, granted,
     } = this.props
     const { value } = this.state
 
@@ -78,7 +91,14 @@ class Layout extends React.Component<Props, State> {
         <Block className={classes.container} margin="xl">
           <Identicon address={address} diameter={50} />
           <Block className={classes.name}>
-            <Heading tag="h2" color="secondary">{safe.get('name')}</Heading>
+            <Row>
+              <Heading tag="h2" color="secondary">{safe.get('name')}</Heading>
+              { !granted &&
+                <Block className={classes.readonly} >
+                  Read Only
+                </Block>
+              }
+            </Row>
             <Block align="center" className={classes.user}>
               <Paragraph size="md" color="disabled" noMargin>{address}</Paragraph>
               <OpenInNew
@@ -102,7 +122,7 @@ class Layout extends React.Component<Props, State> {
           </Tabs>
         </Row>
         <Hairline color="#c8ced4" />
-        {value === 0 && <Balances />}
+        {value === 0 && <Balances granted={granted} />}
       </React.Fragment>
     )
   }

src/routes/safe/container/index.jsx

@@ -3,7 +3,6 @@ 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'
 
@@ -52,16 +51,14 @@ class SafeView extends React.PureComponent<Props> {
 
     return (
       <Page>
-        { granted
-          ? <Layout
-            activeTokens={activeTokens}
-            provider={provider}
-            safe={safe}
-            userAddress={userAddress}
-            network={network}
-          />
-          : <NoRights />
-        }
+        <Layout
+          activeTokens={activeTokens}
+          provider={provider}
+          safe={safe}
+          userAddress={userAddress}
+          network={network}
+          granted={granted}
+        />
       </Page>
     )
   }