prototype adding liquidity

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

@@ -1,13 +1,32 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, ChangeEvent } from 'react'
 import styles from './Add.module.css'
 import stylesIndex from './index.module.css'
 import Button from '../../../atoms/Button'
+import Input from '../../../atoms/Input'
+import { Ocean } from '@oceanprotocol/lib'
+import { useOcean } from '@oceanprotocol/react'
 
 export default function Add({
-  setShowAdd
+  setShowAdd,
+  dtSymbol,
+  poolAddress
 }: {
   setShowAdd: (show: boolean) => void
+  dtSymbol: string
+  poolAddress: string
 }): ReactElement {
+  const { ocean, accountId } = useOcean()
+
+  const [amount, setAmount] = useState<string>()
+
+  function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
+    setAmount(e.target.value)
+  }
+
+  async function handleAddLiquidity() {
+    await ocean.pool.addOceanLiquidity(accountId, poolAddress, amount)
+  }
+
   return (
     <div className={styles.add}>
       <Button
@@ -19,6 +38,21 @@ export default function Add({
         ← Back
       </Button>
       <h3 className={stylesIndex.title}>Add Liquidity</h3>
+
+      <Input
+        name="ocean"
+        label="OCEAN"
+        type="number"
+        placeholder="0"
+        onChange={handleAmountChange}
+      />
+      {/* <Input name="dt" label={dtSymbol} type="number" placeholder="0" /> */}
+
+      <p>You will receive:</p>
+
+      <Button style="primary" size="small" onClick={() => handleAddLiquidity()}>
+        Add
+      </Button>
     </div>
   )
 }

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

@@ -17,6 +17,7 @@ interface Balance {
 export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
   const { ocean, accountId } = useOcean()
   const { getBestPool } = useMetadata()
+  const [poolAddress, setPoolAddress] = useState<string>()
   const [totalBalance, setTotalBalance] = useState<Balance>()
   const [dtPrice, setDtPrice] = useState<string>()
   const [dtSymbol, setDtSymbol] = useState<string>()
@@ -32,6 +33,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
     async function init() {
       try {
         const { poolAddress } = await getBestPool(ddo.dataToken)
+        setPoolAddress(poolAddress)
 
         const dtSymbol = await ocean.datatokens.getSymbol(
           ddo.dataToken,
@@ -77,7 +79,11 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
       {isLoading ? (
         <Loader message="Retrieving pools..." />
       ) : showAdd ? (
-        <Add setShowAdd={setShowAdd} dtSymbol={dtSymbol} />
+        <Add
+          setShowAdd={setShowAdd}
+          dtSymbol={dtSymbol}
+          poolAddress={poolAddress}
+        />
       ) : showRemove ? (
         <Remove setShowRemove={setShowRemove} />
       ) : (