All Swaps Modals Refactor + CoW Protocol Adapters support

.eslintignore

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

.npmrc

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

package.json

@@ -35,9 +35,11 @@
     "@aave/math-utils": "1.36.1",
     "@aave/react": "0.6.1",
     "@amplitude/analytics-browser": "^2.13.0",
+    "@cowprotocol/sdk-app-data": "4.1.6",
+    "@cowprotocol/cow-sdk": "7.1.1",
+    "@cowprotocol/sdk-flash-loans": "1.3.0",
+    "@cowprotocol/sdk-viem-adapter": "0.2.0",
     "@bgd-labs/aave-address-book": "^4.36.0",
-    "@cowprotocol/app-data": "^3.1.0",
-    "@cowprotocol/cow-sdk": "6.3.3",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",
     "@emotion/server": "latest",
@@ -157,4 +159,4 @@
     "budgetPercentIncreaseRed": 20,
     "showDetails": true
   }
-}
+}

pages/_app.page.tsx

@@ -16,10 +16,10 @@ 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';
+import { SwapOrdersTrackingProvider } from 'src/hooks/useSwapOrdersTracking';
 import { Web3ContextProvider } from 'src/libs/web3-data-provider/Web3Provider';
 import { useRootStore } from 'src/store/root';
 import { SharedDependenciesProvider } from 'src/ui-config/SharedDependenciesProvider';
@@ -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)
 );
@@ -160,7 +156,7 @@ export default function MyApp(props: MyAppProps) {
                   <Web3ContextProvider>
                     <AppGlobalStyles>
                       <AddressBlocked>
-                        <CowOrderToastProvider>
+                        <SwapOrdersTrackingProvider>
                           <ModalContextProvider>
                             <SharedDependenciesProvider>
                               <AppDataProvider>
@@ -170,24 +166,25 @@ 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>
                           </ModalContextProvider>
-                        </CowOrderToastProvider>
+                        </SwapOrdersTrackingProvider>
                       </AddressBlocked>
                     </AppGlobalStyles>
                   </Web3ContextProvider>

src/components/MarketSwitcher.tsx

@@ -78,7 +78,13 @@ type MarketLogoProps = {
 export const MarketLogo = ({ size, logo, testChainName, sx }: MarketLogoProps) => {
   return (
     <Box sx={{ mr: 2, width: size, height: size, position: 'relative', ...sx }}>
-      <img src={logo} alt="" width="100%" height="100%" />
+      <img
+        src={logo}
+        alt=""
+        width="100%"
+        height="100%"
+        style={{ display: 'block', objectFit: 'contain', objectPosition: 'center center' }}
+      />
 
       {testChainName && (
         <Tooltip title={testChainName} arrow>

src/components/StyledToggleButton.tsx

@@ -37,18 +37,31 @@ const CustomTxModalToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ the
   color: theme.palette.text.muted,
   borderRadius: '4px',
 
+  // Selected (active) state
   '&.Mui-selected, &.Mui-selected:hover': {
     border: `1px solid ${theme.palette.other.standardInputLine}`,
     backgroundColor: '#FFFFFF',
     borderRadius: '4px !important',
-  },
-
-  '&.Mui-selected, &.Mui-disabled': {
+    color: theme.palette.background.header,
     zIndex: 100,
     height: '100%',
     display: 'flex',
     justifyContent: 'center',
+  },
+
+  // Disabled but NOT selected: keep readable text with slight fade
+  '&.Mui-disabled:not(.Mui-selected)': {
+    color: theme.palette.text.secondary,
+    opacity: 0.55,
+  },
+
+  // Disabled + selected: preserve the selected look
+  '&.Mui-disabled.Mui-selected': {
+    border: `1px solid ${theme.palette.other.standardInputLine}`,
+    backgroundColor: '#FFFFFF',
+    borderRadius: '4px !important',
     color: theme.palette.background.header,
+    opacity: 1,
   },
 })) as typeof ToggleButton;
 

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 for executing position changes, set by governance.</Trans>
+    </TextWithTooltip>
+  );
+};

src/components/transactions/CancelCowOrder/CancelCowOrderActions.tsx

@@ -1,17 +1,19 @@
-import { OrderBookApi, OrderSigningUtils } from '@cowprotocol/cow-sdk';
+import { AdapterContext, OrderBookApi, OrderSigningUtils } from '@cowprotocol/cow-sdk';
 import { Trans } from '@lingui/macro';
 import { useQueryClient } from '@tanstack/react-query';
 import { useIsWrongNetwork } from 'src/hooks/useIsWrongNetwork';
 import { useModalContext } from 'src/hooks/useModal';
-import { getEthersProvider } from 'src/libs/web3-data-provider/adapters/EthersAdapter';
-import { ActionFields, TransactionHistoryItem } from 'src/modules/history/types';
+import { ActionName, SwapActionFields, TransactionHistoryItem } from 'src/modules/history/types';
 import { getErrorTextFromError, TxAction } from 'src/ui-config/errorMapping';
 import { wagmiConfig } from 'src/ui-config/wagmiConfig';
+import { getWalletClient } from 'wagmi/actions';
 
+import { COW_ENV, getCowAdapter } from '../Swap/helpers/cow';
 import { TxActionsWrapper } from '../TxActionsWrapper';
 
+// TODO: check with cow if we can cancel adapters orders
 interface CancelCowOrderActionsProps {
-  cowOrder: TransactionHistoryItem<ActionFields['CowSwap']>;
+  cowOrder: TransactionHistoryItem<SwapActionFields[ActionName.Swap]>;
   blocked: boolean;
 }
 
@@ -23,13 +25,19 @@ export const CancelCowOrderActions = ({ cowOrder, blocked }: CancelCowOrderActio
   const action = async () => {
     try {
       setMainTxState({ ...mainTxState, loading: true });
-      const provider = getEthersProvider(wagmiConfig, { chainId: cowOrder.chainId });
-      const signer = (await provider).getSigner();
-      const orderBookApi = new OrderBookApi({ chainId: cowOrder.chainId });
+
+      const adapter = await getCowAdapter(cowOrder.chainId);
+      AdapterContext.getInstance().setAdapter(adapter);
+      const orderBookApi = new OrderBookApi({ chainId: cowOrder.chainId, env: COW_ENV });
+      const walletClient = await getWalletClient(wagmiConfig, { chainId: cowOrder.chainId });
+
+      if (!walletClient || !walletClient.account) {
+        throw new Error('Wallet not connected for signing');
+      }
       const { signature, signingScheme } = await OrderSigningUtils.signOrderCancellation(
         cowOrder.id,
         cowOrder.chainId,
-        signer
+        walletClient
       );
       await orderBookApi.sendSignedOrderCancellations({
         orderUids: [cowOrder.id],

src/components/transactions/CancelCowOrder/CancelCowOrderModal.tsx

@@ -1,13 +1,13 @@
 import { BasicModal } from 'src/components/primitives/BasicModal';
 import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';
-import { ActionFields, TransactionHistoryItem } from 'src/modules/history/types';
+import { ActionName, SwapActionFields, TransactionHistoryItem } from 'src/modules/history/types';
 
 import { TxModalTitle } from '../FlowCommons/TxModalTitle';
 import { CancelCowOrderModalContent } from './CancelCowOrderModalContent';
 
 export const CancelCowOrderModal = () => {
   const { type, close, args } = useModalContext() as ModalContextType<{
-    cowOrder: TransactionHistoryItem<ActionFields['CowSwap']>;
+    cowOrder: TransactionHistoryItem<SwapActionFields[ActionName.Swap]>;
   }>;
   return (
     <BasicModal open={type === ModalType.CancelCowOrder} setOpen={close}>

src/components/transactions/CancelCowOrder/CancelCowOrderModalContent.tsx

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material';
 import { useIsWrongNetwork } from 'src/hooks/useIsWrongNetwork';
 import { useModalContext } from 'src/hooks/useModal';
 import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
-import { ActionFields, TransactionHistoryItem } from 'src/modules/history/types';
+import { ActionName, SwapActionFields, TransactionHistoryItem } from 'src/modules/history/types';
 import { getNetworkConfig } from 'src/utils/marketsAndNetworksConfig';
 import { formatUnits } from 'viem';
 
@@ -14,7 +14,7 @@ import { ChangeNetworkWarning } from '../Warnings/ChangeNetworkWarning';
 import { CancelCowOrderActions } from './CancelCowOrderActions';
 
 interface CancelCowOrderModalContentProps {
-  cowOrder: TransactionHistoryItem<ActionFields['CowSwap']>;
+  cowOrder: TransactionHistoryItem<SwapActionFields[ActionName.Swap]>;
 }
 
 export const CancelCowOrderModalContent = ({ cowOrder }: CancelCowOrderModalContentProps) => {
@@ -39,6 +39,15 @@ export const CancelCowOrderModalContent = ({ cowOrder }: CancelCowOrderModalCont
     <>
       {showNetworkWarning && <ChangeNetworkWarning networkName={name} chainId={cowOrder.chainId} />}
       <TxModalDetails showGasStation={false}>
+        <Typography variant="h2">
+          <Trans>Cancel order</Trans>
+        </Typography>
+        <Typography sx={{ mt: 2, mb: 4 }} variant="description" color="text.secondary">
+          <Trans>
+            This is an off-chain operation. Keep in mind that a solver may already have filled your
+            order.
+          </Trans>
+        </Typography>
         <DetailsTextLine
           description="Order ID"
           text={cowOrder.id}