From a021fb3f13fc5485e06484b1185b488e159fac39 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 6 Aug 2020 12:44:25 +0200
Subject: [PATCH 1/5] refactor wallet popup into generic tooltip component

---
 src/components/atoms/Input/Label.tsx          |  6 +-
 src/components/atoms/Tooltip.module.css       | 41 +++++++++
 src/components/atoms/Tooltip.tsx              | 89 +++++++++++++++----
 .../molecules/FormFields/Price/Advanced.tsx   |  5 +-
 .../molecules/Wallet/Details.module.css       | 35 +-------
 src/components/molecules/Wallet/Details.tsx   |  5 +-
 src/components/molecules/Wallet/index.tsx     | 55 +-----------
 7 files changed, 126 insertions(+), 110 deletions(-)

diff --git a/src/components/atoms/Input/Label.tsx b/src/components/atoms/Input/Label.tsx
index 40e06326b..4a5ed2006 100644
--- a/src/components/atoms/Input/Label.tsx
+++ b/src/components/atoms/Input/Label.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './Label.module.css'
 
 const Label = ({
@@ -7,9 +7,9 @@ const Label = ({
   ...props
 }: {
   required?: boolean
-  children: string
+  children: ReactNode
   htmlFor: string
-}) => (
+}): ReactElement => (
   <label
     className={`${styles.label} ${required && styles.required}`}
     title={required ? 'Required' : ''}
diff --git a/src/components/atoms/Tooltip.module.css b/src/components/atoms/Tooltip.module.css
index e69de29bb..93a8edec4 100644
--- a/src/components/atoms/Tooltip.module.css
+++ b/src/components/atoms/Tooltip.module.css
@@ -0,0 +1,41 @@
+.tooltip {
+  display: inline-block;
+}
+
+.content {
+  composes: box from './Box.module.css';
+  padding: calc(var(--spacer) / 4);
+  min-width: 20rem;
+  max-width: 25rem;
+  font-size: var(--font-size-small);
+}
+
+.arrow,
+.arrow::before {
+  position: absolute;
+  width: 1.2rem;
+  height: 1.2rem;
+  z-index: -1;
+}
+
+.arrow::before {
+  content: '';
+  transform: rotate(45deg);
+  background: var(--brand-grey-lighter);
+}
+
+.content[data-placement*='top'] > .arrow {
+  bottom: -4px;
+}
+
+.content[data-placement*='bottom'] > .arrow {
+  top: -4px;
+}
+
+.content[data-placement*='left'] > .arrow {
+  right: -4px;
+}
+
+.content[data-placement*='right'] > .arrow {
+  left: -4px;
+}
diff --git a/src/components/atoms/Tooltip.tsx b/src/components/atoms/Tooltip.tsx
index 1641eff8f..160bd117c 100644
--- a/src/components/atoms/Tooltip.tsx
+++ b/src/components/atoms/Tooltip.tsx
@@ -1,24 +1,77 @@
-import React, { ReactElement, forwardRef } from 'react'
-import Tippy from '@tippyjs/react'
+import React, { ReactElement, ReactNode } from 'react'
+import loadable from '@loadable/component'
+import { useSpring, animated } from 'react-spring'
+import styles from './Tooltip.module.css'
 
-export default function Tooltip({
-  content,
-  children
-}: {
-  content: string
-  children: ReactElement
-}) {
-  return (
-    <Tippy content={content}>
-      <CustomWrapper>{children}</CustomWrapper>
-    </Tippy>
-  )
+const Tippy = loadable(() => import('@tippyjs/react/headless'))
+
+const animation = {
+  config: { tension: 400, friction: 20 },
+  from: { transform: 'scale(0.5) translateY(-3rem)' },
+  to: { transform: 'scale(1) translateY(0)' }
 }
 
 // Forward ref for Tippy.js
 // eslint-disable-next-line
-const CustomWrapper = forwardRef(
-  ({ children }: { children: ReactElement }, ref: any) => {
-    return <div ref={ref}>{children}</div>
+const DefaultTrigger = React.forwardRef((props, ref: any) => {
+  return <i ref={ref}>Info</i>
+})
+
+export default function Tooltip({
+  content,
+  children,
+  trigger,
+  disabled
+}: {
+  content: ReactNode
+  children?: ReactNode
+  trigger?: string
+  disabled?: boolean
+}): ReactElement {
+  const [props, setSpring] = useSpring(() => animation.from)
+
+  function onMount() {
+    setSpring({
+      transform: 'scale(1) translateY(0)',
+      onRest: (): void => null,
+      config: animation.config
+    })
   }
-)
+
+  function onHide({ unmount }: { unmount: any }) {
+    setSpring({
+      ...animation.from,
+      onRest: unmount,
+      config: { ...animation.config, clamp: true }
+    })
+  }
+
+  return (
+    <Tippy
+      interactive
+      interactiveBorder={30}
+      zIndex={1}
+      trigger={trigger || 'mouseenter focus'}
+      disabled={disabled || null}
+      render={(attrs: any) => (
+        <animated.div style={props}>
+          <div className={styles.content} {...attrs}>
+            {content}
+            <div className={styles.arrow} data-popper-arrow />
+          </div>
+        </animated.div>
+      )}
+      appendTo={
+        typeof document !== 'undefined' && document.querySelector('body')
+      }
+      animation
+      onMount={onMount}
+      onHide={onHide}
+      fallback={
+        <div className={styles.tooltip}>{children || <DefaultTrigger />}</div>
+      }
+    >
+      <div className={styles.tooltip}>{children || <DefaultTrigger />}</div>
+    </Tippy>
+  )
+}
diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx
index d617df6a5..1baddf320 100644
--- a/src/components/molecules/FormFields/Price/Advanced.tsx
+++ b/src/components/molecules/FormFields/Price/Advanced.tsx
@@ -10,6 +10,7 @@ import { isCorrectNetwork } from '../../../../utils/wallet'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
 import InputElement from '../../../atoms/Input/InputElement'
 import Label from '../../../atoms/Input/Label'
+import Tooltip from '../../../atoms/Tooltip'
 
 export default function Advanced({
   ocean,
@@ -95,7 +96,9 @@ export default function Advanced({
         </div>
 
         <footer className={styles.summary}>
-          <Label htmlFor="liquidityProviderFee">Liquidity Provider Fee</Label>
+          <Label htmlFor="liquidityProviderFee">
+            Liquidity Provider Fee <Tooltip content="Help Me" />
+          </Label>
           <InputElement
             value={liquidityProviderFee}
             name="liquidityProviderFee"
diff --git a/src/components/molecules/Wallet/Details.module.css b/src/components/molecules/Wallet/Details.module.css
index 056ec9ef4..d750ed25e 100644
--- a/src/components/molecules/Wallet/Details.module.css
+++ b/src/components/molecules/Wallet/Details.module.css
@@ -1,8 +1,5 @@
 .details {
-  composes: box from '../../atoms/Box.module.css';
-  padding: calc(var(--spacer) / 2) !important;
-  min-width: 20rem;
-  max-width: 25rem;
+  padding: calc(var(--spacer) / 4);
 }
 
 .balance {
@@ -31,33 +28,3 @@
   font-size: var(--font-size-small);
   color: var(--color-secondary);
 }
-
-.arrow,
-.arrow::before {
-  position: absolute;
-  width: 1.2rem;
-  height: 1.2rem;
-  z-index: -1;
-}
-
-.arrow::before {
-  content: '';
-  transform: rotate(45deg);
-  background: var(--brand-grey-lighter);
-}
-
-.details[data-placement*='top'] > .arrow {
-  bottom: -4px;
-}
-
-.details[data-placement*='bottom'] > .arrow {
-  top: -4px;
-}
-
-.details[data-placement*='left'] > .arrow {
-  right: -4px;
-}
-
-.details[data-placement*='right'] > .arrow {
-  left: -4px;
-}
diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx
index 65c03b30c..9009345de 100644
--- a/src/components/molecules/Wallet/Details.tsx
+++ b/src/components/molecules/Wallet/Details.tsx
@@ -8,11 +8,11 @@ import { getInjectedProviderName } from 'web3modal'
 import Conversion from '../../atoms/Price/Conversion'
 import { formatCurrency } from '@coingecko/cryptoformat'
 
-export default function Details({ attrs }: { attrs: any }): ReactElement {
+export default function Details(): ReactElement {
   const { balance, connect, logout, chainId } = useOcean()
 
   return (
-    <div className={styles.details} {...attrs}>
+    <div className={styles.details}>
       <ul>
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
@@ -41,7 +41,6 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
         </li>
       </ul>
       <Web3Feedback />
-      <div className={styles.arrow} data-popper-arrow />
     </div>
   )
 }
diff --git a/src/components/molecules/Wallet/index.tsx b/src/components/molecules/Wallet/index.tsx
index 58b36fa63..6ab20119a 100644
--- a/src/components/molecules/Wallet/index.tsx
+++ b/src/components/molecules/Wallet/index.tsx
@@ -1,62 +1,15 @@
 import React, { ReactElement } from 'react'
-import loadable from '@loadable/component'
-import { useSpring, animated } from 'react-spring'
 import Account from './Account'
 import Details from './Details'
+import Tooltip from '../../atoms/Tooltip'
 import { useOcean } from '@oceanprotocol/react'
 
-const Tippy = loadable(() => import('@tippyjs/react/headless'))
-
-const animation = {
-  config: { tension: 400, friction: 20 },
-  from: { transform: 'scale(0.5) translateY(-3rem)' },
-  to: { transform: 'scale(1) translateY(0)' }
-}
-
 export default function Wallet(): ReactElement {
-  const { accountId, refreshBalance } = useOcean()
-  const [props, setSpring] = useSpring(() => animation.from)
-
-  // always refetch balance when popover is opened
-  function onMount() {
-    accountId && refreshBalance()
-
-    setSpring({
-      transform: 'scale(1) translateY(0)',
-      onRest: (): void => null,
-      config: animation.config
-    })
-  }
-
-  function onHide({ unmount }: { unmount: any }) {
-    setSpring({
-      ...animation.from,
-      onRest: unmount,
-      config: { ...animation.config, clamp: true }
-    })
-  }
+  const { accountId } = useOcean()
 
   return (
-    <Tippy
-      interactive
-      interactiveBorder={30}
-      trigger="click focus"
-      zIndex={1}
-      render={(attrs: any) => (
-        <animated.div style={props}>
-          <Details attrs={attrs} />
-        </animated.div>
-      )}
-      appendTo={
-        typeof document !== 'undefined' && document.querySelector('body')
-      }
-      animation
-      onMount={onMount}
-      onHide={onHide}
-      disabled={!accountId}
-      fallback={<Account />}
-    >
+    <Tooltip content={<Details />} trigger="click focus" disabled={!accountId}>
       <Account />
-    </Tippy>
+    </Tooltip>
   )
 }

From a5cc84f8df07d81d3255abc5ea9625c8dc8fa926 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 6 Aug 2020 13:36:36 +0200
Subject: [PATCH 2/5] default tooltip trigger icon

---
 src/components/atoms/Tooltip.module.css | 10 ++++++++++
 src/components/atoms/Tooltip.tsx        |  5 +++--
 src/images/info.svg                     |  3 +++
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/images/info.svg

diff --git a/src/components/atoms/Tooltip.module.css b/src/components/atoms/Tooltip.module.css
index 93a8edec4..57732f1d8 100644
--- a/src/components/atoms/Tooltip.module.css
+++ b/src/components/atoms/Tooltip.module.css
@@ -10,6 +10,16 @@
   font-size: var(--font-size-small);
 }
 
+.icon {
+  width: 15px;
+  height: 15px;
+  cursor: help;
+  display: inline-block;
+  margin-bottom: -0.1rem;
+  margin-left: calc(var(--spacer) / 6);
+  fill: var(--brand-grey-light);
+}
+
 .arrow,
 .arrow::before {
   position: absolute;
diff --git a/src/components/atoms/Tooltip.tsx b/src/components/atoms/Tooltip.tsx
index 160bd117c..7913e4714 100644
--- a/src/components/atoms/Tooltip.tsx
+++ b/src/components/atoms/Tooltip.tsx
@@ -2,6 +2,7 @@ import React, { ReactElement, ReactNode } from 'react'
 import loadable from '@loadable/component'
 import { useSpring, animated } from 'react-spring'
 import styles from './Tooltip.module.css'
+import { ReactComponent as Info } from '../../images/info.svg'
 
 const Tippy = loadable(() => import('@tippyjs/react/headless'))
 
@@ -14,7 +15,7 @@ const animation = {
 // Forward ref for Tippy.js
 // eslint-disable-next-line
 const DefaultTrigger = React.forwardRef((props, ref: any) => {
-  return <i ref={ref}>Info</i>
+  return <Info className={styles.icon} ref={ref} />
 })
 
 export default function Tooltip({
@@ -49,7 +50,7 @@ export default function Tooltip({
   return (
     <Tippy
       interactive
-      interactiveBorder={30}
+      interactiveBorder={5}
       zIndex={1}
       trigger={trigger || 'mouseenter focus'}
       disabled={disabled || null}
diff --git a/src/images/info.svg b/src/images/info.svg
new file mode 100644
index 000000000..dce7af8f6
--- /dev/null
+++ b/src/images/info.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.53846C5.32682 1.53846 1.53846 5.32682 1.53846 10C1.53846 14.6732 5.32682 18.4615 10 18.4615C14.6732 18.4615 18.4615 14.6732 18.4615 10C18.4615 5.32682 14.6732 1.53846 10 1.53846ZM0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM10 8.46154C10.4248 8.46154 10.7692 8.80593 10.7692 9.23077V15.3846C10.7692 15.8094 10.4248 16.1538 10 16.1538C9.57517 16.1538 9.23077 15.8094 9.23077 15.3846V9.23077C9.23077 8.80593 9.57517 8.46154 10 8.46154ZM10 4.61538C9.36275 4.61538 8.84615 5.13198 8.84615 5.76923C8.84615 6.40648 9.36275 6.92308 10 6.92308C10.6373 6.92308 11.1538 6.40648 11.1538 5.76923C11.1538 5.13198 10.6373 4.61538 10 4.61538Z"/>
+</svg>

From 3811050fa63adbf77e50afba686fccd2c1b86757 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 6 Aug 2020 13:46:43 +0200
Subject: [PATCH 3/5] source tooltip content for advanced price

---
 content/pages/publish.json                    |  4 +++
 src/components/atoms/Markdown.tsx             |  4 +--
 .../molecules/FormFields/Price/Advanced.tsx   | 28 +++++++++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/content/pages/publish.json b/content/pages/publish.json
index bc1b6ebc2..bcc415250 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -89,5 +89,9 @@
       }
     ],
     "success": "Asset Created!"
+  },
+  "tooltips": {
+    "poolInfo": "Help me",
+    "liquidityProviderFee": "Help me"
   }
 }
diff --git a/src/components/atoms/Markdown.tsx b/src/components/atoms/Markdown.tsx
index 3bc42d9b3..2754ac386 100644
--- a/src/components/atoms/Markdown.tsx
+++ b/src/components/atoms/Markdown.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import ReactMarkdown from 'react-markdown'
 
 const Markdown = ({
@@ -7,7 +7,7 @@ const Markdown = ({
 }: {
   text: string
   className?: string
-}) => {
+}): ReactElement => {
   // fix react-markdown \n transformation
   // https://github.com/rexxars/react-markdown/issues/105#issuecomment-351585313
   const textCleaned = text.replace(/\\n/g, '\n ')
diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx
index 1baddf320..7a3bdc633 100644
--- a/src/components/molecules/FormFields/Price/Advanced.tsx
+++ b/src/components/molecules/FormFields/Price/Advanced.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import stylesIndex from './index.module.css'
 import styles from './Advanced.module.css'
 import FormHelp from '../../../atoms/Input/Help'
@@ -12,6 +13,23 @@ import InputElement from '../../../atoms/Input/InputElement'
 import Label from '../../../atoms/Input/Label'
 import Tooltip from '../../../atoms/Tooltip'
 
+const query = graphql`
+  query PriceAdvancedQuery {
+    tooltips: allFile(filter: { relativePath: { eq: "pages/publish.json" } }) {
+      edges {
+        node {
+          childPagesJson {
+            tooltips {
+              poolInfo
+              liquidityProviderFee
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 export default function Advanced({
   ocean,
   tokensToMint,
@@ -25,6 +43,9 @@ export default function Advanced({
   liquidityProviderFee: string
   onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
 }): ReactElement {
+  const data = useStaticQuery(query)
+  const { tooltips } = data.tooltips.edges[0].node.childPagesJson
+
   const { appConfig } = useSiteMetadata()
   const { account, balance, chainId, refreshBalance } = useOcean()
 
@@ -76,7 +97,9 @@ export default function Advanced({
           <Wallet />
         </aside>
 
-        <h4 className={styles.title}>Data Token Liquidity Pool</h4>
+        <h4 className={styles.title}>
+          Data Token Liquidity Pool <Tooltip content={tooltips.poolInfo} />
+        </h4>
 
         <div className={styles.tokens}>
           <Coin
@@ -97,7 +120,8 @@ export default function Advanced({
 
         <footer className={styles.summary}>
           <Label htmlFor="liquidityProviderFee">
-            Liquidity Provider Fee <Tooltip content="Help Me" />
+            Liquidity Provider Fee{' '}
+            <Tooltip content={tooltips.liquidityProviderFee} />
           </Label>
           <InputElement
             value={liquidityProviderFee}

From 0d4e0599ac20018edaf4b0bedadf99ebc3592ea0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 6 Aug 2020 14:07:01 +0200
Subject: [PATCH 4/5] consolidate all copy for price widget

---
 content/pages/publish.json                    | 16 +++++--
 .../molecules/FormFields/Price/Advanced.tsx   | 34 +++-----------
 .../molecules/FormFields/Price/Simple.tsx     |  9 ++--
 .../molecules/FormFields/Price/index.tsx      | 44 +++++++++++++++++--
 4 files changed, 65 insertions(+), 38 deletions(-)

diff --git a/content/pages/publish.json b/content/pages/publish.json
index bcc415250..59ea6e2e7 100644
--- a/content/pages/publish.json
+++ b/content/pages/publish.json
@@ -90,8 +90,18 @@
     ],
     "success": "Asset Created!"
   },
-  "tooltips": {
-    "poolInfo": "Help me",
-    "liquidityProviderFee": "Help me"
+  "price": {
+    "simple": {
+      "title": "Simple: Fixed",
+      "info": "Set your price for accessing this data set. A Data Token contract for this data set, worth the entered amount of OCEAN will be created."
+    },
+    "advanced": {
+      "title": "Advanced: Dynamic",
+      "info": "Let's create a decentralized, automated market for your data set. A Data Token contract for this data set worth the entered amount of OCEAN will be created. Additionally, you will provide liquidity into a Data Token/OCEAN liquidity pool with Balancer.",
+      "tooltips": {
+        "poolInfo": "Help me",
+        "liquidityProviderFee": "Help me"
+      }
+    }
   }
 }
diff --git a/src/components/molecules/FormFields/Price/Advanced.tsx b/src/components/molecules/FormFields/Price/Advanced.tsx
index 7a3bdc633..a5c85cd05 100644
--- a/src/components/molecules/FormFields/Price/Advanced.tsx
+++ b/src/components/molecules/FormFields/Price/Advanced.tsx
@@ -13,39 +13,21 @@ import InputElement from '../../../atoms/Input/InputElement'
 import Label from '../../../atoms/Input/Label'
 import Tooltip from '../../../atoms/Tooltip'
 
-const query = graphql`
-  query PriceAdvancedQuery {
-    tooltips: allFile(filter: { relativePath: { eq: "pages/publish.json" } }) {
-      edges {
-        node {
-          childPagesJson {
-            tooltips {
-              poolInfo
-              liquidityProviderFee
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
 export default function Advanced({
   ocean,
   tokensToMint,
   weightOnDataToken,
   liquidityProviderFee,
-  onOceanChange
+  onOceanChange,
+  content
 }: {
   ocean: string
   tokensToMint: number
   weightOnDataToken: string
   liquidityProviderFee: string
   onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
+  content: any
 }): ReactElement {
-  const data = useStaticQuery(query)
-  const { tooltips } = data.tooltips.edges[0].node.childPagesJson
-
   const { appConfig } = useSiteMetadata()
   const { account, balance, chainId, refreshBalance } = useOcean()
 
@@ -83,10 +65,7 @@ export default function Advanced({
   return (
     <div className={stylesIndex.content}>
       <div className={styles.advanced}>
-        <FormHelp className={stylesIndex.help}>
-          {`Let's create a decentralized, automated market for your data set. A Data Token contract for this data set worth the entered amount of OCEAN will be created. Additionally, you will provide liquidity into a Data Token/OCEAN
-          liquidity pool with Balancer.`}
-        </FormHelp>
+        <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
 
         <aside className={styles.wallet}>
           {balance && balance.ocean && (
@@ -98,7 +77,8 @@ export default function Advanced({
         </aside>
 
         <h4 className={styles.title}>
-          Data Token Liquidity Pool <Tooltip content={tooltips.poolInfo} />
+          Data Token Liquidity Pool{' '}
+          <Tooltip content={content.tooltips.poolInfo} />
         </h4>
 
         <div className={styles.tokens}>
@@ -121,7 +101,7 @@ export default function Advanced({
         <footer className={styles.summary}>
           <Label htmlFor="liquidityProviderFee">
             Liquidity Provider Fee{' '}
-            <Tooltip content={tooltips.liquidityProviderFee} />
+            <Tooltip content={content.tooltips.liquidityProviderFee} />
           </Label>
           <InputElement
             value={liquidityProviderFee}
diff --git a/src/components/molecules/FormFields/Price/Simple.tsx b/src/components/molecules/FormFields/Price/Simple.tsx
index a3d3d1151..7b8851a58 100644
--- a/src/components/molecules/FormFields/Price/Simple.tsx
+++ b/src/components/molecules/FormFields/Price/Simple.tsx
@@ -8,18 +8,17 @@ import Conversion from '../../../atoms/Price/Conversion'
 
 export default function Simple({
   ocean,
-  onChange
+  onChange,
+  content
 }: {
   ocean: string
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  content: any
 }): ReactElement {
   return (
     <div className={stylesIndex.content}>
       <div className={styles.simple}>
-        <FormHelp className={stylesIndex.help}>
-          Set your price for accessing this data set. A Data Token contract for
-          this data set, worth the entered amount of OCEAN will be created.
-        </FormHelp>
+        <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
 
         <div className={styles.form}>
           <Label htmlFor="ocean">Ocean Tokens</Label>
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
index e83f5c6ad..e25e65490 100644
--- a/src/components/molecules/FormFields/Price/index.tsx
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -1,4 +1,5 @@
 import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import { InputProps } from '../../../atoms/Input'
 import styles from './index.module.css'
 import Tabs from '../../../atoms/Tabs'
@@ -6,7 +7,37 @@ import Simple from './Simple'
 import Advanced from './Advanced'
 import { useField } from 'formik'
 
+const query = graphql`
+  query PriceFieldQuery {
+    content: allFile(filter: { relativePath: { eq: "pages/publish.json" } }) {
+      edges {
+        node {
+          childPagesJson {
+            price {
+              simple {
+                title
+                info
+              }
+              advanced {
+                title
+                info
+                tooltips {
+                  poolInfo
+                  liquidityProviderFee
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 export default function Price(props: InputProps): ReactElement {
+  const data = useStaticQuery(query)
+  const content = data.content.edges[0].node.childPagesJson.price
+
   const [field, meta, helpers] = useField(props)
   const { weightOnDataToken, liquidityProviderFee } = field.value
 
@@ -31,11 +62,17 @@ export default function Price(props: InputProps): ReactElement {
 
   const tabs = [
     {
-      title: 'Simple: Fixed',
-      content: <Simple ocean={ocean} onChange={handleOceanChange} />
+      title: content.simple.title,
+      content: (
+        <Simple
+          ocean={ocean}
+          onChange={handleOceanChange}
+          content={content.simple}
+        />
+      )
     },
     {
-      title: 'Advanced: Dynamic',
+      title: content.advanced.title,
       content: (
         <Advanced
           ocean={ocean}
@@ -43,6 +80,7 @@ export default function Price(props: InputProps): ReactElement {
           weightOnDataToken={weightOnDataToken}
           onOceanChange={handleOceanChange}
           liquidityProviderFee={liquidityProviderFee}
+          content={content.advanced}
         />
       )
     }

From 65cd3d42b03fa86a2f41a8499691b5069406d72d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 6 Aug 2020 14:22:19 +0200
Subject: [PATCH 5/5] change default fees

---
 app.config.js             | 2 +-
 src/models/FormPublish.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app.config.js b/app.config.js
index eef68476a..761139c0a 100644
--- a/app.config.js
+++ b/app.config.js
@@ -17,7 +17,7 @@ const appConfig = {
   network,
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
   marketFeeAddress: process.env.GATSBY_MARKET_FEE_ADDRESS || '0xxxx',
-  marketFeeAmount: process.env.GATSBY_MARKET_FEE_AMOUNT || '0.03' // in %
+  marketFeeAmount: process.env.GATSBY_MARKET_FEE_AMOUNT || '0.1' // in %
 }
 
 module.exports = {
diff --git a/src/models/FormPublish.ts b/src/models/FormPublish.ts
index 19a2a117b..5154de115 100644
--- a/src/models/FormPublish.ts
+++ b/src/models/FormPublish.ts
@@ -35,7 +35,7 @@ export const initialValues: MetadataPublishForm = {
     type: 'simple',
     tokensToMint: 1,
     weightOnDataToken: '9', // 90% on data token
-    liquidityProviderFee: '0.3' // in %
+    liquidityProviderFee: '0.1' // in %
   },
   files: undefined,
   description: undefined,