Merge branch '189-cookie-banner' of github.com:gnosis/safe-react into 189-cookie-banner

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;
+}

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

@@ -1,46 +0,0 @@
-// flow-typed signature: e215c06fb9ec51e72b3ed908312ee496
-// flow-typed version: <<STUB>>/polish_v^0.2.3/flow_v0.112.0
-
-/**
- * This is an autogenerated libdef stub for:
- *
- *   'polish'
- *
- * Fill this stub out by replacing all the `any` types.
- *
- * Once filled out, we encourage you to share your work with the
- * community by sending a pull request to:
- * https://github.com/flowtype/flow-typed
- */
-
-declare module 'polish' {
-  declare module.exports: any;
-}
-
-/**
- * We include stubs for each file inside this npm package in case you need to
- * require those files directly. Feel free to delete any files that aren't
- * needed.
- */
-declare module 'polish/polish' {
-  declare module.exports: any;
-}
-
-declare module 'polish/polish.min' {
-  declare module.exports: any;
-}
-
-declare module 'polish/polish.spec' {
-  declare module.exports: any;
-}
-
-// Filename aliases
-declare module 'polish/polish.js' {
-  declare module.exports: $Exports<'polish/polish'>;
-}
-declare module 'polish/polish.min.js' {
-  declare module.exports: $Exports<'polish/polish.min'>;
-}
-declare module 'polish/polish.spec.js' {
-  declare module.exports: $Exports<'polish/polish.spec'>;
-}

package.json

@@ -49,10 +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",
-    "polish": "^0.2.3",
+    "polished": "^3.4.2",
     "qrcode.react": "1.0.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",

src/components/CookiesBanner/index.jsx

@@ -9,9 +9,9 @@ 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 { loadFromStorage, saveToStorage } from '~/utils/storage'
 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: {
@@ -76,7 +76,7 @@ const CookiesBanner = () => {
 
   useEffect(() => {
     async function fetchCookiesFromStorage() {
-      const cookiesState: CookiesProps = await loadFromStorage(COOKIES_KEY)
+      const cookiesState: CookiesProps = await loadFromCookie(COOKIES_KEY)
       if (cookiesState) {
         const { acceptedNecessary, acceptedAnalytics } = cookiesState
         setLocalAnalytics(acceptedAnalytics)
@@ -94,7 +94,7 @@ const CookiesBanner = () => {
       acceptedNecessary: true,
       acceptedAnalytics: true,
     }
-    await saveToStorage(COOKIES_KEY, newState)
+    await saveCookie(COOKIES_KEY, newState, 365)
     setShowBanner(false)
   }
 
@@ -103,7 +103,8 @@ const CookiesBanner = () => {
       acceptedNecessary: true,
       acceptedAnalytics: localAnalytics,
     }
-    await saveToStorage(COOKIES_KEY, newState)
+    const expDays = localAnalytics ? 365 : 7
+    await saveCookie(COOKIES_KEY, newState, expDays)
     setShowBanner(false)
   }
 

src/utils/cookies/index.js

@@ -0,0 +1,29 @@
+// @flow
+import Cookies from 'js-cookie'
+import { getNetwork } from '~/config'
+
+const PREFIX = `v1_${getNetwork()}`
+
+export const loadFromCookie = async (key: string): Promise<*> => {
+  try {
+    const stringifiedValue = await Cookies.get(`${PREFIX}__${key}`)
+    if (stringifiedValue === null || stringifiedValue === undefined) {
+      return undefined
+    }
+
+    return JSON.parse(stringifiedValue)
+  } catch (err) {
+    console.error(`Failed to load ${key} from cookies:`, err)
+    return undefined
+  }
+}
+
+export const saveCookie = async (key: string, value: *, expirationDays: number): Promise<*> => {
+  try {
+    const stringifiedValue = JSON.stringify(value)
+    const expiration = expirationDays ? { expires: expirationDays } : undefined
+    await Cookies.set(`${PREFIX}__${key}`, stringifiedValue, expiration)
+  } catch (err) {
+    console.error(`Failed to save ${key} in cookies:`, err)
+  }
+}

yarn.lock

@@ -11519,7 +11519,7 @@ jest@24.9.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
-js-cookie@^2.2.0:
+js-cookie@^2.2.0, js-cookie@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
@@ -14141,12 +14141,7 @@ pocket-js-core@0.0.3:
   dependencies:
     axios "^0.18.0"
 
-polish@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/polish/-/polish-0.2.3.tgz#4a95296b5501dd10d3b25b8e6ed8339ef4deb147"
-  integrity sha1-SpUpa1UB3RDTsluObtgznvTesUc=
-
-polished@^3.3.1:
+polished@^3.3.1, polished@^3.4.2:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.2.tgz#b4780dad81d64df55615fbfc77acb52fd17d88cd"
   integrity sha512-9Rch6iMZckABr6EFCLPZsxodeBpXMo9H4fRlfR/9VjMEyy5xpo1/WgXlJGgSjPyVhEZNycbW7UmYMNyWS5MI0g==
@@ -19832,7 +19827,6 @@ websocket@1.0.29, "websocket@github:web3-js/WebSocket-Node#polyfill/globalThis":
   dependencies:
     debug "^2.2.0"
     es5-ext "^0.10.50"
-    gulp "^4.0.2"
     nan "^2.14.0"
     typedarray-to-buffer "^3.1.5"
     yaeti "^0.0.6"