Release (#1492)

* update contracts

* add version selector

* show banner on all pages

* show banner on all pages

* Announcement/warning messages cleanup

* new main announcement message
* contextual compute-to-data warnings in publish form & asset action

* copy update

* change hardcoded URLs

* change localStorage key

* to prevent user preferences clashes when switching between v3 & v4

* footer stats note changes

* move copy into content file
* mention external markets

* footer stats note copy changes

* modified pool widget footer

* take out pool reserve display
* style & spacing updates for fees

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

app.config.js

@@ -19,10 +19,10 @@ module.exports = {
 
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
-  chainIds: [3, 4, 80001, 1287],
+  chainIds: [1, 137, 56, 246, 1285],
 
   // List of all supported chainIds. Used to populate the Chains user preferences list.
-  chainIdsSupported: [3, 4, 80001, 1287],
+  chainIdsSupported: [1, 137, 56, 246, 1285, 3, 4, 80001, 1287],
 
   infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx',
 

content/footer.json

@@ -12,5 +12,8 @@
       "name": "Discord",
       "url": "https://discord.gg/TnXjkR5"
     }
-  ]
+  ],
+  "stats": {
+    "note": "Counted on-chain from our NFT and pool factories. Includes assets in all Ocean Market forks and [purgatory](https://github.com/oceanprotocol/list-purgatory)."
+  }
 }

content/site.json

@@ -1,7 +1,7 @@
 {
   "siteTitle": "Ocean Market",
   "siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
-  "siteUrl": "https://v4.market.oceanprotocol.com",
+  "siteUrl": "https://market.oceanprotocol.com",
   "siteImage": "/share.png",
   "copyright": "All Rights Reserved. Powered by ",
   "menu": [
@@ -14,12 +14,8 @@
       "link": "/profile"
     }
   ],
+  "announcement": "Data NFTs, One-Sided Staking and more. [Explore OceanONDA V4](https://blog.oceanprotocol.com).",
   "warning": {
-    "main": "",
+    "ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
-    "polygonPublish": "Only republish data sets with a pool from ETH Mainnet into Polygon/Matic if the liquidity is **less than or equal to 1000 OCEAN in the original pool**. Doing otherwise will lead to [purgatory](https://github.com/oceanprotocol/list-purgatory) for the data set in Polygon/Matic."
-  },
-  "announcement": {
-    "main": "Ocean Market is [available on Polygon](https://blog.oceanprotocol.com/ocean-on-polygon-network-8abad19cbf47).",
-    "polygon": "Polygon/Matic EVM support is in early stages. [Use the Polygon Bridge](https://docs.oceanprotocol.com/tutorials/polygon-bridge/) to get mOCEAN."
   }
 }

package-lock.json

@@ -13,7 +13,7 @@
         "@coingecko/cryptoformat": "^0.4.4",
         "@loadable/component": "^5.15.2",
         "@oceanprotocol/art": "^3.2.0",
-        "@oceanprotocol/lib": "^1.0.0-next.44",
+        "@oceanprotocol/lib": "^1.0.0-next.45",
         "@oceanprotocol/typographies": "^0.1.0",
         "@portis/web3": "^4.0.7",
         "@tippyjs/react": "^4.2.6",
@@ -4518,16 +4518,16 @@
       "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
     },
     "node_modules/@oceanprotocol/contracts": {
-      "version": "1.0.0-alpha.34",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0-alpha.34.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0.tgz",
-      "integrity": "sha512-ZhNCakYbUpXrffpS98Hj0r5K70IzzTXNoYKBX4Ks3Qqc2T7mhXIxtakzygkM0lEk038ImWuzS2PAZKTATz+X2w=="
+      "integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
     },
     "node_modules/@oceanprotocol/lib": {
-      "version": "1.0.0-next.44",
+      "version": "1.0.0-next.45",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.44.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.45.tgz",
-      "integrity": "sha512-TXrHvY7+t7WSJXAVkSip0hp5byE8G4citJGirB5qJt34VGA+ujd+CoLU1bB/5gFSYH3eM56K4pcUPfCHZjeN3w==",
+      "integrity": "sha512-WsSMZubvS5kVu4p6jQzxeENWitXok7M6yKjuHW0uhYJIYNx8JrZsCgYp9yz0p73a+bEQazSnr1nmvc1jVLU8jQ==",
       "dependencies": {
-        "@oceanprotocol/contracts": "^1.0.0-alpha.34",
+        "@oceanprotocol/contracts": "^1.0.0",
         "bignumber.js": "^9.0.2",
         "cross-fetch": "^3.1.5",
         "crypto-js": "^4.1.1",
@@ -44760,16 +44760,16 @@
       "integrity": "sha512-aUQtg4m5hJlQ0u8C29O9TXJWcAenO3G9vP+vf6LNFkpTDOCMycN/F0SzHS89VNrvGUha8oTDEg7FAkfZBPv2WA=="
     },
     "@oceanprotocol/contracts": {
-      "version": "1.0.0-alpha.34",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0-alpha.34.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-1.0.0.tgz",
-      "integrity": "sha512-ZhNCakYbUpXrffpS98Hj0r5K70IzzTXNoYKBX4Ks3Qqc2T7mhXIxtakzygkM0lEk038ImWuzS2PAZKTATz+X2w=="
+      "integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
     },
     "@oceanprotocol/lib": {
-      "version": "1.0.0-next.44",
+      "version": "1.0.0-next.45",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.44.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.0.0-next.45.tgz",
-      "integrity": "sha512-TXrHvY7+t7WSJXAVkSip0hp5byE8G4citJGirB5qJt34VGA+ujd+CoLU1bB/5gFSYH3eM56K4pcUPfCHZjeN3w==",
+      "integrity": "sha512-WsSMZubvS5kVu4p6jQzxeENWitXok7M6yKjuHW0uhYJIYNx8JrZsCgYp9yz0p73a+bEQazSnr1nmvc1jVLU8jQ==",
       "requires": {
-        "@oceanprotocol/contracts": "^1.0.0-alpha.34",
+        "@oceanprotocol/contracts": "^1.0.0",
         "bignumber.js": "^9.0.2",
         "cross-fetch": "^3.1.5",
         "crypto-js": "^4.1.1",

package.json

@@ -25,7 +25,7 @@
     "@coingecko/cryptoformat": "^0.4.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.0.0-next.44",
+    "@oceanprotocol/lib": "^1.0.0-next.45",
     "@oceanprotocol/typographies": "^0.1.0",
     "@portis/web3": "^4.0.7",
     "@tippyjs/react": "^4.2.6",

src/@context/MarketMetadata/_types.ts

@@ -29,6 +29,8 @@ export interface AppConfig {
     classNameLight: string
     storageKey: string
   }
+  v3MetadataCacheUri: string
+  v3MarketUri: string
 }
 export interface SiteContent {
   siteTitle: string
@@ -40,13 +42,9 @@ export interface SiteContent {
     name: string
     link: string
   }[]
+  announcement: string
   warning: {
-    main: string
+    ctd: string
-    polygonPublish: string
-  }
-  announcement: {
-    main: string
-    polygon: string
   }
 }
 

src/@context/UserPreferences.tsx

@@ -31,7 +31,7 @@ interface UserPreferencesValue {
 
 const UserPreferencesContext = createContext(null)
 
-const localStorageKey = 'ocean-user-preferences'
+const localStorageKey = 'ocean-user-preferences-v4'
 
 function getLocalStorage(): UserPreferencesValue {
   const storageParsed =

src/components/@shared/atoms/Badge/index.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './index.module.css'
 import classNames from 'classnames/bind'
 
 const cx = classNames.bind(styles)
 
 export interface BadgeProps {
-  label: string
+  label: string | ReactNode
   className?: string
 }
 

src/components/App/index.tsx

@@ -8,8 +8,7 @@ import AnnouncementBanner from '@shared/AnnouncementBanner'
 import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
 import styles from './index.module.css'
 import { ToastContainer } from 'react-toastify'
-import { useRouter } from 'next/router'
+import contentPurgatory from '../../../content/purgatory.json'
-import content from '../../../content/purgatory.json'
 import { useMarketMetadata } from '@context/MarketMetadata'
 
 export default function App({
@@ -17,24 +16,22 @@ export default function App({
 }: {
   children: ReactElement
 }): ReactElement {
-  const router = useRouter()
-
   const { siteContent, appConfig } = useMarketMetadata()
   const { accountId } = useWeb3()
   const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
 
   return (
     <div className={styles.app}>
-      {router.pathname === '/' && siteContent?.warning.main !== '' && (
+      {siteContent?.announcement !== '' && (
-        <AnnouncementBanner text={siteContent?.warning.main} />
+        <AnnouncementBanner text={siteContent?.announcement} />
       )}
       <Header />
 
       {isInPurgatory && (
         <Alert
-          title={content.account.title}
+          title={contentPurgatory.account.title}
           badge={`Reason: ${purgatoryData?.reason}`}
-          text={content.account.description}
+          text={contentPurgatory.account.description}
           state="error"
         />
       )}

src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css

@@ -22,3 +22,7 @@
   border-right: 0;
   padding: 0;
 }
+
+.warning {
+  margin-bottom: var(--spacer);
+}

src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx

@@ -11,6 +11,8 @@ import { useWeb3 } from '@context/Web3'
 import content from '../../../../../content/pages/startComputeDataset.json'
 import { Asset } from '@oceanprotocol/lib'
 import { AccessDetails } from 'src/@types/Price'
+import { useMarketMetadata } from '@context/MarketMetadata'
+import Alert from '@shared/atoms/Alert'
 
 export default function FormStartCompute({
   algorithms,
@@ -61,6 +63,7 @@ export default function FormStartCompute({
   isConsumable: boolean
   consumableFeedback: string
 }): ReactElement {
+  const { siteContent } = useMarketMetadata()
   const { isValid, values }: FormikContextType<{ algorithm: string }> =
     useFormikContext()
   const { asset, isAssetNetwork } = useAsset()
@@ -126,6 +129,11 @@ export default function FormStartCompute({
 
   return (
     <Form className={styles.form}>
+      <Alert
+        className={styles.warning}
+        state="info"
+        text={siteContent.warning.ctd}
+      />
       {content.form.data.map((field: FormFieldContent) => (
         <Field
           key={field.name}

src/components/Asset/AssetActions/Pool/Add/index.tsx

@@ -149,7 +149,7 @@ export default function Add({
               />
             </div>
 
-            <Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} />
+            {/* TODO: will be fixed in #1481 <Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} /> */}
 
             <Actions
               isDisabled={!isValid || !values.amount || values.amount === 0}

src/components/Asset/AssetActions/Pool/Sections/Update.module.css

@@ -4,8 +4,8 @@
   font-size: var(--font-size-mini);
   color: var(--color-secondary);
   text-align: center;
-  padding-top: calc(var(--spacer) / 4);
+  padding-top: calc(var(--spacer) / 2);
-  padding-bottom: calc(var(--spacer) / 3);
+  padding-bottom: calc(var(--spacer) / 2);
 }
 
 .update:before {

src/components/Asset/AssetActions/Pool/Sections/index.module.css

@@ -18,3 +18,18 @@
   margin-left: calc(var(--spacer) / 3);
   margin-right: calc(var(--spacer) / 3);
 }
+
+.fees {
+  border-top: none;
+  padding-top: 0;
+  margin-top: -0.5rem;
+}
+
+.fees > div {
+  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
+  text-align: center;
+}
+
+.fees figure {
+  display: none;
+}

src/components/Asset/AssetActions/Pool/Sections/index.tsx

@@ -110,17 +110,9 @@ export default function PoolSections() {
         titlePostfixTitle={`Weight of ${poolInfo?.weightBaseToken}% ${poolInfo?.baseTokenSymbol} & ${poolInfo?.weightDt}% ${poolInfo?.datatokenSymbol}`}
       >
         <Graph />
-        <Token
+      </PoolSection>
-          symbol={poolInfo?.baseTokenSymbol}
-          balance={`${poolData?.baseTokenLiquidity}`}
-          size="mini"
-        />
-        <Token
-          symbol={poolInfo?.datatokenSymbol}
-          balance={`${poolData?.datatokenLiquidity}`}
-          size="mini"
-        />
 
+      <PoolSection className={styles.fees}>
         <Token
           symbol="% swap fee"
           balance={poolInfo?.liquidityProviderSwapFee}

src/components/Footer/MarketStats/Tooltip.tsx

@@ -4,6 +4,8 @@ import PriceUnit from '@shared/Price/PriceUnit'
 import NetworkName from '@shared/NetworkName'
 import styles from './Tooltip.module.css'
 import { StatsValue } from './_types'
+import content from '../../../../content/footer.json'
+import Markdown from '@shared/Markdown'
 
 export default function MarketStatsTooltip({
   totalValueLockedInOcean,
@@ -39,13 +41,7 @@ export default function MarketStatsTooltip({
           </li>
         ))}
       </ul>
-      <p className={styles.note}>
+      <Markdown className={styles.note} text={content.stats.note} />
-        Counted on-chain from our NFT and pool factories. Does not filter out
-        assets in{' '}
-        <a href="https://github.com/oceanprotocol/list-purgatory">
-          list-purgatory
-        </a>
-      </p>
     </>
   )
 }

src/components/Header/Menu.module.css

@@ -7,13 +7,24 @@
   flex-wrap: wrap;
 }
 
-.logo {
+.logo,
-  order: 1;
+.badge {
   white-space: nowrap;
   display: flex;
+}
+
+.logo {
+  order: 0;
   align-items: center;
 }
 
+.badge {
+  cursor: pointer;
+  margin-top: -0.25rem;
+  position: relative;
+  padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4);
+}
+
 .navigation {
   order: 3;
   margin-top: calc(var(--spacer) / 2);
@@ -60,10 +71,10 @@
 
   .title {
     margin: 0;
-    margin-right: var(--spacer);
     display: block;
     color: var(--color-secondary);
     font-size: var(--font-size-h4);
+    margin-right: calc(var(--spacer) / 6);
   }
 }
 
@@ -115,6 +126,10 @@
   padding-right: 0;
 }
 
+.link[aria-disabled] {
+  pointer-events: none;
+}
+
 .logo svg {
   margin-right: calc(var(--spacer) / 3);
 }
@@ -122,3 +137,36 @@
 .actions button {
   text-transform: none;
 }
+
+.tooltip[aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
+
+.caret,
+svg.caret {
+  width: var(--font-size-mini);
+  height: var(--font-size-mini);
+  fill: var(--brand-white);
+  opacity: 0.7;
+  transition: transform 0.2s ease-out;
+  vertical-align: middle;
+  margin-left: calc(var(--spacer) / 12);
+}
+
+@media screen and (min-width: 42rem) {
+  .caret,
+  svg.caret {
+    display: inline-block;
+  }
+}
+
+.versions {
+  padding: calc(var(--spacer) / 4);
+}
+
+.versions .link {
+  display: inline-block;
+  margin: 0 calc(var(--spacer) / 4);
+  padding: 0;
+  font-size: var(--font-size-small);
+}

src/components/Header/Menu.tsx

@@ -9,7 +9,8 @@ import SearchBar from './SearchBar'
 import styles from './Menu.module.css'
 import { useRouter } from 'next/router'
 import { useMarketMetadata } from '@context/MarketMetadata'
-
+import Tooltip from '@shared/atoms/Tooltip'
+import Caret from '@images/caret.svg'
 const Wallet = loadable(() => import('./Wallet'))
 
 declare type MenuItem = {
@@ -33,19 +34,41 @@ function MenuLink({ item }: { item: MenuItem }) {
 }
 
 export default function Menu(): ReactElement {
-  const { siteContent } = useMarketMetadata()
+  const { appConfig, siteContent } = useMarketMetadata()
 
   return (
     <nav className={styles.menu}>
       <Link href="/">
         <a className={styles.logo}>
           <Logo noWordmark />
-          <h1 className={styles.title}>
+          <h1 className={styles.title}>{siteContent?.siteTitle}</h1>
-            {siteContent?.siteTitle} <Badge label="v4" />
-          </h1>
         </a>
       </Link>
 
+      <Tooltip
+        className={styles.tooltip}
+        content={
+          <div className={styles.versions}>
+            <a className={styles.link} href={appConfig.v3MarketUri}>
+              v3
+            </a>
+            <a className={styles.link} href="" aria-current aria-disabled>
+              v4
+            </a>
+          </div>
+        }
+        trigger="click focus"
+        placement="bottom"
+      >
+        <Badge
+          className={styles.badge}
+          label={
+            <>
+              v4 <Caret aria-hidden="true" className={styles.caret} />
+            </>
+          }
+        />
+      </Tooltip>
       <ul className={styles.navigation}>
         {siteContent?.menu.map((item: MenuItem) => (
           <li key={item.name}>

src/components/Publish/Metadata/index.module.css

@@ -4,3 +4,7 @@
   margin-left: 1.75rem;
   top: -3.2rem;
 }
+
+.fieldWarning {
+  composes: fieldWarning from '../index.module.css';
+}

src/components/Publish/Metadata/index.tsx

@@ -9,6 +9,8 @@ import IconDataset from '@images/dataset.svg'
 import IconAlgorithm from '@images/algorithm.svg'
 import styles from './index.module.css'
 import { algorithmContainerPresets } from '../_constants'
+import Alert from '@shared/atoms/Alert'
+import { useMarketMetadata } from '@context/MarketMetadata'
 
 const assetTypeOptionsTitles = getFieldContent(
   'type',
@@ -16,6 +18,8 @@ const assetTypeOptionsTitles = getFieldContent(
 ).options
 
 export default function MetadataFields(): ReactElement {
+  const { siteContent } = useMarketMetadata()
+
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
@@ -71,6 +75,13 @@ export default function MetadataFields(): ReactElement {
         name="metadata.type"
         options={assetTypeOptions}
       />
+      {values.services[0].access === 'compute' && (
+        <Alert
+          className={styles.fieldWarning}
+          state="info"
+          text={siteContent.warning.ctd}
+        />
+      )}
       <Field
         {...getFieldContent('name', content.metadata.fields)}
         component={Input}

src/components/Publish/Services/index.tsx

@@ -6,6 +6,9 @@ import IconCompute from '@images/compute.svg'
 import content from '../../../../content/publish/form.json'
 import { getFieldContent } from '../_utils'
 import { FormPublishData } from '../_types'
+import Alert from '@shared/atoms/Alert'
+import { useMarketMetadata } from '@context/MarketMetadata'
+import styles from '../index.module.css'
 
 const accessTypeOptionsTitles = getFieldContent(
   'access',
@@ -13,6 +16,8 @@ const accessTypeOptionsTitles = getFieldContent(
 ).options
 
 export default function ServicesFields(): ReactElement {
+  const { siteContent } = useMarketMetadata()
+
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
@@ -67,12 +72,21 @@ export default function ServicesFields(): ReactElement {
           name="services[0].algorithmPrivacy"
         />
       ) : (
+        <>
           <Field
             {...getFieldContent('access', content.services.fields)}
             component={Input}
             name="services[0].access"
             options={accessTypeOptions}
           />
+          {values.services[0].access === 'compute' && (
+            <Alert
+              className={styles.fieldWarning}
+              state="info"
+              text={siteContent.warning.ctd}
+            />
+          )}
+        </>
       )}
       <Field
         {...getFieldContent('providerUrl', content.services.fields)}

src/components/Publish/index.module.css

@@ -16,3 +16,8 @@
     padding-right: calc(var(--spacer) * 4);
   }
 }
+
+.fieldWarning {
+  margin-top: -2rem;
+  margin-bottom: var(--spacer);
+}