Merge branch 'feature/v4-c2d' into fix/issue-1069-c2d-unsupported-networks

.env.example

@@ -1,4 +1,3 @@
-
 #NEXT_PUBLIC_INFURA_PROJECT_ID="xxx"
 #NEXT_PUBLIC_MARKET_FEE_ADDRESS="0xxx"
 #NEXT_PUBLIC_PUBLISHER_MARKET_ORDER_FEE="1"
@@ -8,11 +7,6 @@
 #NEXT_PUBLIC_CONSUME_MARKET_POOL_SWAP_FEE="1"
 #NEXT_PUBLIC_CONSUME_MARKET_FIXED_SWAP_FEE="1"
 
-
-
-#NEXT_PUBLIC_PORTIS_ID="xxx"
-
-
 #
 # ADVANCED SETTINGS
 #

.github/workflows/deploy.yml

@@ -17,7 +17,6 @@ jobs:
       - run: npm run build
         env:
           NEXT_PUBLIC_INFURA_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_INFURA_PROJECT_ID }}
-          NEXT_PUBLIC_PORTIS_ID: ${{ secrets.NEXT_PUBLIC_PORTIS_ID }}
 
       - run: npm run deploy:s3
         env:

app.config.js

@@ -75,9 +75,6 @@ module.exports = {
     storageKey: 'oceanDarkMode'
   },
 
-  // Wallets
-  portisId: process.env.NEXT_PUBLIC_PORTIS_ID || 'xxx',
-
   // Used to show or hide the fixed, dynamic or free price options
   // tab to publishers during the price creation.
   allowFixedPricing: process.env.NEXT_PUBLIC_ALLOW_FIXED_PRICING || 'true',

content/site.json

@@ -14,7 +14,7 @@
       "link": "/profile"
     }
   ],
-  "announcement": "Data NFTs, One-Sided Staking and more. [Explore OceanONDA V4](https://blog.oceanprotocol.com/oceanonda-v4-production-has-arrived-cb4fe8faaf39).",
+  "announcement": "Data NFTs, One-Sided Staking and more.",
   "warning": {
     "ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
   }

package-lock.json

@@ -15,7 +15,6 @@
         "@oceanprotocol/art": "^3.2.0",
         "@oceanprotocol/lib": "^1.1.2",
         "@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.8",
@@ -5239,17 +5238,6 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@portis/web3": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
-      "integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==",
-      "dependencies": {
-        "ethereumjs-util": "5.2.0",
-        "penpal": "3.0.7",
-        "pocket-js-core": "0.0.3",
-        "web3-provider-engine": "16.0.1"
-      }
-    },
     "node_modules/@react-spring/animated": {
       "version": "9.4.5",
       "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz",
@@ -33516,11 +33504,6 @@
         "node": ">=0.12"
       }
     },
-    "node_modules/penpal": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/penpal/-/penpal-3.0.7.tgz",
-      "integrity": "sha512-WSXiq5HnEvzvY05SHhaXcsviUmCvh4Ze8AiIZzvmdzaaYAAx4rx8c6Xq6+MaVDG/Nfve3VmGD8HyRP3CkPvPbQ=="
-    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -33616,48 +33599,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/pocket-js-core": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/pocket-js-core/-/pocket-js-core-0.0.3.tgz",
-      "integrity": "sha512-OUTEvEVutdjLT6YyldvAlSebpBueUUWg2XKxGNt5u3QqrmLpBOOBmdDnGMNJ+lEwXtko+JqgwFq+HTi4g1QDVg==",
-      "dependencies": {
-        "axios": "^0.18.0"
-      }
-    },
-    "node_modules/pocket-js-core/node_modules/axios": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
-      "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
-      "deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410",
-      "dependencies": {
-        "follow-redirects": "1.5.10",
-        "is-buffer": "^2.0.2"
-      }
-    },
-    "node_modules/pocket-js-core/node_modules/debug": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/pocket-js-core/node_modules/follow-redirects": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-      "dependencies": {
-        "debug": "=3.1.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/pocket-js-core/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-    },
     "node_modules/polished": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",
@@ -44984,6 +44925,7 @@
         "cross-fetch": "^3.1.5",
         "crypto-js": "^4.1.1",
         "decimal.js": "^10.3.1",
+        "web3": "^1.7.3",
         "web3-core": "^1.7.1",
         "web3-eth-contract": "^1.7.1"
       }
@@ -45035,6 +44977,7 @@
       "integrity": "sha512-rmVKYEsKzurfRU0xJz+iHelbi1LGlihIWZ7Qvmb/CBz1EkhL7nOkW4SVXmG2dA5Ce0si2gr88i6q4eBOMRNJ1w==",
       "dev": true,
       "requires": {
+        "@oclif/config": "^1.18.2",
         "@oclif/errors": "^1.3.5",
         "@oclif/help": "^1.0.1",
         "@oclif/parser": "^3.8.6",
@@ -45463,17 +45406,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
       "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
     },
-    "@portis/web3": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@portis/web3/-/web3-4.1.0.tgz",
-      "integrity": "sha512-efGssWqrwpYPzQyOupYPpWmjPU/WwcFGoPXzjLbjQ3Z4Z7Q4qqqwkMeE1mwMbxWudFKlHz/VxdpJrDA42Ufqrg==",
-      "requires": {
-        "ethereumjs-util": "5.2.0",
-        "penpal": "3.0.7",
-        "pocket-js-core": "0.0.3",
-        "web3-provider-engine": "16.0.1"
-      }
-    },
     "@react-spring/animated": {
       "version": "9.4.5",
       "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.5.tgz",
@@ -67517,11 +67449,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "penpal": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/penpal/-/penpal-3.0.7.tgz",
-      "integrity": "sha512-WSXiq5HnEvzvY05SHhaXcsviUmCvh4Ze8AiIZzvmdzaaYAAx4rx8c6Xq6+MaVDG/Nfve3VmGD8HyRP3CkPvPbQ=="
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -67590,46 +67517,6 @@
         "ts-pnp": "^1.1.6"
       }
     },
-    "pocket-js-core": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/pocket-js-core/-/pocket-js-core-0.0.3.tgz",
-      "integrity": "sha512-OUTEvEVutdjLT6YyldvAlSebpBueUUWg2XKxGNt5u3QqrmLpBOOBmdDnGMNJ+lEwXtko+JqgwFq+HTi4g1QDVg==",
-      "requires": {
-        "axios": "^0.18.0"
-      },
-      "dependencies": {
-        "axios": {
-          "version": "0.18.1",
-          "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
-          "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
-          "requires": {
-            "follow-redirects": "1.5.10",
-            "is-buffer": "^2.0.2"
-          }
-        },
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
     "polished": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",

package.json

@@ -27,7 +27,6 @@
     "@oceanprotocol/art": "^3.2.0",
     "@oceanprotocol/lib": "^1.1.2",
     "@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.8",

src/@context/MarketMetadata/_types.ts

@@ -18,7 +18,6 @@ export interface AppConfig {
   consumeMarketPoolSwapFee: string
   consumeMarketFixedSwapFee: string
   currencies: string[]
-  portisId: string
   allowFixedPricing: string
   allowDynamicPricing: string
   allowFreePricing: string

src/@context/Web3.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import Web3 from 'web3'
 import Web3Modal, { getProviderInfo, IProviderInfo } from 'web3modal'
-import { infuraProjectId as infuraId, portisId } from '../../app.config'
+import { infuraProjectId as infuraId } from '../../app.config'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import { isBrowser } from '@utils/index'
@@ -58,12 +58,6 @@ const providerOptions = isBrowser
       walletconnect: {
         package: WalletConnectProvider,
         options: { infuraId }
-      },
-      portis: {
-        package: require('@portis/web3'),
-        options: {
-          id: portisId
-        }
       }
       // torus: {
       //   package: require('@toruslabs/torus-embed')

src/@utils/accessDetailsAndPricing.ts

@@ -12,8 +12,7 @@ import {
   Asset,
   LoggerInstance,
   ProviderFees,
-  ProviderInstance,
+  ProviderInstance
-  unitsToAmount
 } from '@oceanprotocol/lib'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import { calcInGivenOut } from './pool'
@@ -174,22 +173,21 @@ function getAccessDetailsFromTokenPrice(
 ): AccessDetails {
   const accessDetails = {} as AccessDetails
 
-  if (tokenPrice && tokenPrice.orders && tokenPrice.orders.length > 0) {
+  if (tokenPrice?.orders?.length > 0) {
     const order = tokenPrice.orders[0]
-    const reusedOrder =
+    const reusedOrder = order?.reuses?.length > 0 ? order.reuses[0] : null
-      order && order.reuses && order.reuses.length > 0 ? order.reuses[0] : null
     // asset is owned if there is an order and asset has timeout 0 (forever) or if the condition is valid
     accessDetails.isOwned =
-      timeout === 0 || Date.now() / 1000 - order.createdTimestamp < timeout
+      timeout === 0 || Date.now() / 1000 - order?.createdTimestamp < timeout
     // the last valid order should be the last reuse order tx id if there is one
-    accessDetails.validOrderTx = reusedOrder ? reusedOrder.tx : order.tx
+    accessDetails.validOrderTx = reusedOrder?.tx || order?.tx
   }
 
   // TODO: fetch order fee from sub query
-  accessDetails.publisherMarketOrderFee = tokenPrice.publishMarketFeeAmount
+  accessDetails.publisherMarketOrderFee = tokenPrice?.publishMarketFeeAmount
 
   // free is always the best price
-  if (tokenPrice.dispensers && tokenPrice.dispensers.length > 0) {
+  if (tokenPrice?.dispensers?.length > 0) {
     const dispenser = tokenPrice.dispensers[0]
     accessDetails.type = 'free'
     accessDetails.addressOrId = dispenser.token.id
@@ -204,10 +202,7 @@ function getAccessDetailsFromTokenPrice(
   }
 
   // checking for fixed price
-  if (
+  if (tokenPrice?.fixedRateExchanges?.length > 0) {
-    tokenPrice.fixedRateExchanges &&
-    tokenPrice.fixedRateExchanges.length > 0
-  ) {
     const fixed = tokenPrice.fixedRateExchanges[0]
     accessDetails.type = 'fixed'
     accessDetails.addressOrId = fixed.exchangeId
@@ -228,7 +223,7 @@ function getAccessDetailsFromTokenPrice(
   }
 
   // checking for pools
-  if (tokenPrice.pools && tokenPrice.pools.length > 0) {
+  if (tokenPrice?.pools?.length > 0) {
     const pool = tokenPrice.pools[0]
     accessDetails.type = 'dynamic'
     accessDetails.addressOrId = pool.id
@@ -257,7 +252,6 @@ function getAccessDetailsFromTokenPrice(
  * @return {Promise<OrdePriceAndFee>}
  */
 export async function getOrderPriceAndFees(
-  web3: Web3,
   asset: AssetExtended,
   accountId?: string,
   paramsForPool?: CalcInGivenOutParams,
@@ -284,10 +278,10 @@ export async function getOrderPriceAndFees(
     !providerFees &&
     (await ProviderInstance.initialize(
       asset?.id,
-      asset.services[0].id,
+      asset?.services[0].id,
       0,
       accountId,
-      asset.services[0].serviceEndpoint
+      asset?.services[0].serviceEndpoint
     ))
   orderPriceAndFee.providerFee = providerFees || initializeData.providerFee
 

src/@utils/aquarius.ts

@@ -180,7 +180,7 @@ export async function getAssetsFromDidList(
   didList: string[],
   chainIds: number[],
   cancelToken: CancelToken
-): Promise<any> {
+): Promise<PagedAssets> {
   try {
     if (!(didList.length > 0)) return
 

src/@utils/compute.ts

@@ -21,7 +21,6 @@ import {
 } from './aquarius'
 import { fetchDataForMultipleChains } from './subgraph'
 import { getServiceById, getServiceByName } from './ddo'
-import { getOceanConfig } from './ocean'
 import { SortTermOptions } from 'src/@types/aquarius/SearchQuery'
 import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
 import { transformAssetToAssetSelection } from './assetConvertor'
@@ -93,6 +92,7 @@ export async function isOrderable(
 ): Promise<boolean> {
   const datasetService: Service = getServiceById(asset, serviceId)
   if (!datasetService) return false
+
   if (datasetService.type === 'compute') {
     if (algorithm.meta) {
       // check if raw algo is allowed
@@ -149,7 +149,7 @@ export async function getComputeEnviroment(
   }
 }
 
-export function getQuerryString(
+export function getQueryString(
   trustedAlgorithmList: PublisherTrustedAlgorithm[],
   chainId?: number
 ): SearchQuery {
@@ -182,7 +182,7 @@ export async function getAlgorithmsForAsset(
     algorithms = []
   } else {
     const gueryResults = await queryMetadata(
-      getQuerryString(publisherTrustedAlgorithms, asset.chainId),
+      getQueryString(publisherTrustedAlgorithms, asset.chainId),
       token
     )
     algorithms = gueryResults?.results

src/@utils/ddo.ts

@@ -1,13 +1,8 @@
 import { Asset, DDO, Service } from '@oceanprotocol/lib'
-interface Consumable {
-  status: number
-  message: string
-  result: boolean
-}
 
 export function getServiceByName(
   ddo: Asset | DDO,
-  name: 'access' | 'compute' | 'metadata'
+  name: 'access' | 'compute'
 ): Service {
   if (!ddo) return
 

src/@utils/fixedRateExchange.ts

@@ -3,7 +3,6 @@ import { AccessDetails } from 'src/@types/Price'
 import Web3 from 'web3'
 import { getOceanConfig } from './ocean'
 import { consumeMarketPoolSwapFee } from '../../app.config'
-
 import { getDummyWeb3 } from './web3'
 
 /**

src/@utils/nft.ts

@@ -112,17 +112,6 @@ export async function setNftMetadata(
   // theoretically used by aquarius or provider, not implemented yet, will remain hardcoded
   const flags = '0x2'
 
-  const estGasSetMetadata = await nft.estGasSetMetadata(
-    asset.nftAddress,
-    accountId,
-    0,
-    asset.services[0].serviceEndpoint,
-    '',
-    flags,
-    encryptedDdo,
-    '0x' + metadataHash,
-    []
-  )
   const setMetadataTx = await nft.setMetadata(
     asset.nftAddress,
     accountId,

src/@utils/order.ts

@@ -26,9 +26,9 @@ import { toast } from 'react-toastify'
  * For pool you need to buy the datatoken beforehand, this always assumes you want to order the first service
  * @param web3
  * @param asset
+ * @param orderPriceAndFees
  * @param accountId
- * @param computeEnv
+ * @param providerFees
- * @param computeValidUntil
  * @param computeConsumerAddress
  * @returns {TransactionReceipt} receipt of the order
  */
@@ -162,9 +162,10 @@ export async function reuseOrder(
  * - no validOrder -> we need to call order, to pay 1 DT & providerFees
  * @param web3
  * @param asset
+ * @param orderPriceAndFees
  * @param accountId
- * @param computeEnv
+ * @param hasDatatoken
- * @param computeValidUntil
+ * @param initializeData
  * @param computeConsumerAddress
  * @returns {Promise<string>} tx id
  */
@@ -186,12 +187,16 @@ export async function handleComputeOrder(
     initializeData.providerFee &&
     initializeData.providerFee.providerFeeAmount !== '0'
   ) {
+    const baseToken =
+      asset?.accessDetails?.type === 'free'
+        ? getOceanConfig(asset.chainId).oceanTokenAddress
+        : asset?.accessDetails?.baseToken?.address
     const txApproveWei = await approveWei(
       web3,
       accountId,
-      asset.accessDetails.baseToken.address,
+      baseToken,
-      asset.accessDetails.datatoken.address,
+      asset?.accessDetails?.datatoken?.address,
-      initializeData.providerFee.providerFeeAmount
+      initializeData?.providerFee?.providerFeeAmount
     )
     if (!txApproveWei) {
       toast.error('Failed to approve provider fees!')

src/@utils/provider.ts

@@ -8,7 +8,6 @@ import {
   ProviderComputeInitializeResults,
   ProviderInstance
 } from '@oceanprotocol/lib'
-import { toast } from 'react-toastify'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import Web3 from 'web3'
 import { getValidUntilTime } from './compute'

src/@utils/subgraph.ts

@@ -15,7 +15,7 @@ import {
 import { OrdersData_orders as OrdersData } from '../@types/subgraph/OrdersData'
 import { UserSalesQuery as UsersSalesList } from '../@types/subgraph/UserSalesQuery'
 import { OpcFeesQuery as OpcFeesData } from '../@types/subgraph/OpcFeesQuery'
-import { calcSingleOutGivenPoolIn, getLiquidityByShares } from './pool'
+import { calcSingleOutGivenPoolIn } from './pool'
 import Decimal from 'decimal.js'
 import { MAX_DECIMALS } from './constants'
 

src/components/@shared/AnnouncementBanner/index.module.css

@@ -24,10 +24,6 @@
   display: inline-block;
 }
 
-.banner button {
-  font-size: calc(var(--font-size-small) / 1.1);
-}
-
 .text {
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
@@ -41,6 +37,13 @@
   text-decoration: underline;
 }
 
+.link {
+  color: inherit;
+  text-decoration: underline;
+  text-transform: inherit;
+  font-size: var(--font-size-small);
+}
+
 .text p:last-child {
   margin-bottom: 0;
 }

src/components/@shared/AnnouncementBanner/index.tsx

@@ -35,7 +35,12 @@ export default function AnnouncementBanner({
     <div className={styleClasses}>
       {text && <Markdown className={styles.text} text={text} />}
       {action && (
-        <Button style="text" size="small" onClick={action.handleAction}>
+        <Button
+          style="text"
+          size="small"
+          className={styles.link}
+          onClick={action.handleAction}
+        >
           {action.name}
         </Button>
       )}

src/components/@shared/ButtonBuy/index.module.css

@@ -4,7 +4,7 @@
 }
 
 .actionsCenter {
-  margin: auto !important;
+  margin: auto;
   display: block;
 }
 

src/components/App/index.tsx

@@ -19,11 +19,26 @@ export default function App({
   const { siteContent, appConfig } = useMarketMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
+  function openInNewTab() {
+    window
+      .open(
+        'https://blog.oceanprotocol.com/how-to-publish-a-data-nft-f58ad2a622a9',
+        '_blank'
+      )
+      .focus()
+  }
 
   return (
     <div className={styles.app}>
       {siteContent?.announcement !== '' && (
-        <AnnouncementBanner text={siteContent?.announcement} />
+        <AnnouncementBanner
+          text={siteContent?.announcement}
+          action={{
+            name: 'Explore OceanONDA V4.',
+            style: 'link',
+            handleAction: openInNewTab
+          }}
+        />
       )}
       <Header />
 

src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx

@@ -80,9 +80,11 @@ export default function FormStartCompute({
   validUntil?: string
 }): ReactElement {
   const { siteContent } = useMarketMetadata()
+  const { accountId, balance } = useWeb3()
   const { isValid, values }: FormikContextType<{ algorithm: string }> =
     useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
+
   const [totalPrice, setTotalPrice] = useState('0')
   const [datasetOrderPrice, setDatasetOrderPrice] = useState(
     asset?.accessDetails?.price
@@ -91,7 +93,6 @@ export default function FormStartCompute({
     selectedAlgorithmAsset?.accessDetails?.price
   )
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>(false)
-  const { accountId, balance, isSupportedOceanNetwork } = useWeb3()
 
   function getAlgorithmAsset(algorithmId: string): Asset {
     let assetDdo = null
@@ -102,7 +103,8 @@ export default function FormStartCompute({
   }
 
   useEffect(() => {
-    if (!values.algorithm || !isConsumable) return
+    if (!values.algorithm || !accountId || !isConsumable) return
+
     async function fetchAlgorithmAssetExtended() {
       const algorithmAsset = getAlgorithmAsset(values.algorithm)
       const accessDetails = await getAccessDetails(
@@ -165,15 +167,16 @@ export default function FormStartCompute({
     hasDatatokenSelectedComputeAsset,
     datasetOrderPriceAndFees,
     algoOrderPriceAndFees,
-    selectedAlgorithmAsset
+    providerFeeAmount
   ])
 
   useEffect(() => {
-    if (!totalPrice || !balance.ocean || !dtBalance) return
+    if (!totalPrice || !balance?.ocean || !dtBalance) return
+
     setIsBalanceSufficient(
       compareAsBN(balance.ocean, `${totalPrice}`) || Number(dtBalance) >= 1
     )
-  }, [totalPrice, balance.ocean, dtBalance])
+  }, [totalPrice, balance?.ocean, dtBalance])
 
   return (
     <Form className={styles.form}>
@@ -217,7 +220,7 @@ export default function FormStartCompute({
           !isValid ||
           !isBalanceSufficient ||
           !isAssetNetwork ||
-          !selectedAlgorithmAsset?.accessDetails.isPurchasable
+          !selectedAlgorithmAsset?.accessDetails?.isPurchasable
         }
         hasPreviousOrder={hasPreviousOrder}
         hasDatatoken={hasDatatoken}

src/components/Asset/AssetActions/Compute/PriceOutput.module.css

@@ -39,7 +39,6 @@
   display: grid;
   grid-template-columns: 5% 1fr auto;
   column-gap: calc(var(--spacer) / 10);
-  /* justify-content: space-between; */
 }
 
 .priceRow:last-child {

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

@@ -1,4 +1,4 @@
-import React, { useState, ReactElement, useEffect, useCallback } from 'react'
+import React, { useState, ReactElement, useEffect } from 'react'
 import {
   Asset,
   DDO,
@@ -36,7 +36,6 @@ import AlgorithmDatasetsListForCompute from './AlgorithmDatasetsListForCompute'
 import AssetActionHistoryTable from '../AssetActionHistoryTable'
 import ComputeJobs from '../../../Profile/History/ComputeJobs'
 import { useCancelToken } from '@hooks/useCancelToken'
-// import { useIsMounted } from '@hooks/useIsMounted'
 import { Decimal } from 'decimal.js'
 import { useAbortController } from '@hooks/useAbortController'
 import { getOrderPriceAndFees } from '@utils/accessDetailsAndPricing'
@@ -55,42 +54,35 @@ export default function Compute({
   dtBalance,
   file,
   fileIsLoading,
-  isConsumable,
   consumableFeedback
 }: {
   asset: AssetExtended
   dtBalance: string
   file: FileInfo
   fileIsLoading?: boolean
-  isConsumable?: boolean
   consumableFeedback?: string
 }): ReactElement {
   const { accountId, web3 } = useWeb3()
-
+  const { getOpcFeeForToken } = useMarketMetadata()
-  const [isJobStarting, setIsJobStarting] = useState(false)
+  const { poolData } = usePool()
-  const [error, setError] = useState<string>()
   const newAbortController = useAbortController()
+  const newCancelToken = useCancelToken()
+
+  const [isOrdering, setIsOrdering] = useState(false)
+  const [isOrdered, setIsOrdered] = useState(false)
+  const [error, setError] = useState<string>()
 
   const [algorithmList, setAlgorithmList] = useState<AssetSelectionAsset[]>()
   const [ddoAlgorithmList, setDdoAlgorithmList] = useState<Asset[]>()
   const [selectedAlgorithmAsset, setSelectedAlgorithmAsset] =
     useState<AssetExtended>()
   const [hasAlgoAssetDatatoken, setHasAlgoAssetDatatoken] = useState<boolean>()
-  const [isPublished, setIsPublished] = useState(false)
   const [algorithmDTBalance, setAlgorithmDTBalance] = useState<string>()
 
-  // const [isOwned, setIsOwned] = useState(false)
   const [validOrderTx, setValidOrderTx] = useState('')
-  // const [isAlgorithmOwned, setIsAlgorithmOwned] = useState(false)
   const [validAlgorithmOrderTx, setValidAlgorithmOrderTx] = useState('')
 
-  const hasDatatoken = Number(dtBalance) >= 1
-  // const isMounted = useIsMounted()
-  const { getOpcFeeForToken } = useMarketMetadata()
-  const { poolData } = usePool()
-  const newCancelToken = useCancelToken()
   const [isConsumablePrice, setIsConsumablePrice] = useState(true)
-  const [isAlgoConsumablePrice, setIsAlgoConsumablePrice] = useState(true)
   const [computeStatusText, setComputeStatusText] = useState('')
   const [computeEnv, setComputeEnv] = useState<ComputeEnvironment>()
   const [initializedProviderResponse, setInitializedProviderResponse] =
@@ -99,19 +91,18 @@ export default function Compute({
   const [computeValidUntil, setComputeValidUntil] = useState<string>('0')
   const [datasetOrderPriceAndFees, setDatasetOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
-  const [isRequestingDataseOrderPrice, setIsRequestingDataseOrderPrice] =
-    useState(false)
   const [algoOrderPriceAndFees, setAlgoOrderPriceAndFees] =
     useState<OrderPriceAndFees>()
   const [isRequestingAlgoOrderPrice, setIsRequestingAlgoOrderPrice] =
     useState(false)
-  const [refatchJobs, setRefatchJobs] = useState(false)
+  const [refetchJobs, setRefetchJobs] = useState(false)
-  // const [isProviderFeeValid, setIsProviderFeeValid] = useState(false)
+
+  const hasDatatoken = Number(dtBalance) >= 1
   const isComputeButtonDisabled =
-    isJobStarting === true ||
+    isOrdering === true ||
     file === null ||
     (!validOrderTx && !hasDatatoken && !isConsumablePrice) ||
-    (!validAlgorithmOrderTx && !hasAlgoAssetDatatoken && !isAlgoConsumablePrice)
+    (!validAlgorithmOrderTx && !hasAlgoAssetDatatoken)
 
   async function checkAssetDTBalance(asset: DDO): Promise<boolean> {
     if (!asset?.services[0].datatokenAddress) return
@@ -168,8 +159,8 @@ export default function Compute({
     ) {
       setComputeStatusText(
         getComputeFeedback(
-          asset.accessDetails.baseToken?.symbol,
+          asset.accessDetails?.baseToken?.symbol,
-          asset.accessDetails.datatoken?.symbol,
+          asset.accessDetails?.datatoken?.symbol,
           asset.metadata.type
         )[0]
       )
@@ -220,7 +211,7 @@ export default function Compute({
       if (selectedAlgorithmAsset?.accessDetails?.type === 'dynamic') {
         const response = await getPoolData(
           selectedAlgorithmAsset.chainId,
-          selectedAlgorithmAsset.accessDetails.addressOrId,
+          selectedAlgorithmAsset.accessDetails?.addressOrId,
           selectedAlgorithmAsset?.nft.owner,
           accountId || ''
         )
@@ -304,8 +295,8 @@ export default function Compute({
 
   async function startJob(): Promise<string> {
     try {
-      setIsJobStarting(true)
+      setIsOrdering(true)
-      setIsPublished(false) // would be nice to rename this
+      setIsOrdered(false) // would be nice to rename this
       setError(undefined)
       const computeService = getServiceByName(asset, 'compute')
       const computeAlgorithm: ComputeAlgorithm = {
@@ -413,14 +404,14 @@ export default function Compute({
         return
       }
       LoggerInstance.log('[compute] Starting compute job response: ', response)
-      setIsPublished(true)
+      setIsOrdered(true)
-      setRefatchJobs(!refatchJobs)
+      setRefetchJobs(!refetchJobs)
       initPriceAndFees()
     } catch (error) {
       setError('Failed to start job!')
       LoggerInstance.error('[compute] Failed to start job: ', error.message)
     } finally {
-      setIsJobStarting(false)
+      setIsOrdering(false)
     }
   }
 
@@ -457,11 +448,7 @@ export default function Compute({
             ddoListAlgorithms={ddoAlgorithmList}
             selectedAlgorithmAsset={selectedAlgorithmAsset}
             setSelectedAlgorithm={setSelectedAlgorithmAsset}
-            isLoading={
+            isLoading={isOrdering || isRequestingAlgoOrderPrice}
-              isJobStarting ||
-              isRequestingDataseOrderPrice ||
-              isRequestingAlgoOrderPrice
-            }
             isComputeButtonDisabled={isComputeButtonDisabled}
             hasPreviousOrder={validOrderTx !== undefined}
             hasDatatoken={hasDatatoken}
@@ -482,7 +469,6 @@ export default function Compute({
               selectedAlgorithmAsset?.datatokens[0]?.symbol
             }
             dtBalanceSelectedComputeAsset={algorithmDTBalance}
-            selectedComputeAssetLowPoolLiquidity={!isAlgoConsumablePrice}
             selectedComputeAssetType="algorithm"
             selectedComputeAssetTimeout={secondsToString(
               selectedAlgorithmAsset?.services[0]?.timeout
@@ -500,7 +486,7 @@ export default function Compute({
       )}
 
       <footer className={styles.feedback}>
-        {isPublished && (
+        {isOrdered && (
           <SuccessConfetti success="Your job started successfully! Watch the progress below or on your profile." />
         )}
       </footer>
@@ -508,8 +494,8 @@ export default function Compute({
         <AssetActionHistoryTable title="Your Compute Jobs">
           <ComputeJobs
             minimal
-            assetChainId={[asset?.chainId]}
+            assetChainIds={[asset?.chainId]}
-            refatchJobs={refatchJobs}
+            refetchJobs={refetchJobs}
           />
         </AssetActionHistoryTable>
       )}

src/components/Asset/AssetActions/Download.tsx

@@ -83,7 +83,6 @@ export default function Download({
         consumeMarketSwapFee: '0'
       }
       const _orderPriceAndFees = await getOrderPriceAndFees(
-        web3,
         asset,
         ZERO_ADDRESS,
         paramsForPool

src/components/Asset/Edit/index.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement, useState, useEffect } from 'react'
-import { LoggerInstance } from '@oceanprotocol/lib'
 import { useAsset } from '@context/Asset'
 import styles from './index.module.css'
 import Tabs from '@shared/atoms/Tabs'

src/components/Header/Wallet/Details.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '@context/UserPreferences'
 import Button from '@shared/atoms/Button'
@@ -7,11 +7,9 @@ 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 {
-    web3Provider,
     web3ProviderInfo,
     web3Modal,
     connect,
@@ -27,7 +25,6 @@ export default function Details(): ReactElement {
     address: string
     symbol: string
   }>()
-  const [portisNetwork, setPortisNetwork] = useState<string>()
 
   useEffect(() => {
     if (!networkId) return
@@ -45,16 +42,6 @@ export default function Details(): ReactElement {
       })
   }, [networkData, networkId])
 
-  // Handle network change for Portis
-  async function handlePortisNetworkChange(e: ChangeEvent<HTMLSelectElement>) {
-    setPortisNetwork(e.target.value)
-    const portisNetworkName = e.target.value.toLowerCase()
-    await web3Provider._portis.changeNetwork(portisNetworkName)
-    // TODO: using our connect initializes a new Portis instance,
-    // which then defaults back to initial network (Mainnet).
-    // await connect()
-  }
-
   return (
     <div className={styles.details}>
       <ul>
@@ -76,16 +63,6 @@ export default function Details(): ReactElement {
               <img className={styles.walletLogo} src={web3ProviderInfo?.logo} />
               {web3ProviderInfo?.name}
             </span>
-            {web3ProviderInfo?.name === 'Portis' && (
-              <InputElement
-                name="network"
-                type="select"
-                options={['Mainnet', 'Ropsten', 'Rinkeby']}
-                size="mini"
-                value={portisNetwork}
-                onChange={handlePortisNetworkChange}
-              />
-            )}
             {web3ProviderInfo?.name === 'MetaMask' && (
               <AddToken
                 address={oceanTokenMetadata?.address}
@@ -96,15 +73,6 @@ export default function Details(): ReactElement {
             )}
           </div>
           <p>
-            {web3ProviderInfo?.name === 'Portis' && (
-              <Button
-                style="text"
-                size="small"
-                onClick={() => web3Provider._portis.showPortis()}
-              >
-                Show Portis
-              </Button>
-            )}
             <Button
               style="text"
               size="small"

src/components/Profile/History/ComputeJobs/Details.tsx

@@ -98,12 +98,6 @@ export default function Details({
             />
           )}
           <MetaItem title="Job ID" content={<code>{job.jobId}</code>} />
-          {/* {job.results[0]. && (
-            <MetaItem
-              title="Published Results DID"
-              content={<code>{job.resultsDid}</code>}
-            />
-          )} */}
         </div>
       </Modal>
     </>

src/components/Profile/History/ComputeJobs/index.tsx

@@ -71,20 +71,21 @@ const columns = [
 
 export default function ComputeJobs({
   minimal,
-  assetChainId,
+  assetChainIds,
-  refatchJobs
+  refetchJobs
 }: {
   minimal?: boolean
-  assetChainId?: number[]
+  assetChainIds?: number[]
-  refatchJobs?: boolean
+  refetchJobs?: boolean
 }): ReactElement {
   const { accountId } = useWeb3()
   const { asset } = useAsset()
   const { chainIds } = useUserPreferences()
-  const [isLoading, setIsLoading] = useState(false)
-  const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const isMounted = useIsMounted()
   const newCancelToken = useCancelToken()
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
   const [columnsMinimal] = useState([columns[4], columns[5], columns[3]])
 
   const fetchJobs = useCallback(async () => {
@@ -96,7 +97,7 @@ export default function ComputeJobs({
     try {
       setIsLoading(true)
       const jobs = await getComputeJobs(
-        assetChainId || chainIds,
+        assetChainIds || chainIds,
         accountId,
         asset,
         newCancelToken()
@@ -106,15 +107,11 @@ export default function ComputeJobs({
     } catch (error) {
       LoggerInstance.error(error.message)
     }
-  }, [chainIds, accountId, asset, isMounted])
+  }, [chainIds, accountId, asset, isMounted, assetChainIds, newCancelToken])
 
   useEffect(() => {
     fetchJobs()
-  }, [fetchJobs])
+  }, [fetchJobs, refetchJobs])
-
-  useEffect(() => {
-    fetchJobs()
-  }, [refatchJobs])
 
   return accountId ? (
     <>