Reduce React dependency to v17

unstoppabledomains · Nov 7, 2023 · ec52f16 · ec52f16
1 parent a33346a
commit ec52f16
Show file tree

Hide file tree

Showing 5 changed files with 292 additions and 91 deletions.
diff --git a/packages/ui-components/CHANGELOG.md b/packages/ui-components/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.0.21
+
+- Remove dependency on React 18 (now works in both React 17 & 18)
+
 ## 0.0.1
 
-- Initial version
+- Initial version
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@unstoppabledomains/ui-components",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "private": true,
   "description": "An open and reusable suite of Unstoppable Domains management components",
   "keywords": [
@@ -28,6 +28,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "5.10.3",
+    "@mui/lab": "5.0.0-alpha.98",
+    "@mui/material": "5.10.4",
     "@pushprotocol/restapi": "^1.4.15",
     "@pushprotocol/socket": "^0.5.1",
     "@swc/cli": "^0.1.57",
@@ -39,9 +42,9 @@
     "@types/numeral": "^2.0.2",
     "@types/qs": "^6.9.8",
     "@types/ramda": "^0.29.6",
-    "@types/react": "^18.0.0",
+    "@types/react": "^17.0.0",
     "@types/react-cookies": "^0.1.1",
-    "@types/react-dom": "^18.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-lazy-load-image-component": "^1.6.0",
     "@types/react-linkify": "^1.0.1",
     "@uauth/js": "^2.8.0",
@@ -70,9 +73,9 @@
     "numeral": "^2.0.6",
     "qs": "^6.11.2",
     "ramda": "^0.27.1",
-    "react": "^18.0.0",
+    "react": "^17.0.0",
     "react-cookies": "^0.1.1",
-    "react-dom": "^18.0.0",
+    "react-dom": "^17.0.0",
     "react-emoji-render": "^2.0.1",
     "react-hook-form": "^7.42.1",
     "react-infinite-scroll-component": "^6.1.0",

diff --git a/server/package.json b/server/package.json
@@ -19,8 +19,8 @@
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "resolutions": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0"
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0"
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.4",
@@ -39,8 +39,8 @@
     "@types/numeral": "^2.0.2",
     "@types/qs": "^6.9.8",
     "@types/ramda": "^0.29.6",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-lazy-load-image-component": "^1.6.0",
     "@uauth/js": "^2.8.0",
     "@unstoppabledomains/config": "workspace:^",
@@ -71,9 +71,9 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "qs": "^6.11.2",
     "ramda": "^0.27.1",
-    "react": "^18.0.0",
+    "react": "^17.0.0",
     "react-code-blocks": "^0.1.4",
-    "react-dom": "^18.0.0",
+    "react-dom": "^17.0.0",
     "react-emoji-render": "^2.0.1",
     "react-hook-form": "^7.42.1",
     "react-infinite-scroll-component": "^6.1.0",

diff --git a/server/tests/test-utils.tsx b/server/tests/test-utils.tsx
@@ -25,26 +25,25 @@ const createTestQueryClient = () =>
 
 // test class to wrap test components with required providers
 const createWrapper =
-  ({theme, children}: {theme?: Theme; children: React.ReactNode}): React.FC =>
-  () =>
-    (
-      <QueryClientProvider client={createTestQueryClient()}>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <ThemeProvider theme={(theme || defaultTheme) as any}>
-          <SnackbarProvider>
-            <uiComponents.Web3ContextProvider>
-              <uiComponents.TokenGalleryProvider>
-                <uiComponents.UnstoppableMessagingProvider>
-                  <uiComponents.TranslationProvider>
-                    {children}
-                  </uiComponents.TranslationProvider>
-                </uiComponents.UnstoppableMessagingProvider>
-              </uiComponents.TokenGalleryProvider>
-            </uiComponents.Web3ContextProvider>
-          </SnackbarProvider>
-        </ThemeProvider>
-      </QueryClientProvider>
-    );
+  ({theme}: {theme?: Theme} = {}): React.FC =>
+  ({children}) => (
+    <QueryClientProvider client={createTestQueryClient()}>
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      <ThemeProvider theme={(theme || defaultTheme) as any}>
+        <SnackbarProvider>
+          <uiComponents.Web3ContextProvider>
+            <uiComponents.TokenGalleryProvider>
+              <uiComponents.UnstoppableMessagingProvider>
+                <uiComponents.TranslationProvider>
+                  {children}
+                </uiComponents.TranslationProvider>
+              </uiComponents.UnstoppableMessagingProvider>
+            </uiComponents.TokenGalleryProvider>
+          </uiComponents.Web3ContextProvider>
+        </SnackbarProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
 
 // renders a child component with required wrappers
 export const customRender = (
@@ -72,7 +71,7 @@ export const customRender = (
 
   // render the test component
   return render(ui, {
-    wrapper: createWrapper({theme, children: ui}),
+    wrapper: createWrapper({theme}),
     ...options,
   });
 };