feat: support emergency withdraw (#1263)

src/components/FarmIssueAnnouncement.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import { Flex, Text } from 'rebass'
+import styled from 'styled-components'
+
+import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
+import useTheme from 'hooks/useTheme'
+import { ButtonText, ExternalLink } from 'theme'
+
+const Wrapper = styled.div`
+  border-radius: 20px;
+  padding: 16px;
+  font-size: 14px;
+  border: 1px solid ${({ theme }) => theme.warning};
+  margin-bottom: 16px;
+  color: ${({ theme }) => theme.subText};
+
+  li {
+    line-height: 20px;
+  }
+`
+
+function FarmIssueAnnouncement() {
+  const theme = useTheme()
+  const [show, setShow] = useState(true)
+  return (
+    <Wrapper>
+      <Flex justifyContent="space-between">
+        <Flex alignItems="center">
+          <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M4.83333 16.6667H8.16667C8.16667 17.5833 7.41667 18.3333 6.5 18.3333C5.58333 18.3333 4.83333 17.5833 4.83333 16.6667ZM3.16667 15C3.16667 15.4583 3.54167 15.8333 4 15.8333H9C9.45833 15.8333 9.83333 15.4583 9.83333 15C9.83333 14.5417 9.45833 14.1667 9 14.1667H4C3.54167 14.1667 3.16667 14.5417 3.16667 15ZM12.75 7.91667C12.75 11.1 10.5333 12.8 9.60833 13.3333H3.39167C2.46667 12.8 0.25 11.1 0.25 7.91667C0.25 4.46667 3.05 1.66667 6.5 1.66667C9.95 1.66667 12.75 4.46667 12.75 7.91667ZM16.8083 6.14167L15.6667 6.66667L16.8083 7.19167L17.3333 8.33333L17.8583 7.19167L19 6.66667L17.8583 6.14167L17.3333 5L16.8083 6.14167ZM14.8333 5L15.6167 3.28333L17.3333 2.5L15.6167 1.71667L14.8333 0L14.05 1.71667L12.3333 2.5L14.05 3.28333L14.8333 5Z"
+              fill="#FF9901"
+            />
+          </svg>
+          <Text fontWeight="500" color={theme.warning} marginLeft="8px">
+            Important Announcement
+          </Text>
+        </Flex>
+
+        <ButtonText onClick={() => setShow(prev => !prev)} style={{ color: theme.subText }}>
+          <DropdownSVG style={{ transform: `rotate(${!show ? 0 : '180deg'})` }} />
+        </ButtonText>
+      </Flex>
+
+      {show && (
+        <>
+          <Flex flexDirection="column" sx={{ gap: '10px' }} fontSize="14px" marginTop="12px">
+            <li>
+              We recently discovered an issue in our Elastic farming contract where you might not be able to harvest
+              your rewards or withdraw your liquidity positions like you{' '}
+              <Text as="span" fontWeight="500" color={theme.text}>
+                normally
+              </Text>{' '}
+              would
+            </li>
+            <li>
+              Dont worry, your funds are{' '}
+              <Text as="span" fontWeight="500" color={theme.text}>
+                100% safe
+              </Text>
+              . And you are still earning farming rewards{' '}
+            </li>
+            <li>
+              If you still wish to withdraw your liquidity positions, you can use the{' '}
+              <Text fontWeight="500" color={theme.red} as="span">
+                Force Withdraw
+              </Text>{' '}
+              button as an emergency option. (Note: If you do this, your farming rewards will{' '}
+              <Text as="span" fontWeight="500" color={theme.text}>
+                not
+              </Text>{' '}
+              be automatically harvested but we can{' '}
+              <Text as="span" fontWeight="500" color={theme.text}>
+                manually transfer
+              </Text>{' '}
+              your farming rewards to you)
+            </li>
+            <li>
+              You can get in touch with us by joining our{' '}
+              <ExternalLink href="https://discord.gg/H8AQVhwBz9">Discord channel ↗</ExternalLink> and we will assist you
+              with your questions or transfer of rewards.
+            </li>
+            <li>
+              We will soon deploy a{' '}
+              <Text as="span" fontWeight="500" color={theme.text}>
+                new
+              </Text>{' '}
+              Elastic farming contract, and you will be able to migrate your liquidity positions into this contract to
+              continue earning rewards
+            </li>
+          </Flex>
+
+          <Text fontStyle="italic" marginTop="16px">
+            We really apologize for the trouble.
+          </Text>
+        </>
+      )}
+    </Wrapper>
+  )
+}
+
+export default FarmIssueAnnouncement

src/components/Header/TopBanner.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import { rgba } from 'polished'
+import { useEffect, useState } from 'react'
 import { X } from 'react-feather'
 import { useLocalStorage, useMedia } from 'react-use'
 import { Text } from 'rebass'
@@ -10,7 +11,7 @@ import { ExternalLink } from 'theme'
 const BannerWrapper = styled.div`
   width: 100%;
   padding: 10px 20px;
-  background: #1d7a5f;
+  background: ${({ theme }) => rgba(theme.warning, 0.7)};
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -28,25 +29,23 @@ const Content = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  padding: 8px 16px;
-  background: ${({ theme }) => `${theme.buttonBlack}1a`};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    background: transparent;
-    padding: 2px 0;
     font-size: 14px;
+    flex: 1;
   `}
 `
 
 const banner = {
-  localStorageKey: 'benqi-lm',
+  localStorageKey: 'farm-issue',
   start: 'Thu, 17 Mar 2022 00:00:00 GMT',
-  end: 'Thu, 20 Mar 2022 00:00:00 GMT',
+  end: 'Thu, 20 Mar 2024 00:00:00 GMT',
   text: (
-    <Text marginLeft="4px" marginRight="1rem" lineHeight="20px" color="#fff">
-      Liquidity Mining with Benqi is <b>LIVE!</b> Find out more{' '}
+    <Text marginLeft="4px" marginRight="1rem" lineHeight="20px" color="#fff" fontSize="14px" flex={1}>
+      Important Announcement: If you’re currently participating in our Elastic Farms on Polygon & Avalanche, please read
+      this
       <ExternalLink href="https://kyberswap.com/?utm_source=kyberswap&utm_medium=banner&utm_campaign=benqi&utm_content=launch#/farms?networkId=43114">
-        here
+        announcement!
       </ExternalLink>
     </Text>
   ),
@@ -70,11 +69,11 @@ function TopBanner() {
       <BannerWrapper>
         {!below768 && <div />}
         <Content>
-          {!below768 && <Announcement />}
+          <Announcement />
           {banner.text}
         </Content>
 
-        <StyledClose size={28} onClick={() => setShowBanner(false)} />
+        <StyledClose size={24} onClick={() => setShowBanner(false)} />
       </BannerWrapper>
     )
 

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
 import { darken } from 'polished'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Repeat } from 'react-feather'
 import { Link, NavLink, useLocation } from 'react-router-dom'
 import { Flex } from 'rebass'

src/components/Icons/Withdraw.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 const Withdraw = ({ width, height }: { width?: number; height?: number }) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width={width || 16} height={height || 16} viewBox="0 0 16 16">

src/components/Popups/TransactionPopup.tsx

@@ -123,6 +123,12 @@ export const SUMMARY: {
     pending: summary => 'Withdrawing ' + summary,
     failure: summary => 'Error withdrawing ' + summary,
   },
+
+  ForceWithdraw: {
+    success: () => 'Force Withdrawn ',
+    pending: () => 'Force Withdrawing ',
+    failure: () => 'Error Force withdrawing ',
+  },
 }
 
 export default function TransactionPopup({

src/components/YieldPools/ProMMFarmGroup.tsx

@@ -34,7 +34,7 @@ import useTheme from 'hooks/useTheme'
 import { Dots } from 'pages/Pool/styleds'
 import { useWalletModalToggle } from 'state/application/hooks'
 import { useRewardTokenPrices } from 'state/farms/hooks'
-import { useFarmAction, useProMMFarmTVL } from 'state/farms/promm/hooks'
+import { useFailedNFTs, useFarmAction, useProMMFarmTVL } from 'state/farms/promm/hooks'
 import { ProMMFarm } from 'state/farms/promm/types'
 import { useSingleCallResult } from 'state/multicall/hooks'
 import { useIsTransactionPending } from 'state/transactions/hooks'
@@ -628,7 +628,10 @@ function ProMMFarmGroup({
   farms,
 }: {
   address: string
-  onOpenModal: (modalType: 'harvest' | 'deposit' | 'withdraw' | 'stake' | 'unstake', pid?: number) => void
+  onOpenModal: (
+    modalType: 'forcedWithdraw' | 'harvest' | 'deposit' | 'withdraw' | 'stake' | 'unstake',
+    pid?: number,
+  ) => void
   farms: ProMMFarm[]
 }) {
   const theme = useTheme()
@@ -716,6 +719,10 @@ function ProMMFarmGroup({
     return result
   }, {})
 
+  const failedNFTs = useFailedNFTs()
+  const userNFTs = farms.map(farm => farm.userDepositedNFTs.map(item => item.tokenId.toString())).flat()
+  const hasAffectedByFarmIssue = userNFTs.some(id => failedNFTs.includes(id))
+
   const toggleWalletModal = useWalletModalToggle()
   const posManager = useProAmmNFTPositionManagerContract()
 
@@ -768,6 +775,19 @@ function ProMMFarmGroup({
   return (
     <FarmContent>
       <FarmRow>
+        {hasAffectedByFarmIssue && !above768 && (
+          <BtnPrimary
+            style={{ color: theme.red, border: `1px solid ${theme.red}`, background: theme.red + '33' }}
+            padding={'12px'}
+            onClick={() => onOpenModal('forcedWithdraw')}
+          >
+            <Withdraw width={20} height={20} />
+            <Text fontSize="14px" marginLeft="4px">
+              <Trans>Force Withdraw</Trans>
+            </Text>
+          </BtnPrimary>
+        )}
+
         <Flex
           sx={{ gap: '20px' }}
           alignItems="center"
@@ -844,7 +864,7 @@ function ProMMFarmGroup({
                   <MouseoverTooltipDesktopOnly
                     text={t`Withdraw your liquidity (the NFT tokens that represent your liquidity position)`}
                   >
-                    <ButtonOutlined padding="8px 12px" onClick={() => onOpenModal('withdraw')}>
+                    <ButtonOutlined padding={above768 ? '8px 12px' : '8px'} onClick={() => onOpenModal('withdraw')}>
                       <Withdraw width={20} height={20} />
                       {above768 && (
                         <Text fontSize="14px" marginLeft="4px">
@@ -854,7 +874,7 @@ function ProMMFarmGroup({
                     </ButtonOutlined>
                   </MouseoverTooltipDesktopOnly>
                 ) : (
-                  <BtnPrimary disabled width="fit-content" padding="8px 12px">
+                  <BtnPrimary disabled width="fit-content" padding={above768 ? '8px 12px' : '8px'}>
                     <Withdraw width={20} height={20} />
                     {above768 && (
                       <Text fontSize="14px" marginLeft="4px">
@@ -863,6 +883,20 @@ function ProMMFarmGroup({
                     )}
                   </BtnPrimary>
                 )}
+
+                {hasAffectedByFarmIssue && above768 && (
+                  <BtnPrimary
+                    style={{ color: theme.red, border: `1px solid ${theme.red}`, background: theme.red + '33' }}
+                    width="fit-content"
+                    padding={above768 ? '8px 12px' : '8px'}
+                    onClick={() => onOpenModal('forcedWithdraw')}
+                  >
+                    <Withdraw width={20} height={20} />
+                    <Text fontSize="14px" marginLeft="4px">
+                      <Trans>Force Withdraw</Trans>
+                    </Text>
+                  </BtnPrimary>
+                )}
               </Flex>
             )
           ) : (