hotfix: 3.45.0 (#1211)

config-overrides.js

@@ -0,0 +1,33 @@
+const webpack = require('webpack');
+
+module.exports = function override(config) {
+  // Fallback configurations for compatibility
+  const fallback = config.resolve.fallback || {};
+  Object.assign(fallback, {
+    "crypto": require.resolve("crypto-browserify"),
+    "stream": require.resolve("readable-stream"),
+    "assert": require.resolve("assert"),
+    "http": require.resolve("stream-http"),
+    "https": require.resolve("https-browserify"),
+    "os": require.resolve("os-browserify"),
+    "url": require.resolve("url")
+  });
+  config.resolve.fallback = fallback;
+
+  // Plugins configuration
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js', // updated the path
+      Buffer: ['buffer', 'Buffer']
+    })
+  ]);
+
+  // Disable source maps
+  config.devtool = false;
+
+  config.stats = {
+    warnings: false
+  };
+
+  return config;
+}

package.json

@@ -1,11 +1,12 @@
 {
   "name": "d.buzz-client",
   "homepage": ".",
-  "version": "3.44.10",
+  "version": "3.45.0",
   "private": true,
   "dependencies": {
     "3id-blockchain-utils": "^1.3.1",
-    "@ceramicnetwork/http-client": "^1.5.7",
+    "@apollo/client": "^3.7.10",
+    "@ceramicnetwork/http-client": "^2.35.0",
     "@ceramicstudio/idx": "^0.12.2",
     "@fingerprintjs/fingerprintjs": "^3.3.2",
     "@fleekhq/fleek-storage-js": "^1.0.24",
@@ -14,28 +15,34 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@mintrawa/hive-auth-client": "^0.0.8",
-    "@spknetwork/graph-client": "^1.1.1",
+    "@spknetwork/graph-client": "1.2.2",
     "@stablelib/sha256": "^1.0.1",
-    "axios": "^0.21.1",
+    "@walletconnect/ethereum-provider": "^2.10.0",
+    "@walletconnect/modal": "^2.6.1",
+    "@walletconnect/time": "^1.0.2",
+    "axios": "^1.6.0",
     "bluebird": "^3.7.2",
     "bootstrap": "^4.5.0",
     "browser-image-compression": "^1.0.15",
+    "buffer": "^6.0.3",
     "caesar-shift": "^1.0.0",
     "classnames": "^2.2.6",
-    "crypto-js": "^4.0.0",
-    "dids": "^2.4.3",
+    "crypto-js": "^4.2.0",
+    "dids": "^4.0.4",
     "diff-match-patch": "^1.0.5",
     "emoji-mart": "^3.0.1",
     "env-cmd": "^10.1.0",
+    "graphql": "^16.8.1",
     "heic2any": "^0.0.4",
     "immutable": "^4.0.0-rc.12",
     "js-cookie": "^3.0.5",
     "key-did-provider-ed25519": "^1.1.0",
     "key-did-resolver": "^1.4.4",
     "lottie-react": "^2.1.0",
-    "markdown-link-extractor": "^1.2.3",
+    "markdown-link-extractor": "^3.1.0",
     "moment": "^2.27.0",
     "npm-text-parser": "^1.0.8",
+    "process": "^0.11.10",
     "qrcode.react": "^1.0.1",
     "query-string": "^6.13.1",
     "react": "^16.13.1",
@@ -59,7 +66,7 @@
     "react-router-dom": "^5.2.0",
     "react-router-hash-link": "^2.3.1",
     "react-router-last-location": "^2.0.1",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^5.0.1",
     "react-scrollspy": "^3.4.3",
     "react-share": "^4.4.0",
     "react-soundcloud-embedded": "^2.0.7",
@@ -74,21 +81,21 @@
     "redux-saga-thunk": "^0.7.3",
     "remove-markdown": "^0.3.0",
     "rxjs": "^7.5.4",
-    "sanitize-html": "1.27.0",
+    "sanitize-html": "2.3.2",
     "source-map-explorer": "^2.5.2",
     "speakingurl": "^14.0.1",
     "typewriter-effect": "^2.17.0",
     "uint8arrays": "^3.0.0",
     "uuid": "^8.2.0",
     "uuid-random": "^1.3.2",
-    "web3": "^1.7.1",
+    "web3": "^4.3.0",
     "web3modal": "^1.9.5"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "PORT=2020 env-cmd -f .env.development react-scripts start",
-    "build:dev": "env-cmd -f .env.development react-scripts build && chmod +X ./change-version.sh",
-    "build:prod": "env-cmd -f .env.production react-scripts build && chmod +X ./change-version.sh",
+    "start": "PORT=2020 GENERATE_SOURCEMAP=false env-cmd -f .env.development react-app-rewired start",
+    "build:dev": "env-cmd -f .env.development react-app-rewired build && chmod +X ./change-version.sh",
+    "build:prod": "env-cmd -f .env.production react-app-rewired build && chmod +X ./change-version.sh",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint src",
@@ -111,19 +118,49 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
+    "assert": "^2.0.0",
+    "browser": "^0.2.6",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
     "enzyme": "^3.11.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.0",
     "gulp": "^4.0.2",
     "gulp-uglify": "^3.0.2",
+    "https-browserify": "^1.0.0",
     "jquery": "^3.5.1",
+    "os-browserify": "^0.3.0",
     "popper.js": "^1.16.1",
-    "typescript": "^4.1.3"
+    "process": "^0.11.10",
+    "react-app-rewired": "^2.2.1",
+    "readable-stream": "^4.2.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "typescript": "^4.1.3",
+    "url": "^0.11.0"
   },
   "resolutions": {
     "did-jwt": "5.1.0",
-    "react-virtualized": "9.18.5"
+    "react-virtualized": "9.18.5",
+    "uint8arrays": "^3.0.0",
+    "nth-check": "^2.0.1",
+    "fast-json-patch": "3.1.1",
+    "glob-parent": "5.1.2",
+    "axios": "^1.6.0",
+    "postcss": "8.4.31",
+    "@babel/traverse": "7.23.2",
+    "@adobe/css-tools": "4.3.2",
+    "crypto-js": "4.2.0",
+    "graphql": "16.8.1",
+    "browserify-sign": "4.2.2",
+    "tough-cookie": "4.1.3",
+    "sanitize-html": "2.3.2",
+    "web3": "4.3.0"
+  },
+  "browser": {
+    "process": "process/browser.js"
   }
 }

src/components/common/BuzzPhotoGrid/index.jsx

@@ -35,7 +35,7 @@ const useStyles = createUseStyles(theme => ({
 
     '@media (max-width: 480px)': {
       height: !isMobile ? 127 : 200,
-    }
+    },
   },
   imageGridItem: {
     height: '100%',
@@ -66,7 +66,7 @@ const useStyles = createUseStyles(theme => ({
     fontSize: '2rem',
     color: '#ffffff',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  }
+  },
 }))
 
 
@@ -164,7 +164,7 @@ const BuzzPhotoGrid = ({
     setTimeout(() => { 
       image.style.visibility = 'visible'
       onImageLoad()
-     }, 2000)
+    },2000)
 
     if(onImageLoad) {
       onImageLoad()
@@ -307,8 +307,7 @@ const BuzzPhotoGrid = ({
                 <div className={classes.moreImages}>
                   +{images.length - 4}
                 </div>
-              </div>
-            }
+              </div>}
           </div>
         </div>}
     </div>

src/components/common/BuzzRenderer/index.jsx

@@ -23,21 +23,21 @@ const createReactElement = (node, skipTags) => {
   }
 
   if (node.nodeType === Node.ELEMENT_NODE) {
-    const tagName = node.tagName.toLowerCase();
+    const tagName = node.tagName.toLowerCase()
     if (skipTags.includes(tagName)) {
       return null
     }
 
-  const isSelfClosing = ['br', 'img', 'input', 'hr', 'meta', 'link'].includes(tagName)
-  const attributes = Array.from(node.attributes).reduce((acc, attr) => {
-    const propName = attr.name === 'class' ? 'className' : attr.name
-    acc[propName] = attr.value
-    return acc
-  }, {})
+    const isSelfClosing = ['br', 'img', 'input', 'hr', 'meta', 'link'].includes(tagName)
+    const attributes = Array.from(node.attributes).reduce((acc, attr) => {
+      const propName = attr.name === 'class' ? 'className' : attr.name
+      acc[propName] = attr.value
+      return acc
+    }, {})
 
-  const children = isSelfClosing
-    ? []
-    : Array.from(node.childNodes).map(childNode => createReactElement(childNode, skipTags))
+    const children = isSelfClosing
+      ? []
+      : Array.from(node.childNodes).map(childNode => createReactElement(childNode, skipTags))
 
     return React.createElement(tagName, attributes, ...children)
   }
@@ -53,7 +53,7 @@ const BuzzRenderer = ({ content, skipTags = [], className }) => {
       ...sanitizeHtml.defaults.allowedAttributes,
       span: ['class', 'id'],
     },
-  });
+  })
   const parser = new DOMParser()
   const document = parser.parseFromString(sanitizedContent.trim(), 'text/html')
   const body = document.body

src/services/ceramic.js

@@ -1,3 +1,5 @@
+import { CeramicClient } from '@ceramicnetwork/http-client'
+
 let axios
 
 import('axios').then((Axios) => {
@@ -68,13 +70,12 @@ const idxAliases = {
 
 export const API_NODE = 'https://us-01.infra.3speak.tv'
 
-let Ceramic
 let idx
 let spk
+
+const Ceramic = new CeramicClient(localStorage.getItem('ceramic') || hosts[0])
+
 // dynamic imports
-import('@ceramicnetwork/http-client').then((CeramicNetwork) => {
-  Ceramic = new CeramicNetwork.CeramicClient(localStorage.getItem('ceramic') || hosts[0])
-})
 import('@ceramicstudio/idx').then((CeramicStudio) => {
   idx = new CeramicStudio.IDX({ceramic: Ceramic, aliases: idxAliases})
 })