prototype

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

@@ -4,8 +4,19 @@
 
 .buttonMax {
   composes: buttonMax from './Add.module.css';
+  bottom: -1rem;
+  right: 0;
 }
 
 .userLiquidity {
   composes: userLiquidity from './Add.module.css';
 }
+
+.removeRow {
+  position: relative;
+  margin-bottom: var(--spacer);
+}
+
+.removeRow:last-child {
+  margin-bottom: 0;
+}

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

@@ -14,26 +14,33 @@ export default function Remove({
   setShowRemove,
   poolAddress,
   totalPoolTokens,
-  userLiquidity
+  userLiquidity,
+  dtSymbol
 }: {
   setShowRemove: (show: boolean) => void
   poolAddress: string
   totalPoolTokens: string
   userLiquidity: Balance
+  dtSymbol: string
 }): ReactElement {
   const { ocean, accountId } = useOcean()
-  const [amount, setAmount] = useState('')
+  const [amountOcean, setAmountOcean] = useState('')
+  const [amountDatatoken, setAmountDatatoken] = useState('')
   const [isLoading, setIsLoading] = useState<boolean>()
   const [txId, setTxId] = useState<string>('')
 
   async function handleRemoveLiquidity() {
     setIsLoading(true)
 
+    // TODO: can remove OCEAN & DT in one transaction?
+    // exitswapExternAmountOut? exitswapPoolAmountIn?
+    // TODO: when user hits 'use max', use pool.exitPool()
+
     try {
       const result = await ocean.pool.removeOceanLiquidity(
         accountId,
         poolAddress,
-        amount,
+        amountOcean,
         totalPoolTokens
       )
       setTxId(result.transactionHash)
@@ -45,12 +52,25 @@ export default function Remove({
     }
   }
 
-  function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
+  // TODO: enforce correct weight rules
-    setAmount(e.target.value)
+  function handleOceanAmountChange(e: ChangeEvent<HTMLInputElement>) {
+    setAmountOcean(e.target.value)
+    setAmountDatatoken(`${Number(e.target.value) * 9}`)
   }
 
-  function handleMax() {
+  function handleMaxOcean() {
-    setAmount(`${userLiquidity.ocean}`)
+    setAmountOcean(`${userLiquidity.ocean}`)
+    setAmountDatatoken(`${userLiquidity.ocean * 9}`)
+  }
+
+  function handleMaxDatatoken() {
+    setAmountDatatoken(`${userLiquidity.datatoken}`)
+    setAmountOcean(`${userLiquidity.ocean / 9}`)
+  }
+
+  function handleDatatokenAmountChange(e: ChangeEvent<HTMLInputElement>) {
+    setAmountDatatoken(e.target.value)
+    setAmountOcean(`${Number(e.target.value) / 9}`)
   }
 
   return (
@@ -61,32 +81,62 @@ export default function Remove({
       />
 
       <form className={styles.removeInput}>
+        <fieldset className={styles.removeRow}>
           <div className={styles.userLiquidity}>
             <span>Your pool liquidity: </span>
             <PriceUnit price={`${userLiquidity.ocean}`} symbol="OCEAN" small />
           </div>
           <InputElement
-          value={amount}
+            value={amountOcean}
             name="ocean"
             type="number"
             prefix="OCEAN"
             placeholder="0"
-          onChange={handleAmountChange}
+            onChange={handleOceanAmountChange}
           />
 
-        {userLiquidity.ocean > Number(amount) && (
+          {userLiquidity.ocean > Number(amountOcean) && (
             <Button
               className={styles.buttonMax}
               style="text"
               size="small"
-            onClick={handleMax}
+              onClick={handleMaxOcean}
             >
               Use Max
             </Button>
           )}
-      </form>
+        </fieldset>
 
-      {/* <Input name="dt" label={dtSymbol} type="number" placeholder="0" /> */}
+        <fieldset className={styles.removeRow}>
+          <div className={styles.userLiquidity}>
+            <span>Your pool liquidity: </span>
+            <PriceUnit
+              price={`${userLiquidity.datatoken}`}
+              symbol={dtSymbol}
+              small
+            />
+          </div>
+          <InputElement
+            value={amountDatatoken}
+            name="ocean"
+            type="number"
+            prefix={dtSymbol}
+            placeholder="0"
+            onChange={handleDatatokenAmountChange}
+          />
+
+          {userLiquidity.datatoken > Number(amountDatatoken) && (
+            <Button
+              className={styles.buttonMax}
+              style="text"
+              size="small"
+              onClick={handleMaxDatatoken}
+            >
+              Use Max
+            </Button>
+          )}
+        </fieldset>
+      </form>
 
       <p>You will receive</p>
 

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

@@ -130,6 +130,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           poolAddress={price.address}
           totalPoolTokens={totalPoolTokens}
           userLiquidity={userLiquidity}
+          dtSymbol={dtSymbol}
         />
       ) : (
         <>