output fees in dynamic price UI

content/pages/publish.json

@@ -106,8 +106,10 @@
       "title": "Dynamic",
       "info": "Let's create a decentralized, automated market for your data set. A Data Token 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"
+        "poolInfo": "Explain what is going on here...",
+        "liquidityProviderFee": "Explain liquidity provider fee...",
+        "communityFee": "Explain community fee...",
+        "marketplaceFee": "Explain marketplace fee..."
       }
     }
   }

src/components/atoms/Input/InputElement.module.css

@@ -207,6 +207,12 @@
   font-size: var(--font-size-small);
 }
 
+.prefix.small,
+.postfix.small {
+  min-height: 34px;
+  font-size: var(--font-size-mini);
+}
+
 .selectSmall {
   composes: small;
   height: 34px;

src/components/atoms/Input/InputElement.tsx

@@ -7,7 +7,11 @@ import Terms from '../../molecules/FormFields/Terms'
 import Price from '../../molecules/FormFields/Price'
 
 const DefaultInput = (props: InputProps) => (
-  <input className={styles.input} id={props.name} {...props} />
+  <input
+    className={`${styles.input} ${props.small ? styles.small : null}`}
+    id={props.name}
+    {...props}
+  />
 )
 
 export default function InputElement({
@@ -75,12 +79,30 @@ export default function InputElement({
     default:
       return prefix || postfix ? (
         <div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>
-          {prefix && <div className={styles.prefix}>{prefix}</div>}
-          <DefaultInput name={name} type={type || 'text'} {...props} />
-          {postfix && <div className={styles.postfix}>{postfix}</div>}
+          {prefix && (
+            <div className={`${styles.prefix} ${small ? styles.small : ''}`}>
+              {prefix}
+            </div>
+          )}
+          <DefaultInput
+            name={name}
+            type={type || 'text'}
+            small={small}
+            {...props}
+          />
+          {postfix && (
+            <div className={`${styles.postfix} ${small ? styles.small : ''}`}>
+              {postfix}
+            </div>
+          )}
         </div>
       ) : (
-        <DefaultInput name={name} type={type || 'text'} {...props} />
+        <DefaultInput
+          name={name}
+          type={type || 'text'}
+          small={small}
+          {...props}
+        />
       )
   }
 }

src/components/molecules/FormFields/Price/Dynamic.module.css

@@ -34,7 +34,8 @@
   padding-bottom: calc(var(--spacer) / 3);
 }
 
-.tokens {
+.tokens,
+.fees {
   display: grid;
 
   margin-left: -2rem;
@@ -48,15 +49,28 @@
   }
 }
 
-.summary {
-  text-align: center;
+.fees {
   margin-top: var(--spacer);
+  padding: var(--spacer);
+  padding-top: 0;
+  gap: var(--spacer);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  align-items: center;
+  border-bottom: 1px solid var(--brand-grey-lighter);
 }
 
-.summary input {
+.fees label {
+  white-space: nowrap;
+}
+
+.fees input {
   max-width: 5rem;
 }
 
+.summary {
+  margin-top: var(--spacer);
+}
+
 .alertArea {
   margin-left: -2rem;
   margin-right: -2rem;

src/components/molecules/FormFields/Price/Dynamic.tsx

@@ -100,21 +100,54 @@ export default function Dynamic({
         />
       </div>
 
+      <div className={styles.fees}>
+        <div>
+          <Label htmlFor="liquidityProviderFee">
+            Liquidity Provider Fee{' '}
+            <Tooltip content={content.tooltips.liquidityProviderFee} />
+          </Label>
+          <InputElement
+            type="number"
+            value={liquidityProviderFee}
+            name="liquidityProviderFee"
+            postfix="%"
+            onChange={onLiquidityProviderFeeChange}
+            min="0.1"
+            max="0.9"
+            step="0.1"
+            small
+          />
+        </div>
+        <div>
+          <Label htmlFor="communityFee">
+            Community Fee <Tooltip content={content.tooltips.communityFee} />
+          </Label>
+          <InputElement
+            value="0.1"
+            name="communityFee"
+            postfix="%"
+            readOnly
+            small
+          />
+        </div>
+        <div>
+          <Label htmlFor="marketplaceFee">
+            Marketplace Fee{' '}
+            <Tooltip content={content.tooltips.marketplaceFee} />
+          </Label>
+          <InputElement
+            value={appConfig.marketFeeAmount}
+            name="marketplaceFee"
+            postfix="%"
+            readOnly
+            small
+          />
+        </div>
+      </div>
+
       <footer className={styles.summary}>
-        <Label htmlFor="liquidityProviderFee">
-          Liquidity Provider Fee{' '}
-          <Tooltip content={content.tooltips.liquidityProviderFee} />
-        </Label>
-        <InputElement
-          type="number"
-          value={liquidityProviderFee}
-          name="liquidityProviderFee"
-          postfix="%"
-          onChange={onLiquidityProviderFeeChange}
-          min="0.1"
-          max="0.9"
-          step="0.1"
-        />
+        You will get: <br />
+        100% share of pool
       </footer>
 
       {error && (

src/components/molecules/FormFields/Price/index.tsx

@@ -26,6 +26,8 @@ const query = graphql`
                 tooltips {
                   poolInfo
                   liquidityProviderFee
+                  communityFee
+                  marketplaceFee
                 }
               }
             }