From 1ff0878f53098a7e96303031aadaf4e707598849 Mon Sep 17 00:00:00 2001
From: Alexangelj <alexangel.j@gmail.com>
Date: Wed, 3 Feb 2021 12:38:12 -0800
Subject: [PATCH 01/22] fix(pool-size): Updates pool size to show entire pool.
 Adds Your Liquidity column.

---
 src/components/Liquidity/LiquidityTable.tsx   | 38 +------------
 .../LiquidityTableHeader.tsx                  |  6 +-
 .../LiquidityTableRow/LiquidityTableRow.tsx   | 57 ++++++++++++++++++-
 3 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/src/components/Liquidity/LiquidityTable.tsx b/src/components/Liquidity/LiquidityTable.tsx
index a1a1cbc1..af934302 100644
--- a/src/components/Liquidity/LiquidityTable.tsx
+++ b/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,
diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx
index f930d785..633b12fc 100644
--- a/src/components/Liquidity/LiquidityTable/LiquidityTableHeader/LiquidityTableHeader.tsx
+++ b/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.',
diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
index b94656f9..aec25be9 100644
--- a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
+++ b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
@@ -196,6 +196,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, lpTotalSupply])
+
   const handleOnClick = useCallback(() => {
     //setProvide(true)
     setToggle(!toggle)
@@ -278,10 +313,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>
         ) : (
@@ -297,6 +335,21 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
           )}
         </TableCell>
 
+        {parseFloat(liquidity[0]) > 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 ? (

From 7325bd9b83595223871f7f402b6d87122e783d80 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 12:58:31 -0800
Subject: [PATCH 02/22] fix(market): formatted pricing, added notifs to lp

---
 src/components/LineItem/LineItem.tsx          |   6 +-
 .../components/AddLiquidity/AddLiquidity.tsx  |   1 -
 .../Market/OrderCard/components/Swap/Swap.tsx | 133 +++++++++++-------
 src/components/TopBar/TopBar.tsx              |   1 -
 src/pages/liquidity/index.tsx                 |  12 +-
 src/pages/markets/[...id].tsx                 |   8 +-
 6 files changed, 99 insertions(+), 62 deletions(-)

diff --git a/src/components/LineItem/LineItem.tsx b/src/components/LineItem/LineItem.tsx
index 37faba20..9380d034 100644
--- a/src/components/LineItem/LineItem.tsx
+++ b/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`
diff --git a/src/components/Market/OrderCard/components/AddLiquidity/AddLiquidity.tsx b/src/components/Market/OrderCard/components/AddLiquidity/AddLiquidity.tsx
index f7a7fdef..71edb36c 100644
--- a/src/components/Market/OrderCard/components/AddLiquidity/AddLiquidity.tsx
+++ b/src/components/Market/OrderCard/components/AddLiquidity/AddLiquidity.tsx
@@ -528,7 +528,6 @@ const AddLiquidity: React.FC = () => {
     </LiquidityContainer>
   )
 }
-
 const LiquidityContainer = styled.div`
   width: 34em;
 `
diff --git a/src/components/Market/OrderCard/components/Swap/Swap.tsx b/src/components/Market/OrderCard/components/Swap/Swap.tsx
index aa542bcf..603bf4fa 100644
--- a/src/components/Market/OrderCard/components/Swap/Swap.tsx
+++ b/src/components/Market/OrderCard/components/Swap/Swap.tsx
@@ -54,6 +54,12 @@ import { Token, TokenAmount } from '@uniswap/sdk'
 import formatEtherBalance from '@/utils/formatEtherBalance'
 import numeral from 'numeral'
 import { tryParseAmount } from '@/utils/tryParseAmount'
+const formatParsedAmount = (amount: BigNumberish) => {
+  const bigAmt = BigNumber.from(amount)
+  return numeral(formatEther(bigAmt)).format(
+    bigAmt.lt(parseEther('0.01')) ? '0.0000' : '0.00'
+  )
+}
 
 const Swap: React.FC = () => {
   //state
@@ -73,6 +79,7 @@ const Swap: React.FC = () => {
       ? formatEther(item.market.spotUnderlyingToShort.raw.toString())
       : formatEther(item.market.spotUnderlyingToShort.raw.toString())
   )
+
   const [impact, setImpact] = useState('0.00')
   const [error, setError] = useState(false)
   // set null lp
@@ -302,9 +309,7 @@ const Swap: React.FC = () => {
   }, [item, parsedAmount])
 
   const isBelowSlippage = useCallback(() => {
-    return impact !== 'NaN'
-      ? Math.abs(parseFloat(impact)) < parseFloat(slippage) * 100
-      : true
+    return impact !== 'NaN' ? Math.abs(parseFloat(impact)) < 30 : true
   }, [impact, slippage])
 
   const handleApproval = useCallback(() => {
@@ -356,7 +361,7 @@ const Swap: React.FC = () => {
           </>
         )}
 
-        <Spacer />
+        <Spacer size="sm" />
         <PriceInput
           title="Quantity"
           name="primary"
@@ -367,13 +372,76 @@ const Swap: React.FC = () => {
             orderType === Operation.LONG ? underlyingAmount : tokenAmount
           }
         />
+        <Spacer size="sm" />
+        <Spacer size="sm" />
+        <Title full>Order Summary</Title>
 
-        {parsedAmount.eq(0) && !error ? <Description></Description> : <></>}
-
-        {parsedAmount.gt(0) && !error ? (
+        {inputLoading && hasLiquidity ? (
           <>
+            <Loader />
             <Spacer />
-            <StyledInnerTitle>Description</StyledInnerTitle>
+          </>
+        ) : (
+          <>
+            {parsedAmount.gt(0) && !error ? (
+              <>
+                <LineItem
+                  label={'Execution Price'}
+                  data={
+                    orderType === Operation.LONG
+                      ? `${
+                          parseFloat(
+                            formatParsedAmount(
+                              parseEther(cost.debit).toString()
+                            ).toString()
+                          ) /
+                          parseFloat(
+                            formatParsedAmount(
+                              parsedAmount.toString()
+                            ).toString()
+                          )
+                        }`
+                      : `${
+                          parseFloat(
+                            formatParsedAmount(
+                              parseEther(cost.credit).toString()
+                            )
+                          ) /
+                          parseFloat(
+                            formatParsedAmount(parsedAmount.toString())
+                          )
+                        }`
+                  }
+                  units={underlyingAssetSymbol()}
+                  color={isBelowSlippage() ? null : 'red'}
+                  tip="The estimated price of the option after slippage."
+                />
+                <LineItem
+                  label={'Price Impact'}
+                  data={`${Math.abs(parseFloat(impact)).toString()}`}
+                  units="%"
+                  color={isBelowSlippage() ? null : 'red'}
+                  tip="The % change in the price paid."
+                />
+              </>
+            ) : (
+              <>
+                {' '}
+                <LineItem
+                  label={'Spot Price'}
+                  data={formatBalance(prem)}
+                  units={underlyingAssetSymbol()}
+                  color={null}
+                  tip="The current spot price of the option."
+                />
+              </>
+            )}
+          </>
+        )}
+        {parsedAmount.gt(0) && !error ? (
+          <>
+            <Spacer size="sm" />
+            <Separator />
             <Spacer size="sm" />
             <Description>
               <PurchaseInfo>
@@ -405,47 +473,11 @@ const Swap: React.FC = () => {
               </PurchaseInfo>
             </Description>
             <Spacer />
-            <Spacer size="sm" />
-            <Separator />
           </>
         ) : null}
-
-        <Spacer size="sm" />
-        <Title full>Order Summary</Title>
-        {!inputLoading ? (
-          <>
-            <LineItem
-              label="Price"
-              data={formatBalance(prem)}
-              units={underlyingAssetSymbol()}
-              tip="The price per 1 option token."
-            />
-          </>
-        ) : (
-          <>{hasLiquidity ? <Loader /> : null}</>
-        )}
-
         <Spacer size="sm" />
-        {inputLoading && hasLiquidity ? (
-          <>
-            <Loader />
-            <Spacer />
-          </>
-        ) : (
-          <LineItem
-            label={isBelowSlippage() ? 'Slippage' : 'Slippage too high'}
-            data={`${Math.abs(parseFloat(impact)).toString()}`}
-            units="%"
-            color={isBelowSlippage() ? null : 'red'}
-            tip="The % change in the price paid."
-          />
-        )}
-
-        <Spacer size="sm" />
-
         {error ? (
           <Description>
-            <Spacer size="sm" />
             <WarningLabel>Order quantity too large!</WarningLabel>
             <Spacer size="sm" />
           </Description>
@@ -496,17 +528,12 @@ const Swap: React.FC = () => {
                   )}
                   {approved[0] && approved[1] ? (
                     <Button
-                      disabled={
-                        !parsedAmount?.gt(0) ||
-                        error ||
-                        !hasLiquidity ||
-                        !isBelowSlippage()
-                      }
+                      disabled={!parsedAmount?.gt(0) || error || !hasLiquidity}
                       full
                       size="sm"
                       onClick={handleSubmitClick}
                       isLoading={loading}
-                      text="Confirm"
+                      text="Confirm Trade"
                     />
                   ) : null}
                 </>
@@ -538,7 +565,7 @@ const Swap: React.FC = () => {
                     size="sm"
                     onClick={handleSubmitClick}
                     isLoading={loading}
-                    text={'Confirm'}
+                    text={'Confirm Trade'}
                   />
                 </>
               )}
@@ -570,7 +597,7 @@ const WarningTooltip = styled.div`
 
 const StyledInnerTitle = styled.div`
   color: ${(props) => props.theme.color.white};
-  font-size: 18px;
+  font-size: 24px;
   font-weight: 700;
   display: flex;
   flex: 1;
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
index f76e3eed..af4d2e5f 100644
--- a/src/components/TopBar/TopBar.tsx
+++ b/src/components/TopBar/TopBar.tsx
@@ -84,7 +84,6 @@ const TopBar: React.FC<BarProps> = ({ children, loading }) => {
           <Wallet />
           <Spacer size="sm" />
           <Spacer size="sm" />
-          <Settings />
         </StyledFlex>
       </Container>
 
diff --git a/src/pages/liquidity/index.tsx b/src/pages/liquidity/index.tsx
index 1e644154..3b9cf130 100644
--- a/src/pages/liquidity/index.tsx
+++ b/src/pages/liquidity/index.tsx
@@ -4,6 +4,7 @@ import Spacer from '@/components/Spacer'
 import Box from '@/components/Box'
 import Loader from '@/components/Loader'
 import Disclaimer from '@/components/Disclaimer'
+import Notifs from '@/components/Notifs'
 
 import MetaMaskOnboarding from '@metamask/onboarding'
 import { Venue } from '@primitivefi/sdk'
@@ -159,8 +160,9 @@ const Liquidity = ({ icons }) => {
           <Loader size="lg" />
         </>
       ) : (
-        <>
+        <StyledDiv>
           <Disclaimer />
+          <Notifs />
           <StyledMarket>
             <StyledLitContainer>
               <StyledHeaderContainer>
@@ -175,12 +177,16 @@ const Liquidity = ({ icons }) => {
               <LiquidityTable callActive={callPutActive} />
             </StyledLitContainer>
           </StyledMarket>
-        </>
+        </StyledDiv>
       )}
     </ErrorBoundary>
   )
 }
 
+const StyledDiv = styled.div`
+  display: block;
+`
+
 const StyledMarket = styled.div`
   width: 100%;
   min-height: 85vh;
@@ -213,7 +219,7 @@ export const StyledLitContainer = styled(Col)`
 
 const StyledHeaderContainer = styled.div`
   position: relative;
-  width: 50%;
+  width: 40%;
   display: flex;
   flex-direction: row;
   justify-content: center;
diff --git a/src/pages/markets/[...id].tsx b/src/pages/markets/[...id].tsx
index c1d94b32..6a052ca2 100644
--- a/src/pages/markets/[...id].tsx
+++ b/src/pages/markets/[...id].tsx
@@ -195,7 +195,7 @@ const Market = ({ market, data }) => {
           <Loader size="lg" />
         </>
       ) : (
-        <>
+        <StyledDiv>
           <Disclaimer />
           <Notifs />
           <StyledMarket>
@@ -258,12 +258,14 @@ const Market = ({ market, data }) => {
               </Row>
             </Grid>
           </StyledMarket>
-        </>
+        </StyledDiv>
       )}
     </ErrorBoundary>
   )
 }
-
+const StyledDiv = styled.div`
+  display: block;
+`
 const StyledCol = styled(Col)`
   overflow-x: hidden;
 `

From 8cfc0d7431c5658dab1884c28ecbfdfd550ceea9 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 13:23:05 -0800
Subject: [PATCH 03/22] fix(notifs): formatting notifs

---
 src/components/Layout/Layout.tsx |   4 +
 src/pages/liquidity/index.tsx    |  32 ++++----
 src/pages/markets/[...id].tsx    | 122 +++++++++++++++----------------
 3 files changed, 78 insertions(+), 80 deletions(-)

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 78b8d74b..171b24f4 100644
--- a/src/components/Layout/Layout.tsx
+++ b/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])
 
diff --git a/src/pages/liquidity/index.tsx b/src/pages/liquidity/index.tsx
index 3b9cf130..26a5f8b8 100644
--- a/src/pages/liquidity/index.tsx
+++ b/src/pages/liquidity/index.tsx
@@ -160,31 +160,29 @@ const Liquidity = ({ icons }) => {
           <Loader size="lg" />
         </>
       ) : (
-        <StyledDiv>
+        <StyledMarket>
           <Disclaimer />
           <Notifs />
-          <StyledMarket>
-            <StyledLitContainer>
-              <StyledHeaderContainer>
-                <LiquidityHeader icons={icons} isCall={callPutActive}>
-                  <FilterBar
-                    active={callPutActive}
-                    setCallActive={() => setCallPutActive(!callPutActive)}
-                  />
-                </LiquidityHeader>
-              </StyledHeaderContainer>
-
-              <LiquidityTable callActive={callPutActive} />
-            </StyledLitContainer>
-          </StyledMarket>
-        </StyledDiv>
+          <StyledLitContainer>
+            <StyledHeaderContainer>
+              <LiquidityHeader icons={icons} isCall={callPutActive}>
+                <FilterBar
+                  active={callPutActive}
+                  setCallActive={() => setCallPutActive(!callPutActive)}
+                />
+              </LiquidityHeader>
+            </StyledHeaderContainer>
+
+            <LiquidityTable callActive={callPutActive} />
+          </StyledLitContainer>
+        </StyledMarket>
       )}
     </ErrorBoundary>
   )
 }
 
 const StyledDiv = styled.div`
-  display: block;
+  display: inherit;
 `
 
 const StyledMarket = styled.div`
diff --git a/src/pages/markets/[...id].tsx b/src/pages/markets/[...id].tsx
index 6a052ca2..aac4d2c0 100644
--- a/src/pages/markets/[...id].tsx
+++ b/src/pages/markets/[...id].tsx
@@ -195,77 +195,73 @@ const Market = ({ market, data }) => {
           <Loader size="lg" />
         </>
       ) : (
-        <StyledDiv>
+        <StyledMarket>
           <Disclaimer />
           <Notifs />
-          <StyledMarket>
-            <Grid id={'market-grid'}>
-              <Row>
-                <StyledContainer sm={12} md={8} lg={8} id="table-column">
-                  <StyledMain>
-                    <MarketHeader marketId={market}>
-                      <FilterBar
-                        active={callPutActive}
-                        setCallActive={handleFilterType}
-                      />
-                    </MarketHeader>
+          <Grid id={'market-grid'}>
+            <Row>
+              <StyledContainer sm={12} md={8} lg={8} id="table-column">
+                <StyledMain>
+                  <MarketHeader marketId={market}>
+                    <FilterBar
+                      active={callPutActive}
+                      setCallActive={handleFilterType}
+                    />
+                  </MarketHeader>
 
+                  <Spacer />
+                  <ErrorBoundary
+                    fallback={
+                      <>
+                        <Spacer />
+                        <Text>Error Loading Options, Please Refresh</Text>
+                      </>
+                    }
+                  >
+                    <OptionsTable
+                      asset={market}
+                      assetAddress={ADDRESS_FOR_MARKET[market]}
+                      optionExp={expiry}
+                      callActive={callPutActive}
+                    />
+                  </ErrorBoundary>
+                </StyledMain>
+              </StyledContainer>
+              <StyledCol sm={12} md={4} lg={4} id="sidebar-column">
+                <StyledSideBar>
+                  <ErrorBoundary
+                    fallback={
+                      <>
+                        <Spacer />
+                        <Text>Error Loading Positions Please Refresh</Text>
+                      </>
+                    }
+                  >
                     <Spacer />
-                    <ErrorBoundary
-                      fallback={
-                        <>
-                          <Spacer />
-                          <Text>Error Loading Options, Please Refresh</Text>
-                        </>
-                      }
-                    >
-                      <OptionsTable
-                        asset={market}
-                        assetAddress={ADDRESS_FOR_MARKET[market]}
-                        optionExp={expiry}
-                        callActive={callPutActive}
-                      />
-                    </ErrorBoundary>
-                  </StyledMain>
-                </StyledContainer>
-                <StyledCol sm={12} md={4} lg={4} id="sidebar-column">
-                  <StyledSideBar>
-                    <ErrorBoundary
-                      fallback={
-                        <>
-                          <Spacer />
-                          <Text>Error Loading Positions Please Refresh</Text>
-                        </>
-                      }
-                    >
-                      <Spacer />
-                      <PositionsCard />
-                      <OrderCard orderState={data} />
-                      <BalanceCard />
-                      <Spacer size="sm" />
-                      <TransactionCard />
-                      <Spacer size="sm" />
-                      {market === 'eth' || market === 'weth' ? (
-                        <>
-                          <WethWrapper />
-                        </>
-                      ) : (
-                        <></>
-                      )}
-                    </ErrorBoundary>
-                  </StyledSideBar>
-                </StyledCol>
-              </Row>
-            </Grid>
-          </StyledMarket>
-        </StyledDiv>
+                    <PositionsCard />
+                    <OrderCard orderState={data} />
+                    <BalanceCard />
+                    <Spacer size="sm" />
+                    <TransactionCard />
+                    <Spacer size="sm" />
+                    {market === 'eth' || market === 'weth' ? (
+                      <>
+                        <WethWrapper />
+                      </>
+                    ) : (
+                      <></>
+                    )}
+                  </ErrorBoundary>
+                </StyledSideBar>
+              </StyledCol>
+            </Row>
+          </Grid>
+        </StyledMarket>
       )}
     </ErrorBoundary>
   )
 }
-const StyledDiv = styled.div`
-  display: block;
-`
+
 const StyledCol = styled(Col)`
   overflow-x: hidden;
 `

From e7cc013fec41a3d9e8afc573e79a66434226773d Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 13:25:09 -0800
Subject: [PATCH 04/22] Merge develop


From dff149dd5df2a35ef1d49ff10020e651c29a3fa0 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 13:34:55 -0800
Subject: [PATCH 05/22] fix(lp): loading table + units

---
 .../LiquidityTableRow/LiquidityTableRow.tsx         |  6 ++++--
 .../OptionsTable/LoadingTable/LoadingTable.tsx      | 13 ++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
index aec25be9..a158e303 100644
--- a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
+++ b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
@@ -157,7 +157,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])
@@ -328,7 +330,7 @@ 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>
           ) : (
             <>{`-`}</>
diff --git a/src/components/Market/OptionsTable/LoadingTable/LoadingTable.tsx b/src/components/Market/OptionsTable/LoadingTable/LoadingTable.tsx
index 6bdb1d3f..13e55c63 100644
--- a/src/components/Market/OptionsTable/LoadingTable/LoadingTable.tsx
+++ b/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.' },
   {

From 025720b0ea909ae07b69f078d310095fc49ba4f8 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 13:58:10 -0800
Subject: [PATCH 06/22] fix(write): added write and improved DAI formatting

---
 .../LiquidityTableRow/LiquidityTableRow.tsx       |  4 ++--
 .../OptionsTableRow/OptionsTableRow.tsx           |  4 ++--
 .../components/ManageOptions/ManageOptions.tsx    |  2 +-
 .../components/OrderOptions/OrderOptions.tsx      |  2 +-
 .../RemoveLiquidity/RemoveLiquidity.tsx           | 12 ++++++------
 .../Market/OrderCard/components/Swap/Swap.tsx     | 15 ++++++++++++---
 6 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
index a158e303..9f29f9e5 100644
--- a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
+++ b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
@@ -363,7 +363,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>
@@ -421,7 +421,7 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
                 <LineItem
                   label={'Liquidity Balance'}
                   data={numeral(lp).format('0.00')}
-                  units={'LP'}
+                  units={'SLP'}
                 />
                 <Spacer />
                 <RemoveLiqButton />
diff --git a/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx b/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx
index 0118f45e..f2f9fe19 100644
--- a/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx
+++ b/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx
@@ -96,7 +96,7 @@ const OptionsTableRow: React.FC<OptionsTableRowProps> = ({
         <TableCell>
           {!isZero(parseEther(bid)) ? (
             <span>
-              {numeral(breakeven).format('0.00')} <Units>$</Units>
+              {numeral(breakeven).format('0.00a')} <Units>DAI</Units>
             </span>
           ) : (
             <>{`-`}</>
@@ -110,7 +110,7 @@ const OptionsTableRow: React.FC<OptionsTableRowProps> = ({
               </span>
             ) : (
               <span>
-                {numeral(bid).format('(0.000a)')} <Units>$</Units>
+                {numeral(bid).format('(0.000a)')} <Units>DAI</Units>
               </span>
             )}
           </TableCell>
diff --git a/src/components/Market/OrderCard/components/ManageOptions/ManageOptions.tsx b/src/components/Market/OrderCard/components/ManageOptions/ManageOptions.tsx
index f271b9dd..c67eda47 100644
--- a/src/components/Market/OrderCard/components/ManageOptions/ManageOptions.tsx
+++ b/src/components/Market/OrderCard/components/ManageOptions/ManageOptions.tsx
@@ -37,7 +37,7 @@ const LPOptions: React.FC<{ balance?: any }> = ({ balance }) => {
       <LineItem
         label={'LP Balance'}
         data={balance ? formatEther(balance) : '0'}
-        units={'UNI-V2'}
+        units={'SLP'}
       />
       <Spacer />
       <Box row justifyContent="center" alignItems="center">
diff --git a/src/components/Market/OrderCard/components/OrderOptions/OrderOptions.tsx b/src/components/Market/OrderCard/components/OrderOptions/OrderOptions.tsx
index 93ec4627..8e6935ff 100644
--- a/src/components/Market/OrderCard/components/OrderOptions/OrderOptions.tsx
+++ b/src/components/Market/OrderCard/components/OrderOptions/OrderOptions.tsx
@@ -53,7 +53,7 @@ const LPOptions: React.FC<{ balance?: any; open?: boolean }> = ({
         <LineItem
           label={'Liquidity'}
           data={balance ? formatEther(balance) : '0'}
-          units={'UNI-V2'}
+          units={'SLP'}
         />
         <Spacer size="sm" />
         <StyledARef
diff --git a/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx b/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx
index a4ee8901..6c33fdeb 100644
--- a/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx
+++ b/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx
@@ -364,7 +364,7 @@ const RemoveLiquidity: React.FC = () => {
       <LineItem
         label="This requires"
         data={`${numeral(calculateBurn()).format('0.00')}`}
-        units={`UNI-V2 LP`}
+        units={`SLP`}
       />
 
       {orderType === Operation.REMOVE_LIQUIDITY_CLOSE ? (
@@ -372,7 +372,7 @@ const RemoveLiquidity: React.FC = () => {
           <Spacer size="sm" />
           <LineItem
             label="And requires"
-            data={`${numeral(calculateRequiredLong()).format('0.00')}`}
+            data={`${numeral(calculateRequiredLong()).format('0.00a')}`}
             units={`LONG`}
           />
           {!formatEther(
@@ -388,7 +388,7 @@ const RemoveLiquidity: React.FC = () => {
                       parseEther(optionBalance)
                     )
                   )
-                ).format('0.00')}`}
+                ).format('0.00a')}`}
                 units={`LONG`}
               />{' '}
             </>
@@ -398,7 +398,7 @@ const RemoveLiquidity: React.FC = () => {
           <Spacer size="sm" />
           <LineItem
             label="To receive"
-            data={numeral(calculateUnderlyingOutput()).format('0.00')}
+            data={numeral(calculateUnderlyingOutput()).format('0.00a')}
             units={`${entity.underlying.symbol.toUpperCase()}`}
           />
         </>
@@ -411,7 +411,7 @@ const RemoveLiquidity: React.FC = () => {
               formatEther(
                 calculateRemoveOutputs().underlyingValue.raw.toString()
               )
-            ).format('0.00')}
+            ).format('0.00a')}
             units={`${entity.underlying.symbol.toUpperCase()}`}
           />
           <Spacer size="sm" />
@@ -419,7 +419,7 @@ const RemoveLiquidity: React.FC = () => {
             label="To Receive"
             data={numeral(
               formatEther(calculateRemoveOutputs().shortValue.raw.toString())
-            ).format('0.00')}
+            ).format('0.00a')}
             units={`SHORT`}
           />{' '}
         </>
diff --git a/src/components/Market/OrderCard/components/Swap/Swap.tsx b/src/components/Market/OrderCard/components/Swap/Swap.tsx
index 603bf4fa..3b54c6a2 100644
--- a/src/components/Market/OrderCard/components/Swap/Swap.tsx
+++ b/src/components/Market/OrderCard/components/Swap/Swap.tsx
@@ -342,12 +342,21 @@ const Swap: React.FC = () => {
         <Separator />
 
         <Switch
-          active={orderType !== Operation.CLOSE_LONG}
+          active={
+            orderType !== Operation.CLOSE_LONG && orderType !== Operation.WRITE
+          }
           onClick={() => {
-            if (orderType === Operation.CLOSE_LONG) {
+            if (
+              orderType === Operation.CLOSE_LONG ||
+              orderType === Operation.WRITE
+            ) {
               updateItem(item, Operation.LONG)
             } else {
-              updateItem(item, Operation.CLOSE_LONG)
+              if (tokenAmount.greaterThan('0')) {
+                updateItem(item, Operation.CLOSE_LONG)
+              } else {
+                updateItem(item, Operation.WRITE)
+              }
             }
           }}
         />

From 0fa57628bc18b9472920609bee4ae5151e17c7df Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 14:05:01 -0800
Subject: [PATCH 07/22] fix(lp): zero out lp

---
 .../LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
index 9f29f9e5..7834b5c0 100644
--- a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
+++ b/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())
@@ -158,7 +157,7 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
       parseEther(lp).toString()
     )
     const poolShare = supply.gt(0)
-      ? lpBal.divide(tSupply).multiply(100)
+      ? lpBal.divide(tSupply).multiply('100')
       : new Fraction('0')
 
     return poolShare.toSignificant(6)
@@ -337,7 +336,9 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
           )}
         </TableCell>
 
-        {parseFloat(liquidity[0]) > 0 ? (
+        {parseFloat(
+          formatEther(calculateLiquidityValuePerShare().totalUnderlyingPerLp)
+        ) > 0 ? (
           <TableCell>
             <span>
               {numeral(

From 66c9f8e8f5ff7a53917568e2ce9216d0dc76e3c0 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 14:28:44 -0800
Subject: [PATCH 08/22] fix(options): hardcoded, 20x speed increase

---
 src/constants/options.ts    |   6 +
 src/state/options/hooks.tsx | 422 ++++++++++++++++++------------------
 2 files changed, 211 insertions(+), 217 deletions(-)
 create mode 100644 src/constants/options.ts

diff --git a/src/constants/options.ts b/src/constants/options.ts
new file mode 100644
index 00000000..f30be580
--- /dev/null
+++ b/src/constants/options.ts
@@ -0,0 +1,6 @@
+export const optionAddresses = [
+  '0x6688E09a0af5dAfa2a6dcD09f180F084ad964005',
+  '0x5B83dEc645BE2B8137a20175f59000c20C6dce82',
+  '0x875F1F8E7426B91c388807D5257f73700D04d653',
+  '0x5b419b581081F8E38A3c450AE518E0aefD4a32B4',
+]
diff --git a/src/state/options/hooks.tsx b/src/state/options/hooks.tsx
index 8dd01125..af6c7c5b 100644
--- a/src/state/options/hooks.tsx
+++ b/src/state/options/hooks.tsx
@@ -22,6 +22,7 @@ import {
 import { useActiveWeb3React } from '@/hooks/user/index'
 import { useAddNotif } from '@/state/notifs/hooks'
 import { STABLECOINS } from '@/constants/index'
+import { optionAddresses } from '@/constants/options'
 
 export const useOptions = (): OptionsState => {
   const state = useSelector<AppState, AppState['options']>(
@@ -61,244 +62,231 @@ export const useUpdateOptions = (): ((
       const isUniswap = venue === Venue.UNISWAP ? true : false
       console.log('loading options')
       setTimeout(() => {
-        console.log('system fail')
-        if (!provider) return
+        if (!provider) {
+          console.log('system fail')
+          return
+        }
       }, 200)
-      Protocol.getAllOptionClones(provider)
-        .then(async (optionAddresses) => {
-          Protocol.getOptionsUsingMultiCall(chainId, optionAddresses, provider)
-            .then((optionEntitiesObject) => {
-              const allKeys: string[] = Object.keys(optionEntitiesObject)
-              const allPairAddresses: string[] = []
-              const allTokensArray: string[][] = []
-              for (let i = 0; i < allKeys.length; i++) {
-                const key: string = allKeys[i]
-                const option: Option = optionEntitiesObject[key]
-                allPairAddresses.push(
-                  isUniswap
-                    ? option.uniswapPairAddress
-                    : option.sushiswapPairAddress
-                )
-                allTokensArray.push([
-                  option.redeem.address,
-                  option.underlying.address,
-                ])
+
+      Protocol.getOptionsUsingMultiCall(chainId, optionAddresses, provider)
+        .then((optionEntitiesObject) => {
+          const allKeys: string[] = Object.keys(optionEntitiesObject)
+          const allPairAddresses: string[] = []
+          const allTokensArray: string[][] = []
+          for (let i = 0; i < allKeys.length; i++) {
+            const key: string = allKeys[i]
+            const option: Option = optionEntitiesObject[key]
+            allPairAddresses.push(
+              isUniswap
+                ? option.uniswapPairAddress
+                : option.sushiswapPairAddress
+            )
+            allTokensArray.push([
+              option.redeem.address,
+              option.underlying.address,
+            ])
+          }
+          Protocol.getPairsFromMultiCall(provider, allTokensArray, venue)
+            .then((allPairsData) => {
+              const actualPairs = []
+              for (const pair of allPairsData) {
+                if (pair !== ethers.constants.AddressZero) {
+                  actualPairs.push(pair)
+                }
               }
-              Protocol.getPairsFromMultiCall(provider, allTokensArray, venue)
-                .then((allPairsData) => {
-                  const actualPairs = []
-                  for (const pair of allPairsData) {
-                    if (pair !== ethers.constants.AddressZero) {
-                      actualPairs.push(pair)
-                    }
+              Protocol.getReservesFromMultiCall(provider, actualPairs)
+                .then((allReservesData) => {
+                  const allPackedReserves: any = []
+                  for (let t = 0; t < allReservesData.length / 3; t++) {
+                    const startIndex = t * 3
+                    const firstItem: string[] = allReservesData[startIndex]
+                    const secondItem: string = allReservesData[startIndex + 1]
+                    const thirdItem: string = allReservesData[startIndex + 2]
+                    allPackedReserves.push([firstItem, secondItem, thirdItem])
                   }
-                  Protocol.getReservesFromMultiCall(provider, actualPairs)
-                    .then((allReservesData) => {
-                      const allPackedReserves: any = []
-                      for (let t = 0; t < allReservesData.length / 3; t++) {
-                        const startIndex = t * 3
-                        const firstItem: string[] = allReservesData[startIndex]
-                        const secondItem: string =
-                          allReservesData[startIndex + 1]
-                        const thirdItem: string =
-                          allReservesData[startIndex + 2]
-                        allPackedReserves.push([
-                          firstItem,
-                          secondItem,
-                          thirdItem,
-                        ])
+
+                  const pairReserveTotal = [
+                    BigNumber.from(0),
+                    BigNumber.from(0),
+                  ]
+                  for (let i = 0; i < allKeys.length; i++) {
+                    const key: string = allKeys[i]
+                    const option: Option = optionEntitiesObject[key]
+                    let index = 0
+                    let reserves: string[] = ['0', '0']
+                    let pairDataItem: string[]
+                    for (const packed of allPackedReserves) {
+                      index = packed.indexOf(option.redeem.address)
+                      if (index !== -1) {
+                        reserves = packed[0]
+                        pairDataItem = packed
                       }
+                    }
 
-                      const pairReserveTotal = [
-                        BigNumber.from(0),
-                        BigNumber.from(0),
-                      ]
-                      for (let i = 0; i < allKeys.length; i++) {
-                        const key: string = allKeys[i]
-                        const option: Option = optionEntitiesObject[key]
-                        let index = 0
-                        let reserves: string[] = ['0', '0']
-                        let pairDataItem: string[]
-                        for (const packed of allPackedReserves) {
-                          index = packed.indexOf(option.redeem.address)
-                          if (index !== -1) {
-                            reserves = packed[0]
-                            pairDataItem = packed
-                          }
-                        }
+                    if (typeof reserves === 'undefined') reserves = ['0', '0']
 
-                        if (typeof reserves === 'undefined')
-                          reserves = ['0', '0']
+                    let token0: string = option.underlying.address
+                    let token1: string = option.redeem.address
+                    if (typeof pairDataItem !== 'undefined') {
+                      token0 = pairDataItem[1]
+                      token1 = pairDataItem[2]
+                    }
 
-                        let token0: string = option.underlying.address
-                        let token1: string = option.redeem.address
-                        if (typeof pairDataItem !== 'undefined') {
-                          token0 = pairDataItem[1]
-                          token1 = pairDataItem[2]
-                        }
+                    const underlyingAddress = option.underlying.address
+                    const redeemAddress = option.redeem.address
+                    let underlyingTokenAmount: TokenAmount
+                    let redeemTokenAmount: TokenAmount
+                    if (
+                      token0 === underlyingAddress &&
+                      token1 === redeemAddress
+                    ) {
+                      underlyingTokenAmount = new TokenAmount(
+                        option.underlying,
+                        reserves[0]
+                      )
+                      redeemTokenAmount = new TokenAmount(
+                        option.redeem,
+                        reserves[1]
+                      )
+                    } else {
+                      redeemTokenAmount = new TokenAmount(
+                        option.redeem,
+                        reserves[0]
+                      )
+                      underlyingTokenAmount = new TokenAmount(
+                        option.underlying,
+                        reserves[1]
+                      )
+                    }
+
+                    const pairType = isUniswap ? Pair : SushiSwapSDK.Pair
+                    const pair: Pair | SushiSwapSDK.Pair = new pairType(
+                      underlyingTokenAmount,
+                      redeemTokenAmount
+                    )
+                    option.setPair(pair)
+
+                    const marketType = isUniswap
+                      ? UniswapMarket
+                      : SushiSwapMarket
+
+                    const market:
+                      | UniswapMarket
+                      | SushiSwapMarket = new marketType(
+                      option,
+                      underlyingTokenAmount,
+                      redeemTokenAmount
+                    )
 
-                        const underlyingAddress = option.underlying.address
-                        const redeemAddress = option.redeem.address
-                        let underlyingTokenAmount: TokenAmount
-                        let redeemTokenAmount: TokenAmount
+                    const underlyingReserve = option.pair
+                      .reserveOf(option.underlying)
+                      .raw.toString()
+
+                    if (option.isCall) {
+                      if (isLiquidity) {
                         if (
-                          token0 === underlyingAddress &&
-                          token1 === redeemAddress
+                          (option.baseValue.token.symbol.toUpperCase() ===
+                            'SUSHI' ||
+                            option.baseValue.token.symbol.toUpperCase() ===
+                              'WETH') &&
+                          (option.strikePrice === '5000' ||
+                            option.strikePrice === '30')
                         ) {
-                          underlyingTokenAmount = new TokenAmount(
-                            option.underlying,
-                            reserves[0]
-                          )
-                          redeemTokenAmount = new TokenAmount(
-                            option.redeem,
-                            reserves[1]
+                          pairReserveTotal[0] = pairReserveTotal[0].add(
+                            BigNumber.from(underlyingReserve)
                           )
-                        } else {
-                          redeemTokenAmount = new TokenAmount(
-                            option.redeem,
-                            reserves[0]
+                          calls.push({
+                            entity: option,
+                            asset: assetName,
+                            market: market,
+                            id: option.name,
+                            venue: Venue.SUSHISWAP,
+                          })
+                        }
+                      } else {
+                        if (
+                          option.baseValue.token.symbol.toUpperCase() ===
+                            assetName.toUpperCase() &&
+                          (option.strikePrice === '5000' ||
+                            option.strikePrice === '30')
+                        ) {
+                          pairReserveTotal[0] = pairReserveTotal[0].add(
+                            BigNumber.from(underlyingReserve)
                           )
-                          underlyingTokenAmount = new TokenAmount(
-                            option.underlying,
-                            reserves[1]
+                          calls.push({
+                            entity: option,
+                            asset: assetName,
+                            market: market,
+                            id: option.name,
+                            venue: Venue.SUSHISWAP,
+                          })
+                        }
+                      }
+                    } else {
+                      if (isLiquidity) {
+                        const asset = option.quoteValue.token.symbol.toUpperCase()
+                        if (
+                          (asset === 'WETH' || asset === 'SUSHI') &&
+                          (option.strikePrice === '2.5' ||
+                            option.strikePrice === '480') &&
+                          (option.underlying.address ===
+                            STABLECOINS[chainId].address ||
+                            option.quoteValue.token.address === assetAddress)
+                        ) {
+                          pairReserveTotal[0] = pairReserveTotal[0].add(
+                            BigNumber.from(underlyingReserve)
                           )
+                          puts.push({
+                            entity: option,
+                            asset: assetName,
+                            market: market,
+                            id: option.name,
+                            venue: Venue.SUSHISWAP,
+                          })
                         }
-
-                        const pairType = isUniswap ? Pair : SushiSwapSDK.Pair
-                        const pair: Pair | SushiSwapSDK.Pair = new pairType(
-                          underlyingTokenAmount,
-                          redeemTokenAmount
-                        )
-                        option.setPair(pair)
-
-                        const marketType = isUniswap
-                          ? UniswapMarket
-                          : SushiSwapMarket
-
-                        const market:
-                          | UniswapMarket
-                          | SushiSwapMarket = new marketType(
-                          option,
-                          underlyingTokenAmount,
-                          redeemTokenAmount
-                        )
-
-                        const underlyingReserve = option.pair
-                          .reserveOf(option.underlying)
-                          .raw.toString()
-
-                        if (option.isCall) {
-                          if (isLiquidity) {
-                            if (
-                              (option.baseValue.token.symbol.toUpperCase() ===
-                                'SUSHI' ||
-                                option.baseValue.token.symbol.toUpperCase() ===
-                                  'WETH') &&
-                              (option.strikePrice === '5000' ||
-                                option.strikePrice === '30')
-                            ) {
-                              pairReserveTotal[0] = pairReserveTotal[0].add(
-                                BigNumber.from(underlyingReserve)
-                              )
-                              calls.push({
-                                entity: option,
-                                asset: assetName,
-                                market: market,
-                                id: option.name,
-                                venue: Venue.SUSHISWAP,
-                              })
-                            }
-                          } else {
-                            if (
-                              option.baseValue.token.symbol.toUpperCase() ===
-                                assetName.toUpperCase() &&
-                              (option.strikePrice === '5000' ||
-                                option.strikePrice === '30')
-                            ) {
-                              pairReserveTotal[0] = pairReserveTotal[0].add(
-                                BigNumber.from(underlyingReserve)
-                              )
-                              calls.push({
-                                entity: option,
-                                asset: assetName,
-                                market: market,
-                                id: option.name,
-                                venue: Venue.SUSHISWAP,
-                              })
-                            }
-                          }
-                        } else {
-                          if (isLiquidity) {
-                            const asset = option.quoteValue.token.symbol.toUpperCase()
-                            if (
-                              (asset === 'WETH' || asset === 'SUSHI') &&
-                              (option.strikePrice === '2.5' ||
-                                option.strikePrice === '480') &&
-                              (option.underlying.address ===
-                                STABLECOINS[chainId].address ||
-                                option.quoteValue.token.address ===
-                                  assetAddress)
-                            ) {
-                              pairReserveTotal[0] = pairReserveTotal[0].add(
-                                BigNumber.from(underlyingReserve)
-                              )
-                              puts.push({
-                                entity: option,
-                                asset: assetName,
-                                market: market,
-                                id: option.name,
-                                venue: Venue.SUSHISWAP,
-                              })
-                            }
-                          } else {
-                            const asset = option.quoteValue.token.symbol.toUpperCase()
-                            if (
-                              asset === assetName.toUpperCase() &&
-                              (option.strikePrice === '2.5' ||
-                                option.strikePrice === '480') &&
-                              (option.underlying.address ===
-                                STABLECOINS[chainId].address ||
-                                option.quoteValue.token.address ===
-                                  assetAddress)
-                            ) {
-                              pairReserveTotal[1] = pairReserveTotal[1].add(
-                                BigNumber.from(underlyingReserve)
-                              )
-                              puts.push({
-                                entity: option,
-                                asset: assetName,
-                                market: market,
-                                id: option.name,
-                                venue: Venue.SUSHISWAP,
-                              })
-                            }
-                          }
+                      } else {
+                        const asset = option.quoteValue.token.symbol.toUpperCase()
+                        if (
+                          asset === assetName.toUpperCase() &&
+                          (option.strikePrice === '2.5' ||
+                            option.strikePrice === '480') &&
+                          (option.underlying.address ===
+                            STABLECOINS[chainId].address ||
+                            option.quoteValue.token.address === assetAddress)
+                        ) {
+                          pairReserveTotal[1] = pairReserveTotal[1].add(
+                            BigNumber.from(underlyingReserve)
+                          )
+                          puts.push({
+                            entity: option,
+                            asset: assetName,
+                            market: market,
+                            id: option.name,
+                            venue: Venue.SUSHISWAP,
+                          })
                         }
                       }
-                      console.log(puts)
-                      dispatch(
-                        updateOptions({
-                          loading: false,
-                          calls: calls,
-                          puts: puts,
-                          reservesTotal: pairReserveTotal,
-                        })
-                      )
-                    })
-                    .catch((error) => {
-                      addNotif(0, 'Reserves Error', error.message, '')
+                    }
+                  }
+                  dispatch(
+                    updateOptions({
+                      loading: false,
+                      calls: calls,
+                      puts: puts,
+                      reservesTotal: pairReserveTotal,
                     })
+                  )
+                })
+                .catch((error) => {
+                  addNotif(0, 'Reserves Error', error.message, '')
                 })
-                .catch((error) => addNotif(0, 'Pair Error', error.message, ''))
-            })
-            .catch((error) => {
-              if (error) {
-                addNotif(0, 'Options Error', error.message, '')
-              }
             })
+            .catch((error) => addNotif(0, 'Pair Error', error.message, ''))
         })
         .catch((error) => {
-          addNotif(0, 'Option Multicall Error', error.message, '')
+          if (error) {
+            addNotif(0, 'Options Error', error.message, '')
+          }
         })
     },
     [dispatch, library, chainId, updateOptions, addNotif]

From ba9806fa2046e892c086ec41e45128fbeb766430 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 14:38:11 -0800
Subject: [PATCH 09/22] fix(style): various updates

---
 src/components/Liquidity/LiquidityHeader/index.tsx        | 4 ++--
 .../LiquidityTableRow/LiquidityTableRow.tsx               | 8 ++++++--
 .../components/RemoveLiquidity/RemoveLiquidity.tsx        | 2 +-
 src/components/Market/OrderCard/components/Swap/Swap.tsx  | 2 +-
 src/pages/liquidity/index.tsx                             | 1 +
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/Liquidity/LiquidityHeader/index.tsx b/src/components/Liquidity/LiquidityHeader/index.tsx
index 7cb057c2..694e4043 100644
--- a/src/components/Liquidity/LiquidityHeader/index.tsx
+++ b/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;
diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
index 7834b5c0..d5290790 100644
--- a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
+++ b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
@@ -421,8 +421,12 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
               <StyledTitle>
                 <LineItem
                   label={'Liquidity Balance'}
-                  data={numeral(lp).format('0.00')}
-                  units={'SLP'}
+                  data={numeral(
+                    formatEther(
+                      calculateLiquidityValuePerShare().totalUnderlyingPerLp
+                    )
+                  ).format('0.00a')}
+                  units={asset}
                 />
                 <Spacer />
                 <RemoveLiqButton />
diff --git a/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx b/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx
index 6c33fdeb..ed8a0ce2 100644
--- a/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx
+++ b/src/components/Market/OrderCard/components/RemoveLiquidity/RemoveLiquidity.tsx
@@ -425,7 +425,7 @@ const RemoveLiquidity: React.FC = () => {
         </>
       )}
 
-      <Spacer />
+      <Spacer size="sm" />
       <Box row justifyContent="flex-start">
         {loading ? (
           <Button
diff --git a/src/components/Market/OrderCard/components/Swap/Swap.tsx b/src/components/Market/OrderCard/components/Swap/Swap.tsx
index 3b54c6a2..a16f0ad6 100644
--- a/src/components/Market/OrderCard/components/Swap/Swap.tsx
+++ b/src/components/Market/OrderCard/components/Swap/Swap.tsx
@@ -435,7 +435,6 @@ const Swap: React.FC = () => {
               </>
             ) : (
               <>
-                {' '}
                 <LineItem
                   label={'Spot Price'}
                   data={formatBalance(prem)}
@@ -443,6 +442,7 @@ const Swap: React.FC = () => {
                   color={null}
                   tip="The current spot price of the option."
                 />
+                <Spacer size="sm" />
               </>
             )}
           </>
diff --git a/src/pages/liquidity/index.tsx b/src/pages/liquidity/index.tsx
index 26a5f8b8..5b71d217 100644
--- a/src/pages/liquidity/index.tsx
+++ b/src/pages/liquidity/index.tsx
@@ -174,6 +174,7 @@ const Liquidity = ({ icons }) => {
             </StyledHeaderContainer>
 
             <LiquidityTable callActive={callPutActive} />
+            <Spacer />
           </StyledLitContainer>
         </StyledMarket>
       )}

From b7c444e27446f55bbb02efe54e78d116cacca159 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 15:04:22 -0800
Subject: [PATCH 10/22] fix(positions): simplify

---
 .../Market/PositionsCard/PositionsCard.tsx    | 60 +++++++++++++------
 1 file changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/components/Market/PositionsCard/PositionsCard.tsx b/src/components/Market/PositionsCard/PositionsCard.tsx
index 70a44523..c7d90aea 100644
--- a/src/components/Market/PositionsCard/PositionsCard.tsx
+++ b/src/components/Market/PositionsCard/PositionsCard.tsx
@@ -7,6 +7,7 @@ import ExpandLessIcon from '@material-ui/icons/ExpandLess'
 import Card from '@/components/Card'
 import CardContent from '@/components/CardContent'
 import CardTitle from '@/components/CardTitle'
+import Separator from '@/components/Separator'
 import Spacer from '@/components/Spacer'
 import Box from '@/components/Box'
 import Loader from '@/components/Loader'
@@ -36,26 +37,30 @@ const Position: React.FC<TokenProps> = ({ option }) => {
     <StyledPosition onClick={handleClick}>
       <StyledPrice>
         <StyledExpiryContainer>
-          <StyledExpiry>{utc.substr(4, 12)}</StyledExpiry>
-          <StyledExpiry>Total Value</StyledExpiry>
-        </StyledExpiryContainer>
-        <StyledValuesContainer>
-          <StyledValue>
+          <StyledExpiry>
             {numeral(option.attributes.entity.strikePrice).format(
               option.attributes.entity.strikePrice >= 1 ? '$0' : '$0.00'
             )}{' '}
-            {option.attributes.entity.isCall ? 'Call' : 'Put'}
+            {option.attributes.entity.isCall ? 'Call' : 'Put'}{' '}
+            {utc.substr(4, 12)}
+          </StyledExpiry>
+        </StyledExpiryContainer>
+        <StyledValuesContainer>
+          <StyledValue>
+            {BigNumber.from(option.long).gt(0)
+              ? numeral(
+                  formatEther(BigNumber.from(option.long ? option.long : 0))
+                ).format('0.00a')
+              : '-'}{' '}
+            <Units>{'LONG'}</Units>
           </StyledValue>
-          <Spacer size="sm" />
           <StyledValue>
-            {numeral(
-              formatEther(
-                BigNumber.from(option.long ? option.long : 0)
-                  .mul(option.attributes.market.spotClosePremium.raw.toString())
-                  .div(parseEther('1'))
-              )
-            ).format('0.00')}{' '}
-            {option.attributes.asset.toUpperCase()}
+            {BigNumber.from(option.redeem).gt(0)
+              ? numeral(
+                  formatEther(BigNumber.from(option.redeem ? option.redeem : 0))
+                ).format('0.00a')
+              : '0'}{' '}
+            <Units>{'SHORT '}</Units>{' '}
           </StyledValue>
         </StyledValuesContainer>
       </StyledPrice>
@@ -130,9 +135,14 @@ const PositionsCard: React.FC = () => {
     </div>
   )
 }
+const Units = styled.span`
+  opacity: 0.66;
+  font-size: 14px;
+`
 
 const Scroll = styled.div`
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
   max-height: 20em;
   border-radius: ${(props) => props.theme.borderRadius}px;
 `
@@ -156,7 +166,7 @@ const StyledExpiryContainer = styled.div`
   flex-direction: row;
   flex: 1;
   justify-content: space-between;
-  padding-left: ${(props) => props.theme.spacing[4]}px;
+  padding-left: ${(props) => props.theme.spacing[3]}px;
   padding-right: ${(props) => props.theme.spacing[4]}px;
 `
 
@@ -165,7 +175,8 @@ const StyledValuesContainer = styled.div`
   flex: 1;
   flex-direction: row;
   justify-content: space-between;
-  padding-left: ${(props) => props.theme.spacing[4]}px;
+  top: -0.2em;
+  padding-left: ${(props) => props.theme.spacing[3]}px;
   padding-right: ${(props) => props.theme.spacing[4]}px;
 `
 
@@ -180,10 +191,21 @@ const StyledValue = styled.div`
   font-size: 18px;
   letter-spacing: 0.5px;
 `
+const StyledValues = styled.div`
+  color: ${(props) => props.theme.color.white};
+  font-size: 14px;
+  letter-spacing: 0.5px;
+`
 
 const StyledExpiry = styled.span`
   color: ${(props) => props.theme.color.grey[400]};
-  font-size: 12px;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+`
+
+const StyledExpiryAlt = styled.span`
+  color: ${(props) => props.theme.color.grey[400]};
+  font-size: 14px;
   letter-spacing: 0.5px;
 `
 

From 645b04fe59f4a31da66c1e5ae082430f7f7694a7 Mon Sep 17 00:00:00 2001
From: Alexangelj <alexangel.j@gmail.com>
Date: Wed, 3 Feb 2021 16:20:08 -0800
Subject: [PATCH 11/22] fix(table): Adds total liquidity to options table.
 Fixes price math.

---
 .../LiquidityTableRow/LiquidityTableRow.tsx   |  2 +-
 .../Market/OptionsTable/OptionsTable.tsx      |  2 +
 .../OptionsTableRow/OptionsTableRow.tsx       | 60 ++++++++++++++++++-
 .../Market/OrderCard/components/Swap/Swap.tsx | 37 ++++--------
 4 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
index d5290790..116e52e3 100644
--- a/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
+++ b/src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
@@ -230,7 +230,7 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
       .div(parseEther('1'))
 
     return { shortPerLp, underlyingPerLp, totalUnderlyingPerLp }
-  }, [market, lpTotalSupply, lpTotalSupply])
+  }, [market, lpTotalSupply])
 
   const handleOnClick = useCallback(() => {
     //setProvide(true)
diff --git a/src/components/Market/OptionsTable/OptionsTable.tsx b/src/components/Market/OptionsTable/OptionsTable.tsx
index fea336e7..1664380f 100644
--- a/src/components/Market/OptionsTable/OptionsTable.tsx
+++ b/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
     },
diff --git a/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx b/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx
index f2f9fe19..17b78486 100644
--- a/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx
+++ b/src/components/Market/OptionsTable/OptionsTableRow/OptionsTableRow.tsx
@@ -17,8 +17,19 @@ import GreeksTableRow, { Greeks } from '../GreeksTableRow'
 
 import numeral from 'numeral'
 import isZero from '@/utils/isZero'
-import { parseEther } from 'ethers/lib/utils'
+import { parseEther, formatEther } from 'ethers/lib/utils'
+import { BigNumber } from 'ethers'
 import formatExpiry from '@/utils/formatExpiry'
+import { TokenAmount } from '@sushiswap/sdk'
+
+import useTokenTotalSupply from '@/hooks/useTokenTotalSupply'
+import {
+  Option,
+  UniswapMarket,
+  SushiSwapMarket,
+  Operation,
+  Venue,
+} from '@primitivefi/sdk'
 
 export interface TableColumns {
   key: string
@@ -30,6 +41,7 @@ export interface TableColumns {
   reserves: string[]
   expiry: number
   isCall: boolean
+  market: UniswapMarket | SushiSwapMarket
 }
 
 export interface OptionsTableRowProps {
@@ -58,6 +70,7 @@ const OptionsTableRow: React.FC<OptionsTableRowProps> = ({
     reserves,
     expiry,
     isCall,
+    market,
   } = columns
   const handleOnClick = useCallback(() => {
     if (reserves[0] !== '0.00') {
@@ -73,6 +86,42 @@ const OptionsTableRow: React.FC<OptionsTableRowProps> = ({
   })
 
   const units = isCall ? asset.toUpperCase() : 'DAI'
+  const lpTotalSupply = useTokenTotalSupply(market.liquidityToken.address)
+
+  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])
 
   return (
     <StyledDiv ref={nodeRef}>
@@ -117,10 +166,15 @@ const OptionsTableRow: React.FC<OptionsTableRowProps> = ({
         ) : (
           <TableCell>-</TableCell>
         )}
-        {parseFloat(reserves[0]) > 0 ? (
+        {parseFloat(
+          formatEther(calculateTotalLiquidity().totalUnderlyingPerLp)
+        ) > 0 ? (
           <TableCell>
             <span>
-              {numeral(reserves[0]).format('0.00a')} <Units>{units}</Units>
+              {numeral(
+                formatEther(calculateTotalLiquidity().totalUnderlyingPerLp)
+              ).format('0.00a')}{' '}
+              <Units>{units}</Units>
             </span>
           </TableCell>
         ) : (
diff --git a/src/components/Market/OrderCard/components/Swap/Swap.tsx b/src/components/Market/OrderCard/components/Swap/Swap.tsx
index a16f0ad6..f0c5f1bd 100644
--- a/src/components/Market/OrderCard/components/Swap/Swap.tsx
+++ b/src/components/Market/OrderCard/components/Swap/Swap.tsx
@@ -303,6 +303,17 @@ const Swap: React.FC = () => {
     }
   }, [item, parsedAmount, inputLoading, item.market, typedValue, orderType])
 
+  const getExecutionPrice = useCallback(() => {
+    const long = formatEther(
+      parseEther(cost.debit).mul(parseEther('1')).div(parsedAmount)
+    )
+    const short = formatEther(
+      parseEther(cost.credit).mul(parseEther('1')).div(parsedAmount)
+    )
+
+    return orderType === Operation.LONG ? long : short
+  }, [item, parsedAmount, cost, orderType])
+
   const calculateProportionalShort = useCallback(() => {
     const sizeWei = parsedAmount
     return formatEtherBalance(entity.proportionalShort(sizeWei))
@@ -396,31 +407,7 @@ const Swap: React.FC = () => {
               <>
                 <LineItem
                   label={'Execution Price'}
-                  data={
-                    orderType === Operation.LONG
-                      ? `${
-                          parseFloat(
-                            formatParsedAmount(
-                              parseEther(cost.debit).toString()
-                            ).toString()
-                          ) /
-                          parseFloat(
-                            formatParsedAmount(
-                              parsedAmount.toString()
-                            ).toString()
-                          )
-                        }`
-                      : `${
-                          parseFloat(
-                            formatParsedAmount(
-                              parseEther(cost.credit).toString()
-                            )
-                          ) /
-                          parseFloat(
-                            formatParsedAmount(parsedAmount.toString())
-                          )
-                        }`
-                  }
+                  data={getExecutionPrice()}
                   units={underlyingAssetSymbol()}
                   color={isBelowSlippage() ? null : 'red'}
                   tip="The estimated price of the option after slippage."

From 601dcf7da9e24ce0c2415741d68368fa0451efa5 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 16:37:12 -0800
Subject: [PATCH 12/22] fix(swap): loader

---
 src/components/Market/OrderCard/components/Swap/Swap.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Market/OrderCard/components/Swap/Swap.tsx b/src/components/Market/OrderCard/components/Swap/Swap.tsx
index a16f0ad6..8af3459d 100644
--- a/src/components/Market/OrderCard/components/Swap/Swap.tsx
+++ b/src/components/Market/OrderCard/components/Swap/Swap.tsx
@@ -497,6 +497,7 @@ const Swap: React.FC = () => {
               <Button
                 disabled={loading}
                 full
+                variant="secondary"
                 size="sm"
                 onClick={handleApproval}
                 isLoading={loading}

From 53415b4fe76b8dce81640a8454bb24e27d9f14a4 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 16:54:55 -0800
Subject: [PATCH 13/22] Merge commit


From 7527c8e417857a0bf4584cc34717e1c859d2cb61 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 19:52:01 -0800
Subject: [PATCH 14/22] fix(order): clear on change

---
 src/state/order/hooks.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/state/order/hooks.tsx b/src/state/order/hooks.tsx
index b24bb197..c7568641 100644
--- a/src/state/order/hooks.tsx
+++ b/src/state/order/hooks.tsx
@@ -102,9 +102,9 @@ export const useUpdateItem = (): ((
         default:
           break
       }
+      clear()
+      clearLP()
       if (orderType === Operation.NONE) {
-        clear()
-        clearLP()
         dispatch(
           updateItem({
             item,

From 8dcfc93ceeb85b674891ae41e8a5cd1e59b9e82a Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 19:52:19 -0800
Subject: [PATCH 15/22] feat(CLOSE_LONG):  order card orders

---
 .../Market/OrderCard/components/Swap/Swap.tsx | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Market/OrderCard/components/Swap/Swap.tsx b/src/components/Market/OrderCard/components/Swap/Swap.tsx
index 9b5cd8ea..b4bc0bdd 100644
--- a/src/components/Market/OrderCard/components/Swap/Swap.tsx
+++ b/src/components/Market/OrderCard/components/Swap/Swap.tsx
@@ -175,15 +175,23 @@ const Swap: React.FC = () => {
       break
   }
   const tokenBalance = useTokenBalance(entity.address)
-  const optionTokenAmount = new Token(
+  const redeemBalance = useTokenBalance(entity.redeem.address)
+
+  const optionToken = new Token(entity.chainId, entity.address, 18, 'LONG')
+  const tokenAmount: TokenAmount = new TokenAmount(
+    optionToken,
+    parseEther(tokenBalance).toString()
+  )
+
+  const shortToken = new Token(
     entity.chainId,
-    entity.address,
+    entity.redeem.address,
     18,
-    'LONG'
+    'SHORT'
   )
-  const tokenAmount: TokenAmount = new TokenAmount(
-    optionTokenAmount,
-    parseEther(tokenBalance).toString()
+  const shortTokenAmount: TokenAmount = new TokenAmount(
+    shortToken,
+    parseEther(redeemBalance).toString()
   )
 
   const isUniswap = item.venue === Venue.UNISWAP ? true : false
@@ -235,6 +243,9 @@ const Swap: React.FC = () => {
   }, [submitOrder, item, library, parsedAmount, orderType])
 
   useEffect(() => {
+    if (shortTokenAmount.greaterThan('0') && orderType === Operation.LONG) {
+      updateItem(item, Operation.CLOSE_SHORT)
+    }
     const calculateTotalCost = async () => {
       let debit = '0'
       let credit = '0'
@@ -361,7 +372,11 @@ const Swap: React.FC = () => {
               orderType === Operation.CLOSE_LONG ||
               orderType === Operation.WRITE
             ) {
-              updateItem(item, Operation.LONG)
+              if (shortTokenAmount.greaterThan('0')) {
+                updateItem(item, Operation.CLOSE_SHORT)
+              } else {
+                updateItem(item, Operation.LONG)
+              }
             } else {
               if (tokenAmount.greaterThan('0')) {
                 updateItem(item, Operation.CLOSE_LONG)

From c417570600725202f9801fc19dbce360673d00e9 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 20:38:33 -0800
Subject: [PATCH 16/22] fix(PriceInput): display block

---
 src/components/PriceInput/PriceInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PriceInput/PriceInput.tsx b/src/components/PriceInput/PriceInput.tsx
index 38c03a9f..427ae92b 100644
--- a/src/components/PriceInput/PriceInput.tsx
+++ b/src/components/PriceInput/PriceInput.tsx
@@ -100,5 +100,6 @@ const OpacitySpan = styled.span`
 
 const StyledContainer = styled.div`
   width: 100%;
+  display: block;
 `
 export default PriceInput

From 93f2c5f2e068752eb6c21fa9b06b97e4e97692d7 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 20:41:43 -0800
Subject: [PATCH 17/22] fix(PriceInput): revert

---
 src/components/PriceInput/PriceInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PriceInput/PriceInput.tsx b/src/components/PriceInput/PriceInput.tsx
index 427ae92b..d3f9f98a 100644
--- a/src/components/PriceInput/PriceInput.tsx
+++ b/src/components/PriceInput/PriceInput.tsx
@@ -100,6 +100,6 @@ const OpacitySpan = styled.span`
 
 const StyledContainer = styled.div`
   width: 100%;
-  display: block;
+  display: inherit;
 `
 export default PriceInput

From 72d7ce75965b2e475cf5c845fd36c27ba9e2af19 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 21:15:24 -0800
Subject: [PATCH 18/22] fix(input): flex

---
 src/components/PriceInput/PriceInput.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/PriceInput/PriceInput.tsx b/src/components/PriceInput/PriceInput.tsx
index d3f9f98a..e7400603 100644
--- a/src/components/PriceInput/PriceInput.tsx
+++ b/src/components/PriceInput/PriceInput.tsx
@@ -100,6 +100,7 @@ const OpacitySpan = styled.span`
 
 const StyledContainer = styled.div`
   width: 100%;
-  display: inherit;
+  display: flex;
+  flex-direction: column;
 `
 export default PriceInput

From 51b5ebf2dda092c092620c7f6577b97075842a4f Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 21:38:17 -0800
Subject: [PATCH 19/22] fix(style): user agent override

---
 src/components/PriceInput/PriceInput.tsx | 1 +
 src/components/TableCell/TableCell.tsx   | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/components/PriceInput/PriceInput.tsx b/src/components/PriceInput/PriceInput.tsx
index e7400603..98aea5d5 100644
--- a/src/components/PriceInput/PriceInput.tsx
+++ b/src/components/PriceInput/PriceInput.tsx
@@ -102,5 +102,6 @@ const StyledContainer = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
+  position: inherit;
 `
 export default PriceInput
diff --git a/src/components/TableCell/TableCell.tsx b/src/components/TableCell/TableCell.tsx
index a089dcda..abc5a0ca 100644
--- a/src/components/TableCell/TableCell.tsx
+++ b/src/components/TableCell/TableCell.tsx
@@ -8,6 +8,8 @@ const TableCell: React.FC = (props) => {
 const StyledTableCell = styled.div`
   color: inherit;
   flex: 1;
+  display: block;
+  position: inherit;
 `
 
 export default TableCell

From 99c00b52848c7e244328a6efe33ad0d24430e360 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 21:53:01 -0800
Subject: [PATCH 20/22] fix(notifs): width

---
 src/components/Notifs/Notifs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Notifs/Notifs.tsx b/src/components/Notifs/Notifs.tsx
index 1564dd13..b7519cfa 100644
--- a/src/components/Notifs/Notifs.tsx
+++ b/src/components/Notifs/Notifs.tsx
@@ -53,7 +53,7 @@ const Notifs: React.FC = () => {
 }
 
 const StyledBox = styled.div`
-  max-width: 30em !important;
+  width: 30em !important;
   position: fixed;
   bottom: 3em;
   left: 20px;

From 59865948976de00300915f96aca3012735c5aa10 Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 21:54:38 -0800
Subject: [PATCH 21/22] fix(notifs): width change

---
 src/components/Notifs/Notifs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Notifs/Notifs.tsx b/src/components/Notifs/Notifs.tsx
index b7519cfa..409f80b8 100644
--- a/src/components/Notifs/Notifs.tsx
+++ b/src/components/Notifs/Notifs.tsx
@@ -53,7 +53,7 @@ const Notifs: React.FC = () => {
 }
 
 const StyledBox = styled.div`
-  width: 30em !important;
+  max-width: 35em !important;
   position: fixed;
   bottom: 3em;
   left: 20px;

From 810929f8e9453c94418db4bf06470d37237e68ea Mon Sep 17 00:00:00 2001
From: Zachary Thielemann <zachdt@gmail.com>
Date: Wed, 3 Feb 2021 22:01:02 -0800
Subject: [PATCH 22/22] fix(Table): display

---
 src/components/TableBody/TableBody.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/TableBody/TableBody.tsx b/src/components/TableBody/TableBody.tsx
index e610e437..e738a889 100644
--- a/src/components/TableBody/TableBody.tsx
+++ b/src/components/TableBody/TableBody.tsx
@@ -5,6 +5,8 @@ const TableBody: React.FC = (props) => {
   return <StyledTableBody>{props.children}</StyledTableBody>
 }
 
-const StyledTableBody = styled.div``
+const StyledTableBody = styled.div`
+  display: block;
+`
 
 export default TableBody