add remove screen functionality

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

@@ -3,7 +3,6 @@ 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({
@@ -16,17 +15,16 @@ export default function Add({
   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)
   }
 
+  function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
+    setAmount(e.target.value)
+  }
+
   return (
     <div className={styles.add}>
       <Button

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

@@ -1,13 +1,35 @@
-import React, { ReactElement } from 'react'
+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'
 
 export default function Remove({
-  setShowRemove
+  setShowRemove,
+  poolAddress
 }: {
   setShowRemove: (show: boolean) => void
+  poolAddress: string
 }): ReactElement {
+  const { ocean, accountId } = useOcean()
+  const [amount, setAmount] = useState<string>()
+
+  const maximumPoolShares = '?'
+
+  async function handleRemoveLiquidity() {
+    await ocean.pool.removeOceanLiquidity(
+      accountId,
+      poolAddress,
+      amount,
+      maximumPoolShares
+    )
+  }
+
+  function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
+    setAmount(e.target.value)
+  }
+
   return (
     <div className={styles.remove}>
       <Button
@@ -18,7 +40,26 @@ export default function Remove({
       >
         ← Back
       </Button>
+
       <h3 className={stylesIndex.title}>Remove 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={() => handleRemoveLiquidity()}
+      >
+        Remove
+      </Button>
     </div>
   )
 }

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

@@ -85,7 +85,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           poolAddress={poolAddress}
         />
       ) : showRemove ? (
-        <Remove setShowRemove={setShowRemove} />
+        <Remove setShowRemove={setShowRemove} poolAddress={poolAddress} />
       ) : (
         <>
           <div className={styles.dataToken}>