Collateral Swaps using CoW when available

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/CowOrderToast';
+import { CowOrderToast } from 'src/components/transactions/Switch/cowprotocol/CowOrderToast';
 import { AppDataProvider } from 'src/hooks/app-data-provider/useAppDataProvider';
 import { CowOrderToastProvider } from 'src/hooks/useCowOrderToast';
 import { ModalContextProvider } from 'src/hooks/useModal';
@@ -35,6 +35,12 @@ const SwitchModal = dynamic(() =>
   import('src/components/transactions/Switch/SwitchModal').then((module) => module.SwitchModal)
 );
 
+const CollateralSwapModal = dynamic(() =>
+  import('src/components/transactions/Switch/CollateralSwap/CollateralSwapModal').then(
+    (module) => module.CollateralSwapModal
+  )
+);
+
 const BridgeModal = dynamic(() =>
   import('src/components/transactions/Bridge/BridgeModal').then((module) => module.BridgeModal)
 );
@@ -69,9 +75,6 @@ const RepayModal = dynamic(() =>
 const SupplyModal = dynamic(() =>
   import('src/components/transactions/Supply/SupplyModal').then((module) => module.SupplyModal)
 );
-const SwapModal = dynamic(() =>
-  import('src/components/transactions/Swap/SwapModal').then((module) => module.SwapModal)
-);
 const WithdrawModal = dynamic(() =>
   import('src/components/transactions/Withdraw/WithdrawModal').then(
     (module) => module.WithdrawModal
@@ -166,10 +169,10 @@ export default function MyApp(props: MyAppProps) {
                                   <DebtSwitchModal />
                                   <ClaimRewardsModal />
                                   <EmodeModal />
-                                  <SwapModal />
                                   <FaucetModal />
                                   <TransactionEventHandler />
                                   <SwitchModal />
+                                  <CollateralSwapModal />
                                   <StakingMigrateModal />
                                   <BridgeModal />
                                   <ReadOnlyModal />

src/components/lists/ListWrapper.tsx

@@ -18,6 +18,7 @@ interface ListWrapperProps {
   wrapperSx?: BoxProps['sx'];
   tooltipOpen?: boolean;
   paperSx?: PaperProps['sx'];
+  topInfoSx?: BoxProps['sx'];
 }
 
 export const ListWrapper = ({
@@ -32,6 +33,7 @@ export const ListWrapper = ({
   wrapperSx,
   tooltipOpen,
   paperSx,
+  topInfoSx,
 }: ListWrapperProps) => {
   const [isCollapse, setIsCollapse] = useState(
     localStorageName ? localStorage.getItem(localStorageName) === 'true' : false
@@ -170,6 +172,7 @@ export const ListWrapper = ({
             px: { xs: 4, xsm: 6 },
             pb: { xs: collapsed && !noData ? 6 : 2, xsm: collapsed && !noData ? 6 : 0 },
             overflowX: tooltipOpen ? 'hidden' : 'auto',
+            ...topInfoSx,
           }}
         >
           {topInfo}

src/components/primitives/BasicModal.tsx

@@ -8,6 +8,7 @@ export interface BasicModalProps {
   setOpen: (value: boolean) => void;
   withCloseButton?: boolean;
   contentMaxWidth?: number;
+  minContentHeight?: number;
   contentHeight?: number;
   closeCallback?: () => void;
   disableEnforceFocus?: boolean;
@@ -19,6 +20,7 @@ export const BasicModal = ({
   setOpen,
   withCloseButton = true,
   contentMaxWidth = 420,
+  minContentHeight,
   contentHeight,
   children,
   closeCallback,

src/components/primitives/TokenIcon.tsx

@@ -199,6 +199,7 @@ interface ExternalTokenIconProps extends IconProps {
 
 export function ExternalTokenIcon({ symbol, logoURI, ...rest }: ExternalTokenIconProps) {
   const [tokenSymbol, setTokenSymbol] = useState(symbol.toLowerCase());
+
   return (
     <Icon {...rest} sx={{ display: 'flex', position: 'relative', borderRadius: '50%', ...rest.sx }}>
       <LazyLoad>