add interaction

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

@@ -4,6 +4,8 @@ import stylesIndex from './index.module.css'
 import Button from '../../../atoms/Button'
 import Input from '../../../atoms/Input'
 import { useOcean } from '@oceanprotocol/react'
+import Header from './Header'
+import Loader from '../../../atoms/Loader'
 
 export default function Add({
   setShowAdd,
@@ -16,9 +18,18 @@ export default function Add({
 }): ReactElement {
   const { ocean, accountId } = useOcean()
   const [amount, setAmount] = useState<string>()
+  const [isLoading, setIsLoading] = useState<boolean>()
+  const [error, setError] = useState<string>()
 
   async function handleAddLiquidity() {
-    await ocean.pool.addOceanLiquidity(accountId, poolAddress, amount)
+    setIsLoading(true)
+    const result = await ocean.pool.addOceanLiquidity(
+      accountId,
+      poolAddress,
+      amount
+    )
+    console.log(result)
+    setIsLoading(false)
   }
 
   function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
@@ -27,15 +38,7 @@ export default function Add({
 
   return (
     <div className={styles.add}>
-      <Button
+      <Header title="Add Liquidity" backAction={() => setShowAdd(false)} />
-        className={stylesIndex.back}
-        style="text"
-        size="small"
-        onClick={() => setShowAdd(false)}
-      >
-        ← Back
-      </Button>
-      <h3 className={stylesIndex.title}>Add Liquidity</h3>
 
       <Input
         name="ocean"
@@ -48,9 +51,19 @@ export default function Add({
 
       <p>You will receive:</p>
 
-      <Button style="primary" size="small" onClick={() => handleAddLiquidity()}>
+      <div className={stylesIndex.actions}>
+        {isLoading ? (
+          <Loader message="Adding Liquidity..." />
+        ) : (
+          <Button
+            style="primary"
+            size="small"
+            onClick={() => handleAddLiquidity()}
+          >
             Supply
           </Button>
+        )}
+      </div>
     </div>
   )
 }

src/components/organisms/AssetActions/Pool/Header.module.css

@@ -0,0 +1,15 @@
+.header {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--spacer);
+}
+
+.headerTitle {
+  font-size: var(--font-size-large);
+  margin: 0;
+  margin-right: auto;
+}
+
+.back {
+  margin-right: auto;
+}

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

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react'
+import styles from './Header.module.css'
+import Button from '../../../atoms/Button'
+
+export default function Header({
+  title,
+  backAction
+}: {
+  title: string
+  backAction: () => any
+}): ReactElement {
+  return (
+    <header className={styles.header}>
+      <Button
+        className={styles.back}
+        style="text"
+        size="small"
+        onClick={backAction}
+      >
+        ← Back
+      </Button>
+      <h3 className={styles.headerTitle}>{title}</h3>
+    </header>
+  )
+}

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

@@ -1,9 +1,9 @@
 import React, { ReactElement, useState, ChangeEvent } from 'react'
 import styles from './Remove.module.css'
-import stylesIndex from './index.module.css'
 import Button from '../../../atoms/Button'
 import Input from '../../../atoms/Input'
 import { useOcean } from '@oceanprotocol/react'
+import Header from './Header'
 
 export default function Remove({
   setShowRemove,
@@ -32,16 +32,11 @@ export default function Remove({
 
   return (
     <div className={styles.remove}>
-      <Button
+      <Header
-        className={stylesIndex.back}
+        title="Remove Liquidity"
-        style="text"
+        backAction={() => setShowRemove(false)}
-        size="small"
+      />
-        onClick={() => setShowRemove(false)}
-      >
-        ← Back
-      </Button>
 
-      <h3 className={stylesIndex.title}>Remove Liquidity</h3>
       <Input
         name="ocean"
         label="OCEAN"

src/components/organisms/AssetActions/Pool/index.module.css

@@ -24,6 +24,8 @@
 .tokens {
 }
 
+/* Shared Styles for all screens */
+
 .actions {
   margin-left: -2rem;
   margin-right: -2rem;
@@ -33,13 +35,11 @@
   padding-top: calc(var(--spacer) / 1.5);
   border-top: 1px solid var(--brand-grey-lighter);
   text-align: center;
+  display: flex;
+  justify-content: center;
 }
 
 .actions button {
   margin-left: calc(var(--spacer) / 4);
   margin-right: calc(var(--spacer) / 4);
 }
-
-.back {
-  margin-bottom: var(--spacer);
-}