Using generic NonceProvider in bootstrap

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

package.json

@@ -252,8 +252,6 @@
   },
   "devDependencies": {
     "@emeraldpay/hashicon-react": "^0.4.0",
-    "@emotion/cache": "^11.1.3",
-    "@emotion/react": "^11.1.5",
     "@material-ui/core": "^4.10.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",

src/renderer/bootstrap.tsx

@@ -19,8 +19,7 @@ import { filesystemProvisionerStore } from "../main/extension-filesystem";
 import { App } from "./components/app";
 import { LensApp } from "./lens-app";
 import { themeStore } from "./theme.store";
-import { CacheProvider } from "@emotion/react";
-import createCache from "@emotion/cache";
+import { NonceProvider as StyleCache } from "react-select";
 
 /**
  * If this is a development buid, wait a second to attach
@@ -82,11 +81,14 @@ export async function bootstrap(App: AppComponent) {
       window.location.href = "about:blank";
     }
   });
+
+  const cacheProps = { nonce: "lens", cacheKey: "lens" };
+
   render(<>
     {isMac && <div id="draggable-top" />}
-    <CacheProvider value={createCache({ key: "lens" })}>
+    <StyleCache {...cacheProps}>
       <App />
-    </CacheProvider>
+    </StyleCache>
   </>, rootElem);
 }
 

yarn.lock

@@ -387,7 +387,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@^11.1.1", "@emotion/react@^11.1.5":
+"@emotion/react@^11.1.1":
   version "11.1.5"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
   integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==