feat: supply and borrow position splitted approve flow working

Author: satanworker

pages/v3-migration.page.tsx

@@ -1,37 +1,64 @@
+import { useEffect } from 'react';
 import { MigrateV3Modal } from 'src/components/transactions/MigrateV3/MigrateV3Modal';
 import { StakeModal } from 'src/components/transactions/Stake/StakeModal';
 import { StakeCooldownModal } from 'src/components/transactions/StakeCooldown/StakeCooldownModal';
 import { StakeRewardClaimModal } from 'src/components/transactions/StakeRewardClaim/StakeRewardClaimModal';
 import { UnStakeModal } from 'src/components/transactions/UnStake/UnStakeModal';
+import { useCurrentTimestamp } from 'src/hooks/useCurrentTimestamp';
 import { useModalContext } from 'src/hooks/useModal';
 import { useUserReserves } from 'src/hooks/useUserReserves';
 import { MainLayout } from 'src/layouts/MainLayout';
-import { useRootStore } from 'src/store/root';
+import { usePoolDataV3Subscription, useRootStore } from 'src/store/root';
+import { selectCurrentMarketV2Reserves } from 'src/store/v3MigrationSelectors';
 
 export default function V3Migration() {
   const { user, borrowPositions } = useUserReserves();
   const { openV3Migration } = useModalContext();
 
-  const toggleSelectedSupplyPosition = useRootStore((state) => state.toggleMigrationSelectedAsset);
+  const toggleSelectedSupplyPosition = useRootStore(
+    (state) => state.toggleMigrationSelectedSupplyAsset
+  );
+  const selectedSupplyAssets = useRootStore((state) => state.selectedMigrationSupplyAssets);
+
+  const toggleSelectedBorrowPosition = useRootStore(
+    (state) => state.toggleMigrationSelectedBorrowAsset
+  );
+  const selectedBorrowAssets = useRootStore((state) => state.selectedMigrationBorrowAssets);
   const testMigration = useRootStore((state) => state._testMigration);
-  const selectedAssets = useRootStore((state) => state.selectedMigrationAssets);
+
+  const currentTimestamp = useCurrentTimestamp(5);
+  const currentV2SuppliedPositions = useRootStore((state) =>
+    selectCurrentMarketV2Reserves(state, currentTimestamp)
+  );
+
+  // start refreshing v3 market at the same time
+  usePoolDataV3Subscription();
+
+  // always switch to default v2 in that case for polygon fork
+  useEffect(() => {}, []);
 
   return (
     <div>
       <button onClick={() => testMigration()}>test migration</button>
       <div>supply</div>
       {user.userReservesData.map((reserve) => (
-        <div
+        <button
           key={reserve.underlyingAsset}
           onClick={() => toggleSelectedSupplyPosition(reserve.underlyingAsset)}
-          style={{ color: selectedAssets[reserve.underlyingAsset] ? 'red' : 'black' }}
+          style={{ color: selectedSupplyAssets[reserve.underlyingAsset] ? 'red' : 'black' }}
         >
           {reserve.underlyingAsset}:<b>{reserve.underlyingBalanceUSD}</b>
-        </div>
+        </button>
       ))}
       <div>borrow</div>
       {borrowPositions.map((reserve) => (
-        <div key={reserve.underlyingAsset}>{reserve.variableBorrowsUSD}</div>
+        <button
+          key={reserve.underlyingAsset}
+          onClick={() => toggleSelectedBorrowPosition(reserve.underlyingAsset)}
+          style={{ color: selectedBorrowAssets[reserve.underlyingAsset] ? 'red' : 'black' }}
+        >
+          {reserve.variableBorrowsUSD}
+        </button>
       ))}
       <button onClick={openV3Migration}>Migrate</button>
     </div>

src/components/transactions/MigrateV3/MigrateV3Actions.tsx

@@ -11,7 +11,7 @@ export const MigrateV3Actions = () => {
   const { approval, action } = useTransactionHandler({
     handleGetTxns: async () => migrateWithoutPermits(),
     handleGetPermitTxns: async (signatures, deadline) => migrateWithPermits(signatures, deadline),
-    tryPermit: false,
+    tryPermit: true,
   });
 
   const handleApproval = () => {

src/helpers/useTransactionHandler.tsx

@@ -112,6 +112,7 @@ export const useTransactionHandler = ({
   };
 
   const approval = async (approvals?: Approval[]) => {
+    console.log(approvalTxes, 'approvalTxes');
     if (approvalTxes) {
       console.log(approvalTxes, 'approvalTxes');
       if (usePermit && approvals && approvals?.length > 0) {
@@ -189,7 +190,7 @@ export const useTransactionHandler = ({
               (param) =>
                 new Promise<TransactionResponse>(async (resolve, reject) => {
                   delete param.gasPrice;
-                  console.log;
+                  console.log(params, 'params');
                   processTx({
                     tx: () => sendTx(param),
                     successCallback: (txnResponse: TransactionResponse) => {
@@ -269,8 +270,11 @@ export const useTransactionHandler = ({
     if ((!usePermit || !approvalTxes) && actionTx) {
       try {
         setMainTxState({ ...mainTxState, loading: true });
+        console.log(actionTx, 'actionTx');
         const params = await actionTx.tx();
-        delete params.gasPrice;
+        console.log(params, 'actionTx');
+        // delete params.gasPrice;
+        console.log(params);
         return processTx({
           tx: () => sendTx(params),
           successCallback: (txnResponse: TransactionResponse) => {
@@ -293,6 +297,7 @@ export const useTransactionHandler = ({
         });
       } catch (error) {
         const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);
+        console.log(error, parsedError);
         setTxError(parsedError);
         setMainTxState({
           txHash: undefined,

src/store/poolSelectors.ts

@@ -104,7 +104,7 @@ export const selectUserNonEmtpySummaryAndIncentive = (
 };
 
 export const selectUserBorrowPositions = (state: RootStore, currentTimestamp: number) => {
-  const user = selectUserNonEmtpySummaryAndIncentive(state, currentTimestamp);
+  const user = selectUserSummaryAndIncentives(state, currentTimestamp);
   const borrowedPositions = user.userReservesData.filter(
     (reserve) => reserve.variableBorrows != '0' || reserve.stableBorrows != '0'
   );

src/store/poolSlice.ts

@@ -34,6 +34,8 @@ import { RepayActionProps } from 'src/components/transactions/Repay/RepayActions
 import { SupplyActionProps } from 'src/components/transactions/Supply/SupplyActions';
 import { SwapActionProps } from 'src/components/transactions/Swap/SwapActions';
 import { getRepayCallData, getSwapCallData } from 'src/hooks/useSwap';
+import { MarketDataType, marketsData } from 'src/ui-config/marketsConfig';
+import { availableMarkets, networkConfigs } from 'src/utils/marketsAndNetworksConfig';
 import { optimizedPath } from 'src/utils/utils';
 import { StateCreator } from 'zustand';
 
@@ -54,7 +56,8 @@ export interface PoolSlice {
       }
     >
   >;
-  refreshPoolData: () => Promise<void>;
+  refreshPoolData: (marketData?: MarketDataType) => Promise<void>;
+  refreshPoolV3Data: () => Promise<void>;
   // methods
   useOptimizedPath: () => boolean | undefined;
   mint: (args: Omit<FaucetParamsType, 'userAddress'>) => Promise<EthereumTransactionTypeExtended[]>;
@@ -119,10 +122,11 @@ export const createPoolSlice: StateCreator<
   }
   return {
     data: new Map(),
-    refreshPoolData: async () => {
+    refreshPoolData: async (marketData?: MarketDataType) => {
       const account = get().account;
-      const currentMarketData = get().currentMarketData;
       const currentChainId = get().currentChainId;
+      const currentMarketData = marketData || get().currentMarketData;
+      console.log(get().currentMarketData, 'currentMarketData');
       const poolDataProviderContract = new UiPoolDataProvider({
         uiPoolDataProviderAddress: currentMarketData.addresses.UI_POOL_DATA_PROVIDER,
         provider: get().jsonRpcProvider(),
@@ -193,6 +197,12 @@ export const createPoolSlice: StateCreator<
         console.log('error fetching pool data', e);
       }
     },
+    refreshPoolV3Data: async () => {
+      // how to determine which v2 markets to pool? for now always fetch polygon fork
+      const v3MarketData = marketsData[availableMarkets[11]];
+      console.log(marketsData);
+      // get().refreshPoolData(availableMarkets);
+    },
     mint: async (args) => {
       if (!get().currentMarketData.addresses.FAUCET)
         throw Error('currently selected market does not have a faucet attached');

src/store/root.ts

@@ -67,6 +67,10 @@ export const usePoolDataSubscription = createSingletonSubscriber(() => {
   return useRootStore.getState().refreshPoolData();
 }, 60000);
 
+export const usePoolDataV3Subscription = createSingletonSubscriber(() => {
+  return useRootStore.getState().refreshPoolV3Data();
+}, 60000);
+
 export const useIncentiveDataSubscription = createSingletonSubscriber(() => {
   return useRootStore.getState().refreshIncentiveData();
 }, 60000);

src/store/v3MigrationSelectors.ts

@@ -4,7 +4,15 @@ import { RootStore } from './root';
 export const selectedUserReservesForMigration = (store: RootStore, timestamp: number) => {
   const user = selectUserNonEmtpySummaryAndIncentive(store, timestamp);
   const selectedUserReserves = user.userReservesData.filter(
-    (userReserve) => store.selectedMigrationAssets[userReserve.underlyingAsset]
+    (userReserve) => store.selectedMigrationSupplyAssets[userReserve.underlyingAsset]
   );
   return selectedUserReserves;
 };
+
+export const selectCurrentMarketV2Reserves = (store: RootStore, timestamp: number) => {
+  const currentChainId = store.currentChainId;
+  return store.data.get(currentChainId);
+};
+// export const selectUserApprovalsReservesForMigration = (store: RootStore, timestamp: number) => {
+
+// };

src/store/v3MigrationSlice.ts

@@ -17,7 +17,8 @@ import { selectedUserReservesForMigration } from './v3MigrationSelectors';
 
 export type V3MigrationSlice = {
   //STATE
-  selectedMigrationAssets: Record<string, boolean>;
+  selectedMigrationSupplyAssets: Record<string, boolean>;
+  selectedMigrationBorrowAssets: Record<string, boolean>;
   migrationServiceInstances: Record<string, V3MigrationHelperService>;
   timestamp: number;
   // ACTIONS
@@ -27,14 +28,15 @@ export type V3MigrationSlice = {
     }
   ) => Promise<string>;
   getApprovePermitsForSelectedAssets: () => Approval[];
-  toggleMigrationSelectedAsset: (assetName: string) => void;
+  toggleMigrationSelectedSupplyAsset: (assetName: string) => void;
+  toggleMigrationSelectedBorrowAsset: (assetName: string) => void;
   getMigratorAddress: () => string;
   getMigrationServiceInstance: () => V3MigrationHelperService;
   migrateWithPermits: (
     signature: SignatureLike[],
     deadline: BigNumberish
   ) => EthereumTransactionTypeExtended[];
-  migrateWithoutPermits: () => EthereumTransactionTypeExtended[];
+  migrateWithoutPermits: () => Promise<EthereumTransactionTypeExtended[]>;
   _testMigration: () => void;
   // migrateSelectedPositions: () => void;
 };
@@ -46,7 +48,8 @@ export const createV3MigrationSlice: StateCreator<
   V3MigrationSlice
 > = (set, get) => {
   return {
-    selectedMigrationAssets: {},
+    selectedMigrationSupplyAssets: {},
+    selectedMigrationBorrowAssets: {},
     migrationServiceInstances: {},
     timestamp: 0,
     generatePermitPayloadForMigrationAsset: async ({ amount, underlyingAsset, deadline }) => {
@@ -96,28 +99,41 @@ export const createV3MigrationSlice: StateCreator<
       };
       return JSON.stringify(typeData);
     },
-    toggleMigrationSelectedAsset: (assetName: string) => {
+    toggleMigrationSelectedSupplyAsset: (assetName: string) => {
       set((state) =>
         produce(state, (draft) => {
-          if (draft.selectedMigrationAssets[assetName]) {
-            delete draft.selectedMigrationAssets[assetName];
+          if (draft.selectedMigrationSupplyAssets[assetName]) {
+            delete draft.selectedMigrationSupplyAssets[assetName];
           } else {
-            draft.selectedMigrationAssets[assetName] = true;
+            draft.selectedMigrationSupplyAssets[assetName] = true;
+          }
+        })
+      );
+    },
+    toggleMigrationSelectedBorrowAsset: (assetName: string) => {
+      set((state) =>
+        produce(state, (draft) => {
+          if (draft.selectedMigrationBorrowAssets[assetName]) {
+            delete draft.selectedMigrationBorrowAssets[assetName];
+          } else {
+            draft.selectedMigrationBorrowAssets[assetName] = true;
           }
         })
       );
     },
     getApprovePermitsForSelectedAssets: () => {
       const timestamp = dayjs().unix();
       set({ timestamp });
-      return selectedUserReservesForMigration(get(), timestamp).map(({ reserve }): Approval => {
-        return {
-          // TODO: should we allow spending of exact ammount of the reserver?
-          amount: reserve.totalLiquidity,
-          underlyingAsset: reserve.aTokenAddress,
-          permitType: 'MIGRATOR',
-        };
-      });
+      return selectedUserReservesForMigration(get(), timestamp).map(
+        ({ reserve, underlyingBalance }): Approval => {
+          return {
+            // TODO: should we allow spending of exact ammount of the reserver?
+            amount: underlyingBalance,
+            underlyingAsset: reserve.aTokenAddress,
+            permitType: 'MIGRATOR',
+          };
+        }
+      );
     },
     migrateWithoutPermits: () => {
       const timestamp = dayjs().unix();
@@ -126,17 +142,18 @@ export const createV3MigrationSlice: StateCreator<
         aToken: string;
         deadline: number;
         amount: string;
-      }[] = selectedUserReservesForMigration(get(), timestamp).map(({ reserve }) => {
-        const deadline = Math.floor(Date.now() / 1000 + 3600);
-        return {
-          amount: reserve.totalLiquidity,
-          aToken: reserve.aTokenAddress,
-          // TODO: fow how long to approve?
-          deadline,
-        };
-      });
+      }[] = selectedUserReservesForMigration(get(), timestamp).map(
+        ({ reserve, underlyingBalance }) => {
+          const deadline = Math.floor(Date.now() / 1000 + 3600);
+          return {
+            amount: underlyingBalance,
+            aToken: reserve.aTokenAddress,
+            // TODO: fow how long to approve?
+            deadline,
+          };
+        }
+      );
       const user = get().account;
-      console.log(assets, user);
       return get().getMigrationServiceInstance().migrateNoBorrow({ assets, user });
     },
     migrateWithPermits: (signatures: SignatureLike[], deadline: BigNumberish) => {
@@ -149,13 +166,14 @@ export const createV3MigrationSlice: StateCreator<
       }));
       // branch out into flashloan or migrate no borrow
       // move that to separate instance and save cache the Migrator instance
+      console.log(permits, 'permits');
       const migratorHelperInstance = get().getMigrationServiceInstance();
       const user = get().account;
       const assets = permits.map((permit) => permit.aToken);
-      console.log('migrateNoBorrowWith permits');
       return migratorHelperInstance.migrateNoBorrowWithPermits({
         user,
         assets,
+        deadline,
         signedPermits: permits,
       });
     },