Feature #189: Cookie banner

.eslintignore

@@ -4,4 +4,4 @@ flow-typed
 flow-typed/npm
 config
 scripts
-migrations
+migrations

flow-typed/npm/js-cookie_v2.x.x.js

@@ -0,0 +1,30 @@
+// flow-typed signature: a23fa96dc9c75f8931650efff45badee
+// flow-typed version: c6154227d1/js-cookie_v2.x.x/flow_>=v0.104.x
+
+declare module 'js-cookie' {
+    declare type CookieOptions = {
+        expires?: number | Date,
+        path?: string,
+        domain?: string,
+        secure?: boolean,
+        ...
+    }
+    declare type ConverterFunc = (value: string, name: string) => string;
+    declare type ConverterObj = {
+        read: ConverterFunc,
+        write: ConverterFunc,
+        ...
+    };
+    declare class Cookie {
+        defaults: CookieOptions;
+        set(name: string, value: mixed, options?: CookieOptions): void;
+        get(...args: Array<void>): { [key: string]: string, ... };
+        get(name: string, ...args: Array<void>): string | void;
+        remove(name: string, options?: CookieOptions): void;
+        getJSON(name: string): Object;
+        withConverter(converter: ConverterFunc | ConverterObj): this;
+        noConflict(): this;
+    }
+
+    declare module.exports: Cookie;
+}

package.json

@@ -49,9 +49,11 @@
     "history": "4.10.1",
     "immortal-db": "^1.0.2",
     "immutable": "^4.0.0-rc.9",
+    "js-cookie": "^2.2.1",
     "material-ui-search-bar": "^1.0.0-beta.13",
     "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",
     "optimize-css-assets-webpack-plugin": "5.0.3",
+    "polished": "^3.4.2",
     "qrcode.react": "1.0.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",

src/components/CookiesBanner/index.jsx

@@ -0,0 +1,166 @@
+// @flow
+import Checkbox from '@material-ui/core/Checkbox'
+import Close from '@material-ui/icons/Close'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import IconButton from '@material-ui/core/IconButton'
+import React, { useEffect, useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Link from '~/components/layout/Link'
+import { WELCOME_ADDRESS } from '~/routes/routes'
+import Button from '~/components/layout/Button'
+import { primary, mainFontFamily } from '~/theme/variables'
+import type { CookiesProps } from '~/logic/cookies/model/cookie'
+import { COOKIES_KEY } from '~/logic/cookies/model/cookie'
+import { loadFromCookie, saveCookie } from '~/utils/cookies'
+
+const useStyles = makeStyles({
+  container: {
+    backgroundColor: '#fff',
+    bottom: '0',
+    boxShadow: '0 2px 4px 0 rgba(212, 212, 211, 0.59)',
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'center',
+    left: '0',
+    minHeight: '200px',
+    padding: '27px 15px',
+    position: 'fixed',
+    width: '100%',
+  },
+  content: {
+    maxWidth: '100%',
+    width: '830px',
+  },
+  text: {
+    color: primary,
+    fontFamily: mainFontFamily,
+    fontSize: '16px',
+    fontWeight: 'normal',
+    lineHeight: '1.38',
+    margin: '0 0 25px',
+    textAlign: 'center',
+  },
+  form: {
+    columnGap: '10px',
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    rowGap: '10px',
+    '@media (min-width: 960px)': {
+      gridTemplateColumns: '1fr 1fr 1fr',
+    },
+  },
+  formItem: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  link: {
+    textDecoration: 'underline',
+    '&:hover': {
+      textDecoration: 'none',
+    },
+  },
+  close: {
+    position: 'absolute',
+    right: '12px',
+    top: '12px',
+  },
+})
+
+const CookiesBanner = () => {
+  const classes = useStyles()
+
+  const [showBanner, setShowBanner] = useState(false)
+  const [localNecessary, setLocalNecessary] = useState(true)
+  const [localAnalytics, setLocalAnalytics] = useState(false)
+
+  useEffect(() => {
+    async function fetchCookiesFromStorage() {
+      const cookiesState: CookiesProps = await loadFromCookie(COOKIES_KEY)
+      if (cookiesState) {
+        const { acceptedNecessary, acceptedAnalytics } = cookiesState
+        setLocalAnalytics(acceptedAnalytics)
+        setLocalNecessary(acceptedNecessary)
+        setShowBanner(acceptedNecessary === false)
+      } else {
+        setShowBanner(true)
+      }
+    }
+    fetchCookiesFromStorage()
+  }, [])
+
+  const acceptCookiesHandler = async () => {
+    const newState = {
+      acceptedNecessary: true,
+      acceptedAnalytics: true,
+    }
+    await saveCookie(COOKIES_KEY, newState, 365)
+    setShowBanner(false)
+  }
+
+  const closeCookiesBannerHandler = async () => {
+    const newState = {
+      acceptedNecessary: true,
+      acceptedAnalytics: localAnalytics,
+    }
+    const expDays = localAnalytics ? 365 : 7
+    await saveCookie(COOKIES_KEY, newState, expDays)
+    setShowBanner(false)
+  }
+
+
+  return showBanner ? (
+    <div className={classes.container}>
+      <IconButton onClick={() => closeCookiesBannerHandler()} className={classes.close}><Close /></IconButton>
+      <div className={classes.content}>
+        <p className={classes.text}>
+      We use cookies to give you the best experience and to help improve our website. Please read our
+          {' '}
+          <Link className={classes.link} to={WELCOME_ADDRESS}>Cookie Policy</Link>
+          {' '}
+      for more information. By clicking &quot;Accept all&quot;, you agree to the storing of cookies on your device
+      to enhance site navigation, analyze site usage and provide customer support.
+        </p>
+        <div className={classes.form}>
+          <div className={classes.formItem}>
+            <FormControlLabel
+              checked={localNecessary}
+              disabled
+              label="Necessary"
+              name="Necessary"
+              onChange={() => setLocalNecessary((prev) => !prev)}
+              value={localNecessary}
+              control={(
+                <Checkbox disabled />
+              )}
+            />
+          </div>
+          <div className={classes.formItem}>
+            <FormControlLabel
+              label="Analytics"
+              name="Analytics"
+              onChange={() => setLocalAnalytics((prev) => !prev)}
+              value={localAnalytics}
+              control={(
+                <Checkbox />
+              )}
+            />
+          </div>
+          <div className={classes.formItem}>
+            <Button
+              color="primary"
+              component={Link}
+              minWidth={180}
+              variant="outlined"
+              onClick={() => acceptCookiesHandler()}
+            >
+              Accept All
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  ) : null
+}
+
+export default CookiesBanner

src/components/Notifier/index.js

@@ -75,9 +75,4 @@ class Notifier extends Component<Props> {
   }
 }
 
-export default withSnackbar(
-  connect(
-    selector,
-    actions,
-  )(Notifier),
-)
+export default withSnackbar(connect(selector, actions)(Notifier))

src/components/Root/index.scss

@@ -9,32 +9,34 @@ body {
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local("Averta-Regular"), url(../../assets/fonts/Averta-normal.woff2) format('woff2');
+  src: local("Averta-Regular"),
+    url(../../assets/fonts/Averta-normal.woff2) format("woff2");
 }
 
 @font-face {
-  font-family: 'Averta';
+  font-family: "Averta";
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src: local("Averta-Extrabold"), url(../../assets/fonts/Averta-ExtraBold.woff2) format('woff2');
+  src: local("Averta-Extrabold"),
+    url(../../assets/fonts/Averta-ExtraBold.woff2) format("woff2");
 }
 
 body {
-  position: absolute;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  background-color: $background;
   bottom: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  overflow-x: hidden;
   color: $fontColor;
-  font-family: 'Averta', monospace;
+  font-family: "Averta", monospace;
   font-size: $mediumFontSize;
+  left: 0;
   margin: 0;
-  background-color: $background;
+  overflow-x: hidden;
+  position: absolute;
+  right: 0;
   text-rendering: geometricPrecision;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  top: 0;
 }
 
 body > div:first-child {

src/components/layout/PageFrame/index.jsx

@@ -15,6 +15,7 @@ import AlertIcon from './assets/alert.svg'
 import CheckIcon from './assets/check.svg'
 import ErrorIcon from './assets/error.svg'
 import InfoIcon from './assets/info.svg'
+import CookiesBanner from '~/components/CookiesBanner'
 import styles from './index.scss'
 
 const notificationStyles = {
@@ -92,6 +93,7 @@ const PageFrame = ({ children, classes, currentNetwork }: Props) => {
           {children}
         </SidebarProvider>
       </SnackbarProvider>
+      <CookiesBanner />
     </div>
   )
 }

src/index.js

@@ -1,14 +1,13 @@
 // @flow
 import 'babel-polyfill'
-
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { BigNumber } from 'bignumber.js'
 import Root from '~/components/Root'
-import { store } from '~/store'
-import loadSafesFromStorage from '~/routes/safe/store/actions/loadSafesFromStorage'
 import loadActiveTokens from '~/logic/tokens/store/actions/loadActiveTokens'
 import loadDefaultSafe from '~/routes/safe/store/actions/loadDefaultSafe'
+import loadSafesFromStorage from '~/routes/safe/store/actions/loadSafesFromStorage'
+import { store } from '~/store'
 
 BigNumber.set({ EXPONENTIAL_AT: [-7, 255] })
 
@@ -18,8 +17,13 @@ if (process.env.NODE_ENV !== 'production') {
   whyDidYouRender(React)
 }
 
+// $FlowFixMe
 store.dispatch(loadActiveTokens())
 store.dispatch(loadSafesFromStorage())
 store.dispatch(loadDefaultSafe())
 
-ReactDOM.render(<Root />, document.getElementById('root'))
+const root = document.getElementById('root')
+
+if (root !== null) {
+  ReactDOM.render(<Root />, root)
+}

src/logic/contracts/safeContracts.js

@@ -75,7 +75,10 @@ export const deploySafeContract = async (safeAccounts: string[], numConfirmation
   const gasPrice = await calculateGasPrice()
 
   return proxyFactoryMaster.createProxy(safeMaster.address, gnosisSafeData, {
-    from: userAccount, gas, gasPrice, value: 0,
+    from: userAccount,
+    gas,
+    gasPrice,
+    value: 0,
   })
 }
 

src/logic/cookies/model/cookie.js

@@ -0,0 +1,11 @@
+// @flow
+import type { RecordOf } from 'immutable'
+
+export const COOKIES_KEY = 'COOKIES'
+
+export type CookiesProps = {
+  acceptedNecessary: boolean,
+  acceptedAnalytics: boolean,
+}
+
+export type Cookie = RecordOf<CookiesProps>

src/logic/notifications/store/actions/enqueueSnackbar.js

@@ -8,9 +8,7 @@ export const ENQUEUE_SNACKBAR = 'ENQUEUE_SNACKBAR'
 
 const addSnackbar = createAction<string, *>(ENQUEUE_SNACKBAR)
 
-const enqueueSnackbar = (notification: NotificationProps) => (
-  dispatch: ReduxDispatch<GlobalState>,
-) => {
+const enqueueSnackbar = (notification: NotificationProps) => (dispatch: ReduxDispatch<GlobalState>) => {
   const newNotification = {
     ...notification,
     key: new Date().getTime(),

src/logic/notifications/store/selectors/index.js

@@ -5,11 +5,10 @@ import { type GlobalState } from '~/store'
 import { NOTIFICATIONS_REDUCER_ID } from '~/logic/notifications/store/reducer/notifications'
 import { type Notification } from '~/logic/notifications/store/models/notification'
 
-const notificationsMapSelector = (
-  state: GlobalState,
-): Map<string, Notification> => state[NOTIFICATIONS_REDUCER_ID]
+const notificationsMapSelector = (state: GlobalState): Map<string, Notification> => state[NOTIFICATIONS_REDUCER_ID]
 
-export const notificationsListSelector: Selector<GlobalState, {}, List<Notification>> = createSelector(
-  notificationsMapSelector,
-  (notifications: Map<string, Notification>): List<Notification> => notifications.toList(),
-)
+export const notificationsListSelector: Selector<
+  GlobalState,
+  {},
+  List<Notification>,
+> = createSelector(notificationsMapSelector, (notifications: Map<string, Notification>): List<Notification> => notifications.toList())

src/logic/safe/transactions/send.js

@@ -68,7 +68,18 @@ export const getExecutionTransaction = async (
     const web3 = getWeb3()
     const contract = new web3.eth.Contract(GnosisSafeSol.abi, safeInstance.address)
 
-    return contract.methods.execTransaction(to, valueInWei, data, operation, safeTxGas, baseGas, gasPrice, gasToken, refundReceiver, sigs)
+    return contract.methods.execTransaction(
+      to,
+      valueInWei,
+      data,
+      operation,
+      safeTxGas,
+      baseGas,
+      gasPrice,
+      gasToken,
+      refundReceiver,
+      sigs,
+    )
   } catch (err) {
     console.error(`Error while creating transaction: ${err}`)