Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
1b5745d
feat: add leverage toggle button, add popup when leverage is enabled
gsantini-ube Jan 19, 2022
3591b31
fix: change description of leverage yield farming
gsantini-ube Jan 19, 2022
2e7ad8c
feat: Make deposit popup for leverage mode
gsantini-ube Jan 20, 2022
2971509
fix: lint warning issue
gsantini-ube Jan 20, 2022
1b973e6
feat: leverage yield farminig into farm details page
gsantini-ube Jan 26, 2022
b53d2fb
fix: loading issue on farm details page
gsantini-ube Jan 27, 2022
5f95ad8
fix: loading issue for position in farm details page
gsantini-ube Jan 27, 2022
ff58dd4
fix: depositing issue on leverage farm details page
gsantini-ube Jan 27, 2022
9fd40a4
feat: add leverage filter button on farms page
gsantini-ube Jan 31, 2022
174ceae
fix: slider issue and approval issue on leverage yield farming
gsantini-ube Feb 3, 2022
7f6fb43
fix: typecheck issue
gsantini-ube Feb 3, 2022
6327df7
fix: Handle exception for the case of oracle price is old
gsantini-ube Feb 10, 2022
e434be5
feat: add sorting and filters to farm page
gsantini-ube Feb 10, 2022
5f10789
Merge branch 'main' into gsantini/leverage-yield-farming
gsantini-ube Feb 10, 2022
2fd53a8
fix: calculated apr while fetching summaries and fixed sorting by yield
gsantini-ube Feb 14, 2022
1ed68e7
Merge branch 'gsantini/leverage-yield-farming' of github.com:Ubeswap/…
gsantini-ube Feb 14, 2022
78197f6
fix: UI issues on Leverage Yield Farming
gsantini-ube Feb 17, 2022
8f05def
fix: depositing issue for leverage yield farming
gsantini-ube Feb 17, 2022
92d3abe
feat: deposit functionality for leverage yield farming
gsantini-ube Feb 25, 2022
af8f11a
fix: formatting issue for withdrawing on leverage yield farming
gsantini-ube Feb 25, 2022
c0a91d3
fix: loading issue for normal farms
gsantini-ube Feb 27, 2022
5af0985
fix: fixed issues for withdrawing LP of leverage yield farming
gsantini-ube Mar 2, 2022
b9fb814
fix: lint issues
gsantini-ube Mar 7, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@
"@ethersproject/providers": "^5.3.1",
"@ethersproject/strings": "^5.3.0",
"@ethersproject/units": "^5.5.0",
"@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
"@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
"@fortawesome/react-fontawesome": "^0.1.17",
"@nomspace/nomspace": "^1.0.6",
"@ramp-network/ramp-instant-sdk": "^2.5.0",
"@sentry/react": "^6.9.0",
"@sentry/tracing": "^6.16.1",
Expand Down
6 changes: 5 additions & 1 deletion public/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -229,5 +229,9 @@
"farmUBE": "Farm UBE",
"youHaveUnclaimedRewards": "You have {{count}} farms with unclaimed rewards",
"claimAllRewards": "Claim all rewards",
"featuredPools": "Featured Pools"
"featuredPools": "Featured Pools",
"cancel": "Cancel",
"continue": "Continue",
"confirm": "Confirm",
"LeverageYieldFarm": "Leverage Yield Farm"
}
10 changes: 7 additions & 3 deletions src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -289,11 +289,15 @@ export function ButtonConfirmed({
}
}

export function ButtonError({ error, ...rest }: { error?: boolean } & ButtonProps) {
export function ButtonError({
error,
borderRadius,
...rest
}: { error?: boolean; borderRadius?: string } & ButtonProps) {
if (error) {
return <ButtonErrorStyle {...rest} />
return <ButtonErrorStyle {...rest} borderRadius={borderRadius ?? '20px'} />
} else {
return <ButtonPrimary {...rest} />
return <ButtonPrimary {...rest} borderRadius={borderRadius ?? '20px'} />
}
}

Expand Down
7 changes: 6 additions & 1 deletion src/components/CurrencyInputPanel/TokenSelect.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { faFilter } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Token } from '@ubeswap/sdk'
import CurrencyLogo from 'components/CurrencyLogo'
import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal'
Expand Down Expand Up @@ -70,7 +72,10 @@ export default function TokenSelect(props: Props) {
<StyledTokenName> {props.token.symbol} </StyledTokenName>
</>
) : (
<StyledTokenName>Filter By Token</StyledTokenName>
<>
<FontAwesomeIcon icon={faFilter} width={'16px'} />
<StyledTokenName>Token</StyledTokenName>
</>
)}
</Aligner>
</CurrencySelect>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Row/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,5 +49,8 @@ export const RowStart = styled(AutoRow)`
export const RowCenter = styled(AutoRow)`
align-items: center;
`

export const RowEnd = styled(AutoRow)`
justify-content: end;
align-items: end;
`
export default Row
91 changes: 76 additions & 15 deletions src/components/Slider/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React, { useCallback } from 'react'
import styled from 'styled-components'
import { Token, TokenAmount } from '@ubeswap/sdk'
import React, { useCallback, useContext } from 'react'
import { Text } from 'rebass'
import styled, { ThemeContext } from 'styled-components'

import CurrencyLogo from '../CurrencyLogo'
import { AutoRow } from '../Row'

const StyledRangeInput = styled.input<{ size: number }>`
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
Expand Down Expand Up @@ -87,34 +92,90 @@ const StyledRangeInput = styled.input<{ size: number }>`
}
`

const Aligner = styled.span`
display: flex;
`

interface InputSliderProps {
value: number
onChange: (value: number) => void
step?: number
min?: number
max?: number
size?: number
isWithdrawSlider?: boolean
isCurrencyAmount?: boolean
currency?: Token | null
balance?: TokenAmount | null
}

export default function Slider({ value, onChange, min = 0, step = 1, max = 100, size = 28 }: InputSliderProps) {
export default function Slider({
value,
onChange,
min = 0,
step = 1,
max = 100,
size = 28,
isWithdrawSlider = false,
isCurrencyAmount = false,
currency = null,
balance = null,
}: InputSliderProps) {
const theme = useContext(ThemeContext)

const changeCallback = useCallback(
(e) => {
onChange(parseInt(e.target.value))
},
[onChange]
)

return (
<StyledRangeInput
size={size}
type="range"
value={value}
style={{ width: '90%', marginLeft: 15, marginRight: 15, padding: '15px 0' }}
onChange={changeCallback}
aria-labelledby="input slider"
step={step}
min={min}
max={max}
/>
<>
{isCurrencyAmount && currency ? (
<AutoRow justify="space-between">
<Aligner>
<CurrencyLogo currency={currency} size={'24px'} />
<Text fontWeight={500} fontSize={16} color={theme.text1} pt={0} pl={2}>
{currency && currency.symbol && currency.symbol.length > 20
? currency.symbol.slice(0, 4) +
'...' +
currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)
: currency?.symbol}
</Text>
</Aligner>
<Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
{parseFloat(value.toFixed(6))}
</Text>
</AutoRow>
) : null}

{isWithdrawSlider ? (
<AutoRow justify="space-between">
<Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
0
</Text>
<Text fontWeight={500} fontSize={14} color={theme.text2} pt={1}>
{value}%
</Text>
</AutoRow>
) : null}

<StyledRangeInput
size={isCurrencyAmount ? 18 : size}
type="range"
value={isCurrencyAmount ? parseInt(((value / Number(balance)) * 100).toFixed(0)) : value}
style={{
width: isCurrencyAmount || isWithdrawSlider ? ' 100%' : '90%',
marginLeft: isCurrencyAmount || isWithdrawSlider ? 0 : 15,
marginRight: isCurrencyAmount || isWithdrawSlider ? 0 : 15,
padding: '15px 0',
}}
onChange={changeCallback}
aria-labelledby="input slider"
step={step}
min={min}
max={max}
/>
</>
)
}
168 changes: 168 additions & 0 deletions src/components/earn/LeverageModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import { LoadingView, SubmittedView } from 'components/ModalViews'
import { useDoTransaction } from 'components/swap/routing'
import React, { useState } from 'react'
import { X } from 'react-feather'
import { useTranslation } from 'react-i18next'
import { Text } from 'rebass'
import styled from 'styled-components'
import { CloseIcon, TYPE } from 'theme'

import { useStakingContract } from '../../hooks/useContract'
import { StakingInfo } from '../../state/stake/hooks'
import { ButtonPrimary, ButtonSecondary } from '../Button'
import { AutoColumn } from '../Column'
import Modal from '../Modal'
import { RowBetween } from '../Row'
import { Break } from './styled'

const ModalContentWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
background-color: ${({ theme }) => theme.bg2};
border-radius: 20px;
`

const ContentWrapper = styled(AutoColumn)`
width: 100%;
padding: 1rem;
`

const StyledCloseIcon = styled(X)`
height: 20px;
width: 20px;
:hover {
cursor: pointer;
}

> * {
stroke: ${({ theme }) => theme.text1};
}
`

interface LeverageModalProps {
isOpen: boolean
turnOnLeverage: () => void
onClose: () => void
stakingInfo: StakingInfo
leverageError: string | null
}

export default function LeverageModal({
isOpen,
turnOnLeverage,
onClose,
stakingInfo,
leverageError,
}: LeverageModalProps) {
const { t } = useTranslation()
const doTransaction = useDoTransaction()
const [attempting, setAttempting] = useState(false)
const [hash, setHash] = useState<string | undefined>()
const stakingContract = useStakingContract(stakingInfo.stakingRewardAddress)

const onDismiss = () => {
setHash(undefined)
setAttempting(false)
onClose()
}
async function onWithdraw() {
if (stakingContract && stakingInfo?.stakedAmount) {
const amount = Number(stakingInfo?.stakedAmount.toExact())
if (amount === 0) {
turnOnLeverage()
onDismiss()
} else {
setAttempting(true)
await doTransaction(stakingContract, 'exit', {
args: [],
summary: `${t('WithdrawDepositedLiquidity')}`,
})
.then((response) => {
setHash(response.hash)
turnOnLeverage()
})
.catch(() => {
onClose()
setAttempting(false)
})
}
}
}

return (
<Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={100}>
{leverageError ? (
<ContentWrapper>
<RowBetween>
<span></span>
<CloseIcon onClick={onDismiss} />
</RowBetween>
<AutoColumn gap="lg">
<AutoColumn gap="lg" style={{ padding: '0 2rem', marginTop: '2rem' }}>
<Text fontWeight={400} fontSize={18} mb={'1rem'}>
{leverageError === 'none' ? 'Pinnata oracle is down, please try again later' : leverageError}
</Text>
<RowBetween>
<ButtonSecondary mr="0.5rem" padding="18px" onClick={onDismiss}>{`${t('Close')}`}</ButtonSecondary>
</RowBetween>
</AutoColumn>
</AutoColumn>
</ContentWrapper>
) : (
<>
{!attempting && !hash && (
<ModalContentWrapper>
<AutoColumn gap="lg">
<RowBetween style={{ padding: '0 2rem' }}>
<div />
<Text fontWeight={500} fontSize={20}>
Are you sure?
</Text>
<StyledCloseIcon onClick={() => onClose()} />
</RowBetween>
<Break />
<AutoColumn gap="lg" style={{ padding: '0 2rem' }}>
<Text fontWeight={400} fontSize={16} mb={'1rem'}>
Enabling leverage can put your assets at risk of liquidation and is only meant for advanced users.
<br />
Clicking continue will also require you to exit your current farm position.
</Text>
<RowBetween>
<ButtonSecondary mr="0.5rem" padding="18px" onClick={onDismiss}>{`${t('cancel')}`}</ButtonSecondary>
<ButtonPrimary borderRadius="12px" onClick={onWithdraw}>{`${t('continue')}`}</ButtonPrimary>
</RowBetween>
</AutoColumn>
</AutoColumn>
</ModalContentWrapper>
)}
{attempting && !hash && (
<LoadingView onDismiss={onDismiss}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.body fontSize={20}>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UBE-LP</TYPE.body>
<TYPE.body fontSize={20}>
Claiming{' '}
{stakingInfo?.earnedAmounts
?.map((earnedAmount) => `${earnedAmount.toSignificant(4)} ${earnedAmount.token.symbol}`)
.join(' + ')}
</TYPE.body>
</AutoColumn>
</LoadingView>
)}
{hash && (
<SubmittedView onDismiss={onDismiss} hash={hash}>
<AutoColumn gap="12px" justify={'center'}>
<TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
<TYPE.body fontSize={20}>Withdrew UBE-LP!</TYPE.body>
<TYPE.body fontSize={20}>
Claimed {stakingInfo?.rewardTokens.map((rewardToken) => rewardToken.symbol).join(' + ')}!
</TYPE.body>
</AutoColumn>
</SubmittedView>
)}
</>
)}
</Modal>
)
}
Loading