Skip to content

Commit 1641f7d

Browse files
Argeare5Argeare5
committed
feat: finished main migration screen
1 parent 8b803a8 commit 1641f7d

File tree

10 files changed

+366
-221
lines changed

10 files changed

+366
-221
lines changed

‎pages/v3-migration.page.tsx‎

Lines changed: 107 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,132 @@
1-
import { Divider } from '@mui/material';
2-
import { useEffect } from 'react';
1+
import { Trans } from '@lingui/macro';
2+
import { Box, Divider } from '@mui/material';
3+
import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper';
34
import { ContentContainer } from 'src/components/ContentContainer';
45
import { MigrateV3Modal } from 'src/components/transactions/MigrateV3/MigrateV3Modal';
5-
import { useModalContext } from 'src/hooks/useModal';
6+
import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
7+
import { usePermissions } from 'src/hooks/usePermissions';
68
import { useUserReserves } from 'src/hooks/useUserReserves';
79
import { MainLayout } from 'src/layouts/MainLayout';
10+
import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
11+
import { DashboardContentNoData } from 'src/modules/dashboard/DashboardContentNoData';
12+
import { MigrationBottomPanel } from 'src/modules/migration/MigrationBottomPanel';
813
import { MigrationListItem } from 'src/modules/migration/MigrationListItem';
14+
import { MigrationListItemLoader } from 'src/modules/migration/MigrationListItemLoader';
915
import { MigrationLists } from 'src/modules/migration/MigrationLists';
1016
import { MigrationTopPanel } from 'src/modules/migration/MigrationTopPanel';
1117
import { usePoolDataV3Subscription, useRootStore } from 'src/store/root';
1218

13-
import { MigrationBottomPanel } from '../src/modules/migration/MigrationBottomPanel';
14-
1519
export default function V3Migration() {
16-
const { user, borrowPositions } = useUserReserves();
17-
const { openV3Migration } = useModalContext();
20+
const { loading } = useAppDataContext();
21+
const { currentAccount, loading: web3Loading } = useWeb3Context();
22+
const { isPermissionsLoading } = usePermissions();
1823

19-
const toggleSelectedSupplyPosition = useRootStore(
20-
(state) => state.toggleMigrationSelectedSupplyAsset
21-
);
22-
const selectedSupplyAssets = useRootStore((state) => state.selectedMigrationSupplyAssets);
23-
24-
const toggleSelectedBorrowPosition = useRootStore(
25-
(state) => state.toggleMigrationSelectedBorrowAsset
26-
);
27-
const selectedBorrowAssets = useRootStore((state) => state.selectedMigrationBorrowAssets);
28-
const testMigration = useRootStore((state) => state._testMigration);
24+
const { user, borrowPositions } = useUserReserves();
2925

30-
// const currentTimestamp = useCurrentTimestamp(5);
31-
// const currentV2SuppliedPositions = useRootStore((state) =>
32-
// selectCurrentMarketV2Reserves(state, currentTimestamp)
33-
// );
26+
const {
27+
toggleMigrationSelectedSupplyAsset: toggleSelectedSupplyPosition,
28+
selectedMigrationSupplyAssets: selectedSupplyAssets,
29+
toggleMigrationSelectedBorrowAsset: toggleSelectedBorrowPosition,
30+
selectedMigrationBorrowAssets: selectedBorrowAssets,
31+
} = useRootStore();
3432

3533
// start refreshing v3 market at the same time
3634
usePoolDataV3Subscription();
3735

38-
// always switch to default v2 in that case for polygon fork
39-
useEffect(() => {}, []);
40-
4136
return (
4237
<>
4338
<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-
/>
8939

90-
<Divider sx={{ my: 10 }} />
40+
{currentAccount && !isPermissionsLoading ? (
41+
<ContentContainer>
42+
<MigrationLists
43+
loading={loading}
44+
totalSuppliesUSD={user.totalCollateralUSD}
45+
totalBorrowsUSD={user.totalBorrowsUSD}
46+
isSupplyPositionsAvailable={!!user.userReservesData.length}
47+
isBorrowPositionsAvailable={!!borrowPositions.length}
48+
onSelectAllSupplies={() =>
49+
user.userReservesData.map((reserve) =>
50+
toggleSelectedSupplyPosition(reserve.underlyingAsset)
51+
)
52+
}
53+
onSelectAllBorrows={() =>
54+
borrowPositions.map((reserve) =>
55+
toggleSelectedBorrowPosition(reserve.underlyingAsset)
56+
)
57+
}
58+
suppliesPositions={
59+
<>
60+
{loading ? (
61+
<>
62+
<MigrationListItemLoader />
63+
<MigrationListItemLoader />
64+
</>
65+
) : !!user.userReservesData.length ? (
66+
user.userReservesData.map((reserve) => (
67+
<MigrationListItem
68+
key={reserve.underlyingAsset}
69+
checked={selectedSupplyAssets[reserve.underlyingAsset]}
70+
reserveIconSymbol={reserve.reserve.iconSymbol}
71+
reserveName={reserve.reserve.name}
72+
reserveSymbol={reserve.reserve.symbol}
73+
amount={reserve.underlyingBalance}
74+
amountInUSD={reserve.underlyingBalanceUSD}
75+
onCheckboxClick={() => toggleSelectedSupplyPosition(reserve.underlyingAsset)}
76+
/>
77+
))
78+
) : (
79+
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
80+
<DashboardContentNoData text={<Trans>Nothing supplied yet</Trans>} />
81+
</Box>
82+
)}
83+
</>
84+
}
85+
borrowsPositions={
86+
<>
87+
{loading ? (
88+
<>
89+
<MigrationListItemLoader />
90+
<MigrationListItemLoader />
91+
</>
92+
) : !!borrowPositions.length ? (
93+
borrowPositions.map((reserve) => (
94+
<MigrationListItem
95+
key={reserve.underlyingAsset}
96+
checked={selectedBorrowAssets[reserve.underlyingAsset]}
97+
reserveIconSymbol={reserve.reserve.iconSymbol}
98+
reserveName={reserve.reserve.name}
99+
reserveSymbol={reserve.reserve.symbol}
100+
amount={reserve.totalBorrows}
101+
amountInUSD={reserve.totalBorrowsUSD}
102+
onCheckboxClick={() => toggleSelectedBorrowPosition(reserve.underlyingAsset)}
103+
/>
104+
))
105+
) : (
106+
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
107+
<DashboardContentNoData text={<Trans>Nothing borrowed yet</Trans>} />
108+
</Box>
109+
)}
110+
</>
111+
}
112+
/>
91113

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>
114+
<Divider sx={{ my: 10 }} />
99115

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>
116+
<MigrationBottomPanel
117+
hfV2Current={'1.2'} // TODO: need value
118+
hfV2AfterChange={'2'} // TODO: need value
119+
hfV3Current={'1.2'} // TODO: need value
120+
hfV3AfterChange={'2'} // TODO: need value
121+
loading={loading}
122+
/>
123+
</ContentContainer>
124+
) : (
125+
<ConnectWalletPaper
126+
loading={web3Loading}
127+
description={<Trans> Please connect your wallet to see migration tool.</Trans>}
128+
/>
129+
)}
124130
</>
125131
);
126132
}
@@ -129,9 +135,7 @@ V3Migration.getLayout = function getLayout(page: React.ReactElement) {
129135
return (
130136
<MainLayout>
131137
{page}
132-
{/** Modals */}
133138
<MigrateV3Modal />
134-
{/** End of modals */}
135139
</MainLayout>
136140
);
137141
};

‎src/components/primitives/Row.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
33

44
interface RowProps extends BoxProps {
55
caption?: ReactNode;
6-
captionVariant?: 'secondary16' | 'description' | 'subheader1' | 'caption';
6+
captionVariant?: 'secondary16' | 'description' | 'subheader1' | 'caption' | 'h3';
77
captionColor?: string;
88
align?: 'center' | 'flex-start';
99
}

‎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: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1098,8 +1098,8 @@ msgid "Migrate to V3"
10981098
msgstr "Migrate to V3"
10991099

11001100
#: 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."
1101+
msgid "Migrating multiple collaterals and borrowed assets at the same time can be an expensive operation and might fail in certain situations.<0>Therefore it’s not recommended to migrate positions with more than 5 assets (deposited + borrowed) at the same time.</0>"
1102+
msgstr "Migrating multiple collaterals and borrowed assets at the same time can be an expensive operation and might fail in certain situations.<0>Therefore it’s not recommended to migrate positions with more than 5 assets (deposited + borrowed) at the same time.</0>"
11031103

11041104
#: src/modules/migration/MigrationTopPanel.tsx
11051105
msgid "Migration"
@@ -1197,6 +1197,7 @@ msgstr "Not enough voting power to participate in this proposal"
11971197
msgid "Not reached"
11981198
msgstr "Not reached"
11991199

1200+
#: pages/v3-migration.page.tsx
12001201
#: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
12011202
msgid "Nothing borrowed yet"
12021203
msgstr "Nothing borrowed yet"
@@ -1205,6 +1206,7 @@ msgstr "Nothing borrowed yet"
12051206
msgid "Nothing staked"
12061207
msgstr "Nothing staked"
12071208

1209+
#: pages/v3-migration.page.tsx
12081210
#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx
12091211
msgid "Nothing supplied yet"
12101212
msgstr "Nothing supplied yet"
@@ -1251,8 +1253,8 @@ msgid "Per the community, the Fantom market has been frozen."
12511253
msgstr "Per the community, the Fantom market has been frozen."
12521254

12531255
#: 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+
msgid "Please always be aware of your <0>Health Factor (HF)</0> when partially migrating a position and that your rates will be updated to V3 rates."
1257+
msgstr "Please always be aware of your <0>Health Factor (HF)</0> when partially migrating a position and that your rates will be updated to V3 rates."
12561258

12571259
#: src/modules/reserve-overview/ReserveActions.tsx
12581260
msgid "Please connect a wallet to view your personal information here."
@@ -1262,6 +1264,10 @@ msgstr "Please connect a wallet to view your personal information here."
12621264
msgid "Please connect your wallet to get free testnet assets."
12631265
msgstr "Please connect your wallet to get free testnet assets."
12641266

1267+
#: pages/v3-migration.page.tsx
1268+
msgid "Please connect your wallet to see migration tool."
1269+
msgstr "Please connect your wallet to see migration tool."
1270+
12651271
#: src/components/ConnectWalletPaper.tsx
12661272
#: src/components/ConnectWalletPaperStaking.tsx
12671273
msgid "Please connect your wallet to see your supplies, borrowings, and open positions."

‎src/modules/migration/HFChange.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { ChevronDoubleRightIcon } from '@heroicons/react/solid';
2+
import { Box, Skeleton, SvgIcon, useMediaQuery, useTheme } from '@mui/material';
3+
import { ReactNode } from 'react';
4+
import { HealthFactorNumber } from 'src/components/HealthFactorNumber';
5+
import { Row } from 'src/components/primitives/Row';
6+
7+
interface HFChangeProps {
8+
caption: ReactNode;
9+
hfCurrent: string;
10+
hfAfter: string;
11+
loading?: boolean;
12+
}
13+
14+
export const HFChange = ({ caption, hfCurrent, hfAfter, loading }: HFChangeProps) => {
15+
const { breakpoints } = useTheme();
16+
const isDesktop = useMediaQuery(breakpoints.up('lg'));
17+
18+
return (
19+
<Row
20+
caption={caption}
21+
sx={{ mb: { xs: 3, lg: 4 }, '&:last-of-type': { mb: 0 } }}
22+
captionVariant={isDesktop ? 'secondary16' : 'description'}
23+
>
24+
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
25+
{!loading ? <HealthFactorNumber value={hfCurrent} /> : <Skeleton width={50} />}
26+
<SvgIcon sx={{ fontSize: '16px', color: 'text.primary', mx: 1 }}>
27+
<ChevronDoubleRightIcon />
28+
</SvgIcon>
29+
{!loading ? <HealthFactorNumber value={hfAfter} /> : <Skeleton width={50} />}
30+
</Box>
31+
</Row>
32+
);
33+
};

0 commit comments

Comments
 (0)