package updates (#1355)

* package updates, ocean.js v1.0.0-next.37

* activate portis components again

* console error fix

package.json

@@ -21,14 +21,13 @@
     "@coingecko/cryptoformat": "^0.4.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.0.0-next.35",
+    "@oceanprotocol/lib": "^1.0.0-next.37",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.7",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^0.2.5",
-    "@walletconnect/web3-provider": "^1.7.6",
+    "@walletconnect/web3-provider": "^1.7.7",
     "axios": "^0.26.1",
-    "bignumber.js": "^9.0.2",
     "chart.js": "^3.7.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
@@ -44,34 +43,34 @@
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
     "myetherwallet-blockies": "^0.1.1",
-    "next": "^12.1.0",
+    "next": "^12.1.5",
     "query-string": "^7.1.1",
     "react": "^17.0.2",
-    "react-chartjs-2": "^4.0.1",
+    "react-chartjs-2": "^4.1.0",
     "react-clipboard.js": "^2.0.16",
     "react-data-table-component": "^6.11.7",
     "react-dom": "^17.0.2",
     "react-dotdotdot": "^1.3.1",
     "react-modal": "^3.14.4",
-    "react-paginate": "^8.1.2",
+    "react-paginate": "^8.1.3",
     "react-spring": "^9.4.4",
     "react-tabs": "^3.2.3",
-    "react-toastify": "^8.1.0",
+    "react-toastify": "^8.2.0",
     "remark": "^13.0.0",
     "remark-gfm": "^1.0.0",
     "remark-html": "^13.0.1",
     "remove-markdown": "^0.3.0",
     "slugify": "^1.6.5",
-    "swr": "^1.2.2",
+    "swr": "^1.3.0",
     "urql": "^2.2.0",
     "use-dark-mode": "^2.3.1",
-    "web3": "^1.7.1",
+    "web3": "^1.7.3",
-    "web3modal": "^1.9.5",
+    "web3modal": "^1.9.7",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.2.1",
-    "@types/chart.js": "^2.9.35",
+    "@types/chart.js": "^2.9.37",
     "@types/d3": "^7.1.0",
     "@types/js-cookie": "^3.0.1",
     "@types/loadable__component": "^5.13.1",
@@ -102,7 +101,7 @@
     "process": "^0.11.10",
     "serve": "^13.0.2",
     "stream-http": "^3.2.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.6.3"
   },
   "repository": {
     "type": "git",

src/components/Header/Wallet/Details.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '@context/UserPreferences'
 import Button from '@shared/atoms/Button'
@@ -7,6 +7,7 @@ import Conversion from '@shared/Price/Conversion'
 import { useWeb3 } from '@context/Web3'
 import { getOceanConfig } from '@utils/ocean'
 import styles from './Details.module.css'
+import InputElement from '@shared/FormInput/InputElement'
 
 export default function Details(): ReactElement {
   const {
@@ -26,7 +27,7 @@ export default function Details(): ReactElement {
     address: string
     symbol: string
   }>()
-  // const [portisNetwork, setPortisNetwork] = useState<string>()
+  const [portisNetwork, setPortisNetwork] = useState<string>()
 
   useEffect(() => {
     if (!networkId) return
@@ -45,14 +46,14 @@ export default function Details(): ReactElement {
   }, [networkData, networkId])
 
   // Handle network change for Portis
-  // async function handlePortisNetworkChange(e: ChangeEvent<HTMLSelectElement>) {
+  async function handlePortisNetworkChange(e: ChangeEvent<HTMLSelectElement>) {
-  //   setPortisNetwork(e.target.value)
+    setPortisNetwork(e.target.value)
-  //   const portisNetworkName = e.target.value.toLowerCase()
+    const portisNetworkName = e.target.value.toLowerCase()
-  //   await web3Provider._portis.changeNetwork(portisNetworkName)
+    await web3Provider._portis.changeNetwork(portisNetworkName)
-  //   // TODO: using our connect initializes a new Portis instance,
+    // TODO: using our connect initializes a new Portis instance,
-  //   // which then defaults back to initial network (Mainnet).
+    // which then defaults back to initial network (Mainnet).
-  //   // await connect()
+    // await connect()
-  // }
+  }
 
   return (
     <div className={styles.details}>
@@ -75,7 +76,7 @@ export default function Details(): ReactElement {
               <img className={styles.walletLogo} src={web3ProviderInfo?.logo} />
               {web3ProviderInfo?.name}
             </span>
-            {/* {web3ProviderInfo?.name === 'Portis' && (
+            {web3ProviderInfo?.name === 'Portis' && (
               <InputElement
                 name="network"
                 type="select"
@@ -84,7 +85,7 @@ export default function Details(): ReactElement {
                 value={portisNetwork}
                 onChange={handlePortisNetworkChange}
               />
-            )} */}
+            )}
             {web3ProviderInfo?.name === 'MetaMask' && (
               <AddToken
                 address={oceanTokenMetadata?.address}

src/components/Publish/AvailableNetworks/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { Fragment, ReactElement } from 'react'
 import styles from './index.module.css'
 import Network from './Network'
 import useNetworkMetadata, {
@@ -40,12 +40,12 @@ export default function AvailableNetworks(): ReactElement {
       {networkCategories.map(
         (networkCategory) =>
           networkCategory.data.length > 0 && (
-            <>
+            <Fragment key={networkCategory.title}>
               <h4 className={styles.title}>{networkCategory.title}</h4>
               <ul className={styles.networks}>
                 {networkList(networkCategory.data)}
               </ul>
-            </>
+            </Fragment>
           )
       )}
     </div>