feat: leverage yield farming

package.json

@@ -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",

public/locales/en.json

@@ -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"
 }

src/components/Button/index.tsx

@@ -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'} />
   }
 }
 

src/components/CurrencyInputPanel/TokenSelect.tsx

@@ -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'
@@ -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>

src/components/Row/index.tsx

@@ -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

src/components/Slider/index.tsx

@@ -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 */
@@ -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}
+      />
+    </>
   )
 }

src/components/earn/LeverageModal.tsx

@@ -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>
+  )
+}