Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes: #660 - Migrate to V3 Modal #686

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Fixes: #660 - Migrate to V3 Modal #686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b2c5fbc
feature(migrateV3Modal): add modal component
pingustar Sep 26, 2022
0e78acd
feature(migrateV3Modal): use existing migrate modals
pingustar Sep 26, 2022
8c33fb0
feature(migrateV3Modal): fix styling
pingustar Sep 26, 2022
ad23d92
feature(migrateV3Modal): fix grouped position migration
pingustar Sep 26, 2022
be86275
Merge branch 'main' into feature/migrateV3Modal
pingustar Sep 28, 2022
c4094d2
Merge branch 'main' into feature/migrateV3Modal
pingustar Oct 18, 2022
88ae3a1
Merge branch 'main' into feature/migrateV3Modal
pingustar Oct 19, 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
62 changes: 10 additions & 52 deletions ...rn/portfolio/liquidityProtection/protectedPositions/ProtectedPositionTableCellActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
fetchProtectedPositions,
ProtectedPosition,
ProtectedPositionGrouped,
} from 'services/web3/protection/positions';
Expand All @@ -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<
Expand All @@ -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<boolean>((state) =>
const isPoolExistV3 = useAppSelector((state) =>
getIsV3Exist(state, position.reserveToken.address)
);
const totalBNT = useAppSelector<{
usdAmount: number;
tknAmount: number;
bntPositions: ProtectedPosition[];
}>(getAllBntPositionsAndAmount);
const protocolBnBNTAmount = useAppSelector<number>(
const totalBNT = useAppSelector(getAllBntPositionsAndAmount);
const protocolBnBNTAmount = useAppSelector(
(state) => state.liquidity.protocolBnBNTAmount
);

const pools = useAppSelector<Pool[]>((state) => state.pool.v2Pools);
const account = useAppSelector((state) => state.user.account);

const isMigrateDisabled = useCallback(
(positions: ProtectedPosition[]) => {
if (!positions || positions.length === 0) return true;
Expand All @@ -76,46 +56,24 @@ 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(() => {
const disabled = isMigrateDisabled([position]);
const button = (
<Button
onClick={() => migrate([position])}
className="text-12 w-[165px] h-[32px] mr-10"
className="text-12 w-[145px] h-[32px] mr-10"
disabled={disabled}
>
Upgrade To V3
Upgrade All To V3
</Button>
);
return isPoolExistV3 ? (
Expand All @@ -129,7 +87,7 @@ export const ProtectedPositionTableCellActions = (
) : (
<></>
);
}, [position, migrate, isPoolExistV3, isMigrateDisabled]);
}, [isMigrateDisabled, position, migrate, isPoolExistV3]);

const groupContent = useMemo(() => {
const disabled = isMigrateDisabled(position.subRows);
Expand All @@ -153,7 +111,7 @@ export const ProtectedPositionTableCellActions = (
) : (
<></>
);
}, [position, migrate, isPoolExistV3, isMigrateDisabled]);
}, [isMigrateDisabled, position, isPoolExistV3, migrate]);
return (
<div>
{TableCellExpander({
Expand Down
117 changes: 47 additions & 70 deletions src/elements/earn/portfolio/v3/UpgradeBntModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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<Pool[]>((state) => state.pool.v2Pools);
const account = useAppSelector((state) => state.user.account);

Expand All @@ -46,93 +48,68 @@ 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),
async () => {
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 (
<Modal large isOpen={isOpen} setIsOpen={setIsOpen} titleElement={<div />}>
<div className="flex flex-col items-center gap-20 p-20 text-center">
<Image
alt="Token"
src={position.reserveToken.logoURI}
className="!rounded-full h-50 w-50"
/>
<div>Upgrade BNT</div>
<div>
Move all BNT to a single pool and earn from all trades in the network
</div>
<div className="flex flex-col items-center justify-center font-bold text-center text-error">
<div>You are migrating from Bancor V2.1 to Bancor V3.</div>
<div>Please note that BNT distribution is temporarily paused.</div>
<PopoverV3
children={<EmergencyInfo />}
hover
buttonElement={() => (
<span className="underline cursor-pointer">More info</span>
)}
<Modal large isOpen={isOpen} setIsOpen={setIsOpen} title={'Migrate to v3'}>
<div className="px-30 pb-30">
<p className={'text-secondary text-16 mb-30'}>
Move all your BNT to a single pool that earns fees from all trades in
the network
</p>

<div
className={
'bg-secondary rounded-10 p-16 space-x-16 text-20 flex items-center'
}
>
<Image
alt={'Token Logo'}
src={poolV3?.reserveToken.logoURI}
className={'w-40 h-40'}
/>
<span>All {poolV3?.name}</span>
</div>
<div className="w-full p-20 bg-fog dark:bg-black rounded-20">
<div className="flex items-center justify-between text-18 mb-15">
<div>Upgrade all BNT</div>
</div>
<div className="flex items-center gap-5">
<IconCheck className="w-10 text-primary" />
Single BNT pool
</div>
<div className="flex items-center gap-5">
<IconCheck className="w-10 text-primary" />
Auto-compounding
</div>
<div className="flex items-center gap-5">
<IconCheck className="w-10 text-primary" />
Fully upgrade partially protected holdings
</div>
</div>

<Button
onClick={() => migrate(totalBNT.bntPositions)}
size={ButtonSize.Full}
className="mt-30 mb-30"
variant={ButtonVariant.Secondary}
disabled={txBusy}
>
Upgrade All
{txBusy
? '... waiting for confirmation'
: `Migrate all ${poolV3?.name} to v3`}
</Button>
<button
onClick={() =>
migrate(
position.subRows.length === 0 ? [position] : position.subRows
)
}
className="text-primary"
>
No Thanks, just BNT from the {position.pool.name}
</button>
<div className="text-secondary text-[13px]">
{`${lockDurationInDays} day cooldown • ${withdrawalFeeInPercent}% withdrawal fee`}

<div className={'flex justify-center'}>
<button
onClick={() =>
migrate(
position.subRows.length === 0 ? [position] : position.subRows
)
}
className="hover:text-primary text-16"
>
Migrate only BNT from {position.pool.name}
</button>
</div>
</div>
</Modal>
Expand Down
Loading