Skip to content

Commit 8b803a8

Browse files
Argeare5Argeare5
committed
feat: migration components structure
1 parent 2a14e60 commit 8b803a8

File tree

12 files changed

+494
-38
lines changed

12 files changed

+494
-38
lines changed

‎pages/v3-migration.page.tsx‎

Lines changed: 94 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1+
import { Divider } from '@mui/material';
12
import { useEffect } from 'react';
3+
import { ContentContainer } from 'src/components/ContentContainer';
24
import { MigrateV3Modal } from 'src/components/transactions/MigrateV3/MigrateV3Modal';
3-
import { StakeModal } from 'src/components/transactions/Stake/StakeModal';
4-
import { StakeCooldownModal } from 'src/components/transactions/StakeCooldown/StakeCooldownModal';
5-
import { StakeRewardClaimModal } from 'src/components/transactions/StakeRewardClaim/StakeRewardClaimModal';
6-
import { UnStakeModal } from 'src/components/transactions/UnStake/UnStakeModal';
7-
import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
85
import { useModalContext } from 'src/hooks/useModal';
96
import { useUserReserves } from 'src/hooks/useUserReserves';
107
import { MainLayout } from 'src/layouts/MainLayout';
8+
import { MigrationListItem } from 'src/modules/migration/MigrationListItem';
9+
import { MigrationLists } from 'src/modules/migration/MigrationLists';
10+
import { MigrationTopPanel } from 'src/modules/migration/MigrationTopPanel';
1111
import { usePoolDataV3Subscription, useRootStore } from 'src/store/root';
12-
import { selectCurrentMarketV2Reserves } from 'src/store/v3MigrationSelectors';
12+
13+
import { MigrationBottomPanel } from '../src/modules/migration/MigrationBottomPanel';
1314

1415
export default function V3Migration() {
1516
const { user, borrowPositions } = useUserReserves();
@@ -26,10 +27,10 @@ export default function V3Migration() {
2627
const selectedBorrowAssets = useRootStore((state) => state.selectedMigrationBorrowAssets);
2728
const testMigration = useRootStore((state) => state._testMigration);
2829

29-
const currentTimestamp = useCurrentTimestamp(5);
30-
const currentV2SuppliedPositions = useRootStore((state) =>
31-
selectCurrentMarketV2Reserves(state, currentTimestamp)
32-
);
30+
// const currentTimestamp = useCurrentTimestamp(5);
31+
// const currentV2SuppliedPositions = useRootStore((state) =>
32+
// selectCurrentMarketV2Reserves(state, currentTimestamp)
33+
// );
3334

3435
// start refreshing v3 market at the same time
3536
usePoolDataV3Subscription();
@@ -38,30 +39,89 @@ export default function V3Migration() {
3839
useEffect(() => {}, []);
3940

4041
return (
41-
<div>
42-
<button onClick={() => testMigration()}>test migration</button>
43-
<div>supply</div>
44-
{user.userReservesData.map((reserve) => (
45-
<button
46-
key={reserve.underlyingAsset}
47-
onClick={() => toggleSelectedSupplyPosition(reserve.underlyingAsset)}
48-
style={{ color: selectedSupplyAssets[reserve.underlyingAsset] ? 'red' : 'black' }}
49-
>
50-
{reserve.underlyingAsset}:<b>{reserve.scaledATokenBalance}</b>
51-
</button>
52-
))}
53-
<div>borrow</div>
54-
{borrowPositions.map((reserve) => (
55-
<button
56-
key={reserve.underlyingAsset}
57-
onClick={() => toggleSelectedBorrowPosition(reserve.underlyingAsset)}
58-
style={{ color: selectedBorrowAssets[reserve.underlyingAsset] ? 'red' : 'black' }}
59-
>
60-
{reserve.variableBorrowsUSD}
61-
</button>
62-
))}
63-
<button onClick={openV3Migration}>Migrate</button>
64-
</div>
42+
<>
43+
<MigrationTopPanel />
44+
<ContentContainer>
45+
<MigrationLists
46+
totalSuppliesUSD={user.totalCollateralUSD}
47+
totalBorrowsUSD={user.totalBorrowsUSD}
48+
onSelectAllSupplies={() =>
49+
user.userReservesData.map((reserve) =>
50+
toggleSelectedSupplyPosition(reserve.underlyingAsset)
51+
)
52+
}
53+
onSelectAllBorrows={() =>
54+
borrowPositions.map((reserve) => toggleSelectedBorrowPosition(reserve.underlyingAsset))
55+
}
56+
suppliesPositions={
57+
<>
58+
{user.userReservesData.map((reserve) => (
59+
<MigrationListItem
60+
key={reserve.underlyingAsset}
61+
checked={selectedSupplyAssets[reserve.underlyingAsset]}
62+
reserveIconSymbol={reserve.reserve.iconSymbol}
63+
reserveName={reserve.reserve.name}
64+
reserveSymbol={reserve.reserve.symbol}
65+
amount={reserve.underlyingBalance}
66+
amountInUSD={reserve.underlyingBalanceUSD}
67+
onCheckboxClick={() => toggleSelectedSupplyPosition(reserve.underlyingAsset)}
68+
/>
69+
))}
70+
</>
71+
}
72+
borrowsPositions={
73+
<>
74+
{borrowPositions.map((reserve) => (
75+
<MigrationListItem
76+
key={reserve.underlyingAsset}
77+
checked={selectedBorrowAssets[reserve.underlyingAsset]}
78+
reserveIconSymbol={reserve.reserve.iconSymbol}
79+
reserveName={reserve.reserve.name}
80+
reserveSymbol={reserve.reserve.symbol}
81+
amount={reserve.totalBorrows}
82+
amountInUSD={reserve.totalBorrowsUSD}
83+
onCheckboxClick={() => toggleSelectedBorrowPosition(reserve.underlyingAsset)}
84+
/>
85+
))}
86+
</>
87+
}
88+
/>
89+
90+
<Divider sx={{ my: 10 }} />
91+
92+
<MigrationBottomPanel
93+
hfV2Current={'1.2'} // TODO: need value
94+
hfV2AfterChange={'2'} // TODO: need value
95+
hfV3Current={'1.2'} // TODO: need value
96+
hfV3AfterChange={'2'} // TODO: need value
97+
/>
98+
</ContentContainer>
99+
100+
<div>
101+
<button onClick={() => testMigration()}>test migration</button>
102+
<div>supply</div>
103+
{user.userReservesData.map((reserve) => (
104+
<button
105+
key={reserve.underlyingAsset}
106+
onClick={() => toggleSelectedSupplyPosition(reserve.underlyingAsset)}
107+
style={{ color: selectedSupplyAssets[reserve.underlyingAsset] ? 'red' : 'black' }}
108+
>
109+
{reserve.underlyingAsset}:<b>{reserve.scaledATokenBalance}</b>
110+
</button>
111+
))}
112+
<div>borrow</div>
113+
{borrowPositions.map((reserve) => (
114+
<button
115+
key={reserve.underlyingAsset}
116+
onClick={() => toggleSelectedBorrowPosition(reserve.underlyingAsset)}
117+
style={{ color: selectedBorrowAssets[reserve.underlyingAsset] ? 'red' : 'black' }}
118+
>
119+
{reserve.variableBorrowsUSD}
120+
</button>
121+
))}
122+
<button onClick={openV3Migration}>Migrate</button>
123+
</div>
124+
</>
65125
);
66126
}
67127

‎src/components/lists/ListHeaderTitle.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ interface ListHeaderTitleProps {
77
sortKey?: string;
88
setSortName?: (value: string) => void;
99
setSortDesc?: (value: boolean) => void;
10+
onClick?: () => void;
1011
children: ReactNode;
1112
}
1213

@@ -16,6 +17,7 @@ export const ListHeaderTitle = ({
1617
sortKey,
1718
setSortName,
1819
setSortDesc,
20+
onClick,
1921
children,
2022
}: ListHeaderTitleProps) => {
2123
const handleSorting = (name: string) => {
@@ -32,9 +34,9 @@ export const ListHeaderTitle = ({
3234
variant="subheader2"
3335
color="text.secondary"
3436
noWrap
35-
onClick={() => !!sortKey && handleSorting(sortKey)}
37+
onClick={() => (!!onClick ? onClick() : !!sortKey && handleSorting(sortKey))}
3638
sx={{
37-
cursor: !!sortKey ? 'pointer' : 'default',
39+
cursor: !!onClick || !!sortKey ? 'pointer' : 'default',
3840
display: 'inline-flex',
3941
alignItems: 'center',
4042
}}

‎src/components/primitives/Link.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export const ROUTES = {
119119
staking: '/staking',
120120
governance: '/governance',
121121
faucet: '/faucet',
122+
migrationTool: '/v3-migration',
122123
prerenderedProposal: (proposalId: number) => `/governance/proposal/${proposalId}`,
123124
dynamicRenderedProposal: (proposalId: number) => `/governance/proposal?proposalId=${proposalId}`,
124125
reserveOverview: (underlyingAsset: string, marketName: CustomMarket) =>

‎src/helpers/useTransactionHandler.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ export const useTransactionHandler = ({
260260
action: TxAction.MAIN_ACTION,
261261
});
262262
} catch (error) {
263-
console.log(error, 'error')
263+
console.log(error, 'error');
264264
const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);
265265
setTxError(parsedError);
266266
setMainTxState({

‎src/locales/en/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/locales/en/messages.po‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ msgstr "Array parameters that should be equal length are not"
182182

183183
#: src/modules/faucet/FaucetAssetsList.tsx
184184
#: src/modules/markets/AssetsList.tsx
185+
#: src/modules/migration/MigrationList.tsx
185186
msgid "Asset"
186187
msgstr "Asset"
187188

@@ -275,6 +276,10 @@ msgstr "Balance"
275276
msgid "Be careful - You are very close to liquidation. Consider depositing more collateral or paying down some of your borrowed positions"
276277
msgstr "Be careful - You are very close to liquidation. Consider depositing more collateral or paying down some of your borrowed positions"
277278

279+
#: src/modules/migration/MigrationBottomPanel.tsx
280+
msgid "Be mindful of the network congestion and gas prices."
281+
msgstr "Be mindful of the network congestion and gas prices."
282+
278283
#: src/components/transactions/Warnings/SNXWarning.tsx
279284
msgid "Before supplying"
280285
msgstr "Before supplying"
@@ -546,6 +551,10 @@ msgstr "Created"
546551
msgid "Current LTV"
547552
msgstr "Current LTV"
548553

554+
#: src/modules/migration/MigrationList.tsx
555+
msgid "Current balance"
556+
msgstr "Current balance"
557+
549558
#: pages/governance/proposal/[proposalId].governance.tsx
550559
msgid "Current differential"
551560
msgstr "Current differential"
@@ -845,6 +854,10 @@ msgstr "Greek"
845854
msgid "Health factor"
846855
msgstr "Health factor"
847856

857+
#: src/modules/migration/MigrationBottomPanel.tsx
858+
msgid "Health factor changes after migration"
859+
msgstr "Health factor changes after migration"
860+
848861
#: src/ui-config/errorMapping.tsx
849862
msgid "Health factor is lesser than the liquidation threshold"
850863
msgstr "Health factor is lesser than the liquidation threshold"
@@ -862,6 +875,10 @@ msgstr "Hide"
862875
msgid "I acknowledge the risks involved."
863876
msgstr "I acknowledge the risks involved."
864877

878+
#: src/modules/migration/MigrationBottomPanel.tsx
879+
msgid "I fully understand the risks of migrating."
880+
msgstr "I fully understand the risks of migrating."
881+
865882
#: src/components/transactions/StakeCooldown/StakeCooldownModalContent.tsx
866883
msgid "I understand how cooldown ({0}) and unstaking ({1}) work"
867884
msgstr "I understand how cooldown ({0}) and unstaking ({1}) work"
@@ -1072,6 +1089,26 @@ msgstr "Maximum loan to value"
10721089
msgid "Menu"
10731090
msgstr "Menu"
10741091

1092+
#: src/modules/migration/MigrationBottomPanel.tsx
1093+
msgid "Migrate"
1094+
msgstr "Migrate"
1095+
1096+
#: src/ui-config/menu-items/index.tsx
1097+
msgid "Migrate to V3"
1098+
msgstr "Migrate to V3"
1099+
1100+
#: src/modules/migration/MigrationBottomPanel.tsx
1101+
msgid "Migrating multiple collaterals and borrowed assets at the same time can be an expensive operation and might fail in certain situations. Therefore it’s not recommended to migrate positions with more than 5 assets (deposited + borrowed) at the same time."
1102+
msgstr "Migrating multiple collaterals and borrowed assets at the same time can be an expensive operation and might fail in certain situations. Therefore it’s not recommended to migrate positions with more than 5 assets (deposited + borrowed) at the same time."
1103+
1104+
#: src/modules/migration/MigrationTopPanel.tsx
1105+
msgid "Migration"
1106+
msgstr "Migration"
1107+
1108+
#: src/modules/migration/MigrationBottomPanel.tsx
1109+
msgid "Migration & Health factor change"
1110+
msgstr "Migration & Health factor change"
1111+
10751112
#: src/components/transactions/Repay/CollateralRepayModalContent.tsx
10761113
#: src/components/transactions/Swap/SwapModalContent.tsx
10771114
msgid "Minimum received"
@@ -1213,6 +1250,10 @@ msgstr "Pending..."
12131250
msgid "Per the community, the Fantom market has been frozen."
12141251
msgstr "Per the community, the Fantom market has been frozen."
12151252

1253+
#: src/modules/migration/MigrationBottomPanel.tsx
1254+
msgid "Please always be aware of your Health Factor (HF) when partially migrating a position and that your rates will be updated to V3 rates."
1255+
msgstr "Please always be aware of your Health Factor (HF) when partially migrating a position and that your rates will be updated to V3 rates."
1256+
12161257
#: src/modules/reserve-overview/ReserveActions.tsx
12171258
msgid "Please connect a wallet to view your personal information here."
12181259
msgstr "Please connect a wallet to view your personal information here."
@@ -1428,6 +1469,10 @@ msgstr "Select"
14281469
msgid "Select APY type to switch"
14291470
msgstr "Select APY type to switch"
14301471

1472+
#: src/modules/migration/MigrationList.tsx
1473+
msgid "Select all"
1474+
msgstr "Select all"
1475+
14311476
#: src/layouts/components/LanguageSwitcher.tsx
14321477
msgid "Select language"
14331478
msgstr "Select language"
@@ -1652,6 +1697,10 @@ msgstr "Switching E-Mode"
16521697
msgid "Switching rate"
16531698
msgstr "Switching rate"
16541699

1700+
#: src/modules/migration/MigrationTopPanel.tsx
1701+
msgid "TODO: text about migration"
1702+
msgstr "TODO: text about migration"
1703+
16551704
#: src/modules/faucet/FaucetAssetsList.tsx
16561705
msgid "Test Assets"
16571706
msgstr "Test Assets"
@@ -1985,10 +2034,18 @@ msgstr "Variable interest rate will <0>fluctuate</0> based on the market conditi
19852034
msgid "Version 2"
19862035
msgstr "Version 2"
19872036

2037+
#: src/modules/migration/MigrationBottomPanel.tsx
2038+
msgid "Version 2 HF change"
2039+
msgstr "Version 2 HF change"
2040+
19882041
#: src/components/MarketSwitcher.tsx
19892042
msgid "Version 3"
19902043
msgstr "Version 3"
19912044

2045+
#: src/modules/migration/MigrationBottomPanel.tsx
2046+
msgid "Version 3 HF change"
2047+
msgstr "Version 3 HF change"
2048+
19922049
#: src/modules/governance/proposal/VotersListContainer.tsx
19932050
msgid "View all votes"
19942051
msgstr "View all votes"
@@ -2207,6 +2264,7 @@ msgstr "You {action} <0/> {symbol}"
22072264

22082265
#: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
22092266
#: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
2267+
#: src/modules/migration/MigrationLists.tsx
22102268
msgid "Your borrows"
22112269
msgstr "Your borrows"
22122270

@@ -2231,6 +2289,7 @@ msgstr "Your reward balance is 0"
22312289

22322290
#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx
22332291
#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx
2292+
#: src/modules/migration/MigrationLists.tsx
22342293
msgid "Your supplies"
22352294
msgstr "Your supplies"
22362295

0 commit comments

Comments
 (0)