Merge branch 'main' into feature/account_page

src/components/atoms/Alert.tsx

@@ -23,6 +23,7 @@ export default function Alert({
   action?: {
     name: string
     style?: 'text' | 'primary' | 'ghost'
+    disabled?: boolean
     handleAction: (e: FormEvent<HTMLButtonElement>) => void
   }
   onDismiss?: () => void
@@ -48,6 +49,7 @@ export default function Alert({
           size="small"
           style={action.style || 'primary'}
           onClick={action.handleAction}
+          disabled={action.disabled}
         >
           {action.name}
         </Button>

src/components/molecules/AssetTeaser.module.css

@@ -21,9 +21,7 @@
 .content {
   margin-top: calc(var(--spacer) / 2);
   overflow-wrap: break-word;
-  word-wrap: break-word;
+  hyphens: auto;
-  word-break: break-all;
-
   /* for sticking footer to bottom */
   flex: 1;
 }
@@ -36,6 +34,7 @@
   font-size: var(--font-size-large);
   margin: 0;
   padding-bottom: calc(var(--spacer) / 6);
+  overflow-wrap: break-word;
 }
 
 .publisher {

src/components/organisms/AssetActions/Consume.tsx

@@ -5,7 +5,8 @@ import File from '../../atoms/File'
 import Price from '../../atoms/Price'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import { useAsset } from '../../../providers/Asset'
-import { gql, useQuery } from 'urql'
+import { gql } from 'urql'
+import { fetchData, getQueryContext } from '../../../utils/subgraph'
 import { OrdersData } from '../../../@types/apollo/OrdersData'
 import BigNumber from 'bignumber.js'
 import { useOcean } from '../../../providers/Ocean'
@@ -63,15 +64,19 @@ export default function Consume({
   const [maxDt, setMaxDT] = useState<number>(1)
   const [isConsumablePrice, setIsConsumablePrice] = useState(true)
   const [assetTimeout, setAssetTimeout] = useState('')
-  const [result] = useQuery<OrdersData>({
+  const [data, setData] = useState<OrdersData>()
-    query: previousOrderQuery,
+
-    variables: {
+  useEffect(() => {
+    if (!ddo || !accountId) return
+    const context = getQueryContext(ddo.chainId)
+    const variables = {
       id: ddo.dataToken?.toLowerCase(),
       account: accountId?.toLowerCase()
     }
-    // pollInterval: 5000
+    fetchData(previousOrderQuery, variables, context).then((result: any) => {
+      setData(result.data)
     })
-  const { data } = result
+  }, [ddo, accountId, hasPreviousOrder])
 
   async function checkMaxAvaialableTokens(price: BestPrice) {
     if (!ocean || !price) return
@@ -83,7 +88,8 @@ export default function Consume({
   }
 
   useEffect(() => {
-    if (!data || !assetTimeout || data.tokenOrders.length === 0) return
+    if (!data || !assetTimeout || data.tokenOrders.length === 0 || !accountId)
+      return
 
     const lastOrder = data.tokenOrders[0]
     if (assetTimeout === '0') {
@@ -99,7 +105,7 @@ export default function Consume({
         setHasPreviousOrder(false)
       }
     }
-  }, [data, assetTimeout])
+  }, [data, assetTimeout, accountId])
 
   useEffect(() => {
     const { timeout } = ddo.findServiceByType('access').attributes.main
@@ -120,6 +126,7 @@ export default function Consume({
   }, [dtBalance])
 
   useEffect(() => {
+    if (!accountId) return
     setIsDisabled(
       !isConsumable ||
         ((!ocean ||
@@ -141,6 +148,7 @@ export default function Consume({
     pricingIsLoading,
     isConsumablePrice,
     hasDatatoken,
+    accountId,
     isConsumable
   ])
 

src/components/organisms/AssetContent/Pricing/index.tsx

@@ -10,6 +10,7 @@ import Feedback from './Feedback'
 import { graphql, useStaticQuery } from 'gatsby'
 import { usePricing } from '../../../../hooks/usePricing'
 import styles from './index.module.css'
+import { useAsset } from '../../../../providers/Asset'
 
 const query = graphql`
   query PricingQuery {
@@ -67,6 +68,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
 
   const { createPricing, pricingIsLoading, pricingError, pricingStepText } =
     usePricing()
+  const { isAssetNetwork } = useAsset()
 
   const hasFeedback = pricingIsLoading || typeof success !== 'undefined'
 
@@ -133,6 +135,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
             text={content.empty.info}
             action={{
               name: content.empty.action.name,
+              disabled: !isAssetNetwork,
               handleAction: handleShowPricingForm
             }}
           />

src/components/templates/Search/Filters.module.css

@@ -2,6 +2,13 @@
 div.filterList {
   white-space: normal;
   margin-bottom: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.separator {
+  width: calc(var(--spacer) / 2);
 }
 
 .filter {

src/components/templates/Search/Filters.tsx

@@ -1,7 +1,11 @@
 import React, { ReactElement, useState } from 'react'
 import { useNavigate } from '@reach/router'
 import classNames from 'classnames/bind'
-import { addExistingParamsToUrl, FilterByTypeOptions } from './utils'
+import {
+  addExistingParamsToUrl,
+  FilterByAccessOptions,
+  FilterByTypeOptions
+} from './utils'
 import Button from '../../atoms/Button'
 import styles from './Filters.module.css'
 
@@ -14,61 +18,123 @@ const serviceFilterItems = [
   { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
+const accessFilterItems = [
+  { display: 'download ', value: FilterByAccessOptions.Download },
+  { display: 'compute ', value: FilterByAccessOptions.Compute }
+]
+
 export default function Filters({
   serviceType,
+  accessType,
   setServiceType,
+  setAccessType,
   isSearch,
   className
 }: {
   serviceType: string
+  accessType: string
   setServiceType: React.Dispatch<React.SetStateAction<string>>
   isSearch: boolean
+  setAccessType: React.Dispatch<React.SetStateAction<string>>
   className?: string
 }): ReactElement {
   const navigate = useNavigate()
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
+  const [accessSelections, setAccessSelections] = useState<string[]>([])
+
+  async function applyFilter(filter: string, filterType: string) {
+    let urlLocation = ''
+    if (filterType.localeCompare('accessType') === 0) {
+      urlLocation = await addExistingParamsToUrl(location, ['accessType'])
+    } else {
+      urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+    }
 
     async function applyServiceFilter(filterBy: string) {
       setServiceType(filterBy)
+      if (filter && location.search.indexOf(filterType) === -1) {
+        filterType === 'accessType'
+          ? (urlLocation = `${urlLocation}&accessType=${filter}`)
+          : (urlLocation = `${urlLocation}&serviceType=${filter}`)
+      }
+
       if (isSearch) {
-      let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+        let urlLocation = await addExistingParamsToUrl(location, [
+          'serviceType'
+        ])
         if (filterBy && location.search.indexOf('&serviceType') === -1) {
           urlLocation = `${urlLocation}&serviceType=${filterBy}`
         }
+        filterType === 'accessType'
+          ? setAccessType(filter)
+          : setServiceType(filter)
         navigate(urlLocation)
       }
     }
 
     async function handleSelectedFilter(isSelected: boolean, value: string) {
+      if (
+        value === FilterByAccessOptions.Download ||
+        value === FilterByAccessOptions.Compute
+      ) {
+        if (isSelected) {
+          if (accessSelections.length > 1) {
+            // both selected -> select the other one
+            const otherValue = accessFilterItems.find(
+              (p) => p.value !== value
+            ).value
+            await applyFilter(otherValue, 'accessType')
+            setAccessSelections([otherValue])
+          } else {
+            // only the current one selected -> deselect it
+            await applyFilter(undefined, 'accessType')
+            setAccessSelections([])
+          }
+        } else {
+          if (accessSelections.length) {
+            // one already selected -> both selected
+            await applyFilter(undefined, 'accessType')
+            setAccessSelections(accessFilterItems.map((p) => p.value))
+          } else {
+            // none selected -> select
+            await applyFilter(value, 'accessType')
+            setAccessSelections([value])
+          }
+        }
+      } else {
         if (isSelected) {
           if (serviceSelections.length > 1) {
             const otherValue = serviceFilterItems.find(
               (p) => p.value !== value
             ).value
-        await applyServiceFilter(otherValue)
+            await applyFilter(otherValue, 'serviceType')
             setServiceSelections([otherValue])
           } else {
-        await applyServiceFilter(undefined)
+            await applyFilter(undefined, 'serviceType')
-        if (serviceSelections.includes(value)) {
+            setServiceSelections([])
-          serviceSelections.pop()
-        }
           }
         } else {
           if (serviceSelections.length) {
-        await applyServiceFilter(undefined)
+            await applyFilter(undefined, 'serviceType')
             setServiceSelections(serviceFilterItems.map((p) => p.value))
           } else {
-        await applyServiceFilter(value)
+            await applyFilter(value, 'serviceType')
             setServiceSelections([value])
           }
         }
       }
+    }
 
     async function applyClearFilter(isSearch: boolean) {
       setServiceSelections([])
+      setAccessSelections([])
+
       setServiceType(undefined)
+      setAccessType(undefined)
       if (isSearch) {
-      let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
+        let urlLocation = await addExistingParamsToUrl(location, [
+          'serviceType'
+        ])
         urlLocation = `${urlLocation}`
         navigate(urlLocation)
       }
@@ -103,8 +169,31 @@ export default function Filters({
             </Button>
           )
         })}
+        <div className={styles.separator} />
+        {accessFilterItems.map((e, index) => {
+          const isAccessSelected =
+            e.value === accessType || accessSelections.includes(e.value)
+          const selectFilter = cx({
+            [styles.selected]: isAccessSelected,
+            [styles.filter]: true
+          })
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={async () => {
+                handleSelectedFilter(isAccessSelected, e.value)
+              }}
+            >
+              {e.display}
+            </Button>
+          )
+        })}
         {clearFilters.map((e, index) => {
-        const showClear = serviceSelections.length > 0
+          const showClear =
+            accessSelections.length > 0 || serviceSelections.length > 0
           return (
             <Button
               size="small"
@@ -122,3 +211,4 @@ export default function Filters({
       </div>
     )
   }
+}

src/components/templates/Search/index.tsx

@@ -21,11 +21,13 @@ export default function SearchPage({
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const parsed = queryString.parse(location.search)
-  const { text, owner, tags, page, sort, sortOrder, serviceType } = parsed
+  const { text, owner, tags, page, sort, sortOrder, serviceType, accessType } =
+    parsed
   const { chainIds } = useUserPreferences()
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
   const [service, setServiceType] = useState<string>(serviceType as string)
+  const [access, setAccessType] = useState<string>(accessType as string)
   const [sortType, setSortType] = useState<string>(sort as string)
   const [sortDirection, setSortDirection] = useState<string>(
     sortOrder as string
@@ -53,6 +55,7 @@ export default function SearchPage({
     sort,
     page,
     serviceType,
+    accessType,
     sortOrder,
     appConfig.metadataCacheUri,
     chainIds
@@ -74,7 +77,9 @@ export default function SearchPage({
           <div className={styles.row}>
             <Filters
               serviceType={service}
+              accessType={access}
               setServiceType={setServiceType}
+              setAccessType={setAccessType}
               isSearch
             />
             <Sort

src/components/templates/Search/utils.ts

@@ -1,5 +1,5 @@
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
-import { MetadataCache, Logger } from '@oceanprotocol/lib'
+import { Logger } from '@oceanprotocol/lib'
 import {
   queryMetadata,
   transformChainIdsListToQuery
@@ -33,6 +33,13 @@ export const FilterByTypeOptions = {
 type FilterByTypeOptions =
   typeof FilterByTypeOptions[keyof typeof FilterByTypeOptions]
 
+export const FilterByAccessOptions = {
+  Download: 'access',
+  Compute: 'compute'
+}
+type FilterByAccessOptions =
+  typeof FilterByAccessOptions[keyof typeof FilterByAccessOptions]
+
 function getSortType(sortParam: string): string {
   const sortTerm =
     sortParam === SortTermOptions.Created
@@ -51,7 +58,8 @@ export function getSearchQuery(
   offset?: string,
   sort?: string,
   sortOrder?: string,
-  serviceType?: string
+  serviceType?: string,
+  accessType?: string
 ): any {
   const sortTerm = getSortType(sort)
   const sortValue = sortOrder === SortValueOptions.Ascending ? 1 : -1
@@ -139,6 +147,12 @@ export function getSearchQuery(
                   : `${serviceType}`
             }
           },
+          {
+            match: {
+              'service.type':
+                accessType === undefined ? 'access OR compute' : `${accessType}`
+            }
+          },
           {
             query_string: {
               query: `${transformChainIdsListToQuery(chainIds)}`
@@ -169,6 +183,7 @@ export async function getResults(
     sort?: string
     sortOrder?: string
     serviceType?: string
+    accessType?: string
   },
   metadataCacheUri: string,
   chainIds: number[]
@@ -182,7 +197,8 @@ export async function getResults(
     offset,
     sort,
     sortOrder,
-    serviceType
+    serviceType,
+    accessType
   } = params
 
   const searchQuery = getSearchQuery(
@@ -195,7 +211,8 @@ export async function getResults(
     offset,
     sort,
     sortOrder,
-    serviceType
+    serviceType,
+    accessType
   )
   const source = axios.CancelToken.source()
   // const queryResult = await metadataCache.queryMetadata(searchQuery)

src/utils/subgraph.ts

@@ -131,7 +131,7 @@ const AssetPoolPriceQuery = gql`
       datatokenAddress
       datatokenReserve
       oceanReserve
-      tokens {
+      tokens(where: { isDatatoken: false }) {
         symbol
       }
     }