chainId → networkId

package-lock.json

@@ -3294,14 +3294,14 @@
       "integrity": "sha512-j4PEZSVtKSqxDYMVh/hd5vk088Bg6a6QkrUMTXN9Q6OIFAMfHM235f1AxaakNrEyK0FKMD908KuJEdfFLRn9Hw=="
     },
     "@oceanprotocol/contracts": {
-      "version": "0.5.1",
+      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-0.5.2.tgz",
-      "integrity": "sha512-bt5uwh79D759H6O4bAv+ycGdZQISFAxi65cqIygzA9hwsu29+GuOLwu1mxrzl2lVNLs6Emxo7TaDv0jAoyqnCg=="
+      "integrity": "sha512-PTMeP8Ixe66F2YMUgVLibg9k7r2db85Syb66tWUpI+dGnt5KzW1SmQOsyVRjp3x8avRAyMFYaOodXp570jnsmQ=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.5.2",
+      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.5.3.tgz",
-      "integrity": "sha512-LCiQuae9cP+Hcu5rDbASBbmEwhxujm5Z49WtaKo2x+UtDAovjjXtNeSMw7WjyJAe+T/gOkHhzn92w0Cc9SUOQA==",
+      "integrity": "sha512-LYKqgAuf5PNOiGr6Je6v8yupaFmFojiPtkl/gywlBhF/MsMn/PdKLvHRaNge5y69hoJVXfYYEpr0HzyHq9Mx5w==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.1",
@@ -3316,11 +3316,11 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.0.50",
+      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.50.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.1.0.tgz",
-      "integrity": "sha512-HhGqHB3ZSCZJhcO44nRmOBKKmaFSnSX51M3ghP+kuxdZTfs30dQgncbkf8NBXsLhivi8zxzxkkg65L+OaxYtoA==",
+      "integrity": "sha512-KndcIA79I0DYRe4iZPUaVFYyrTTj5lpaZGmB/qAjUs2ugX7h+1OFfXEMjOj3kaOFT4FcNyVaNpcaYlHbnQG2IQ==",
       "requires": {
-        "@oceanprotocol/lib": "^0.5.2",
+        "@oceanprotocol/lib": "^0.5.3",
         "axios": "^0.20.0",
         "decimal.js": "^10.2.1",
         "web3": "^1.3.0",

package.json

@@ -22,8 +22,8 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.5.2",
+    "@oceanprotocol/lib": "^0.5.3",
-    "@oceanprotocol/react": "^0.0.50",
+    "@oceanprotocol/react": "^0.1.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",

src/components/molecules/FormFields/Price/Dynamic.tsx

@@ -26,11 +26,11 @@ export default function Dynamic({
   content: any
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const { account, balance, chainId, refreshBalance } = useOcean()
+  const { account, balance, networkId, refreshBalance } = useOcean()
   const { weightOnDataToken } = priceOptions
 
   const [error, setError] = useState<string>()
-  const correctNetwork = isCorrectNetwork(chainId)
+  const correctNetwork = isCorrectNetwork(networkId)
   const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
     c.toUpperCase()
   )
@@ -46,7 +46,7 @@ export default function Dynamic({
     } else {
       setError(undefined)
     }
-  }, [ocean, chainId, account, balance, correctNetwork, desiredNetworkName])
+  }, [ocean, networkId, account, balance, correctNetwork, desiredNetworkName])
 
   // refetch balance periodically
   useEffect(() => {
@@ -58,7 +58,7 @@ export default function Dynamic({
     return () => {
       clearInterval(balanceInterval)
     }
-  }, [ocean, chainId, account])
+  }, [ocean, networkId, account])
 
   return (
     <div className={styles.dynamic}>

src/components/molecules/Wallet/Account.tsx

@@ -23,8 +23,9 @@ const Blockies = ({ account }: { account: string | undefined }) => {
 // Forward ref for Tippy.js
 // eslint-disable-next-line
 const Account = React.forwardRef((props, ref: any) => {
-  const { accountId, status, connect, chainId } = useOcean()
+  const { accountId, status, connect, networkId } = useOcean()
-  const hasSuccess = status === 1 && isCorrectNetwork(chainId)
+  const hasSuccess = status === 1 && isCorrectNetwork(networkId)
+  console.log(networkId)
 
   async function handleActivation(e: FormEvent<HTMLButtonElement>) {
     // prevent accidentially submitting a form the button might be in

src/components/molecules/Wallet/Details.tsx

@@ -10,7 +10,7 @@ import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 
 export default function Details(): ReactElement {
-  const { balance, connect, logout, chainId } = useOcean()
+  const { balance, connect, logout, networkId } = useOcean()
   const { locale } = useUserPreferences()
 
   return (
@@ -30,7 +30,7 @@ export default function Details(): ReactElement {
           <span title="Connected provider">
             {getInjectedProviderName()}
             <br />
-            {getNetworkName(chainId)}
+            {getNetworkName(networkId)}
           </span>
           <Button
             style="text"

src/components/molecules/Wallet/Feedback.tsx

@@ -17,9 +17,9 @@ export default function Web3Feedback({
   isBalanceSufficient?: boolean
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const { account, status, chainId } = useOcean()
+  const { account, status, networkId } = useOcean()
   const isOceanConnectionError = status === -1
-  const correctNetwork = isCorrectNetwork(chainId)
+  const correctNetwork = isCorrectNetwork(networkId)
   const showFeedback =
     !account ||
     isOceanConnectionError ||

src/utils/wallet.ts

@@ -39,7 +39,7 @@ export const web3ModalOpts = {
   theme: web3ModalTheme
 }
 
-export function getChainId(network: string): number {
+export function getNetworkId(network: string): number {
   switch (network) {
     case 'mainnet':
       return 1
@@ -47,14 +47,16 @@ export function getChainId(network: string): number {
       return 4
     case 'kovan':
       return 42
+    case 'development':
+      return 8996
     default:
       return 0
   }
 }
 
-export function isCorrectNetwork(chainId: number): boolean {
+export function isCorrectNetwork(networkId: number): boolean {
-  const configuredNetwork = getChainId(network)
+  const configuredNetwork = getNetworkId(network)
-  return configuredNetwork === chainId
+  return configuredNetwork === networkId
 }
 
 export function accountTruncate(account: string): string {
@@ -63,14 +65,16 @@ export function accountTruncate(account: string): string {
   return truncated
 }
 
-export function getNetworkName(chainId: number): string {
+export function getNetworkName(networkId: number): string {
-  switch (chainId) {
+  switch (networkId) {
     case 1:
       return 'Main'
     case 4:
       return 'Rinkeby'
     case 42:
       return 'Kovan'
+    case 8996:
+      return 'Development'
     default:
       return 'Unknown'
   }