swaps

.eslintignore

@@ -20,3 +20,5 @@ src/locales/
 *.md
 *.log
 *.lock
+
+src/components/transactions/Swap/backup/**/*.*

.npmrc

@@ -0,0 +1,4 @@
+@cowprotocol:registry=https://npm.pkg.github.com
+always-auth=true
+# registry=https://registry.npmjs.org/
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

package.json

@@ -36,8 +36,10 @@
     "@aave/react": "0.6.1",
     "@amplitude/analytics-browser": "^2.13.0",
     "@bgd-labs/aave-address-book": "^4.31.0",
-    "@cowprotocol/app-data": "^3.1.0",
-    "@cowprotocol/cow-sdk": "6.3.3",
+    "@cowprotocol/sdk-app-data": "4.1.4-pr-624-30de7ad4.0",
+    "@cowprotocol/cow-sdk": "7.0.11-pr-624-30de7ad4.0",
+    "@cowprotocol/sdk-flash-loans": "1.1.0-pr-624-30de7ad4.0",
+    "@cowprotocol/sdk-viem-adapter": "0.1.3-pr-624-30de7ad4.0",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",
     "@emotion/server": "latest",

pages/_app.page.tsx

@@ -16,7 +16,7 @@ import { AddressBlocked } from 'src/components/AddressBlocked';
 import { Meta } from 'src/components/Meta';
 import { TransactionEventHandler } from 'src/components/TransactionEventHandler';
 import { GasStationProvider } from 'src/components/transactions/GasStation/GasStationProvider';
-import { CowOrderToast } from 'src/components/transactions/Switch/cowprotocol/CowOrderToast';
+import { CowOrderToast } from 'src/components/transactions/Swap/modals/result/CowOrderToast';
 import { AppDataProvider } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { CowOrderToastProvider } from 'src/hooks/useCowOrderToast';
 import { ModalContextProvider } from 'src/hooks/useModal';
@@ -31,16 +31,22 @@ import createEmotionCache from '../src/createEmotionCache';
 import { AppGlobalStyles } from '../src/layouts/AppGlobalStyles';
 import { LanguageProvider } from '../src/libs/LanguageProvider';
 
-const SwitchModal = dynamic(() =>
-  import('src/components/transactions/Switch/SwitchModal').then((module) => module.SwitchModal)
+const SwapModal = dynamic(() =>
+  import('src/components/transactions/Swap/modals/SwapModal').then((module) => module.SwapModal)
 );
 
 const CollateralSwapModal = dynamic(() =>
-  import('src/components/transactions/Switch/CollateralSwap/CollateralSwapModal').then(
+  import('src/components/transactions/Swap/modals/CollateralSwapModal').then(
     (module) => module.CollateralSwapModal
   )
 );
 
+const DebtSwapModal = dynamic(() =>
+  import('src/components/transactions/Swap/modals/DebtSwapModal').then(
+    (module) => module.DebtSwapModal
+  )
+);
+
 const BridgeModal = dynamic(() =>
   import('src/components/transactions/Bridge/BridgeModal').then((module) => module.BridgeModal)
 );
@@ -53,16 +59,6 @@ const ClaimRewardsModal = dynamic(() =>
     (module) => module.ClaimRewardsModal
   )
 );
-const CollateralChangeModal = dynamic(() =>
-  import('src/components/transactions/CollateralChange/CollateralChangeModal').then(
-    (module) => module.CollateralChangeModal
-  )
-);
-const DebtSwitchModal = dynamic(() =>
-  import('src/components/transactions/DebtSwitch/DebtSwitchModal').then(
-    (module) => module.DebtSwitchModal
-  )
-);
 const EmodeModal = dynamic(() =>
   import('src/components/transactions/Emode/EmodeModal').then((module) => module.EmodeModal)
 );
@@ -170,19 +166,20 @@ export default function MyApp(props: MyAppProps) {
                                   <WithdrawModal />
                                   <BorrowModal />
                                   <RepayModal />
-                                  <CollateralChangeModal />
-                                  <DebtSwitchModal />
                                   <ClaimRewardsModal />
                                   <EmodeModal />
                                   <FaucetModal />
                                   <TransactionEventHandler />
-                                  <SwitchModal />
-                                  <CollateralSwapModal />
                                   <StakingMigrateModal />
                                   <BridgeModal />
                                   <ReadOnlyModal />
-                                  <CowOrderToast />
+
+                                  {/* Swap Modals */}
+                                  <SwapModal />
+                                  <CollateralSwapModal />
+                                  <DebtSwapModal />
                                   <CancelCowOrderModal />
+                                  <CowOrderToast />
                                 </GasStationProvider>
                               </AppDataProvider>
                             </SharedDependenciesProvider>

src/components/infoTooltips/EstimatedCostsForLimitSwap.tsx

@@ -0,0 +1,15 @@
+import { Trans } from '@lingui/macro';
+
+import { TextWithTooltip } from '../TextWithTooltip';
+
+export const EstimatedCostsForLimitSwapTooltip = () => {
+  return (
+    <TextWithTooltip variant="caption" text={<Trans>Estimated Costs & Fees</Trans>}>
+      <Trans>
+        These are the estimated costs associated with your limit swap, including costs and fees.
+        Consider these costs when setting your order amounts to help optimize execution and maximize
+        your chances of filling the order.
+      </Trans>
+    </TextWithTooltip>
+  );
+};

src/components/infoTooltips/ExecutionFeeTooltip.tsx

@@ -0,0 +1,11 @@
+import { Trans } from '@lingui/macro';
+
+import { TextWithTooltip } from '../TextWithTooltip';
+
+export const ExecutionFeeTooltip = () => {
+  return (
+    <TextWithTooltip variant="caption" text={<Trans>Execution fee</Trans>}>
+      <Trans>This is the fee of executing position changes, set by governance.</Trans>
+    </TextWithTooltip>
+  );
+};

src/components/transactions/CollateralChange/CollateralChangeModal.tsx

@@ -11,8 +11,9 @@ export const CollateralChangeModal = () => {
   const { type, close, args } = useModalContext() as ModalContextType<{
     underlyingAsset: string;
   }>;
+  return null;
   return (
-    <BasicModal open={type === ModalType.CollateralChange} setOpen={close}>
+    <BasicModal open={type === ModalType.CollateralSwap} setOpen={close}>
       <ModalWrapper title={<Trans>Review tx</Trans>} underlyingAsset={args.underlyingAsset}>
         {(params) => (
           <UserAuthenticated>

src/components/transactions/DebtSwitch/DebtSwitchModal.tsx

@@ -11,8 +11,9 @@ export const DebtSwitchModal = () => {
   const { type, close, args } = useModalContext() as ModalContextType<{
     underlyingAsset: string;
   }>;
+  return null;
   return (
-    <BasicModal open={type === ModalType.DebtSwitch} setOpen={close}>
+    <BasicModal open={type === ModalType.DebtSwap} setOpen={close}>
       <ModalWrapper
         title={<Trans>Swap borrow position</Trans>}
         underlyingAsset={args.underlyingAsset}

src/components/transactions/FlowCommons/BaseSuccess.tsx

@@ -95,7 +95,7 @@ export const BaseSuccessView = ({
           onClick={handleClose}
           variant="contained"
           size="large"
-          sx={{ minHeight: '50px', mb: '30px' }}
+          sx={{ minHeight: '50px', mb: '0px' }}
           data-cy="closeButton"
         >
           <Trans>Ok, Close</Trans>

src/components/transactions/Repay/CollateralRepayActions.tsx

@@ -64,6 +64,26 @@ export const CollateralRepayActions = ({
       protocolAction: ProtocolAction.repayCollateral,
       handleGetTxns: async (signature, deadline) => {
         const route = await buildTxFn();
+
+        console.log('paraswapRepayWithCollateral', {
+          repayAllDebt,
+          repayAmount,
+          rateMode,
+          repayWithAmount,
+
+          fromAssetData,
+          poolReserve,
+          symbol,
+          isWrongNetwork,
+          useFlashLoan,
+          blocked,
+          swapCallData: route.swapCallData,
+          augustus: route.augustus,
+          signature,
+          deadline,
+          signedAmount: calculateSignedAmount(repayWithAmount, fromAssetData.decimals),
+        });
+
         return paraswapRepayWithCollateral({
           repayAllDebt,
           repayAmount,
@@ -83,6 +103,25 @@ export const CollateralRepayActions = ({
         });
       },
       handleGetApprovalTxns: async () => {
+        console.log('paraswapRepayWithCollateral', {
+          repayAllDebt,
+          repayAmount,
+          rateMode,
+          repayWithAmount,
+
+          fromAssetData,
+          poolReserve,
+          symbol,
+          isWrongNetwork,
+          useFlashLoan,
+          blocked,
+          swapCallData: '0x',
+          augustus: API_ETH_MOCK_ADDRESS,
+          signature: '0x',
+          deadline: '0',
+          signedAmount: calculateSignedAmount(repayWithAmount, fromAssetData.decimals),
+        });
+
         return paraswapRepayWithCollateral({
           repayAllDebt,
           repayAmount,

src/components/transactions/Repay/CollateralRepayModalContent.tsx

@@ -257,6 +257,13 @@ export function CollateralRepayModalContent({
       />
     );
 
+  console.log('poolReserve', poolReserve.symbol, poolReserve.underlyingAsset);
+  console.log(
+    'collateralReserveData',
+    collateralReserveData.symbol,
+    collateralReserveData.underlyingAsset
+  );
+
   return (
     <>
       <AssetInput

src/components/transactions/Repay/RepayModal.tsx

@@ -9,7 +9,7 @@ import { isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig';
 
 import { BasicModal } from '../../primitives/BasicModal';
 import { ModalWrapper } from '../FlowCommons/ModalWrapper';
-import { CollateralRepayModalContent } from './CollateralRepayModalContent';
+import { RepayWithCollateralModalContent } from '../Swap/modals/request/RepayWithCollateralModalContent';
 import { RepayModalContent } from './RepayModalContent';
 import { RepayType, RepayTypeSelector } from './RepayTypeSelector';
 
@@ -53,10 +53,10 @@ export const RepayModal = () => {
                   )}
                   {repayType === RepayType.BALANCE && <RepayModalContent {...params} user={user} />}
                   {repayType === RepayType.COLLATERAL && (
-                    <CollateralRepayModalContent
+                    <RepayWithCollateralModalContent
                       {...params}
                       debtType={args.currentRateMode}
-                      user={user}
+                      underlyingAsset={args.underlyingAsset}
                     />
                   )}
                 </>

src/components/transactions/Swap/actions/ActionsBlocked.tsx

@@ -0,0 +1,26 @@
+import { Trans } from '@lingui/macro';
+import { Button } from '@mui/material';
+
+import { SwapState } from '../types';
+
+type blockType = 'errors' | 'generic';
+const stateToBlockType = (state: SwapState): blockType => {
+  if (state.error) return 'errors';
+  return 'generic';
+};
+
+export const ActionsBlocked: React.FC<{ state: SwapState }> = ({ state }) => {
+  const blockType = stateToBlockType(state);
+
+  return (
+    <Button
+      variant="contained"
+      disabled={true}
+      size="large"
+      sx={{ minHeight: '44px', marginTop: '20px', width: '100%' }}
+      data-cy="actionButton"
+    >
+      {blockType === 'errors' ? <Trans>Check errors</Trans> : <Trans>Swap</Trans>}
+    </Button>
+  );
+};

src/components/transactions/Swap/actions/ActionsSkeleton.tsx

@@ -0,0 +1,34 @@
+import { Trans } from '@lingui/macro';
+import { Button, CircularProgress } from '@mui/material';
+
+import { SwapState } from '../types';
+
+export type LoadingType = 'quote' | 'actions' | 'other';
+const stateToLoadingType = (state: SwapState): LoadingType => {
+  if (state.ratesLoading) return 'quote';
+  if (state.actionsLoading) return 'actions';
+  return 'other';
+};
+
+export const ActionsLoading: React.FC<{ state: SwapState }> = ({ state }) => {
+  const loadingType = stateToLoadingType(state);
+
+  return (
+    <Button
+      variant="contained"
+      disabled={true}
+      size="large"
+      sx={{ minHeight: '44px', marginTop: '20px', width: '100%' }}
+      data-cy="actionButton"
+    >
+      <CircularProgress color="inherit" size="16px" sx={{ mr: 2 }} />
+      {loadingType === 'quote' ? (
+        <Trans>Loading quote...</Trans>
+      ) : loadingType === 'actions' ? (
+        <Trans>Waiting for actions...</Trans>
+      ) : (
+        <Trans>Loading...</Trans>
+      )}
+    </Button>
+  );
+};

src/components/transactions/Swap/actions/CollateralSwap/CollateralSwapActions.tsx

@@ -0,0 +1,65 @@
+import { Dispatch } from 'react';
+
+import { TrackAnalyticsHandlers } from '../../analytics/useTrackAnalytics';
+import { ProtocolSwapParams, ProtocolSwapState, SwapProvider, SwapState } from '../../types';
+import { SwapActionsViaCoW } from '../SwapActions/SwapActionsViaCoW';
+import { SwapActionsViaParaswap } from '../SwapActions/SwapActionsViaParaswap';
+import { CollateralSwapActionsViaCowAdapters } from './CollateralSwapActionsViaCoWAdapters';
+import { CollateralSwapActionsViaParaswapAdapters } from './CollateralSwapActionsViaParaswapAdapters';
+
+export const CollateralSwapActions = ({
+  params,
+  state,
+  setState,
+  trackingHandlers,
+}: {
+  params: ProtocolSwapParams;
+  state: ProtocolSwapState;
+  setState: Dispatch<Partial<SwapState>>;
+  trackingHandlers: TrackAnalyticsHandlers;
+}) => {
+  switch (state.provider) {
+    case SwapProvider.COW_PROTOCOL:
+      if (state.useFlashloan) {
+        return (
+          <CollateralSwapActionsViaCowAdapters
+            params={params}
+            state={state}
+            setState={setState}
+            trackingHandlers={trackingHandlers}
+          />
+        );
+      } else {
+        // Essentially traditional aTokens swap
+        return (
+          <SwapActionsViaCoW
+            params={params}
+            state={state}
+            setState={setState}
+            trackingHandlers={trackingHandlers}
+          />
+        );
+      }
+    case SwapProvider.PARASWAP:
+      if (state.useFlashloan) {
+        return (
+          <CollateralSwapActionsViaParaswapAdapters
+            params={params}
+            state={state}
+            setState={setState}
+            trackingHandlers={trackingHandlers}
+          />
+        );
+      } else {
+        // Essentially traditional aTokens swap
+        return (
+          <SwapActionsViaParaswap
+            params={params}
+            state={state}
+            setState={setState}
+            trackingHandlers={trackingHandlers}
+          />
+        );
+      }
+  }
+};