From 8bec69986c9379ddaf39ee6ab25038e4e10be9ee Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 15 Oct 2020 12:48:01 +0200
Subject: [PATCH 01/12] add max amount checks

---
 .../AssetActions/Pool/Add.module.css          |  7 +++-
 .../organisms/AssetActions/Pool/Add.tsx       | 42 +++++++++++++++----
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.module.css b/src/components/organisms/AssetActions/Pool/Add.module.css
index 1fc546251..3aab2d915 100644
--- a/src/components/organisms/AssetActions/Pool/Add.module.css
+++ b/src/components/organisms/AssetActions/Pool/Add.module.css
@@ -21,15 +21,18 @@
   right: calc(var(--spacer) * 3);
 }
 
-.userLiquidity {
+.userLiquidity > div {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: var(--font-size-mini);
-  margin-bottom: calc(var(--spacer) / 4);
   color: var(--color-secondary);
 }
 
+.userLiquidity > div:last-child {
+  margin-bottom: calc(var(--spacer) / 4);
+}
+
 .userLiquidity span + div {
   transform: scale(0.8);
   transform-origin: right center;
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 270b97de5..e49ea0327 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -12,6 +12,7 @@ import Actions from './Actions'
 import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
 import { graphql, useStaticQuery } from 'gatsby'
+import FormHelp from '../../../atoms/Input/Help'
 
 const contentQuery = graphql`
   query PoolAddQuery {
@@ -62,6 +63,7 @@ export default function Add({
   const [isLoading, setIsLoading] = useState<boolean>()
   const [coin, setCoin] = useState<string>('OCEAN')
   const [dtBalance, setDtBalance] = useState<string>()
+  const [amountMax, setAmountMax] = useState<string>()
 
   const newPoolTokens =
     totalBalance &&
@@ -71,15 +73,30 @@ export default function Add({
     totalBalance &&
     ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
 
+  // Get datatoken balance when datatoken selected
   useEffect(() => {
-    if (!ocean) return
+    if (!ocean || coin === 'OCEAN') return
 
     async function getDtBalance() {
       const dtBalance = await ocean.datatokens.balance(dtAddress, accountId)
       setDtBalance(dtBalance)
     }
     getDtBalance()
-  }, [ocean, accountId, dtAddress])
+  }, [ocean, accountId, dtAddress, coin])
+
+  // Get maximum amount for either OCEAN or datatoken
+  useEffect(() => {
+    if (!ocean) return
+
+    async function getMaximum() {
+      const amountMax =
+        coin === 'OCEAN'
+          ? await ocean.pool.getOceanMaxAddLiquidity(poolAddress)
+          : await ocean.pool.getDTMaxAddLiquidity(poolAddress)
+      setAmountMax(amountMax)
+    }
+    getMaximum()
+  }, [ocean, poolAddress, coin])
 
   async function handleAddLiquidity() {
     setIsLoading(true)
@@ -104,7 +121,7 @@ export default function Add({
   }
 
   function handleMax() {
-    setAmount(coin === 'OCEAN' ? balance.ocean : dtBalance)
+    setAmount(amountMax)
   }
 
   // TODO: this is only a prototype and is an accessibility nightmare.
@@ -124,18 +141,25 @@ export default function Add({
 
       <div className={styles.addInput}>
         <div className={styles.userLiquidity}>
-          <span>Available: </span>
-          {coin === 'OCEAN' ? (
-            <PriceUnit price={balance.ocean} symbol="OCEAN" small />
-          ) : (
-            <PriceUnit price={dtBalance} symbol={dtSymbol} small />
-          )}
+          <div>
+            <span>Available:</span>
+            {coin === 'OCEAN' ? (
+              <PriceUnit price={balance.ocean} symbol="OCEAN" small />
+            ) : (
+              <PriceUnit price={dtBalance} symbol={dtSymbol} small />
+            )}
+          </div>
+          <div>
+            <span>Maximum:</span>
+            <PriceUnit price={amountMax} symbol={coin} small />
+          </div>
         </div>
 
         <InputElement
           value={amount}
           name="coin"
           type="number"
+          max={amountMax}
           prefix={
             <Tooltip
               content={<CoinSelect />}

From 5a7955f7aab938894d8504cec06eb26363018d10 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 15 Oct 2020 13:47:03 +0200
Subject: [PATCH 02/12] refactor to use Formik for better live validation

---
 .../organisms/AssetActions/Pool/Add.tsx       | 197 ++++++++++--------
 1 file changed, 114 insertions(+), 83 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index e49ea0327..22ad1f065 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -12,7 +12,9 @@ import Actions from './Actions'
 import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
 import { graphql, useStaticQuery } from 'gatsby'
-import FormHelp from '../../../atoms/Input/Help'
+import * as Yup from 'yup'
+import { Field, Formik } from 'formik'
+import Input from '../../../atoms/Input'
 
 const contentQuery = graphql`
   query PoolAddQuery {
@@ -37,6 +39,10 @@ const contentQuery = graphql`
   }
 `
 
+const initialValues: Partial<{ amount: number }> = {
+  amount: 1
+}
+
 export default function Add({
   setShowAdd,
   poolAddress,
@@ -58,21 +64,12 @@ export default function Add({
   const content = data.content.edges[0].node.childContentJson.pool.add
 
   const { ocean, accountId, balance } = useOcean()
-  const [amount, setAmount] = useState('')
   const [txId, setTxId] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>()
   const [coin, setCoin] = useState<string>('OCEAN')
   const [dtBalance, setDtBalance] = useState<string>()
   const [amountMax, setAmountMax] = useState<string>()
 
-  const newPoolTokens =
-    totalBalance &&
-    ((Number(amount) / Number(totalBalance.ocean)) * 100).toFixed(2)
-
-  const newPoolShare =
-    totalBalance &&
-    ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
-
   // Get datatoken balance when datatoken selected
   useEffect(() => {
     if (!ocean || coin === 'OCEAN') return
@@ -98,16 +95,21 @@ export default function Add({
     getMaximum()
   }, [ocean, poolAddress, coin])
 
-  async function handleAddLiquidity() {
+  async function handleAddLiquidity(amount: number, resetForm: () => void) {
     setIsLoading(true)
 
     try {
       const result =
         coin === 'OCEAN'
-          ? await ocean.pool.addOceanLiquidity(accountId, poolAddress, amount)
-          : await ocean.pool.addDTLiquidity(accountId, poolAddress, amount)
+          ? await ocean.pool.addOceanLiquidity(
+              accountId,
+              poolAddress,
+              `${amount}`
+            )
+          : await ocean.pool.addDTLiquidity(accountId, poolAddress, `${amount}`)
 
       setTxId(result?.transactionHash)
+      resetForm()
     } catch (error) {
       console.error(error.message)
       toast.error(error.message)
@@ -116,13 +118,15 @@ export default function Add({
     }
   }
 
-  function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
-    setAmount(e.target.value)
-  }
-
-  function handleMax() {
-    setAmount(amountMax)
-  }
+  const validationSchema = Yup.object().shape<{ amount: number }>({
+    amount: Yup.number()
+      .min(1, 'Must be more or equal to 1')
+      .max(
+        Number(amountMax),
+        `Must be less or equal to ${Number(amountMax).toFixed(2)}`
+      )
+      .required('Required')
+  })
 
   // TODO: this is only a prototype and is an accessibility nightmare.
   // Needs to be refactored to either use custom select element instead of tippy.js,
@@ -139,73 +143,100 @@ export default function Add({
     <>
       <Header title={content.title} backAction={() => setShowAdd(false)} />
 
-      <div className={styles.addInput}>
-        <div className={styles.userLiquidity}>
-          <div>
-            <span>Available:</span>
-            {coin === 'OCEAN' ? (
-              <PriceUnit price={balance.ocean} symbol="OCEAN" small />
-            ) : (
-              <PriceUnit price={dtBalance} symbol={dtSymbol} small />
-            )}
-          </div>
-          <div>
-            <span>Maximum:</span>
-            <PriceUnit price={amountMax} symbol={coin} small />
-          </div>
-        </div>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, { setSubmitting, resetForm }) => {
+          console.log('Hello')
+          // kick off
+          await handleAddLiquidity(values.amount, resetForm)
+          setSubmitting(false)
+        }}
+      >
+        {({ values, setFieldValue, submitForm }) => {
+          const newPoolTokens =
+            totalBalance &&
+            ((values.amount / Number(totalBalance.ocean)) * 100).toFixed(2)
 
-        <InputElement
-          value={amount}
-          name="coin"
-          type="number"
-          max={amountMax}
-          prefix={
-            <Tooltip
-              content={<CoinSelect />}
-              trigger="click focus"
-              className={styles.coinswitch}
-              placement="bottom"
-            >
-              {coin}
-              <Caret aria-hidden="true" />
-            </Tooltip>
-          }
-          placeholder="0"
-          onChange={handleAmountChange}
-        />
+          const newPoolShare =
+            totalBalance &&
+            ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
 
-        {(balance.ocean || dtBalance) > amount && (
-          <Button
-            className={styles.buttonMax}
-            style="text"
-            size="small"
-            onClick={handleMax}
-          >
-            Use Max
-          </Button>
-        )}
-      </div>
+          return (
+            <>
+              <div className={styles.addInput}>
+                <div className={styles.userLiquidity}>
+                  <div>
+                    <span>Available:</span>
+                    {coin === 'OCEAN' ? (
+                      <PriceUnit price={balance.ocean} symbol="OCEAN" small />
+                    ) : (
+                      <PriceUnit price={dtBalance} symbol={dtSymbol} small />
+                    )}
+                  </div>
+                  <div>
+                    <span>Maximum:</span>
+                    <PriceUnit price={amountMax} symbol={coin} small />
+                  </div>
+                </div>
 
-      <div className={styles.output}>
-        <div>
-          <p>{content.output.titleIn}</p>
-          <Token symbol="pool shares" balance={newPoolTokens} />
-          <Token symbol="% of pool" balance={newPoolShare} />
-        </div>
-        <div>
-          <p>{content.output.titleOut}</p>
-          <Token symbol="% swap fee" balance={swapFee} />
-        </div>
-      </div>
+                <Field name="amount">
+                  {({ field }: { field: any }) => (
+                    <Input
+                      type="number"
+                      max={amountMax}
+                      prefix={
+                        <Tooltip
+                          content={<CoinSelect />}
+                          trigger="click focus"
+                          className={styles.coinswitch}
+                          placement="bottom"
+                        >
+                          {coin}
+                          <Caret aria-hidden="true" />
+                        </Tooltip>
+                      }
+                      placeholder="0"
+                      field={field}
+                    />
+                  )}
+                </Field>
 
-      <Actions
-        isLoading={isLoading}
-        loaderMessage="Adding Liquidity..."
-        actionName={content.action}
-        action={handleAddLiquidity}
-        txId={txId}
-      />
+                {(Number(balance.ocean) || dtBalance) > values.amount && (
+                  <Button
+                    className={styles.buttonMax}
+                    style="text"
+                    size="small"
+                    onClick={() => setFieldValue('amount', amountMax)}
+                  >
+                    Use Max
+                  </Button>
+                )}
+              </div>
+
+              <div className={styles.output}>
+                <div>
+                  <p>{content.output.titleIn}</p>
+                  <Token symbol="pool shares" balance={newPoolTokens} />
+                  <Token symbol="% of pool" balance={newPoolShare} />
+                </div>
+                <div>
+                  <p>{content.output.titleOut}</p>
+                  <Token symbol="% swap fee" balance={swapFee} />
+                </div>
+              </div>
+
+              <Actions
+                isLoading={isLoading}
+                loaderMessage="Adding Liquidity..."
+                actionName={content.action}
+                action={submitForm}
+                txId={txId}
+              />
+            </>
+          )
+        }}
+      </Formik>
     </>
   )
 }

From d70ebba20d8b11a561873b5197785752525040b5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 15 Oct 2020 14:09:02 +0200
Subject: [PATCH 03/12] error feedback

---
 src/components/atoms/Input/index.module.css         | 13 +++++++++----
 .../organisms/AssetActions/Pool/Add.module.css      |  4 ++++
 src/components/organisms/AssetActions/Pool/Add.tsx  |  4 +---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/atoms/Input/index.module.css b/src/components/atoms/Input/index.module.css
index 10cb7a97d..f7d68dd8a 100644
--- a/src/components/atoms/Input/index.module.css
+++ b/src/components/atoms/Input/index.module.css
@@ -13,12 +13,17 @@
 }
 
 .error {
-  font-size: var(--font-size-small);
-  color: var(--brand-alert-red);
+  display: inline-block;
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-bold);
+  color: var(--brand-white);
+  background: var(--brand-alert-red);
+  border-radius: var(--border-radius);
+  padding: 0 0.4rem;
   position: absolute;
-  text-align: right;
   right: 0;
-  top: 0;
+  bottom: -0.75rem;
+  z-index: 1;
 }
 
 .hasError label {
diff --git a/src/components/organisms/AssetActions/Pool/Add.module.css b/src/components/organisms/AssetActions/Pool/Add.module.css
index 3aab2d915..5540ba65c 100644
--- a/src/components/organisms/AssetActions/Pool/Add.module.css
+++ b/src/components/organisms/AssetActions/Pool/Add.module.css
@@ -14,6 +14,10 @@
   text-align: center;
 }
 
+.addInput div[class*='field'] {
+  margin-bottom: 0;
+}
+
 .buttonMax {
   position: absolute;
   font-size: var(--font-size-mini);
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 22ad1f065..3d3b39ad8 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -3,7 +3,6 @@ import styles from './Add.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
 import { toast } from 'react-toastify'
-import InputElement from '../../../atoms/Input/InputElement'
 import Button from '../../../atoms/Button'
 import Token from './Token'
 import { Balance } from './'
@@ -40,7 +39,7 @@ const contentQuery = graphql`
 `
 
 const initialValues: Partial<{ amount: number }> = {
-  amount: 1
+  amount: undefined
 }
 
 export default function Add({
@@ -147,7 +146,6 @@ export default function Add({
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={async (values, { setSubmitting, resetForm }) => {
-          console.log('Hello')
           // kick off
           await handleAddLiquidity(values.amount, resetForm)
           setSubmitting(false)

From 823513d4ee3ac673e2244455a44edf22252f9903 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 15 Oct 2020 14:16:38 +0200
Subject: [PATCH 04/12] error fixes

---
 src/components/atoms/Input/index.module.css        | 10 +++++++---
 src/components/atoms/Input/index.tsx               |  2 +-
 src/components/organisms/AssetActions/Pool/Add.tsx |  3 ++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/atoms/Input/index.module.css b/src/components/atoms/Input/index.module.css
index f7d68dd8a..8f4536e50 100644
--- a/src/components/atoms/Input/index.module.css
+++ b/src/components/atoms/Input/index.module.css
@@ -15,14 +15,15 @@
 .error {
   display: inline-block;
   font-size: var(--font-size-mini);
+  line-height: 1.2;
   font-weight: var(--font-weight-bold);
   color: var(--brand-white);
   background: var(--brand-alert-red);
   border-radius: var(--border-radius);
-  padding: 0 0.4rem;
+  padding: 0.2rem 0.4rem;
   position: absolute;
   right: 0;
-  bottom: -0.75rem;
+  top: 85%;
   z-index: 1;
 }
 
@@ -31,7 +32,10 @@
 }
 
 .hasError input,
+.hasError input:focus,
 .hasError select,
-.hasError textarea {
+.hasError textarea,
+.hasError [class*='prefix'],
+.hasError [class*='postfix'] {
   border-color: var(--brand-alert-red);
 }
diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 68b49877f..875bdf65d 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -71,7 +71,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
       </Label>
       <InputElement small={small} {...field} {...props} />
 
-      {field && field.name !== 'price' && (
+      {field && field.name !== 'price' && hasError && (
         <div className={styles.error}>
           <ErrorMessage name={field.name} />
         </div>
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 3d3b39ad8..d5e87cbfd 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -179,7 +179,7 @@ export default function Add({
                 </div>
 
                 <Field name="amount">
-                  {({ field }: { field: any }) => (
+                  {({ field, form }: { field: any; form: any }) => (
                     <Input
                       type="number"
                       max={amountMax}
@@ -196,6 +196,7 @@ export default function Add({
                       }
                       placeholder="0"
                       field={field}
+                      form={form}
                     />
                   )}
                 </Field>

From f60163b54d840ef1d3496c54842e773ee3af9dfa Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 15 Oct 2020 14:35:38 +0200
Subject: [PATCH 05/12] cleanup

---
 .../organisms/AssetActions/Pool/Add.tsx       | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index d5e87cbfd..d9b04c998 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -12,7 +12,7 @@ import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
 import { graphql, useStaticQuery } from 'gatsby'
 import * as Yup from 'yup'
-import { Field, Formik } from 'formik'
+import { Field, FieldInputProps, Formik } from 'formik'
 import Input from '../../../atoms/Input'
 
 const contentQuery = graphql`
@@ -38,7 +38,11 @@ const contentQuery = graphql`
   }
 `
 
-const initialValues: Partial<{ amount: number }> = {
+interface FormAddLiquidity {
+  amount: number
+}
+
+const initialValues: FormAddLiquidity = {
   amount: undefined
 }
 
@@ -64,11 +68,22 @@ export default function Add({
 
   const { ocean, accountId, balance } = useOcean()
   const [txId, setTxId] = useState<string>('')
-  const [isLoading, setIsLoading] = useState<boolean>()
   const [coin, setCoin] = useState<string>('OCEAN')
   const [dtBalance, setDtBalance] = useState<string>()
   const [amountMax, setAmountMax] = useState<string>()
 
+  // Live validation rules
+  // https://github.com/jquense/yup#number
+  const validationSchema = Yup.object().shape<FormAddLiquidity>({
+    amount: Yup.number()
+      .min(1, 'Must be more or equal to 1')
+      .max(
+        Number(amountMax),
+        `Must be less or equal to ${Number(amountMax).toFixed(2)}`
+      )
+      .required('Required')
+  })
+
   // Get datatoken balance when datatoken selected
   useEffect(() => {
     if (!ocean || coin === 'OCEAN') return
@@ -94,9 +109,8 @@ export default function Add({
     getMaximum()
   }, [ocean, poolAddress, coin])
 
+  // Submit
   async function handleAddLiquidity(amount: number, resetForm: () => void) {
-    setIsLoading(true)
-
     try {
       const result =
         coin === 'OCEAN'
@@ -112,21 +126,9 @@ export default function Add({
     } catch (error) {
       console.error(error.message)
       toast.error(error.message)
-    } finally {
-      setIsLoading(false)
     }
   }
 
-  const validationSchema = Yup.object().shape<{ amount: number }>({
-    amount: Yup.number()
-      .min(1, 'Must be more or equal to 1')
-      .max(
-        Number(amountMax),
-        `Must be less or equal to ${Number(amountMax).toFixed(2)}`
-      )
-      .required('Required')
-  })
-
   // TODO: this is only a prototype and is an accessibility nightmare.
   // Needs to be refactored to either use custom select element instead of tippy.js,
   // or use <button> in this implementation.
@@ -146,12 +148,13 @@ export default function Add({
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={async (values, { setSubmitting, resetForm }) => {
-          // kick off
           await handleAddLiquidity(values.amount, resetForm)
           setSubmitting(false)
         }}
       >
-        {({ values, setFieldValue, submitForm }) => {
+        {({ values, isSubmitting, setFieldValue, submitForm }) => {
+          // TODO: move these 2 const to some useEffect() so it dos not
+          // constantly re-renders all the time
           const newPoolTokens =
             totalBalance &&
             ((values.amount / Number(totalBalance.ocean)) * 100).toFixed(2)
@@ -201,7 +204,8 @@ export default function Add({
                   )}
                 </Field>
 
-                {(Number(balance.ocean) || dtBalance) > values.amount && (
+                {(Number(balance.ocean) || dtBalance) >
+                  (values.amount || 0) && (
                   <Button
                     className={styles.buttonMax}
                     style="text"
@@ -226,7 +230,7 @@ export default function Add({
               </div>
 
               <Actions
-                isLoading={isLoading}
+                isLoading={isSubmitting}
                 loaderMessage="Adding Liquidity..."
                 actionName={content.action}
                 action={submitForm}

From 51493ef54890b0b27f16643b356d293c5e7c20c5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 15 Oct 2020 15:39:40 +0200
Subject: [PATCH 06/12] account for user balance for maximum check

---
 .../organisms/AssetActions/Pool/Add.tsx       | 33 ++++++++++++++++---
 src/components/pages/Publish/PublishForm.tsx  |  6 ++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index d9b04c998..8ec83092d 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import React, { ReactElement, useState, useEffect, ChangeEvent } from 'react'
 import styles from './Add.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
@@ -12,7 +12,7 @@ import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
 import { graphql, useStaticQuery } from 'gatsby'
 import * as Yup from 'yup'
-import { Field, FieldInputProps, Formik } from 'formik'
+import { Field, Formik } from 'formik'
 import Input from '../../../atoms/Input'
 
 const contentQuery = graphql`
@@ -100,14 +100,23 @@ export default function Add({
     if (!ocean) return
 
     async function getMaximum() {
-      const amountMax =
+      const amountMaxPool =
         coin === 'OCEAN'
           ? await ocean.pool.getOceanMaxAddLiquidity(poolAddress)
           : await ocean.pool.getDTMaxAddLiquidity(poolAddress)
+
+      const amountMax =
+        coin === 'OCEAN'
+          ? Number(balance.ocean) > Number(amountMaxPool)
+            ? amountMaxPool
+            : balance.ocean
+          : Number(dtBalance) > Number(amountMaxPool)
+          ? amountMaxPool
+          : dtBalance
       setAmountMax(amountMax)
     }
     getMaximum()
-  }, [ocean, poolAddress, coin])
+  }, [ocean, poolAddress, coin, dtBalance, balance.ocean])
 
   // Submit
   async function handleAddLiquidity(amount: number, resetForm: () => void) {
@@ -152,7 +161,15 @@ export default function Add({
           setSubmitting(false)
         }}
       >
-        {({ values, isSubmitting, setFieldValue, submitForm }) => {
+        {({
+          values,
+          touched,
+          setTouched,
+          isSubmitting,
+          setFieldValue,
+          submitForm,
+          handleChange
+        }) => {
           // TODO: move these 2 const to some useEffect() so it dos not
           // constantly re-renders all the time
           const newPoolTokens =
@@ -186,6 +203,7 @@ export default function Add({
                     <Input
                       type="number"
                       max={amountMax}
+                      value={`${values.amount}`}
                       prefix={
                         <Tooltip
                           content={<CoinSelect />}
@@ -200,6 +218,11 @@ export default function Add({
                       placeholder="0"
                       field={field}
                       form={form}
+                      onChange={(e) => {
+                        // Workaround so validation kicks in on first touch
+                        !touched?.amount && setTouched({ amount: true })
+                        handleChange(e)
+                      }}
                     />
                   )}
                 </Field>
diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx
index 568594034..56121f1ce 100644
--- a/src/components/pages/Publish/PublishForm.tsx
+++ b/src/components/pages/Publish/PublishForm.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, FormEvent } from 'react'
 import styles from './PublishForm.module.css'
 import { useOcean } from '@oceanprotocol/react'
-import { useFormikContext, Form, Field } from 'formik'
+import { useFormikContext, Field } 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 PublishForm({
   }
 
   return (
-    <Form
+    <form
       className={styles.form}
       // do we need this?
       onChange={() => status === 'empty' && setStatus(null)}
@@ -61,6 +61,6 @@ export default function PublishForm({
           </Button>
         )}
       </footer>
-    </Form>
+    </form>
   )
 }

From 997db111bdb037bf1deb78e64eeac00c372993e3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 16 Oct 2020 09:00:16 +0200
Subject: [PATCH 07/12] new coin selection

---
 .../atoms/Input/InputElement.module.css       |  5 ++--
 .../AssetActions/Pool/Add.module.css          | 24 +++--------------
 .../organisms/AssetActions/Pool/Add.tsx       | 26 +++----------------
 .../AssetActions/Pool/CoinSelect.module.css   | 25 ++++++++++++++++++
 .../AssetActions/Pool/CoinSelect.tsx          | 24 +++++++++++++++++
 5 files changed, 58 insertions(+), 46 deletions(-)
 create mode 100644 src/components/organisms/AssetActions/Pool/CoinSelect.module.css
 create mode 100644 src/components/organisms/AssetActions/Pool/CoinSelect.tsx

diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index 8d98cb4bd..f51f1b3f1 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -11,7 +11,7 @@
   margin: 0;
   border-radius: var(--border-radius);
   transition: 0.2s ease-out;
-  min-height: 43px;
+  height: 43px;
   min-width: 0;
   appearance: none;
   display: block;
@@ -179,7 +179,7 @@
 .prefix,
 .postfix {
   border: 1px solid var(--brand-grey-lighter);
-  min-height: 43px;
+  height: 43px;
   display: flex;
   align-items: center;
   padding-left: calc(var(--spacer) / 4);
@@ -188,6 +188,7 @@
   font-size: var(--font-size-small);
   transition: border 0.2s ease-out;
   white-space: nowrap;
+  position: relative;
 }
 
 .prefix {
diff --git a/src/components/organisms/AssetActions/Pool/Add.module.css b/src/components/organisms/AssetActions/Pool/Add.module.css
index 5540ba65c..655e4bda7 100644
--- a/src/components/organisms/AssetActions/Pool/Add.module.css
+++ b/src/components/organisms/AssetActions/Pool/Add.module.css
@@ -1,8 +1,8 @@
 .addInput {
   margin: 0 auto calc(var(--spacer) / 1.5) auto;
   background: var(--brand-grey-dimmed);
-  padding: var(--spacer) calc(var(--spacer) * 3) calc(var(--spacer) * 1.2)
-    calc(var(--spacer) * 3);
+  padding: var(--spacer) calc(var(--spacer) * 2.5) calc(var(--spacer) * 1.2)
+    calc(var(--spacer) * 2.5);
   border-bottom: 1px solid var(--brand-grey-lighter);
   margin-top: -2rem;
   margin-left: -2rem;
@@ -22,7 +22,7 @@
   position: absolute;
   font-size: var(--font-size-mini);
   bottom: calc(var(--spacer) / 2);
-  right: calc(var(--spacer) * 3);
+  right: calc(var(--spacer) * 2.5);
 }
 
 .userLiquidity > div {
@@ -42,24 +42,6 @@
   transform-origin: right center;
 }
 
-.coinswitch,
-.coinPopover li {
-  cursor: pointer;
-}
-
-.coinswitch svg {
-  width: 0.6em;
-  height: 0.6em;
-  display: inline-block;
-  fill: currentColor;
-  margin-right: 0.5rem;
-  margin-left: 0.25rem;
-}
-
-.coinPopover li {
-  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
-}
-
 .output {
   display: grid;
   gap: var(--spacer);
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 8ec83092d..4726e0d05 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, useEffect, ChangeEvent } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './Add.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
@@ -8,12 +8,11 @@ import Token from './Token'
 import { Balance } from './'
 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'
 import * as Yup from 'yup'
 import { Field, Formik } from 'formik'
 import Input from '../../../atoms/Input'
+import CoinSelect from './CoinSelect'
 
 const contentQuery = graphql`
   query PoolAddQuery {
@@ -138,17 +137,6 @@ export default function Add({
     }
   }
 
-  // TODO: this is only a prototype and is an accessibility nightmare.
-  // Needs to be refactored to either use custom select element instead of tippy.js,
-  // or use <button> in this implementation.
-  // Also needs to be closed when users click an option.
-  const CoinSelect = () => (
-    <ul className={styles.coinPopover}>
-      <li onClick={() => setCoin('OCEAN')}>OCEAN</li>
-      <li onClick={() => setCoin(dtSymbol)}>{dtSymbol}</li>
-    </ul>
-  )
-
   return (
     <>
       <Header title={content.title} backAction={() => setShowAdd(false)} />
@@ -205,15 +193,7 @@ export default function Add({
                       max={amountMax}
                       value={`${values.amount}`}
                       prefix={
-                        <Tooltip
-                          content={<CoinSelect />}
-                          trigger="click focus"
-                          className={styles.coinswitch}
-                          placement="bottom"
-                        >
-                          {coin}
-                          <Caret aria-hidden="true" />
-                        </Tooltip>
+                        <CoinSelect dtSymbol={dtSymbol} setCoin={setCoin} />
                       }
                       placeholder="0"
                       field={field}
diff --git a/src/components/organisms/AssetActions/Pool/CoinSelect.module.css b/src/components/organisms/AssetActions/Pool/CoinSelect.module.css
new file mode 100644
index 000000000..0b459f699
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/CoinSelect.module.css
@@ -0,0 +1,25 @@
+.coinSelect {
+  composes: select from '../../../atoms/Input/InputElement.module.css';
+  font-size: var(--font-size-small);
+  border: none;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+  background-color: var(--brand-grey-dimmed);
+  width: auto;
+  padding: 0 1.25rem 0 0.25rem;
+  height: 41px;
+  text-align: center;
+
+  /* custom arrow, without the divider line */
+  background-image: linear-gradient(
+      45deg,
+      transparent 50%,
+      var(--brand-purple) 50%
+    ),
+    linear-gradient(135deg, var(--brand-grey) 50%, transparent 50%);
+  background-position: calc(100% - 14px) 1.2rem, calc(100% - 9px) 1.2rem, 100% 0;
+}
+
+.option {
+  color: var(--brand-grey-dark);
+}
diff --git a/src/components/organisms/AssetActions/Pool/CoinSelect.tsx b/src/components/organisms/AssetActions/Pool/CoinSelect.tsx
new file mode 100644
index 000000000..bae29b724
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/CoinSelect.tsx
@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react'
+import styles from './CoinSelect.module.css'
+
+export default function CoinSelect({
+  dtSymbol,
+  setCoin
+}: {
+  dtSymbol: string
+  setCoin: (coin: string) => void
+}): ReactElement {
+  return (
+    <select
+      className={styles.coinSelect}
+      onChange={(e) => setCoin(e.target.value)}
+    >
+      <option className={styles.option} value="OCEAN">
+        OCEAN
+      </option>
+      <option className={styles.option} value={dtSymbol}>
+        {dtSymbol}
+      </option>
+    </select>
+  )
+}

From f6b8208906c8dbcb3161cfc9e09744a124288b4f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 16 Oct 2020 09:03:54 +0200
Subject: [PATCH 08/12] textarea fix

---
 src/components/atoms/Input/InputElement.module.css | 5 +++++
 src/components/atoms/Input/InputElement.tsx        | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index f51f1b3f1..5c9755953 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -49,6 +49,11 @@
   display: none;
 }
 
+.textarea {
+  composes: input;
+  height: auto;
+}
+
 .select {
   composes: input;
   height: 43px;
diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 3d1acba98..61abd511e 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -57,7 +57,12 @@ export default function InputElement({
       )
     case 'textarea':
       return (
-        <textarea name={name} id={name} className={styles.input} {...props} />
+        <textarea
+          name={name}
+          id={name}
+          className={styles.textarea}
+          {...props}
+        />
       )
     case 'radio':
     case 'checkbox':

From 006eef26e6ee82435787eb3732d6b9b1be8e34cc Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 16 Oct 2020 09:11:16 +0200
Subject: [PATCH 09/12] prefix display fixes

---
 src/components/atoms/Input/InputElement.module.css   |  2 +-
 .../molecules/FormFields/Price/Dynamic.module.css    | 12 ++++++------
 .../molecules/FormFields/Price/Dynamic.tsx           | 10 +++++++---
 .../AssetActions/Pool/CoinSelect.module.css          |  1 +
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css
index 5c9755953..78898ceb6 100644
--- a/src/components/atoms/Input/InputElement.module.css
+++ b/src/components/atoms/Input/InputElement.module.css
@@ -189,7 +189,7 @@
   align-items: center;
   padding-left: calc(var(--spacer) / 4);
   padding-right: calc(var(--spacer) / 4);
-  color: var(--color-secondary);
+  color: var(--brand-grey);
   font-size: var(--font-size-small);
   transition: border 0.2s ease-out;
   white-space: nowrap;
diff --git a/src/components/molecules/FormFields/Price/Dynamic.module.css b/src/components/molecules/FormFields/Price/Dynamic.module.css
index 9eb4d843b..226b9ae74 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.module.css
+++ b/src/components/molecules/FormFields/Price/Dynamic.module.css
@@ -11,18 +11,18 @@
 
 .balance {
   text-align: center;
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-small) !important;
   border: 1px solid var(--brand-grey-lighter);
   border-right: 0;
   margin-right: -3px;
-  padding: calc(var(--spacer) / 4.5) calc(var(--spacer) / 2);
+  height: 35px;
+  padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2)
+    calc(var(--spacer) / 4.5) calc(var(--spacer) / 2);
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
   color: var(--color-secondary);
-}
-
-.balance strong {
-  color: var(--brand-grey);
+  display: flex;
+  align-items: center;
 }
 
 .title {
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index 79ac42111..75b15da25 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -1,4 +1,5 @@
 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'
@@ -66,9 +67,12 @@ export default function Dynamic({
 
       <aside className={styles.wallet}>
         {balance?.ocean && (
-          <div className={styles.balance}>
-            OCEAN <strong>{balance.ocean}</strong>
-          </div>
+          <PriceUnit
+            className={styles.balance}
+            price={balance.ocean}
+            symbol="OCEAN"
+            small
+          />
         )}
         <Wallet />
       </aside>
diff --git a/src/components/organisms/AssetActions/Pool/CoinSelect.module.css b/src/components/organisms/AssetActions/Pool/CoinSelect.module.css
index 0b459f699..2bdb18282 100644
--- a/src/components/organisms/AssetActions/Pool/CoinSelect.module.css
+++ b/src/components/organisms/AssetActions/Pool/CoinSelect.module.css
@@ -1,6 +1,7 @@
 .coinSelect {
   composes: select from '../../../atoms/Input/InputElement.module.css';
   font-size: var(--font-size-small);
+  font-weight: var(--font-weight-base);
   border: none;
   margin-left: -0.5rem;
   margin-right: -0.5rem;

From c72e01c9ec0c3970eddfdf50c868d95a28919d0e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 16 Oct 2020 09:36:21 +0200
Subject: [PATCH 10/12] copy

---
 src/components/atoms/Input/index.tsx           |  4 ++--
 .../organisms/AssetActions/Pool/Add.tsx        | 18 +++++++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 875bdf65d..75d98a49f 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -3,7 +3,7 @@ import InputElement from './InputElement'
 import Help from './Help'
 import Label from './Label'
 import styles from './index.module.css'
-import { ErrorMessage } from 'formik'
+import { ErrorMessage, FieldInputProps } from 'formik'
 import classNames from 'classnames/bind'
 
 const cx = classNames.bind(styles)
@@ -33,7 +33,7 @@ export interface InputProps {
   max?: string
   disabled?: boolean
   readOnly?: boolean
-  field?: any
+  field?: FieldInputProps<any>
   form?: any
   prefix?: string | ReactElement
   postfix?: string | ReactElement
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 4726e0d05..457f44798 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -10,7 +10,7 @@ import PriceUnit from '../../../atoms/Price/PriceUnit'
 import Actions from './Actions'
 import { graphql, useStaticQuery } from 'gatsby'
 import * as Yup from 'yup'
-import { Field, Formik } from 'formik'
+import { Field, FieldInputProps, Formik } from 'formik'
 import Input from '../../../atoms/Input'
 import CoinSelect from './CoinSelect'
 
@@ -66,8 +66,8 @@ export default function Add({
   const content = data.content.edges[0].node.childContentJson.pool.add
 
   const { ocean, accountId, balance } = useOcean()
-  const [txId, setTxId] = useState<string>('')
-  const [coin, setCoin] = useState<string>('OCEAN')
+  const [txId, setTxId] = useState<string>()
+  const [coin, setCoin] = useState('OCEAN')
   const [dtBalance, setDtBalance] = useState<string>()
   const [amountMax, setAmountMax] = useState<string>()
 
@@ -78,7 +78,7 @@ export default function Add({
       .min(1, 'Must be more or equal to 1')
       .max(
         Number(amountMax),
-        `Must be less or equal to ${Number(amountMax).toFixed(2)}`
+        `Maximum you can add is ${Number(amountMax).toFixed(2)} ${coin}`
       )
       .required('Required')
   })
@@ -158,8 +158,6 @@ export default function Add({
           submitForm,
           handleChange
         }) => {
-          // TODO: move these 2 const to some useEffect() so it dos not
-          // constantly re-renders all the time
           const newPoolTokens =
             totalBalance &&
             ((values.amount / Number(totalBalance.ocean)) * 100).toFixed(2)
@@ -187,7 +185,13 @@ export default function Add({
                 </div>
 
                 <Field name="amount">
-                  {({ field, form }: { field: any; form: any }) => (
+                  {({
+                    field,
+                    form
+                  }: {
+                    field: FieldInputProps<FormAddLiquidity>
+                    form: any
+                  }) => (
                     <Input
                       type="number"
                       max={amountMax}

From f33b3bb023b3d39f2b5a6196f161bdbaa606e380 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 16 Oct 2020 10:00:16 +0200
Subject: [PATCH 11/12] all successes need confetti

---
 .../atoms/SuccessConfetti.module.css          |  4 +++
 .../Success.tsx => atoms/SuccessConfetti.tsx} | 29 ++++++++-----------
 .../organisms/AssetActions/Pool/Actions.tsx   | 19 ++++++------
 src/components/pages/Publish/Feedback.tsx     | 15 ++++++++--
 .../pages/Publish/Success.module.css          |  3 --
 5 files changed, 38 insertions(+), 32 deletions(-)
 create mode 100644 src/components/atoms/SuccessConfetti.module.css
 rename src/components/{pages/Publish/Success.tsx => atoms/SuccessConfetti.tsx} (58%)
 delete mode 100644 src/components/pages/Publish/Success.module.css

diff --git a/src/components/atoms/SuccessConfetti.module.css b/src/components/atoms/SuccessConfetti.module.css
new file mode 100644
index 000000000..e28b14524
--- /dev/null
+++ b/src/components/atoms/SuccessConfetti.module.css
@@ -0,0 +1,4 @@
+.action {
+  text-align: center;
+  display: block;
+}
diff --git a/src/components/pages/Publish/Success.tsx b/src/components/atoms/SuccessConfetti.tsx
similarity index 58%
rename from src/components/pages/Publish/Success.tsx
rename to src/components/atoms/SuccessConfetti.tsx
index c6f94e130..25d8f7052 100644
--- a/src/components/pages/Publish/Success.tsx
+++ b/src/components/atoms/SuccessConfetti.tsx
@@ -1,8 +1,7 @@
-import Alert from '../../atoms/Alert'
-import Button from '../../atoms/Button'
-import React, { ReactElement, useEffect } from 'react'
+import Alert from './Alert'
+import React, { ReactElement, ReactNode, useEffect } from 'react'
 import { confetti } from 'dom-confetti'
-import styles from './Success.module.css'
+import styles from './SuccessConfetti.module.css'
 
 const confettiConfig = {
   angle: 90,
@@ -24,33 +23,29 @@ const confettiConfig = {
   ]
 }
 
-export default function Success({
+export default function SuccessConfetti({
   success,
-  did
+  action
 }: {
   success: string
-  did: string
+  action: ReactNode
 }): ReactElement {
   // Have some confetti upon success
   useEffect(() => {
     if (!success || typeof window === 'undefined') return
 
-    const startElement: HTMLElement = document.querySelector('a[data-confetti]')
+    const startElement: HTMLElement = document.querySelector(
+      'span[data-confetti]'
+    )
     confetti(startElement, confettiConfig)
   }, [success])
 
   return (
     <>
       <Alert text={success} state="success" />
-      <Button
-        style="primary"
-        size="small"
-        href={`/asset/${did}`}
-        className={styles.action}
-        data-confetti
-      >
-        Go to data set →
-      </Button>
+      <span className={styles.action} data-confetti>
+        {action}
+      </span>
     </>
   )
 }
diff --git a/src/components/organisms/AssetActions/Pool/Actions.tsx b/src/components/organisms/AssetActions/Pool/Actions.tsx
index 29d854ae4..df1e7adcb 100644
--- a/src/components/organisms/AssetActions/Pool/Actions.tsx
+++ b/src/components/organisms/AssetActions/Pool/Actions.tsx
@@ -1,9 +1,9 @@
 import React, { ReactElement } from 'react'
 import Loader from '../../../atoms/Loader'
 import Button from '../../../atoms/Button'
-import Alert from '../../../atoms/Alert'
 import styles from './Actions.module.css'
 import EtherscanLink from '../../../atoms/EtherscanLink'
+import SuccessConfetti from '../../../atoms/SuccessConfetti'
 
 export default function Actions({
   isLoading,
@@ -30,15 +30,14 @@ export default function Actions({
         )}
       </div>
       {txId && (
-        <>
-          <Alert
-            text={`Successfully added liquidity. Transaction ID: ${txId}`}
-            state="success"
-          />
-          <EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
-            Etherscan
-          </EtherscanLink>
-        </>
+        <SuccessConfetti
+          success="Successfully added liquidity."
+          action={
+            <EtherscanLink network="rinkeby" path={`/tx/${txId}`}>
+              See on Etherscan
+            </EtherscanLink>
+          }
+        />
       )}
     </>
   )
diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx
index 3ea69603a..e4e0ea011 100644
--- a/src/components/pages/Publish/Feedback.tsx
+++ b/src/components/pages/Publish/Feedback.tsx
@@ -1,9 +1,9 @@
 import Alert from '../../atoms/Alert'
-import Success from './Success'
 import Button from '../../atoms/Button'
 import Loader from '../../atoms/Loader'
 import React, { ReactElement } from 'react'
 import styles from './Feedback.module.css'
+import SuccessConfetti from '../../atoms/SuccessConfetti'
 
 export default function Feedback({
   error,
@@ -18,6 +18,17 @@ export default function Feedback({
   publishStepText: string
   setError: (error: string) => void
 }): ReactElement {
+  const SuccessAction = () => (
+    <Button
+      style="primary"
+      size="small"
+      href={`/asset/${did}`}
+      className={styles.action}
+    >
+      Go to data set →
+    </Button>
+  )
+
   return (
     <div className={styles.feedback}>
       <div className={styles.box}>
@@ -35,7 +46,7 @@ export default function Feedback({
             </Button>
           </>
         ) : success ? (
-          <Success success={success} did={did} />
+          <SuccessConfetti success={success} action={<SuccessAction />} />
         ) : (
           <Loader message={publishStepText} />
         )}
diff --git a/src/components/pages/Publish/Success.module.css b/src/components/pages/Publish/Success.module.css
deleted file mode 100644
index 9c49ec74c..000000000
--- a/src/components/pages/Publish/Success.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.action {
-  margin-top: calc(var(--spacer) / 1.5);
-}

From d6ab40d188a706e3a1a106f6bff40e08bd66e891 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 16 Oct 2020 10:00:30 +0200
Subject: [PATCH 12/12] button copy

---
 content/price.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/price.json b/content/price.json
index a788c17d7..5e76f8125 100644
--- a/content/price.json
+++ b/content/price.json
@@ -10,7 +10,7 @@
         "titleIn": "You will receive",
         "titleOut": "You will earn"
       },
-      "action": "Supply"
+      "action": "Approve & Supply"
     },
     "remove": {
       "title": "Remove Liquidity",
@@ -20,7 +20,7 @@
         "titleIn": "You will spend",
         "titleOut": "You will receive"
       },
-      "action": "Remove"
+      "action": "Approve & Remove"
     }
   }
 }