diff --git a/src/components/molecules/PoolTransactions.tsx b/src/components/molecules/PoolTransactions.tsx
index 9d21da5c4..da7d5bd9d 100644
--- a/src/components/molecules/PoolTransactions.tsx
+++ b/src/components/molecules/PoolTransactions.tsx
@@ -12,6 +12,7 @@ import { gql, useQuery } from 'urql'
import web3 from 'web3'
import { useWeb3 } from '../../providers/Web3'
+import { getOceanConfig } from '../../utils/ocean'
const txHistoryQueryByPool = gql`
query TransactionHistoryByPool($user: String, $pool: String) {
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 (
-
)
}
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/organisms/AssetActions/Compute/FormComputeDataset.tsx b/src/components/organisms/AssetActions/Compute/FormComputeDataset.tsx
index 3ce3c24ea..a8faa5334 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, isAssetNetwork } = 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,12 @@ export default function FormStartCompute({
0
+ }
hasPreviousOrder={hasPreviousOrder}
hasDatatoken={hasDatatoken}
dtSymbol={ddo.dataTokenInfo.symbol}
@@ -168,6 +194,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 3f9885db2..1bedd93da 100644
--- a/src/components/organisms/AssetActions/Compute/index.tsx
+++ b/src/components/organisms/AssetActions/Compute/index.tsx
@@ -38,6 +38,7 @@ import { secondsToString } from '../../../../utils/metadata'
import { AssetSelectionAsset } from '../../../molecules/FormFields/AssetSelection'
import AlgorithmDatasetsListForCompute from '../../AssetContent/AlgorithmDatasetsListForCompute'
import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
+import { chainIds } from '../../../../../app.config'
const SuccessAction = () => (