Merge pull request #2181 from oasisprotocol/lw/fix-parcel-upgrade-warnings

Fix warnings and error overlays since parcel@2.14

Author: lukaw3d

.changelog/2181.bugfix.md

@@ -0,0 +1 @@
+Fix warnings and error overlays since parcel@2.14

extension/src/ExtLedgerAccessPopup/index.tsx

@@ -1,3 +1,4 @@
+import '../../../src/utils/warnImportMapViolation'
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 

extension/src/popup/popup.tsx

@@ -1,3 +1,4 @@
+import '../../../src/utils/warnImportMapViolation'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'

internals/getSecurityHeaders.js

@@ -18,12 +18,20 @@ const hmr = `
   http://localhost:2222
   ws://localhost:2222
 `
-// If this changes csp-react-error-overlay.spec.ts will print a new sha in an error in csp-react-error-overlay.spec.ts.
-const reactErrorOverlay = `'sha256-yt+SNVxRkIi6H6yb7ndFuZM1esMX9esg3UpRHaTsyVk='`
 const hmrScripts = `
   'unsafe-eval'
 `
 
+const warnImportMapViolation = async () => {
+  const importMap = document.querySelector('script[type="importmap"]')
+  if (!importMap) return
+  const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(importMap.innerHTML))
+  const cspHash = `sha256-${btoa(String.fromCharCode(...new Uint8Array(hash)))}`
+  console.warn(
+    `In dev mode parcel adds <script type="importmap">. CSP blocks executing this and shows it as violation '${cspHash}', but imports still work.`,
+  )
+}
+
 /**
  * Keep this synced with deployment headers
  *
@@ -34,8 +42,7 @@ const getCsp = ({ isExtension, isDev }) =>
     default-src 'none';
     script-src
       'self'
-      ${!isExtension && isDev ? reactErrorOverlay : '' /* Manifest v3 doesn't allow anything */}
-      ${!isExtension && isDev ? hmrScripts : ''}
+      ${!isExtension && isDev ? hmrScripts : '' /* Manifest v3 doesn't allow anything */}
       ${!isExtension ? 'report-sample' : ''}
       ;
     style-src
@@ -109,4 +116,4 @@ const getPermissionsPolicy = () =>
     .join(' ')
     .replace(/ ,/g, ',')
 
-module.exports = { getCsp, getPermissionsPolicy, reactErrorOverlay }
+module.exports = { getCsp, getPermissionsPolicy, warnImportMapViolation }

package.json

@@ -66,14 +66,14 @@
     "bip39": "3.1.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "copy-to-clipboard": "3.3.3",
-    "grommet": "2.36.1",
-    "grommet-icons": "4.12.0",
+    "grommet": "2.47.0",
+    "grommet-icons": "4.12.4",
     "i18next": "23.6.0",
     "i18next-browser-languagedetector": "7.1.0",
     "lodash": "4.17.21",
     "qrcode.react": "3.2.0",
     "react": "18.3.1",
-    "react-data-table-component": "6.11.8",
+    "react-data-table-component": "7.7.0",
     "react-dom": "18.3.1",
     "react-helmet-async": "1.3.0",
     "react-i18next": "13.3.1",
@@ -148,7 +148,7 @@
     "@typescript-eslint/eslint-plugin": "6.9.1",
     "bip39": "3.1.0",
     "eslint-plugin-react": "7.37.4",
-    "grommet-icons": "4.12.0",
+    "grommet-icons": "4.12.4",
     "typescript": "5.2.2",
     "protobufjs": "7.2.5"
   },

playwright/tests/csp-react-error-overlay.spec.ts

@@ -1,14 +1,11 @@
 import { test, expect } from '@playwright/test'
-import { reactErrorOverlay } from '../../internals/getSecurityHeaders.js'
 import { expectNoErrorsInConsole } from '../utils/expectNoErrorsInConsole'
 
-test('Dev Content-Security-Policy should allow react-error-overlay', async ({ page, baseURL }) => {
+test('Dev Content-Security-Policy should allow @parcel/error-overlay', async ({ page, baseURL }) => {
   if (baseURL !== 'http://localhost:3000') test.skip()
   expect((await page.request.head('/')).headers()).toHaveProperty('content-security-policy')
-  expect((await page.request.head('/')).headers()['content-security-policy']).toContain(reactErrorOverlay)
   await page.goto('/e2e')
   await page.getByRole('button', { name: 'Trigger uncaught error' }).click()
   await expectNoErrorsInConsole(page)
-  await expect(page.locator('iframe')).toBeVisible()
-  await expect(page.frameLocator('iframe').getByText('ReferenceError')).toBeVisible()
+  await expect(page.getByText('ReferenceError')).toBeVisible({ timeout: 30_000 })
 })

src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,40 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AddressBox /> should render address properly 1`] = `
-.c3 {
-  display: inline-block;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  width: 18px;
-  height: 18px;
-  fill: #666666;
-  stroke: #666666;
-}
-
-.c3 g {
-  fill: inherit;
-  stroke: inherit;
-}
-
-.c3 *:not([stroke])[fill='none'] {
-  stroke-width: 0;
-}
-
-.c3 *[stroke*='#'],
-.c3 *[STROKE*='#'] {
-  stroke: inherit;
-  fill: none;
-}
-
-.c3 *[fill-rule],
-.c3 *[FILL-RULE],
-.c3 *[fill*='#'],
-.c3 *[FILL*='#'] {
-  fill: inherit;
-  stroke: none;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -95,6 +61,40 @@ exports[`<AddressBox /> should render address properly 1`] = `
   flex: 1 1;
 }
 
+.c3 {
+  display: inline-block;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  fill: #666666;
+  stroke: #666666;
+}
+
+.c3 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c3 *:not([stroke])[fill='none'] {
+  stroke-width: 0;
+}
+
+.c3 *[stroke*='#'],
+.c3 *[STROKE*='#'] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c3 *[fill-rule],
+.c3 *[FILL-RULE],
+.c3 *[fill*='#'],
+.c3 *[FILL*='#'] {
+  fill: inherit;
+  stroke: none;
+}
+
 .c5 {
   font-size: inherit;
   line-height: normal;
@@ -230,74 +230,6 @@ exports[`<AddressBox /> should render address properly 1`] = `
 `;
 
 exports[`<EditableNameBox /> should render name properly 1`] = `
-.c6 {
-  display: inline-block;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  width: 16px;
-  height: 16px;
-  fill: link;
-  stroke: link;
-}
-
-.c6 g {
-  fill: inherit;
-  stroke: inherit;
-}
-
-.c6 *:not([stroke])[fill='none'] {
-  stroke-width: 0;
-}
-
-.c6 *[stroke*='#'],
-.c6 *[STROKE*='#'] {
-  stroke: inherit;
-  fill: none;
-}
-
-.c6 *[fill-rule],
-.c6 *[FILL-RULE],
-.c6 *[fill*='#'],
-.c6 *[FILL*='#'] {
-  fill: inherit;
-  stroke: none;
-}
-
-.c10 {
-  display: inline-block;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  width: 18px;
-  height: 18px;
-  fill: #666666;
-  stroke: #666666;
-}
-
-.c10 g {
-  fill: inherit;
-  stroke: inherit;
-}
-
-.c10 *:not([stroke])[fill='none'] {
-  stroke-width: 0;
-}
-
-.c10 *[stroke*='#'],
-.c10 *[STROKE*='#'] {
-  stroke: inherit;
-  fill: none;
-}
-
-.c10 *[fill-rule],
-.c10 *[FILL-RULE],
-.c10 *[fill*='#'],
-.c10 *[FILL*='#'] {
-  fill: inherit;
-  stroke: none;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -389,6 +321,74 @@ exports[`<EditableNameBox /> should render name properly 1`] = `
   flex-direction: column;
 }
 
+.c6 {
+  display: inline-block;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  fill: link;
+  stroke: link;
+}
+
+.c6 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c6 *:not([stroke])[fill='none'] {
+  stroke-width: 0;
+}
+
+.c6 *[stroke*='#'],
+.c6 *[STROKE*='#'] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c6 *[fill-rule],
+.c6 *[FILL-RULE],
+.c6 *[fill*='#'],
+.c6 *[FILL*='#'] {
+  fill: inherit;
+  stroke: none;
+}
+
+.c10 {
+  display: inline-block;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  fill: #666666;
+  stroke: #666666;
+}
+
+.c10 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c10 *:not([stroke])[fill='none'] {
+  stroke-width: 0;
+}
+
+.c10 *[stroke*='#'],
+.c10 *[STROKE*='#'] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c10 *[fill-rule],
+.c10 *[FILL-RULE],
+.c10 *[fill*='#'],
+.c10 *[FILL*='#'] {
+  fill: inherit;
+  stroke: none;
+}
+
 .c4 {
   font-size: inherit;
   line-height: normal;