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

* '189-cookie-banner' of github.com:gnosis/safe-react:
  Adds cookies utils Replaces localStorage with cookies Adds js-cookie

package.json

@@ -49,6 +49,7 @@
     "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",

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==