Feature/v2-v3-migration

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,151 @@
+import { Trans } from '@lingui/macro';
+import { Box, Divider } from '@mui/material';
+import { 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 { usePermissions } from 'src/hooks/usePermissions';
+import { useUserReserves } from 'src/hooks/useUserReserves';
+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 { usePoolDataV3Subscription, useRootStore } from 'src/store/root';
+
+export default function V3Migration() {
+  const { loading } = useAppDataContext();
+  const { currentAccount, loading: web3Loading } = useWeb3Context();
+  const { isPermissionsLoading } = usePermissions();
+  const setCurrentMarketForMigration = useRootStore((state) => state.setCurrentMarketForMigration);
+
+  const { user, borrowPositions } = useUserReserves();
+
+  const {
+    toggleMigrationSelectedSupplyAsset: toggleSelectedSupplyPosition,
+    selectedMigrationSupplyAssets: selectedSupplyAssets,
+    toggleMigrationSelectedBorrowAsset: toggleSelectedBorrowPosition,
+    selectedMigrationBorrowAssets: selectedBorrowAssets,
+  } = useRootStore();
+
+  useEffect(() => {
+    if (setCurrentMarketForMigration) {
+      setCurrentMarketForMigration();
+    }
+  }, [setCurrentMarketForMigration]);
+
+  usePoolDataV3Subscription();
+
+  return (
+    <>
+      <MigrationTopPanel />
+
+      {currentAccount && !isPermissionsLoading ? (
+        <ContentContainer>
+          <MigrationLists
+            loading={loading}
+            totalSuppliesUSD={user.totalCollateralUSD}
+            totalBorrowsUSD={user.totalBorrowsUSD}
+            isSupplyPositionsAvailable={!!user.userReservesData.length}
+            isBorrowPositionsAvailable={!!borrowPositions.length}
+            onSelectAllSupplies={() =>
+              user.userReservesData.map((reserve) =>
+                toggleSelectedSupplyPosition(reserve.underlyingAsset)
+              )
+            }
+            onSelectAllBorrows={() =>
+              borrowPositions.map((reserve) =>
+                toggleSelectedBorrowPosition(reserve.underlyingAsset)
+              )
+            }
+            suppliesPositions={
+              <>
+                {loading ? (
+                  <>
+                    <MigrationListItemLoader />
+                    <MigrationListItemLoader />
+                  </>
+                ) : !!user.userReservesData.length ? (
+                  user.userReservesData.map((reserve) => (
+                    <MigrationListItem
+                      key={reserve.underlyingAsset}
+                      checked={selectedSupplyAssets[reserve.underlyingAsset]}
+                      reserveIconSymbol={reserve.reserve.iconSymbol}
+                      reserveName={reserve.reserve.name}
+                      reserveSymbol={reserve.reserve.symbol}
+                      amount={reserve.underlyingBalance}
+                      amountInUSD={reserve.underlyingBalanceUSD}
+                      onCheckboxClick={() => toggleSelectedSupplyPosition(reserve.underlyingAsset)}
+                    />
+                  ))
+                ) : (
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <DashboardContentNoData text={<Trans>Nothing supplied yet</Trans>} />
+                  </Box>
+                )}
+              </>
+            }
+            borrowsPositions={
+              <>
+                {loading ? (
+                  <>
+                    <MigrationListItemLoader />
+                    <MigrationListItemLoader />
+                  </>
+                ) : !!borrowPositions.length ? (
+                  borrowPositions.map((reserve) => (
+                    <MigrationListItem
+                      key={reserve.underlyingAsset}
+                      checked={selectedBorrowAssets[reserve.underlyingAsset]}
+                      reserveIconSymbol={reserve.reserve.iconSymbol}
+                      reserveName={reserve.reserve.name}
+                      reserveSymbol={reserve.reserve.symbol}
+                      amount={reserve.totalBorrows}
+                      amountInUSD={reserve.totalBorrowsUSD}
+                      onCheckboxClick={() => toggleSelectedBorrowPosition(reserve.underlyingAsset)}
+                    />
+                  ))
+                ) : (
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    <DashboardContentNoData text={<Trans>Nothing borrowed yet</Trans>} />
+                  </Box>
+                )}
+              </>
+            }
+          />
+
+          <Divider sx={{ my: 10 }} />
+
+          <MigrationBottomPanel
+            hfV2Current={'1.2'} // TODO: need value
+            hfV2AfterChange={'2'} // TODO: need value
+            hfV3Current={'1.2'} // TODO: need value
+            hfV3AfterChange={'2'} // TODO: need value
+            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/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(amountToBorrow, poolAddress)}
+      handleApproval={() => approval([{ amount: amountToBorrow, underlyingAsset: poolAddress }])}
       requiresApproval={requiresApproval}
       preparingTransactions={loadingTxns}
       sx={sx}

src/components/transactions/MigrateV3/MigrateV3Actions.tsx

@@ -0,0 +1,44 @@
+import { Trans } from '@lingui/macro';
+import { useTransactionHandler } from 'src/helpers/useTransactionHandler';
+import { useRootStore } from 'src/store/root';
+
+import { TxActionsWrapper } from '../TxActionsWrapper';
+
+export type MigrateV3ActionsProps = {
+  isWrongNetwork: boolean;
+  blocked: boolean;
+};
+
+export const MigrateV3Actions = ({ isWrongNetwork, blocked }: MigrateV3ActionsProps) => {
+  const migrateWithPermits = useRootStore((store) => store.migrateWithPermits);
+  const migrateWithoutPermits = useRootStore((store) => store.migrateWithoutPermits);
+  const getApprovePermitsForSelectedAssets = useRootStore(
+    (store) => store.getApprovePermitsForSelectedAssets
+  );
+  const { approval, action, loadingTxns, requiresApproval, mainTxState, approvalTxState } =
+    useTransactionHandler({
+      handleGetTxns: async () => migrateWithoutPermits(),
+      handleGetPermitTxns: async (signatures, deadline) => migrateWithPermits(signatures, deadline),
+      tryPermit: true,
+    });
+
+  const handleApproval = async () => {
+    const approvePermitsForSelectedAssets = await getApprovePermitsForSelectedAssets();
+    approval(approvePermitsForSelectedAssets);
+  };
+
+  return (
+    <TxActionsWrapper
+      requiresApproval={requiresApproval}
+      preparingTransactions={loadingTxns}
+      mainTxState={mainTxState}
+      approvalTxState={approvalTxState}
+      isWrongNetwork={isWrongNetwork}
+      handleAction={action}
+      handleApproval={handleApproval}
+      blocked={blocked}
+      actionText={<Trans>Migrate</Trans>}
+      actionInProgressText={<Trans>Migrating</Trans>}
+    />
+  );
+};

src/components/transactions/MigrateV3/MigrateV3Modal.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BasicModal } from 'src/components/primitives/BasicModal';
+import { ModalType, useModalContext } from 'src/hooks/useModal';
+
+import { MigrateV3ModalContent } from './MigrateV3ModalContent';
+
+export const MigrateV3Modal = () => {
+  const { type, close } = useModalContext();
+
+  return (
+    <BasicModal open={type === ModalType.V3Migration} setOpen={close}>
+      <MigrateV3ModalContent />
+    </BasicModal>
+  );
+};

src/components/transactions/MigrateV3/MigrateV3ModalAssetsList.tsx

@@ -0,0 +1,61 @@
+import { Box, Typography } from '@mui/material';
+import { ReactNode } from 'react';
+import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
+import { Row } from 'src/components/primitives/Row';
+import { TokenIcon } from 'src/components/primitives/TokenIcon';
+
+export type Asset = {
+  underlyingAsset: string;
+  iconSymbol: string;
+  symbol: string;
+  amount: string;
+  amountInUSD: string;
+};
+
+interface MigrateV3ModalAssetsListProps {
+  caption: ReactNode;
+  assets: (Asset | undefined)[];
+}
+
+export const MigrateV3ModalAssetsList = ({ caption, assets }: MigrateV3ModalAssetsListProps) => {
+  return (
+    <Row
+      caption={caption}
+      captionVariant="description"
+      align="flex-start"
+      sx={{ mb: 6, '&:last-of-type': { mb: 0 } }}
+    >
+      {!!assets.length ? (
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+          {assets.map((asset) =>
+            asset ? (
+              <Box
+                key={asset.underlyingAsset}
+                sx={{ mb: 2, display: 'flex', alignItems: 'flex-end', flexDirection: 'column' }}
+              >
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <TokenIcon symbol={asset.symbol} sx={{ mr: 1, fontSize: '16px' }} />
+                  <FormattedNumber value={asset.amount} variant="secondary14" compact />
+                  <Typography ml={1} variant="secondary14">
+                    {asset.symbol}
+                  </Typography>
+                </Box>
+                <FormattedNumber
+                  value={asset.amountInUSD}
+                  variant="helperText"
+                  compact
+                  symbol="USD"
+                  color="text.secondary"
+                />
+              </Box>
+            ) : (
+              <></>
+            )
+          )}
+        </Box>
+      ) : (
+        <Typography>—</Typography>
+      )}
+    </Row>
+  );
+};