🐛 UNSAFE_COMPONENT error (#439)

* 🐛 UNSAFE_COMPONENT error

* 🐛 fix unit tests for react-helmet-async

__mocks__/helmet.js

@@ -1,6 +1,6 @@
-jest.mock('react-helmet', () => {
+jest.mock('react-helmet-async', () => {
   const React = require('react')
-  const plugin = jest.requireActual('react-helmet')
+  const plugin = jest.requireActual('react-helmet-async')
   const mockHelmet = ({ children, ...props }) =>
     React.createElement(
       'div',
@@ -14,4 +14,4 @@ jest.mock('react-helmet', () => {
     ...plugin,
     Helmet: jest.fn().mockImplementation(mockHelmet),
   }
-})
+})

package.json

@@ -18,23 +18,23 @@
     "@cosmjs/cosmwasm-stargate": "^0.31.1",
     "@delphi-labs/shuttle-react": "^3.8.0",
     "@keplr-wallet/cosmos": "^0.12.20",
+    "@sentry/nextjs": "^7.64.0",
     "@splinetool/react-spline": "^2.2.1",
     "@splinetool/runtime": "^0.9.414",
-    "@sentry/nextjs": "^7.64.0",
     "@tanstack/react-table": "^8.9.3",
     "@tippyjs/react": "^4.2.6",
     "bignumber.js": "^9.1.1",
     "classnames": "^2.3.2",
     "debounce-promise": "^3.1.2",
-    "lodash.throttle": "^4.1.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "moment": "^2.29.4",
     "next": "13.4.9",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^1.3.0",
     "react-qr-code": "^2.0.11",
     "react-router-dom": "^6.14.2",
     "react-spring": "^9.7.2",
@@ -72,4 +72,4 @@
     "tailwindcss": "^3.3.3",
     "typescript": "5.2.2"
   }
-}
+}

src/components/PageMetadata.tsx

@@ -1,9 +1,11 @@
-import { useLocation } from 'react-router-dom'
-import { Helmet } from 'react-helmet'
 import { useMemo } from 'react'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
+import { useLocation } from 'react-router-dom'
 
 import PAGE_METADATA from 'constants/pageMetadata'
 
+const helmetContext = {}
+
 function PageMetadata() {
   const location = useLocation()
 
@@ -13,13 +15,15 @@ function PageMetadata() {
   }, [location])
 
   return (
-    <Helmet>
+    <HelmetProvider context={helmetContext}>
-      <title>{metadata.title}</title>
+      <Helmet>
-      <meta content={metadata.title} property='og:title' />
+        <title>{metadata.title}</title>
-      <meta name='description' content={metadata.description} property='og:description' />
+        <meta content={metadata.title} property='og:title' />
-      <meta name='keywords' content={metadata.keywords} property='og:keywords' />
+        <meta name='description' content={metadata.description} property='og:description' />
-    </Helmet>
+        <meta name='keywords' content={metadata.keywords} property='og:keywords' />
+      </Helmet>
+    </HelmetProvider>
   )
 }
 
-export default PageMetadata
+export default PageMetadata

src/store/slices/broadcast.ts

@@ -63,7 +63,6 @@ export default function createBroadcastSlice(
   }
   const getEstimatedFee = async (messages: MsgExecuteContract[]) => {
     if (!get().client) {
-      console.warn('Client not initialized')
       return defaultFee
     }
     try {

yarn.lock

@@ -6419,6 +6419,13 @@ interpret@^1.0.0:
   resolved "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz"
@@ -7455,7 +7462,7 @@ long@^5.0.0, long@^5.2.3:
   resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
   integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8359,20 +8366,21 @@ react-draggable@^4.4.5:
     clsx "^1.1.1"
     prop-types "^15.8.1"
 
-react-fast-compare@^3.1.1:
+react-fast-compare@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
-react-helmet@^6.1.0:
+react-helmet-async@^1.3.0:
-  version "6.1.0"
+  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
-  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
   dependencies:
-    object-assign "^4.1.1"
+    "@babel/runtime" "^7.12.5"
+    invariant "^2.2.4"
     prop-types "^15.7.2"
-    react-fast-compare "^3.1.1"
+    react-fast-compare "^3.2.0"
-    react-side-effect "^2.1.0"
+    shallowequal "^1.1.0"
 
 react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
@@ -8429,11 +8437,6 @@ react-router@6.14.2:
   dependencies:
     "@remix-run/router" "1.7.2"
 
-react-side-effect@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
-  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
-
 react-smooth@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.2.tgz#0ef24213628cb13bf4305194a050e1db4302a3a1"
@@ -8891,6 +8894,11 @@ sha.js@^2.4.0, sha.js@^2.4.11, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"