From c0d064fe106ae44429e552bfcdc6aa7c7520c072 Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Fri, 10 Sep 2021 22:30:01 +0300 Subject: [PATCH 1/4] fix set oceanSymbol in bestPrice (#848) --- src/utils/subgraph.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/subgraph.ts b/src/utils/subgraph.ts index ce594a6c5..1b77f9685 100644 --- a/src/utils/subgraph.ts +++ b/src/utils/subgraph.ts @@ -121,7 +121,7 @@ const AssetPoolPriceQuerry = gql` datatokenAddress datatokenReserve oceanReserve - tokens { + tokens(where: { isDatatoken: false }) { symbol } } From e19c918ed51cdef57663ba716fdd56b23a4d27d1 Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Mon, 13 Sep 2021 13:40:51 +0300 Subject: [PATCH 2/4] Fix title out of bounds in asset teaser component (#850) --- src/components/molecules/AssetTeaser.module.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css index 10ce0ccfc..d5e013c29 100644 --- a/src/components/molecules/AssetTeaser.module.css +++ b/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; - word-break: break-all; - + hyphens: auto; /* 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 { From 421d5981e69a8fe46ae7f2fb5102dd507d8738ca Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Mon, 13 Sep 2021 17:14:43 +0300 Subject: [PATCH 3/4] Fix issues consuming free assets (#834) * get order history based on ddo chainId * disabled consume when not connected to wallet, refetch orders on connect * disable create price button if not assetNetwork * get previous orders on order action --- src/components/atoms/Alert.tsx | 2 ++ .../organisms/AssetActions/Consume.tsx | 26 ++++++++++++------- .../organisms/AssetContent/Pricing/index.tsx | 3 +++ 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx index 471a60381..85ded0081 100644 --- a/src/components/atoms/Alert.tsx +++ b/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) => 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} diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index d83498cc8..473572112 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/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(1) const [isConsumablePrice, setIsConsumablePrice] = useState(true) const [assetTimeout, setAssetTimeout] = useState('') - const [result] = useQuery({ - query: previousOrderQuery, - variables: { + const [data, setData] = useState() + + useEffect(() => { + if (!ddo || !accountId) return + const context = getQueryContext(ddo.chainId) + const variables = { id: ddo.dataToken?.toLowerCase(), account: accountId?.toLowerCase() } - // pollInterval: 5000 - }) - const { data } = result + fetchData(previousOrderQuery, variables, context).then((result: any) => { + setData(result.data) + }) + }, [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 ]) diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx index ee828d336..88363821d 100644 --- a/src/components/organisms/AssetContent/Pricing/index.tsx +++ b/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 }} /> From 969ac96417782986bdb7111436805d202e64ebfe Mon Sep 17 00:00:00 2001 From: claudiaHash <49017601+claudiaHash@users.noreply.github.com> Date: Tue, 14 Sep 2021 18:18:15 +0300 Subject: [PATCH 4/4] Add service filters download and compute to the existing filters (#817) * filter tags added, filter functionality linked * filter tag selection fix * deselect filter fix, logs deleted * use single filter function * delete unused functions and logs *   replaced --- .../templates/Search/filterService.module.css | 7 + .../templates/Search/filterService.tsx | 128 ++++++++++++++---- src/components/templates/Search/index.tsx | 7 +- src/components/templates/Search/utils.ts | 25 +++- 4 files changed, 138 insertions(+), 29 deletions(-) diff --git a/src/components/templates/Search/filterService.module.css b/src/components/templates/Search/filterService.module.css index 7417f7983..04d0151ef 100644 --- a/src/components/templates/Search/filterService.module.css +++ b/src/components/templates/Search/filterService.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 { diff --git a/src/components/templates/Search/filterService.tsx b/src/components/templates/Search/filterService.tsx index 168c35fe2..a75252470 100644 --- a/src/components/templates/Search/filterService.tsx +++ b/src/components/templates/Search/filterService.tsx @@ -2,7 +2,11 @@ import React, { ReactElement, useState } from 'react' import { useNavigate } from '@reach/router' import styles from './filterService.module.css' import classNames from 'classnames/bind' -import { addExistingParamsToUrl, FilterByTypeOptions } from './utils' +import { + addExistingParamsToUrl, + FilterByAccessOptions, + FilterByTypeOptions +} from './utils' import Button from '../../atoms/Button' const cx = classNames.bind(styles) @@ -14,57 +18,110 @@ const serviceFilterItems = [ { display: 'algorithms', value: FilterByTypeOptions.Algorithm } ] +const accessFilterItems = [ + { display: 'download ', value: FilterByAccessOptions.Download }, + { display: 'compute ', value: FilterByAccessOptions.Compute } +] + export default function FilterPrice({ serviceType, - setServiceType + accessType, + setServiceType, + setAccessType }: { serviceType: string + accessType: string setServiceType: React.Dispatch> + setAccessType: React.Dispatch> }): ReactElement { const navigate = useNavigate() const [serviceSelections, setServiceSelections] = useState([]) + const [accessSelections, setAccessSelections] = useState([]) - async function applyServiceFilter(filterBy: string) { - let urlLocation = await addExistingParamsToUrl(location, ['serviceType']) - if (filterBy && location.search.indexOf('&serviceType') === -1) { - urlLocation = `${urlLocation}&serviceType=${filterBy}` + 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']) } - setServiceType(filterBy) + + if (filter && location.search.indexOf(filterType) === -1) { + filterType === 'accessType' + ? (urlLocation = `${urlLocation}&accessType=${filter}`) + : (urlLocation = `${urlLocation}&serviceType=${filter}`) + } + + filterType === 'accessType' ? setAccessType(filter) : setServiceType(filter) navigate(urlLocation) } async function handleSelectedFilter(isSelected: boolean, value: string) { - if (isSelected) { - if (serviceSelections.length > 1) { - const otherValue = serviceFilterItems.find( - (p) => p.value !== value - ).value - await applyServiceFilter(otherValue) - setServiceSelections([otherValue]) + 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 { - await applyServiceFilter(undefined) - if (serviceSelections.includes(value)) { - serviceSelections.pop() + 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 (serviceSelections.length) { - await applyServiceFilter(undefined) - setServiceSelections(serviceFilterItems.map((p) => p.value)) + if (isSelected) { + if (serviceSelections.length > 1) { + const otherValue = serviceFilterItems.find( + (p) => p.value !== value + ).value + await applyFilter(otherValue, 'serviceType') + setServiceSelections([otherValue]) + } else { + await applyFilter(undefined, 'serviceType') + setServiceSelections([]) + } } else { - await applyServiceFilter(value) - setServiceSelections([value]) + if (serviceSelections.length) { + await applyFilter(undefined, 'serviceType') + setServiceSelections(serviceFilterItems.map((p) => p.value)) + } else { + await applyFilter(value, 'serviceType') + setServiceSelections([value]) + } } } } async function applyClearFilter() { - let urlLocation = await addExistingParamsToUrl(location, ['serviceType']) + let urlLocation = await addExistingParamsToUrl(location, [ + 'accessType', + 'serviceType' + ]) urlLocation = `${urlLocation}` setServiceSelections([]) + setAccessSelections([]) + setServiceType(undefined) + setAccessType(undefined) navigate(urlLocation) } @@ -91,8 +148,31 @@ export default function FilterPrice({ ) })} +
+ {accessFilterItems.map((e, index) => { + const isAccessSelected = + e.value === accessType || accessSelections.includes(e.value) + const selectFilter = cx({ + [styles.selected]: isAccessSelected, + [styles.filter]: true + }) + return ( + + ) + })} {clearFilters.map((e, index) => { - const showClear = serviceSelections.length > 0 + const showClear = + accessSelections.length > 0 || serviceSelections.length > 0 return (