components structure refactor

Author: mgrabina

.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.3-pr-614-5b1d24e9.0",
+    "@cowprotocol/cow-sdk": "7.0.10-pr-614-5b1d24e9.0",
+    "@cowprotocol/sdk-flash-loans": "0.0.1-pr-614-5b1d24e9.0",
+    "@cowprotocol/sdk-viem-adapter": "0.1.2-pr-614-5b1d24e9.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/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/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>
+  );
+};