fix: polyfill ResizeObserver (#6553)

* polyfill

* lint

* polyfill test

* dedupe

package.json

@@ -116,7 +116,6 @@
     "ms.macro": "^2.0.0",
     "prettier": "^2.7.1",
     "react-scripts": "^4.0.3",
-    "resize-observer-polyfill": "^1.5.1",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.5.3",
     "ts-transform-graphql-tag": "^0.2.1",
@@ -136,6 +135,7 @@
     "@graphql-codegen/typescript-operations": "^2.5.8",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@graphql-codegen/typescript-resolvers": "^2.7.8",
+    "@juggle/resize-observer": "^3.4.0",
     "@lingui/core": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",

src/polyfills.ts

 import 'polyfill-object.fromentries'
 
+import { ResizeObserver } from '@juggle/resize-observer'
 import flat from 'array.prototype.flat'
 import flatMap from 'array.prototype.flatmap'
 
+if (!window.ResizeObserver) {
+  window.ResizeObserver = ResizeObserver
+}
+
 flat.shim()
 flatMap.shim()

src/setupTests.ts

 import '@testing-library/jest-dom' // jest custom assertions
 import 'jest-styled-components' // adds style diffs to snapshot tests
 
+import { ResizeObserver } from '@juggle/resize-observer'
 import type { createPopper } from '@popperjs/core'
 import { useWeb3React } from '@web3-react/core'
 import failOnConsole from 'jest-fail-on-console'
-import ResizeObserver from 'resize-observer-polyfill'
 import { Readable } from 'stream'
 import { mocked } from 'test-utils/mocked'
 import { TextDecoder, TextEncoder } from 'util'
@@ -18,21 +18,21 @@ if (typeof global.TextEncoder === 'undefined') {
   global.TextDecoder = TextDecoder as typeof global.TextDecoder
 }
 
-global.ResizeObserver = ResizeObserver
-
 // Sets origin to the production origin, because some tests depend on this.
 // This prevents each test file from needing to set this manually.
 global.origin = 'https://app.uniswap.org'
 
 global.matchMedia =
   global.matchMedia ||
-  function () {
+  (() => {
     return {
       matches: false,
       addEventListener: jest.fn(),
       removeEventListener: jest.fn(),
     }
-  }
+  })
+
+global.ResizeObserver = ResizeObserver
 
 jest.mock('@popperjs/core', () => {
   const core = jest.requireActual('@popperjs/core')

yarn.lock

@@ -3012,10 +3012,10 @@
     "@json-rpc-tools/types" "^1.7.6"
     "@pedrouid/environment" "^1.0.1"
 
-"@juggle/resize-observer@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
-  integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
+"@juggle/resize-observer@^3.3.1", "@juggle/resize-observer@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
 "@lingui/babel-plugin-extract-messages@^3.9.0":
   version "3.9.0"
@@ -17747,11 +17747,6 @@ reselect@^4.1.5:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
   integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"