move all pool copy into content data file

content/price.json

@@ -0,0 +1,26 @@
+{
+  "pool": {
+    "tooltips": {
+      "price": "Explain how this price is determined...",
+      "liquidity": "Explain what this represents, advantage of providing liquidity..."
+    },
+    "add": {
+      "title": "Add Liquidity",
+      "output": {
+        "titleIn": "You will receive",
+        "titleOut": "You will earn"
+      },
+      "action": "Supply"
+    },
+    "remove": {
+      "title": "Remove Liquidity",
+      "simple": "Set the amount of your pool shares to spend. You will get the equivalent value in OCEAN, limited to maximum amount for pool protection.",
+      "advanced": "Set the amount of your pool shares to spend. You will get OCEAN and Datatokens equivalent to your pool share, without any limit.",
+      "output": {
+        "titleIn": "You will spend",
+        "titleOut": "You will receive"
+      },
+      "action": "Remove"
+    }
+  }
+}

src/components/organisms/AssetActions/Pool/Add.tsx

@@ -11,6 +11,29 @@ import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Actions from './Actions'
 import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const contentQuery = graphql`
+  query PoolAddQuery {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            pool {
+              add {
+                output {
+                  titleIn
+                  titleOut
+                }
+                action
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
 
 export default function Add({
   setShowAdd,
@@ -29,6 +52,9 @@ export default function Add({
   dtSymbol: string
   dtAddress: string
 }): ReactElement {
+  const data = useStaticQuery(contentQuery)
+  const content = data.content.edges[0].node.childContentJson.pool.add
+
   const { ocean, accountId, balance } = useOcean()
   const [amount, setAmount] = useState('')
   const [txId, setTxId] = useState<string>('')
@@ -93,7 +119,7 @@ export default function Add({
 
   return (
     <>
-      <Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
+      <Header title={content.title} backAction={() => setShowAdd(false)} />
 
       <div className={styles.addInput}>
         <div className={styles.userLiquidity}>
@@ -138,12 +164,12 @@ export default function Add({
 
       <div className={styles.output}>
         <div>
-          <p>You will receive</p>
+          <p>{content.output.titleIn}</p>
           <Token symbol="pool shares" balance={newPoolTokens} />
           <Token symbol="% of pool" balance={newPoolShare} />
         </div>
         <div>
-          <p>You will earn</p>
+          <p>{content.output.titleOut}</p>
           <Token symbol="% swap fee" balance={swapFee} />
         </div>
       </div>
@@ -151,7 +177,7 @@ export default function Add({
       <Actions
         isLoading={isLoading}
         loaderMessage="Adding Liquidity..."
-        actionName="Supply"
+        actionName={content.action}
         action={handleAddLiquidity}
         txId={txId}
       />

src/components/organisms/AssetActions/Pool/Remove.tsx

@@ -15,13 +15,31 @@ import Token from './Token'
 import FormHelp from '../../../atoms/Input/Help'
 import Button from '../../../atoms/Button'
 import { getMaxValuesRemove } from './utils'
+import { graphql, useStaticQuery } from 'gatsby'
 
-const help = {
-  simple:
-    'You will get the equivalent value in OCEAN, limited to 60% of the total liquidity.',
-  advanced:
-    'You will get OCEAN and Datatokens equivalent to your pool share, without any limit.'
-}
+const contentQuery = graphql`
+  query PoolRemoveQuery {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            pool {
+              remove {
+                simple
+                advanced
+                output {
+                  titleIn
+                  titleOut
+                }
+                action
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
 
 export default function Remove({
   setShowRemove,
@@ -34,6 +52,9 @@ export default function Remove({
   poolTokens: string
   dtSymbol: string
 }): ReactElement {
+  const data = useStaticQuery(contentQuery)
+  const content = data.content.edges[0].node.childContentJson.pool.remove
+
   const { ocean, accountId } = useOcean()
   const [amountPercent, setAmountPercent] = useState('0')
   const [amountMaxPercent, setAmountMaxPercent] = useState('100')
@@ -114,10 +135,7 @@ export default function Remove({
 
   return (
     <div className={styles.remove}>
-      <Header
-        title="Remove Liquidity"
-        backAction={() => setShowRemove(false)}
-      />
+      <Header title={content.title} backAction={() => setShowRemove(false)} />
 
       <form className={styles.removeInput}>
         <div className={styles.range}>
@@ -139,9 +157,7 @@ export default function Remove({
           </div>
 
           <FormHelp>
-            {`Set the amount of your pool shares to spend. ${
-              isAdvanced === true ? help.advanced : help.simple
-            }`}
+            {isAdvanced === true ? content.advanced : content.simple}
           </FormHelp>
           <Button style="text" size="small" onClick={handleAdvancedButton}>
             {isAdvanced === true ? 'Simple' : 'Advanced'}
@@ -151,11 +167,11 @@ export default function Remove({
 
       <div className={styles.output}>
         <div>
-          <p>You will spend</p>
+          <p>{content.output.titleIn}</p>
           <Token symbol="pool shares" balance={amountPoolShares} noIcon />
         </div>
         <div>
-          <p>You will receive</p>
+          <p>{content.output.titleOut}</p>
           <Token symbol="OCEAN" balance={amountOcean} />
           {isAdvanced === true && (
             <Token symbol={dtSymbol} balance={amountDatatoken} />
@@ -166,7 +182,7 @@ export default function Remove({
       <Actions
         isLoading={isLoading}
         loaderMessage="Removing Liquidity..."
-        actionName="Remove"
+        actionName={content.action}
         action={handleRemoveLiquidity}
         txId={txId}
       />

src/components/organisms/AssetActions/Pool/index.tsx

@@ -13,17 +13,36 @@ import Conversion from '../../../atoms/Price/Conversion'
 import EtherscanLink from '../../../atoms/EtherscanLink'
 import Token from './Token'
 import TokenList from './TokenList'
+import { graphql, useStaticQuery } from 'gatsby'
 
 export interface Balance {
   ocean: number
   datatoken: number
 }
 
-/* 
-  TODO: create tooltip copy
-*/
+const contentQuery = graphql`
+  query PoolQuery {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            pool {
+              tooltips {
+                price
+                liquidity
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
 
 export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
+  const data = useStaticQuery(contentQuery)
+  const content = data.content.edges[0].node.childContentJson.pool
+
   const { ocean, accountId } = useOcean()
   const { price } = useMetadata(ddo)
 
@@ -137,7 +156,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             <PriceUnit price="1" symbol={dtSymbol} /> ={' '}
             <PriceUnit price={`${price.value}`} />
             <Conversion price={`${price.value}`} />
-            <Tooltip content="Explain how this price is determined..." />
+            <Tooltip content={content.tooltips.price} />
             <div className={styles.dataTokenLinks}>
               <EtherscanLink
                 network="rinkeby"
@@ -155,7 +174,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
             title={
               <>
                 Your Liquidity
-                <Tooltip content="Explain what this represents, advantage of providing liquidity..." />
+                <Tooltip content={content.tooltips.liquidity} />
               </>
             }
             ocean={`${userLiquidity.ocean}`}