Merge pull request #469 from primitivefinance/develop

Performance improvements, liquidity features, order card fixes...

src/components/Layout/Layout.tsx

@@ -7,6 +7,7 @@ import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { useWeb3React } from '@web3-react/core'
 import { useClearPositions } from '@/state/positions/hooks'
+import { useClearSwap } from '@/state/swap/hooks'
 interface PageProps {
   children: any
   full?: boolean
@@ -17,6 +18,7 @@ const Layout: React.FC<PageProps> = (props) => {
   const removeItem = useRemoveItem()
   const clearOptions = useClearOptions()
   const clearPositions = useClearPositions()
+  const clearSwap = useClearSwap()
   const router = useRouter()
   const { active, account } = useWeb3React()
   useEffect(() => {
@@ -25,6 +27,8 @@ const Layout: React.FC<PageProps> = (props) => {
       removeItem()
       clearPositions()
       clearOptions()
+    } else {
+      clearSwap()
     }
   }, [props.loading])
 

src/components/LineItem/LineItem.tsx

@@ -82,7 +82,11 @@ interface ColorProps {
 
 const Color = styled.span<ColorProps>`
   color: ${(props) =>
-    props.color == 'red' ? props.theme.color.red[500] : 'inherit'};
+    props.color == 'red'
+      ? props.theme.color.red[500]
+      : props.color == 'green'
+      ? props.theme.color.green[500]
+      : 'inherit'};
 `
 
 const StyledSym = styled.a`

src/components/Liquidity/LiquidityHeader/index.tsx

@@ -31,13 +31,13 @@ const LiquidityHeader: React.FC<MarketHeaderProps> = ({
   )
 }
 const Reverse = styled.div`
-  margin-bottom: -1em;
+  margin-bottom: -2em;
 `
 
 const StyledHeader = styled.div`
   padding-bottom: ${(props) => props.theme.spacing[4]}px;
   display: block;
-  margin-left: -15em;
+  margin-left: -21em;
   margin-right: 1em;
   margin-top: -1em;
   width: 50em;

src/components/Liquidity/LiquidityTable.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react'
 import styled from 'styled-components'
-import Spacer from '@/components/Spacer'
 
 // table
 import Table from '@/components/Table'
@@ -12,12 +11,11 @@ import LiquidityTableRow from './LiquidityTable/LiquidityTableRow'
 import LoadingTable from '@/components/Market/OptionsTable/LoadingTable'
 
 import { usePositions } from '@/state/positions/hooks'
-import { useItem, useUpdateItem, useRemoveItem } from '@/state/order/hooks'
-import { useOptions, useUpdateOptions } from '@/state/options/hooks'
-import { formatEther, parseEther } from 'ethers/lib/utils'
+import { useUpdateItem } from '@/state/order/hooks'
+import { useOptions } from '@/state/options/hooks'
+import { formatEther } from 'ethers/lib/utils'
 import { BigNumber } from 'ethers'
 import { Operation } from '@primitivefi/sdk'
-import { Fraction, TokenAmount } from '@uniswap/sdk'
 
 export interface OptionsTableProps {
   callActive: boolean
@@ -29,30 +27,12 @@ const LiquidityTable: React.FC<OptionsTableProps> = (props) => {
   const updateItem = useUpdateItem()
   const options = useOptions()
   const type = callActive ? 'calls' : 'puts'
-  /* const tableColumns: TableColumns = {
-    key: 'key',
-    asset: 'tableAssset',
-    strike: '0.00',
-    share: '0.00',
-    asset1: '0.00',
-    asset2: '0.00',
-    fees: '0.00',
-    liquidity: ['0.00', '0.00'],
-    expiry: 0,
-    isCall: true,
-  } */
 
   const formatTableColumns = useCallback(
     (option: any): TableColumns => {
       const tableKey: string = option.entity.address
       /* const tableAssset: string = asset.toUpperCase() */
       const tableStrike: string = option.entity.strikePrice.toString()
-      const tableBid: string = formatEther(
-        option.market.spotClosePremium.raw.toString()
-      ).toString()
-      const tableAsk: string = formatEther(
-        option.market.spotOpenPremium.raw.toString()
-      ).toString()
 
       const tableReserve0: string = formatEther(
         option.market.reserveOf(option.entity.underlying).raw.toString()
@@ -65,18 +45,6 @@ const LiquidityTable: React.FC<OptionsTableProps> = (props) => {
       const tableReserves: string[] = [tableReserve0, tableReserve1]
       const tableExpiry: number = option.entity.expiryValue
 
-      /* const supply = BigNumber.from(parseEther(lpTotalSupply).toString())
-      const tSupply = new TokenAmount(
-        option.market.liquidityToken,
-        parseEther(lpTotalSupply).toString()
-      )
-
-      supply.gt(0) && lpBalance.gt(0)
-        ? lpBalance.divide(tSupply.add(lpBalance))
-        : new Fraction('0')
-
-      poolShare = poolShare.multiply('100').toSignificant(6) */
-
       const tableColumns: TableColumns = {
         key: tableKey,
         asset: option.entity.underlying.symbol,

src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx

@@ -17,12 +17,16 @@ export const headers = [
   },
   {
     name: 'Pool Size',
-    tip: 'The amount of underlying tokens in the pool.',
+    tip: 'The total amount of tokens in the pool.',
   },
   {
     name: 'Your Share',
     tip: 'The proportion of ownership of the option pair.',
   },
+  {
+    name: 'Your Liquidity',
+    tip: 'Your quantity of tokens in the pool.',
+  },
   {
     name: 'Market',
     tip: 'The option market the pool serves.',

src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx

@@ -143,7 +143,6 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
       updateItem(item, Operation.REMOVE_LIQUIDITY_CLOSE, market)
     }
   }, [provide, item, updateItem]) */
-
   const calculatePoolShare = useCallback(() => {
     const supply = BigNumber.from(parseEther(lpTotalSupply).toString())
     if (typeof market === 'undefined' || market === null || supply.isZero())
@@ -157,7 +156,9 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
       market.liquidityToken,
       parseEther(lp).toString()
     )
-    const poolShare = supply.gt(0) ? lpBal.divide(tSupply) : new Fraction('0')
+    const poolShare = supply.gt(0)
+      ? lpBal.divide(tSupply).multiply('100')
+      : new Fraction('0')
 
     return poolShare.toSignificant(6)
   }, [market, lpTotalSupply, lp])
@@ -196,6 +197,41 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
     return { shortPerLp, underlyingPerLp, totalUnderlyingPerLp }
   }, [market, lp, lpTotalSupply])
 
+  const calculateTotalLiquidity = useCallback(() => {
+    if (
+      typeof market === 'undefined' ||
+      market === null ||
+      BigNumber.from(parseEther(lpTotalSupply)).isZero()
+    )
+      return {
+        shortPerLp: '0',
+        underlyingPerLp: '0',
+        totalUnderlyingPerLp: '0',
+      }
+
+    const [
+      shortValue,
+      underlyingValue,
+      totalUnderlyingValue,
+    ] = market.getLiquidityValuePerShare(
+      new TokenAmount(
+        market.liquidityToken,
+        parseEther(lpTotalSupply).toString()
+      )
+    )
+    const shortPerLp = parseEther(lpTotalSupply)
+      .mul(shortValue.raw.toString())
+      .div(parseEther('1'))
+    const underlyingPerLp = parseEther(lpTotalSupply)
+      .mul(underlyingValue.raw.toString())
+      .div(parseEther('1'))
+    const totalUnderlyingPerLp = parseEther(lpTotalSupply)
+      .mul(totalUnderlyingValue.raw.toString())
+      .div(parseEther('1'))
+
+    return { shortPerLp, underlyingPerLp, totalUnderlyingPerLp }
+  }, [market, lpTotalSupply])
+
   const handleOnClick = useCallback(() => {
     //setProvide(true)
     setToggle(!toggle)
@@ -278,10 +314,13 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
             </>
           )}
         </Asset>
-        {parseFloat(liquidity[0]) > 0 ? (
+        {!isZero(parseEther(lpTotalSupply)) ? (
           <TableCell>
             <span>
-              {numeral(liquidity[0]).format('0.00a')} <Units>{units}</Units>
+              {numeral(
+                formatEther(calculateTotalLiquidity().totalUnderlyingPerLp)
+              ).format('0.00a')}{' '}
+              <Units>{units}</Units>
             </span>
           </TableCell>
         ) : (
@@ -290,13 +329,30 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
         <TableCell>
           {!isZero(parseEther(lp)) ? (
             <span>
-              {numeral(calculatePoolShare()).format('0.00%')} <Units>%</Units>
+              {numeral(calculatePoolShare()).format('0.00')} <Units>%</Units>
             </span>
           ) : (
             <>{`-`}</>
           )}
         </TableCell>
 
+        {parseFloat(
+          formatEther(calculateLiquidityValuePerShare().totalUnderlyingPerLp)
+        ) > 0 ? (
+          <TableCell>
+            <span>
+              {numeral(
+                formatEther(
+                  calculateLiquidityValuePerShare().totalUnderlyingPerLp
+                )
+              ).format('0.00a')}{' '}
+              <Units>{units}</Units>
+            </span>
+          </TableCell>
+        ) : (
+          <TableCell>-</TableCell>
+        )}
+
         <TableCell>{isCall ? asset : entity.strike.symbol}</TableCell>
 
         {expiry ? (
@@ -308,7 +364,7 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
         )}
         <TableCell>
           <span>
-            {numeral(strike).format(+strike >= 10 ? '0' : '0.00')}{' '}
+            {numeral(strike).format(+strike >= 10 ? '0a' : '0.00')}{' '}
             <Units>DAI</Units>
           </span>
         </TableCell>
@@ -365,8 +421,12 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
               <StyledTitle>
                 <LineItem
                   label={'Liquidity Balance'}
-                  data={numeral(lp).format('0.00')}
-                  units={'LP'}
+                  data={numeral(
+                    formatEther(
+                      calculateLiquidityValuePerShare().totalUnderlyingPerLp
+                    )
+                  ).format('0.00a')}
+                  units={asset}
                 />
                 <Spacer />
                 <RemoveLiqButton />

src/components/Market/OptionsTable/LoadingTable/LoadingTable.tsx

@@ -11,20 +11,19 @@ const alt = [
   },
   {
     name: 'Pool Size',
-    tip: 'The amount of underlying tokens in the pool.',
+    tip: 'The total amount of tokens in the pool.',
   },
   {
-    name: 'Share',
+    name: 'Your Share',
     tip: 'The proportion of ownership of the option pair.',
   },
-
   {
-    name: 'Pool Ratio',
-    tip: 'The ratio of underlying tokens to short option tokens.',
+    name: 'Your Liquidity',
+    tip: 'Your quantity of tokens in the pool.',
   },
   {
-    name: 'Price',
-    tip: 'The ask price of 1 option token.',
+    name: 'Market',
+    tip: 'The option market the pool serves.',
   },
   { name: 'Expiry', tip: 'The maturity date of the option token.' },
   {

src/components/Market/OptionsTable/OptionsTable.tsx

@@ -31,6 +31,7 @@ import OptionsTableRow, { TableColumns } from './OptionsTableRow'
 import OptionsTableHeader from './OptionsTableHeader'
 import LoadingTable from './LoadingTable'
 import { useAddNotif } from '@/state/notifs/hooks'
+import { TokenAmount } from '@sushiswap/sdk'
 
 export type FormattedOption = {
   breakEven: number
@@ -174,6 +175,7 @@ const OptionsTable: React.FC<OptionsTableProps> = (props) => {
         reserves: tableReserves,
         expiry: tableExpiry,
         isCall: option.entity.isCall,
+        market: option.market,
       }
       return tableColumns
     },