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.5.2",
+    "@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/CancelAdapterOrderActions.tsx

@@ -0,0 +1,119 @@
+import { OrderStatus, SupportedChainId } from '@cowprotocol/cow-sdk';
+import { Trans } from '@lingui/macro';
+import { useQueryClient } from '@tanstack/react-query';
+import { Interface } from 'ethers/lib/utils';
+import { useIsWrongNetwork } from 'src/hooks/useIsWrongNetwork';
+import { useModalContext } from 'src/hooks/useModal';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
+import {
+  ActionName,
+  CowSwapSubset,
+  isCowSwapSubset,
+  SwapActionFields,
+  TransactionHistoryItem,
+} from 'src/modules/history/types';
+import { useRootStore } from 'src/store/root';
+import { getErrorTextFromError, TxAction } from 'src/ui-config/errorMapping';
+import { updateCowOrderStatus } from 'src/utils/swapAdapterHistory';
+
+import { ADAPTER_FACTORY } from '../Swap/constants/cow.constants';
+import { TxActionsWrapper } from '../TxActionsWrapper';
+
+interface CancelAdapterOrderActionsProps {
+  cowOrder: TransactionHistoryItem<
+    | SwapActionFields[ActionName.DebtSwap]
+    | SwapActionFields[ActionName.RepayWithCollateral]
+    | SwapActionFields[ActionName.CollateralSwap]
+  >;
+  blocked: boolean;
+}
+
+// ABI for cancelInstance function
+const ADAPTER_ABI = ['function cancelInstance(address instance) external'];
+
+export const CancelAdapterOrderActions = ({
+  cowOrder,
+  blocked,
+}: CancelAdapterOrderActionsProps) => {
+  const { isWrongNetwork } = useIsWrongNetwork(cowOrder.chainId);
+  const { mainTxState, loadingTxns, setMainTxState, setTxError } = useModalContext();
+  const { sendTx } = useWeb3Context();
+  const queryClient = useQueryClient();
+  const account = useRootStore((state) => state.account);
+
+  const action = async () => {
+    try {
+      setMainTxState({ ...mainTxState, loading: true });
+
+      // Type guard to ensure we have a CowSwapSubset with adapter fields
+      if (!isCowSwapSubset(cowOrder)) {
+        throw new Error('Order is not a CoW swap order');
+      }
+
+      // At this point TypeScript knows cowOrder is CowSwapSubset, but we need to assert it has adapter fields
+      const cowSwapOrder = cowOrder as CowSwapSubset;
+
+      if (!cowSwapOrder.adapterInstanceAddress) {
+        throw new Error('Adapter instance address not found');
+      }
+
+      const adapterInterface = new Interface(ADAPTER_ABI);
+
+      const factoryAddress = ADAPTER_FACTORY[cowOrder.chainId as SupportedChainId];
+
+      if (!factoryAddress) {
+        throw new Error('Factory address not found for this chain');
+      }
+
+      const data = adapterInterface.encodeFunctionData('cancelInstance', [
+        cowSwapOrder.adapterInstanceAddress,
+      ]);
+
+      const txResponse = await sendTx({
+        to: factoryAddress,
+        data,
+        chainId: cowOrder.chainId,
+      });
+
+      await txResponse.wait(1);
+
+      // Update order status to cancelled in local storage
+      if (account && cowSwapOrder.orderId) {
+        updateCowOrderStatus(
+          cowOrder.chainId,
+          account,
+          cowSwapOrder.orderId,
+          OrderStatus.CANCELLED
+        );
+      }
+
+      queryClient.invalidateQueries({ queryKey: 'transactionHistory' });
+      setMainTxState({
+        ...mainTxState,
+        loading: false,
+        success: true,
+        txHash: txResponse.hash,
+      });
+    } catch (error) {
+      const parsedError = getErrorTextFromError(error, TxAction.MAIN_ACTION, false);
+      setTxError(parsedError);
+      setMainTxState({
+        txHash: undefined,
+        loading: false,
+      });
+    }
+  };
+
+  return (
+    <TxActionsWrapper
+      isWrongNetwork={isWrongNetwork}
+      handleAction={action}
+      actionText={<Trans>Cancel order</Trans>}
+      actionInProgressText={<Trans>Cancelling order...</Trans>}
+      blocked={blocked}
+      mainTxState={mainTxState}
+      requiresApproval={false}
+      preparingTransactions={loadingTxns}
+    />
+  );
+};

src/components/transactions/CancelCowOrder/CancelCowOrderActions.tsx

@@ -1,41 +1,58 @@
-import { OrderBookApi, OrderSigningUtils } from '@cowprotocol/cow-sdk';
+import { AdapterContext, OrderBookApi, OrderSigningUtils, OrderStatus } 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 { useRootStore } from 'src/store/root';
 import { getErrorTextFromError, TxAction } from 'src/ui-config/errorMapping';
 import { wagmiConfig } from 'src/ui-config/wagmiConfig';
+import { updateCowOrderStatus } from 'src/utils/swapAdapterHistory';
+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;
 }
 
 export const CancelCowOrderActions = ({ cowOrder, blocked }: CancelCowOrderActionsProps) => {
   const { isWrongNetwork } = useIsWrongNetwork(cowOrder.chainId);
   const { mainTxState, loadingTxns, setMainTxState, setTxError } = useModalContext();
   const queryClient = useQueryClient();
+  const account = useRootStore((state) => state.account);
 
   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],
         signature,
         signingScheme,
       });
+
+      // Update order status to cancelled in local storage
+      if (account && cowOrder.id) {
+        updateCowOrderStatus(cowOrder.chainId, account, cowOrder.id, OrderStatus.CANCELLED);
+      }
+
       queryClient.invalidateQueries({ queryKey: 'transactionHistory' });
       setTimeout(() => {
         setMainTxState({