oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

Merge branch 'main' into feature/account_page

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-09-15 12:22:05 +02:00
commit eacd0c56a0
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 235 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/atoms/Alert.tsx
View File

@ -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>

5
src/components/molecules/AssetTeaser.module.css
View File

@ -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 {

26
src/components/organisms/AssetActions/Consume.tsx
View File

@ -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>({
query: previousOrderQuery,
variables: {
const [data, setData] = useState<OrdersData>()
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
])

3
src/components/organisms/AssetContent/Pricing/index.tsx
View File

@ -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
}}
/>

7
src/components/templates/Search/Filters.module.css
View File

@ -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 {

262
src/components/templates/Search/Filters.tsx
View File

@ -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,111 +18,197 @@ 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 applyServiceFilter(filterBy: string) {
setServiceType(filterBy)
if (isSearch) {
let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
if (filterBy && location.search.indexOf('&serviceType') === -1) {
urlLocation = `${urlLocation}&serviceType=${filterBy}`
}
navigate(urlLocation)
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 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])
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'
])
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 {
await applyServiceFilter(undefined)
if (serviceSelections.includes(value)) {
serviceSelections.pop()
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 {
if (serviceSelections.length) {
await applyFilter(undefined, 'serviceType')
setServiceSelections(serviceFilterItems.map((p) => p.value))
} else {
await applyFilter(value, 'serviceType')
setServiceSelections([value])
}
}
}
} else {
if (serviceSelections.length) {
await applyServiceFilter(undefined)
setServiceSelections(serviceFilterItems.map((p) => p.value))
} else {
await applyServiceFilter(value)
setServiceSelections([value])
}
async function applyClearFilter(isSearch: boolean) {
setServiceSelections([])
setAccessSelections([])
setServiceType(undefined)
setAccessType(undefined)
if (isSearch) {
let urlLocation = await addExistingParamsToUrl(location, [
'serviceType'
])
urlLocation = `${urlLocation}`
navigate(urlLocation)
}
}
const styleClasses = cx({
filterList: true,
[className]: className
})
return (
<div className={styleClasses}>
{serviceFilterItems.map((e, index) => {
const isServiceSelected =
e.value === serviceType || serviceSelections.includes(e.value)
const selectFilter = cx({
[styles.selected]: isServiceSelected,
[styles.filter]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={selectFilter}
onClick={async () => {
handleSelectedFilter(isServiceSelected, e.value)
}}
>
{e.display}
</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 =
accessSelections.length > 0 || serviceSelections.length > 0
return (
<Button
size="small"
style="text"
key={index}
className={showClear ? styles.showClear : styles.hideClear}
onClick={async () => {
applyClearFilter(isSearch)
}}
>
{e.display}
</Button>
)
})}
</div>
)
}
async function applyClearFilter(isSearch: boolean) {
setServiceSelections([])
setServiceType(undefined)
if (isSearch) {
let urlLocation = await addExistingParamsToUrl(location, ['serviceType'])
urlLocation = `${urlLocation}`
navigate(urlLocation)
}
}
const styleClasses = cx({
filterList: true,
[className]: className
})
return (
<div className={styleClasses}>
{serviceFilterItems.map((e, index) => {
const isServiceSelected =
e.value === serviceType || serviceSelections.includes(e.value)
const selectFilter = cx({
[styles.selected]: isServiceSelected,
[styles.filter]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={selectFilter}
onClick={async () => {
handleSelectedFilter(isServiceSelected, e.value)
}}
>
{e.display}
</Button>
)
})}
{clearFilters.map((e, index) => {
const showClear = serviceSelections.length > 0
return (
<Button
size="small"
style="text"
key={index}
className={showClear ? styles.showClear : styles.hideClear}
onClick={async () => {
applyClearFilter(isSearch)
}}
>
{e.display}
</Button>
)
})}
</div>
)
}

7
src/components/templates/Search/index.tsx
View File

@ -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

25
src/components/templates/Search/utils.ts
View File

@ -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)

2
src/utils/subgraph.ts
View File

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