add moonriver support (#900)

* add moonriver

* bump ocean.js to v0.19.2

* fix network display

* maybe fix that damn git+ssh problem

* specific detection for moonriver in Web3Provider too

* fix code comment link

* fix network switch button for Moonriver

* compute success message tweak

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

app.config.js

@@ -10,10 +10,10 @@ module.exports = {
 
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
-  chainIds: [1, 137, 56],
+  chainIds: [1, 137, 56, 1285],
 
   // List of all supported chainIds. Used to populate the Chains user preferences list.
-  chainIdsSupported: [1, 3, 4, 137, 80001, 1287, 56, 2021000],
+  chainIdsSupported: [1, 3, 4, 137, 80001, 1287, 56, 2021000, 1285],
 
   rbacUrl: process.env.GATSBY_RBAC_URL,
 

package.json

@@ -28,7 +28,7 @@
     "@coingecko/cryptoformat": "^0.4.4",
     "@loadable/component": "^5.15.0",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^0.19.0",
+    "@oceanprotocol/lib": "^0.19.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.1.0",
     "@sindresorhus/slugify": "^2.1.0",

src/components/molecules/UserPreferences/Networks/index.tsx

@@ -23,9 +23,14 @@ export function filterNetworksByType(
     // HEADS UP! Only networkData.network === 'mainnet' is consistent
     // while not every test network in the network data has 'testnet'
     // in its place. So for the 'testnet' case filter for all non-'mainnet'.
+    //
+    // HEADS UP NO. 2! We hack in mainnet detection for moonriver as their
+    // network data uses the `network` key wrong over in
+    // https://github.com/ethereum-lists/chains/blob/master/_data/chains/eip155-1285.json
+    //
     return type === 'mainnet'
-      ? networkData.network === type
-      : networkData.network !== 'mainnet'
+      ? networkData.network === type || networkData.network === 'moonriver'
+      : networkData.network !== 'mainnet' && networkData.network !== 'moonriver'
   })
   return finalNetworks
 }

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

@@ -465,10 +465,7 @@ export default function Compute({
 
       <footer className={styles.feedback}>
         {isPublished && (
-          <SuccessConfetti
-            success="Your job started successfully! Watch the progress on the history page."
-            action={<SuccessAction />}
-          />
+          <SuccessConfetti success="Your job started successfully! Watch the progress below or on your profile." />
         )}
       </footer>
       {accountId && (

src/providers/Web3.tsx

@@ -258,7 +258,9 @@ function Web3Provider({ children }: { children: ReactNode }): ReactElement {
     setNetworkDisplayName(networkDisplayName)
 
     // Figure out if we're on a chain's testnet, or not
-    setIsTestnet(networkData?.network !== 'mainnet')
+    setIsTestnet(
+      networkData?.network !== 'mainnet' && networkData.network !== 'moonriver'
+    )
 
     Logger.log(`[web3] Network display name set to: ${networkDisplayName}`)
   }, [networkId, networksList])

src/utils/web3.ts

@@ -56,11 +56,14 @@ export function getNetworkDisplayName(
   let displayName
 
   switch (networkId) {
+    case 137:
+      displayName = 'Polygon'
+      break
     case 1287:
       displayName = 'Moonbase Alpha'
       break
-    case 137:
-      displayName = 'Polygon'
+    case 1285:
+      displayName = 'Moonriver'
       break
     case 80001:
       displayName = 'Polygon Mumbai'
@@ -94,24 +97,31 @@ export async function addCustomNetwork(
   web3Provider: any,
   network: EthereumListsChain
 ): Promise<void> {
-  const newNewtworkData = {
+  // Always add explorer URL from ocean.js first, as it's null sometimes
+  // in network data
+  const blockExplorerUrls = [
+    getOceanConfig(network.networkId).explorerUri,
+    network.explorers && network.explorers[0].url
+  ]
+
+  const newNetworkData = {
     chainId: `0x${network.chainId.toString(16)}`,
     chainName: getNetworkDisplayName(network, network.chainId),
     nativeCurrency: network.nativeCurrency,
     rpcUrls: network.rpc,
-    blockExplorerUrls: [network.explorers[0].url]
+    blockExplorerUrls
   }
   try {
     await web3Provider.request({
       method: 'wallet_switchEthereumChain',
-      params: [{ chainId: newNewtworkData.chainId }]
+      params: [{ chainId: newNetworkData.chainId }]
     })
   } catch (switchError) {
     if (switchError.code === 4902) {
       await web3Provider.request(
         {
           method: 'wallet_addEthereumChain',
-          params: [newNewtworkData]
+          params: [newNetworkData]
         },
         (err: string, added: any) => {
           if (err || 'error' in added) {