Support for Moonbase Alpha (#552)

* upgrading to ocean.js 0.14.6

* proper ocean.js update

* make all explorer links work

* handle new moonbeamalpha config

* add moonbase alpha to chain user preferences

* more ocean.js v0.14 updates

* switch to grid

* upgrading ocean.js to 0.14.7

* lock to @oceanprotocol/contracts v0.5.16

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

.env.example

@@ -1,5 +1,5 @@
 # Default network, possible values: 
-# "development", "ropsten", "rinkeby", "mainnet", "polygon"
+# "development", "ropsten", "rinkeby", "mainnet", "polygon", "moonbeamalpha"
 GATSBY_NETWORK="rinkeby"
 
 #GATSBY_INFURA_PROJECT_ID="xxx"

package-lock.json

@@ -1573,16 +1573,16 @@
       }
     },
     "@ethereum-navigator/atlas": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@ethereum-navigator/atlas/-/atlas-0.7.1.tgz",
-      "integrity": "sha512-YV7tMVwpRcJbc+Kj/Rr0RzNV/2hHBEEM1/tMWDVLB15dGJfoQuRfPJpFt6uq+Ji6s3EkldIt9kZylEeG5ALKAA=="
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@ethereum-navigator/atlas/-/atlas-0.7.3.tgz",
+      "integrity": "sha512-kCyV/8wOqSU/gn+H7uSaR/Xc+ZogXrW2QmF5MfZL2+NUS4+y0emlfBphTGwP5bOB0Cg2goJTcI7Y6+0LNcJYzg=="
     },
     "@ethereum-navigator/navigator": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@ethereum-navigator/navigator/-/navigator-0.5.2.tgz",
-      "integrity": "sha512-agSE2xzLxOKKid8QiS4v8jPhnFXW5uSXsICZ4JmS437aCZ8L3SUAy3cDQKikHb2PPZ3AazJO05k8m8i6u77peQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@ethereum-navigator/navigator/-/navigator-0.5.3.tgz",
+      "integrity": "sha512-AOhS1EXPrVeWbLvW3fVbw5AZ2mPYXDKOqMojgVz602U/tEjRXAsw/Gwa+oSOssAyU37SNKBaIorEhBiEY+RYdA==",
       "requires": {
-        "@ethereum-navigator/atlas": "^0.7.1",
+        "@ethereum-navigator/atlas": "^0.7.2",
         "web3": "^1.2.7"
       }
     },
@@ -3622,17 +3622,17 @@
       "integrity": "sha512-j4PEZSVtKSqxDYMVh/hd5vk088Bg6a6QkrUMTXN9Q6OIFAMfHM235f1AxaakNrEyK0FKMD908KuJEdfFLRn9Hw=="
     },
     "@oceanprotocol/contracts": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-0.5.15.tgz",
-      "integrity": "sha512-16edzNeO2v5WLW9ClsZ9VvMH1w24fZZutCmDhZWPirCAIdojGWRHraompfICjY1fovDljnZ5MpJpffuQ6kgxOA=="
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-0.5.16.tgz",
+      "integrity": "sha512-p7aFIUT8RVoMzdPP7ML8G08BnQ09syywKjOT16hqJm0GmofunEuVffUXbryG4EkQ+qRbf/zeoxSmesi79kQXlA=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.14.4",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.14.4.tgz",
-      "integrity": "sha512-f6Wj6FLpYmuFSGtnDw0lex0Vru1tGgvZqtwrdBYtMD+hW6Bn3B51+F/9ACVYAiSRDADrqPTDZiZetT2Ji3QY7Q==",
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.14.7.tgz",
+      "integrity": "sha512-xnf2XX3VjmsvcNjLi8nwfWryTNT/t/oK+eOttOu5CrOBEm4Ghi98LKT1zX3ZlE4WObUDypaXDIkLuaxCtBVOOg==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.2",
-        "@oceanprotocol/contracts": "^0.5.10",
+        "@oceanprotocol/contracts": "^0.5.16",
         "@types/crypto-js": "^4.0.1",
         "cross-fetch": "^3.1.2",
         "crypto-js": "^4.0.0",
@@ -18101,7 +18101,7 @@
       }
     },
     "ethereumjs-abi": {
-      "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#1ce6a1d64235fabe2aaf827fd606def55693508f",
+      "version": "git+https://github.com/ethereumjs/ethereumjs-abi.git#1a27c59c15ab1e95ee8e5c4ed6ad814c49cc439e",
       "from": "git+https://github.com/ethereumjs/ethereumjs-abi.git",
       "requires": {
         "bn.js": "^4.11.8",

package.json

@@ -27,7 +27,8 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "^5.14.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.14.4",
+    "@oceanprotocol/contracts": "0.5.16",
+    "@oceanprotocol/lib": "^0.14.7",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^3.0.3",
     "@sindresorhus/slugify": "^1.0.0",

src/components/molecules/UserPreferences/Appearance.module.css

@@ -1,14 +1,13 @@
 .buttons {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  gap: calc(var(--spacer) / 4);
+  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
   padding-bottom: calc(var(--spacer) / 8);
 }
 
 .button {
-  display: block;
-  flex: 0 0 48%;
-  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2)
-    calc(var(--spacer) / 4) calc(var(--spacer) / 2) !important;
+  width: auto;
+  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 4) !important;
   border-radius: var(--border-radius);
   text-transform: none;
 }

src/components/molecules/UserPreferences/Chain.tsx

@@ -18,8 +18,9 @@ export default function Chain(): ReactElement {
   }
 
   const chains = [
-    { name: 'ETH', oceanConfig: 'mainnet' },
-    { name: 'Polygon/Matic', oceanConfig: 'polygon' }
+    { name: 'ETH', oceanConfig: 'mainnet', label: 'Mainnet' },
+    { name: 'Polygon/Matic', oceanConfig: 'polygon', label: 'Mainnet' },
+    { name: 'Moonbase Alpha', oceanConfig: 'moonbeamalpha', label: 'Testnet' }
   ]
 
   // TODO: to fully solve https://github.com/oceanprotocol/market/issues/432
@@ -42,7 +43,7 @@ export default function Chain(): ReactElement {
               onClick={() => connectOcean(button.oceanConfig)}
             >
               {button.name}
-              <span>Mainnet</span>
+              <span>{button.label}</span>
             </Button>
           )
         })}

src/components/organisms/AssetActions/Pool/index.tsx

@@ -252,7 +252,7 @@ export default function Pool(): ReactElement {
               <ExplorerLink
                 networkId={networkId}
                 path={
-                  networkId === 137
+                  networkId === 137 || networkId === 1287
                     ? `tokens/${ddo.dataToken}`
                     : `token/${ddo.dataToken}`
                 }

src/components/organisms/AssetContent/MetaMain.tsx

@@ -24,7 +24,7 @@ export default function MetaMain(): ReactElement {
         <ExplorerLink
           networkId={networkId}
           path={
-            networkId === 137
+            networkId === 137 || networkId === 1287
               ? `tokens/${ddo?.dataToken}`
               : `token/${ddo?.dataToken}`
           }

src/utils/ocean.ts

@@ -16,7 +16,10 @@ export function getOceanConfig(
 ): ConfigHelperConfig {
   return new ConfigHelper().getConfig(
     network,
-    network === 'polygon' || network === 137
+    network === 'polygon' ||
+      network === 137 ||
+      network === 'moonbeamalpha' ||
+      network === 1287
       ? undefined
       : process.env.GATSBY_INFURA_PROJECT_ID
   ) as ConfigHelperConfig