diff --git a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx index 2fa9b3a2..b52698df 100644 --- a/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx +++ b/src/elements/earn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx @@ -1,5 +1,4 @@ import { - fetchProtectedPositions, ProtectedPosition, ProtectedPositionGrouped, } from 'services/web3/protection/positions'; @@ -10,22 +9,11 @@ import { Button } from 'components/button/Button'; import { WithdrawLiquidityWidget } from '../../withdrawLiquidity/WithdrawLiquidityWidget'; import { UpgradeBntModal } from '../../v3/UpgradeBntModal'; import { bntToken } from 'services/web3/config'; -import { - getAllBntPositionsAndAmount, - setProtectedPositions, -} from 'store/liquidity/liquidity'; +import { getAllBntPositionsAndAmount } from 'store/liquidity/liquidity'; import { useAppSelector } from 'store'; import { getIsV3Exist } from 'store/bancor/pool'; import { PopoverV3 } from 'components/popover/PopoverV3'; import { UpgradeTknModal } from '../../v3/UpgradeTknModal'; -import { - migrateNotification, - rejectNotification, - migrateFailedNotification, -} from 'services/notifications/notifications'; -import { migrateV2Positions } from 'services/web3/protection/migration'; -import { useDispatch } from 'react-redux'; -import { Pool } from 'services/observables/pools'; export const ProtectedPositionTableCellActions = ( cellData: PropsWithChildren< @@ -35,27 +23,19 @@ export const ProtectedPositionTableCellActions = ( const [isOpenWithdraw, setIsOpenWithdraw] = useState(false); const [isOpenBnt, setIsOpenBnt] = useState(false); const [isOpenTkn, setIsOpenTkn] = useState(false); - const dispatch = useDispatch(); const { row } = cellData; const position = row.original; const [SelectedPositions, setSelectedPositions] = useState< ProtectedPosition[] >([]); - const isPoolExistV3 = useAppSelector((state) => + const isPoolExistV3 = useAppSelector((state) => getIsV3Exist(state, position.reserveToken.address) ); - const totalBNT = useAppSelector<{ - usdAmount: number; - tknAmount: number; - bntPositions: ProtectedPosition[]; - }>(getAllBntPositionsAndAmount); - const protocolBnBNTAmount = useAppSelector( + const totalBNT = useAppSelector(getAllBntPositionsAndAmount); + const protocolBnBNTAmount = useAppSelector( (state) => state.liquidity.protocolBnBNTAmount ); - const pools = useAppSelector((state) => state.pool.v2Pools); - const account = useAppSelector((state) => state.user.account); - const isMigrateDisabled = useCallback( (positions: ProtectedPosition[]) => { if (!positions || positions.length === 0) return true; @@ -76,35 +56,13 @@ export const ProtectedPositionTableCellActions = ( (positions: ProtectedPosition[]) => { const isBnt = positions[0].reserveToken.address === bntToken; if (isBnt && protocolBnBNTAmount > totalBNT.tknAmount) { - const poolID = - totalBNT.bntPositions.length > 0 - ? totalBNT.bntPositions[0].pool.pool_dlt_id - : ''; - if (totalBNT.bntPositions.every((x) => x.pool.pool_dlt_id === poolID)) - migrateV2Positions( - totalBNT.bntPositions, - (txHash: string) => migrateNotification(dispatch, txHash), - async () => { - const positions = await fetchProtectedPositions(pools, account!); - dispatch(setProtectedPositions(positions)); - }, - () => rejectNotification(dispatch), - () => migrateFailedNotification(dispatch) - ); - else setIsOpenBnt(true); + setIsOpenBnt(true); } else { setSelectedPositions(positions); setIsOpenTkn(true); } }, - [ - totalBNT.tknAmount, - totalBNT.bntPositions, - protocolBnBNTAmount, - account, - dispatch, - pools, - ] + [totalBNT.tknAmount, protocolBnBNTAmount] ); const singleContent = useMemo(() => { @@ -112,10 +70,10 @@ export const ProtectedPositionTableCellActions = ( const button = ( ); return isPoolExistV3 ? ( @@ -129,7 +87,7 @@ export const ProtectedPositionTableCellActions = ( ) : ( <> ); - }, [position, migrate, isPoolExistV3, isMigrateDisabled]); + }, [isMigrateDisabled, position, migrate, isPoolExistV3]); const groupContent = useMemo(() => { const disabled = isMigrateDisabled(position.subRows); @@ -153,7 +111,7 @@ export const ProtectedPositionTableCellActions = ( ) : ( <> ); - }, [position, migrate, isPoolExistV3, isMigrateDisabled]); + }, [isMigrateDisabled, position, isPoolExistV3, migrate]); return (
{TableCellExpander({ diff --git a/src/elements/earn/portfolio/v3/UpgradeBntModal.tsx b/src/elements/earn/portfolio/v3/UpgradeBntModal.tsx index 89c8c551..7c644cf7 100644 --- a/src/elements/earn/portfolio/v3/UpgradeBntModal.tsx +++ b/src/elements/earn/portfolio/v3/UpgradeBntModal.tsx @@ -4,10 +4,8 @@ import { ProtectedPosition, ProtectedPositionGrouped, } from 'services/web3/protection/positions'; -import { Button, ButtonSize } from 'components/button/Button'; -import { ReactComponent as IconCheck } from 'assets/icons/circlecheck.svg'; +import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { useAppSelector } from 'store'; -import { useMemo } from 'react'; import { getAllBntPositionsAndAmount, setProtectedPositions, @@ -20,10 +18,12 @@ import { import { migrateV2Positions } from 'services/web3/protection/migration'; import { useDispatch } from 'react-redux'; import { Pool } from 'services/observables/pools'; -import { Image } from 'components/image/Image'; -import { PopoverV3 } from 'components/popover/PopoverV3'; -import { EmergencyInfo } from 'components/EmergencyInfo'; import { useNavigation } from 'hooks/useNavigation'; +import { Image } from 'components/image/Image'; +import { getV3byID } from 'store/bancor/pool'; +import { bntToken } from 'services/web3/config'; +import { useState } from 'react'; +import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; export const UpgradeBntModal = ({ position, @@ -36,7 +36,9 @@ export const UpgradeBntModal = ({ }) => { const dispatch = useDispatch(); const { goToPage } = useNavigation(); + const [txBusy, setTxBusy] = useState(false); + const poolV3 = useAppSelector((state) => getV3byID(state, bntToken)); const pools = useAppSelector((state) => state.pool.v2Pools); const account = useAppSelector((state) => state.user.account); @@ -46,21 +48,8 @@ export const UpgradeBntModal = ({ bntPositions: ProtectedPosition[]; }>(getAllBntPositionsAndAmount); - const { withdrawalFee, lockDuration } = useAppSelector( - (state) => state.v3Portfolio.withdrawalSettings - ); - - const lockDurationInDays = useMemo( - () => lockDuration / 60 / 60 / 24, - [lockDuration] - ); - - const withdrawalFeeInPercent = useMemo( - () => (withdrawalFee * 100).toFixed(2), - [withdrawalFee] - ); - const migrate = (positions: ProtectedPosition[]) => { + setTxBusy(true); migrateV2Positions( positions, (txHash: string) => migrateNotification(dispatch, txHash), @@ -68,71 +57,59 @@ export const UpgradeBntModal = ({ const positions = await fetchProtectedPositions(pools, account!); if (positions.length === 0) goToPage.portfolio(); dispatch(setProtectedPositions(positions)); + await updatePortfolioData(dispatch); }, () => rejectNotification(dispatch), () => migrateFailedNotification(dispatch) ); + setTxBusy(false); setIsOpen(false); }; return ( - }> -
- Token -
Upgrade BNT
-
- Move all BNT to a single pool and earn from all trades in the network -
-
-
You are migrating from Bancor V2.1 to Bancor V3.
-
Please note that BNT distribution is temporarily paused.
- } - hover - buttonElement={() => ( - More info - )} + +
+

+ Move all your BNT to a single pool that earns fees from all trades in + the network +

+ +
+ {'Token + All {poolV3?.name}
-
-
-
Upgrade all BNT
-
-
- - Single BNT pool -
-
- - Auto-compounding -
-
- - Fully upgrade partially protected holdings -
-
+ - -
- {`${lockDurationInDays} day cooldown • ${withdrawalFeeInPercent}% withdrawal fee`} + +
+
diff --git a/src/elements/earn/portfolio/v3/UpgradeTknModal.tsx b/src/elements/earn/portfolio/v3/UpgradeTknModal.tsx index a77a9bd0..55ee0f8d 100644 --- a/src/elements/earn/portfolio/v3/UpgradeTknModal.tsx +++ b/src/elements/earn/portfolio/v3/UpgradeTknModal.tsx @@ -3,10 +3,8 @@ import { fetchProtectedPositions, ProtectedPosition, } from 'services/web3/protection/positions'; -import { Button, ButtonSize } from 'components/button/Button'; -import { ReactComponent as IconCheck } from 'assets/icons/circlecheck.svg'; +import { Button, ButtonSize, ButtonVariant } from 'components/button/Button'; import { useAppSelector } from 'store'; -import { useMemo } from 'react'; import { setProtectedPositions } from 'store/liquidity/liquidity'; import { migrateNotification, @@ -15,11 +13,14 @@ import { } from 'services/notifications/notifications'; import { migrateV2Positions } from 'services/web3/protection/migration'; import { useDispatch } from 'react-redux'; -import { Pool } from 'services/observables/pools'; import { Image } from 'components/image/Image'; -import { PopoverV3 } from 'components/popover/PopoverV3'; -import { EmergencyInfo } from 'components/EmergencyInfo'; import { useNavigation } from 'hooks/useNavigation'; +import { prettifyNumber, toBigNumber } from 'utils/helperFunctions'; +import { Switch, SwitchVariant } from 'components/switch/Switch'; +import { DepositFAQ } from 'elements/earn/pools/poolsTable/v3/DepositFAQ'; +import { getV3byID } from 'store/bancor/pool'; +import { useState } from 'react'; +import { updatePortfolioData } from 'services/web3/v3/portfolio/helpers'; export const UpgradeTknModal = ({ positions, @@ -32,26 +33,23 @@ export const UpgradeTknModal = ({ }) => { const dispatch = useDispatch(); const { goToPage } = useNavigation(); - const pools = useAppSelector((state) => state.pool.v2Pools); + + const [txBusy, setTxBusy] = useState(false); + const [tosAgreed, setTosAgreed] = useState(false); + + const pools = useAppSelector((state) => state.pool.v2Pools); const account = useAppSelector((state) => state.user.account); const position = positions.length !== 0 ? positions[0] : undefined; const token = position?.reserveToken; - - const { withdrawalFee, lockDuration } = useAppSelector( - (state) => state.v3Portfolio.withdrawalSettings - ); - - const lockDurationInDays = useMemo( - () => lockDuration / 60 / 60 / 24, - [lockDuration] + const poolV3 = useAppSelector((state) => + getV3byID(state, position?.reserveToken.address ?? '') ); - const withdrawalFeeInPercent = useMemo( - () => (withdrawalFee * 100).toFixed(2), - [withdrawalFee] - ); + const extVaultBalanceUsd = poolV3?.extVaultBalance.tkn ?? '0'; + const hasExtVaultBalance = !toBigNumber(extVaultBalanceUsd).isZero(); const migrate = () => { + setTxBusy(true); migrateV2Positions( positions, (txHash: string) => migrateNotification(dispatch, txHash), @@ -59,62 +57,95 @@ export const UpgradeTknModal = ({ const positions = await fetchProtectedPositions(pools, account!); if (positions.length === 0) goToPage.portfolio(); dispatch(setProtectedPositions(positions)); + await updatePortfolioData(dispatch); }, () => rejectNotification(dispatch), () => migrateFailedNotification(dispatch) ); + setTxBusy(false); setIsOpen(false); }; if (!position || !token) return null; return ( - }> -
- Token -
Upgrade {token.symbol}
-
- Move all {token.symbol} to Bancor V3 -
-
-
You are migrating from Bancor V2.1 to Bancor V3.
-
Please note that BNT distribution is temporarily paused.
- } - hover - buttonElement={() => ( - More info - )} - /> -
-
-
-
Upgrade all {token.symbol}
+ + <> +
+
+ {'Token + All {poolV3?.name}
-
- - Single Side -
-
- - Auto-compounding -
-
- - Fully upgrade partially protected holdings + + {hasExtVaultBalance ? ( + <> +
+
External Liquidity Protection:
+
{prettifyNumber(extVaultBalanceUsd, true)}
+
+ +
+ +
+

+ BNT distribution was disabled. Should this pool be in deficit + when you’re ready to withdraw from v3, you will be compensated + from the external liquidity protection vault. +

+

+ If the protection vault is empty, your deposit will accrue the + pool deficit during withdrawal from v3. +

+
+ + ) : ( +

+ After migrating to v3, if you withdraw from the v3 pool while it + is in deficit, you'll accrue the deficit in the pool. The value + changes over time. +

+ )} +
+ +
+ +
- -
- {`${lockDurationInDays} day cooldown • ${withdrawalFeeInPercent}% withdrawal fee`} -
-
+ +
); };