feat: expiry handler for remove LP

primitivefinance · Sep 24, 2021 · f271174 · f271174
1 parent 84adb49
commit f271174
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 106 deletions.
diff --git a/src/components/Liquidity/LiquidityTable.tsx b/src/components/Liquidity/LiquidityTable.tsx
@@ -86,11 +86,11 @@ const LiquidityTable: React.FC<OptionsTableProps> = (props) => {
                     })
                     .indexOf(true) !== -1
 
-                if (
+                /* if (
                   +new Date() / 1000 >= option.entity.expiryValue &&
                   !hasPosition
                 )
-                  return null
+                  return null */
                 return (
                   <LiquidityTableRow
                     key={option.entity.address}

diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
@@ -370,7 +370,9 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
 
         {expiry ? (
           <TableCell>
-            <span>{formatExpiry(expiry).utc.substr(4, 12)}</span>
+            <span className="expired">
+              {formatExpiry(expiry).utc.substr(4, 12)}
+            </span>
           </TableCell>
         ) : (
           <TableCell>-</TableCell>
@@ -405,64 +407,39 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
 
       {toggle && item.entity?.address === key ? (
         <OrderTableRow>
-          <OrderContainer
-            row
-            justifyContent="space-between"
-            alignItems="flex-start"
-          >
-            <Choice>
-              <StyledTitle>
-                <LineItem
-                  label={'Asset Balance'}
-                  data={numeral(
-                    parseEther(underlyingTokenBalance).gt(
-                      parseUnits('1', 'gwei')
-                    )
-                      ? underlyingTokenBalance
-                      : '0'
-                  ).format('0.00')}
-                  units={entity.isWethCall ? 'ETH' : asset}
-                />
-                <Spacer />
-                <AddLiqButton />
-              </StyledTitle>
-              {orderType === Operation.ADD_LIQUIDITY ? (
-                <>
-                  <Spacer size="sm" />
-                  <Separator />
-                  <AddLiquidity />
-                </>
-              ) : null}
-            </Choice>
-
-            <Spacer />
-            <Choice>
-              <StyledTitle>
-                <LineItem
-                  label={'Liquidity Balance'}
-                  data={numeral(
-                    formatEther(
-                      calculateLiquidityValuePerShare().totalUnderlyingPerLp
-                    )
-                  ).format('0.00a')}
-                  units={entity.isWethCall ? 'ETH' : asset}
-                />
-                <Spacer />
-                <RemoveLiqButton />
-              </StyledTitle>
-              {orderType === Operation.REMOVE_LIQUIDITY_CLOSE ? (
-                <>
-                  <Spacer size="sm" />
-                  <Separator />
-                  <RemoveLiquidity />
-                </>
-              ) : null}
-            </Choice>
-          </OrderContainer>
+          <Choice>
+            <StyledTitle>
+              <LineItem
+                label={'Liquidity Balance'}
+                data={numeral(
+                  formatEther(
+                    calculateLiquidityValuePerShare().totalUnderlyingPerLp
+                  )
+                ).format('0.00a')}
+                units={entity.isWethCall ? 'ETH' : asset}
+              />
+              <Spacer />
+              <RemoveLiqButton />
+            </StyledTitle>
+            {orderType === Operation.REMOVE_LIQUIDITY_CLOSE ? (
+              <>
+                <Spacer size="sm" />
+                <Separator />
+                <RemoveLiquidity />
+              </>
+            ) : null}
+          </Choice>
         </OrderTableRow>
       ) : (
         <></>
       )}
+      <style>
+        {`
+          .expired {
+            color: red;
+          }
+        `}
+      </style>
     </StyledDiv>
   )
 }
@@ -480,7 +457,7 @@ const StyledInnerTitle = styled.div`
 `
 
 const Choice = styled.div`
-  min-width: 33em;
+  width: 100%;
   background-color: ${(props) => props.theme.color.black};
   padding: 1em;
   border-radius: 0.5em;
@@ -504,7 +481,7 @@ const StyledTitle = styled.div`
   font-weight: 800;
   display: flex;
   letter-spacing: 0.5px;
-  width: 30em;
+  width: 100%;
   justify-content: space-between;
 `
 const StyledDiv = styled.div`

diff --git a/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx b/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 
 import Box from '@/components/Box'
@@ -256,54 +256,14 @@ const RemoveLiquidity: React.FC = () => {
     calculateShortBurn,
   ])
 
+  useEffect(() => {
+    const liquidity = parseEther(lp).mul(Number(1000)).div(1000)
+    onOptionInput(liquidity.toString())
+  }, [lp])
+
   return (
     <LiquidityContainer>
       <Spacer />
-      <LineItem
-        label={'Amount'}
-        data={Math.round(10 * (ratio / 10)) / 10 + '%'}
-        units={'%'}
-      ></LineItem>
-      <Spacer size="sm" />
-      <Slider
-        min={1}
-        max={1000}
-        step={1}
-        value={ratio}
-        onChange={handleRatioChange}
-      />
-      <Spacer size="sm" />
-      <Box row justifyContent="space-around">
-        <Button
-          variant="transparent"
-          text="25%"
-          onClick={() => {
-            handleRatio(250)
-          }}
-        />
-        <Button
-          variant="transparent"
-          text="50%"
-          onClick={() => {
-            handleRatio(500)
-          }}
-        />
-        <Button
-          variant="transparent"
-          text="75%"
-          onClick={() => {
-            handleRatio(750)
-          }}
-        />
-        <Button
-          variant="transparent"
-          text="100%"
-          onClick={() => {
-            handleRatio(1000)
-          }}
-        />
-      </Box>
-      <Spacer size="sm" />
       <LineItem
         label="Burn"
         data={`${numeral(formatEther(calculateLPBurn())).format('0.00')}`}
@@ -400,6 +360,6 @@ const RemoveLiquidity: React.FC = () => {
 }
 
 const LiquidityContainer = styled.div`
-  width: 34em;
+  width: 100%;
 `
 export default RemoveLiquidity