Skip to content

Commit

Permalink
Merge pull request #450 from primitivefinance/develop
Browse files Browse the repository at this point in the history 
Critical Style Changes + Options State Timeout
  • Loading branch information
@zachdt
zachdt authored Jan 28, 2021
2 parents 18adf2f + 33664e9 commit 969f75f
Show file tree
Hide file tree
Showing 10 changed files with 146 additions and 93 deletions.
65 changes: 33 additions & 32 deletions src/components/LineItem/LineItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,36 +41,38 @@ const LineItem: React.FC<LineItemProps> = ({
: null
: null
return (
<StyledLineItem row justifyContent="space-between" alignItems="center">
{tip ? (
<Tooltip text={tip}>
<Container>
<StyledLineItem row justifyContent="space-between" alignItems="center">
{tip ? (
<Tooltip text={tip}>
<StyledLabel>{label}</StyledLabel>
</Tooltip>
) : (
<StyledLabel>{label}</StyledLabel>
</Tooltip>
) : (
<StyledLabel>{label}</StyledLabel>
)}
{loading ? (
<span>
<Loader size="sm" />
</span>
) : (
<span>
<>
{sign}
<Color color={color}>
{currency === '$' ? currency : null} {formatBalance(data)}{' '}
</Color>
<StyledSym>
{currency !== '$'
? currency === 'DAI STABLECOIN'
? 'DAI'
: currency
: null}
</StyledSym>
</>
</span>
)}
</StyledLineItem>
)}
{loading ? (
<span>
<Loader size="sm" />
</span>
) : (
<span>
<>
{sign}
<Color color={color}>
{currency === '$' ? currency : null} {formatBalance(data)}{' '}
</Color>
<StyledSym>
{currency !== '$'
? currency === 'DAI STABLECOIN'
? 'DAI'
: currency
: null}
</StyledSym>
</>
</span>
)}
</StyledLineItem>
</Container>
)
}

Expand Down Expand Up @@ -101,9 +103,8 @@ const StyledLabel = styled.span<ColorProps>`
font-weight: 550;
`

const StyledLineItem = styled(Box)`
const StyledLineItem = styled(Box)``
const Container = styled.div`
width: 100%;
flex-direction: row;
`

export default LineItem
38 changes: 29 additions & 9 deletions src/components/Liquidity/LiquidityTable/LiquidityTableRow/LiquidityTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ import IconButton from '@/components/IconButton'
import Box from '@/components/Box'
import Switch from '@/components/Switch'
import Button from '@/components/Button'
import Separator from '@/components/Separator'
import Spacer from '@/components/Spacer'
import Loader from '@/components/Loader'
import LineItem from '@/components/LineItem'

import { AddLiquidity } from '@/components/Market/OrderCard/components/AddLiquidity'
import { RemoveLiquidity } from '@/components/Market/OrderCard/components/RemoveLiquidity'
Expand Down Expand Up @@ -42,7 +43,7 @@ const AddLiqButton: React.FC<any> = () => {
<>
<Button
variant={
orderType === Operation.ADD_LIQUIDITY ? 'transparent' : 'secondary'
orderType === Operation.ADD_LIQUIDITY ? 'secondary' : 'default'
}
onClick={() => {
if (orderType === Operation.ADD_LIQUIDITY) {
Expand All @@ -65,8 +66,8 @@ const RemoveLiqButton: React.FC<any> = () => {
<Button
variant={
orderType === Operation.REMOVE_LIQUIDITY_CLOSE
? 'transparent'
: 'secondary'
? 'secondary'
: 'default'
}
onClick={() => {
if (orderType === Operation.REMOVE_LIQUIDITY_CLOSE) {
Expand Down Expand Up @@ -342,21 +343,40 @@ const LiquidityTableRow: React.FC<LiquidityTableRowProps> = ({
>
<Choice>
<StyledTitle>
{asset} Balance -{' '}
{numeral(underlyingTokenBalance).format('0.00')}{' '}
<LineItem
label={'Asset Balance'}
data={numeral(underlyingTokenBalance).format('0.00')}
units={asset}
/>
<Spacer />
<AddLiqButton />
</StyledTitle>
{orderType === Operation.ADD_LIQUIDITY ? <AddLiquidity /> : null}
{orderType === Operation.ADD_LIQUIDITY ? (
<>
<Spacer size="sm" />
<Separator />
<AddLiquidity />
</>
) : null}
</Choice>

<Spacer />
<Choice>
<StyledTitle>
LP Balance - {numeral(lp).format('0.00')}
<LineItem
label={'Liquidity Balance'}
data={numeral(lp).format('0.00')}
units={'LP'}
/>
<Spacer />
<RemoveLiqButton />
</StyledTitle>
{orderType === Operation.REMOVE_LIQUIDITY_CLOSE ? (
<RemoveLiquidity />
<>
<Spacer size="sm" />
<Separator />
<RemoveLiquidity />
</>
) : null}
</Choice>
</OrderContainer>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Market/OptionsTable/OptionsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const OptionsTable: React.FC<OptionsTableProps> = (props) => {
: 0
: 0
blackScholes.setRiskFree(0)
blackScholes.setDeviation(1)
blackScholes.setDeviation(1.5) // Fix: should not be hardcoded
blackScholes.setPrice(price)
const delta = blackScholes.delta()
const theta = blackScholes.theta()
Expand Down
92 changes: 57 additions & 35 deletions src/components/Market/OrderCard/components/AddLiquidity/AddLiquidity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,11 @@ const AddLiquidity: React.FC = () => {
}
}, [setHasL, item])

const underlyingAssetSymbol = useCallback(() => {
const symbol = entity.isPut ? 'DAI' : item.asset.toUpperCase()
return symbol === '' ? entity.underlying.symbol.toUpperCase() : symbol
}, [item])

const lpToken = item.market ? item.market.liquidityToken.address : ''
const token0 = item.market ? item.market.token0.symbol : ''
const token1 = item.market ? item.market.token1.symbol : ''
Expand Down Expand Up @@ -132,17 +137,15 @@ const AddLiquidity: React.FC = () => {
const handleUnderInput = useCallback(
(value: string) => {
onUnderInput(value)
if (tab === 1) {
onOptionInput(
formatEther(
Trade.getQuote(
parseEther(value),
item.market.reserveOf(entity.underlying).raw.toString(),
item.market.reserveOf(entity.redeem).raw.toString()
).toString()
)
onOptionInput(
formatEther(
Trade.getQuote(
parseEther(value),
item.market.reserveOf(entity.underlying).raw.toString(),
item.market.reserveOf(entity.redeem).raw.toString()
).toString()
)
}
)
},
[onUnderInput, onOptionInput, tab]
)
Expand All @@ -152,6 +155,11 @@ const AddLiquidity: React.FC = () => {
onUnderInput(underlyingTokenBalance)
}, [underlyingTokenBalance, onUnderInput])

const handleSetDoubleInputMax = useCallback(() => {
onUnderInput(formatEther(parseEther(underlyingTokenBalance).div(3)))
onOptionInput(formatEther(parseEther(underlyingTokenBalance).mul(2).div(3)))
}, [underlyingTokenBalance, onUnderInput])

const handleSubmitClick = useCallback(() => {
if (tab !== 1 && hasLiquidity) {
submitOrder(
Expand Down Expand Up @@ -265,16 +273,30 @@ const AddLiquidity: React.FC = () => {
)
const poolShare =
supply.gt(0) && parsedAmount.gt(0)
? lpMinted.divide(tSupply.add(lpMinted))
: new Fraction('0')

const newPoolShare = poolShare
.add(
supply.gt(0) ? lpHold.divide(tSupply.add(lpMinted)) : new Fraction('0')
? BigNumber.from(lpMinted.raw.toString())
.mul(parseEther('1'))
.div(
BigNumber.from(tSupply.raw.toString()).add(
lpMinted.raw.toString()
)
)
: parseEther('0')

const newPoolShare = formatEther(
BigNumber.from(poolShare).add(
supply.gt(0)
? BigNumber.from(lpHold.raw.toString())
.mul(parseEther('1'))
.div(
BigNumber.from(tSupply.raw.toString()).add(
lpMinted.raw.toString()
)
)
: parseEther('0')
)
.multiply('100')
.toSignificant(6)
const addedPoolShare = poolShare.multiply('100').toSignificant(6)
)

const addedPoolShare = formatEther(poolShare.mul('100'))
return { addedPoolShare, newPoolShare }
}, [
item.market,
Expand Down Expand Up @@ -380,9 +402,9 @@ const AddLiquidity: React.FC = () => {

const noLiquidityTitle = {
text:
'This pair has no liquidity, adding liquidity will initialize this market and set an initial token ratio.',
'This pair has no liquidity, adding liquidity will initialize this market and set an initial token ratio. The Long input should be greater than the underlying input.',
tip:
'Providing liquidity to this pair will set the ratio between the tokens.',
'Providing liquidity to this pair will set the ratio between the tokens. Total deposit of underlying tokens is the sum of the inputs.',
}

return (
Expand All @@ -391,7 +413,7 @@ const AddLiquidity: React.FC = () => {
{hasLiquidity ? (
<PriceInput
name="primary"
title={`Underlying`}
title={underlyingAssetSymbol()}
quantity={underlyingValue}
onChange={handleUnderInput}
onClick={handleSetMax}
Expand All @@ -413,27 +435,31 @@ const AddLiquidity: React.FC = () => {
<Spacer size="sm" />
<PriceInput
name="primary"
title={`LONG Input`}
title={entity.isCall ? 'Call Options' : 'Put Options'}
quantity={optionValue}
onChange={handleOptionInput}
onClick={() => console.log('Max unavailable.')} //
onClick={handleSetDoubleInputMax}
/>
<Spacer />
<PriceInput
name="secondary"
title={`Underlying Input`}
title={underlyingAssetSymbol()}
quantity={underlyingValue}
onChange={handleUnderInput}
onClick={() => console.log('Max unavailable.')} //
onClick={handleSetDoubleInputMax}
balance={underlyingAmount}
/>
</>
)}
<Spacer />
<LineItem
label="LP for"
data={formatEther(calculateOptionsAddedAsLiquidity())}
units={`LONG`}
label="Total Deposit"
data={formatEther(
hasLiquidity
? parsedUnderlyingAmount
: parsedUnderlyingAmount.add(parsedOptionAmount)
)}
units={underlyingAssetSymbol()}
/>
<Spacer size="sm" />
{!hasLiquidity || tab === 1 ? (
Expand All @@ -450,7 +476,7 @@ const AddLiquidity: React.FC = () => {
)}
<LineItem
label="Receive"
data={!hasLiquidity ? '0.00' : calculatePoolShare().addedPoolShare}
data={!hasLiquidity ? '100' : calculatePoolShare().addedPoolShare}
units={`% of Pool`}
/>

Expand Down Expand Up @@ -487,10 +513,7 @@ const AddLiquidity: React.FC = () => {
disabled={
!approved[0] ||
!parsedUnderlyingAmount?.gt(0) ||
(hasLiquidity ? null : !parsedOptionAmount?.gt(0)) ||
(item.entity.isCall
? parseFloat(underlyingValue) >= 1000
: parseFloat(underlyingValue) >= 100000)
(hasLiquidity ? null : !parsedOptionAmount?.gt(0))
}
full
size="sm"
Expand All @@ -507,7 +530,6 @@ const AddLiquidity: React.FC = () => {
const LiquidityContainer = styled.div`
width: 34em;
`

const StyledSubtitle = styled.div`
color: yellow;
display: table;
Expand Down
10 changes: 7 additions & 3 deletions src/components/Market/OrderCard/components/Swap/Swap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,8 +210,11 @@ const Swap: React.FC = () => {
.mul(parseEther('1'))
.div(parseEther(prem))
onUserInput(formatEther(maxOptions))
} else {
tokenBalance && onUserInput(tokenBalance)
} else if (
orderType === Operation.CLOSE_LONG &&
!parseEther(prem).isZero()
) {
onUserInput(tokenBalance)
}
}, [tokenBalance, onUserInput, prem])

Expand Down Expand Up @@ -442,8 +445,9 @@ const Swap: React.FC = () => {

{error ? (
<Description>
<Spacer />
<Spacer size="sm" />
<WarningLabel>Order quantity too large!</WarningLabel>
<Spacer size="sm" />
</Description>
) : null}
<StyledEnd row justifyContent="flex-start">
Expand Down
4 changes: 2 additions & 2 deletions src/connectors/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const injected = new InjectedConnector({
// no coinbase testnet, requires infura mainnet node URL
export const walletconnect = new WalletConnectConnector({
rpc: {
1: `https://${INFURA_PREFIXES[1]}.infura.io/v3/${process.env.INFURA_ID}`,
1: `https://${INFURA_PREFIXES[1]}.infura.io/v3/4a1d95f7b68a4b38be1073a3523e1082`,
},
bridge: 'https://bridge.walletconnect.org',
})
Expand All @@ -21,7 +21,7 @@ export function getNetwork(defaultChainId = 1): NetworkConnector {
urls: [1, 4].reduce(
(urls, chainId) =>
Object.assign(urls, {
[chainId]: `https://${INFURA_PREFIXES[chainId]}.infura.io/v3/${process.env.INFURA_ID}`,
[chainId]: `https://${INFURA_PREFIXES[chainId]}.infura.io/v3/4a1d95f7b68a4b38be1073a3523e1082`,
}),
{}
),
Expand Down
Loading

1 comment on commit 969f75f

@vercel
Copy link

@vercel vercel bot commented on 969f75f Jan 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.