diff --git a/app.config.js b/app.config.js index 64c5373a0..b298d2412 100644 --- a/app.config.js +++ b/app.config.js @@ -5,7 +5,7 @@ module.exports = { // List of chainIds which metadata cache queries will return by default. // This preselects the Chains user preferences. - chainIds: [1, 137], + chainIds: [1, 137, 56], // List of all supported chainIds. Used to populate the Chains user preferences list. chainIdsSupported: [1, 3, 4, 137, 80001, 1287, 56], diff --git a/content/pages/publish/index.json b/content/pages/publish/index.json index 00d2d5d91..666ff4815 100644 --- a/content/pages/publish/index.json +++ b/content/pages/publish/index.json @@ -1,5 +1,6 @@ { "title": "Publish", "description": "Highlight the important features of your data set or algorithm to make it more discoverable and catch the interest of data consumers.", - "warning": "Given the beta status, publishing on Ropsten or Rinkeby first is strongly recommended. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms)." + "warning": "Given the beta status, publishing on Ropsten or Rinkeby first is strongly recommended. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms).", + "tooltipNetwork": "Assets are published into the network your wallet is connected to. Switch your wallet's network to publish into another one." } diff --git a/src/components/atoms/AssetType.module.css b/src/components/atoms/AssetType.module.css index 814a2d575..e057974c1 100644 --- a/src/components/atoms/AssetType.module.css +++ b/src/components/atoms/AssetType.module.css @@ -10,19 +10,7 @@ .typeLabel { display: inline-block; text-transform: uppercase; - border-right: 1px solid var(--border-color); - padding-right: calc(var(--spacer) / 3.5); - margin-right: calc(var(--spacer) / 4); border-left: 1px solid var(--border-color); padding-left: calc(var(--spacer) / 3.5); margin-left: calc(var(--spacer) / 4); } - -.network { - display: inline-block; -} - -.network svg { - vertical-align: baseline; - margin-bottom: -0.15em; -} diff --git a/src/components/atoms/AssetType.tsx b/src/components/atoms/AssetType.tsx index 17166fef9..202dc9fe8 100644 --- a/src/components/atoms/AssetType.tsx +++ b/src/components/atoms/AssetType.tsx @@ -4,19 +4,16 @@ import classNames from 'classnames/bind' 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' const cx = classNames.bind(styles) export default function AssetType({ type, accessType, - className, - chainId + className }: { type: string accessType: string - chainId: number className?: string }): ReactElement { const styleClasses = cx({ @@ -35,10 +32,6 @@ export default function AssetType({
{type === 'dataset' ? 'data set' : 'algorithm'}
- {/* TODO: networkId needs to come from the multinetwork DDO for each asset */} - {chainId && ( - - )} ) } diff --git a/src/components/atoms/Box.module.css b/src/components/atoms/Box.module.css index f9c4591db..cd9e4acd5 100644 --- a/src/components/atoms/Box.module.css +++ b/src/components/atoms/Box.module.css @@ -4,7 +4,6 @@ border-radius: var(--border-radius); border: 1px solid var(--border-color); box-shadow: 0 6px 17px 0 var(--box-shadow-color); - overflow: hidden; padding: calc(var(--spacer) / 1.5); } diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx index 7f4c406e7..1a3102be6 100644 --- a/src/components/atoms/Input/index.tsx +++ b/src/components/atoms/Input/index.tsx @@ -49,7 +49,6 @@ export interface InputProps { defaultChecked?: boolean size?: 'mini' | 'small' | 'large' | 'default' className?: string - divClassName?: string } export default function Input(props: Partial): ReactElement { @@ -58,13 +57,10 @@ 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 - }, - props.divClassName - ) + const styleClasses = cx({ + field: true, + hasError: hasError + }) return (
= ({ ddo, price }: AssetTeaserProps) => { - const { config } = useOcean() const { attributes } = ddo.findServiceByType('metadata') const { name, type } = attributes.main const { dataTokenInfo } = ddo @@ -42,7 +41,6 @@ const AssetTeaser: React.FC = ({ type={type} accessType={accessType} className={styles.typeDetails} - chainId={ddo.chainId} />
@@ -55,6 +53,7 @@ const AssetTeaser: React.FC = ({
+
diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css index aaca09002..834d53e1b 100644 --- a/src/components/molecules/Menu.module.css +++ b/src/components/molecules/Menu.module.css @@ -2,88 +2,55 @@ width: 100%; padding: calc(var(--spacer) / 2); display: flex; - flex-wrap: wrap; align-items: center; + justify-content: space-between; + flex-wrap: wrap; } .logo { + order: 1; white-space: nowrap; display: flex; - flex: 0 0 auto; - flex-direction: row; - justify-content: center; align-items: center; } .navigation { - width: auto; - margin: 0; - text-align: left; - border: none; -} - -.search { - display: flex; - flex: 1 0 auto; - justify-content: center; - align-items: center; - align-self: flex-start; - padding-left: 20px; - margin-left: auto; + order: 3; + margin-top: calc(var(--spacer) / 2); + text-align: center; + border-top: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); + margin-left: -1rem; + margin-right: -1rem; + width: calc(100% + 2rem); } .actions { + order: 2; display: flex; - flex: 0 0 auto; - flex-direction: row; - justify-content: center; - align-items: center; - align-self: flex-start; } .title { display: none; } -@media (max-width: 38rem) { - .actions { - margin-left: auto; - } - .navigation { - order: 3; - display: block; - justify-content: center; - align-items: center; - margin-top: calc(var(--spacer) / 2); - text-align: center; - border-top: 1px solid var(--border-color); - border-bottom: 1px solid var(--border-color); - margin-left: -1rem; - margin-right: -1rem; - width: calc(50% + 2rem); - } -} - -@media (max-width: 75rem) { - .navigation { - flex: 1 0 auto; - justify-content: left; - align-items: left; - } - .search { - flex: 0 0 100%; - padding-top: 10px; - order: 4; - } -} - @media screen and (min-width: 42rem) { + .menu { + justify-content: start; + } + .navigation { + order: 2; width: auto; margin: 0; text-align: left; border: none; } + + .actions { + order: 3; + margin-left: auto; + } } @media screen and (min-width: 55rem) { @@ -135,7 +102,7 @@ .link:hover, .link:focus, .link:active { - color: var(--brand-grey); + color: var(--font-color-text); } .link[aria-current], diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx index b6817e8d8..67fa5c4db 100644 --- a/src/components/molecules/Menu.tsx +++ b/src/components/molecules/Menu.tsx @@ -40,7 +40,7 @@ export default function Menu(): ReactElement {

- {siteTitle} + {siteTitle}

@@ -52,10 +52,8 @@ export default function Menu(): ReactElement { ))} -
- -
+ diff --git a/src/components/molecules/SearchBar.module.css b/src/components/molecules/SearchBar.module.css index f7cd67491..cbd81c652 100644 --- a/src/components/molecules/SearchBar.module.css +++ b/src/components/molecules/SearchBar.module.css @@ -1,49 +1,72 @@ .search { display: flex; - flex: 1 0 auto; - align-self: stretch; + position: relative; } + .button { - padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3); + color: var(--color-secondary); 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; + background: var(--background-content); + border: none; + box-shadow: none; + padding: 0; + position: absolute; + padding: calc(var(--spacer) / 4); + width: 100%; + right: 1px; + left: 1px; + top: 1px; + bottom: 1px; + z-index: -1; } .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); + color: var(--font-color-text); } .input { - height: 36px !important; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; + background-color: transparent; + height: 36px; + margin: 0; + outline: 0; + padding-right: var(--spacer); + width: 0; + transition: none; } -.searchInput { - flex-grow: 2; - margin-bottom: 0px; + +.input:focus { + width: calc(100% - var(--spacer)); + background-color: var(--background-content); + position: fixed; + left: calc(var(--spacer) / 2); + right: 0; + z-index: 2; +} + +@media screen and (min-width: 78rem) { + .input, + .input:focus { + width: auto; + position: relative; + left: initial; + right: initial; + } + + .button { + width: auto; + left: auto; + background: none; + } + + .input:focus + .button { + z-index: 3; + } } .searchIcon { - fill: var(--brand-grey-light); + fill: currentColor; transition: 0.2s ease-out; -} -.search > div > div { - margin: 0; -} - -.search label { - display: none; -} - -.search input { - background-color: var(--background-content); + width: var(--font-size-h5); + height: var(--font-size-h5); } diff --git a/src/components/molecules/SearchBar.tsx b/src/components/molecules/SearchBar.tsx index 7978ce68e..b28c5d986 100644 --- a/src/components/molecules/SearchBar.tsx +++ b/src/components/molecules/SearchBar.tsx @@ -3,36 +3,49 @@ import React, { useEffect, ChangeEvent, FormEvent, + KeyboardEvent, 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' +import InputElement from '../atoms/Input/InputElement' +import styles from './SearchBar.module.css' + +async function emptySearch() { + const searchParams = new URLSearchParams(window.location.href) + const text = searchParams.get('text') + if (text !== ('' || undefined || null)) { + const url = await addExistingParamsToUrl(location, [ + 'text', + 'owner', + 'tags' + ]) + navigate(`${url}&text=%20`) + } +} export default function SearchBar({ placeholder, - initialValue, - size + initialValue }: { placeholder?: string initialValue?: string - size?: 'small' | 'large' }): ReactElement { - let [value, setValue] = useState(initialValue || '') + const [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 = ' ' + + if (value === '') setValue(' ') + const urlEncodedValue = encodeURIComponent(value) const url = await addExistingParamsToUrl(location, [ 'text', @@ -42,52 +55,38 @@ export default function SearchBar({ navigate(`${url}&text=${urlEncodedValue}`) } - async function emptySearch() { - const searchParams = new URLSearchParams(window.location.href) - const text = searchParams.get('text') - if (text !== ('' || undefined || null)) { - const url = await addExistingParamsToUrl(location, [ - 'text', - 'owner', - 'tags' - ]) - navigate(`${url}&text=%20`) - } - } - function handleChange(e: ChangeEvent) { setValue(e.target.value) e.target.value === '' && emptySearch() } + async function handleKeyPress(e: KeyboardEvent) { + if (e.key === 'Enter') { + await startSearch(e) + } + } + + async function handleButtonClick(e: FormEvent) { + e.preventDefault() + await startSearch(e) + } + return (
- ) => { - if (e.key === 'Enter') { - await startSearch(e) - } - }} + onKeyPress={handleKeyPress} /> - +
) } diff --git a/src/components/molecules/UserPreferences/Networks/index.module.css b/src/components/molecules/UserPreferences/Networks/index.module.css index 49c221cca..e4a5e90cb 100644 --- a/src/components/molecules/UserPreferences/Networks/index.module.css +++ b/src/components/molecules/UserPreferences/Networks/index.module.css @@ -1,3 +1,22 @@ -.network { +.networks { margin-right: calc(var(--spacer) / 3); + position: relative; + overflow: hidden; +} + +.chainsSelected { + text-align: center; + position: absolute; + bottom: -8px; + left: 0; + width: 100%; +} + +.chainsSelectedIndicator { + width: 4px; + height: 4px; + border-radius: 50%; + margin: 0 1px; + display: inline-block; + background-color: var(--color-primary); } diff --git a/src/components/molecules/UserPreferences/Networks/index.tsx b/src/components/molecules/UserPreferences/Networks/index.tsx index 8910930d3..28cc83463 100644 --- a/src/components/molecules/UserPreferences/Networks/index.tsx +++ b/src/components/molecules/UserPreferences/Networks/index.tsx @@ -10,6 +10,7 @@ import NetworksList from './NetworksList' import stylesIndex from '../index.module.css' import styles from './index.module.css' import useNetworkMetadata from '../../../../hooks/useNetworkMetadata' +import { useUserPreferences } from '../../../../providers/UserPreferences' export function filterNetworksByType( type: 'mainnet' | 'testnet', @@ -32,6 +33,7 @@ export function filterNetworksByType( export default function Networks(): ReactElement { const { networksList } = useNetworkMetadata() const { appConfig } = useSiteMetadata() + const { chainIds } = useUserPreferences() const networksMain = filterNetworksByType( 'mainnet', @@ -59,10 +61,16 @@ export default function Networks(): ReactElement { } trigger="click focus" - className={`${stylesIndex.preferences} ${styles.network}`} + className={`${stylesIndex.preferences} ${styles.networks}`} > -