consolidate all copy for price widget

content/pages/publish.json

@@ -90,8 +90,18 @@
     ],
     "success": "Asset Created!"
   },
+  "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"
       }
+    }
+  }
 }

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}>
+        <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
-          {`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>
 
         <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}

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}>
+        <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
-          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>
 
         <div className={styles.form}>
           <Label htmlFor="ocean">Ocean Tokens</Label>

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',
+      title: content.simple.title,
-      content: <Simple ocean={ocean} onChange={handleOceanChange} />
+      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}
         />
       )
     }