From 675da0836f00b8795629ae86aba5ee5b78ac9157 Mon Sep 17 00:00:00 2001 From: Kris Liew <39853992+krisliew@users.noreply.github.com> Date: Tue, 6 Jul 2021 14:51:37 +0800 Subject: [PATCH 1/3] bump ocean.js v0.16.2, ocean.assets.isConsumable implementation to disable buy button and display relevant message (#463) * Implement ocean.assets.isConsumable * Fix accountId from useWeb3() returning lower case on switching metamask account (allow/deny list) * Update Ocean.js version v0.16.2 and package-lock.json * Fix datePublished error on validate-remote Co-authored-by: KIANLAU Co-authored-by: Kris (SJ) <39853992+soonjing@users.noreply.github.com> --- package-lock.json | 14 ++--- package.json | 2 +- src/components/atoms/ButtonBuy.tsx | 52 ++++++++++++++----- .../molecules/FormFields/Credential/index.tsx | 4 +- .../Compute/FormComputeDataset.tsx | 34 ++++++++++-- .../organisms/AssetActions/Compute/index.tsx | 14 ++++- .../organisms/AssetActions/Consume.tsx | 32 +++++++----- .../organisms/AssetActions/index.tsx | 22 ++++++++ src/utils/metadata.ts | 1 + 9 files changed, 135 insertions(+), 40 deletions(-) diff --git a/package-lock.json b/package-lock.json index 19190eb35..54e00bb5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,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", @@ -4871,9 +4871,9 @@ } }, "node_modules/@oceanprotocol/lib": { - "version": "0.16.1", - "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.1.tgz", - "integrity": "sha512-zSVs1VaC8T+BBo9MeL88odU6wFNRHAptaLPHT6qGf2Nvc8MyhHdP15TdnHpeLJF4Ez0k6WKemnOQ1DNuaW8FlA==", + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.2.tgz", + "integrity": "sha512-hESsrSjTf/6O4oLrJgBzzTn7EkANtpa+Sl+fp/VXBZ3YvJRbp4instlKJMCqWHi+CA4dYr/uLRmaXeY/PGyx5w==", "dependencies": { "@ethereum-navigator/navigator": "^0.5.3", "@oceanprotocol/contracts": "^0.6.4", @@ -58189,9 +58189,9 @@ } }, "@oceanprotocol/lib": { - "version": "0.16.1", - "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.1.tgz", - "integrity": "sha512-zSVs1VaC8T+BBo9MeL88odU6wFNRHAptaLPHT6qGf2Nvc8MyhHdP15TdnHpeLJF4Ez0k6WKemnOQ1DNuaW8FlA==", + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.16.2.tgz", + "integrity": "sha512-hESsrSjTf/6O4oLrJgBzzTn7EkANtpa+Sl+fp/VXBZ3YvJRbp4instlKJMCqWHi+CA4dYr/uLRmaXeY/PGyx5w==", "requires": { "@ethereum-navigator/navigator": "^0.5.3", "@oceanprotocol/contracts": "^0.6.4", diff --git a/package.json b/package.json index c9e69c4e6..6a9e9fa62 100644 --- a/package.json +++ b/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", diff --git a/src/components/atoms/ButtonBuy.tsx b/src/components/atoms/ButtonBuy.tsx index 50acd944d..2846589f6 100644 --- a/src/components/atoms/ButtonBuy.tsx +++ b/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,6 +25,7 @@ interface ButtonBuyProps { type?: 'submit' priceType?: string algorithmPriceType?: string + algorithmConsumableStatus?: number } function getConsumeHelpText( @@ -30,13 +33,18 @@ function getConsumeHelpText( 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,7 +150,9 @@ export default function ButtonBuy({ dtSymbol, hasDatatoken, hasPreviousOrder, - assetType + assetType, + isConsumable, + consumableFeedback ) : getComputeAssetHelpText( hasPreviousOrder, @@ -135,11 +160,14 @@ export default function ButtonBuy({ dtSymbol, dtBalance, assetType, + isConsumable, + consumableFeedback, hasPreviousOrderSelectedComputeAsset, hasDatatokenSelectedComputeAsset, dtSymbolSelectedComputeAsset, dtBalanceSelectedComputeAsset, - selectedComputeAssetType + selectedComputeAssetType, + algorithmConsumableStatus )} diff --git a/src/components/molecules/FormFields/Credential/index.tsx b/src/components/molecules/FormFields/Credential/index.tsx index 3aa21085d..f9977d21e 100644 --- a/src/components/molecules/FormFields/Credential/index.tsx +++ b/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('') } diff --git a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx b/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx index 36906a061..e1c9b657a 100644 --- a/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx +++ b/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() 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({ 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} /> ) diff --git a/src/components/organisms/AssetActions/Compute/index.tsx b/src/components/organisms/AssetActions/Compute/index.tsx index 47c45cc60..0b0deeefa 100644 --- a/src/components/organisms/AssetActions/Compute/index.tsx +++ b/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() 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} /> )} diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index 3f535b36b..d7f2fadc7 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/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(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,13 +109,14 @@ 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, @@ -119,8 +124,9 @@ export default function Consume({ 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} /> ) diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index ed5bec4d5..0b2c5c469 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/src/components/organisms/AssetActions/index.tsx @@ -25,6 +25,24 @@ export default function AssetActions(): ReactElement { const [fileIsLoading, setFileIsLoading] = useState(false) const isCompute = Boolean(ddo?.findServiceByType('compute')) + const [isConsumable, setIsConsumable] = useState(true) + const [consumableFeedback, setConsumableFeedback] = useState('') + + useEffect(() => { + if (!ddo || !accountId) return + async function checkIsConsumable() { + const consumable = await ocean.assets.isConsumable( + ddo, + accountId.toLowerCase() + ) + if (consumable) { + setIsConsumable(consumable.result) + setConsumableFeedback(consumable.message) + } + } + checkIsConsumable() + }, [accountId, ddo]) + useEffect(() => { const { attributes } = ddo.findServiceByType('metadata') setFileMetadata(attributes.main.files[0]) @@ -86,6 +104,8 @@ export default function AssetActions(): ReactElement { isBalanceSufficient={isBalanceSufficient} file={fileMetadata} fileIsLoading={fileIsLoading} + isConsumable={isConsumable} + consumableFeedback={consumableFeedback} /> ) : ( ) diff --git a/src/utils/metadata.ts b/src/utils/metadata.ts index d29e3d6e2..691576286 100644 --- a/src/utils/metadata.ts +++ b/src/utils/metadata.ts @@ -116,6 +116,7 @@ export function transformPublishFormToMetadata( name, author, dateCreated: ddo ? ddo.created : currentTime, + datePublished: '', files: typeof files !== 'string' && files, license: 'https://market.oceanprotocol.com/terms' }, From 3798d80a4dfbea86ecf4db520c928cf047dc35e6 Mon Sep 17 00:00:00 2001 From: mihaisc Date: Tue, 6 Jul 2021 04:55:10 -0700 Subject: [PATCH 2/3] Global search bar (#690) * move search bar Signed-off-by: mihaisc * update search bar Signed-off-by: mihaisc * add enter event Signed-off-by: mihaisc * fix lint * small button fixes * add padding, change media width to rem * remove comments --- src/components/atoms/Input/index.tsx | 19 ++++-- src/components/molecules/Menu.module.css | 66 +++++++++++++++---- src/components/molecules/Menu.tsx | 4 ++ src/components/molecules/SearchBar.module.css | 46 +++++++++++-- .../molecules/SearchBar.stories.tsx | 2 - src/components/molecules/SearchBar.tsx | 61 ++++++++++------- .../molecules/Wallet/index.module.css | 1 + src/components/pages/Home.tsx | 4 -- src/components/templates/Search/index.tsx | 4 -- src/images/search.svg | 1 + 10 files changed, 152 insertions(+), 56 deletions(-) create mode 100644 src/images/search.svg diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx index 0aead33ab..7f4c406e7 100644 --- a/src/components/atoms/Input/index.tsx +++ b/src/components/atoms/Input/index.tsx @@ -27,6 +27,13 @@ export interface InputProps { | ChangeEvent | ChangeEvent ): void + onKeyPress?( + e: + | React.KeyboardEvent + | React.KeyboardEvent + | React.KeyboardEvent + | React.KeyboardEvent + ): void rows?: number multiple?: boolean pattern?: string @@ -42,6 +49,7 @@ export interface InputProps { defaultChecked?: boolean size?: 'mini' | 'small' | 'large' | 'default' className?: string + divClassName?: string } export default function Input(props: Partial): ReactElement { @@ -50,10 +58,13 @@ export default function Input(props: Partial): ReactElement { const hasError = props.form?.touched[field.name] && props.form?.errors[field.name] - const styleClasses = cx({ - field: true, - hasError: hasError - }) + const styleClasses = cx( + { + field: true, + hasError: hasError + }, + props.divClassName + ) return (
import('./Wallet')) @@ -51,6 +52,9 @@ export default function Menu(): ReactElement { ))} +
+ +
diff --git a/src/components/molecules/SearchBar.module.css b/src/components/molecules/SearchBar.module.css index c40741f52..f7cd67491 100644 --- a/src/components/molecules/SearchBar.module.css +++ b/src/components/molecules/SearchBar.module.css @@ -1,17 +1,49 @@ -.form { - margin-bottom: var(--spacer); - width: 100%; - max-width: 30rem; +.search { + display: flex; + flex: 1 0 auto; + align-self: stretch; +} +.button { + padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3); + cursor: pointer; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + background-color: var(--background-content); + border-left: none; + white-space: nowrap; + min-width: 4rem; } -.form > div > div { +.button:hover, +.button:focus { + color: var(--brand-white); + text-decoration: none; + transform: translate3d(0, -0.05rem, 0); + box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.1); +} + +.input { + height: 36px !important; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.searchInput { + flex-grow: 2; + margin-bottom: 0px; +} + +.searchIcon { + fill: var(--brand-grey-light); + transition: 0.2s ease-out; +} +.search > div > div { margin: 0; } -.form label { +.search label { display: none; } -.form input { +.search input { background-color: var(--background-content); } diff --git a/src/components/molecules/SearchBar.stories.tsx b/src/components/molecules/SearchBar.stories.tsx index 31c512a99..d116b926e 100644 --- a/src/components/molecules/SearchBar.stories.tsx +++ b/src/components/molecules/SearchBar.stories.tsx @@ -10,5 +10,3 @@ export default { export const Normal = () => export const WithInitialValue = () => - -export const WithFilters = () => diff --git a/src/components/molecules/SearchBar.tsx b/src/components/molecules/SearchBar.tsx index 1dfb2c4d7..7978ce68e 100644 --- a/src/components/molecules/SearchBar.tsx +++ b/src/components/molecules/SearchBar.tsx @@ -1,24 +1,35 @@ -import React, { useState, ChangeEvent, FormEvent, ReactElement } from 'react' +import React, { + useState, + useEffect, + ChangeEvent, + FormEvent, + ReactElement +} from 'react' import { navigate } from 'gatsby' +import queryString from 'query-string' import styles from './SearchBar.module.css' import Button from '../atoms/Button' import Input from '../atoms/Input' import InputGroup from '../atoms/Input/InputGroup' import { addExistingParamsToUrl } from '../templates/Search/utils' +import { ReactComponent as SearchIcon } from '../../images/search.svg' export default function SearchBar({ placeholder, initialValue, - filters, size }: { placeholder?: string initialValue?: string - filters?: boolean size?: 'small' | 'large' }): ReactElement { let [value, setValue] = useState(initialValue || '') + const parsed = queryString.parse(location.search) + const { text, owner } = parsed + useEffect(() => { + ;(text || owner) && setValue((text || owner) as string) + }, [text, owner]) async function startSearch(e: FormEvent) { e.preventDefault() if (value === '') value = ' ' @@ -50,27 +61,33 @@ export default function SearchBar({ } return ( -
- - - - - - {filters &&
Type, Price
} + }} + /> +
) } diff --git a/src/components/molecules/Wallet/index.module.css b/src/components/molecules/Wallet/index.module.css index 68f94fd0b..2993716bf 100644 --- a/src/components/molecules/Wallet/index.module.css +++ b/src/components/molecules/Wallet/index.module.css @@ -1,3 +1,4 @@ .wallet { display: flex; + align-self: stretch; } diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx index 44e18633c..b17436eb3 100644 --- a/src/components/pages/Home.tsx +++ b/src/components/pages/Home.tsx @@ -134,10 +134,6 @@ export default function HomePage(): ReactElement { return ( <> - - - -

Bookmarks

diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx index cfbf7bb6c..9c69f21b9 100644 --- a/src/components/templates/Search/index.tsx +++ b/src/components/templates/Search/index.tsx @@ -1,7 +1,6 @@ import React, { ReactElement, useState, useEffect } from 'react' import Permission from '../../organisms/Permission' import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache' -import SearchBar from '../../molecules/SearchBar' import AssetList from '../../organisms/AssetList' import styles from './index.module.css' import queryString from 'query-string' @@ -65,9 +64,6 @@ export default function SearchPage({ <>
- {(text || owner || tags) && ( - - )}
\ No newline at end of file From 4e0bc09f8c15f98757eb6206d14acb97475f2924 Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Wed, 7 Jul 2021 09:45:20 +0300 Subject: [PATCH 3/3] Adapt Aquarius queries to chainId (#667) * wip * get latest assets from multiple networks * updated queryMetadata function in components * added new multinetwork aquarius api * Use ddo chainId for AssetType inside teaser * added chainId filter to queries from home page * put chainId query string in parenthesis * search filter by chainIds * updated getDoo and getAssetName functions * removed logs and fixed lint errors * updated get published assets query * adapted bookmarks aquarius call to multinetwork * removed temporary ddo Co-authored-by: Norbi --- README.md | 7 ++-- src/components/atoms/AssetType.tsx | 15 +++----- src/components/molecules/AssetListTitle.tsx | 6 +--- src/components/molecules/AssetTeaser.tsx | 3 +- src/components/molecules/Bookmarks.tsx | 22 ++++++------ src/components/molecules/PoolTransactions.tsx | 1 + .../organisms/AssetActions/Compute/index.tsx | 3 +- .../Edit/FormEditComputeDataset.tsx | 8 ++--- .../organisms/AssetContent/MetaMain.tsx | 1 + .../pages/History/ComputeJobs/Details.tsx | 6 +--- .../pages/History/ComputeJobs/index.tsx | 33 +++++++++-------- src/components/pages/History/Downloads.tsx | 6 +--- .../pages/History/PublishedList.tsx | 15 ++++---- src/components/pages/Home.tsx | 20 ++++++----- src/components/templates/Search/index.tsx | 11 ++++-- src/components/templates/Search/utils.ts | 20 +++++++++-- src/providers/Asset.tsx | 15 +++----- src/providers/Ocean.tsx | 11 ++---- src/utils/aquarius.ts | 36 +++++++++---------- 19 files changed, 119 insertions(+), 120 deletions(-) diff --git a/README.md b/README.md index c3ee064df..5f4622fb5 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,7 @@ const queryLatest = { offset: 9, query: { // https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html + query_string: { query: `-isInPurgatory:true` } }, sort: { created: -1 } @@ -141,11 +142,7 @@ function Component() { const source = axios.CancelToken.source() async function init() { - const result = await queryMetadata( - query, - appConfig.metadataCacheUri, - source.token - ) + const result = await queryMetadata(query, source.token) setResult(result) } init() diff --git a/src/components/atoms/AssetType.tsx b/src/components/atoms/AssetType.tsx index 7a3878551..17166fef9 100644 --- a/src/components/atoms/AssetType.tsx +++ b/src/components/atoms/AssetType.tsx @@ -5,21 +5,20 @@ import { ReactComponent as Compute } from '../../images/compute.svg' import { ReactComponent as Download } from '../../images/download.svg' import { ReactComponent as Lock } from '../../images/lock.svg' import NetworkName from './NetworkName' -import { useOcean } from '../../providers/Ocean' const cx = classNames.bind(styles) export default function AssetType({ type, accessType, - className + className, + chainId }: { type: string accessType: string + chainId: number className?: string }): ReactElement { - const { config } = useOcean() - const styleClasses = cx({ [className]: className }) @@ -37,12 +36,8 @@ export default function AssetType({ {type === 'dataset' ? 'data set' : 'algorithm'}
{/* TODO: networkId needs to come from the multinetwork DDO for each asset */} - {(config?.networkId || 1) && ( - + {chainId && ( + )}
) diff --git a/src/components/molecules/AssetListTitle.tsx b/src/components/molecules/AssetListTitle.tsx index 815a7f8d2..9fb6a7535 100644 --- a/src/components/molecules/AssetListTitle.tsx +++ b/src/components/molecules/AssetListTitle.tsx @@ -30,11 +30,7 @@ export default function AssetListTitle({ const source = axios.CancelToken.source() async function getAssetName() { - const title = await getAssetsNames( - [did], - appConfig.metadataCacheUri, - source.token - ) + const title = await getAssetsNames([did], source.token) setAssetTitle(title[did]) } diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index 82e91f9ae..f96fe3330 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -11,7 +11,7 @@ import { useOcean } from '../../providers/Ocean' import styles from './AssetTeaser.module.css' declare type AssetTeaserProps = { - ddo: DDO + ddo: any price: BestPrice } @@ -42,6 +42,7 @@ const AssetTeaser: React.FC = ({ type={type} accessType={accessType} className={styles.typeDetails} + chainId={ddo.chainId} />
diff --git a/src/components/molecules/Bookmarks.tsx b/src/components/molecules/Bookmarks.tsx index 9fbeff3f3..0bd73a8c0 100644 --- a/src/components/molecules/Bookmarks.tsx +++ b/src/components/molecules/Bookmarks.tsx @@ -6,13 +6,16 @@ import { useOcean } from '../../providers/Ocean' import Price from '../atoms/Price' import Tooltip from '../atoms/Tooltip' import AssetTitle from './AssetListTitle' -import { queryMetadata } from '../../utils/aquarius' +import { + queryMetadata, + transformChainIdsListToQuery +} from '../../utils/aquarius' import axios, { CancelToken } from 'axios' import { useSiteMetadata } from '../../hooks/useSiteMetadata' async function getAssetsBookmarked( bookmarks: string[], - metadataCacheUri: string, + chainIds: number[], cancelToken: CancelToken ) { const searchDids = JSON.stringify(bookmarks) @@ -27,7 +30,9 @@ async function getAssetsBookmarked( offset: 100, query: { query_string: { - query: searchDids, + query: `(${searchDids}) AND (${transformChainIdsListToQuery( + chainIds + )})`, fields: ['dataToken'], default_operator: 'OR' } @@ -36,11 +41,7 @@ async function getAssetsBookmarked( } try { - const result = await queryMetadata( - queryBookmarks, - metadataCacheUri, - cancelToken - ) + const result = await queryMetadata(queryBookmarks, cancelToken) return result } catch (error) { @@ -84,6 +85,7 @@ export default function Bookmarks(): ReactElement { const [pinned, setPinned] = useState() const [isLoading, setIsLoading] = useState() + const { chainIds } = useUserPreferences() useEffect(() => { if (!appConfig.metadataCacheUri || bookmarks === []) return @@ -101,7 +103,7 @@ export default function Bookmarks(): ReactElement { try { const resultPinned = await getAssetsBookmarked( bookmarks, - appConfig.metadataCacheUri, + chainIds, source.token ) setPinned(resultPinned?.results) @@ -116,7 +118,7 @@ export default function Bookmarks(): ReactElement { return () => { source.cancel() } - }, [bookmarks, appConfig.metadataCacheUri]) + }, [bookmarks, chainIds]) return ( (