Feature/v2-v3-migration

package.json

@@ -31,8 +31,8 @@
     "test:ci": "jest --ci"
   },
   "dependencies": {
-    "@aave/contract-helpers": "1.10.0",
-    "@aave/math-utils": "1.10.0",
+    "@aave/contract-helpers": "^1.11.1",
+    "@aave/math-utils": "^1.11.1",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",
     "@emotion/server": "latest",

pages/_app.page.tsx

@@ -16,6 +16,7 @@ import { CollateralChangeModal } from 'src/components/transactions/CollateralCha
 import { EmodeModal } from 'src/components/transactions/Emode/EmodeModal';
 import { FaucetModal } from 'src/components/transactions/Faucet/FaucetModal';
 import { GasStationProvider } from 'src/components/transactions/GasStation/GasStationProvider';
+import { MigrateV3Modal } from 'src/components/transactions/MigrateV3/MigrateV3Modal';
 import { RateSwitchModal } from 'src/components/transactions/RateSwitch/RateSwitchModal';
 import { RepayModal } from 'src/components/transactions/Repay/RepayModal';
 import { SupplyModal } from 'src/components/transactions/Supply/SupplyModal';
@@ -85,6 +86,7 @@ export default function MyApp(props: MyAppProps) {
                           <EmodeModal />
                           <SwapModal />
                           <FaucetModal />
+                          <MigrateV3Modal />
                         </GasStationProvider>
                       </AppDataProvider>
                     </BackgroundDataProvider>

pages/v3-migration.page.tsx

@@ -0,0 +1,221 @@
+import { Trans } from '@lingui/macro';
+import { Box, Divider, useMediaQuery, useTheme } from '@mui/material';
+import { useCallback, useEffect } from 'react';
+import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper';
+import { ContentContainer } from 'src/components/ContentContainer';
+import { MigrateV3Modal } from 'src/components/transactions/MigrateV3/MigrateV3Modal';
+import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
+import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
+import { usePermissions } from 'src/hooks/usePermissions';
+import { MainLayout } from 'src/layouts/MainLayout';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
+import { DashboardContentNoData } from 'src/modules/dashboard/DashboardContentNoData';
+import { MigrationBottomPanel } from 'src/modules/migration/MigrationBottomPanel';
+import { MigrationListItem } from 'src/modules/migration/MigrationListItem';
+import { MigrationListItemLoader } from 'src/modules/migration/MigrationListItemLoader';
+import { MigrationLists } from 'src/modules/migration/MigrationLists';
+import { MigrationTopPanel } from 'src/modules/migration/MigrationTopPanel';
+import { selectCurrentChainIdV3PoolReserve } from 'src/store/poolSelectors';
+import { usePoolDataV3Subscription, useRootStore } from 'src/store/root';
+import {
+  selectUserReservesForMigration,
+  selectV2UserSummaryAfterMigration,
+  selectV3UserSummary,
+  selectV3UserSummaryAfterMigration,
+} from 'src/store/v3MigrationSelectors';
+
+export default function V3Migration() {
+  const { loading } = useAppDataContext();
+  const { currentAccount, loading: web3Loading } = useWeb3Context();
+  const { isPermissionsLoading } = usePermissions();
+  const theme = useTheme();
+  const downToSM = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const currentTimeStamp = useCurrentTimestamp(10);
+
+  const {
+    totalCollateralUSD,
+    totalBorrowsUSD,
+    supplyReserves,
+    borrowReserves,
+    healthFactor: v2HealthFactorBeforeMigration,
+  } = useRootStore(
+    useCallback(
+      (state) => selectUserReservesForMigration(state, currentTimeStamp),
+      [currentTimeStamp]
+    )
+  );
+
+  // health factor calculation
+  const { v3UserSummaryBeforeMigration, v2UserSummaryAfterMigration, poolReserveV3 } = useRootStore(
+    (state) => ({
+      v2UserSummaryAfterMigration: selectV2UserSummaryAfterMigration(state, currentTimeStamp),
+      v3UserSummaryBeforeMigration: selectV3UserSummary(state, currentTimeStamp),
+      poolReserveV3: selectCurrentChainIdV3PoolReserve(state),
+    })
+  );
+
+  const v3UserSummaryAfterMigration = useRootStore(
+    useCallback(
+      (state) => selectV3UserSummaryAfterMigration(state, currentTimeStamp),
+      [currentTimeStamp]
+    )
+  );
+
+  // actions
+  const {
+    selectAllSupply,
+    selectAllBorrow,
+    toggleMigrationSelectedSupplyAsset: toggleSelectedSupplyPosition,
+    selectedMigrationSupplyAssets: selectedSupplyAssets,
+    toggleMigrationSelectedBorrowAsset: toggleSelectedBorrowPosition,
+    selectedMigrationBorrowAssets: selectedBorrowAssets,
+    resetMigrationSelectedAssets,
+    enforceAsCollateral,
+  } = useRootStore();
+
+  useEffect(() => {
+    if (resetMigrationSelectedAssets) {
+      resetMigrationSelectedAssets();
+    }
+  }, [resetMigrationSelectedAssets]);
+
+  usePoolDataV3Subscription();
+
+  const enabledAsCollateral = (canBeEnforced: boolean, underlyingAsset: string) => {
+    if (canBeEnforced) {
+      enforceAsCollateral(underlyingAsset);
+    }
+  };
+
+  const handleToggleAllSupply = () => {
+    selectAllSupply(currentTimeStamp);
+  };
+
+  const handleToggleAllBorrow = () => {
+    selectAllBorrow(currentTimeStamp);
+  };
+
+  return (
+    <>
+      <MigrationTopPanel />
+      {currentAccount && !isPermissionsLoading ? (
+        <ContentContainer>
+          <MigrationLists
+            loading={loading}
+            totalSuppliesUSD={totalCollateralUSD}
+            totalBorrowsUSD={totalBorrowsUSD}
+            isSupplyPositionsAvailable={supplyReserves.length > 0}
+            isBorrowPositionsAvailable={borrowReserves.length > 0}
+            onSelectAllSupplies={handleToggleAllSupply}
+            onSelectAllBorrows={handleToggleAllBorrow}
+            emodeCategoryId={poolReserveV3?.userEmodeCategoryId}
+            suppliesPositions={
+              <>
+                {loading ? (
+                  <>
+                    <MigrationListItemLoader />
+                    <MigrationListItemLoader />
+                  </>
+                ) : supplyReserves.length > 0 ? (
+                  supplyReserves.map((reserve) => (
+                    <MigrationListItem
+                      key={reserve.underlyingAsset}
+                      checked={
+                        selectedSupplyAssets.findIndex(
+                          (selectedAsset) =>
+                            selectedAsset.underlyingAsset == reserve.underlyingAsset
+                        ) >= 0
+                      }
+                      enableAsCollateral={() =>
+                        enabledAsCollateral(reserve.canBeEnforced, reserve.underlyingAsset)
+                      }
+                      canBeEnforced={
+                        v3UserSummaryBeforeMigration.totalCollateralMarketReferenceCurrency ==
+                          '0' && reserve.canBeEnforced
+                      }
+                      reserveIconSymbol={reserve.reserve.iconSymbol}
+                      reserveName={reserve.reserve.name}
+                      reserveSymbol={reserve.reserve.symbol}
+                      amount={reserve.underlyingBalance}
+                      amountInUSD={reserve.underlyingBalanceUSD}
+                      onCheckboxClick={() => toggleSelectedSupplyPosition(reserve.underlyingAsset)}
+                      enabledAsCollateral={reserve.usageAsCollateralEnabledOnUser}
+                      isIsolated={reserve.isolatedOnV3}
+                    />
+                  ))
+                ) : (
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <DashboardContentNoData text={<Trans>Nothing supplied yet</Trans>} />
+                  </Box>
+                )}
+              </>
+            }
+            borrowsPositions={
+              <>
+                {loading ? (
+                  <>
+                    <MigrationListItemLoader />
+                    <MigrationListItemLoader />
+                  </>
+                ) : borrowReserves.length > 0 ? (
+                  borrowReserves.map((reserve) => (
+                    <MigrationListItem
+                      key={reserve.underlyingAsset}
+                      checked={
+                        !reserve.disabledForMigration &&
+                        selectedBorrowAssets.findIndex(
+                          (selectedAsset) =>
+                            selectedAsset.underlyingAsset == reserve.underlyingAsset
+                        ) >= 0
+                      }
+                      reserveIconSymbol={reserve.reserve.iconSymbol}
+                      reserveName={reserve.reserve.name}
+                      reserveSymbol={reserve.reserve.symbol}
+                      amount={reserve.totalBorrows}
+                      amountInUSD={reserve.totalBorrowsUSD}
+                      onCheckboxClick={() => toggleSelectedBorrowPosition(reserve.underlyingAsset)}
+                      disabled={reserve.disabledForMigration}
+                      enabledAsCollateral={reserve.usageAsCollateralEnabledOnUser}
+                    />
+                  ))
+                ) : (
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <DashboardContentNoData text={<Trans>Nothing borrowed yet</Trans>} />
+                  </Box>
+                )}
+              </>
+            }
+          />
+
+          {!downToSM && <Divider sx={{ my: 10 }} />}
+
+          <MigrationBottomPanel
+            hfV2Current={v2HealthFactorBeforeMigration}
+            hfV2AfterChange={v2UserSummaryAfterMigration.healthFactor}
+            hfV3Current={v3UserSummaryBeforeMigration.healthFactor}
+            hfV3AfterChange={v3UserSummaryAfterMigration.healthFactor}
+            disableButton={
+              !Object.keys(selectedSupplyAssets).length && !Object.keys(selectedBorrowAssets).length
+            }
+            loading={loading}
+          />
+        </ContentContainer>
+      ) : (
+        <ConnectWalletPaper
+          loading={web3Loading}
+          description={<Trans> Please connect your wallet to see migration tool.</Trans>}
+        />
+      )}
+    </>
+  );
+}
+
+V3Migration.getLayout = function getLayout(page: React.ReactElement) {
+  return (
+    <MainLayout>
+      {page}
+      <MigrateV3Modal />
+    </MainLayout>
+  );
+};

src/components/TopInfoPanel/PageTitle.tsx

@@ -1,16 +1,23 @@
-import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Trans } from '@lingui/macro';
+import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { ReactNode } from 'react';
 
+import { useRootStore } from '../../store/root';
+import { selectIsMigrationAvailable } from '../../store/v3MigrationSelectors';
 import { NetworkConfig } from '../../ui-config/networksConfig';
 // import { BridgeButton } from '../BridgeButton';
 import { MarketSwitcher } from '../MarketSwitcher';
+import { Link, ROUTES } from '../primitives/Link';
 
 export interface PageTitleProps extends Pick<NetworkConfig, 'bridge'> {
   pageTitle?: ReactNode;
   withMarketSwitcher?: boolean;
+  withMigrateButton?: boolean;
 }
 
-export const PageTitle = ({ pageTitle, withMarketSwitcher }: PageTitleProps) => {
+export const PageTitle = ({ pageTitle, withMarketSwitcher, withMigrateButton }: PageTitleProps) => {
+  const isMigrateToV3Available = useRootStore((state) => selectIsMigrationAvailable(state));
+
   const theme = useTheme();
   const upToLG = useMediaQuery(theme.breakpoints.up('lg'));
   // const upToMD = useMediaQuery(theme.breakpoints.up('md'));
@@ -44,12 +51,20 @@ export const PageTitle = ({ pageTitle, withMarketSwitcher }: PageTitleProps) =>
         sx={{
           display: 'flex',
           alignItems: 'flex-start',
+          flexWrap: 'wrap',
           mb: !pageTitle ? 4 : 0,
         }}
       >
         {withMarketSwitcher && <MarketSwitcher />}
         {/* <BridgeButton bridge={bridge} variant="surface" withoutIcon={!upToMD} /> */}
         {/* NOTE:// Removing for now  */}
+        {isMigrateToV3Available && withMigrateButton && (
+          <Link href={ROUTES.migrationTool} sx={{ mt: { xs: 2, xsm: 0 } }}>
+            <Button variant="gradient" size="small">
+              <Trans>Migrate to V3</Trans>
+            </Button>
+          </Link>
+        )}
       </Box>
     </Box>
   );

src/components/TopInfoPanel/TopInfoPanel.tsx

@@ -12,6 +12,7 @@ export const TopInfoPanel = ({
   pageTitle,
   titleComponent,
   withMarketSwitcher,
+  withMigrateButton,
   bridge,
   children,
 }: TopInfoPanelProps) => {
@@ -30,6 +31,7 @@ export const TopInfoPanel = ({
             <PageTitle
               pageTitle={pageTitle}
               withMarketSwitcher={withMarketSwitcher}
+              withMigrateButton={withMigrateButton}
               bridge={bridge}
             />
           )}

src/components/lists/ListHeaderTitle.tsx

@@ -7,6 +7,7 @@ interface ListHeaderTitleProps {
   sortKey?: string;
   setSortName?: (value: string) => void;
   setSortDesc?: (value: boolean) => void;
+  onClick?: () => void;
   children: ReactNode;
 }
 
@@ -16,6 +17,7 @@ export const ListHeaderTitle = ({
   sortKey,
   setSortName,
   setSortDesc,
+  onClick,
   children,
 }: ListHeaderTitleProps) => {
   const handleSorting = (name: string) => {
@@ -32,9 +34,9 @@ export const ListHeaderTitle = ({
       variant="subheader2"
       color="text.secondary"
       noWrap
-      onClick={() => !!sortKey && handleSorting(sortKey)}
+      onClick={() => (!!onClick ? onClick() : !!sortKey && handleSorting(sortKey))}
       sx={{
-        cursor: !!sortKey ? 'pointer' : 'default',
+        cursor: !!onClick || !!sortKey ? 'pointer' : 'default',
         display: 'inline-flex',
         alignItems: 'center',
       }}

src/components/primitives/Link.tsx

@@ -119,6 +119,7 @@ export const ROUTES = {
   staking: '/staking',
   governance: '/governance',
   faucet: '/faucet',
+  migrationTool: '/v3-migration',
   prerenderedProposal: (proposalId: number) => `/governance/proposal/${proposalId}`,
   dynamicRenderedProposal: (proposalId: number) => `/governance/proposal?proposalId=${proposalId}`,
   reserveOverview: (underlyingAsset: string, marketName: CustomMarket) =>

src/components/primitives/Row.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 
 interface RowProps extends BoxProps {
   caption?: ReactNode;
-  captionVariant?: 'secondary16' | 'description' | 'subheader1' | 'caption';
+  captionVariant?: 'secondary16' | 'description' | 'subheader1' | 'caption' | 'h3';
   captionColor?: string;
   align?: 'center' | 'flex-start';
 }

src/components/transactions/Borrow/BorrowActions.tsx

@@ -57,7 +57,7 @@ export const BorrowActions = ({
       handleAction={action}
       actionText={<Trans>Borrow {symbol}</Trans>}
       actionInProgressText={<Trans>Borrowing {symbol}</Trans>}
-      handleApproval={() => approval({ amount: amountToBorrow, underlyingAsset: poolAddress })}
+      handleApproval={() => approval([{ amount: amountToBorrow, underlyingAsset: poolAddress }])}
       requiresApproval={requiresApproval}
       preparingTransactions={loadingTxns}
       sx={sx}