From be9fde8827fe321dee98c22aae509c67ab6547cb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Oct 2020 11:33:06 +0200
Subject: [PATCH 01/32] get datatoken balance for use in consume/compute

---
 .../organisms/AssetActions/Compute.tsx        |  4 ++-
 .../organisms/AssetActions/Consume.tsx        | 22 +++++++-------
 .../organisms/AssetActions/index.tsx          | 30 +++++++++++++++++--
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx
index 93b3d0cb0..2768e2418 100644
--- a/src/components/organisms/AssetActions/Compute.tsx
+++ b/src/components/organisms/AssetActions/Compute.tsx
@@ -19,10 +19,12 @@ import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export default function Compute({
   ddo,
-  isBalanceSufficient
+  isBalanceSufficient,
+  dtBalance
 }: {
   ddo: DDO
   isBalanceSufficient: boolean
+  dtBalance: string
 }): ReactElement {
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx
index 275632f23..5a6029f4d 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/organisms/AssetActions/Consume.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import Button from '../../atoms/Button'
@@ -13,11 +13,13 @@ import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 export default function Consume({
   ddo,
   file,
-  isBalanceSufficient
+  isBalanceSufficient,
+  dtBalance
 }: {
   ddo: DDO
   file: FileMetadata
   isBalanceSufficient: boolean
+  dtBalance: string
 }): ReactElement {
   const { ocean } = useOcean()
   const { marketFeeAddress } = useSiteMetadata()
@@ -25,22 +27,20 @@ export default function Consume({
 
   const isDisabled = !ocean || !isBalanceSufficient
 
-  if (consumeError) {
-    toast.error(consumeError)
+  async function handleConsume() {
+    await consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
   }
 
+  useEffect(() => {
+    consumeError && toast.error(consumeError)
+  }, [consumeError])
+
   const PurchaseButton = () => (
     <div>
       {consumeStepText ? (
         <Loader message={consumeStepText} />
       ) : (
-        <Button
-          style="primary"
-          onClick={() =>
-            consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
-          }
-          disabled={isDisabled}
-        >
+        <Button style="primary" onClick={handleConsume} disabled={isDisabled}>
           Buy
         </Button>
       )}
diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx
index a561aca69..4527acf71 100644
--- a/src/components/organisms/AssetActions/index.tsx
+++ b/src/components/organisms/AssetActions/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
 import compareAsBN from '../../../utils/compareAsBN'
@@ -10,13 +10,32 @@ import Pool from './Pool'
 import { AdditionalInformationMarket } from '../../../@types/MetaData'
 
 export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
-  const { balance } = useOcean()
+  const { ocean, balance, accountId } = useOcean()
   const { price } = useMetadata(ddo)
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
+  const [dtBalance, setDtBalance] = useState<string>()
 
   const isCompute = Boolean(ddo.findServiceByType('compute'))
   const { attributes } = ddo.findServiceByType('metadata')
 
+  // Get and set user DT balance
+  useEffect(() => {
+    if (!ocean || !accountId) return
+
+    async function init() {
+      try {
+        const dtBalance = await ocean.datatokens.balance(
+          ddo.dataToken,
+          accountId
+        )
+        setDtBalance(dtBalance)
+      } catch (e) {
+        Logger.error(e.message)
+      }
+    }
+    init()
+  }, [ocean, accountId, ddo.dataToken])
+
   // Check user balance against price
   useEffect(() => {
     if (!price || !price.value || !balance || !balance.ocean) return
@@ -29,10 +48,15 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
   }, [balance, price])
 
   const UseContent = isCompute ? (
-    <Compute ddo={ddo} isBalanceSufficient={isBalanceSufficient} />
+    <Compute
+      ddo={ddo}
+      dtBalance={dtBalance}
+      isBalanceSufficient={isBalanceSufficient}
+    />
   ) : (
     <Consume
       ddo={ddo}
+      dtBalance={dtBalance}
       isBalanceSufficient={isBalanceSufficient}
       file={attributes.main.files[0]}
     />

From a5815669c7a99d05b86dee8de73b97ce2558b923 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Oct 2020 12:14:57 +0200
Subject: [PATCH 02/32] refactor consume

---
 .../organisms/AssetActions/Consume.module.css |  6 +++++
 .../organisms/AssetActions/Consume.tsx        | 24 ++++++++++++++-----
 .../organisms/AssetActions/index.tsx          |  9 ++++---
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/organisms/AssetActions/Consume.module.css b/src/components/organisms/AssetActions/Consume.module.css
index b400962b9..9b03d5d16 100644
--- a/src/components/organisms/AssetActions/Consume.module.css
+++ b/src/components/organisms/AssetActions/Consume.module.css
@@ -19,3 +19,9 @@
 .feedback {
   width: 100%;
 }
+
+.hasTokens {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  margin-top: calc(var(--spacer) / 4);
+}
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx
index 5a6029f4d..541a69397 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/organisms/AssetActions/Consume.tsx
@@ -7,7 +7,7 @@ import Price from '../../atoms/Price'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
 import Loader from '../../atoms/Loader'
-import { useOcean, useConsume } from '@oceanprotocol/react'
+import { useOcean, useConsume, usePricing } from '@oceanprotocol/react'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export default function Consume({
@@ -23,25 +23,31 @@ export default function Consume({
 }): ReactElement {
   const { ocean } = useOcean()
   const { marketFeeAddress } = useSiteMetadata()
+  const { buyDT, pricingStepText, pricingError } = usePricing()
   const { consumeStepText, consume, consumeError } = useConsume()
 
-  const isDisabled = !ocean || !isBalanceSufficient
+  const isDisabled =
+    !ocean || !isBalanceSufficient || consumeStepText || pricingStepText
+  const hasDatatoken = Number(dtBalance) >= 1
 
   async function handleConsume() {
+    !hasDatatoken && (await buyDT(ddo.dataToken, '1'))
     await consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
   }
 
+  // Output errors in UI
   useEffect(() => {
     consumeError && toast.error(consumeError)
-  }, [consumeError])
+    pricingError && toast.error(pricingError)
+  }, [consumeError, pricingError])
 
   const PurchaseButton = () => (
     <div>
-      {consumeStepText ? (
-        <Loader message={consumeStepText} />
+      {consumeStepText || pricingStepText ? (
+        <Loader message={consumeStepText || pricingStepText} />
       ) : (
         <Button style="primary" onClick={handleConsume} disabled={isDisabled}>
-          Buy
+          {hasDatatoken ? 'Download' : 'Buy'}
         </Button>
       )}
     </div>
@@ -55,6 +61,12 @@ export default function Consume({
         </div>
         <div className={styles.pricewrapper}>
           <Price ddo={ddo} conversion />
+          {hasDatatoken && (
+            <div className={styles.hasTokens}>
+              You own {dtBalance} {ddo.dataTokenInfo?.symbol || 'DT'} so you can
+              use this asset without paying again.
+            </div>
+          )}
           <PurchaseButton />
         </div>
       </div>
diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx
index 4527acf71..ca2fedff0 100644
--- a/src/components/organisms/AssetActions/index.tsx
+++ b/src/components/organisms/AssetActions/index.tsx
@@ -38,14 +38,17 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
 
   // Check user balance against price
   useEffect(() => {
-    if (!price || !price.value || !balance || !balance.ocean) return
+    if (!price || !price.value || !balance || !balance.ocean || !dtBalance)
+      return
 
-    setIsBalanceSufficient(compareAsBN(balance.ocean, `${price.value}`))
+    setIsBalanceSufficient(
+      compareAsBN(balance.ocean, `${price.value}`) || Number(dtBalance) >= 1
+    )
 
     return () => {
       setIsBalanceSufficient(false)
     }
-  }, [balance, price])
+  }, [balance, price, dtBalance])
 
   const UseContent = isCompute ? (
     <Compute

From 018a765a238ff39860a7b10c2bdc2f820dfe6cca Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Oct 2020 12:54:30 +0200
Subject: [PATCH 03/32] more consume refactor

---
 src/components/atoms/Loader.module.css        |  6 +++---
 .../organisms/AssetActions/Consume.module.css |  7 ++-----
 .../organisms/AssetActions/Consume.tsx        | 20 ++++++++++++-------
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/atoms/Loader.module.css b/src/components/atoms/Loader.module.css
index 8b09217ca..a678a7811 100644
--- a/src/components/atoms/Loader.module.css
+++ b/src/components/atoms/Loader.module.css
@@ -1,12 +1,12 @@
 .loaderWrap {
   display: flex;
-  align-items: center;
 }
 
 .loader {
   display: block;
-  width: 20px;
-  height: 20px;
+  flex: 0 0 1.2rem;
+  width: 1.2rem;
+  height: 1.2rem;
   border-radius: 50%;
   border: 2px solid var(--brand-purple);
   border-top-color: var(--brand-violet);
diff --git a/src/components/organisms/AssetActions/Consume.module.css b/src/components/organisms/AssetActions/Consume.module.css
index 9b03d5d16..bf99d0d80 100644
--- a/src/components/organisms/AssetActions/Consume.module.css
+++ b/src/components/organisms/AssetActions/Consume.module.css
@@ -12,12 +12,9 @@
   flex-shrink: 0;
 }
 
-.pricewrapper button {
-  margin-top: var(--spacer);
-}
-
-.feedback {
+.actions {
   width: 100%;
+  margin-top: calc(var(--spacer) / 2);
 }
 
 .hasTokens {
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx
index 541a69397..6119e2cfb 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/organisms/AssetActions/Consume.tsx
@@ -23,15 +23,21 @@ export default function Consume({
 }): ReactElement {
   const { ocean } = useOcean()
   const { marketFeeAddress } = useSiteMetadata()
-  const { buyDT, pricingStepText, pricingError } = usePricing()
+  const {
+    dtSymbol,
+    buyDT,
+    pricingStepText,
+    pricingError,
+    pricingIsLoading
+  } = usePricing(ddo)
   const { consumeStepText, consume, consumeError } = useConsume()
 
   const isDisabled =
-    !ocean || !isBalanceSufficient || consumeStepText || pricingStepText
+    !ocean || !isBalanceSufficient || consumeStepText || pricingIsLoading
   const hasDatatoken = Number(dtBalance) >= 1
 
   async function handleConsume() {
-    !hasDatatoken && (await buyDT(ddo.dataToken, '1'))
+    !hasDatatoken && (await buyDT('1'))
     await consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
   }
 
@@ -42,8 +48,8 @@ export default function Consume({
   }, [consumeError, pricingError])
 
   const PurchaseButton = () => (
-    <div>
-      {consumeStepText || pricingStepText ? (
+    <div className={styles.actions}>
+      {consumeStepText || pricingIsLoading ? (
         <Loader message={consumeStepText || pricingStepText} />
       ) : (
         <Button style="primary" onClick={handleConsume} disabled={isDisabled}>
@@ -63,8 +69,8 @@ export default function Consume({
           <Price ddo={ddo} conversion />
           {hasDatatoken && (
             <div className={styles.hasTokens}>
-              You own {dtBalance} {ddo.dataTokenInfo?.symbol || 'DT'} so you can
-              use this asset without paying again.
+              You own {dtBalance} {dtSymbol} so you can use this asset without
+              paying again.
             </div>
           )}
           <PurchaseButton />

From 28e5a06b60e628da517beae6b1709034e33aae14 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Oct 2020 13:23:44 +0200
Subject: [PATCH 04/32] refactor Compute flow

---
 .../organisms/AssetActions/Compute.module.css   |  6 ++++++
 .../organisms/AssetActions/Compute.tsx          | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/AssetActions/Compute.module.css b/src/components/organisms/AssetActions/Compute.module.css
index 565d2b621..47987d596 100644
--- a/src/components/organisms/AssetActions/Compute.module.css
+++ b/src/components/organisms/AssetActions/Compute.module.css
@@ -22,3 +22,9 @@
 .feedback {
   width: 100%;
 }
+
+.hasTokens {
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  margin-top: calc(var(--spacer) / 4);
+}
diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx
index 2768e2418..85045d6d6 100644
--- a/src/components/organisms/AssetActions/Compute.tsx
+++ b/src/components/organisms/AssetActions/Compute.tsx
@@ -9,7 +9,8 @@ import {
   computeOptions,
   useCompute,
   readFileContent,
-  useOcean
+  useOcean,
+  usePricing
 } from '@oceanprotocol/react'
 import styles from './Compute.module.css'
 import Button from '../../atoms/Button'
@@ -26,9 +27,12 @@ export default function Compute({
   isBalanceSufficient: boolean
   dtBalance: string
 }): ReactElement {
+  const { marketFeeAddress } = useSiteMetadata()
+
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
-  const { marketFeeAddress } = useSiteMetadata()
+  const { buyDT, dtSymbol } = usePricing(ddo)
+
   const computeService = ddo.findServiceByType('compute')
   const metadataService = ddo.findServiceByType('metadata')
 
@@ -50,6 +54,7 @@ export default function Compute({
     computeType === '' ||
     !ocean ||
     !isBalanceSufficient
+  const hasDatatoken = Number(dtBalance) >= 1
 
   const onDrop = async (files: File[]) => {
     setFile(files[0])
@@ -74,6 +79,8 @@ export default function Compute({
       setIsPublished(false)
       setError('')
 
+      !hasDatatoken && (await buyDT('1'))
+
       await compute(
         ddo.id,
         computeService,
@@ -101,6 +108,12 @@ export default function Compute({
         </div>
         <div className={styles.pricewrapper}>
           <Price ddo={ddo} conversion />
+          {hasDatatoken && (
+            <div className={styles.hasTokens}>
+              You own {dtBalance} {dtSymbol} so you can use this asset without
+              paying again.
+            </div>
+          )}
         </div>
       </div>
 

From 95e72ae108aa7c22a8056fc59ba08be55130bf47 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Oct 2020 14:47:11 +0200
Subject: [PATCH 05/32] split up publish, datatoken, pricing data

---
 content/pages/publish.json                    |  6 +--
 src/@types/MetaData.d.ts                      |  6 +--
 src/components/atoms/Input/InputElement.tsx   |  3 ++
 .../RefreshName.module.css                    |  0
 .../{Price => Datatoken}/RefreshName.tsx      |  0
 .../FormFields/Datatoken/index.module.css     |  0
 .../molecules/FormFields/Datatoken/index.tsx  | 32 +++++++++++++
 .../molecules/FormFields/Price/Coin.tsx       |  6 ---
 .../molecules/FormFields/Price/Dynamic.tsx    |  3 --
 .../molecules/FormFields/Price/Fixed.tsx      | 22 +--------
 .../molecules/FormFields/Price/index.tsx      | 25 +---------
 .../pages/Publish/Preview.module.css          |  8 ----
 src/components/pages/Publish/Preview.tsx      | 23 +--------
 src/components/pages/Publish/Pricing.tsx      | 47 +++++++++++++++++++
 src/components/pages/Publish/index.tsx        | 12 +++--
 src/components/pages/Publish/utils.ts         |  6 +--
 src/models/FormPricing.ts                     | 41 ++++++++++++++++
 src/models/FormPublish.ts                     | 31 +++---------
 18 files changed, 147 insertions(+), 124 deletions(-)
 rename src/components/molecules/FormFields/{Price => Datatoken}/RefreshName.module.css (100%)
 rename src/components/molecules/FormFields/{Price => Datatoken}/RefreshName.tsx (100%)
 create mode 100644 src/components/molecules/FormFields/Datatoken/index.module.css
 create mode 100644 src/components/molecules/FormFields/Datatoken/index.tsx
 create mode 100644 src/components/pages/Publish/Pricing.tsx
 create mode 100644 src/models/FormPricing.ts

diff --git a/content/pages/publish.json b/content/pages/publish.json
index 4d19ce927..14178508c 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -42,9 +42,9 @@
         "required": true
       },
       {
-        "name": "price",
-        "label": "Price",
-        "type": "price",
+        "name": "dataTokenOptions",
+        "label": "Datatoken",
+        "type": "datatoken",
         "required": true
       },
       {
diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index 4dd9189da..b207c47bc 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -4,7 +4,7 @@ import {
   AdditionalInformation,
   ServiceMetadata
 } from '@oceanprotocol/lib'
-import { PriceOptions, DataTokenOptions } from '@oceanprotocol/react'
+import { DataTokenOptions, PriceOptions } from '@oceanprotocol/react'
 
 export interface AdditionalInformationMarket extends AdditionalInformation {
   links?: File[]
@@ -22,8 +22,6 @@ export interface MetadataMarket extends Metadata {
 export interface PriceOptionsMarket extends PriceOptions {
   // easier to keep this as number for Yup input validation
   swapFee: number
-  // collect datatoken info for publishing
-  datatoken?: DataTokenOptions
 }
 
 export interface MetadataPublishForm {
@@ -33,7 +31,7 @@ export interface MetadataPublishForm {
   files: string | File[]
   author: string
   license: string
-  price: PriceOptionsMarket
+  dataTokenOptions: DataTokenOptions
   access: 'Download' | 'Compute' | string
   termsAndConditions: boolean
   // ---- optional fields ----
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 61abd511e..05cd84459 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -5,6 +5,7 @@ import { InputProps } from '.'
 import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
 import Price from '../../molecules/FormFields/Price'
+import Datatoken from '../../molecules/FormFields/Datatoken'
 
 const DefaultInput = ({
   small,
@@ -89,6 +90,8 @@ export default function InputElement({
       return <FilesInput name={name} {...field} {...props} />
     case 'price':
       return <Price name={name} {...field} {...props} />
+    case 'datatoken':
+      return <Datatoken name={name} {...field} {...props} />
     case 'terms':
       return <Terms name={name} options={options} {...field} {...props} />
     default:
diff --git a/src/components/molecules/FormFields/Price/RefreshName.module.css b/src/components/molecules/FormFields/Datatoken/RefreshName.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Price/RefreshName.module.css
rename to src/components/molecules/FormFields/Datatoken/RefreshName.module.css
diff --git a/src/components/molecules/FormFields/Price/RefreshName.tsx b/src/components/molecules/FormFields/Datatoken/RefreshName.tsx
similarity index 100%
rename from src/components/molecules/FormFields/Price/RefreshName.tsx
rename to src/components/molecules/FormFields/Datatoken/RefreshName.tsx
diff --git a/src/components/molecules/FormFields/Datatoken/index.module.css b/src/components/molecules/FormFields/Datatoken/index.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/molecules/FormFields/Datatoken/index.tsx b/src/components/molecules/FormFields/Datatoken/index.tsx
new file mode 100644
index 000000000..2f25e54fe
--- /dev/null
+++ b/src/components/molecules/FormFields/Datatoken/index.tsx
@@ -0,0 +1,32 @@
+import { useField } from 'formik'
+import { InputProps } from '../../../atoms/Input'
+import { useOcean } from '@oceanprotocol/react'
+import React, { ReactElement, useEffect } from 'react'
+import styles from './index.module.css'
+
+import RefreshName from './RefreshName'
+
+export default function Datatoken(props: InputProps): ReactElement {
+  const { ocean } = useOcean()
+  const [field, meta, helpers] = useField(props.name)
+
+  function generateName() {
+    if (!ocean) return
+    const dataTokenOptions = ocean.datatokens.generateDtName()
+    helpers.setValue({ ...dataTokenOptions })
+  }
+
+  // Generate new DT name & symbol, but only once automatically
+  useEffect(() => {
+    if (!ocean || typeof field?.value?.name !== 'undefined') return
+    generateName()
+  }, [ocean])
+
+  return (
+    <div className={styles.datatoken}>
+      <strong>{field?.value?.name}</strong> —{' '}
+      <strong>{field?.value?.symbol}</strong>
+      <RefreshName generateName={generateName} />
+    </div>
+  )
+}
diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/molecules/FormFields/Price/Coin.tsx
index 0f1f299c2..667b5c16b 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/molecules/FormFields/Price/Coin.tsx
@@ -5,7 +5,6 @@ import InputElement from '../../../atoms/Input/InputElement'
 import { ReactComponent as Logo } from '../../../../images/logo.svg'
 import Conversion from '../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
-import RefreshName from './RefreshName'
 import { useField } from 'formik'
 import Error from './Error'
 
@@ -13,13 +12,11 @@ export default function Coin({
   datatokenOptions,
   name,
   weight,
-  generateName,
   readOnly
 }: {
   datatokenOptions: DataTokenOptions
   name: string
   weight: string
-  generateName?: () => void
   readOnly?: boolean
 }): ReactElement {
   const [field, meta] = useField(name)
@@ -32,9 +29,6 @@ export default function Coin({
 
       <h4 className={styles.tokenName}>
         {datatokenOptions?.name || 'Data Token'}
-        {datatokenOptions?.name && typeof generateName === 'function' && (
-          <RefreshName generateName={generateName} />
-        )}
       </h4>
 
       <div className={styles.weight}>
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index 75b15da25..d5e322b07 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -17,13 +17,11 @@ export default function Dynamic({
   ocean,
   priceOptions,
   datatokenOptions,
-  generateName,
   content
 }: {
   ocean: number
   priceOptions: PriceOptionsMarket
   datatokenOptions: DataTokenOptions
-  generateName: () => void
   content: any
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
@@ -91,7 +89,6 @@ export default function Dynamic({
           name="price.tokensToMint"
           datatokenOptions={datatokenOptions}
           weight={`${Number(weightOnDataToken) * 10}%`}
-          generateName={generateName}
           readOnly
         />
       </div>
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/molecules/FormFields/Price/Fixed.tsx
index 4ae9454cc..8ec57ea25 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/molecules/FormFields/Price/Fixed.tsx
@@ -3,21 +3,11 @@ import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
 import FormHelp from '../../../atoms/Input/Help'
 import Conversion from '../../../atoms/Price/Conversion'
-import { DataTokenOptions } from '@oceanprotocol/react'
-import RefreshName from './RefreshName'
 import { useField } from 'formik'
 import Input from '../../../atoms/Input'
 import Error from './Error'
 
-export default function Fixed({
-  datatokenOptions,
-  generateName,
-  content
-}: {
-  datatokenOptions: DataTokenOptions
-  generateName: () => void
-  content: any
-}): ReactElement {
+export default function Fixed({ content }: { content: any }): ReactElement {
   const [field, meta] = useField('price.price')
 
   return (
@@ -43,16 +33,6 @@ export default function Fixed({
           />
           <Error meta={meta} />
         </div>
-
-        {datatokenOptions && (
-          <div className={styles.datatoken}>
-            <h4>
-              Data Token <RefreshName generateName={generateName} />
-            </h4>
-            <strong>{datatokenOptions?.name}</strong> —{' '}
-            <strong>{datatokenOptions?.symbol}</strong>
-          </div>
-        )}
       </div>
     </div>
   )
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index b4d41ae25..350fe768d 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -5,9 +5,8 @@ import styles from './index.module.css'
 import Tabs from '../../../atoms/Tabs'
 import Fixed from './Fixed'
 import Dynamic from './Dynamic'
-import { useField, useFormikContext } from 'formik'
+import { useField } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { useOcean } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 const query = graphql`
@@ -43,7 +42,6 @@ export default function Price(props: InputProps): ReactElement {
   const { debug } = useUserPreferences()
   const data = useStaticQuery(query)
   const content = data.content.edges[0].node.childPagesJson.price
-  const { ocean } = useOcean()
 
   const [field, meta, helpers] = useField(props.name)
   const { price }: PriceOptionsMarket = field.value
@@ -55,12 +53,6 @@ export default function Price(props: InputProps): ReactElement {
     helpers.setValue({ ...field.value, type })
   }
 
-  function generateName() {
-    if (!ocean) return
-    const datatoken = ocean.datatokens.generateDtName()
-    helpers.setValue({ ...field.value, datatoken })
-  }
-
   // Always update everything when amountOcean changes
   useEffect(() => {
     const tokensToMint = Number(price) * Number(field.value.weightOnDataToken)
@@ -68,22 +60,10 @@ export default function Price(props: InputProps): ReactElement {
     helpers.setValue({ ...field.value, tokensToMint })
   }, [price])
 
-  // Generate new DT name & symbol, but only once automatically
-  useEffect(() => {
-    if (!ocean || typeof field?.value?.datatoken?.name !== 'undefined') return
-    generateName()
-  }, [ocean])
-
   const tabs = [
     {
       title: content.fixed.title,
-      content: (
-        <Fixed
-          datatokenOptions={field.value.datatoken}
-          generateName={generateName}
-          content={content.fixed}
-        />
-      )
+      content: <Fixed content={content.fixed} />
     },
     {
       title: content.dynamic.title,
@@ -92,7 +72,6 @@ export default function Price(props: InputProps): ReactElement {
           ocean={price}
           priceOptions={{ ...field.value, tokensToMint }}
           datatokenOptions={field.value.datatoken}
-          generateName={generateName}
           content={content.dynamic}
         />
       )
diff --git a/src/components/pages/Publish/Preview.module.css b/src/components/pages/Publish/Preview.module.css
index b95070c71..230e3b197 100644
--- a/src/components/pages/Publish/Preview.module.css
+++ b/src/components/pages/Publish/Preview.module.css
@@ -44,11 +44,3 @@
   align-items: center;
   margin-bottom: calc(var(--spacer) / 2);
 }
-
-.price {
-  min-width: 0;
-}
-
-.price:only-child {
-  margin-right: -100%;
-}
diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx
index 39e561444..f1a3fecf1 100644
--- a/src/components/pages/Publish/Preview.tsx
+++ b/src/components/pages/Publish/Preview.tsx
@@ -7,8 +7,6 @@ import styles from './Preview.module.css'
 import File from '../../atoms/File'
 import { MetadataPublishForm } from '../../../@types/MetaData'
 import Button from '../../atoms/Button'
-import Conversion from '../../atoms/Price/Conversion'
-import PriceUnit from '../../atoms/Price/PriceUnit'
 
 export default function Preview({
   values
@@ -60,25 +58,6 @@ export default function Preview({
               small
             />
           )}
-
-          {values.price && (
-            <div className={styles.price}>
-              <MetaItem
-                title={`Price: ${values.price.type}`}
-                content={
-                  <>
-                    <PriceUnit
-                      price="1"
-                      symbol={values.price.datatoken?.symbol}
-                      small
-                    />{' '}
-                    = <PriceUnit price={`${values.price.price}`} small />
-                    <Conversion price={`${values.price.price}`} />
-                  </>
-                }
-              />
-            </div>
-          )}
         </div>
 
         {typeof values.links !== 'string' && values.links?.length && (
@@ -107,7 +86,7 @@ export default function Preview({
                 key.includes('files') ||
                 key.includes('links') ||
                 key.includes('termsAndConditions') ||
-                key.includes('price') ||
+                key.includes('dataTokenOptions') ||
                 value === undefined ||
                 value === ''
               )
diff --git a/src/components/pages/Publish/Pricing.tsx b/src/components/pages/Publish/Pricing.tsx
new file mode 100644
index 000000000..c932d6e82
--- /dev/null
+++ b/src/components/pages/Publish/Pricing.tsx
@@ -0,0 +1,47 @@
+import React, { ReactElement, useState, useEffect } from 'react'
+import { Field, FieldInputProps, Formik } from 'formik'
+import Input from '../../atoms/Input'
+import { FormPricing } from 'models/FormPricing'
+
+export default function Pricing(): ReactElement {
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setSubmitting, resetForm }) => {
+        await handlePricing(values.amount, resetForm)
+        setSubmitting(false)
+      }}
+    >
+      {({
+        values,
+        touched,
+        setTouched,
+        isSubmitting,
+        setFieldValue,
+        submitForm,
+        handleChange
+      }) => (
+        <>
+          <Field name="price">
+            {({
+              field,
+              form
+            }: {
+              field: FieldInputProps<FormPricing>
+              form: any
+            }) => (
+              <Input
+                type="price"
+                name="price"
+                label="Price"
+                field={field}
+                form={form}
+              />
+            )}
+          </Field>
+        </>
+      )}
+    </Formik>
+  )
+}
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 6dfaae3cd..acde3b78c 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -36,18 +36,20 @@ export default function PublishPage({
     resetForm: () => void
   ): Promise<void> {
     const metadata = transformPublishFormToMetadata(values)
-    const { price } = values
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
 
     try {
-      Logger.log('Publish with ', price, serviceType, price.datatoken)
+      Logger.log(
+        'Publish with ',
+        metadata,
+        serviceType,
+        values.dataTokenOptions
+      )
 
       const ddo = await publish(
         (metadata as unknown) as Metadata,
-        // swapFee is tricky: to get 0.1% you need to send 0.001 as value
-        { ...price, swapFee: `${price.swapFee / 100}` },
         serviceType,
-        price.datatoken
+        values.dataTokenOptions
       )
 
       // Publish failed
diff --git a/src/components/pages/Publish/utils.ts b/src/components/pages/Publish/utils.ts
index 10d377ef8..7814f2025 100644
--- a/src/components/pages/Publish/utils.ts
+++ b/src/components/pages/Publish/utils.ts
@@ -16,8 +16,7 @@ export function transformPublishFormToMetadata(
     tags,
     links,
     termsAndConditions,
-    files,
-    price
+    files
   } = data
 
   const metadata: MetadataMarket = {
@@ -36,8 +35,7 @@ export function transformPublishFormToMetadata(
       copyrightHolder,
       tags: tags?.split(','),
       links: typeof links !== 'string' && links,
-      termsAndConditions,
-      priceType: price.type
+      termsAndConditions
     }
   }
 
diff --git a/src/models/FormPricing.ts b/src/models/FormPricing.ts
new file mode 100644
index 000000000..a01bd8e35
--- /dev/null
+++ b/src/models/FormPricing.ts
@@ -0,0 +1,41 @@
+import { PriceOptionsMarket } from '../@types/MetaData'
+import * as Yup from 'yup'
+
+export interface FormPricing {
+  price: PriceOptionsMarket
+}
+
+export const validationSchema = Yup.object().shape<FormPricing>({
+  price: Yup.object()
+    .shape({
+      price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
+      tokensToMint: Yup.number()
+        .min(1, 'Must be greater than 0')
+        .required('Required'),
+      type: Yup.string()
+        .matches(/fixed|dynamic/g)
+        .required('Required'),
+      weightOnDataToken: Yup.string().required('Required'),
+      swapFee: Yup.number()
+        .min(0.1, 'Must be more or equal to 0.1')
+        .max(0.9, 'Must be less or equal to 0.9')
+        .required('Required'),
+      datatoken: Yup.object()
+        .shape({
+          name: Yup.string(),
+          symbol: Yup.string()
+        })
+        .nullable()
+    })
+    .required('Required')
+})
+
+export const initialValues: Partial<FormPricing> = {
+  price: {
+    price: 1,
+    type: 'dynamic',
+    tokensToMint: 1,
+    weightOnDataToken: '9', // 90% on data token
+    swapFee: 0.1 // in %
+  }
+}
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index 483f13e2b..6f85b8faf 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -6,26 +6,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   // ---- required fields ----
   name: Yup.string().required('Required'),
   author: Yup.string().required('Required'),
-  price: Yup.object()
+  dataTokenOptions: Yup.object()
     .shape({
-      price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
-      tokensToMint: Yup.number()
-        .min(1, 'Must be greater than 0')
-        .required('Required'),
-      type: Yup.string()
-        .matches(/fixed|dynamic/g)
-        .required('Required'),
-      weightOnDataToken: Yup.string().required('Required'),
-      swapFee: Yup.number()
-        .min(0.1, 'Must be more or equal to 0.1')
-        .max(0.9, 'Must be less or equal to 0.9')
-        .required('Required'),
-      datatoken: Yup.object()
-        .shape({
-          name: Yup.string(),
-          symbol: Yup.string()
-        })
-        .nullable()
+      name: Yup.string(),
+      symbol: Yup.string()
     })
     .required('Required'),
   files: Yup.array<FileMetadata>().required('Required').nullable(),
@@ -45,12 +29,9 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
 export const initialValues: Partial<MetadataPublishForm> = {
   name: '',
   author: '',
-  price: {
-    price: 1,
-    type: 'dynamic',
-    tokensToMint: 1,
-    weightOnDataToken: '9', // 90% on data token
-    swapFee: 0.1 // in %
+  dataTokenOptions: {
+    name: '',
+    symbol: ''
   },
   files: '',
   description: '',

From 8ce53714a4c2d9b7c23e7439069b6253d62a8b95 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Oct 2020 15:04:57 +0200
Subject: [PATCH 06/32] more publish data flow changes

---
 src/components/pages/Publish/Feedback.tsx |  7 +--
 src/components/pages/Publish/Pricing.tsx  | 36 +++++++++------
 src/components/pages/Publish/index.tsx    |  8 ++--
 src/models/FormPricing.ts                 | 53 ++++++++---------------
 4 files changed, 49 insertions(+), 55 deletions(-)

diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx
index e4e0ea011..99537a276 100644
--- a/src/components/pages/Publish/Feedback.tsx
+++ b/src/components/pages/Publish/Feedback.tsx
@@ -4,17 +4,18 @@ import Loader from '../../atoms/Loader'
 import React, { ReactElement } from 'react'
 import styles from './Feedback.module.css'
 import SuccessConfetti from '../../atoms/SuccessConfetti'
+import { DDO } from '@oceanprotocol/lib'
 
 export default function Feedback({
   error,
   success,
-  did,
+  ddo,
   publishStepText,
   setError
 }: {
   error: string
   success: string
-  did: string
+  ddo: DDO
   publishStepText: string
   setError: (error: string) => void
 }): ReactElement {
@@ -22,7 +23,7 @@ export default function Feedback({
     <Button
       style="primary"
       size="small"
-      href={`/asset/${did}`}
+      href={`/asset/${ddo.id}`}
       className={styles.action}
     >
       Go to data set →
diff --git a/src/components/pages/Publish/Pricing.tsx b/src/components/pages/Publish/Pricing.tsx
index c932d6e82..de4509e99 100644
--- a/src/components/pages/Publish/Pricing.tsx
+++ b/src/components/pages/Publish/Pricing.tsx
@@ -1,34 +1,42 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement } from 'react'
 import { Field, FieldInputProps, Formik } from 'formik'
 import Input from '../../atoms/Input'
-import { FormPricing } from 'models/FormPricing'
+import { initialValues, validationSchema } from 'models/FormPricing'
+import { DDO } from '@oceanprotocol/lib'
+import { usePricing } from '@oceanprotocol/react'
+import { PriceOptionsMarket } from '../../../@types/MetaData'
+
+export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
+  const { createPricing } = usePricing(ddo)
+
+  async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
+    const priceOptions = {
+      price: values.price,
+      tokensToMint: values.tokensToMint,
+      type: values.type,
+      weightOnDataToken: values.weightOnDataToken,
+      swapFee: values.swapFee
+    }
+    const tx = await createPricing(priceOptions)
+  }
 
-export default function Pricing(): ReactElement {
   return (
     <Formik
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={async (values, { setSubmitting, resetForm }) => {
-        await handlePricing(values.amount, resetForm)
+        await handleCreatePricing(values)
         setSubmitting(false)
       }}
     >
-      {({
-        values,
-        touched,
-        setTouched,
-        isSubmitting,
-        setFieldValue,
-        submitForm,
-        handleChange
-      }) => (
+      {() => (
         <>
           <Field name="price">
             {({
               field,
               form
             }: {
-              field: FieldInputProps<FormPricing>
+              field: FieldInputProps<PriceOptionsMarket>
               form: any
             }) => (
               <Input
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index acde3b78c..13edeb945 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -10,7 +10,7 @@ import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
 import { MetadataPublishForm } from '../../../@types/MetaData'
 import { useUserPreferences } from '../../../providers/UserPreferences'
-import { Logger, Metadata } from '@oceanprotocol/lib'
+import { DDO, Logger, Metadata } from '@oceanprotocol/lib'
 import { Persist } from '../../atoms/FormikPersist'
 import Debug from './Debug'
 import Feedback from './Feedback'
@@ -27,7 +27,7 @@ export default function PublishPage({
 
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
-  const [did, setDid] = useState<string>()
+  const [ddo, setDdo] = useState<DDO>()
 
   const hasFeedback = isLoading || error || success
 
@@ -61,7 +61,7 @@ export default function PublishPage({
 
       // Publish succeeded
       if (ddo) {
-        setDid(ddo.id)
+        setDdo(ddo)
         setSuccess('🎉 Successfully published your data set. 🎉')
         resetForm()
       }
@@ -93,7 +93,7 @@ export default function PublishPage({
               error={error}
               success={success}
               publishStepText={publishStepText}
-              did={did}
+              ddo={ddo}
               setError={setError}
             />
           ) : (
diff --git a/src/models/FormPricing.ts b/src/models/FormPricing.ts
index a01bd8e35..ce72d5238 100644
--- a/src/models/FormPricing.ts
+++ b/src/models/FormPricing.ts
@@ -1,41 +1,26 @@
 import { PriceOptionsMarket } from '../@types/MetaData'
 import * as Yup from 'yup'
 
-export interface FormPricing {
-  price: PriceOptionsMarket
-}
-
-export const validationSchema = Yup.object().shape<FormPricing>({
-  price: Yup.object()
-    .shape({
-      price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
-      tokensToMint: Yup.number()
-        .min(1, 'Must be greater than 0')
-        .required('Required'),
-      type: Yup.string()
-        .matches(/fixed|dynamic/g)
-        .required('Required'),
-      weightOnDataToken: Yup.string().required('Required'),
-      swapFee: Yup.number()
-        .min(0.1, 'Must be more or equal to 0.1')
-        .max(0.9, 'Must be less or equal to 0.9')
-        .required('Required'),
-      datatoken: Yup.object()
-        .shape({
-          name: Yup.string(),
-          symbol: Yup.string()
-        })
-        .nullable()
-    })
+export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
+  price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
+  tokensToMint: Yup.number()
+    .min(1, 'Must be greater than 0')
+    .required('Required'),
+  type: Yup.string()
+    .matches(/fixed|dynamic/g)
+    .required('Required'),
+  weightOnDataToken: Yup.string().required('Required'),
+  swapFee: Yup.number()
+    .min(0.1, 'Must be more or equal to 0.1')
+    .max(0.9, 'Must be less or equal to 0.9')
     .required('Required')
+    .nullable()
 })
 
-export const initialValues: Partial<FormPricing> = {
-  price: {
-    price: 1,
-    type: 'dynamic',
-    tokensToMint: 1,
-    weightOnDataToken: '9', // 90% on data token
-    swapFee: 0.1 // in %
-  }
+export const initialValues: Partial<PriceOptionsMarket> = {
+  price: 1,
+  type: 'dynamic',
+  tokensToMint: 1,
+  weightOnDataToken: '9', // 90% on data token
+  swapFee: 0.1 // in %
 }

From 07b6495866fc8650d01436aeac2d8b677451731f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 19 Oct 2020 16:40:09 +0200
Subject: [PATCH 07/32] prototype

---
 .../FormFields/Datatoken/index.module.css      |  5 +++++
 src/components/pages/Publish/Feedback.tsx      |  5 +++++
 src/components/pages/Publish/Pricing.tsx       | 13 ++++++-------
 src/components/pages/Publish/index.tsx         | 18 ++++++++++++------
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/molecules/FormFields/Datatoken/index.module.css b/src/components/molecules/FormFields/Datatoken/index.module.css
index e69de29bb..c7a28ce38 100644
--- a/src/components/molecules/FormFields/Datatoken/index.module.css
+++ b/src/components/molecules/FormFields/Datatoken/index.module.css
@@ -0,0 +1,5 @@
+.datatoken {
+  border: 1px solid var(--brand-grey-lighter);
+  padding: calc(var(--spacer) / 3);
+  border-radius: var(--border-radius);
+}
diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx
index 99537a276..84e68bc2b 100644
--- a/src/components/pages/Publish/Feedback.tsx
+++ b/src/components/pages/Publish/Feedback.tsx
@@ -5,18 +5,21 @@ import React, { ReactElement } from 'react'
 import styles from './Feedback.module.css'
 import SuccessConfetti from '../../atoms/SuccessConfetti'
 import { DDO } from '@oceanprotocol/lib'
+import Pricing from './Pricing'
 
 export default function Feedback({
   error,
   success,
   ddo,
   publishStepText,
+  isPricing,
   setError
 }: {
   error: string
   success: string
   ddo: DDO
   publishStepText: string
+  isPricing: boolean
   setError: (error: string) => void
 }): ReactElement {
   const SuccessAction = () => (
@@ -46,6 +49,8 @@ export default function Feedback({
               Try Again
             </Button>
           </>
+        ) : isPricing ? (
+          <Pricing ddo={ddo} />
         ) : success ? (
           <SuccessConfetti success={success} action={<SuccessAction />} />
         ) : (
diff --git a/src/components/pages/Publish/Pricing.tsx b/src/components/pages/Publish/Pricing.tsx
index de4509e99..087c0c20a 100644
--- a/src/components/pages/Publish/Pricing.tsx
+++ b/src/components/pages/Publish/Pricing.tsx
@@ -1,21 +1,20 @@
 import React, { ReactElement } from 'react'
 import { Field, FieldInputProps, Formik } from 'formik'
 import Input from '../../atoms/Input'
-import { initialValues, validationSchema } from 'models/FormPricing'
+import { initialValues, validationSchema } from '../../../models/FormPricing'
 import { DDO } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../@types/MetaData'
+import ddoFixture from '../../../../tests/unit/__fixtures__/ddo'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  const { createPricing } = usePricing(ddo)
+  const { createPricing } = usePricing(ddoFixture)
 
   async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
     const priceOptions = {
-      price: values.price,
-      tokensToMint: values.tokensToMint,
-      type: values.type,
-      weightOnDataToken: values.weightOnDataToken,
-      swapFee: values.swapFee
+      ...values,
+      // swapFee is tricky: to get 0.1% you need to send 0.001 as value
+      swapFee: `${values.swapFee / 100}`
     }
     const tx = await createPricing(priceOptions)
   }
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 13edeb945..d744ce0c1 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useState } from 'react'
 import { Formik } from 'formik'
-import { usePublish } from '@oceanprotocol/react'
+import { usePublish, usePricing } from '@oceanprotocol/react'
 import styles from './index.module.css'
 import PublishForm from './PublishForm'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -27,6 +27,7 @@ export default function PublishPage({
 
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
+  const [isPricing, setIsPricing] = useState<boolean>()
   const [ddo, setDdo] = useState<DDO>()
 
   const hasFeedback = isLoading || error || success
@@ -59,12 +60,16 @@ export default function PublishPage({
         return
       }
 
+      if (!ddo) return
+
       // Publish succeeded
-      if (ddo) {
-        setDdo(ddo)
-        setSuccess('🎉 Successfully published your data set. 🎉')
-        resetForm()
-      }
+      setDdo(ddo)
+      resetForm()
+
+      // Create pricing
+      setIsPricing(true)
+
+      // setSuccess('🎉 Successfully published your data set. 🎉')
     } catch (error) {
       setError(error.message)
       Logger.error(error.message)
@@ -94,6 +99,7 @@ export default function PublishPage({
               success={success}
               publishStepText={publishStepText}
               ddo={ddo}
+              isPricing={isPricing}
               setError={setError}
             />
           ) : (

From 9ce1358fe12a209dedbd8cf6ea58d526c257ed42 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 13:10:03 +0200
Subject: [PATCH 08/32] move around pricing view

---
 src/components/atoms/Alert.module.css         |  6 +-
 src/components/atoms/Alert.tsx                | 15 +++-
 .../organisms/AssetContent/Pricing.module.css |  3 +
 .../organisms/AssetContent/Pricing.tsx        | 70 +++++++++++++++++++
 .../organisms/AssetContent/index.module.css   |  4 ++
 .../organisms/AssetContent/index.tsx          |  4 ++
 src/components/pages/Publish/Feedback.tsx     |  5 --
 src/components/pages/Publish/Pricing.tsx      | 54 --------------
 src/components/pages/Publish/index.tsx        |  9 +--
 9 files changed, 103 insertions(+), 67 deletions(-)
 create mode 100644 src/components/organisms/AssetContent/Pricing.module.css
 create mode 100644 src/components/organisms/AssetContent/Pricing.tsx
 delete mode 100644 src/components/pages/Publish/Pricing.tsx

diff --git a/src/components/atoms/Alert.module.css b/src/components/atoms/Alert.module.css
index c35f3b2de..f03ba01f0 100644
--- a/src/components/atoms/Alert.module.css
+++ b/src/components/atoms/Alert.module.css
@@ -30,6 +30,10 @@
   font-size: var(--font-size-small);
 }
 
+.action {
+  margin-top: calc(var(--spacer) / 2);
+}
+
 /* States */
 .error {
   border-color: var(--rbrand-alert-ed);
@@ -43,7 +47,7 @@
 
 .info {
   border-color: var(--brand-alert-yellow);
-  color: var(--brand-alert-yellow);
+  color: #9f7e19;
 }
 
 .warning {
diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx
index c1b7b0a14..1610d6001 100644
--- a/src/components/atoms/Alert.tsx
+++ b/src/components/atoms/Alert.tsx
@@ -1,19 +1,32 @@
 import React, { ReactElement } from 'react'
 import styles from './Alert.module.css'
+import Button from './Button'
 
 export default function Alert({
   title,
   text,
-  state
+  state,
+  action
 }: {
   title?: string
   text: string
   state: 'error' | 'warning' | 'info' | 'success'
+  action?: { name: string; handleAction: () => void }
 }): ReactElement {
   return (
     <div className={`${styles.alert} ${styles[state]}`}>
       {title && <h3 className={styles.title}>{title}</h3>}
       <p className={styles.text}>{text}</p>
+      {action && (
+        <Button
+          className={styles.action}
+          size="small"
+          style="primary"
+          onClick={action.handleAction}
+        >
+          {action.name}
+        </Button>
+      )}
     </div>
   )
 }
diff --git a/src/components/organisms/AssetContent/Pricing.module.css b/src/components/organisms/AssetContent/Pricing.module.css
new file mode 100644
index 000000000..fcfae9601
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing.module.css
@@ -0,0 +1,3 @@
+.pricing {
+  margin-bottom: var(--spacer);
+}
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
new file mode 100644
index 000000000..c3232263e
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -0,0 +1,70 @@
+import React, { ReactElement, useState } from 'react'
+import { Field, FieldInputProps, Formik } from 'formik'
+import Input from '../../atoms/Input'
+import { initialValues, validationSchema } from '../../../models/FormPricing'
+import { DDO } from '@oceanprotocol/lib'
+import { usePricing } from '@oceanprotocol/react'
+import { PriceOptionsMarket } from '../../../@types/MetaData'
+import Alert from '../../atoms/Alert'
+import styles from './Pricing.module.css'
+
+export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
+  const { createPricing } = usePricing(ddo)
+  const [showPricing, setShowPricing] = useState(false)
+
+  async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
+    const priceOptions = {
+      ...values,
+      // swapFee is tricky: to get 0.1% you need to send 0.001 as value
+      swapFee: `${values.swapFee / 100}`
+    }
+    const tx = await createPricing(priceOptions)
+  }
+
+  return (
+    <div className={styles.pricing}>
+      {showPricing ? (
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={async (values, { setSubmitting, resetForm }) => {
+            await handleCreatePricing(values)
+            setSubmitting(false)
+          }}
+        >
+          {() => (
+            <>
+              <Field name="price">
+                {({
+                  field,
+                  form
+                }: {
+                  field: FieldInputProps<PriceOptionsMarket>
+                  form: any
+                }) => (
+                  <Input
+                    type="price"
+                    name="price"
+                    label="Create Price"
+                    field={field}
+                    form={form}
+                  />
+                )}
+              </Field>
+            </>
+          )}
+        </Formik>
+      ) : (
+        <Alert
+          state="info"
+          title="No Price Created"
+          text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it."
+          action={{
+            name: 'Create Pricing',
+            handleAction: () => setShowPricing(true)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index 874cc5810..9dd4a3115 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -1,3 +1,7 @@
+.pricing {
+  max-width: 40rem;
+}
+
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 1.5);
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index dc4cfa35f..5ad04f7fc 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -9,6 +9,7 @@ import styles from './index.module.css'
 import AssetActions from '../AssetActions'
 import { DDO } from '@oceanprotocol/lib'
 import { useUserPreferences } from '../../../providers/UserPreferences'
+import Pricing from './Pricing'
 
 export interface AssetContentProps {
   metadata: MetadataMarket
@@ -26,6 +27,9 @@ export default function AssetContent({
   return (
     <article className={styles.grid}>
       <div className={styles.content}>
+        {/* TODO: check for ddo creator */}
+        <Pricing ddo={ddo} />
+
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>
           {metadata?.additionalInformation?.categories?.length && (
diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx
index 84e68bc2b..99537a276 100644
--- a/src/components/pages/Publish/Feedback.tsx
+++ b/src/components/pages/Publish/Feedback.tsx
@@ -5,21 +5,18 @@ import React, { ReactElement } from 'react'
 import styles from './Feedback.module.css'
 import SuccessConfetti from '../../atoms/SuccessConfetti'
 import { DDO } from '@oceanprotocol/lib'
-import Pricing from './Pricing'
 
 export default function Feedback({
   error,
   success,
   ddo,
   publishStepText,
-  isPricing,
   setError
 }: {
   error: string
   success: string
   ddo: DDO
   publishStepText: string
-  isPricing: boolean
   setError: (error: string) => void
 }): ReactElement {
   const SuccessAction = () => (
@@ -49,8 +46,6 @@ export default function Feedback({
               Try Again
             </Button>
           </>
-        ) : isPricing ? (
-          <Pricing ddo={ddo} />
         ) : success ? (
           <SuccessConfetti success={success} action={<SuccessAction />} />
         ) : (
diff --git a/src/components/pages/Publish/Pricing.tsx b/src/components/pages/Publish/Pricing.tsx
deleted file mode 100644
index 087c0c20a..000000000
--- a/src/components/pages/Publish/Pricing.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { ReactElement } from 'react'
-import { Field, FieldInputProps, Formik } from 'formik'
-import Input from '../../atoms/Input'
-import { initialValues, validationSchema } from '../../../models/FormPricing'
-import { DDO } from '@oceanprotocol/lib'
-import { usePricing } from '@oceanprotocol/react'
-import { PriceOptionsMarket } from '../../../@types/MetaData'
-import ddoFixture from '../../../../tests/unit/__fixtures__/ddo'
-
-export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  const { createPricing } = usePricing(ddoFixture)
-
-  async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
-    const priceOptions = {
-      ...values,
-      // swapFee is tricky: to get 0.1% you need to send 0.001 as value
-      swapFee: `${values.swapFee / 100}`
-    }
-    const tx = await createPricing(priceOptions)
-  }
-
-  return (
-    <Formik
-      initialValues={initialValues}
-      validationSchema={validationSchema}
-      onSubmit={async (values, { setSubmitting, resetForm }) => {
-        await handleCreatePricing(values)
-        setSubmitting(false)
-      }}
-    >
-      {() => (
-        <>
-          <Field name="price">
-            {({
-              field,
-              form
-            }: {
-              field: FieldInputProps<PriceOptionsMarket>
-              form: any
-            }) => (
-              <Input
-                type="price"
-                name="price"
-                label="Price"
-                field={field}
-                form={form}
-              />
-            )}
-          </Field>
-        </>
-      )}
-    </Formik>
-  )
-}
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index d744ce0c1..178f03496 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -27,7 +27,6 @@ export default function PublishPage({
 
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
-  const [isPricing, setIsPricing] = useState<boolean>()
   const [ddo, setDdo] = useState<DDO>()
 
   const hasFeedback = isLoading || error || success
@@ -66,10 +65,9 @@ export default function PublishPage({
       setDdo(ddo)
       resetForm()
 
-      // Create pricing
-      setIsPricing(true)
-
-      // setSuccess('🎉 Successfully published your data set. 🎉')
+      setSuccess(
+        '🎉 Successfully published. Now create a price on your data set. 🎉'
+      )
     } catch (error) {
       setError(error.message)
       Logger.error(error.message)
@@ -99,7 +97,6 @@ export default function PublishPage({
               success={success}
               publishStepText={publishStepText}
               ddo={ddo}
-              isPricing={isPricing}
               setError={setError}
             />
           ) : (

From de421d3c0033ba3ee7837bb30423271155f44331 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 14:28:51 +0200
Subject: [PATCH 09/32] construct pricing form data flow

---
 src/components/atoms/Input/InputElement.tsx   |  3 --
 .../AssetContent}/Price/Coin.module.css       |  0
 .../AssetContent}/Price/Coin.tsx              |  3 ++
 .../AssetContent}/Price/Dynamic.module.css    |  0
 .../AssetContent}/Price/Dynamic.tsx           | 33 ++++++++++---------
 .../AssetContent}/Price/Error.tsx             |  0
 .../AssetContent}/Price/Fees.module.css       |  0
 .../AssetContent}/Price/Fees.tsx              |  4 +--
 .../AssetContent}/Price/Fixed.module.css      |  0
 .../AssetContent}/Price/Fixed.tsx             |  4 +--
 .../AssetContent}/Price/index.module.css      |  0
 .../AssetContent}/Price/index.tsx             | 31 ++++++++---------
 .../organisms/AssetContent/Pricing.tsx        | 23 ++-----------
 src/models/FormPricing.ts                     |  6 ++--
 14 files changed, 41 insertions(+), 66 deletions(-)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Coin.module.css (100%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Coin.tsx (95%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Dynamic.module.css (100%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Dynamic.tsx (80%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Error.tsx (100%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Fees.module.css (100%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Fees.tsx (89%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Fixed.module.css (100%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/Fixed.tsx (93%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/index.module.css (100%)
 rename src/components/{molecules/FormFields => organisms/AssetContent}/Price/index.tsx (64%)

diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 05cd84459..375318abc 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -4,7 +4,6 @@ import styles from './InputElement.module.css'
 import { InputProps } from '.'
 import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
-import Price from '../../molecules/FormFields/Price'
 import Datatoken from '../../molecules/FormFields/Datatoken'
 
 const DefaultInput = ({
@@ -88,8 +87,6 @@ export default function InputElement({
       )
     case 'files':
       return <FilesInput name={name} {...field} {...props} />
-    case 'price':
-      return <Price name={name} {...field} {...props} />
     case 'datatoken':
       return <Datatoken name={name} {...field} {...props} />
     case 'terms':
diff --git a/src/components/molecules/FormFields/Price/Coin.module.css b/src/components/organisms/AssetContent/Price/Coin.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Price/Coin.module.css
rename to src/components/organisms/AssetContent/Price/Coin.module.css
diff --git a/src/components/molecules/FormFields/Price/Coin.tsx b/src/components/organisms/AssetContent/Price/Coin.tsx
similarity index 95%
rename from src/components/molecules/FormFields/Price/Coin.tsx
rename to src/components/organisms/AssetContent/Price/Coin.tsx
index 667b5c16b..d3e6fdde5 100644
--- a/src/components/molecules/FormFields/Price/Coin.tsx
+++ b/src/components/organisms/AssetContent/Price/Coin.tsx
@@ -20,6 +20,7 @@ export default function Coin({
   readOnly?: boolean
 }): ReactElement {
   const [field, meta] = useField(name)
+  console.log(field)
 
   return (
     <div className={styles.coin}>
@@ -41,6 +42,8 @@ export default function Coin({
           readOnly={readOnly}
           prefix={datatokenOptions?.symbol || 'DT'}
           min="1"
+          name={name}
+          value={field.value}
           {...field}
         />
         {datatokenOptions?.symbol === 'OCEAN' && (
diff --git a/src/components/molecules/FormFields/Price/Dynamic.module.css b/src/components/organisms/AssetContent/Price/Dynamic.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Price/Dynamic.module.css
rename to src/components/organisms/AssetContent/Price/Dynamic.module.css
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/organisms/AssetContent/Price/Dynamic.tsx
similarity index 80%
rename from src/components/molecules/FormFields/Price/Dynamic.tsx
rename to src/components/organisms/AssetContent/Price/Dynamic.tsx
index d5e322b07..63d065700 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/organisms/AssetContent/Price/Dynamic.tsx
@@ -1,32 +1,28 @@
 import { DataTokenOptions, useOcean } from '@oceanprotocol/react'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { PriceOptionsMarket } from '../../../../@types/MetaData'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { isCorrectNetwork } from '../../../../utils/wallet'
 import Alert from '../../../atoms/Alert'
 import FormHelp from '../../../atoms/Input/Help'
 import Tooltip from '../../../atoms/Tooltip'
-import Wallet from '../../Wallet'
+import Wallet from '../../../molecules/Wallet'
 import Coin from './Coin'
 import styles from './Dynamic.module.css'
 import Fees from './Fees'
 import stylesIndex from './index.module.css'
+import { useFormikContext } from 'formik'
 
 export default function Dynamic({
-  ocean,
-  priceOptions,
   datatokenOptions,
   content
 }: {
-  ocean: number
-  priceOptions: PriceOptionsMarket
   datatokenOptions: DataTokenOptions
   content: any
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { account, balance, networkId, refreshBalance } = useOcean()
-  const { weightOnDataToken } = priceOptions
+  const { values } = useFormikContext()
 
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(networkId)
@@ -40,12 +36,19 @@ export default function Dynamic({
       setError(`No account connected. Please connect your Web3 wallet.`)
     } else if (!correctNetwork) {
       setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
-    } else if (Number(balance.ocean) < Number(ocean)) {
-      setError(`Insufficient balance. You need at least ${ocean} OCEAN`)
+    } else if (Number(balance.ocean) < Number(values.price)) {
+      setError(`Insufficient balance. You need at least ${values.price} OCEAN`)
     } else {
       setError(undefined)
     }
-  }, [ocean, networkId, account, balance, correctNetwork, desiredNetworkName])
+  }, [
+    values.price,
+    networkId,
+    account,
+    balance,
+    correctNetwork,
+    desiredNetworkName
+  ])
 
   // refetch balance periodically
   useEffect(() => {
@@ -57,7 +60,7 @@ export default function Dynamic({
     return () => {
       clearInterval(balanceInterval)
     }
-  }, [ocean, networkId, account])
+  }, [networkId, account])
 
   return (
     <div className={styles.dynamic}>
@@ -81,14 +84,14 @@ export default function Dynamic({
 
       <div className={styles.tokens}>
         <Coin
-          name="price.price"
+          name="price"
           datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
-          weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
+          weight={`${100 - Number(Number(values.weightOnDataToken) * 10)}%`}
         />
         <Coin
-          name="price.tokensToMint"
+          name="dtAmount"
           datatokenOptions={datatokenOptions}
-          weight={`${Number(weightOnDataToken) * 10}%`}
+          weight={`${Number(values.weightOnDataToken) * 10}%`}
           readOnly
         />
       </div>
diff --git a/src/components/molecules/FormFields/Price/Error.tsx b/src/components/organisms/AssetContent/Price/Error.tsx
similarity index 100%
rename from src/components/molecules/FormFields/Price/Error.tsx
rename to src/components/organisms/AssetContent/Price/Error.tsx
diff --git a/src/components/molecules/FormFields/Price/Fees.module.css b/src/components/organisms/AssetContent/Price/Fees.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Price/Fees.module.css
rename to src/components/organisms/AssetContent/Price/Fees.module.css
diff --git a/src/components/molecules/FormFields/Price/Fees.tsx b/src/components/organisms/AssetContent/Price/Fees.tsx
similarity index 89%
rename from src/components/molecules/FormFields/Price/Fees.tsx
rename to src/components/organisms/AssetContent/Price/Fees.tsx
index 5537ea38a..5009ffa8c 100644
--- a/src/components/molecules/FormFields/Price/Fees.tsx
+++ b/src/components/organisms/AssetContent/Price/Fees.tsx
@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react'
 import Tooltip from '../../../atoms/Tooltip'
 import styles from './Fees.module.css'
-import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import { useField } from 'formik'
 import Input from '../../../atoms/Input'
 import Error from './Error'
@@ -11,8 +10,7 @@ export default function Fees({
 }: {
   tooltips: { [key: string]: string }
 }): ReactElement {
-  const { appConfig } = useSiteMetadata()
-  const [field, meta] = useField('price.swapFee')
+  const [field, meta] = useField('swapFee')
 
   return (
     <>
diff --git a/src/components/molecules/FormFields/Price/Fixed.module.css b/src/components/organisms/AssetContent/Price/Fixed.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Price/Fixed.module.css
rename to src/components/organisms/AssetContent/Price/Fixed.module.css
diff --git a/src/components/molecules/FormFields/Price/Fixed.tsx b/src/components/organisms/AssetContent/Price/Fixed.tsx
similarity index 93%
rename from src/components/molecules/FormFields/Price/Fixed.tsx
rename to src/components/organisms/AssetContent/Price/Fixed.tsx
index 8ec57ea25..ca46042f6 100644
--- a/src/components/molecules/FormFields/Price/Fixed.tsx
+++ b/src/components/organisms/AssetContent/Price/Fixed.tsx
@@ -8,7 +8,7 @@ import Input from '../../../atoms/Input'
 import Error from './Error'
 
 export default function Fixed({ content }: { content: any }): ReactElement {
-  const [field, meta] = useField('price.price')
+  const [field, meta] = useField('price')
 
   return (
     <div className={styles.fixed}>
@@ -19,7 +19,7 @@ export default function Fixed({ content }: { content: any }): ReactElement {
           <Input
             label="Ocean Token"
             value={field.value}
-            name="price.price"
+            name="price"
             type="number"
             prefix="OCEAN"
             min="1"
diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/organisms/AssetContent/Price/index.module.css
similarity index 100%
rename from src/components/molecules/FormFields/Price/index.module.css
rename to src/components/organisms/AssetContent/Price/index.module.css
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/organisms/AssetContent/Price/index.tsx
similarity index 64%
rename from src/components/molecules/FormFields/Price/index.tsx
rename to src/components/organisms/AssetContent/Price/index.tsx
index 350fe768d..9d67094b0 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/organisms/AssetContent/Price/index.tsx
@@ -1,12 +1,12 @@
-import React, { ReactElement, useState, useEffect } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-import { InputProps } from '../../../atoms/Input'
 import styles from './index.module.css'
 import Tabs from '../../../atoms/Tabs'
 import Fixed from './Fixed'
 import Dynamic from './Dynamic'
-import { useField } from 'formik'
+import { useFormikContext } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
+import ddo from '../../../../../tests/unit/__fixtures__/ddo'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 const query = graphql`
@@ -38,26 +38,23 @@ const query = graphql`
   }
 `
 
-export default function Price(props: InputProps): ReactElement {
+export default function Price(): ReactElement {
   const { debug } = useUserPreferences()
   const data = useStaticQuery(query)
   const content = data.content.edges[0].node.childPagesJson.price
 
-  const [field, meta, helpers] = useField(props.name)
-  const { price }: PriceOptionsMarket = field.value
-
-  const [tokensToMint, setTokensToMint] = useState<number>()
+  const { values, setFieldValue } = useFormikContext()
+  const { price, weightOnDataToken, type } = values as PriceOptionsMarket
 
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
-    helpers.setValue({ ...field.value, type })
+    setFieldValue('type', type)
   }
 
-  // Always update everything when amountOcean changes
+  // Always update everything when price changes
   useEffect(() => {
-    const tokensToMint = Number(price) * Number(field.value.weightOnDataToken)
-    setTokensToMint(tokensToMint)
-    helpers.setValue({ ...field.value, tokensToMint })
+    const dtAmount = Number(price) * Number(weightOnDataToken)
+    setFieldValue('dtAmount', dtAmount)
   }, [price])
 
   const tabs = [
@@ -69,9 +66,7 @@ export default function Price(props: InputProps): ReactElement {
       title: content.dynamic.title,
       content: (
         <Dynamic
-          ocean={price}
-          priceOptions={{ ...field.value, tokensToMint }}
-          datatokenOptions={field.value.datatoken}
+          datatokenOptions={ddo.dataTokenInfo}
           content={content.dynamic}
         />
       )
@@ -83,11 +78,11 @@ export default function Price(props: InputProps): ReactElement {
       <Tabs
         items={tabs}
         handleTabChange={handleTabChange}
-        defaultIndex={field?.value?.type === 'fixed' ? 0 : 1}
+        defaultIndex={type === 'fixed' ? 0 : 1}
       />
       {debug === true && (
         <pre>
-          <code>{JSON.stringify(field.value, null, 2)}</code>
+          <code>{JSON.stringify(values, null, 2)}</code>
         </pre>
       )}
     </div>
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
index c3232263e..f779f6fc1 100644
--- a/src/components/organisms/AssetContent/Pricing.tsx
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -7,6 +7,7 @@ import { usePricing } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../@types/MetaData'
 import Alert from '../../atoms/Alert'
 import styles from './Pricing.module.css'
+import Price from './Price'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
   const { createPricing } = usePricing(ddo)
@@ -32,27 +33,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
             setSubmitting(false)
           }}
         >
-          {() => (
-            <>
-              <Field name="price">
-                {({
-                  field,
-                  form
-                }: {
-                  field: FieldInputProps<PriceOptionsMarket>
-                  form: any
-                }) => (
-                  <Input
-                    type="price"
-                    name="price"
-                    label="Create Price"
-                    field={field}
-                    form={form}
-                  />
-                )}
-              </Field>
-            </>
-          )}
+          {(props) => <Price name="price" {...props} />}
         </Formik>
       ) : (
         <Alert
diff --git a/src/models/FormPricing.ts b/src/models/FormPricing.ts
index ce72d5238..27e954735 100644
--- a/src/models/FormPricing.ts
+++ b/src/models/FormPricing.ts
@@ -3,9 +3,7 @@ import * as Yup from 'yup'
 
 export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
   price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
-  tokensToMint: Yup.number()
-    .min(1, 'Must be greater than 0')
-    .required('Required'),
+  dtAmount: Yup.number().min(1, 'Must be greater than 0').required('Required'),
   type: Yup.string()
     .matches(/fixed|dynamic/g)
     .required('Required'),
@@ -20,7 +18,7 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
 export const initialValues: Partial<PriceOptionsMarket> = {
   price: 1,
   type: 'dynamic',
-  tokensToMint: 1,
+  dtAmount: 1,
   weightOnDataToken: '9', // 90% on data token
   swapFee: 0.1 // in %
 }

From 07b086547f68e31855ec0e15bbda3518a7b0f4ab Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 14:51:20 +0200
Subject: [PATCH 10/32] refactor

---
 src/components/atoms/Alert.tsx                |  7 ++-
 .../{Price => FormPricing}/Coin.module.css    |  0
 .../{Price => FormPricing}/Coin.tsx           |  0
 .../{Price => FormPricing}/Dynamic.module.css |  0
 .../{Price => FormPricing}/Dynamic.tsx        | 21 +++----
 .../{Price => FormPricing}/Error.tsx          |  0
 .../{Price => FormPricing}/Fees.module.css    |  2 +-
 .../{Price => FormPricing}/Fees.tsx           |  0
 .../{Price => FormPricing}/Fixed.module.css   |  0
 .../{Price => FormPricing}/Fixed.tsx          |  0
 .../{Price => FormPricing}/index.module.css   |  0
 .../{Price => FormPricing}/index.tsx          |  7 ++-
 .../organisms/AssetContent/Pricing.tsx        | 56 ++++++++++---------
 ...Form.module.css => FormPublish.module.css} |  0
 .../{PublishForm.tsx => FormPublish.tsx}      |  4 +-
 src/components/pages/Publish/index.tsx        |  6 +-
 tests/unit/components/PublishForm.test.tsx    |  2 +-
 17 files changed, 56 insertions(+), 49 deletions(-)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Coin.module.css (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Coin.tsx (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Dynamic.module.css (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Dynamic.tsx (85%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Error.tsx (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Fees.module.css (87%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Fees.tsx (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Fixed.module.css (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/Fixed.tsx (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/index.module.css (100%)
 rename src/components/organisms/AssetContent/{Price => FormPricing}/index.tsx (92%)
 rename src/components/pages/Publish/{PublishForm.module.css => FormPublish.module.css} (100%)
 rename src/components/pages/Publish/{PublishForm.tsx => FormPublish.tsx} (94%)

diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx
index 1610d6001..996900c50 100644
--- a/src/components/atoms/Alert.tsx
+++ b/src/components/atoms/Alert.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, FormEvent } from 'react'
 import styles from './Alert.module.css'
 import Button from './Button'
 
@@ -11,7 +11,10 @@ export default function Alert({
   title?: string
   text: string
   state: 'error' | 'warning' | 'info' | 'success'
-  action?: { name: string; handleAction: () => void }
+  action?: {
+    name: string
+    handleAction: (e: FormEvent<HTMLButtonElement>) => void
+  }
 }): ReactElement {
   return (
     <div className={`${styles.alert} ${styles[state]}`}>
diff --git a/src/components/organisms/AssetContent/Price/Coin.module.css b/src/components/organisms/AssetContent/FormPricing/Coin.module.css
similarity index 100%
rename from src/components/organisms/AssetContent/Price/Coin.module.css
rename to src/components/organisms/AssetContent/FormPricing/Coin.module.css
diff --git a/src/components/organisms/AssetContent/Price/Coin.tsx b/src/components/organisms/AssetContent/FormPricing/Coin.tsx
similarity index 100%
rename from src/components/organisms/AssetContent/Price/Coin.tsx
rename to src/components/organisms/AssetContent/FormPricing/Coin.tsx
diff --git a/src/components/organisms/AssetContent/Price/Dynamic.module.css b/src/components/organisms/AssetContent/FormPricing/Dynamic.module.css
similarity index 100%
rename from src/components/organisms/AssetContent/Price/Dynamic.module.css
rename to src/components/organisms/AssetContent/FormPricing/Dynamic.module.css
diff --git a/src/components/organisms/AssetContent/Price/Dynamic.tsx b/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
similarity index 85%
rename from src/components/organisms/AssetContent/Price/Dynamic.tsx
rename to src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
index 63d065700..d443f5bd1 100644
--- a/src/components/organisms/AssetContent/Price/Dynamic.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
@@ -12,6 +12,7 @@ import styles from './Dynamic.module.css'
 import Fees from './Fees'
 import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
+import { PriceOptionsMarket } from '../../../../@types/MetaData'
 
 export default function Dynamic({
   datatokenOptions,
@@ -22,7 +23,10 @@ export default function Dynamic({
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { account, balance, networkId, refreshBalance } = useOcean()
+
+  // Connect with form
   const { values } = useFormikContext()
+  const { price, weightOnDataToken } = values as PriceOptionsMarket
 
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(networkId)
@@ -36,19 +40,12 @@ export default function Dynamic({
       setError(`No account connected. Please connect your Web3 wallet.`)
     } else if (!correctNetwork) {
       setError(`Wrong Network. Please connect to ${desiredNetworkName}.`)
-    } else if (Number(balance.ocean) < Number(values.price)) {
-      setError(`Insufficient balance. You need at least ${values.price} OCEAN`)
+    } else if (Number(balance.ocean) < Number(price)) {
+      setError(`Insufficient balance. You need at least ${price} OCEAN`)
     } else {
       setError(undefined)
     }
-  }, [
-    values.price,
-    networkId,
-    account,
-    balance,
-    correctNetwork,
-    desiredNetworkName
-  ])
+  }, [price, networkId, account, balance, correctNetwork, desiredNetworkName])
 
   // refetch balance periodically
   useEffect(() => {
@@ -86,12 +83,12 @@ export default function Dynamic({
         <Coin
           name="price"
           datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
-          weight={`${100 - Number(Number(values.weightOnDataToken) * 10)}%`}
+          weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
         />
         <Coin
           name="dtAmount"
           datatokenOptions={datatokenOptions}
-          weight={`${Number(values.weightOnDataToken) * 10}%`}
+          weight={`${Number(weightOnDataToken) * 10}%`}
           readOnly
         />
       </div>
diff --git a/src/components/organisms/AssetContent/Price/Error.tsx b/src/components/organisms/AssetContent/FormPricing/Error.tsx
similarity index 100%
rename from src/components/organisms/AssetContent/Price/Error.tsx
rename to src/components/organisms/AssetContent/FormPricing/Error.tsx
diff --git a/src/components/organisms/AssetContent/Price/Fees.module.css b/src/components/organisms/AssetContent/FormPricing/Fees.module.css
similarity index 87%
rename from src/components/organisms/AssetContent/Price/Fees.module.css
rename to src/components/organisms/AssetContent/FormPricing/Fees.module.css
index 5564da7ca..e4cc6f044 100644
--- a/src/components/organisms/AssetContent/Price/Fees.module.css
+++ b/src/components/organisms/AssetContent/FormPricing/Fees.module.css
@@ -1,7 +1,7 @@
 .fees {
   display: grid;
   gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
   margin-left: -2rem;
   margin-right: -2rem;
   border-bottom: 1px solid var(--brand-grey-lighter);
diff --git a/src/components/organisms/AssetContent/Price/Fees.tsx b/src/components/organisms/AssetContent/FormPricing/Fees.tsx
similarity index 100%
rename from src/components/organisms/AssetContent/Price/Fees.tsx
rename to src/components/organisms/AssetContent/FormPricing/Fees.tsx
diff --git a/src/components/organisms/AssetContent/Price/Fixed.module.css b/src/components/organisms/AssetContent/FormPricing/Fixed.module.css
similarity index 100%
rename from src/components/organisms/AssetContent/Price/Fixed.module.css
rename to src/components/organisms/AssetContent/FormPricing/Fixed.module.css
diff --git a/src/components/organisms/AssetContent/Price/Fixed.tsx b/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
similarity index 100%
rename from src/components/organisms/AssetContent/Price/Fixed.tsx
rename to src/components/organisms/AssetContent/FormPricing/Fixed.tsx
diff --git a/src/components/organisms/AssetContent/Price/index.module.css b/src/components/organisms/AssetContent/FormPricing/index.module.css
similarity index 100%
rename from src/components/organisms/AssetContent/Price/index.module.css
rename to src/components/organisms/AssetContent/FormPricing/index.module.css
diff --git a/src/components/organisms/AssetContent/Price/index.tsx b/src/components/organisms/AssetContent/FormPricing/index.tsx
similarity index 92%
rename from src/components/organisms/AssetContent/Price/index.tsx
rename to src/components/organisms/AssetContent/FormPricing/index.tsx
index 9d67094b0..b37f0736c 100644
--- a/src/components/organisms/AssetContent/Price/index.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/index.tsx
@@ -38,20 +38,23 @@ const query = graphql`
   }
 `
 
-export default function Price(): ReactElement {
+export default function FormPricing(): ReactElement {
   const { debug } = useUserPreferences()
+  // Get content
   const data = useStaticQuery(query)
   const content = data.content.edges[0].node.childPagesJson.price
 
+  // Connect with form
   const { values, setFieldValue } = useFormikContext()
   const { price, weightOnDataToken, type } = values as PriceOptionsMarket
 
+  // Switch type value upon tab change
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
     setFieldValue('type', type)
   }
 
-  // Always update everything when price changes
+  // Always update everything when price value changes
   useEffect(() => {
     const dtAmount = Number(price) * Number(weightOnDataToken)
     setFieldValue('dtAmount', dtAmount)
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
index f779f6fc1..2a3537485 100644
--- a/src/components/organisms/AssetContent/Pricing.tsx
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -1,13 +1,12 @@
-import React, { ReactElement, useState } from 'react'
-import { Field, FieldInputProps, Formik } from 'formik'
-import Input from '../../atoms/Input'
+import React, { FormEvent, ReactElement, useState } from 'react'
+import { Formik } from 'formik'
 import { initialValues, validationSchema } from '../../../models/FormPricing'
 import { DDO } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../@types/MetaData'
 import Alert from '../../atoms/Alert'
 import styles from './Pricing.module.css'
-import Price from './Price'
+import FormPricing from './FormPricing'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
   const { createPricing } = usePricing(ddo)
@@ -24,28 +23,33 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <div className={styles.pricing}>
-      {showPricing ? (
-        <Formik
-          initialValues={initialValues}
-          validationSchema={validationSchema}
-          onSubmit={async (values, { setSubmitting, resetForm }) => {
-            await handleCreatePricing(values)
-            setSubmitting(false)
-          }}
-        >
-          {(props) => <Price name="price" {...props} />}
-        </Formik>
-      ) : (
-        <Alert
-          state="info"
-          title="No Price Created"
-          text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it."
-          action={{
-            name: 'Create Pricing',
-            handleAction: () => setShowPricing(true)
-          }}
-        />
-      )}
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, { setSubmitting }) => {
+          await handleCreatePricing(values)
+          setSubmitting(false)
+        }}
+      >
+        {() =>
+          showPricing ? (
+            <FormPricing />
+          ) : (
+            <Alert
+              state="info"
+              title="No Price Created"
+              text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it. Onwards!"
+              action={{
+                name: 'Create Pricing',
+                handleAction: (e: FormEvent<HTMLButtonElement>) => {
+                  e.preventDefault()
+                  setShowPricing(true)
+                }
+              }}
+            />
+          )
+        }
+      </Formik>
     </div>
   )
 }
diff --git a/src/components/pages/Publish/PublishForm.module.css b/src/components/pages/Publish/FormPublish.module.css
similarity index 100%
rename from src/components/pages/Publish/PublishForm.module.css
rename to src/components/pages/Publish/FormPublish.module.css
diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/FormPublish.tsx
similarity index 94%
rename from src/components/pages/Publish/PublishForm.tsx
rename to src/components/pages/Publish/FormPublish.tsx
index 56121f1ce..0e19aafbc 100644
--- a/src/components/pages/Publish/PublishForm.tsx
+++ b/src/components/pages/Publish/FormPublish.tsx
@@ -1,12 +1,12 @@
 import React, { ReactElement, useEffect, FormEvent } from 'react'
-import styles from './PublishForm.module.css'
+import styles from './FormPublish.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import { useFormikContext, Field } from 'formik'
 import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
 
-export default function PublishForm({
+export default function FormPublish({
   content
 }: {
   content: FormContent
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 178f03496..a4af765f1 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -1,8 +1,8 @@
 import React, { ReactElement, useState } from 'react'
 import { Formik } from 'formik'
-import { usePublish, usePricing } from '@oceanprotocol/react'
+import { usePublish } from '@oceanprotocol/react'
 import styles from './index.module.css'
-import PublishForm from './PublishForm'
+import FormPublish from './FormPublish'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
 import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
@@ -101,7 +101,7 @@ export default function PublishPage({
             />
           ) : (
             <article className={styles.grid}>
-              <PublishForm content={content.form} />
+              <FormPublish content={content.form} />
               <aside>
                 <div className={styles.sticky}>
                   <Preview values={values} />
diff --git a/tests/unit/components/PublishForm.test.tsx b/tests/unit/components/PublishForm.test.tsx
index 9e0323d2e..05e560147 100644
--- a/tests/unit/components/PublishForm.test.tsx
+++ b/tests/unit/components/PublishForm.test.tsx
@@ -5,7 +5,7 @@ import {
   MetadataMarket,
   MetadataPublishForm
 } from '../../../src/@types/MetaData'
-import PublishForm from '../../../src/components/pages/Publish/PublishForm'
+import PublishForm from '../../../src/components/pages/Publish/FormPublish'
 import publishFormData from '../__fixtures__/testFormData'
 import content from '../../../content/pages/publish.json'
 

From a058af65f6d53cdcf9f51691fca12a11845f346d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 15:38:26 +0200
Subject: [PATCH 11/32] styling, content, datatoken info

---
 content/pages/publish.json                    | 16 --------
 content/price.json                            | 16 ++++++++
 .../organisms/AssetActions/Pool/index.tsx     | 10 +----
 .../AssetContent/FormPricing/Coin.tsx         |  1 -
 .../FormPricing/Dynamic.module.css            |  1 +
 .../AssetContent/FormPricing/Dynamic.tsx      | 10 +++--
 .../AssetContent/FormPricing/Fees.module.css  |  4 +-
 .../AssetContent/FormPricing/Fixed.tsx        |  9 ++++-
 .../AssetContent/FormPricing/index.module.css | 14 +++++--
 .../AssetContent/FormPricing/index.tsx        | 38 ++++++++++++-------
 .../organisms/AssetContent/MetaFull.tsx       | 22 ++---------
 .../organisms/AssetContent/Pricing.tsx        |  2 +-
 12 files changed, 75 insertions(+), 68 deletions(-)

diff --git a/content/pages/publish.json b/content/pages/publish.json
index 14178508c..41d85dc5c 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -96,21 +96,5 @@
       }
     ],
     "success": "Asset Created!"
-  },
-  "price": {
-    "fixed": {
-      "title": "Fixed",
-      "info": "Set your price for accessing this data set. A Datatoken for this data set, worth the entered amount of OCEAN, will be created."
-    },
-    "dynamic": {
-      "title": "Dynamic",
-      "info": "Let's create a decentralized, automated market for your data set. A Datatoken for this data set, worth the entered amount of OCEAN, will be created. Additionally, you will provide liquidity into a OCEAN/Datatoken liquidity pool with Balancer.",
-      "tooltips": {
-        "poolInfo": "Explain what is going on here...",
-        "swapFee": "Explain liquidity provider fee...",
-        "communityFee": "Explain community fee...",
-        "marketplaceFee": "Explain marketplace fee..."
-      }
-    }
   }
 }
diff --git a/content/price.json b/content/price.json
index 5e76f8125..618bfb33e 100644
--- a/content/price.json
+++ b/content/price.json
@@ -1,4 +1,20 @@
 {
+  "create": {
+    "fixed": {
+      "title": "Fixed",
+      "info": "Set your price for accessing this data set. The datatoken for this data set will be worth the entered amount of OCEAN."
+    },
+    "dynamic": {
+      "title": "Dynamic",
+      "info": "Let's create a decentralized, automated market for your data set. The datatoken for this data set will be worth the entered amount of OCEAN. Additionally, you will provide liquidity into a Datatoken/OCEAN liquidity pool with Balancer.",
+      "tooltips": {
+        "poolInfo": "Explain what is going on here...",
+        "swapFee": "Explain liquidity provider fee...",
+        "communityFee": "Explain community fee...",
+        "marketplaceFee": "Explain marketplace fee..."
+      }
+    }
+  },
   "pool": {
     "tooltips": {
       "price": "Explain how this price is determined...",
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 93de1ae4a..cb64dc95c 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useOcean, useMetadata } from '@oceanprotocol/react'
+import { useOcean, useMetadata, usePricing } from '@oceanprotocol/react'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import styles from './index.module.css'
 import stylesActions from './Actions.module.css'
@@ -45,10 +45,10 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
 
   const { ocean, accountId } = useOcean()
   const { price } = useMetadata(ddo)
+  const { dtSymbol } = usePricing(ddo)
 
   const [poolTokens, setPoolTokens] = useState<string>()
   const [totalPoolTokens, setTotalPoolTokens] = useState<string>()
-  const [dtSymbol, setDtSymbol] = useState<string>()
   const [userLiquidity, setUserLiquidity] = useState<Balance>()
   const [swapFee, setSwapFee] = useState<string>()
 
@@ -79,12 +79,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
       setIsLoading(true)
 
       try {
-        //
-        // Get data token symbol
-        //
-        const dtSymbol = await ocean.datatokens.getSymbol(ddo.dataToken)
-        setDtSymbol(dtSymbol)
-
         //
         // Get everything which is in the pool
         //
diff --git a/src/components/organisms/AssetContent/FormPricing/Coin.tsx b/src/components/organisms/AssetContent/FormPricing/Coin.tsx
index d3e6fdde5..ce38b2dfe 100644
--- a/src/components/organisms/AssetContent/FormPricing/Coin.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/Coin.tsx
@@ -20,7 +20,6 @@ export default function Coin({
   readOnly?: boolean
 }): ReactElement {
   const [field, meta] = useField(name)
-  console.log(field)
 
   return (
     <div className={styles.coin}>
diff --git a/src/components/organisms/AssetContent/FormPricing/Dynamic.module.css b/src/components/organisms/AssetContent/FormPricing/Dynamic.module.css
index 226b9ae74..54c2af8bf 100644
--- a/src/components/organisms/AssetContent/FormPricing/Dynamic.module.css
+++ b/src/components/organisms/AssetContent/FormPricing/Dynamic.module.css
@@ -40,6 +40,7 @@
   margin-left: -2rem;
   margin-right: -2rem;
   border-bottom: 1px solid var(--brand-grey-lighter);
+  background: var(--brand-grey-dimmed);
 }
 
 @media screen and (min-width: 40rem) {
diff --git a/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx b/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
index d443f5bd1..dc4e94132 100644
--- a/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
@@ -1,4 +1,4 @@
-import { DataTokenOptions, useOcean } from '@oceanprotocol/react'
+import { DataTokenOptions, useOcean, usePricing } from '@oceanprotocol/react'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
@@ -13,16 +13,18 @@ import Fees from './Fees'
 import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
+import { DDO } from '@oceanprotocol/lib'
 
 export default function Dynamic({
-  datatokenOptions,
+  ddo,
   content
 }: {
-  datatokenOptions: DataTokenOptions
+  ddo: DDO
   content: any
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { account, balance, networkId, refreshBalance } = useOcean()
+  const { dtSymbol, dtName } = usePricing(ddo)
 
   // Connect with form
   const { values } = useFormikContext()
@@ -87,7 +89,7 @@ export default function Dynamic({
         />
         <Coin
           name="dtAmount"
-          datatokenOptions={datatokenOptions}
+          datatokenOptions={{ symbol: dtSymbol, name: dtName }}
           weight={`${Number(weightOnDataToken) * 10}%`}
           readOnly
         />
diff --git a/src/components/organisms/AssetContent/FormPricing/Fees.module.css b/src/components/organisms/AssetContent/FormPricing/Fees.module.css
index e4cc6f044..b743c2582 100644
--- a/src/components/organisms/AssetContent/FormPricing/Fees.module.css
+++ b/src/components/organisms/AssetContent/FormPricing/Fees.module.css
@@ -5,12 +5,12 @@
   margin-left: -2rem;
   margin-right: -2rem;
   border-bottom: 1px solid var(--brand-grey-lighter);
-  margin-top: var(--spacer);
-  padding: 0 var(--spacer) calc(var(--spacer) / 2) var(--spacer);
+  padding: var(--spacer) var(--spacer) calc(var(--spacer) / 2) var(--spacer);
 
   justify-content: center;
   text-align: center;
   border-bottom: 1px solid var(--brand-grey-lighter);
+  background: var(--brand-grey-dimmed);
 }
 
 .fees label {
diff --git a/src/components/organisms/AssetContent/FormPricing/Fixed.tsx b/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
index ca46042f6..9dfb596f1 100644
--- a/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
@@ -6,8 +6,15 @@ import Conversion from '../../../atoms/Price/Conversion'
 import { useField } from 'formik'
 import Input from '../../../atoms/Input'
 import Error from './Error'
+import { DDO } from '@oceanprotocol/lib'
 
-export default function Fixed({ content }: { content: any }): ReactElement {
+export default function Fixed({
+  ddo,
+  content
+}: {
+  ddo: DDO
+  content: any
+}): ReactElement {
   const [field, meta] = useField('price')
 
   return (
diff --git a/src/components/organisms/AssetContent/FormPricing/index.module.css b/src/components/organisms/AssetContent/FormPricing/index.module.css
index 22182cdad..96e8855a0 100644
--- a/src/components/organisms/AssetContent/FormPricing/index.module.css
+++ b/src/components/organisms/AssetContent/FormPricing/index.module.css
@@ -1,7 +1,6 @@
 .price {
-  border: 1px solid var(--brand-grey-lighter);
-  background: var(--brand-grey-dimmed);
-  border-radius: var(--border-radius);
+  margin: -2rem;
+  margin-bottom: 0;
 }
 
 .content {
@@ -36,3 +35,12 @@
   text-align: center;
   margin-bottom: calc(var(--spacer) / 1.5);
 }
+
+.actions {
+  text-align: center;
+}
+
+.actions button {
+  margin-left: calc(var(--spacer) / 2);
+  margin-right: calc(var(--spacer) / 2);
+}
diff --git a/src/components/organisms/AssetContent/FormPricing/index.tsx b/src/components/organisms/AssetContent/FormPricing/index.tsx
index b37f0736c..d1dee6f77 100644
--- a/src/components/organisms/AssetContent/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/index.tsx
@@ -6,16 +6,17 @@ import Fixed from './Fixed'
 import Dynamic from './Dynamic'
 import { useFormikContext } from 'formik'
 import { useUserPreferences } from '../../../../providers/UserPreferences'
-import ddo from '../../../../../tests/unit/__fixtures__/ddo'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
+import Button from '../../../atoms/Button'
+import { DDO } from '@oceanprotocol/lib'
 
 const query = graphql`
   query PriceFieldQuery {
-    content: allFile(filter: { relativePath: { eq: "pages/publish.json" } }) {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
       edges {
         node {
-          childPagesJson {
-            price {
+          childContentJson {
+            create {
               fixed {
                 title
                 info
@@ -38,11 +39,17 @@ const query = graphql`
   }
 `
 
-export default function FormPricing(): ReactElement {
+export default function FormPricing({
+  ddo,
+  setShowPricing
+}: {
+  ddo: DDO
+  setShowPricing: (value: boolean) => void
+}): ReactElement {
   const { debug } = useUserPreferences()
   // Get content
   const data = useStaticQuery(query)
-  const content = data.content.edges[0].node.childPagesJson.price
+  const content = data.content.edges[0].node.childContentJson.create
 
   // Connect with form
   const { values, setFieldValue } = useFormikContext()
@@ -63,16 +70,11 @@ export default function FormPricing(): ReactElement {
   const tabs = [
     {
       title: content.fixed.title,
-      content: <Fixed content={content.fixed} />
+      content: <Fixed content={content.fixed} ddo={ddo} />
     },
     {
       title: content.dynamic.title,
-      content: (
-        <Dynamic
-          datatokenOptions={ddo.dataTokenInfo}
-          content={content.dynamic}
-        />
-      )
+      content: <Dynamic content={content.dynamic} ddo={ddo} />
     }
   ]
 
@@ -83,6 +85,16 @@ export default function FormPricing(): ReactElement {
         handleTabChange={handleTabChange}
         defaultIndex={type === 'fixed' ? 0 : 1}
       />
+
+      <div className={styles.actions}>
+        <Button style="primary" type="submit">
+          Create Pricing
+        </Button>
+        <Button style="text" size="small" onClick={() => setShowPricing(false)}>
+          Cancel
+        </Button>
+      </div>
+
       {debug === true && (
         <pre>
           <code>{JSON.stringify(values, null, 2)}</code>
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx
index 0f8d71069..fa6bf4a96 100644
--- a/src/components/organisms/AssetContent/MetaFull.tsx
+++ b/src/components/organisms/AssetContent/MetaFull.tsx
@@ -1,12 +1,11 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement } from 'react'
 import Time from '../../atoms/Time'
 import MetaItem from './MetaItem'
 import styles from './MetaFull.module.css'
 import { MetadataMarket } from '../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
 import EtherscanLink from '../../atoms/EtherscanLink'
-
-import { useOcean } from '@oceanprotocol/react'
+import { usePricing } from '@oceanprotocol/react'
 
 export default function MetaFull({
   ddo,
@@ -15,24 +14,9 @@ export default function MetaFull({
   ddo: DDO
   metadata: MetadataMarket
 }): ReactElement {
-  const { ocean } = useOcean()
   const { id, dataToken } = ddo
   const { dateCreated, datePublished, author, license } = metadata.main
-
-  const [dtName, setDtName] = useState<string>()
-  const [dtSymbol, setDtSymbol] = useState<string>()
-
-  useEffect(() => {
-    if (!ocean) return
-
-    async function getDataTokenInfo() {
-      const name = await ocean.datatokens.getName(dataToken)
-      setDtName(name)
-      const symbol = await ocean.datatokens.getSymbol(dataToken)
-      setDtSymbol(symbol)
-    }
-    getDataTokenInfo()
-  }, [ocean, dataToken])
+  const { dtSymbol, dtName } = usePricing(ddo)
 
   return (
     <div className={styles.metaFull}>
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
index 2a3537485..dc43b7bae 100644
--- a/src/components/organisms/AssetContent/Pricing.tsx
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -33,7 +33,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
       >
         {() =>
           showPricing ? (
-            <FormPricing />
+            <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
           ) : (
             <Alert
               state="info"

From 484d8b735a5074f2acb09d7a290d827413c6979b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 16:11:32 +0200
Subject: [PATCH 12/32] fixed pricing styling

---
 .../AssetContent/FormPricing/Fixed.module.css         | 11 ++++++++---
 .../organisms/AssetContent/FormPricing/Fixed.tsx      |  7 +++++++
 .../AssetContent/FormPricing/index.module.css         |  2 ++
 src/components/pages/Publish/Feedback.tsx             |  2 +-
 src/components/pages/Publish/index.tsx                |  2 +-
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/AssetContent/FormPricing/Fixed.module.css b/src/components/organisms/AssetContent/FormPricing/Fixed.module.css
index 9d7ca5a15..9cfadcde8 100644
--- a/src/components/organisms/AssetContent/FormPricing/Fixed.module.css
+++ b/src/components/organisms/AssetContent/FormPricing/Fixed.module.css
@@ -14,11 +14,16 @@
 }
 
 .grid {
-  margin-top: var(--spacer);
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-top: var(--spacer);
   display: grid;
   gap: var(--spacer);
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   justify-content: center;
+  background: var(--brand-grey-dimmed);
+  border-top: 1px solid var(--brand-grey-lighter);
+  border-bottom: 1px solid var(--brand-grey-lighter);
 }
 
 .fixed label {
@@ -26,14 +31,14 @@
 }
 
 .datatoken {
-  margin-top: calc(var(--spacer) / 6);
+  margin-top: calc(var(--spacer) / 2);
   color: var(--color-secondary);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
 }
 
 .datatoken h4 {
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-base);
   color: var(--color-secondary);
   margin: 0;
 }
diff --git a/src/components/organisms/AssetContent/FormPricing/Fixed.tsx b/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
index 9dfb596f1..462073005 100644
--- a/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
@@ -7,6 +7,7 @@ import { useField } from 'formik'
 import Input from '../../../atoms/Input'
 import Error from './Error'
 import { DDO } from '@oceanprotocol/lib'
+import { usePricing } from '@oceanprotocol/react'
 
 export default function Fixed({
   ddo,
@@ -16,6 +17,7 @@ export default function Fixed({
   content: any
 }): ReactElement {
   const [field, meta] = useField('price')
+  const { dtName, dtSymbol } = usePricing(ddo)
 
   return (
     <div className={styles.fixed}>
@@ -40,6 +42,11 @@ export default function Fixed({
           />
           <Error meta={meta} />
         </div>
+        <div className={styles.datatoken}>
+          <h4>
+            = <strong>1</strong> {dtName} — {dtSymbol}
+          </h4>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/organisms/AssetContent/FormPricing/index.module.css b/src/components/organisms/AssetContent/FormPricing/index.module.css
index 96e8855a0..467085e93 100644
--- a/src/components/organisms/AssetContent/FormPricing/index.module.css
+++ b/src/components/organisms/AssetContent/FormPricing/index.module.css
@@ -1,6 +1,8 @@
 .price {
   margin: -2rem;
   margin-bottom: 0;
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  padding-bottom: var(--spacer);
 }
 
 .content {
diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx
index 99537a276..2395955d7 100644
--- a/src/components/pages/Publish/Feedback.tsx
+++ b/src/components/pages/Publish/Feedback.tsx
@@ -23,7 +23,7 @@ export default function Feedback({
     <Button
       style="primary"
       size="small"
-      href={`/asset/${ddo.id}`}
+      href={`/asset/${ddo?.id}`}
       className={styles.action}
     >
       Go to data set →
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index a4af765f1..ab548ca4b 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -66,7 +66,7 @@ export default function PublishPage({
       resetForm()
 
       setSuccess(
-        '🎉 Successfully published. Now create a price on your data set. 🎉'
+        '🎉 Successfully published. 🎉 Now create a price on your data set.'
       )
     } catch (error) {
       setError(error.message)

From fd1b66883a60347ef0f8b3e46cf67de3d980a3f7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 16:59:29 +0200
Subject: [PATCH 13/32] submit view, success view, form submit

---
 src/components/atoms/SuccessConfetti.tsx      |  2 +-
 .../AssetContent/FormPricing/index.tsx        |  4 +-
 .../organisms/AssetContent/Pricing.module.css |  6 +++
 .../organisms/AssetContent/Pricing.tsx        | 52 ++++++++++++++++---
 .../organisms/AssetContent/index.tsx          |  2 +-
 5 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/atoms/SuccessConfetti.tsx b/src/components/atoms/SuccessConfetti.tsx
index 25d8f7052..4bd47c285 100644
--- a/src/components/atoms/SuccessConfetti.tsx
+++ b/src/components/atoms/SuccessConfetti.tsx
@@ -28,7 +28,7 @@ export default function SuccessConfetti({
   action
 }: {
   success: string
-  action: ReactNode
+  action?: ReactNode
 }): ReactElement {
   // Have some confetti upon success
   useEffect(() => {
diff --git a/src/components/organisms/AssetContent/FormPricing/index.tsx b/src/components/organisms/AssetContent/FormPricing/index.tsx
index d1dee6f77..c58d0f2cb 100644
--- a/src/components/organisms/AssetContent/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/index.tsx
@@ -52,7 +52,7 @@ export default function FormPricing({
   const content = data.content.edges[0].node.childContentJson.create
 
   // Connect with form
-  const { values, setFieldValue } = useFormikContext()
+  const { values, setFieldValue, submitForm } = useFormikContext()
   const { price, weightOnDataToken, type } = values as PriceOptionsMarket
 
   // Switch type value upon tab change
@@ -87,7 +87,7 @@ export default function FormPricing({
       />
 
       <div className={styles.actions}>
-        <Button style="primary" type="submit">
+        <Button style="primary" onClick={() => submitForm()}>
           Create Pricing
         </Button>
         <Button style="text" size="small" onClick={() => setShowPricing(false)}>
diff --git a/src/components/organisms/AssetContent/Pricing.module.css b/src/components/organisms/AssetContent/Pricing.module.css
index fcfae9601..232711b4b 100644
--- a/src/components/organisms/AssetContent/Pricing.module.css
+++ b/src/components/organisms/AssetContent/Pricing.module.css
@@ -1,3 +1,9 @@
 .pricing {
   margin-bottom: var(--spacer);
+  width: 100%;
+  min-height: 20vh;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
index dc43b7bae..a6532791f 100644
--- a/src/components/organisms/AssetContent/Pricing.tsx
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -1,24 +1,50 @@
 import React, { FormEvent, ReactElement, useState } from 'react'
 import { Formik } from 'formik'
 import { initialValues, validationSchema } from '../../../models/FormPricing'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../@types/MetaData'
 import Alert from '../../atoms/Alert'
 import styles from './Pricing.module.css'
 import FormPricing from './FormPricing'
+import Loader from '../../atoms/Loader'
+import SuccessConfetti from '../../atoms/SuccessConfetti'
+import { toast } from 'react-toastify'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  const { createPricing } = usePricing(ddo)
+  const {
+    createPricing,
+    pricingIsLoading,
+    pricingError,
+    pricingStepText
+  } = usePricing(ddo)
   const [showPricing, setShowPricing] = useState(false)
+  const [success, setSuccess] = useState<string>()
+
+  const hasFeedback = pricingIsLoading || success
 
   async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
-    const priceOptions = {
-      ...values,
-      // swapFee is tricky: to get 0.1% you need to send 0.001 as value
-      swapFee: `${values.swapFee / 100}`
+    try {
+      const priceOptions = {
+        ...values,
+        // swapFee is tricky: to get 0.1% you need to send 0.001 as value
+        swapFee: `${values.swapFee / 100}`
+      }
+      const tx = await createPricing(priceOptions)
+
+      // Pricing failed
+      if (!tx || pricingError) {
+        toast.error(pricingError)
+        Logger.error(pricingError)
+        return
+      }
+
+      // Pricing succeeded
+      tx && setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
+    } catch (error) {
+      toast.error(error.message)
+      Logger.error(error.message)
     }
-    const tx = await createPricing(priceOptions)
   }
 
   return (
@@ -27,12 +53,22 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={async (values, { setSubmitting }) => {
+          // move user's focus to top of screen
+          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+
+          // Kick off price creation
           await handleCreatePricing(values)
           setSubmitting(false)
         }}
       >
         {() =>
-          showPricing ? (
+          hasFeedback ? (
+            success ? (
+              <SuccessConfetti success={success} />
+            ) : (
+              <Loader message={pricingStepText} />
+            )
+          ) : showPricing ? (
             <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
           ) : (
             <Alert
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 5ad04f7fc..cc2a52b13 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -27,7 +27,7 @@ export default function AssetContent({
   return (
     <article className={styles.grid}>
       <div className={styles.content}>
-        {/* TODO: check for ddo creator */}
+        {/* TODO: check for ddo creator & no price */}
         <Pricing ddo={ddo} />
 
         <aside className={styles.meta}>

From 20e66cac9c70e0c33a1a719d0fd26b30cbba1fb7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 17:21:56 +0200
Subject: [PATCH 14/32] refactor

---
 .../AssetContent/Pricing/Feedback.module.css  |  0
 .../AssetContent/Pricing/Feedback.tsx         | 22 +++++++++++++++++++
 .../{ => Pricing}/FormPricing/Coin.module.css |  2 +-
 .../{ => Pricing}/FormPricing/Coin.tsx        |  6 ++---
 .../FormPricing/Dynamic.module.css            |  0
 .../{ => Pricing}/FormPricing/Dynamic.tsx     | 16 +++++++-------
 .../{ => Pricing}/FormPricing/Error.tsx       |  2 +-
 .../{ => Pricing}/FormPricing/Fees.module.css |  0
 .../{ => Pricing}/FormPricing/Fees.tsx        |  4 ++--
 .../FormPricing/Fixed.module.css              |  0
 .../{ => Pricing}/FormPricing/Fixed.tsx       |  6 ++---
 .../FormPricing/index.module.css              |  4 +---
 .../{ => Pricing}/FormPricing/index.tsx       |  8 +++----
 .../index.module.css}                         |  7 ++++++
 .../{Pricing.tsx => Pricing/index.tsx}        | 17 +++++---------
 15 files changed, 58 insertions(+), 36 deletions(-)
 create mode 100644 src/components/organisms/AssetContent/Pricing/Feedback.module.css
 create mode 100644 src/components/organisms/AssetContent/Pricing/Feedback.tsx
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Coin.module.css (95%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Coin.tsx (86%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Dynamic.module.css (100%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Dynamic.tsx (87%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Error.tsx (80%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Fees.module.css (100%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Fees.tsx (93%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Fixed.module.css (100%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/Fixed.tsx (89%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/index.module.css (84%)
 rename src/components/organisms/AssetContent/{ => Pricing}/FormPricing/index.tsx (91%)
 rename src/components/organisms/AssetContent/{Pricing.module.css => Pricing/index.module.css} (53%)
 rename src/components/organisms/AssetContent/{Pricing.tsx => Pricing/index.tsx} (83%)

diff --git a/src/components/organisms/AssetContent/Pricing/Feedback.module.css b/src/components/organisms/AssetContent/Pricing/Feedback.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/organisms/AssetContent/Pricing/Feedback.tsx b/src/components/organisms/AssetContent/Pricing/Feedback.tsx
new file mode 100644
index 000000000..b2c07f0d3
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing/Feedback.tsx
@@ -0,0 +1,22 @@
+import Loader from '../../../atoms/Loader'
+import SuccessConfetti from '../../../atoms/SuccessConfetti'
+import React, { ReactElement } from 'react'
+import styles from './Feedback.module.css'
+
+export default function Feedback({
+  success,
+  pricingStepText
+}: {
+  success: string
+  pricingStepText: string
+}): ReactElement {
+  return (
+    <div className={styles.feedback}>
+      {success ? (
+        <SuccessConfetti success={success} />
+      ) : (
+        <Loader message={pricingStepText} />
+      )}
+    </div>
+  )
+}
diff --git a/src/components/organisms/AssetContent/FormPricing/Coin.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css
similarity index 95%
rename from src/components/organisms/AssetContent/FormPricing/Coin.module.css
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css
index 02d0f806b..87c823108 100644
--- a/src/components/organisms/AssetContent/FormPricing/Coin.module.css
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.module.css
@@ -8,7 +8,7 @@
 }
 
 .icon {
-  composes: box from '../../../atoms/Box.module.css';
+  composes: box from '../../../../atoms/Box.module.css';
   padding: calc(var(--spacer) / 1.5);
   width: 6rem;
   height: 6rem;
diff --git a/src/components/organisms/AssetContent/FormPricing/Coin.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx
similarity index 86%
rename from src/components/organisms/AssetContent/FormPricing/Coin.tsx
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx
index ce38b2dfe..f91e1ee21 100644
--- a/src/components/organisms/AssetContent/FormPricing/Coin.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx
@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Coin.module.css'
-import InputElement from '../../../atoms/Input/InputElement'
-import { ReactComponent as Logo } from '../../../../images/logo.svg'
-import Conversion from '../../../atoms/Price/Conversion'
+import InputElement from '../../../../atoms/Input/InputElement'
+import { ReactComponent as Logo } from '../../../../../images/logo.svg'
+import Conversion from '../../../../atoms/Price/Conversion'
 import { DataTokenOptions } from '@oceanprotocol/react'
 import { useField } from 'formik'
 import Error from './Error'
diff --git a/src/components/organisms/AssetContent/FormPricing/Dynamic.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css
similarity index 100%
rename from src/components/organisms/AssetContent/FormPricing/Dynamic.module.css
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.module.css
diff --git a/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
similarity index 87%
rename from src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
index dc4e94132..e49996ee9 100644
--- a/src/components/organisms/AssetContent/FormPricing/Dynamic.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
@@ -1,18 +1,18 @@
 import { DataTokenOptions, useOcean, usePricing } from '@oceanprotocol/react'
-import PriceUnit from '../../../atoms/Price/PriceUnit'
+import PriceUnit from '../../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
-import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
-import { isCorrectNetwork } from '../../../../utils/wallet'
-import Alert from '../../../atoms/Alert'
-import FormHelp from '../../../atoms/Input/Help'
-import Tooltip from '../../../atoms/Tooltip'
-import Wallet from '../../../molecules/Wallet'
+import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
+import { isCorrectNetwork } from '../../../../../utils/wallet'
+import Alert from '../../../../atoms/Alert'
+import FormHelp from '../../../../atoms/Input/Help'
+import Tooltip from '../../../../atoms/Tooltip'
+import Wallet from '../../../../molecules/Wallet'
 import Coin from './Coin'
 import styles from './Dynamic.module.css'
 import Fees from './Fees'
 import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
-import { PriceOptionsMarket } from '../../../../@types/MetaData'
+import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
 
 export default function Dynamic({
diff --git a/src/components/organisms/AssetContent/FormPricing/Error.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Error.tsx
similarity index 80%
rename from src/components/organisms/AssetContent/FormPricing/Error.tsx
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Error.tsx
index 2d25d0816..1980205df 100644
--- a/src/components/organisms/AssetContent/FormPricing/Error.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Error.tsx
@@ -1,6 +1,6 @@
 import { FieldMetaProps } from 'formik'
 import React, { ReactElement } from 'react'
-import stylesInput from '../../../atoms/Input/index.module.css'
+import stylesInput from '../../../../atoms/Input/index.module.css'
 
 export default function Error({
   meta
diff --git a/src/components/organisms/AssetContent/FormPricing/Fees.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css
similarity index 100%
rename from src/components/organisms/AssetContent/FormPricing/Fees.module.css
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css
diff --git a/src/components/organisms/AssetContent/FormPricing/Fees.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
similarity index 93%
rename from src/components/organisms/AssetContent/FormPricing/Fees.tsx
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
index 5009ffa8c..1f0d386dd 100644
--- a/src/components/organisms/AssetContent/FormPricing/Fees.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react'
-import Tooltip from '../../../atoms/Tooltip'
+import Tooltip from '../../../../atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useField } from 'formik'
-import Input from '../../../atoms/Input'
+import Input from '../../../../atoms/Input'
 import Error from './Error'
 
 export default function Fees({
diff --git a/src/components/organisms/AssetContent/FormPricing/Fixed.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
similarity index 100%
rename from src/components/organisms/AssetContent/FormPricing/Fixed.module.css
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
diff --git a/src/components/organisms/AssetContent/FormPricing/Fixed.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
similarity index 89%
rename from src/components/organisms/AssetContent/FormPricing/Fixed.tsx
rename to src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
index 462073005..2fcf55ad1 100644
--- a/src/components/organisms/AssetContent/FormPricing/Fixed.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
@@ -1,10 +1,10 @@
 import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
-import FormHelp from '../../../atoms/Input/Help'
-import Conversion from '../../../atoms/Price/Conversion'
+import FormHelp from '../../../../atoms/Input/Help'
+import Conversion from '../../../../atoms/Price/Conversion'
 import { useField } from 'formik'
-import Input from '../../../atoms/Input'
+import Input from '../../../../atoms/Input'
 import Error from './Error'
 import { DDO } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
diff --git a/src/components/organisms/AssetContent/FormPricing/index.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
similarity index 84%
rename from src/components/organisms/AssetContent/FormPricing/index.module.css
rename to src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
index 467085e93..c44c06533 100644
--- a/src/components/organisms/AssetContent/FormPricing/index.module.css
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
@@ -1,8 +1,6 @@
 .price {
-  margin: -2rem;
+  margin-top: -2rem;
   margin-bottom: 0;
-  border-bottom: 1px solid var(--brand-grey-lighter);
-  padding-bottom: var(--spacer);
 }
 
 .content {
diff --git a/src/components/organisms/AssetContent/FormPricing/index.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
similarity index 91%
rename from src/components/organisms/AssetContent/FormPricing/index.tsx
rename to src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
index c58d0f2cb..9a10afb7b 100644
--- a/src/components/organisms/AssetContent/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
@@ -1,13 +1,13 @@
 import React, { ReactElement, useEffect } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import styles from './index.module.css'
-import Tabs from '../../../atoms/Tabs'
+import Tabs from '../../../../atoms/Tabs'
 import Fixed from './Fixed'
 import Dynamic from './Dynamic'
 import { useFormikContext } from 'formik'
-import { useUserPreferences } from '../../../../providers/UserPreferences'
-import { PriceOptionsMarket } from '../../../../@types/MetaData'
-import Button from '../../../atoms/Button'
+import { useUserPreferences } from '../../../../../providers/UserPreferences'
+import { PriceOptionsMarket } from '../../../../../@types/MetaData'
+import Button from '../../../../atoms/Button'
 import { DDO } from '@oceanprotocol/lib'
 
 const query = graphql`
diff --git a/src/components/organisms/AssetContent/Pricing.module.css b/src/components/organisms/AssetContent/Pricing/index.module.css
similarity index 53%
rename from src/components/organisms/AssetContent/Pricing.module.css
rename to src/components/organisms/AssetContent/Pricing/index.module.css
index 232711b4b..0682771c4 100644
--- a/src/components/organisms/AssetContent/Pricing.module.css
+++ b/src/components/organisms/AssetContent/Pricing/index.module.css
@@ -1,5 +1,12 @@
 .pricing {
   margin-bottom: var(--spacer);
+  padding-bottom: var(--spacer);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  margin-left: -2rem;
+  margin-right: -2rem;
+}
+
+.feedback {
   width: 100%;
   min-height: 20vh;
   display: flex;
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
similarity index 83%
rename from src/components/organisms/AssetContent/Pricing.tsx
rename to src/components/organisms/AssetContent/Pricing/index.tsx
index a6532791f..3aefc75fa 100644
--- a/src/components/organisms/AssetContent/Pricing.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -1,15 +1,14 @@
 import React, { FormEvent, ReactElement, useState } from 'react'
 import { Formik } from 'formik'
-import { initialValues, validationSchema } from '../../../models/FormPricing'
+import { initialValues, validationSchema } from '../../../../models/FormPricing'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
-import { PriceOptionsMarket } from '../../../@types/MetaData'
-import Alert from '../../atoms/Alert'
-import styles from './Pricing.module.css'
+import { PriceOptionsMarket } from '../../../../@types/MetaData'
+import Alert from '../../../atoms/Alert'
+import styles from './index.module.css'
 import FormPricing from './FormPricing'
-import Loader from '../../atoms/Loader'
-import SuccessConfetti from '../../atoms/SuccessConfetti'
 import { toast } from 'react-toastify'
+import Feedback from './Feedback'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
   const {
@@ -63,11 +62,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
       >
         {() =>
           hasFeedback ? (
-            success ? (
-              <SuccessConfetti success={success} />
-            ) : (
-              <Loader message={pricingStepText} />
-            )
+            <Feedback success={success} pricingStepText={pricingStepText} />
           ) : showPricing ? (
             <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
           ) : (

From 9b5593499489b38d0ab8d46a8196e7b5e94b785d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 17:29:48 +0200
Subject: [PATCH 15/32] refactor

---
 .../AssetContent/Pricing/FormPricing/Fees.tsx | 52 +++++++++++--------
 src/components/pages/Publish/index.tsx        | 11 ++--
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
index 1f0d386dd..820c8e654 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
@@ -5,6 +5,30 @@ import { useField } from 'formik'
 import Input from '../../../../atoms/Input'
 import Error from './Error'
 
+const Default = ({
+  title,
+  name,
+  tooltip
+}: {
+  title: string
+  name: string
+  tooltip: string
+}) => (
+  <Input
+    label={
+      <>
+        {title}
+        <Tooltip content={tooltip} />
+      </>
+    }
+    value="0.1"
+    name={name}
+    postfix="%"
+    readOnly
+    small
+  />
+)
+
 export default function Fees({
   tooltips
 }: {
@@ -32,32 +56,16 @@ export default function Fees({
           additionalComponent={<Error meta={meta} />}
         />
 
-        <Input
-          label={
-            <>
-              Community Fee
-              <Tooltip content={tooltips.communityFee} />
-            </>
-          }
-          value="0.1"
+        <Default
+          title="Community Fee"
           name="communityFee"
-          postfix="%"
-          readOnly
-          small
+          tooltip={tooltips.communityFee}
         />
 
-        <Input
-          label={
-            <>
-              Marketplace Fee
-              <Tooltip content={tooltips.marketplaceFee} />
-            </>
-          }
-          value="0.1"
+        <Default
+          title="Marketplace Fee"
           name="marketplaceFee"
-          postfix="%"
-          readOnly
-          small
+          tooltip={tooltips.marketplaceFee}
         />
       </div>
     </>
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index ab548ca4b..302b2071f 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -53,21 +53,18 @@ export default function PublishPage({
       )
 
       // Publish failed
-      if (publishError) {
-        setError(publishError)
-        Logger.error(publishError)
+      if (!ddo || publishError) {
+        setError(publishError || 'Publishing DDO failed.')
+        Logger.error(publishError || 'Publishing DDO failed.')
         return
       }
 
-      if (!ddo) return
-
       // Publish succeeded
       setDdo(ddo)
-      resetForm()
-
       setSuccess(
         '🎉 Successfully published. 🎉 Now create a price on your data set.'
       )
+      resetForm()
     } catch (error) {
       setError(error.message)
       Logger.error(error.message)

From efcf65813dbb8b8a00aa8f2fbf67441be0cd6ed2 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 17:41:50 +0200
Subject: [PATCH 16/32] change content flow

---
 content/price.json                            |  5 ++
 .../Pricing/FormPricing/index.tsx             | 39 ++---------
 .../organisms/AssetContent/Pricing/index.tsx  | 67 ++++++++++++++++---
 3 files changed, 65 insertions(+), 46 deletions(-)

diff --git a/content/price.json b/content/price.json
index 618bfb33e..03ca7d6e5 100644
--- a/content/price.json
+++ b/content/price.json
@@ -1,5 +1,10 @@
 {
   "create": {
+    "empty": {
+      "title": "No Price Created",
+      "info": "This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it. Onwards!",
+      "action": "Create Pricing"
+    },
     "fixed": {
       "title": "Fixed",
       "info": "Set your price for accessing this data set. The datatoken for this data set will be worth the entered amount of OCEAN."
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
index 9a10afb7b..ba8ec2b8f 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement, useEffect } from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
 import styles from './index.module.css'
 import Tabs from '../../../../atoms/Tabs'
 import Fixed from './Fixed'
@@ -10,46 +9,16 @@ import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import Button from '../../../../atoms/Button'
 import { DDO } from '@oceanprotocol/lib'
 
-const query = graphql`
-  query PriceFieldQuery {
-    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
-      edges {
-        node {
-          childContentJson {
-            create {
-              fixed {
-                title
-                info
-              }
-              dynamic {
-                title
-                info
-                tooltips {
-                  poolInfo
-                  swapFee
-                  communityFee
-                  marketplaceFee
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
 export default function FormPricing({
   ddo,
-  setShowPricing
+  setShowPricing,
+  content
 }: {
   ddo: DDO
   setShowPricing: (value: boolean) => void
+  content: any
 }): ReactElement {
   const { debug } = useUserPreferences()
-  // Get content
-  const data = useStaticQuery(query)
-  const content = data.content.edges[0].node.childContentJson.create
 
   // Connect with form
   const { values, setFieldValue, submitForm } = useFormikContext()
@@ -88,7 +57,7 @@ export default function FormPricing({
 
       <div className={styles.actions}>
         <Button style="primary" onClick={() => submitForm()}>
-          Create Pricing
+          {content.empty.action}
         </Button>
         <Button style="text" size="small" onClick={() => setShowPricing(false)}>
           Cancel
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index 3aefc75fa..7c67b348e 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -9,8 +9,47 @@ import styles from './index.module.css'
 import FormPricing from './FormPricing'
 import { toast } from 'react-toastify'
 import Feedback from './Feedback'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const query = graphql`
+  query PricingQuery {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            create {
+              empty {
+                title
+                info
+                action
+              }
+              fixed {
+                title
+                info
+              }
+              dynamic {
+                title
+                info
+                tooltips {
+                  poolInfo
+                  swapFee
+                  communityFee
+                  marketplaceFee
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
+  // Get content
+  const data = useStaticQuery(query)
+  const content = data.content.edges[0].node.childContentJson.create
+
   const {
     createPricing,
     pricingIsLoading,
@@ -33,19 +72,24 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
 
       // Pricing failed
       if (!tx || pricingError) {
-        toast.error(pricingError)
-        Logger.error(pricingError)
+        toast.error(pricingError || 'Price creation failed.')
+        Logger.error(pricingError || 'Price creation failed.')
         return
       }
 
       // Pricing succeeded
-      tx && setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
+      setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
     } catch (error) {
       toast.error(error.message)
       Logger.error(error.message)
     }
   }
 
+  function handleShowPricingForm(e: FormEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    setShowPricing(true)
+  }
+
   return (
     <div className={styles.pricing}>
       <Formik
@@ -64,18 +108,19 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
           hasFeedback ? (
             <Feedback success={success} pricingStepText={pricingStepText} />
           ) : showPricing ? (
-            <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
+            <FormPricing
+              ddo={ddo}
+              setShowPricing={setShowPricing}
+              content={content}
+            />
           ) : (
             <Alert
               state="info"
-              title="No Price Created"
-              text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it. Onwards!"
+              title={content.empty.title}
+              text={content.empty.info}
               action={{
-                name: 'Create Pricing',
-                handleAction: (e: FormEvent<HTMLButtonElement>) => {
-                  e.preventDefault()
-                  setShowPricing(true)
-                }
+                name: content.empty.action,
+                handleAction: handleShowPricingForm
               }}
             />
           )

From 8454bf9cc78e610cc6327126b9208f3895895f03 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 18:23:08 +0200
Subject: [PATCH 17/32] remove priceType from metadata, new hasPool check

---
 src/@types/MetaData.d.ts                           | 1 -
 src/components/atoms/Input/InputElement.module.css | 4 ++--
 src/components/organisms/AssetActions/index.tsx    | 6 +-----
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/@types/MetaData.d.ts b/src/@types/MetaData.d.ts
index b207c47bc..0c550d974 100644
--- a/src/@types/MetaData.d.ts
+++ b/src/@types/MetaData.d.ts
@@ -9,7 +9,6 @@ import { DataTokenOptions, PriceOptions } from '@oceanprotocol/react'
 export interface AdditionalInformationMarket extends AdditionalInformation {
   links?: File[]
   termsAndConditions: boolean
-  priceType: string
 }
 
 export interface MetadataMarket extends Metadata {
diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index 78898ceb6..b1b3fea51 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -242,7 +242,7 @@ input[type='range']::-moz-range-track {
 
 .small {
   font-size: var(--font-size-small);
-  min-height: 34px;
+  height: 34px;
   padding: calc(var(--spacer) / 4);
 }
 
@@ -252,7 +252,7 @@ input[type='range']::-moz-range-track {
 
 .prefix.small,
 .postfix.small {
-  min-height: 34px;
+  height: 34px;
   font-size: var(--font-size-mini);
 }
 
diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx
index ca2fedff0..23a5c6c5c 100644
--- a/src/components/organisms/AssetActions/index.tsx
+++ b/src/components/organisms/AssetActions/index.tsx
@@ -7,7 +7,6 @@ import Tabs from '../../atoms/Tabs'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
 import compareAsBN from '../../../utils/compareAsBN'
 import Pool from './Pool'
-import { AdditionalInformationMarket } from '../../../@types/MetaData'
 
 export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
   const { ocean, balance, accountId } = useOcean()
@@ -73,10 +72,7 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
   ]
 
   // Check from metadata, cause that is available earlier
-  const hasPool =
-    ((attributes.additionalInformation as unknown) as AdditionalInformationMarket)
-      ?.priceType === 'dynamic'
-  // price?.type === 'pool'
+  const hasPool = ddo.price?.type === 'pool'
 
   hasPool &&
     tabs.push({

From 1905e5b86924e000123f6e467f5e8565913c4fd3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 18:33:24 +0200
Subject: [PATCH 18/32] add owner & price check

---
 src/components/organisms/AssetContent/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index cc2a52b13..40ca6803a 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -10,6 +10,7 @@ import AssetActions from '../AssetActions'
 import { DDO } from '@oceanprotocol/lib'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import Pricing from './Pricing'
+import { useOcean } from '@oceanprotocol/react'
 
 export interface AssetContentProps {
   metadata: MetadataMarket
@@ -23,12 +24,17 @@ export default function AssetContent({
 }: AssetContentProps): ReactElement {
   const { datePublished } = metadata.main
   const { debug } = useUserPreferences()
+  const { accountId } = useOcean()
+
+  const isOwner = accountId === ddo.publicKey[0].owner
+  // TODO: check if assets without price actually have ddo.price or not
+  const hasPrice = typeof ddo.price !== 'undefined'
+  const showPricing = isOwner && !hasPrice
 
   return (
     <article className={styles.grid}>
       <div className={styles.content}>
-        {/* TODO: check for ddo creator & no price */}
-        <Pricing ddo={ddo} />
+        {showPricing && <Pricing ddo={ddo} />}
 
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>

From 2163ab643b8958cc627575f29c98dea621d3b14e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 20:56:54 +0200
Subject: [PATCH 19/32] style & layout tweaks

---
 .../AssetContent/Pricing/Feedback.module.css  |  8 +++
 .../Pricing/FormPricing/Dynamic.tsx           |  2 +-
 .../AssetContent/Pricing/FormPricing/Fees.tsx |  2 +-
 .../Pricing/FormPricing/index.module.css      |  5 --
 .../Pricing/FormPricing/index.tsx             |  4 +-
 .../AssetContent/Pricing/index.module.css     | 17 +++---
 .../organisms/AssetContent/Pricing/index.tsx  | 40 +++++++-------
 .../organisms/AssetContent/index.module.css   | 10 ++--
 .../organisms/AssetContent/index.tsx          | 53 ++++++++++---------
 src/models/FormPricing.ts                     |  2 +-
 10 files changed, 71 insertions(+), 72 deletions(-)

diff --git a/src/components/organisms/AssetContent/Pricing/Feedback.module.css b/src/components/organisms/AssetContent/Pricing/Feedback.module.css
index e69de29bb..a2cc161bc 100644
--- a/src/components/organisms/AssetContent/Pricing/Feedback.module.css
+++ b/src/components/organisms/AssetContent/Pricing/Feedback.module.css
@@ -0,0 +1,8 @@
+.feedback {
+  width: 100%;
+  min-height: 20vh;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
index e49996ee9..8ce02e7bb 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
@@ -1,4 +1,4 @@
-import { DataTokenOptions, useOcean, usePricing } from '@oceanprotocol/react'
+import { useOcean, usePricing } from '@oceanprotocol/react'
 import PriceUnit from '../../../../atoms/Price/PriceUnit'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useSiteMetadata } from '../../../../../hooks/useSiteMetadata'
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
index 820c8e654..3195c8367 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import Tooltip from '../../../../atoms/Tooltip'
 import styles from './Fees.module.css'
-import { useField } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import Input from '../../../../atoms/Input'
 import Error from './Error'
 
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
index c44c06533..50f952281 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
@@ -1,8 +1,3 @@
-.price {
-  margin-top: -2rem;
-  margin-bottom: 0;
-}
-
 .content {
   padding: 0;
 }
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
index ba8ec2b8f..75c34780c 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
@@ -48,7 +48,7 @@ export default function FormPricing({
   ]
 
   return (
-    <div className={styles.price}>
+    <>
       <Tabs
         items={tabs}
         handleTabChange={handleTabChange}
@@ -69,6 +69,6 @@ export default function FormPricing({
           <code>{JSON.stringify(values, null, 2)}</code>
         </pre>
       )}
-    </div>
+    </>
   )
 }
diff --git a/src/components/organisms/AssetContent/Pricing/index.module.css b/src/components/organisms/AssetContent/Pricing/index.module.css
index 0682771c4..601b24ee2 100644
--- a/src/components/organisms/AssetContent/Pricing/index.module.css
+++ b/src/components/organisms/AssetContent/Pricing/index.module.css
@@ -1,16 +1,11 @@
 .pricing {
-  margin-bottom: var(--spacer);
+  composes: box from '../../../atoms/Box.module.css';
+  padding: 0;
   padding-bottom: var(--spacer);
-  border-bottom: 1px solid var(--brand-grey-lighter);
-  margin-left: -2rem;
-  margin-right: -2rem;
+  margin-top: var(--spacer);
 }
 
-.feedback {
-  width: 100%;
-  min-height: 20vh;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
+.pricing [class*='alert'] {
+  margin: var(--spacer);
+  margin-bottom: 0;
 }
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index 7c67b348e..56b318bef 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -104,27 +104,25 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
           setSubmitting(false)
         }}
       >
-        {() =>
-          hasFeedback ? (
-            <Feedback success={success} pricingStepText={pricingStepText} />
-          ) : showPricing ? (
-            <FormPricing
-              ddo={ddo}
-              setShowPricing={setShowPricing}
-              content={content}
-            />
-          ) : (
-            <Alert
-              state="info"
-              title={content.empty.title}
-              text={content.empty.info}
-              action={{
-                name: content.empty.action,
-                handleAction: handleShowPricingForm
-              }}
-            />
-          )
-        }
+        {hasFeedback ? (
+          <Feedback success={success} pricingStepText={pricingStepText} />
+        ) : showPricing ? (
+          <FormPricing
+            ddo={ddo}
+            setShowPricing={setShowPricing}
+            content={content}
+          />
+        ) : (
+          <Alert
+            state="info"
+            title={content.empty.title}
+            text={content.empty.info}
+            action={{
+              name: content.empty.action,
+              handleAction: handleShowPricingForm
+            }}
+          />
+        )}
       </Formik>
     </div>
   )
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index 9dd4a3115..6d3bff68c 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -1,7 +1,3 @@
-.pricing {
-  max-width: 40rem;
-}
-
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 1.5);
@@ -9,6 +5,10 @@
   margin-top: -1.5rem;
 }
 
+.grid > div {
+  overflow: hidden;
+}
+
 .content {
   composes: box from '../../atoms/Box.module.css';
   margin-top: var(--spacer);
@@ -16,7 +16,7 @@
 
 @media (min-width: 60rem) {
   .grid {
-    grid-template-columns: 1.5fr minmax(0, 1fr);
+    grid-template-columns: 1.5fr 1fr;
   }
 
   .sticky {
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 40ca6803a..db3ada0a6 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -33,44 +33,47 @@ export default function AssetContent({
 
   return (
     <article className={styles.grid}>
-      <div className={styles.content}>
+      <div>
         {showPricing && <Pricing ddo={ddo} />}
 
-        <aside className={styles.meta}>
-          <p>{datePublished && <Time date={datePublished} />}</p>
-          {metadata?.additionalInformation?.categories?.length && (
-            <p>
-              <Link
-                to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
-              >
-                {metadata?.additionalInformation?.categories[0]}
-              </Link>
-            </p>
-          )}
-        </aside>
+        <div className={styles.content}>
+          <aside className={styles.meta}>
+            <p>{datePublished && <Time date={datePublished} />}</p>
+            {metadata?.additionalInformation?.categories?.length && (
+              <p>
+                <Link
+                  to={`/search?categories=["${metadata?.additionalInformation?.categories[0]}"]`}
+                >
+                  {metadata?.additionalInformation?.categories[0]}
+                </Link>
+              </p>
+            )}
+          </aside>
 
-        <Markdown text={metadata?.additionalInformation?.description || ''} />
+          <Markdown text={metadata?.additionalInformation?.description || ''} />
 
-        <MetaSecondary metadata={metadata} />
+          <MetaSecondary metadata={metadata} />
 
-        <MetaFull ddo={ddo} metadata={metadata} />
+          <MetaFull ddo={ddo} metadata={metadata} />
 
-        <div className={styles.buttonGroup}>
-          {/* <EditAction
+          <div className={styles.buttonGroup}>
+            {/* <EditAction
               ddo={ddo}
               ocean={ocean}
               account={account}
               refetchMetadata={refetchMetadata}
             /> */}
-          {/* <DeleteAction ddo={ddo} /> */}
-        </div>
+            {/* <DeleteAction ddo={ddo} /> */}
+          </div>
 
-        {debug === true && (
-          <pre>
-            <code>{JSON.stringify(ddo, null, 2)}</code>
-          </pre>
-        )}
+          {debug === true && (
+            <pre>
+              <code>{JSON.stringify(ddo, null, 2)}</code>
+            </pre>
+          )}
+        </div>
       </div>
+
       <div>
         <div className={styles.sticky}>
           <AssetActions ddo={ddo} />
diff --git a/src/models/FormPricing.ts b/src/models/FormPricing.ts
index 27e954735..507121d8c 100644
--- a/src/models/FormPricing.ts
+++ b/src/models/FormPricing.ts
@@ -10,7 +10,7 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
   weightOnDataToken: Yup.string().required('Required'),
   swapFee: Yup.number()
     .min(0.1, 'Must be more or equal to 0.1')
-    .max(0.9, 'Must be less or equal to 0.9')
+    .max(10, 'Maximum is 10%')
     .required('Required')
     .nullable()
 })

From 0497904bb5818a12bb94f457b40fa8604da6535f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 21:16:04 +0200
Subject: [PATCH 20/32] compute & consume tweaks

---
 src/components/organisms/AssetActions/Compute.module.css | 4 +---
 src/components/organisms/AssetActions/Compute.tsx        | 6 +++---
 src/components/organisms/AssetActions/Consume.module.css | 4 +---
 src/components/organisms/AssetActions/Consume.tsx        | 9 ++++++---
 src/components/organisms/AssetActions/index.module.css   | 6 ++++++
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/organisms/AssetActions/Compute.module.css b/src/components/organisms/AssetActions/Compute.module.css
index 47987d596..9aa24ed30 100644
--- a/src/components/organisms/AssetActions/Compute.module.css
+++ b/src/components/organisms/AssetActions/Compute.module.css
@@ -24,7 +24,5 @@
 }
 
 .hasTokens {
-  font-size: var(--font-size-small);
-  color: var(--color-secondary);
-  margin-top: calc(var(--spacer) / 4);
+  composes: hasTokens from './index.module.css';
 }
diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx
index 85045d6d6..3e3ffcea6 100644
--- a/src/components/organisms/AssetActions/Compute.tsx
+++ b/src/components/organisms/AssetActions/Compute.tsx
@@ -110,8 +110,8 @@ export default function Compute({
           <Price ddo={ddo} conversion />
           {hasDatatoken && (
             <div className={styles.hasTokens}>
-              You own {dtBalance} {dtSymbol} so you can use this asset without
-              paying again.
+              You own {dtBalance} {dtSymbol} allowing you to use this data set
+              without paying again.
             </div>
           )}
         </div>
@@ -135,7 +135,7 @@ export default function Compute({
           onClick={() => startJob()}
           disabled={isComputeButtonDisabled}
         >
-          Start job
+          {hasDatatoken ? 'Start job' : 'Buy'}
         </Button>
       </div>
 
diff --git a/src/components/organisms/AssetActions/Consume.module.css b/src/components/organisms/AssetActions/Consume.module.css
index bf99d0d80..98bb43b6f 100644
--- a/src/components/organisms/AssetActions/Consume.module.css
+++ b/src/components/organisms/AssetActions/Consume.module.css
@@ -18,7 +18,5 @@
 }
 
 .hasTokens {
-  font-size: var(--font-size-small);
-  color: var(--color-secondary);
-  margin-top: calc(var(--spacer) / 4);
+  composes: hasTokens from './index.module.css';
 }
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx
index 6119e2cfb..9947d0b9c 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/organisms/AssetActions/Consume.tsx
@@ -33,7 +33,10 @@ export default function Consume({
   const { consumeStepText, consume, consumeError } = useConsume()
 
   const isDisabled =
-    !ocean || !isBalanceSufficient || consumeStepText || pricingIsLoading
+    !ocean ||
+    !isBalanceSufficient ||
+    typeof consumeStepText !== 'undefined' ||
+    pricingIsLoading
   const hasDatatoken = Number(dtBalance) >= 1
 
   async function handleConsume() {
@@ -69,8 +72,8 @@ export default function Consume({
           <Price ddo={ddo} conversion />
           {hasDatatoken && (
             <div className={styles.hasTokens}>
-              You own {dtBalance} {dtSymbol} so you can use this asset without
-              paying again.
+              You own {dtBalance} {dtSymbol} allowing you to use this data set
+              without paying again.
             </div>
           )}
           <PurchaseButton />
diff --git a/src/components/organisms/AssetActions/index.module.css b/src/components/organisms/AssetActions/index.module.css
index 343af92ec..b841e2570 100644
--- a/src/components/organisms/AssetActions/index.module.css
+++ b/src/components/organisms/AssetActions/index.module.css
@@ -4,3 +4,9 @@
   margin: auto;
   padding: 0;
 }
+
+.hasTokens {
+  font-size: var(--font-size-mini);
+  color: var(--color-secondary);
+  margin-top: calc(var(--spacer) / 12);
+}

From 8d7eec69fae70fb6373d18e69ca9143ec012704d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 21:33:11 +0200
Subject: [PATCH 21/32] typing fixes

---
 .../AssetContent/Pricing/FormPricing/index.tsx      |  2 +-
 .../organisms/AssetContent/Pricing/index.tsx        | 13 ++++++++-----
 src/models/FormPricing.ts                           |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
index 75c34780c..a462871a6 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
@@ -34,7 +34,7 @@ export default function FormPricing({
   useEffect(() => {
     const dtAmount = Number(price) * Number(weightOnDataToken)
     setFieldValue('dtAmount', dtAmount)
-  }, [price])
+  }, [price, weightOnDataToken])
 
   const tabs = [
     {
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index 56b318bef..ea78bd718 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -50,18 +50,20 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
   const data = useStaticQuery(query)
   const content = data.content.edges[0].node.childContentJson.create
 
+  // View states
+  const [showPricing, setShowPricing] = useState(false)
+  const [success, setSuccess] = useState<string>()
+
   const {
     createPricing,
     pricingIsLoading,
     pricingError,
     pricingStepText
   } = usePricing(ddo)
-  const [showPricing, setShowPricing] = useState(false)
-  const [success, setSuccess] = useState<string>()
 
-  const hasFeedback = pricingIsLoading || success
+  const hasFeedback = pricingIsLoading || typeof success !== 'undefined'
 
-  async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
+  async function handleCreatePricing(values: PriceOptionsMarket) {
     try {
       const priceOptions = {
         ...values,
@@ -78,7 +80,8 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
       }
 
       // Pricing succeeded
-      setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
+      setSuccess(`🎉 Successfully created a ${values.type} price. 🎉 `)
+      Logger.log(`Transaction: ${tx}`)
     } catch (error) {
       toast.error(error.message)
       Logger.error(error.message)
diff --git a/src/models/FormPricing.ts b/src/models/FormPricing.ts
index 507121d8c..5964b2531 100644
--- a/src/models/FormPricing.ts
+++ b/src/models/FormPricing.ts
@@ -15,7 +15,7 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
     .nullable()
 })
 
-export const initialValues: Partial<PriceOptionsMarket> = {
+export const initialValues: PriceOptionsMarket = {
   price: 1,
   type: 'dynamic',
   dtAmount: 1,

From c9b7b0cdd3778d8375ba598c535043cea1a2cb88 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 21:58:35 +0200
Subject: [PATCH 22/32] publish debug tweaks

---
 src/components/pages/Publish/Debug.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/pages/Publish/Debug.tsx b/src/components/pages/Publish/Debug.tsx
index b0c1fea07..b4e652ed2 100644
--- a/src/components/pages/Publish/Debug.tsx
+++ b/src/components/pages/Publish/Debug.tsx
@@ -8,6 +8,24 @@ export default function Debug({
 }: {
   values: Partial<MetadataPublishForm>
 }): ReactElement {
+  const ddo = {
+    '@context': 'https://w3id.org/did/v1',
+    dataTokenInfo: {
+      ...values.dataTokenOptions
+    },
+    service: [
+      {
+        index: 0,
+        type: 'metadata',
+        attributes: { ...transformPublishFormToMetadata(values) }
+      },
+      {
+        index: 1,
+        type: values.access,
+        attributes: {}
+      }
+    ]
+  }
   return (
     <div className={styles.grid}>
       <div>
@@ -18,11 +36,9 @@ export default function Debug({
       </div>
 
       <div>
-        <h5>Transformed Values</h5>
+        <h5>Transformed DDO Values</h5>
         <pre>
-          <code>
-            {JSON.stringify(transformPublishFormToMetadata(values), null, 2)}
-          </code>
+          <code>{JSON.stringify(ddo, null, 2)}</code>
         </pre>
       </div>
     </div>

From 51d8af651c387fc6101c61910162f13f30396dfc Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 22:06:02 +0200
Subject: [PATCH 23/32] refactor

---
 src/components/pages/Publish/Debug.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/pages/Publish/Debug.tsx b/src/components/pages/Publish/Debug.tsx
index b4e652ed2..61c5d7de0 100644
--- a/src/components/pages/Publish/Debug.tsx
+++ b/src/components/pages/Publish/Debug.tsx
@@ -3,6 +3,15 @@ import { MetadataPublishForm } from '../../../@types/MetaData'
 import styles from './index.module.css'
 import { transformPublishFormToMetadata } from './utils'
 
+const Output = ({ title, output }: { title: string; output: any }) => (
+  <div>
+    <h5>{title}</h5>
+    <pre>
+      <code>{JSON.stringify(output, null, 2)}</code>
+    </pre>
+  </div>
+)
+
 export default function Debug({
   values
 }: {
@@ -26,21 +35,11 @@ export default function Debug({
       }
     ]
   }
+
   return (
     <div className={styles.grid}>
-      <div>
-        <h5>Collected Form Values</h5>
-        <pre>
-          <code>{JSON.stringify(values, null, 2)}</code>
-        </pre>
-      </div>
-
-      <div>
-        <h5>Transformed DDO Values</h5>
-        <pre>
-          <code>{JSON.stringify(ddo, null, 2)}</code>
-        </pre>
-      </div>
+      <Output title="Collected Form Values" output={values} />
+      <Output title="Transformed DDO Values" output={ddo} />
     </div>
   )
 }

From 74ebdd517eb3c6e03c6d00916ea8fe540011a749 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 11:36:57 +0200
Subject: [PATCH 24/32] bump ocean.js

---
 package-lock.json                                       | 6 +++---
 package.json                                            | 2 +-
 src/components/organisms/AssetContent/Pricing/index.tsx | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2af70e4a0..8b73a8f39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4462,9 +4462,9 @@
       "integrity": "sha512-LING+GvW37I0L40rZdPCZ1SvcZurDSGGhT0WOVPNO8oyh2C3bXModDBNE4+gCFa8pTbQBOc4ot1/Zoj9PfT/zA=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.6.5.tgz",
-      "integrity": "sha512-GH7ZujwmV997kZT4GJy7cZF0TBitM/RVm+xBLtqpr5qmrP/4Pq38WODbOol3dGEHsyT62qzDTvCGoBYSRSCU1g==",
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.6.7.tgz",
+      "integrity": "sha512-6Il5PJfaZXXkXO8ECZCsH13OOGlPaN9vK3pLW9EQ6Zj9NlESeLdh0lmvvYSyvloYU999rOY4+X9ujhN6P18clw==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.6",
diff --git a/package.json b/package.json
index 92fc050cf..dadcce34f 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.6.5",
+    "@oceanprotocol/lib": "^0.6.7",
     "@oceanprotocol/react": "^0.2.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index ea78bd718..bbdf2fd8b 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -70,6 +70,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
         // swapFee is tricky: to get 0.1% you need to send 0.001 as value
         swapFee: `${values.swapFee / 100}`
       }
+      // TODO: check if we need to mint first
       const tx = await createPricing(priceOptions)
 
       // Pricing failed

From b48435788c3dfea2a87df0338383864b29c1a60a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 14:37:18 +0200
Subject: [PATCH 25/32] package updates

---
 package-lock.json                             | 1642 +++++++++--------
 package.json                                  |   30 +-
 .../AssetActions/Compute.stories.tsx          |    2 +-
 .../AssetActions/Consume.stories.tsx          |    1 +
 .../organisms/AssetContent/Pricing/index.tsx  |    2 +-
 src/models/Asset.ts                           |    3 +-
 tests/unit/__fixtures__/testFormData.ts       |    9 +-
 7 files changed, 908 insertions(+), 781 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b73a8f39..90123f37b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1440,9 +1440,9 @@
       }
     },
     "@babel/standalone": {
-      "version": "7.12.3",
-      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.12.3.tgz",
-      "integrity": "sha512-+zZdF3o/CEeSQ+WDZWeqdVVHGc1oQ+EZuYOQnCGyngNXroH+uMhHa00ki6egI/EddI6vHMH3TEdQhXAx98usXg=="
+      "version": "7.12.4",
+      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.12.4.tgz",
+      "integrity": "sha512-9vw7RYK7CWh5MdTfLyC7j6hZmDYmm6DieFP4yetvpVftKQ+yrEY7ovhnhsVHznLqx5luU9Bx4k7xoEc3acrsow=="
     },
     "@babel/template": {
       "version": "7.10.4",
@@ -2298,23 +2298,23 @@
       "dev": true
     },
     "@jest/console": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-26.5.2.tgz",
-      "integrity": "sha512-lJELzKINpF1v74DXHbCRIkQ/+nUV1M+ntj+X1J8LxCgpmJZjfLmhFejiMSbjjD66fayxl5Z06tbs3HMyuik6rw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-26.6.0.tgz",
+      "integrity": "sha512-ArGcZWAEYMWmWnc/QvxLDvFmGRPvmHeulhS7FUUAlUGR5vS/SqMfArsGaYmIFEThSotCMnEihwx1h62I1eg5lg==",
       "dev": true,
       "requires": {
-        "@jest/types": "^26.5.2",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
         "chalk": "^4.0.0",
-        "jest-message-util": "^26.5.2",
-        "jest-util": "^26.5.2",
+        "jest-message-util": "^26.6.0",
+        "jest-util": "^26.6.0",
         "slash": "^3.0.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -2374,13 +2374,13 @@
           "dev": true
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -2390,12 +2390,12 @@
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -2415,34 +2415,34 @@
       }
     },
     "@jest/core": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-26.5.3.tgz",
-      "integrity": "sha512-CiU0UKFF1V7KzYTVEtFbFmGLdb2g4aTtY0WlyUfLgj/RtoTnJFhh50xKKr7OYkdmBUlGFSa2mD1TU3UZ6OLd4g==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-26.6.0.tgz",
+      "integrity": "sha512-7wbunxosnC5zXjxrEtTQSblFjRVOT8qz1eSytw8riEeWgegy3ct91NLPEP440CDuWrmW3cOLcEGxIf9q2u6O9Q==",
       "dev": true,
       "requires": {
-        "@jest/console": "^26.5.2",
-        "@jest/reporters": "^26.5.3",
-        "@jest/test-result": "^26.5.2",
-        "@jest/transform": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/console": "^26.6.0",
+        "@jest/reporters": "^26.6.0",
+        "@jest/test-result": "^26.6.0",
+        "@jest/transform": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
         "ansi-escapes": "^4.2.1",
         "chalk": "^4.0.0",
         "exit": "^0.1.2",
         "graceful-fs": "^4.2.4",
-        "jest-changed-files": "^26.5.2",
-        "jest-config": "^26.5.3",
-        "jest-haste-map": "^26.5.2",
-        "jest-message-util": "^26.5.2",
+        "jest-changed-files": "^26.6.0",
+        "jest-config": "^26.6.0",
+        "jest-haste-map": "^26.6.0",
+        "jest-message-util": "^26.6.0",
         "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.5.2",
-        "jest-resolve-dependencies": "^26.5.3",
-        "jest-runner": "^26.5.3",
-        "jest-runtime": "^26.5.3",
-        "jest-snapshot": "^26.5.3",
-        "jest-util": "^26.5.2",
-        "jest-validate": "^26.5.3",
-        "jest-watcher": "^26.5.2",
+        "jest-resolve": "^26.6.0",
+        "jest-resolve-dependencies": "^26.6.0",
+        "jest-runner": "^26.6.0",
+        "jest-runtime": "^26.6.0",
+        "jest-snapshot": "^26.6.0",
+        "jest-util": "^26.6.0",
+        "jest-validate": "^26.6.0",
+        "jest-watcher": "^26.6.0",
         "micromatch": "^4.0.2",
         "p-each-series": "^2.1.0",
         "rimraf": "^3.0.0",
@@ -2451,21 +2451,21 @@
       },
       "dependencies": {
         "@jest/transform": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.5.2.tgz",
-          "integrity": "sha512-AUNjvexh+APhhmS8S+KboPz+D3pCxPvEAGduffaAJYxIFxGi/ytZQkrqcKDUU0ERBAo5R7087fyOYr2oms1seg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.0.tgz",
+          "integrity": "sha512-NUNA1NMCyVV9g5NIQF1jzW7QutQhB/HAocteCiUyH0VhmLXnGMTfPYQu1G6IjPk+k1SWdh2PD+Zs1vMqbavWzg==",
           "dev": true,
           "requires": {
             "@babel/core": "^7.1.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "babel-plugin-istanbul": "^6.0.0",
             "chalk": "^4.0.0",
             "convert-source-map": "^1.4.0",
             "fast-json-stable-stringify": "^2.0.0",
             "graceful-fs": "^4.2.4",
-            "jest-haste-map": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
             "jest-regex-util": "^26.0.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "micromatch": "^4.0.2",
             "pirates": "^4.0.1",
             "slash": "^3.0.0",
@@ -2474,9 +2474,9 @@
           }
         },
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -2561,16 +2561,16 @@
           "dev": true
         },
         "expect": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-26.5.3.tgz",
-          "integrity": "sha512-kkpOhGRWGOr+TEFUnYAjfGvv35bfP+OlPtqPIJpOCR9DVtv8QV+p8zG0Edqafh80fsjeE+7RBcVUq1xApnYglw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.0.tgz",
+          "integrity": "sha512-EzhbZ1tbwcaa5Ok39BI11flIMeIUSlg1QsnXOrleaMvltwHsvIQPBtL710l+ma+qDFLUgktCXK4YuQzmHdm7cg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-styles": "^4.0.0",
             "jest-get-type": "^26.3.0",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
             "jest-regex-util": "^26.0.0"
           }
         },
@@ -2598,15 +2598,15 @@
           "dev": true
         },
         "jest-diff": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.5.2.tgz",
-          "integrity": "sha512-HCSWDUGwsov5oTlGzrRM+UPJI/Dpqi9jzeV0fdRNi3Ch5bnoXhnyJMmVg2juv9081zLIy3HGPI5mcuGgXM2xRA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.0.tgz",
+          "integrity": "sha512-IH09rKsdWY8YEY7ii2BHlSq59oXyF2pK3GoK+hOK9eD/x6009eNB5Jv1shLMKgxekodPzLlV7eZP1jPFQYds8w==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
             "diff-sequences": "^26.5.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-get-type": {
@@ -2616,12 +2616,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -2630,7 +2630,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -2638,25 +2638,25 @@
           }
         },
         "jest-matcher-utils": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.5.2.tgz",
-          "integrity": "sha512-W9GO9KBIC4gIArsNqDUKsLnhivaqf8MSs6ujO/JDcPIQrmY+aasewweXVET8KdrJ6ADQaUne5UzysvF/RR7JYA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.0.tgz",
+          "integrity": "sha512-BUy/dQYb7ELGRazmK4ZVkbfPYCaNnrMtw1YljVhcKzWUxBM0xQ+bffrfnMLdRZp4wUUcT4ahaVnA3VWZtXWP9Q==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -2666,52 +2666,52 @@
           }
         },
         "jest-resolve": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz",
-          "integrity": "sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz",
+          "integrity": "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
             "jest-pnp-resolver": "^1.2.2",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "read-pkg-up": "^7.0.1",
             "resolve": "^1.17.0",
             "slash": "^3.0.0"
           }
         },
         "jest-snapshot": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.5.3.tgz",
-          "integrity": "sha512-ZgAk0Wm0JJ75WS4lGaeRfa0zIgpL0KD595+XmtwlIEMe8j4FaYHyZhP1LNOO+8fXq7HJ3hll54+sFV9X4+CGVw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.0.tgz",
+          "integrity": "sha512-mcqJZeIZqxomvBcsaiIbiEe2g7K1UxnUpTwjMoHb+DX4uFGnuZoZ6m28YOYRyCfZsdU9mmq73rNBnEH2atTR4Q==",
           "dev": true,
           "requires": {
             "@babel/types": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/babel__traverse": "^7.0.4",
             "@types/prettier": "^2.0.0",
             "chalk": "^4.0.0",
-            "expect": "^26.5.3",
+            "expect": "^26.6.0",
             "graceful-fs": "^4.2.4",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "jest-haste-map": "^26.5.2",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
-            "jest-resolve": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
+            "jest-resolve": "^26.6.0",
             "natural-compare": "^1.4.0",
-            "pretty-format": "^26.5.2",
+            "pretty-format": "^26.6.0",
             "semver": "^7.3.2"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -2755,12 +2755,12 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -2844,21 +2844,21 @@
       }
     },
     "@jest/environment": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-26.5.2.tgz",
-      "integrity": "sha512-YjhCD/Zhkz0/1vdlS/QN6QmuUdDkpgBdK4SdiVg4Y19e29g4VQYN5Xg8+YuHjdoWGY7wJHMxc79uDTeTOy9Ngw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-26.6.0.tgz",
+      "integrity": "sha512-l+5MSdiC4rUUrz8xPdj0TwHBwuoqMcAbFnsYDTn5FkenJl8b+lvC5NdJl1tVICGHWnx0fnjdd1luRZ7u3U4xyg==",
       "dev": true,
       "requires": {
-        "@jest/fake-timers": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/fake-timers": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
-        "jest-mock": "^26.5.2"
+        "jest-mock": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -2929,23 +2929,23 @@
       }
     },
     "@jest/fake-timers": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.5.2.tgz",
-      "integrity": "sha512-09Hn5Oraqt36V1akxQeWMVL0fR9c6PnEhpgLaYvREXZJAh2H2Y+QLCsl0g7uMoJeoWJAuz4tozk1prbR1Fc1sw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.6.0.tgz",
+      "integrity": "sha512-7VQpjChrwlwvGNysS10lDBLOVLxMvMtpx0Xo6aIotzNVyojYk0NN0CR8R4T6h/eu7Zva/LB3P71jqwGdtADoag==",
       "dev": true,
       "requires": {
-        "@jest/types": "^26.5.2",
+        "@jest/types": "^26.6.0",
         "@sinonjs/fake-timers": "^6.0.1",
         "@types/node": "*",
-        "jest-message-util": "^26.5.2",
-        "jest-mock": "^26.5.2",
-        "jest-util": "^26.5.2"
+        "jest-message-util": "^26.6.0",
+        "jest-mock": "^26.6.0",
+        "jest-util": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -3005,13 +3005,13 @@
           "dev": true
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -3021,12 +3021,12 @@
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -3046,20 +3046,20 @@
       }
     },
     "@jest/globals": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-26.5.3.tgz",
-      "integrity": "sha512-7QztI0JC2CuB+Wx1VdnOUNeIGm8+PIaqngYsZXQCkH2QV0GFqzAYc9BZfU0nuqA6cbYrWh5wkuMzyii3P7deug==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-26.6.0.tgz",
+      "integrity": "sha512-rs3a/a8Lq8FgTx11SxbqIU2bDjsFU2PApl2oK2oUVlo84RSF76afFm2nLojW93AGssr715GHUwhq5b6mpCI5BQ==",
       "dev": true,
       "requires": {
-        "@jest/environment": "^26.5.2",
-        "@jest/types": "^26.5.2",
-        "expect": "^26.5.3"
+        "@jest/environment": "^26.6.0",
+        "@jest/types": "^26.6.0",
+        "expect": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -3125,16 +3125,16 @@
           "dev": true
         },
         "expect": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-26.5.3.tgz",
-          "integrity": "sha512-kkpOhGRWGOr+TEFUnYAjfGvv35bfP+OlPtqPIJpOCR9DVtv8QV+p8zG0Edqafh80fsjeE+7RBcVUq1xApnYglw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.0.tgz",
+          "integrity": "sha512-EzhbZ1tbwcaa5Ok39BI11flIMeIUSlg1QsnXOrleaMvltwHsvIQPBtL710l+ma+qDFLUgktCXK4YuQzmHdm7cg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-styles": "^4.0.0",
             "jest-get-type": "^26.3.0",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
             "jest-regex-util": "^26.0.0"
           }
         },
@@ -3145,15 +3145,15 @@
           "dev": true
         },
         "jest-diff": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.5.2.tgz",
-          "integrity": "sha512-HCSWDUGwsov5oTlGzrRM+UPJI/Dpqi9jzeV0fdRNi3Ch5bnoXhnyJMmVg2juv9081zLIy3HGPI5mcuGgXM2xRA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.0.tgz",
+          "integrity": "sha512-IH09rKsdWY8YEY7ii2BHlSq59oXyF2pK3GoK+hOK9eD/x6009eNB5Jv1shLMKgxekodPzLlV7eZP1jPFQYds8w==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
             "diff-sequences": "^26.5.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-get-type": {
@@ -3163,25 +3163,25 @@
           "dev": true
         },
         "jest-matcher-utils": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.5.2.tgz",
-          "integrity": "sha512-W9GO9KBIC4gIArsNqDUKsLnhivaqf8MSs6ujO/JDcPIQrmY+aasewweXVET8KdrJ6ADQaUne5UzysvF/RR7JYA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.0.tgz",
+          "integrity": "sha512-BUy/dQYb7ELGRazmK4ZVkbfPYCaNnrMtw1YljVhcKzWUxBM0xQ+bffrfnMLdRZp4wUUcT4ahaVnA3VWZtXWP9Q==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -3191,12 +3191,12 @@
           }
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -3214,16 +3214,16 @@
       }
     },
     "@jest/reporters": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-26.5.3.tgz",
-      "integrity": "sha512-X+vR0CpfMQzYcYmMFKNY9n4jklcb14Kffffp7+H/MqitWnb0440bW2L76NGWKAa+bnXhNoZr+lCVtdtPmfJVOQ==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-26.6.0.tgz",
+      "integrity": "sha512-PXbvHhdci5Rj1VFloolgLb+0kkdtzswhG8MzVENKJRI3O1ndwr52G6E/2QupjwrRcYnApZOelFf4nNpf5+SDxA==",
       "dev": true,
       "requires": {
         "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^26.5.2",
-        "@jest/test-result": "^26.5.2",
-        "@jest/transform": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/console": "^26.6.0",
+        "@jest/test-result": "^26.6.0",
+        "@jest/transform": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "chalk": "^4.0.0",
         "collect-v8-coverage": "^1.0.0",
         "exit": "^0.1.2",
@@ -3234,9 +3234,9 @@
         "istanbul-lib-report": "^3.0.0",
         "istanbul-lib-source-maps": "^4.0.0",
         "istanbul-reports": "^3.0.2",
-        "jest-haste-map": "^26.5.2",
-        "jest-resolve": "^26.5.2",
-        "jest-util": "^26.5.2",
+        "jest-haste-map": "^26.6.0",
+        "jest-resolve": "^26.6.0",
+        "jest-util": "^26.6.0",
         "jest-worker": "^26.5.0",
         "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
@@ -3247,21 +3247,21 @@
       },
       "dependencies": {
         "@jest/transform": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.5.2.tgz",
-          "integrity": "sha512-AUNjvexh+APhhmS8S+KboPz+D3pCxPvEAGduffaAJYxIFxGi/ytZQkrqcKDUU0ERBAo5R7087fyOYr2oms1seg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.0.tgz",
+          "integrity": "sha512-NUNA1NMCyVV9g5NIQF1jzW7QutQhB/HAocteCiUyH0VhmLXnGMTfPYQu1G6IjPk+k1SWdh2PD+Zs1vMqbavWzg==",
           "dev": true,
           "requires": {
             "@babel/core": "^7.1.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "babel-plugin-istanbul": "^6.0.0",
             "chalk": "^4.0.0",
             "convert-source-map": "^1.4.0",
             "fast-json-stable-stringify": "^2.0.0",
             "graceful-fs": "^4.2.4",
-            "jest-haste-map": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
             "jest-regex-util": "^26.0.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "micromatch": "^4.0.2",
             "pirates": "^4.0.1",
             "slash": "^3.0.0",
@@ -3270,9 +3270,9 @@
           }
         },
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -3365,12 +3365,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -3379,7 +3379,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -3387,28 +3387,28 @@
           }
         },
         "jest-resolve": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz",
-          "integrity": "sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz",
+          "integrity": "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
             "jest-pnp-resolver": "^1.2.2",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "read-pkg-up": "^7.0.1",
             "resolve": "^1.17.0",
             "slash": "^3.0.0"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -3538,21 +3538,21 @@
       }
     },
     "@jest/test-result": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-26.5.2.tgz",
-      "integrity": "sha512-E/Zp6LURJEGSCWpoMGmCFuuEI1OWuI3hmZwmULV0GsgJBh7u0rwqioxhRU95euUuviqBDN8ruX/vP/4bwYolXw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-26.6.0.tgz",
+      "integrity": "sha512-LV6X1ry+sKjseQsIFz3e6XAZYxwidvmeJFnVF08fq98q08dF1mJYI0lDq/LmH/jas+R4s0pwnNGiz1hfC4ZUBw==",
       "dev": true,
       "requires": {
-        "@jest/console": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/console": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/istanbul-lib-coverage": "^2.0.0",
         "collect-v8-coverage": "^1.0.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -3623,22 +3623,22 @@
       }
     },
     "@jest/test-sequencer": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.5.3.tgz",
-      "integrity": "sha512-Wqzb7aQ13L3T47xHdpUqYMOpiqz6Dx2QDDghp5AV/eUDXR7JieY+E1s233TQlNyl+PqtqgjVokmyjzX/HA51BA==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.6.0.tgz",
+      "integrity": "sha512-rWPTMa+8rejvePZnJmnKkmKWh0qILFDPpN0qbSif+KNGvFxqqDGafMo4P2Y8+I9XWrZQBeXL9IxPL4ZzDgRlbw==",
       "dev": true,
       "requires": {
-        "@jest/test-result": "^26.5.2",
+        "@jest/test-result": "^26.6.0",
         "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^26.5.2",
-        "jest-runner": "^26.5.3",
-        "jest-runtime": "^26.5.3"
+        "jest-haste-map": "^26.6.0",
+        "jest-runner": "^26.6.0",
+        "jest-runtime": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -3715,12 +3715,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -3729,7 +3729,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -3737,12 +3737,12 @@
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -4462,9 +4462,9 @@
       "integrity": "sha512-LING+GvW37I0L40rZdPCZ1SvcZurDSGGhT0WOVPNO8oyh2C3bXModDBNE4+gCFa8pTbQBOc4ot1/Zoj9PfT/zA=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.6.7",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.6.7.tgz",
-      "integrity": "sha512-6Il5PJfaZXXkXO8ECZCsH13OOGlPaN9vK3pLW9EQ6Zj9NlESeLdh0lmvvYSyvloYU999rOY4+X9ujhN6P18clw==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.7.0.tgz",
+      "integrity": "sha512-XRQ58wWbohtz/buug0498EbpBchxrPwYBh8f/Iln1Vwh6h3IfLWvznmg4gNg/H1AE3qdPsuVcBJwYb0Bos/yGQ==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.6",
@@ -4479,11 +4479,11 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.2.2.tgz",
-      "integrity": "sha512-QuzeoVk+EFsoXoqZz7kyVfwN1NcbpSNH6TDtLRBezWd13iU0rFzdPfnAkcuavdCcfkmbaW2nQohHYfUdvBKB+g==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.0.tgz",
+      "integrity": "sha512-A9D16lx9s6uH5JhzW2f2y/BBxp9+P9Pne5B6HJf6dNf5BJUTC/5itQC8O852YdJRw7CtsM/w50lTL+5Uu9PIzw==",
       "requires": {
-        "@oceanprotocol/lib": "^0.6.5",
+        "@oceanprotocol/lib": "^0.7.0",
         "axios": "^0.20.0",
         "decimal.js": "^10.2.1",
         "web3": "^1.3.0",
@@ -7765,13 +7765,128 @@
       }
     },
     "@types/jest": {
-      "version": "26.0.14",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.14.tgz",
-      "integrity": "sha512-Hz5q8Vu0D288x3iWXePSn53W7hAjP0H7EQ6QvDO9c7t46mR0lNOLlfuwQ+JkVxuhygHzlzPX+0jKdA3ZgSh+Vg==",
+      "version": "26.0.15",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.15.tgz",
+      "integrity": "sha512-s2VMReFXRg9XXxV+CW9e5Nz8fH2K1aEhwgjUqPPbQd7g95T0laAcvLv032EhFHIa5GHsZ8W7iJEQVaJq6k3Gog==",
       "dev": true,
       "requires": {
-        "jest-diff": "^25.2.1",
-        "pretty-format": "^25.2.1"
+        "jest-diff": "^26.0.0",
+        "pretty-format": "^26.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^3.0.0",
+            "@types/node": "*",
+            "@types/yargs": "^15.0.0",
+            "chalk": "^4.0.0"
+          }
+        },
+        "@types/istanbul-reports": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
+          "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-report": "*"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "diff-sequences": {
+          "version": "26.5.0",
+          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.5.0.tgz",
+          "integrity": "sha512-ZXx86srb/iYy6jG71k++wBN9P9J05UNQ5hQHQd9MtMPvcqXPx/vKU69jfHV637D00Q2gSgPk2D+jSx3l1lDW/Q==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "jest-diff": {
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.0.tgz",
+          "integrity": "sha512-IH09rKsdWY8YEY7ii2BHlSq59oXyF2pK3GoK+hOK9eD/x6009eNB5Jv1shLMKgxekodPzLlV7eZP1jPFQYds8w==",
+          "dev": true,
+          "requires": {
+            "chalk": "^4.0.0",
+            "diff-sequences": "^26.5.0",
+            "jest-get-type": "^26.3.0",
+            "pretty-format": "^26.6.0"
+          }
+        },
+        "jest-get-type": {
+          "version": "26.3.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+          "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^26.6.0",
+            "ansi-regex": "^5.0.0",
+            "ansi-styles": "^4.0.0",
+            "react-is": "^16.12.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "@types/jest-specific-snapshot": {
@@ -7881,9 +7996,9 @@
       }
     },
     "@types/node": {
-      "version": "14.11.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.10.tgz",
-      "integrity": "sha512-yV1nWZPlMFpoXyoknm4S56y2nlTAuFYaJuQtYRAOU7xA/FJ9RY0Xm7QOkaYMMmr8ESdHIuUb6oQgR/0+2NqlyA=="
+      "version": "14.14.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.0.tgz",
+      "integrity": "sha512-BfbIHP9IapdupGhq/hc+jT5dyiBVZ2DdeC5WwJWQWDb0GijQlzUFAeIQn/2GtvZcd2HVUU7An8felIICFTC2qg=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -8254,13 +8369,13 @@
       "integrity": "sha512-wmk0xQI6Yy7Fs/il4EpOcflG4uonUpYGqvZARESLc2oy4u69fkatFLbJOeW4Q6awO15P4rduAe6xkwHevpXcUQ=="
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.4.1.tgz",
-      "integrity": "sha512-O+8Utz8pb4OmcA+Nfi5THQnQpHSD2sDUNw9AxNHpuYOo326HZTtG8gsfT+EAYuVrFNaLyNb2QnUNkmTRDskuRA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.5.0.tgz",
+      "integrity": "sha512-mjb/gwNcmDKNt+6mb7Aj/TjKzIJjOPcoCJpjBQC9ZnTRnBt1p4q5dJSSmIqAtsZ/Pff5N+hJlbiPc5bl6QN4OQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "4.4.1",
-        "@typescript-eslint/scope-manager": "4.4.1",
+        "@typescript-eslint/experimental-utils": "4.5.0",
+        "@typescript-eslint/scope-manager": "4.5.0",
         "debug": "^4.1.1",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
@@ -8292,28 +8407,28 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.4.1.tgz",
-      "integrity": "sha512-Nt4EVlb1mqExW9cWhpV6pd1a3DkUbX9DeyYsdoeziKOpIJ04S2KMVDO+SEidsXRH/XHDpbzXykKcMTLdTXH6cQ==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.5.0.tgz",
+      "integrity": "sha512-bW9IpSAKYvkqDGRZzayBXIgPsj2xmmVHLJ+flGSoN0fF98pGoKFhbunIol0VF2Crka7z984EEhFi623Rl7e6gg==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/scope-manager": "4.4.1",
-        "@typescript-eslint/types": "4.4.1",
-        "@typescript-eslint/typescript-estree": "4.4.1",
+        "@typescript-eslint/scope-manager": "4.5.0",
+        "@typescript-eslint/types": "4.5.0",
+        "@typescript-eslint/typescript-estree": "4.5.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.4.1.tgz",
-      "integrity": "sha512-S0fuX5lDku28Au9REYUsV+hdJpW/rNW0gWlc4SXzF/kdrRaAVX9YCxKpziH7djeWT/HFAjLZcnY7NJD8xTeUEg==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.5.0.tgz",
+      "integrity": "sha512-xb+gmyhQcnDWe+5+xxaQk5iCw6KqXd8VQxGiTeELTMoYeRjpocZYYRP1gFVM2C8Yl0SpUvLa1lhprwqZ00w3Iw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "4.4.1",
-        "@typescript-eslint/types": "4.4.1",
-        "@typescript-eslint/typescript-estree": "4.4.1",
+        "@typescript-eslint/scope-manager": "4.5.0",
+        "@typescript-eslint/types": "4.5.0",
+        "@typescript-eslint/typescript-estree": "4.5.0",
         "debug": "^4.1.1"
       },
       "dependencies": {
@@ -8335,29 +8450,29 @@
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.4.1.tgz",
-      "integrity": "sha512-2oD/ZqD4Gj41UdFeWZxegH3cVEEH/Z6Bhr/XvwTtGv66737XkR4C9IqEkebCuqArqBJQSj4AgNHHiN1okzD/wQ==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.5.0.tgz",
+      "integrity": "sha512-C0cEO0cTMPJ/w4RA/KVe4LFFkkSh9VHoFzKmyaaDWAnPYIEzVCtJ+Un8GZoJhcvq+mPFXEsXa01lcZDHDG6Www==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.4.1",
-        "@typescript-eslint/visitor-keys": "4.4.1"
+        "@typescript-eslint/types": "4.5.0",
+        "@typescript-eslint/visitor-keys": "4.5.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.4.1.tgz",
-      "integrity": "sha512-KNDfH2bCyax5db+KKIZT4rfA8rEk5N0EJ8P0T5AJjo5xrV26UAzaiqoJCxeaibqc0c/IvZxp7v2g3difn2Pn3w==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.5.0.tgz",
+      "integrity": "sha512-n2uQoXnyWNk0Les9MtF0gCK3JiWd987JQi97dMSxBOzVoLZXCNtxFckVqt1h8xuI1ix01t+iMY4h4rFMj/303g==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.4.1.tgz",
-      "integrity": "sha512-wP/V7ScKzgSdtcY1a0pZYBoCxrCstLrgRQ2O9MmCUZDtmgxCO/TCqOTGRVwpP4/2hVfqMz/Vw1ZYrG8cVxvN3g==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.5.0.tgz",
+      "integrity": "sha512-gN1mffq3zwRAjlYWzb5DanarOPdajQwx5MEWkWCk0XvqC8JpafDTeioDoow2L4CA/RkYZu7xEsGZRhqrTsAG8w==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.4.1",
-        "@typescript-eslint/visitor-keys": "4.4.1",
+        "@typescript-eslint/types": "4.5.0",
+        "@typescript-eslint/visitor-keys": "4.5.0",
         "debug": "^4.1.1",
         "globby": "^11.0.1",
         "is-glob": "^4.0.1",
@@ -8390,12 +8505,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.4.1.tgz",
-      "integrity": "sha512-H2JMWhLaJNeaylSnMSQFEhT/S/FsJbebQALmoJxMPMxLtlVAMy2uJP/Z543n9IizhjRayLSqoInehCeNW9rWcw==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.5.0.tgz",
+      "integrity": "sha512-UHq4FSa55NDZqscRU//O5ROFhHa9Hqn9KWTEvJGTArtTQp5GKv9Zqf6d/Q3YXXcFv4woyBml7fJQlQ+OuqRcHA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.4.1",
+        "@typescript-eslint/types": "4.5.0",
         "eslint-visitor-keys": "^2.0.0"
       },
       "dependencies": {
@@ -9691,13 +9806,13 @@
       "dev": true
     },
     "babel-jest": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.5.2.tgz",
-      "integrity": "sha512-U3KvymF3SczA3vOL/cgiUFOznfMET+XDIXiWnoJV45siAp2pLMG8i2+/MGZlAC3f/F6Q40LR4M4qDrWZ9wkK8A==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.0.tgz",
+      "integrity": "sha512-JI66yILI7stzjHccAoQtRKcUwJrJb4oMIxLTirL3GdAjGpaUBQSjZDFi9LsPkN4gftsS4R2AThAJwOjJxadwbg==",
       "dev": true,
       "requires": {
-        "@jest/transform": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/transform": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/babel__core": "^7.1.7",
         "babel-plugin-istanbul": "^6.0.0",
         "babel-preset-jest": "^26.5.0",
@@ -9707,21 +9822,21 @@
       },
       "dependencies": {
         "@jest/transform": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.5.2.tgz",
-          "integrity": "sha512-AUNjvexh+APhhmS8S+KboPz+D3pCxPvEAGduffaAJYxIFxGi/ytZQkrqcKDUU0ERBAo5R7087fyOYr2oms1seg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.0.tgz",
+          "integrity": "sha512-NUNA1NMCyVV9g5NIQF1jzW7QutQhB/HAocteCiUyH0VhmLXnGMTfPYQu1G6IjPk+k1SWdh2PD+Zs1vMqbavWzg==",
           "dev": true,
           "requires": {
             "@babel/core": "^7.1.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "babel-plugin-istanbul": "^6.0.0",
             "chalk": "^4.0.0",
             "convert-source-map": "^1.4.0",
             "fast-json-stable-stringify": "^2.0.0",
             "graceful-fs": "^4.2.4",
-            "jest-haste-map": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
             "jest-regex-util": "^26.0.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "micromatch": "^4.0.2",
             "pirates": "^4.0.1",
             "slash": "^3.0.0",
@@ -9730,9 +9845,9 @@
           }
         },
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -9809,12 +9924,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -9823,7 +9938,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -9831,12 +9946,12 @@
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -10154,9 +10269,9 @@
       }
     },
     "babel-plugin-remove-export-keywords": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/babel-plugin-remove-export-keywords/-/babel-plugin-remove-export-keywords-1.6.18.tgz",
-      "integrity": "sha512-uX5ni5zoCqBzOMNDlgCaf4apVyqBlzDbOexG7qOhuoXUKHU5v1G0gmGaV5Wvs4cAOtyL1294h3rBEWbj9sMeCg=="
+      "version": "1.6.19",
+      "resolved": "https://registry.npmjs.org/babel-plugin-remove-export-keywords/-/babel-plugin-remove-export-keywords-1.6.19.tgz",
+      "integrity": "sha512-C0teIRyT8w5eCc7LCb5YNFudnyNhkzgv3voqDiulJQEbSEKHDqmziExpYwgoCaY8wCKYIUSYv7OklzEE6sX/iA=="
     },
     "babel-plugin-remove-graphql-queries": {
       "version": "2.9.20",
@@ -14529,9 +14644,9 @@
       }
     },
     "emittery": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.1.tgz",
-      "integrity": "sha512-d34LN4L6h18Bzz9xpoku2nPwKxCPlPMr3EEKTkoEBi+1/+b0lcRkRJ1UVyyZaKNeqGR3swcGl6s390DNO4YVgQ==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
+      "integrity": "sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==",
       "dev": true
     },
     "emoji-regex": {
@@ -15617,9 +15732,9 @@
       },
       "dependencies": {
         "emoji-regex": {
-          "version": "9.1.1",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.1.1.tgz",
-          "integrity": "sha512-AaWyDiNO9rbtMIcGl7tdxMcNu8SOLaDLxmQEFT5JhgKufOJzPPkYmgN2QwqTgw4doWMZZQttC6sUWVQjb+1VdA=="
+          "version": "9.2.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.0.tgz",
+          "integrity": "sha512-DNc3KFPK18bPdElMJnf/Pkv5TXhxFU3YFDEuGLDRtPmV4rkmCjBkCSEp22u6rBHdSN9Vlp/GK7k98prmE1Jgug=="
         },
         "jsx-ast-utils": {
           "version": "2.4.1",
@@ -15679,9 +15794,9 @@
       "dev": true
     },
     "eslint-plugin-react": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.4.tgz",
-      "integrity": "sha512-uHeQ8A0hg0ltNDXFu3qSfFqTNPXm1XithH6/SY318UX76CMj7Q599qWpgmMhVQyvhq36pm7qvoN3pb6/3jsTFg==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz",
+      "integrity": "sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==",
       "requires": {
         "array-includes": "^3.1.1",
         "array.prototype.flatmap": "^1.2.3",
@@ -15692,7 +15807,7 @@
         "object.fromentries": "^2.0.2",
         "object.values": "^1.1.1",
         "prop-types": "^15.7.2",
-        "resolve": "^1.17.0",
+        "resolve": "^1.18.1",
         "string.prototype.matchall": "^4.0.2"
       },
       "dependencies": {
@@ -15703,13 +15818,22 @@
           "requires": {
             "esutils": "^2.0.2"
           }
+        },
+        "resolve": {
+          "version": "1.18.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
+          "integrity": "sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==",
+          "requires": {
+            "is-core-module": "^2.0.0",
+            "path-parse": "^1.0.6"
+          }
         }
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.2.tgz",
-      "integrity": "sha512-ykUeqkGyUGgwTtk78C0o8UG2fzwmgJ0qxBGPp2WqRKsTwcLuVf01kTDRAtOsd4u6whX2XOC8749n2vPydP82fg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
+      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
       "dev": true
     },
     "eslint-plugin-security": {
@@ -17557,9 +17681,9 @@
       "dev": true
     },
     "gatsby": {
-      "version": "2.24.80",
-      "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.24.80.tgz",
-      "integrity": "sha512-lzPDcG8H3fb9Z+vC5Twyt29HDvcWZz8MLnsqs6LFKQNGqqOcu7yEEZ3WOTIhC24OXhLCozZqR5gr36CmQDu9DQ==",
+      "version": "2.24.84",
+      "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.24.84.tgz",
+      "integrity": "sha512-joA11EK+GiVDivsgeMPfbRbgh9h1Ls29h2go5I/mLjzOUpiX5Rkjpv6mD56zWuhy2ZztHB366jhwM4OIQ9wsqw==",
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/core": "^7.11.6",
@@ -17627,15 +17751,15 @@
         "find-cache-dir": "^3.3.1",
         "fs-exists-cached": "1.0.0",
         "fs-extra": "^8.1.0",
-        "gatsby-cli": "^2.12.109",
+        "gatsby-cli": "^2.12.111",
         "gatsby-core-utils": "^1.3.23",
         "gatsby-graphiql-explorer": "^0.4.15",
         "gatsby-legacy-polyfills": "^0.0.5",
-        "gatsby-link": "^2.4.15",
+        "gatsby-link": "^2.4.16",
         "gatsby-plugin-page-creator": "^2.3.33",
-        "gatsby-plugin-typescript": "^2.4.22",
-        "gatsby-plugin-utils": "^0.2.34",
-        "gatsby-react-router-scroll": "^3.0.14",
+        "gatsby-plugin-typescript": "^2.4.24",
+        "gatsby-plugin-utils": "^0.2.38",
+        "gatsby-react-router-scroll": "^3.0.15",
         "gatsby-telemetry": "^1.3.38",
         "glob": "^7.1.6",
         "got": "8.3.2",
@@ -17960,9 +18084,9 @@
           }
         },
         "gatsby-cli": {
-          "version": "2.12.109",
-          "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.12.109.tgz",
-          "integrity": "sha512-f+cdUKuPzxYi7LXF856ma3x51vD8qqzciap88gEZmHqlgqPZMhWIjT7Xr8f8ILH0R0/LjUGviKSlzA8AX6zmCw==",
+          "version": "2.12.111",
+          "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.12.111.tgz",
+          "integrity": "sha512-Ho6k2lEw/u7YGdZWLBttW/qisvmGhG4iJHexV0BM0GaYhhwaH1iz8Mx1obedUZ19YoEtsyLwc4jAKueqnDVEzg==",
           "requires": {
             "@babel/code-frame": "^7.10.4",
             "@hapi/joi": "^15.1.1",
@@ -17978,7 +18102,7 @@
             "fs-exists-cached": "^1.0.0",
             "fs-extra": "^8.1.0",
             "gatsby-core-utils": "^1.3.23",
-            "gatsby-recipes": "^0.2.31",
+            "gatsby-recipes": "^0.2.33",
             "gatsby-telemetry": "^1.3.38",
             "hosted-git-info": "^3.0.6",
             "ink": "^2.7.1",
@@ -18413,9 +18537,9 @@
       },
       "dependencies": {
         "@mdx-js/react": {
-          "version": "1.6.18",
-          "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.18.tgz",
-          "integrity": "sha512-aFHsZVu7r9WamlP+WO/lyvHHZAubkQjkcRYlvS7fQElypfJvjKdHevjC3xiqlsQpasx/4KqRMoEIb++wNtd+6w=="
+          "version": "1.6.19",
+          "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.19.tgz",
+          "integrity": "sha512-RS37Tagqyp2R0XFPoUZeSbZC5uJQRPhqOHWeT1LEwxESjMWb3VORHz7E827ldeQr3UW6VEQEyq/THegu+bLj6A=="
         }
       }
     },
@@ -18428,12 +18552,12 @@
       }
     },
     "gatsby-link": {
-      "version": "2.4.15",
-      "resolved": "https://registry.npmjs.org/gatsby-link/-/gatsby-link-2.4.15.tgz",
-      "integrity": "sha512-F8C1+qNlEp8lEvfENNh9YSh2X+cbNVDL5HdX68DlQSbit/X6fUx6uWn6iqU9xNCDlga4IvY64bOlYdgOH3PlTA==",
+      "version": "2.4.16",
+      "resolved": "https://registry.npmjs.org/gatsby-link/-/gatsby-link-2.4.16.tgz",
+      "integrity": "sha512-wsccuSOIAjhRDQRKmIj2+FUNR94QEBnELki0giN+lLKvWB3EO8mXjTIccXC0bMpe8VQcBlv3DHpUo72EAkkFAg==",
       "requires": {
         "@babel/runtime": "^7.11.2",
-        "@types/reach__router": "^1.3.3",
+        "@types/reach__router": "^1.3.6",
         "prop-types": "^15.7.2"
       }
     },
@@ -18502,9 +18626,9 @@
       }
     },
     "gatsby-plugin-sharp": {
-      "version": "2.6.42",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.6.42.tgz",
-      "integrity": "sha512-uqra+GDLEfE5Kv8Th1lkQKS6FIRwPzwipoWJBogfPLTnl0L3t+ogdEhN8p5d7G6SYoaukuGrix162mbQXqASBA==",
+      "version": "2.6.43",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.6.43.tgz",
+      "integrity": "sha512-/V5T8SzS/GgpQEgp34blLwzwpc+dxJJVPRXGBOZtKdcTDRAfCYuY2IuRf5FJa65lSuPRQmHdG6AoQIka/0xnWA==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "async": "^3.2.0",
@@ -18690,9 +18814,9 @@
       "integrity": "sha512-54REIMe79qFBAwpcnWHBkvEE9CKoEVkefF9rDXai0k642r91SZ4UeWFuAmsegPG+sPVub7tHfHu/2LVXK1I9kg=="
     },
     "gatsby-plugin-typescript": {
-      "version": "2.4.22",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.22.tgz",
-      "integrity": "sha512-kcFd5oz0M5mFXp/DtEtQ6cdNdbt0+/B+B6OdhKW/FRyVn+WWKbMDzqY8pnspTr2ACC+8iNk/2I7HZeo1ykKUVA==",
+      "version": "2.4.24",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.24.tgz",
+      "integrity": "sha512-BVfLYMgPafzY+bLQs7GaMLhZfAeEQPTcc36RhPL4H8/goun159Vp+KEVR7KXd3xi/a7ZgWX8YhnrcfLDbwCuwA==",
       "requires": {
         "@babel/core": "^7.11.6",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
@@ -18704,9 +18828,9 @@
       }
     },
     "gatsby-plugin-utils": {
-      "version": "0.2.34",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.2.34.tgz",
-      "integrity": "sha512-2tDO1d4w4A2BH9Jp3K8t3xN0FLtXvR1g9GMrVxifwgxWadXZC2n2WROzSJtof5C5COQMcijMlEkdjuzGv8u8uQ==",
+      "version": "0.2.38",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.2.38.tgz",
+      "integrity": "sha512-honEdQSMwYO1DzJ6h+El2YfFollNzTHTs1rsR5UjBDXOgnBXL3VEWXhcMTGqSMmoPFqiqvQOzq6CKF7zHlytyA==",
       "requires": {
         "joi": "^17.2.1"
       }
@@ -18720,17 +18844,17 @@
       }
     },
     "gatsby-react-router-scroll": {
-      "version": "3.0.14",
-      "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-3.0.14.tgz",
-      "integrity": "sha512-cOpjgHUjeugcgIljrf6SBJYiwUOyZuMkRozEnjVI5VZvEsYbezgHk3zzQfpda0OO9qKOKZpl1fR6ISFDsptR9Q==",
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-3.0.15.tgz",
+      "integrity": "sha512-7tmpFuRZhP3QnONC4bMmV9lA032J2aYms5MkcAUVP6EGY3ZCNqbod+EFBECJS1R3tkqhtQLKWmooFSGxPulxog==",
       "requires": {
         "@babel/runtime": "^7.11.2"
       }
     },
     "gatsby-recipes": {
-      "version": "0.2.31",
-      "resolved": "https://registry.npmjs.org/gatsby-recipes/-/gatsby-recipes-0.2.31.tgz",
-      "integrity": "sha512-5sF1U+VbGpuHE4E+CdODraAZmzQS8DbHDWP/rpNYBzFalLdFs0HPngg8zb7TbzDY0p6b5umS32OF/2P9PAuVJg==",
+      "version": "0.2.33",
+      "resolved": "https://registry.npmjs.org/gatsby-recipes/-/gatsby-recipes-0.2.33.tgz",
+      "integrity": "sha512-ZuDSiwuqEPE0RZgUgEb+GyjJRD3zIRTOyySgx9oXZRMsPWZS6gjs0WWV0h/JdhaWw6d9oA0Q3vtssJsv/rHIcw==",
       "requires": {
         "@babel/core": "^7.11.6",
         "@babel/generator": "^7.11.6",
@@ -19072,18 +19196,18 @@
       }
     },
     "gatsby-transformer-json": {
-      "version": "2.4.14",
-      "resolved": "https://registry.npmjs.org/gatsby-transformer-json/-/gatsby-transformer-json-2.4.14.tgz",
-      "integrity": "sha512-rAyP2i3bKRnKPCS0SpsnwBjMeWJ+VcgVrpGwedsI3DjpnGSv2gBEKeF26S4G/DR/lkT8gU5GtEDUcYmjtrjyaw==",
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-json/-/gatsby-transformer-json-2.4.15.tgz",
+      "integrity": "sha512-3RIulIsySP9AArlwwjrNoGcdo8xdS//zpP+5xD1f7dNu93UrlwgLRI4SIt9BpTv6WCZmM7xUxOlYP/U1ArYGsw==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "bluebird": "^3.7.2"
       }
     },
     "gatsby-transformer-remark": {
-      "version": "2.8.42",
-      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.42.tgz",
-      "integrity": "sha512-y45v3mhgPVSe+IydZPAD0gaG6x9oSJzrDuLlTXqb76ecKTrOp1m0Z2lawmtotWJrsCsRVEBYV0YiwdcuxXBh/Q==",
+      "version": "2.8.45",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-remark/-/gatsby-transformer-remark-2.8.45.tgz",
+      "integrity": "sha512-jIsLIpebLISB+TA3E4xykHFxYvLZsg/cRrv3TyzuLNeVYM+wJFAby2XdffE/xRzrCrhvXmTlT4NTg/oq79JA4w==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "bluebird": "^3.7.2",
@@ -19365,9 +19489,9 @@
       }
     },
     "gatsby-transformer-sharp": {
-      "version": "2.5.18",
-      "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.5.18.tgz",
-      "integrity": "sha512-TwcSoO4XRYB8e9gvQyjQgwCYfGTsPuGKQdY+LUXDKpoAnwICmf7CCbOD2eBx8iFibfXSGlyEKpWd8EaWxM0QCw==",
+      "version": "2.5.19",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.5.19.tgz",
+      "integrity": "sha512-C1BIiMPWgCqB5VrxFJ1ZkREbjJUDPkbjtzora48y+JzRplXl29WJbDOkgEH4guL2xMrrRGoMB5ykg53beO2ZXg==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "bluebird": "^3.7.2",
@@ -19787,19 +19911,19 @@
       }
     },
     "graphql-playground-html": {
-      "version": "1.6.28",
-      "resolved": "https://registry.npmjs.org/graphql-playground-html/-/graphql-playground-html-1.6.28.tgz",
-      "integrity": "sha512-22uwTEGjZg0h9rYcM7WspcMPVsixAE8m56tNzwjGr2Y3pNY7OctbsMkJ3EPtPcL6ZdUpzsa4rMgYR54BGmTrpQ==",
+      "version": "1.6.29",
+      "resolved": "https://registry.npmjs.org/graphql-playground-html/-/graphql-playground-html-1.6.29.tgz",
+      "integrity": "sha512-fbF/zZKuw2sdfKp8gjTORJ/I9xBsqeEYRseWxBzuR15NHMptRTT9414IyRCs3ognZzUDr5MDJgx97SlLZCtQyA==",
       "requires": {
         "xss": "^1.0.6"
       }
     },
     "graphql-playground-middleware-express": {
-      "version": "1.7.21",
-      "resolved": "https://registry.npmjs.org/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.21.tgz",
-      "integrity": "sha512-CjPHDZqJ8ifS6v+JCyEZOEGrR8eKHWaUIUawggfUlW1xFFHCNcBhG4/S7EnSUspaUldSnL/cFcBp4yLhYkG53A==",
+      "version": "1.7.22",
+      "resolved": "https://registry.npmjs.org/graphql-playground-middleware-express/-/graphql-playground-middleware-express-1.7.22.tgz",
+      "integrity": "sha512-PJLiCxLmN6Dp+dHGyHU92m9y3hB/RAkcUBWcqYl2fiP+EbpDDgNfElrsVzW60MhJe+LTV1PFqiInH2d3KNvlCQ==",
       "requires": {
-        "graphql-playground-html": "^1.6.28"
+        "graphql-playground-html": "^1.6.29"
       }
     },
     "graphql-subscriptions": {
@@ -21418,6 +21542,14 @@
         "rgba-regex": "^1.0.0"
       }
     },
+    "is-core-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.0.0.tgz",
+      "integrity": "sha512-jq1AH6C8MuteOoBPwkxHafmByhL9j5q4OaPGdbuD+ZtQJVzH+i6E3BJDQcBA09k57i2Hh2yQbEG8yObZ0jdlWw==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
     "is-data-descriptor": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
@@ -22023,20 +22155,20 @@
       }
     },
     "jest": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-26.5.3.tgz",
-      "integrity": "sha512-uJi3FuVSLmkZrWvaDyaVTZGLL8WcfynbRnFXyAHuEtYiSZ+ijDDIMOw1ytmftK+y/+OdAtsG9QrtbF7WIBmOyA==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-26.6.0.tgz",
+      "integrity": "sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA==",
       "dev": true,
       "requires": {
-        "@jest/core": "^26.5.3",
+        "@jest/core": "^26.6.0",
         "import-local": "^3.0.2",
-        "jest-cli": "^26.5.3"
+        "jest-cli": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -22145,33 +22277,33 @@
           "dev": true
         },
         "jest-cli": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.5.3.tgz",
-          "integrity": "sha512-HkbSvtugpSXBf2660v9FrNVUgxvPkssN8CRGj9gPM8PLhnaa6zziFiCEKQAkQS4uRzseww45o0TR+l6KeRYV9A==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.0.tgz",
+          "integrity": "sha512-lJAMZGpmML+y3Kfln6L5DGRTfKGQ+n1JDM1RQstojSLUhe/EaXWR8vmcx70v4CyJKvFZs7c/0QDkPX5ra/aDew==",
           "dev": true,
           "requires": {
-            "@jest/core": "^26.5.3",
-            "@jest/test-result": "^26.5.2",
-            "@jest/types": "^26.5.2",
+            "@jest/core": "^26.6.0",
+            "@jest/test-result": "^26.6.0",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "exit": "^0.1.2",
             "graceful-fs": "^4.2.4",
             "import-local": "^3.0.2",
             "is-ci": "^2.0.0",
-            "jest-config": "^26.5.3",
-            "jest-util": "^26.5.2",
-            "jest-validate": "^26.5.3",
+            "jest-config": "^26.6.0",
+            "jest-util": "^26.6.0",
+            "jest-validate": "^26.6.0",
             "prompts": "^2.0.1",
             "yargs": "^15.4.1"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -22284,20 +22416,20 @@
       }
     },
     "jest-changed-files": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.5.2.tgz",
-      "integrity": "sha512-qSmssmiIdvM5BWVtyK/nqVpN3spR5YyvkvPqz1x3BR1bwIxsWmU/MGwLoCrPNLbkG2ASAKfvmJpOduEApBPh2w==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.0.tgz",
+      "integrity": "sha512-k8PZzlp3cRWDe0fDc/pYs+c4w36+hiWXe1PpW/pW1UJmu1TNTAcQfZUrVYleij+uEqlY6z4mPv7Iff3kY0o5SQ==",
       "dev": true,
       "requires": {
-        "@jest/types": "^26.5.2",
+        "@jest/types": "^26.6.0",
         "execa": "^4.0.0",
         "throat": "^5.0.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -22368,35 +22500,35 @@
       }
     },
     "jest-config": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-26.5.3.tgz",
-      "integrity": "sha512-NVhZiIuN0GQM6b6as4CI5FSCyXKxdrx5ACMCcv/7Pf+TeCajJhJc+6dwgdAVPyerUFB9pRBIz3bE7clSrRge/w==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-26.6.0.tgz",
+      "integrity": "sha512-RCR1Kf7MGJ5waVCvrj/k3nCAJKquWZlzs8rkskzj0KlG392hNBOaYd5FQ4cCac08j6pwfIDOwNvMcy0/FqguJg==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.1.0",
-        "@jest/test-sequencer": "^26.5.3",
-        "@jest/types": "^26.5.2",
-        "babel-jest": "^26.5.2",
+        "@jest/test-sequencer": "^26.6.0",
+        "@jest/types": "^26.6.0",
+        "babel-jest": "^26.6.0",
         "chalk": "^4.0.0",
         "deepmerge": "^4.2.2",
         "glob": "^7.1.1",
         "graceful-fs": "^4.2.4",
-        "jest-environment-jsdom": "^26.5.2",
-        "jest-environment-node": "^26.5.2",
+        "jest-environment-jsdom": "^26.6.0",
+        "jest-environment-node": "^26.6.0",
         "jest-get-type": "^26.3.0",
-        "jest-jasmine2": "^26.5.3",
+        "jest-jasmine2": "^26.6.0",
         "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.5.2",
-        "jest-util": "^26.5.2",
-        "jest-validate": "^26.5.3",
+        "jest-resolve": "^26.6.0",
+        "jest-util": "^26.6.0",
+        "jest-validate": "^26.6.0",
         "micromatch": "^4.0.2",
-        "pretty-format": "^26.5.2"
+        "pretty-format": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -22478,28 +22610,28 @@
           "dev": true
         },
         "jest-resolve": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz",
-          "integrity": "sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz",
+          "integrity": "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
             "jest-pnp-resolver": "^1.2.2",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "read-pkg-up": "^7.0.1",
             "resolve": "^1.17.0",
             "slash": "^3.0.0"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -22532,12 +22664,12 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -22660,22 +22792,22 @@
       }
     },
     "jest-each": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-26.5.2.tgz",
-      "integrity": "sha512-w7D9FNe0m2D3yZ0Drj9CLkyF/mGhmBSULMQTypzAKR746xXnjUrK8GUJdlLTWUF6dd0ks3MtvGP7/xNFr9Aphg==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-26.6.0.tgz",
+      "integrity": "sha512-7LzSNwNviYnm4FWK46itIE03NqD/8O8/7tVQ5rwTdTNrmPMQoQ1Z7hEFQ1uzRReluOFislpurpnQ0QsclSiDkA==",
       "dev": true,
       "requires": {
-        "@jest/types": "^26.5.2",
+        "@jest/types": "^26.6.0",
         "chalk": "^4.0.0",
         "jest-get-type": "^26.3.0",
-        "jest-util": "^26.5.2",
-        "pretty-format": "^26.5.2"
+        "jest-util": "^26.6.0",
+        "pretty-format": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -22747,12 +22879,12 @@
           "dev": true
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -22761,12 +22893,12 @@
           }
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -22784,24 +22916,24 @@
       }
     },
     "jest-environment-jsdom": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.5.2.tgz",
-      "integrity": "sha512-fWZPx0bluJaTQ36+PmRpvUtUlUFlGGBNyGX1SN3dLUHHMcQ4WseNEzcGGKOw4U5towXgxI4qDoI3vwR18H0RTw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.6.0.tgz",
+      "integrity": "sha512-bXO9IG7a3YlyiHxwfKF+OWoTA+GIw4FrD+Y0pb6CC+nKs5JuSRZmR2ovEX6PWo6KY42ka3JoZOp3KEnXiFPPCg==",
       "dev": true,
       "requires": {
-        "@jest/environment": "^26.5.2",
-        "@jest/fake-timers": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/environment": "^26.6.0",
+        "@jest/fake-timers": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
-        "jest-mock": "^26.5.2",
-        "jest-util": "^26.5.2",
+        "jest-mock": "^26.6.0",
+        "jest-util": "^26.6.0",
         "jsdom": "^16.4.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -22861,12 +22993,12 @@
           "dev": true
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -22886,23 +23018,23 @@
       }
     },
     "jest-environment-node": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.5.2.tgz",
-      "integrity": "sha512-YHjnDsf/GKFCYMGF1V+6HF7jhY1fcLfLNBDjhAOvFGvt6d8vXvNdJGVM7uTZ2VO/TuIyEFhPGaXMX5j3h7fsrA==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.6.0.tgz",
+      "integrity": "sha512-kWU6ZD1h6fs7sIl6ufuK0sXW/3d6WLaj48iow0NxhgU6eY89d9K+0MVmE0cRcVlh53yMyxTK6b+TnhLOnlGp/A==",
       "dev": true,
       "requires": {
-        "@jest/environment": "^26.5.2",
-        "@jest/fake-timers": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/environment": "^26.6.0",
+        "@jest/fake-timers": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
-        "jest-mock": "^26.5.2",
-        "jest-util": "^26.5.2"
+        "jest-mock": "^26.6.0",
+        "jest-util": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -22962,12 +23094,12 @@
           "dev": true
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -23115,35 +23247,35 @@
       }
     },
     "jest-jasmine2": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.5.3.tgz",
-      "integrity": "sha512-nFlZOpnGlNc7y/+UkkeHnvbOM+rLz4wB1AimgI9QhtnqSZte0wYjbAm8hf7TCwXlXgDwZxAXo6z0a2Wzn9FoOg==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.6.0.tgz",
+      "integrity": "sha512-2E3c+0A9y2OIK5caw5qlcm3b4doaf8FSfXKTX3xqKTUJoR4zXh0xvERBNWxZP9xMNXEi/2Z3LVsZpR2hROgixA==",
       "dev": true,
       "requires": {
         "@babel/traverse": "^7.1.0",
-        "@jest/environment": "^26.5.2",
+        "@jest/environment": "^26.6.0",
         "@jest/source-map": "^26.5.0",
-        "@jest/test-result": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/test-result": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
         "chalk": "^4.0.0",
         "co": "^4.6.0",
-        "expect": "^26.5.3",
+        "expect": "^26.6.0",
         "is-generator-fn": "^2.0.0",
-        "jest-each": "^26.5.2",
-        "jest-matcher-utils": "^26.5.2",
-        "jest-message-util": "^26.5.2",
-        "jest-runtime": "^26.5.3",
-        "jest-snapshot": "^26.5.3",
-        "jest-util": "^26.5.2",
-        "pretty-format": "^26.5.2",
+        "jest-each": "^26.6.0",
+        "jest-matcher-utils": "^26.6.0",
+        "jest-message-util": "^26.6.0",
+        "jest-runtime": "^26.6.0",
+        "jest-snapshot": "^26.6.0",
+        "jest-util": "^26.6.0",
+        "pretty-format": "^26.6.0",
         "throat": "^5.0.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -23219,16 +23351,16 @@
           "dev": true
         },
         "expect": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-26.5.3.tgz",
-          "integrity": "sha512-kkpOhGRWGOr+TEFUnYAjfGvv35bfP+OlPtqPIJpOCR9DVtv8QV+p8zG0Edqafh80fsjeE+7RBcVUq1xApnYglw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.0.tgz",
+          "integrity": "sha512-EzhbZ1tbwcaa5Ok39BI11flIMeIUSlg1QsnXOrleaMvltwHsvIQPBtL710l+ma+qDFLUgktCXK4YuQzmHdm7cg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-styles": "^4.0.0",
             "jest-get-type": "^26.3.0",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
             "jest-regex-util": "^26.0.0"
           }
         },
@@ -23256,15 +23388,15 @@
           "dev": true
         },
         "jest-diff": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.5.2.tgz",
-          "integrity": "sha512-HCSWDUGwsov5oTlGzrRM+UPJI/Dpqi9jzeV0fdRNi3Ch5bnoXhnyJMmVg2juv9081zLIy3HGPI5mcuGgXM2xRA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.0.tgz",
+          "integrity": "sha512-IH09rKsdWY8YEY7ii2BHlSq59oXyF2pK3GoK+hOK9eD/x6009eNB5Jv1shLMKgxekodPzLlV7eZP1jPFQYds8w==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
             "diff-sequences": "^26.5.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-get-type": {
@@ -23274,12 +23406,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -23288,7 +23420,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -23296,25 +23428,25 @@
           }
         },
         "jest-matcher-utils": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.5.2.tgz",
-          "integrity": "sha512-W9GO9KBIC4gIArsNqDUKsLnhivaqf8MSs6ujO/JDcPIQrmY+aasewweXVET8KdrJ6ADQaUne5UzysvF/RR7JYA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.0.tgz",
+          "integrity": "sha512-BUy/dQYb7ELGRazmK4ZVkbfPYCaNnrMtw1YljVhcKzWUxBM0xQ+bffrfnMLdRZp4wUUcT4ahaVnA3VWZtXWP9Q==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -23324,52 +23456,52 @@
           }
         },
         "jest-resolve": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz",
-          "integrity": "sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz",
+          "integrity": "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
             "jest-pnp-resolver": "^1.2.2",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "read-pkg-up": "^7.0.1",
             "resolve": "^1.17.0",
             "slash": "^3.0.0"
           }
         },
         "jest-snapshot": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.5.3.tgz",
-          "integrity": "sha512-ZgAk0Wm0JJ75WS4lGaeRfa0zIgpL0KD595+XmtwlIEMe8j4FaYHyZhP1LNOO+8fXq7HJ3hll54+sFV9X4+CGVw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.0.tgz",
+          "integrity": "sha512-mcqJZeIZqxomvBcsaiIbiEe2g7K1UxnUpTwjMoHb+DX4uFGnuZoZ6m28YOYRyCfZsdU9mmq73rNBnEH2atTR4Q==",
           "dev": true,
           "requires": {
             "@babel/types": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/babel__traverse": "^7.0.4",
             "@types/prettier": "^2.0.0",
             "chalk": "^4.0.0",
-            "expect": "^26.5.3",
+            "expect": "^26.6.0",
             "graceful-fs": "^4.2.4",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "jest-haste-map": "^26.5.2",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
-            "jest-resolve": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
+            "jest-resolve": "^26.6.0",
             "natural-compare": "^1.4.0",
-            "pretty-format": "^26.5.2",
+            "pretty-format": "^26.6.0",
             "semver": "^7.3.2"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -23413,12 +23545,12 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -23473,19 +23605,19 @@
       }
     },
     "jest-leak-detector": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.5.2.tgz",
-      "integrity": "sha512-h7ia3dLzBFItmYERaLPEtEKxy3YlcbcRSjj0XRNJgBEyODuu+3DM2o62kvIFvs3PsaYoIIv+e+nLRI61Dj1CNw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.6.0.tgz",
+      "integrity": "sha512-3oMv34imWTl1/nwKnmE/DxYo3QqHnZeF3nO6UzldppkhW0Za7OY2DYyWiamqVzwdUrjhoQkY5g+aF6Oc3alYEQ==",
       "dev": true,
       "requires": {
         "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.5.2"
+        "pretty-format": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -23557,12 +23689,12 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -23796,19 +23928,19 @@
       }
     },
     "jest-mock": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-26.5.2.tgz",
-      "integrity": "sha512-9SiU4b5PtO51v0MtJwVRqeGEroH66Bnwtq4ARdNP7jNXbpT7+ByeWNAk4NeT/uHfNSVDXEXgQo1XRuwEqS6Rdw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-26.6.0.tgz",
+      "integrity": "sha512-HsNmL8vVIn1rL1GWA21Drpy9Cl+7GImwbWz/0fkWHrUXVzuaG7rP0vwLtE+/n70Mt0U8nPkz8fxioi3SC0wqhw==",
       "dev": true,
       "requires": {
-        "@jest/types": "^26.5.2",
+        "@jest/types": "^26.6.0",
         "@types/node": "*"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -23980,20 +24112,20 @@
       }
     },
     "jest-resolve-dependencies": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.5.3.tgz",
-      "integrity": "sha512-+KMDeke/BFK+mIQ2IYSyBz010h7zQaVt4Xie6cLqUGChorx66vVeQVv4ErNoMwInnyYHi1Ud73tDS01UbXbfLQ==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.0.tgz",
+      "integrity": "sha512-4di+XUT7LwJJ8b8qFEEDQssC5+aeVjLhvRICCaS4alh/EVS9JCT1armfJ3pnSS8t4o6659WbMmKVo82H4LuUVw==",
       "dev": true,
       "requires": {
-        "@jest/types": "^26.5.2",
+        "@jest/types": "^26.6.0",
         "jest-regex-util": "^26.0.0",
-        "jest-snapshot": "^26.5.3"
+        "jest-snapshot": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -24069,16 +24201,16 @@
           "dev": true
         },
         "expect": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-26.5.3.tgz",
-          "integrity": "sha512-kkpOhGRWGOr+TEFUnYAjfGvv35bfP+OlPtqPIJpOCR9DVtv8QV+p8zG0Edqafh80fsjeE+7RBcVUq1xApnYglw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.0.tgz",
+          "integrity": "sha512-EzhbZ1tbwcaa5Ok39BI11flIMeIUSlg1QsnXOrleaMvltwHsvIQPBtL710l+ma+qDFLUgktCXK4YuQzmHdm7cg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-styles": "^4.0.0",
             "jest-get-type": "^26.3.0",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
             "jest-regex-util": "^26.0.0"
           }
         },
@@ -24106,15 +24238,15 @@
           "dev": true
         },
         "jest-diff": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.5.2.tgz",
-          "integrity": "sha512-HCSWDUGwsov5oTlGzrRM+UPJI/Dpqi9jzeV0fdRNi3Ch5bnoXhnyJMmVg2juv9081zLIy3HGPI5mcuGgXM2xRA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.0.tgz",
+          "integrity": "sha512-IH09rKsdWY8YEY7ii2BHlSq59oXyF2pK3GoK+hOK9eD/x6009eNB5Jv1shLMKgxekodPzLlV7eZP1jPFQYds8w==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
             "diff-sequences": "^26.5.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-get-type": {
@@ -24124,12 +24256,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -24138,7 +24270,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -24146,25 +24278,25 @@
           }
         },
         "jest-matcher-utils": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.5.2.tgz",
-          "integrity": "sha512-W9GO9KBIC4gIArsNqDUKsLnhivaqf8MSs6ujO/JDcPIQrmY+aasewweXVET8KdrJ6ADQaUne5UzysvF/RR7JYA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.0.tgz",
+          "integrity": "sha512-BUy/dQYb7ELGRazmK4ZVkbfPYCaNnrMtw1YljVhcKzWUxBM0xQ+bffrfnMLdRZp4wUUcT4ahaVnA3VWZtXWP9Q==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -24174,52 +24306,52 @@
           }
         },
         "jest-resolve": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz",
-          "integrity": "sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz",
+          "integrity": "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
             "jest-pnp-resolver": "^1.2.2",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "read-pkg-up": "^7.0.1",
             "resolve": "^1.17.0",
             "slash": "^3.0.0"
           }
         },
         "jest-snapshot": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.5.3.tgz",
-          "integrity": "sha512-ZgAk0Wm0JJ75WS4lGaeRfa0zIgpL0KD595+XmtwlIEMe8j4FaYHyZhP1LNOO+8fXq7HJ3hll54+sFV9X4+CGVw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.0.tgz",
+          "integrity": "sha512-mcqJZeIZqxomvBcsaiIbiEe2g7K1UxnUpTwjMoHb+DX4uFGnuZoZ6m28YOYRyCfZsdU9mmq73rNBnEH2atTR4Q==",
           "dev": true,
           "requires": {
             "@babel/types": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/babel__traverse": "^7.0.4",
             "@types/prettier": "^2.0.0",
             "chalk": "^4.0.0",
-            "expect": "^26.5.3",
+            "expect": "^26.6.0",
             "graceful-fs": "^4.2.4",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "jest-haste-map": "^26.5.2",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
-            "jest-resolve": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
+            "jest-resolve": "^26.6.0",
             "natural-compare": "^1.4.0",
-            "pretty-format": "^26.5.2",
+            "pretty-format": "^26.6.0",
             "semver": "^7.3.2"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -24263,12 +24395,12 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -24323,37 +24455,37 @@
       }
     },
     "jest-runner": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.5.3.tgz",
-      "integrity": "sha512-qproP0Pq7IIule+263W57k2+8kWCszVJTC9TJWGUz0xJBr+gNiniGXlG8rotd0XxwonD5UiJloYoSO5vbUr5FQ==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.0.tgz",
+      "integrity": "sha512-QpeN6pje8PQvFgT+wYOlzeycKd67qAvSw5FgYBiX2cTW+QTiObTzv/k09qRvT09rcCntFxUhy9VB1mgNGFLYIA==",
       "dev": true,
       "requires": {
-        "@jest/console": "^26.5.2",
-        "@jest/environment": "^26.5.2",
-        "@jest/test-result": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/console": "^26.6.0",
+        "@jest/environment": "^26.6.0",
+        "@jest/test-result": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
         "chalk": "^4.0.0",
         "emittery": "^0.7.1",
         "exit": "^0.1.2",
         "graceful-fs": "^4.2.4",
-        "jest-config": "^26.5.3",
+        "jest-config": "^26.6.0",
         "jest-docblock": "^26.0.0",
-        "jest-haste-map": "^26.5.2",
-        "jest-leak-detector": "^26.5.2",
-        "jest-message-util": "^26.5.2",
-        "jest-resolve": "^26.5.2",
-        "jest-runtime": "^26.5.3",
-        "jest-util": "^26.5.2",
+        "jest-haste-map": "^26.6.0",
+        "jest-leak-detector": "^26.6.0",
+        "jest-message-util": "^26.6.0",
+        "jest-resolve": "^26.6.0",
+        "jest-runtime": "^26.6.0",
+        "jest-util": "^26.6.0",
         "jest-worker": "^26.5.0",
         "source-map-support": "^0.5.6",
         "throat": "^5.0.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -24440,12 +24572,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -24454,7 +24586,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -24462,13 +24594,13 @@
           }
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -24478,28 +24610,28 @@
           }
         },
         "jest-resolve": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz",
-          "integrity": "sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz",
+          "integrity": "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
             "jest-pnp-resolver": "^1.2.2",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "read-pkg-up": "^7.0.1",
             "resolve": "^1.17.0",
             "slash": "^3.0.0"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -24585,55 +24717,55 @@
       }
     },
     "jest-runtime": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.5.3.tgz",
-      "integrity": "sha512-IDjalmn2s/Tc4GvUwhPHZ0iaXCdMRq5p6taW9P8RpU+FpG01O3+H8z+p3rDCQ9mbyyyviDgxy/LHPLzrIOKBkQ==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.6.0.tgz",
+      "integrity": "sha512-JEz4YGnybFvtN4NLID6lsZf0bcd8jccwjWcG5TRE3fYVnxoX1egTthPjnC4btIwWJ6QaaHhtOQ/E3AGn8iClAw==",
       "dev": true,
       "requires": {
-        "@jest/console": "^26.5.2",
-        "@jest/environment": "^26.5.2",
-        "@jest/fake-timers": "^26.5.2",
-        "@jest/globals": "^26.5.3",
+        "@jest/console": "^26.6.0",
+        "@jest/environment": "^26.6.0",
+        "@jest/fake-timers": "^26.6.0",
+        "@jest/globals": "^26.6.0",
         "@jest/source-map": "^26.5.0",
-        "@jest/test-result": "^26.5.2",
-        "@jest/transform": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/test-result": "^26.6.0",
+        "@jest/transform": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/yargs": "^15.0.0",
         "chalk": "^4.0.0",
         "collect-v8-coverage": "^1.0.0",
         "exit": "^0.1.2",
         "glob": "^7.1.3",
         "graceful-fs": "^4.2.4",
-        "jest-config": "^26.5.3",
-        "jest-haste-map": "^26.5.2",
-        "jest-message-util": "^26.5.2",
-        "jest-mock": "^26.5.2",
+        "jest-config": "^26.6.0",
+        "jest-haste-map": "^26.6.0",
+        "jest-message-util": "^26.6.0",
+        "jest-mock": "^26.6.0",
         "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.5.2",
-        "jest-snapshot": "^26.5.3",
-        "jest-util": "^26.5.2",
-        "jest-validate": "^26.5.3",
+        "jest-resolve": "^26.6.0",
+        "jest-snapshot": "^26.6.0",
+        "jest-util": "^26.6.0",
+        "jest-validate": "^26.6.0",
         "slash": "^3.0.0",
         "strip-bom": "^4.0.0",
         "yargs": "^15.4.1"
       },
       "dependencies": {
         "@jest/transform": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.5.2.tgz",
-          "integrity": "sha512-AUNjvexh+APhhmS8S+KboPz+D3pCxPvEAGduffaAJYxIFxGi/ytZQkrqcKDUU0ERBAo5R7087fyOYr2oms1seg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.0.tgz",
+          "integrity": "sha512-NUNA1NMCyVV9g5NIQF1jzW7QutQhB/HAocteCiUyH0VhmLXnGMTfPYQu1G6IjPk+k1SWdh2PD+Zs1vMqbavWzg==",
           "dev": true,
           "requires": {
             "@babel/core": "^7.1.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "babel-plugin-istanbul": "^6.0.0",
             "chalk": "^4.0.0",
             "convert-source-map": "^1.4.0",
             "fast-json-stable-stringify": "^2.0.0",
             "graceful-fs": "^4.2.4",
-            "jest-haste-map": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
             "jest-regex-util": "^26.0.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "micromatch": "^4.0.2",
             "pirates": "^4.0.1",
             "slash": "^3.0.0",
@@ -24642,9 +24774,9 @@
           }
         },
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -24737,16 +24869,16 @@
           "dev": true
         },
         "expect": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-26.5.3.tgz",
-          "integrity": "sha512-kkpOhGRWGOr+TEFUnYAjfGvv35bfP+OlPtqPIJpOCR9DVtv8QV+p8zG0Edqafh80fsjeE+7RBcVUq1xApnYglw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.0.tgz",
+          "integrity": "sha512-EzhbZ1tbwcaa5Ok39BI11flIMeIUSlg1QsnXOrleaMvltwHsvIQPBtL710l+ma+qDFLUgktCXK4YuQzmHdm7cg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-styles": "^4.0.0",
             "jest-get-type": "^26.3.0",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
             "jest-regex-util": "^26.0.0"
           }
         },
@@ -24780,15 +24912,15 @@
           "dev": true
         },
         "jest-diff": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.5.2.tgz",
-          "integrity": "sha512-HCSWDUGwsov5oTlGzrRM+UPJI/Dpqi9jzeV0fdRNi3Ch5bnoXhnyJMmVg2juv9081zLIy3HGPI5mcuGgXM2xRA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.0.tgz",
+          "integrity": "sha512-IH09rKsdWY8YEY7ii2BHlSq59oXyF2pK3GoK+hOK9eD/x6009eNB5Jv1shLMKgxekodPzLlV7eZP1jPFQYds8w==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
             "diff-sequences": "^26.5.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-get-type": {
@@ -24798,12 +24930,12 @@
           "dev": true
         },
         "jest-haste-map": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.5.2.tgz",
-          "integrity": "sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.0.tgz",
+          "integrity": "sha512-RpNqAGMR58uG9E9vWITorX2/R7he/tSbHWldX5upt1ymEcmCaXczqXxjqI6xOtRR8Ev6ZEYDfgSA5Fy7WHUL5w==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/graceful-fs": "^4.1.2",
             "@types/node": "*",
             "anymatch": "^3.0.3",
@@ -24812,7 +24944,7 @@
             "graceful-fs": "^4.2.4",
             "jest-regex-util": "^26.0.0",
             "jest-serializer": "^26.5.0",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "jest-worker": "^26.5.0",
             "micromatch": "^4.0.2",
             "sane": "^4.0.3",
@@ -24820,25 +24952,25 @@
           }
         },
         "jest-matcher-utils": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.5.2.tgz",
-          "integrity": "sha512-W9GO9KBIC4gIArsNqDUKsLnhivaqf8MSs6ujO/JDcPIQrmY+aasewweXVET8KdrJ6ADQaUne5UzysvF/RR7JYA==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.0.tgz",
+          "integrity": "sha512-BUy/dQYb7ELGRazmK4ZVkbfPYCaNnrMtw1YljVhcKzWUxBM0xQ+bffrfnMLdRZp4wUUcT4ahaVnA3VWZtXWP9Q==",
           "dev": true,
           "requires": {
             "chalk": "^4.0.0",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "pretty-format": "^26.5.2"
+            "pretty-format": "^26.6.0"
           }
         },
         "jest-message-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.5.2.tgz",
-          "integrity": "sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.0.tgz",
+          "integrity": "sha512-WPAeS38Kza29f04I0iOIQrXeiebRXjmn6cFehzI7KKJOgT0NmqYAcLgjWnIAfKs5FBmEQgje1kXab0DaLKCl2w==",
           "dev": true,
           "requires": {
             "@babel/code-frame": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/stack-utils": "^2.0.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -24848,52 +24980,52 @@
           }
         },
         "jest-resolve": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.5.2.tgz",
-          "integrity": "sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.0.tgz",
+          "integrity": "sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
             "jest-pnp-resolver": "^1.2.2",
-            "jest-util": "^26.5.2",
+            "jest-util": "^26.6.0",
             "read-pkg-up": "^7.0.1",
             "resolve": "^1.17.0",
             "slash": "^3.0.0"
           }
         },
         "jest-snapshot": {
-          "version": "26.5.3",
-          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.5.3.tgz",
-          "integrity": "sha512-ZgAk0Wm0JJ75WS4lGaeRfa0zIgpL0KD595+XmtwlIEMe8j4FaYHyZhP1LNOO+8fXq7HJ3hll54+sFV9X4+CGVw==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.0.tgz",
+          "integrity": "sha512-mcqJZeIZqxomvBcsaiIbiEe2g7K1UxnUpTwjMoHb+DX4uFGnuZoZ6m28YOYRyCfZsdU9mmq73rNBnEH2atTR4Q==",
           "dev": true,
           "requires": {
             "@babel/types": "^7.0.0",
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/babel__traverse": "^7.0.4",
             "@types/prettier": "^2.0.0",
             "chalk": "^4.0.0",
-            "expect": "^26.5.3",
+            "expect": "^26.6.0",
             "graceful-fs": "^4.2.4",
-            "jest-diff": "^26.5.2",
+            "jest-diff": "^26.6.0",
             "jest-get-type": "^26.3.0",
-            "jest-haste-map": "^26.5.2",
-            "jest-matcher-utils": "^26.5.2",
-            "jest-message-util": "^26.5.2",
-            "jest-resolve": "^26.5.2",
+            "jest-haste-map": "^26.6.0",
+            "jest-matcher-utils": "^26.6.0",
+            "jest-message-util": "^26.6.0",
+            "jest-resolve": "^26.6.0",
             "natural-compare": "^1.4.0",
-            "pretty-format": "^26.5.2",
+            "pretty-format": "^26.6.0",
             "semver": "^7.3.2"
           }
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -24937,12 +25069,12 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -25320,23 +25452,23 @@
       }
     },
     "jest-validate": {
-      "version": "26.5.3",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.5.3.tgz",
-      "integrity": "sha512-LX07qKeAtY+lsU0o3IvfDdN5KH9OulEGOMN1sFo6PnEf5/qjS1LZIwNk9blcBeW94pQUI9dLN9FlDYDWI5tyaA==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.6.0.tgz",
+      "integrity": "sha512-FKHNqvh1Pgs4NWas56gsTPmjcIoGAAzSVUCK1+g8euzuCGbmdEr8LRTtOEFjd29uMZUk0PhzmzKGlHPe6j3UWw==",
       "dev": true,
       "requires": {
-        "@jest/types": "^26.5.2",
+        "@jest/types": "^26.6.0",
         "camelcase": "^6.0.0",
         "chalk": "^4.0.0",
         "jest-get-type": "^26.3.0",
         "leven": "^3.1.0",
-        "pretty-format": "^26.5.2"
+        "pretty-format": "^26.6.0"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -25414,12 +25546,12 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.5.2.tgz",
-          "integrity": "sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.0.tgz",
+          "integrity": "sha512-Uumr9URVB7bm6SbaByXtx+zGlS+0loDkFMHP0kHahMjmfCtmFY03iqd++5v3Ld6iB5TocVXlBN/T+DXMn9d4BA==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "ansi-regex": "^5.0.0",
             "ansi-styles": "^4.0.0",
             "react-is": "^16.12.0"
@@ -25437,24 +25569,24 @@
       }
     },
     "jest-watcher": {
-      "version": "26.5.2",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.5.2.tgz",
-      "integrity": "sha512-i3m1NtWzF+FXfJ3ljLBB/WQEp4uaNhX7QcQUWMokcifFTUQBDFyUMEwk0JkJ1kopHbx7Een3KX0Q7+9koGM/Pw==",
+      "version": "26.6.0",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.6.0.tgz",
+      "integrity": "sha512-gw5BvcgPi0PKpMlNWQjUet5C5A4JOYrT7gexdP6+DR/f7mRm7wE0o1GqwPwcTsTwo0/FNf9c/kIDXTRaSAYwlw==",
       "dev": true,
       "requires": {
-        "@jest/test-result": "^26.5.2",
-        "@jest/types": "^26.5.2",
+        "@jest/test-result": "^26.6.0",
+        "@jest/types": "^26.6.0",
         "@types/node": "*",
         "ansi-escapes": "^4.2.1",
         "chalk": "^4.0.0",
-        "jest-util": "^26.5.2",
+        "jest-util": "^26.6.0",
         "string-length": "^4.0.1"
       },
       "dependencies": {
         "@jest/types": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.5.2.tgz",
-          "integrity": "sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.0.tgz",
+          "integrity": "sha512-8pDeq/JVyAYw7jBGU83v8RMYAkdrRxLG3BGnAJuqaQAUd6GWBmND2uyl+awI88+hit48suLoLjNFtR+ZXxWaYg==",
           "dev": true,
           "requires": {
             "@types/istanbul-lib-coverage": "^2.0.0",
@@ -25529,12 +25661,12 @@
           "dev": true
         },
         "jest-util": {
-          "version": "26.5.2",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.5.2.tgz",
-          "integrity": "sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==",
+          "version": "26.6.0",
+          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.0.tgz",
+          "integrity": "sha512-/cUGqcnKeZMjvTQLfJo65nBOEZ/k0RB/8usv2JpfYya05u0XvBmKkIH5o5c4nCh9DD61B1YQjMGGqh1Ha0aXdg==",
           "dev": true,
           "requires": {
-            "@jest/types": "^26.5.2",
+            "@jest/types": "^26.6.0",
             "@types/node": "*",
             "chalk": "^4.0.0",
             "graceful-fs": "^4.2.4",
@@ -25870,9 +26002,9 @@
       }
     },
     "jsx-ast-utils": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.0.0.tgz",
-      "integrity": "sha512-sPuicm6EPKYI/UnWpOatvg4pI50qaBo4dSOMGUPutmJ26ttedFKXr0It0XXPk4HKnQ/1X0st4eSS2w2jhFk9Ow==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz",
+      "integrity": "sha512-d4/UOjg+mxAWxCiF0c5UTSwyqbchkbqCvK87aBovhnh8GtysTjWmgC63tY0cJx/HzGgm9qnA147jVBdpOiQ2RA==",
       "requires": {
         "array-includes": "^3.1.1",
         "object.assign": "^4.1.1"
@@ -30104,9 +30236,9 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "pupa": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.0.1.tgz",
-      "integrity": "sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.0.tgz",
+      "integrity": "sha512-Pj8EhJzFiPwnf4dEXpuUWwH8M/Yl4vpl4cN2RX1i3R77DWvbY5ZPKni7CCKkOYxz+XKt2fieemsV+WTZbIlYzg==",
       "requires": {
         "escape-goat": "^2.0.0"
       }
@@ -34453,15 +34585,13 @@
       }
     },
     "stringify-entities": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.0.1.tgz",
-      "integrity": "sha512-Lsk3ISA2++eJYqBMPKcr/8eby1I6L0gP0NlxF8Zja6c05yr/yCYyb2c9PwXjd08Ib3If1vn1rbs1H5ZtVuOfvQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz",
+      "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==",
       "requires": {
         "character-entities-html4": "^1.0.0",
         "character-entities-legacy": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.2",
-        "is-hexadecimal": "^1.0.0"
+        "xtend": "^4.0.0"
       }
     },
     "strip-ansi": {
@@ -34795,9 +34925,9 @@
       }
     },
     "swr": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-0.3.5.tgz",
-      "integrity": "sha512-sZNed7JBEnFC42+XFWJ+aYGGVg5D3qNyISZOke3oL/gM1UNm0tsj9mbhTPT99SV9DzbKbT1NFTTRandPdhvpUA==",
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-0.3.6.tgz",
+      "integrity": "sha512-LHbX9vVQSW8Kgyr86zz2fVVKmmT13qxB61uXuUAg6NT4cGu6afzAzT2SVCGEh8pJAD2o8NTZMgclIUxIAbvk7Q==",
       "requires": {
         "dequal": "2.0.2"
       }
@@ -35768,9 +35898,9 @@
       "integrity": "sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ=="
     },
     "unist-util-visit-parents": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.0.tgz",
-      "integrity": "sha512-0g4wbluTF93npyPrp/ymd3tCDTMnP0yo2akFD2FIBAYXq/Sga3lwaU1D8OYKbtpioaI6CkDcQ6fsMnmtzt7htw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+      "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
       "requires": {
         "@types/unist": "^2.0.0",
         "unist-util-is": "^4.0.0"
@@ -36389,9 +36519,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.12.67",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.67.tgz",
-          "integrity": "sha512-R48tgL2izApf+9rYNH+3RBMbRpPeW3N8f0I9HMhggeq4UXwBDqumJ14SDs4ctTMhG11pIOduZ4z3QWGOiMc9Vg=="
+          "version": "12.12.69",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.69.tgz",
+          "integrity": "sha512-2F2VQRSFmzqgUEXw75L51MgnnZqc6bKWVSUPfrDPzp6mzGGibeVwyQcpvZvBr5RnsoMRHmC8EcBQiobSeqeJxg=="
         }
       }
     },
@@ -36589,9 +36719,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.12.67",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.67.tgz",
-          "integrity": "sha512-R48tgL2izApf+9rYNH+3RBMbRpPeW3N8f0I9HMhggeq4UXwBDqumJ14SDs4ctTMhG11pIOduZ4z3QWGOiMc9Vg=="
+          "version": "12.12.69",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.69.tgz",
+          "integrity": "sha512-2F2VQRSFmzqgUEXw75L51MgnnZqc6bKWVSUPfrDPzp6mzGGibeVwyQcpvZvBr5RnsoMRHmC8EcBQiobSeqeJxg=="
         }
       }
     },
diff --git a/package.json b/package.json
index dadcce34f..7feddc732 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.6.7",
-    "@oceanprotocol/react": "^0.2.2",
+    "@oceanprotocol/lib": "^0.7.0",
+    "@oceanprotocol/react": "^0.3.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",
@@ -40,19 +40,19 @@
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^6.1.0",
     "formik": "^2.2.0",
-    "gatsby": "^2.24.80",
+    "gatsby": "^2.24.84",
     "gatsby-image": "^2.4.21",
     "gatsby-plugin-manifest": "^2.4.35",
     "gatsby-plugin-react-helmet": "^3.3.14",
     "gatsby-plugin-remove-trailing-slashes": "^2.3.13",
-    "gatsby-plugin-sharp": "^2.6.42",
+    "gatsby-plugin-sharp": "^2.6.43",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-plugin-webpack-size": "^1.0.0",
     "gatsby-source-filesystem": "^2.3.35",
     "gatsby-source-graphql": "^2.7.6",
-    "gatsby-transformer-json": "^2.4.14",
-    "gatsby-transformer-remark": "^2.8.42",
-    "gatsby-transformer-sharp": "^2.5.18",
+    "gatsby-transformer-json": "^2.4.15",
+    "gatsby-transformer-remark": "^2.8.45",
+    "gatsby-transformer-sharp": "^2.5.19",
     "intersection-observer": "^0.11.0",
     "is-url-superb": "^4.0.0",
     "lodash.debounce": "^4.0.8",
@@ -74,7 +74,7 @@
     "remove-markdown": "^0.3.0",
     "shortid": "^2.2.15",
     "slugify": "^1.4.5",
-    "swr": "^0.3.5",
+    "swr": "^0.3.6",
     "yup": "^0.29.3"
   },
   "devDependencies": {
@@ -86,11 +86,11 @@
     "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
-    "@types/jest": "^26.0.14",
+    "@types/jest": "^26.0.15",
     "@types/loadable__component": "^5.13.1",
     "@types/lodash.debounce": "^4.0.3",
     "@types/lodash.omit": "^4.5.6",
-    "@types/node": "^14.11.10",
+    "@types/node": "^14.14.0",
     "@types/react": "^16.9.53",
     "@types/react-datepicker": "^3.1.1",
     "@types/react-helmet": "^6.1.0",
@@ -99,18 +99,18 @@
     "@types/remove-markdown": "^0.1.1",
     "@types/shortid": "0.0.29",
     "@types/yup": "^0.29.8",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@typescript-eslint/parser": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "eslint": "^7.11.0",
     "eslint-config-oceanprotocol": "^1.5.0",
     "eslint-config-prettier": "^6.13.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.4",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.5.3",
+    "jest": "^26.6.0",
     "prettier": "^2.1.2",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.5.0",
diff --git a/src/components/organisms/AssetActions/Compute.stories.tsx b/src/components/organisms/AssetActions/Compute.stories.tsx
index bf6af6361..c6285dc8c 100644
--- a/src/components/organisms/AssetActions/Compute.stories.tsx
+++ b/src/components/organisms/AssetActions/Compute.stories.tsx
@@ -13,5 +13,5 @@ export default {
 }
 
 export const Default = (): ReactElement => (
-  <Compute ddo={ddo as DDO} isBalanceSufficient />
+  <Compute ddo={ddo as DDO} dtBalance="1" isBalanceSufficient />
 )
diff --git a/src/components/organisms/AssetActions/Consume.stories.tsx b/src/components/organisms/AssetActions/Consume.stories.tsx
index 1034f097e..d54d1eab8 100644
--- a/src/components/organisms/AssetActions/Consume.stories.tsx
+++ b/src/components/organisms/AssetActions/Consume.stories.tsx
@@ -15,6 +15,7 @@ export default {
 export const PricedAsset = (): ReactElement => (
   <Consume
     ddo={ddo as DDO}
+    dtBalance="1"
     isBalanceSufficient
     file={new DDO(ddo).findServiceByType('metadata').attributes.main.files[0]}
   />
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index bbdf2fd8b..dae7f2102 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -70,7 +70,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
         // swapFee is tricky: to get 0.1% you need to send 0.001 as value
         swapFee: `${values.swapFee / 100}`
       }
-      // TODO: check if we need to mint first
+
       const tx = await createPricing(priceOptions)
 
       // Pricing failed
diff --git a/src/models/Asset.ts b/src/models/Asset.ts
index 8033b6bb5..2b853fd04 100644
--- a/src/models/Asset.ts
+++ b/src/models/Asset.ts
@@ -18,8 +18,7 @@ const AssetModel: MetadataMarket = {
     links: undefined,
 
     // custom items
-    termsAndConditions: false,
-    priceType: undefined
+    termsAndConditions: false
   }
 }
 
diff --git a/tests/unit/__fixtures__/testFormData.ts b/tests/unit/__fixtures__/testFormData.ts
index 679331aee..1ab1b3ad0 100644
--- a/tests/unit/__fixtures__/testFormData.ts
+++ b/tests/unit/__fixtures__/testFormData.ts
@@ -4,12 +4,9 @@ const testFormData: MetadataPublishForm = {
   author: '',
   files: [],
   license: '',
-  price: {
-    price: 1,
-    tokensToMint: 9,
-    type: 'fixed',
-    weightOnDataToken: '1',
-    swapFee: 0.1
+  dataTokenOptions: {
+    name: '',
+    symbol: ''
   },
   name: '',
   description: 'description',

From f10859dfad0f8c0483c25659f9c9306b406aa58b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 14:58:36 +0200
Subject: [PATCH 26/32] copy

---
 content/price.json                                         | 5 ++++-
 .../AssetContent/Pricing/FormPricing/index.module.css      | 6 ++++++
 .../organisms/AssetContent/Pricing/FormPricing/index.tsx   | 6 +++++-
 src/components/organisms/AssetContent/Pricing/index.tsx    | 7 +++++--
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/content/price.json b/content/price.json
index 03ca7d6e5..c5362e16d 100644
--- a/content/price.json
+++ b/content/price.json
@@ -3,7 +3,10 @@
     "empty": {
       "title": "No Price Created",
       "info": "This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it. Onwards!",
-      "action": "Create Pricing"
+      "action": {
+        "name": "Create Pricing",
+        "help": "Create Pricing will mint your datatokens, approve spending, and create either a pool or a fixed rate exchange in one process. You will need to approve those multiple steps in your wallet."
+      }
     },
     "fixed": {
       "title": "Fixed",
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
index 50f952281..22058c782 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.module.css
@@ -39,3 +39,9 @@
   margin-left: calc(var(--spacer) / 2);
   margin-right: calc(var(--spacer) / 2);
 }
+
+.actionsHelp {
+  margin-top: calc(var(--spacer) / 2);
+  padding-left: var(--spacer);
+  padding-right: var(--spacer);
+}
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
index a462871a6..811494574 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/index.tsx
@@ -8,6 +8,7 @@ import { useUserPreferences } from '../../../../../providers/UserPreferences'
 import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import Button from '../../../../atoms/Button'
 import { DDO } from '@oceanprotocol/lib'
+import FormHelp from '../../../../atoms/Input/Help'
 
 export default function FormPricing({
   ddo,
@@ -57,11 +58,14 @@ export default function FormPricing({
 
       <div className={styles.actions}>
         <Button style="primary" onClick={() => submitForm()}>
-          {content.empty.action}
+          {content.empty.action.name}
         </Button>
         <Button style="text" size="small" onClick={() => setShowPricing(false)}>
           Cancel
         </Button>
+        <FormHelp className={styles.actionsHelp}>
+          {content.empty.action.help}
+        </FormHelp>
       </div>
 
       {debug === true && (
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index dae7f2102..4cb16589b 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -21,7 +21,10 @@ const query = graphql`
               empty {
                 title
                 info
-                action
+                action {
+                  name
+                  help
+                }
               }
               fixed {
                 title
@@ -122,7 +125,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
             title={content.empty.title}
             text={content.empty.info}
             action={{
-              name: content.empty.action,
+              name: content.empty.action.name,
               handleAction: handleShowPricingForm
             }}
           />

From 770d2a570139ddb4b5c76467854267b95d55b4f3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 15:03:20 +0200
Subject: [PATCH 27/32] fix publish form submit

---
 src/components/pages/Publish/FormPublish.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/Publish/FormPublish.tsx b/src/components/pages/Publish/FormPublish.tsx
index 0e19aafbc..80d74a175 100644
--- a/src/components/pages/Publish/FormPublish.tsx
+++ b/src/components/pages/Publish/FormPublish.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, FormEvent } from 'react'
 import styles from './FormPublish.module.css'
 import { useOcean } from '@oceanprotocol/react'
-import { useFormikContext, Field } from 'formik'
+import { useFormikContext, Field, Form } from 'formik'
 import Input from '../../atoms/Input'
 import Button from '../../atoms/Button'
 import { FormContent, FormFieldProps } from '../../../@types/Form'
@@ -37,7 +37,7 @@ export default function FormPublish({
   }
 
   return (
-    <form
+    <Form
       className={styles.form}
       // do we need this?
       onChange={() => status === 'empty' && setStatus(null)}
@@ -61,6 +61,6 @@ export default function FormPublish({
           </Button>
         )}
       </footer>
-    </form>
+    </Form>
   )
 }

From 9099c8ee333ae65e3c53885866fccd5c45c6ce04 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 15:26:50 +0200
Subject: [PATCH 28/32] change hasPrice check

---
 src/components/organisms/AssetContent/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index db3ada0a6..23f5b286e 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -27,8 +27,8 @@ export default function AssetContent({
   const { accountId } = useOcean()
 
   const isOwner = accountId === ddo.publicKey[0].owner
-  // TODO: check if assets without price actually have ddo.price or not
-  const hasPrice = typeof ddo.price !== 'undefined'
+  // TODO: change type overwrite
+  const hasPrice = (ddo.price.type as any) !== ''
   const showPricing = isOwner && !hasPrice
 
   return (

From cc2474419b9591c5c68013ef65cf25fbb64eec9a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 15:45:38 +0200
Subject: [PATCH 29/32] package updates

---
 package-lock.json                               | 14 +++++++-------
 package.json                                    |  4 ++--
 src/components/organisms/AssetContent/index.tsx |  5 ++---
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 90123f37b..ff310d2b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4462,9 +4462,9 @@
       "integrity": "sha512-LING+GvW37I0L40rZdPCZ1SvcZurDSGGhT0WOVPNO8oyh2C3bXModDBNE4+gCFa8pTbQBOc4ot1/Zoj9PfT/zA=="
     },
     "@oceanprotocol/lib": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.7.0.tgz",
-      "integrity": "sha512-XRQ58wWbohtz/buug0498EbpBchxrPwYBh8f/Iln1Vwh6h3IfLWvznmg4gNg/H1AE3qdPsuVcBJwYb0Bos/yGQ==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.7.1.tgz",
+      "integrity": "sha512-vwwyFrygmH08gWA3OQESG7ZggEX0wfgnAYK9s9xWKhwi0IiRbNu3a25joCebXlENoEUIF7QRChBFeAlqV2OW0w==",
       "requires": {
         "@ethereum-navigator/navigator": "^0.5.0",
         "@oceanprotocol/contracts": "^0.5.6",
@@ -4479,11 +4479,11 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.0.tgz",
-      "integrity": "sha512-A9D16lx9s6uH5JhzW2f2y/BBxp9+P9Pne5B6HJf6dNf5BJUTC/5itQC8O852YdJRw7CtsM/w50lTL+5Uu9PIzw==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.1.tgz",
+      "integrity": "sha512-RT7eDkjWJcRRbXZJ+WdxpZNKg3KRVUdxp6ha9Cu8GKMzJVCFkF6y1EDkX/EszCtUFpHlDgwi8+WV25ITgXQNPw==",
       "requires": {
-        "@oceanprotocol/lib": "^0.7.0",
+        "@oceanprotocol/lib": "^0.7.1",
         "axios": "^0.20.0",
         "decimal.js": "^10.2.1",
         "web3": "^1.3.0",
diff --git a/package.json b/package.json
index 7feddc732..02d19d493 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
     "@coingecko/cryptoformat": "^0.4.2",
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
-    "@oceanprotocol/lib": "^0.7.0",
-    "@oceanprotocol/react": "^0.3.0",
+    "@oceanprotocol/lib": "^0.7.1",
+    "@oceanprotocol/react": "^0.3.1",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 23f5b286e..99555d602 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -27,9 +27,8 @@ export default function AssetContent({
   const { accountId } = useOcean()
 
   const isOwner = accountId === ddo.publicKey[0].owner
-  // TODO: change type overwrite
-  const hasPrice = (ddo.price.type as any) !== ''
-  const showPricing = isOwner && !hasPrice
+  const hasNoPrice = ddo.price.type === ''
+  const showPricing = isOwner && hasNoPrice
 
   return (
     <article className={styles.grid}>

From 89709cbe73332e387f55bb51b750df94cf472da9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 16:43:23 +0200
Subject: [PATCH 30/32] periodically try to get DDO when not present yet

---
 .../molecules/FormFields/Datatoken/index.tsx         |  4 ++--
 src/components/pages/Publish/Feedback.tsx            |  2 +-
 src/components/templates/AssetDetails.tsx            | 12 ++++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/FormFields/Datatoken/index.tsx b/src/components/molecules/FormFields/Datatoken/index.tsx
index 2f25e54fe..bd83bfc0c 100644
--- a/src/components/molecules/FormFields/Datatoken/index.tsx
+++ b/src/components/molecules/FormFields/Datatoken/index.tsx
@@ -16,9 +16,9 @@ export default function Datatoken(props: InputProps): ReactElement {
     helpers.setValue({ ...dataTokenOptions })
   }
 
-  // Generate new DT name & symbol, but only once automatically
+  // Generate new DT name & symbol
   useEffect(() => {
-    if (!ocean || typeof field?.value?.name !== 'undefined') return
+    if (!ocean) return
     generateName()
   }, [ocean])
 
diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx
index 2395955d7..036382953 100644
--- a/src/components/pages/Publish/Feedback.tsx
+++ b/src/components/pages/Publish/Feedback.tsx
@@ -23,7 +23,7 @@ export default function Feedback({
     <Button
       style="primary"
       size="small"
-      href={`/asset/${ddo?.id}`}
+      to={`/asset/${ddo?.id}`}
       className={styles.action}
     >
       Go to data set →
diff --git a/src/components/templates/AssetDetails.tsx b/src/components/templates/AssetDetails.tsx
index a2a385ce6..e72075263 100644
--- a/src/components/templates/AssetDetails.tsx
+++ b/src/components/templates/AssetDetails.tsx
@@ -23,13 +23,17 @@ export default function PageTemplateAssetDetails({
 
   useEffect(() => {
     async function init() {
+      if (ddo) return
+
       try {
         const metadataCache = new MetadataCache(config.metadataCacheUri, Logger)
         const ddo = await metadataCache.retrieveDDO(did)
 
         if (!ddo) {
           setTitle('Could not retrieve asset')
-          setError('The DDO was not found in MetadataCache.')
+          setError(
+            `The DDO for ${did} was not found in MetadataCache. If you just published a new data set, wait some seconds and refresh this page.`
+          )
           return
         }
 
@@ -44,7 +48,11 @@ export default function PageTemplateAssetDetails({
       }
     }
     init()
-  }, [did, config.metadataCacheUri])
+
+    // Periodically try to get DDO when not present yet
+    const timer = !ddo && setInterval(() => init(), 2000)
+    return () => clearInterval(timer)
+  }, [ddo, did, config.metadataCacheUri])
 
   return did && metadata ? (
     <Layout title={title} uri={uri}>

From 47381639ffee963d46a364f0b972080b0897facd Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 17:19:29 +0200
Subject: [PATCH 31/32] force reload button

---
 .../organisms/AssetContent/Pricing/Feedback.tsx    | 14 +++++++++++++-
 .../organisms/AssetContent/Pricing/index.tsx       |  4 +++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/AssetContent/Pricing/Feedback.tsx b/src/components/organisms/AssetContent/Pricing/Feedback.tsx
index b2c07f0d3..ebbbb90a8 100644
--- a/src/components/organisms/AssetContent/Pricing/Feedback.tsx
+++ b/src/components/organisms/AssetContent/Pricing/Feedback.tsx
@@ -2,6 +2,7 @@ import Loader from '../../../atoms/Loader'
 import SuccessConfetti from '../../../atoms/SuccessConfetti'
 import React, { ReactElement } from 'react'
 import styles from './Feedback.module.css'
+import Button from '../../../atoms/Button'
 
 export default function Feedback({
   success,
@@ -10,10 +11,21 @@ export default function Feedback({
   success: string
   pricingStepText: string
 }): ReactElement {
+  const SuccessAction = () => (
+    <Button
+      style="primary"
+      size="small"
+      className={styles.action}
+      onClick={() => window?.location.reload()}
+    >
+      Reload Page
+    </Button>
+  )
+
   return (
     <div className={styles.feedback}>
       {success ? (
-        <SuccessConfetti success={success} />
+        <SuccessConfetti success={success} action={<SuccessAction />} />
       ) : (
         <Loader message={pricingStepText} />
       )}
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index 4cb16589b..523aff99e 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/src/components/organisms/AssetContent/Pricing/index.tsx
@@ -84,7 +84,9 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
       }
 
       // Pricing succeeded
-      setSuccess(`🎉 Successfully created a ${values.type} price. 🎉 `)
+      setSuccess(
+        `🎉 Successfully created a ${values.type} price. 🎉 Reload the page to get all updates.`
+      )
       Logger.log(`Transaction: ${tx}`)
     } catch (error) {
       toast.error(error.message)

From 577421cee7208cf7444dbc7c9adeed3993794d83 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 21 Oct 2020 17:31:34 +0200
Subject: [PATCH 32/32] bump ocean.js

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ff310d2b4..21e985bbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4479,9 +4479,9 @@
       }
     },
     "@oceanprotocol/react": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.1.tgz",
-      "integrity": "sha512-RT7eDkjWJcRRbXZJ+WdxpZNKg3KRVUdxp6ha9Cu8GKMzJVCFkF6y1EDkX/EszCtUFpHlDgwi8+WV25ITgXQNPw==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.3.2.tgz",
+      "integrity": "sha512-reCw+HfDQnD1tOLqDX6nOWcT5l0+4MlK4APSB7sU75RpFCEZP+p9vDFbyNoOV/mV2cnzAGCS+zqNIKqSina5Jg==",
       "requires": {
         "@oceanprotocol/lib": "^0.7.1",
         "axios": "^0.20.0",
diff --git a/package.json b/package.json
index 02d19d493..1029a7a3c 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@loadable/component": "5.13.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/lib": "^0.7.1",
-    "@oceanprotocol/react": "^0.3.1",
+    "@oceanprotocol/react": "^0.3.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^1.0.0",
     "@tippyjs/react": "^4.2.0",