typescript-cookie to js-cookie

lib/cookies.ts

-import type { Types } from 'typescript-cookie';
-import { Cookies } from 'typescript-cookie';
+import Cookies from 'js-cookie';
 
 import isBrowser from './isBrowser';
 
@@ -14,10 +13,13 @@ export function get(name?: NAMES | undefined | null, serverCookie?: string) {
   if (!isBrowser()) {
     return serverCookie ? getFromCookieString(serverCookie, name) : undefined;
   }
-  return Cookies.get(name);
+
+  if (name) {
+    return Cookies.get(name);
+  }
 }
 
-export function set(name: string, value: string, attributes: Types.CookieAttributes = {}) {
+export function set(name: string, value: string, attributes: Cookies.CookieAttributes = {}) {
   attributes.path = '/';
 
   return Cookies.set(name, value, attributes);

package.json

@@ -42,6 +42,7 @@
     "dayjs": "^1.11.5",
     "ethers": "^5.7.1",
     "framer-motion": "^6.5.1",
+    "js-cookie": "^3.0.1",
     "lodash": "^4.0.0",
     "next": "12.2.5",
     "node-fetch": "^3.2.9",
@@ -55,7 +56,6 @@
     "react-identicons": "^1.2.5",
     "react-jazzicon": "^1.0.4",
     "react-scroll": "^1.8.7",
-    "typescript-cookie": "^1.0.4",
     "use-font-face-observer": "^1.2.1"
   },
   "devDependencies": {
@@ -64,6 +64,7 @@
     "@testing-library/react": "^13.4.0",
     "@types/d3": "^7.4.0",
     "@types/jest": "^29.2.0",
+    "@types/js-cookie": "^3.0.2",
     "@types/node": "17.0.36",
     "@types/phoenix": "^1.5.4",
     "@types/qrcode": "^1.5.0",

playwright/fixtures/auth.ts

 import type { BrowserContext } from '@playwright/test';
 
+import * as cookies from 'lib/cookies';
+
 export default function authFixture(context: BrowserContext) {
-  context.addCookies([ { name: '_explorer_key', value: 'foo', domain: 'localhost', path: '/' } ]);
+  context.addCookies([ { name: cookies.NAMES.API_TOKEN, value: 'foo', domain: 'localhost', path: '/' } ]);
 }

ui/snippets/navigation/NavigationDesktop.pw.tsx

@@ -2,6 +2,7 @@ import { Box, Flex } from '@chakra-ui/react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as cookies from 'lib/cookies';
 import authFixture from 'playwright/fixtures/auth';
 import TestApp from 'playwright/TestApp';
 
@@ -71,7 +72,7 @@ test('with tooltips +@desktop-xl -@default', async({ mount, page }) => {
 test.describe('cookie set to false', () => {
   const extendedTest = test.extend({
     context: ({ context }, use) => {
-      context.addCookies([ { name: 'nav_bar_collapsed', value: 'false', domain: 'localhost', path: '/' } ]);
+      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'false', domain: 'localhost', path: '/' } ]);
       use(context);
     },
   });
@@ -95,7 +96,7 @@ test.describe('cookie set to false', () => {
 test.describe('cookie set to true', () => {
   const extendedTest = test.extend({
     context: ({ context }, use) => {
-      context.addCookies([ { name: 'nav_bar_collapsed', value: 'true', domain: 'localhost', path: '/' } ]);
+      context.addCookies([ { name: cookies.NAMES.NAV_BAR_COLLAPSED, value: 'true', domain: 'localhost', path: '/' } ]);
       use(context);
     },
   });

yarn.lock

@@ -3480,6 +3480,11 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/js-cookie@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.2.tgz#451eaeece64c6bdac8b2dde0caab23b085899e0d"
+  integrity sha512-6+0ekgfusHftJNYpihfkMu8BWdeHs9EOJuGcSofErjstGPfPGEu9yTu4t460lTzzAMl2cM5zngQJqPMHbbnvYA==
+
 "@types/jsdom@^20.0.0":
   version "20.0.1"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-20.0.1.tgz#07c14bc19bd2f918c1929541cdaacae894744808"
@@ -6894,6 +6899,11 @@ joycon@^3.1.1:
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
   integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
 js-sdsl@^4.1.4:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
@@ -8902,11 +8912,6 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-typescript-cookie@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/typescript-cookie/-/typescript-cookie-1.0.4.tgz#22715aa394275e967fd734fa1417e24870504985"
-  integrity sha512-vZo252VmoEleD/dbE9Wb2lMK63V3M/8aqFbp2Pdb4Oxq8YqqADJ7iMh8THZenFXN+uZJPE8RXkztEaHkOptH4w==
-
 typescript@4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.2.tgz#1f9aa2ceb9af87cca227813b4310fff0b51593c4"