bump ocean.js v0.16.2, ocean.assets.isConsumable implementation to disable buy button and display relevant message

package.json

@@ -27,7 +27,7 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "^5.15.0",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.16.1",
+    "@oceanprotocol/lib": "^0.16.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.4",
     "@sindresorhus/slugify": "^2.1.0",

src/components/atoms/ButtonBuy.tsx

@@ -12,6 +12,8 @@ interface ButtonBuyProps {
   dtBalance: string
   assetType: string
   assetTimeout: string
+  isConsumable: boolean
+  consumableFeedback: string
   hasPreviousOrderSelectedComputeAsset?: boolean
   hasDatatokenSelectedComputeAsset?: boolean
   dtSymbolSelectedComputeAsset?: string
@@ -23,20 +25,26 @@ interface ButtonBuyProps {
   type?: 'submit'
   priceType?: string
   algorithmPriceType?: string
+  algorithmConsumableStatus?: number
 }
 
 function getConsumeHelpText(
   dtBalance: string,
   dtSymbol: string,
   hasDatatoken: boolean,
   hasPreviousOrder: boolean,
-  assetType: string
+  assetType: string,
+  isConsumable: boolean,
+  consumableFeedback: string
 ) {
-  const text = hasPreviousOrder
-    ? `You bought this ${assetType} already allowing you to use it without paying again.`
-    : hasDatatoken
-    ? `You own ${dtBalance} ${dtSymbol} allowing you to use this data set by spending 1 ${dtSymbol}, but without paying OCEAN again.`
-    : `For using this ${assetType}, you will buy 1 ${dtSymbol} and immediately spend it back to the publisher and pool.`
+  const text =
+    isConsumable === false
+      ? consumableFeedback
+      : hasPreviousOrder
+      ? `You bought this ${assetType} already allowing you to use it without paying again.`
+      : hasDatatoken
+      ? `You own ${dtBalance} ${dtSymbol} allowing you to use this data set by spending 1 ${dtSymbol}, but without paying OCEAN again.`
+      : `For using this ${assetType}, you will buy 1 ${dtSymbol} and immediately spend it back to the publisher and pool.`
 
   return text
 }
@@ -47,22 +55,34 @@ function getComputeAssetHelpText(
   dtSymbol: string,
   dtBalance: string,
   assetType: string,
+  isConsumable: boolean,
+  consumableFeedback: string,
   hasPreviousOrderSelectedComputeAsset?: boolean,
   hasDatatokenSelectedComputeAsset?: boolean,
   dtSymbolSelectedComputeAsset?: string,
   dtBalanceSelectedComputeAsset?: string,
-  selectedComputeAssetType?: string
+  selectedComputeAssetType?: string,
+  algorithmConsumableStatus?: number
 ) {
   const computeAssetHelpText = getConsumeHelpText(
     dtBalance,
     dtSymbol,
     hasDatatoken,
     hasPreviousOrder,
-    assetType
+    assetType,
+    isConsumable,
+    consumableFeedback
   )
   const text =
-    !dtSymbolSelectedComputeAsset && !dtBalanceSelectedComputeAsset
+    (!dtSymbolSelectedComputeAsset && !dtBalanceSelectedComputeAsset) ||
+    isConsumable === false
       ? ''
+      : algorithmConsumableStatus === 1
+      ? 'The selected algorithm has been temporarily disabled by the publisher, please try again later.'
+      : algorithmConsumableStatus === 2
+      ? 'Access denied, your wallet address is not found on the selected algorithm allow list.'
+      : algorithmConsumableStatus === 3
+      ? 'Access denied, your wallet address is found on the selected algorithm deny list.'
       : hasPreviousOrderSelectedComputeAsset
       ? `You already bought the selected ${selectedComputeAssetType}, allowing you to use it without paying again.`
       : hasDatatokenSelectedComputeAsset
@@ -81,6 +101,8 @@ export default function ButtonBuy({
   dtBalance,
   assetType,
   assetTimeout,
+  isConsumable,
+  consumableFeedback,
   hasPreviousOrderSelectedComputeAsset,
   hasDatatokenSelectedComputeAsset,
   dtSymbolSelectedComputeAsset,
@@ -91,7 +113,8 @@ export default function ButtonBuy({
   isLoading,
   type,
   priceType,
-  algorithmPriceType
+  algorithmPriceType,
+  algorithmConsumableStatus
 }: ButtonBuyProps): ReactElement {
   const buttonText =
     action === 'download'
@@ -127,19 +150,24 @@ export default function ButtonBuy({
                   dtSymbol,
                   hasDatatoken,
                   hasPreviousOrder,
-                  assetType
+                  assetType,
+                  isConsumable,
+                  consumableFeedback
                 )
               : getComputeAssetHelpText(
                   hasPreviousOrder,
                   hasDatatoken,
                   dtSymbol,
                   dtBalance,
                   assetType,
+                  isConsumable,
+                  consumableFeedback,
                   hasPreviousOrderSelectedComputeAsset,
                   hasDatatokenSelectedComputeAsset,
                   dtSymbolSelectedComputeAsset,
                   dtBalanceSelectedComputeAsset,
-                  selectedComputeAssetType
+                  selectedComputeAssetType,
+                  algorithmConsumableStatus
                 )}
           </div>
         </>

src/components/molecules/FormFields/Credential/index.tsx

@@ -30,11 +30,11 @@ export default function Credentials(props: InputProps) {
       toast.error('Wallet address is invalid')
       return
     }
-    if (arrayInput.includes(value)) {
+    if (arrayInput.includes(value.toLowerCase())) {
       toast.error('Wallet address already added into list')
       return
     }
-    setArrayInput((arrayInput) => [...arrayInput, value])
+    setArrayInput((arrayInput) => [...arrayInput, value.toLowerCase()])
     setValue('')
   }
 

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

@@ -9,6 +9,8 @@ import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelectio
 import ButtonBuy from '../../../atoms/ButtonBuy'
 import PriceOutput from './PriceOutput'
 import { useAsset } from '../../../../providers/Asset'
+import { useOcean } from '../../../../providers/Ocean'
+import { useWeb3 } from '../../../../providers/Web3'
 
 const contentQuery = graphql`
   query StartComputeDatasetQuery {
@@ -58,7 +60,9 @@ export default function FormStartCompute({
   selectedComputeAssetType,
   selectedComputeAssetTimeout,
   stepText,
-  algorithmPrice
+  algorithmPrice,
+  isConsumable,
+  consumableFeedback
 }: {
   algorithms: AssetSelectionAsset[]
   ddoListAlgorithms: DDO[]
@@ -78,6 +82,8 @@ export default function FormStartCompute({
   selectedComputeAssetTimeout?: string
   stepText: string
   algorithmPrice: BestPrice
+  isConsumable: boolean
+  consumableFeedback: string
 }): ReactElement {
   const data = useStaticQuery(contentQuery)
   const content = data.content.edges[0].node.childPagesJson
@@ -86,6 +92,10 @@ export default function FormStartCompute({
     useFormikContext()
   const { price, ddo } = useAsset()
   const [totalPrice, setTotalPrice] = useState(price?.value)
+  const { accountId } = useWeb3()
+  const { ocean } = useOcean()
+  const [algorithmConsumableStatus, setAlgorithmConsumableStatus] =
+    useState<number>()
 
   function getAlgorithmAsset(algorithmId: string): DDO {
     let assetDdo = null
@@ -97,8 +107,19 @@ export default function FormStartCompute({
 
   useEffect(() => {
     if (!values.algorithm) return
-    setSelectedAlgorithm(getAlgorithmAsset(values.algorithm))
-  }, [values.algorithm])
+    const algorithmDDO = getAlgorithmAsset(values.algorithm)
+    setSelectedAlgorithm(algorithmDDO)
+
+    if (!accountId || !isConsumable) return
+    async function checkIsConsumable() {
+      const consumable = await ocean.assets.isConsumable(
+        algorithmDDO,
+        accountId.toLowerCase()
+      )
+      if (consumable) setAlgorithmConsumableStatus(consumable.status)
+    }
+    checkIsConsumable()
+  }, [values.algorithm, accountId, isConsumable])
 
   //
   // Set price for calculation output
@@ -149,7 +170,9 @@ export default function FormStartCompute({
 
       <ButtonBuy
         action="compute"
-        disabled={isComputeButtonDisabled || !isValid}
+        disabled={
+          isComputeButtonDisabled || !isValid || algorithmConsumableStatus > 0
+        }
         hasPreviousOrder={hasPreviousOrder}
         hasDatatoken={hasDatatoken}
         dtSymbol={ddo.dataTokenInfo.symbol}
@@ -168,6 +191,9 @@ export default function FormStartCompute({
         type="submit"
         priceType={price?.type}
         algorithmPriceType={algorithmPrice?.type}
+        isConsumable={isConsumable}
+        consumableFeedback={consumableFeedback}
+        algorithmConsumableStatus={algorithmConsumableStatus}
       />
     </Form>
   )

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

@@ -50,12 +50,16 @@ export default function Compute({
   isBalanceSufficient,
   dtBalance,
   file,
-  fileIsLoading
+  fileIsLoading,
+  isConsumable,
+  consumableFeedback
 }: {
   isBalanceSufficient: boolean
   dtBalance: string
   file: FileMetadata
   fileIsLoading?: boolean
+  isConsumable?: boolean
+  consumableFeedback?: string
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
@@ -82,7 +86,11 @@ export default function Compute({
   const [algorithmTimeout, setAlgorithmTimeout] = useState<string>()
 
   const isComputeButtonDisabled =
-    isJobStarting === true || file === null || !ocean || !isBalanceSufficient
+    isJobStarting === true ||
+    file === null ||
+    !ocean ||
+    !isBalanceSufficient ||
+    !isConsumable
   const hasDatatoken = Number(dtBalance) >= 1
 
   async function checkPreviousOrders(ddo: DDO) {
@@ -420,6 +428,8 @@ export default function Compute({
             selectedComputeAssetTimeout={algorithmTimeout}
             stepText={pricingStepText || 'Starting Compute Job...'}
             algorithmPrice={algorithmPrice}
+            isConsumable={isConsumable}
+            consumableFeedback={consumableFeedback}
           />
         </Formik>
       )}

src/components/organisms/AssetActions/Consume.tsx

@@ -37,13 +37,17 @@ export default function Consume({
   file,
   isBalanceSufficient,
   dtBalance,
-  fileIsLoading
+  fileIsLoading,
+  isConsumable,
+  consumableFeedback
 }: {
   ddo: DDO
   file: FileMetadata
   isBalanceSufficient: boolean
   dtBalance: string
   fileIsLoading?: boolean
+  isConsumable?: boolean
+  consumableFeedback?: string
 }): ReactElement {
   const { accountId } = useWeb3()
   const { ocean } = useOcean()
@@ -56,7 +60,7 @@ export default function Consume({
   const { consumeStepText, consume, consumeError, isLoading } = useConsume()
   const [isDisabled, setIsDisabled] = useState(true)
   const [hasDatatoken, setHasDatatoken] = useState(false)
-  const [isConsumable, setIsConsumable] = useState(true)
+  const [isConsumablePrice, setIsConsumablePrice] = useState(true)
   const [assetTimeout, setAssetTimeout] = useState('')
   const { data } = useQuery<OrdersData>(previousOrderQuery, {
     variables: {
@@ -94,7 +98,7 @@ export default function Consume({
   useEffect(() => {
     if (!price) return
 
-    setIsConsumable(
+    setIsConsumablePrice(
       price.isConsumable !== undefined ? price.isConsumable === 'true' : true
     )
   }, [price])
@@ -105,22 +109,24 @@ export default function Consume({
 
   useEffect(() => {
     setIsDisabled(
-      (!ocean ||
-        !isBalanceSufficient ||
-        typeof consumeStepText !== 'undefined' ||
-        pricingIsLoading ||
-        !isConsumable) &&
-        !hasPreviousOrder &&
-        !hasDatatoken
+      !isConsumable ||
+        ((!ocean ||
+          !isBalanceSufficient ||
+          typeof consumeStepText !== 'undefined' ||
+          pricingIsLoading ||
+          !isConsumablePrice) &&
+          !hasPreviousOrder &&
+          !hasDatatoken)
     )
   }, [
     ocean,
     hasPreviousOrder,
     isBalanceSufficient,
     consumeStepText,
     pricingIsLoading,
-    isConsumable,
-    hasDatatoken
+    isConsumablePrice,
+    hasDatatoken,
+    isConsumable
   ])
 
   async function handleConsume() {
@@ -161,6 +167,8 @@ export default function Consume({
       stepText={consumeStepText || pricingStepText}
       isLoading={pricingIsLoading || isLoading}
       priceType={price?.type}
+      isConsumable={isConsumable}
+      consumableFeedback={consumableFeedback}
     />
   )