From e2422116e481c48e36fda39dfbc82c9aafd798ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Fri, 20 Mar 2026 20:48:56 +0100 Subject: [PATCH 01/13] fix: always use AlertTriangle, not alertCircle --- .../src/legacy/components/Badge/RangeBadge.tsx | 6 +++--- .../AffiliateTrader/AffiliateTraderUnsupportedNetwork.tsx | 4 ++-- .../src/modules/tokensList/pure/ImportListModal/index.tsx | 4 ++-- .../modules/tokensList/pure/ImportTokenListItem/index.tsx | 4 ++-- .../src/modules/tokensList/pure/ImportTokenModal/index.tsx | 4 ++-- .../src/modules/wallet/pure/Web3StatusInner/index.tsx | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/apps/cowswap-frontend/src/legacy/components/Badge/RangeBadge.tsx b/apps/cowswap-frontend/src/legacy/components/Badge/RangeBadge.tsx index f410909c12..75faed0e7f 100644 --- a/apps/cowswap-frontend/src/legacy/components/Badge/RangeBadge.tsx +++ b/apps/cowswap-frontend/src/legacy/components/Badge/RangeBadge.tsx @@ -1,7 +1,7 @@ import { HoverTooltip } from '@cowprotocol/ui' import { Trans } from '@lingui/react/macro' -import { AlertCircle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import styled from 'styled-components/macro' import { BadgeVariant } from './constants' @@ -42,7 +42,7 @@ export default function RangeBadge({ {removed ? ( Your position has 0 liquidity, and is not earning fees.}> - +   Closed @@ -75,7 +75,7 @@ export default function RangeBadge({ } > - +   Out of range diff --git a/apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTrader/AffiliateTraderUnsupportedNetwork.tsx b/apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTrader/AffiliateTraderUnsupportedNetwork.tsx index 8cf8debdf2..8f5950261f 100644 --- a/apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTrader/AffiliateTraderUnsupportedNetwork.tsx +++ b/apps/cowswap-frontend/src/modules/affiliate/pure/AffiliateTrader/AffiliateTraderUnsupportedNetwork.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react' import { Trans } from '@lingui/react/macro' -import { AlertCircle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import { UnsupportedNetworksText } from 'common/pure/UnsupportedNetworksText' @@ -12,7 +12,7 @@ export function AffiliateTraderUnsupportedNetwork(): ReactNode { return ( - + Switch network diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx index 3e03e85ee0..bfdcbe0cb7 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx @@ -5,7 +5,7 @@ import { ButtonPrimary, ModalHeader } from '@cowprotocol/ui' import { t } from '@lingui/core/macro' import { Trans } from '@lingui/react/macro' -import { AlertCircle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import * as styledEl from './styled' @@ -47,7 +47,7 @@ export function ImportListModal(props: ImportListModalProps): ReactNode { {isBlocked ? ( - + {blockReason || defaultBlockReason} ) : ( diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenListItem/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenListItem/index.tsx index 8b6a91d665..39f56325d1 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenListItem/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenListItem/index.tsx @@ -3,7 +3,7 @@ import { ReactElement } from 'react' import { ListState } from '@cowprotocol/tokens' import { Trans } from '@lingui/react/macro' -import { CheckCircle, AlertCircle } from 'react-feather' +import { CheckCircle, AlertTriangle } from 'react-feather' import * as styledEl from './styled' @@ -33,7 +33,7 @@ export function ImportTokenListItem(props: ImportTokenListItemProps): ReactEleme ) : isBlocked ? ( - + {blockReason || Not available in your region} ) : ( diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx index 21f5d4ca3b..764a1828dc 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx @@ -7,7 +7,7 @@ import { TokenLogo } from '@cowprotocol/tokens' import { ButtonPrimary, ExternalLink, ModalHeader, UI } from '@cowprotocol/ui' import { Trans } from '@lingui/react/macro' -import { AlertCircle, AlertTriangle } from 'react-feather' +import { AlertTriangle, AlertTriangle } from 'react-feather' import styled from 'styled-components/macro' import * as styledEl from './styled' @@ -76,7 +76,7 @@ export function ImportTokenModal(props: ImportTokenModalProps): ReactNode { {token.address} - + Unknown Source diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx index d1e0212609..f954eb1fbd 100644 --- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx +++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx @@ -10,7 +10,7 @@ import { ConnectionType, ConnectorType } from '@cowprotocol/wallet' import { t } from '@lingui/core/macro' import { Trans } from '@lingui/react/macro' import ICON_WALLET from 'assets/icon/wallet.svg' -import { AlertCircle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import SVG from 'react-inlinesvg' import { useConnection } from 'wagmi' @@ -57,7 +57,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps): ReactNode { {' '} {showUnfillableOrdersAlert ? ( - + ) : ( From cc15963a86eccc3d5dcffda9883d2400762e3fa0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Fri, 20 Mar 2026 21:05:01 +0100 Subject: [PATCH 02/13] fix: fix build --- apps/cowswap-frontend/src/locales/en-US.po | 35 ++++++++++--------- .../pure/ImportTokenModal/index.tsx | 2 +- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/apps/cowswap-frontend/src/locales/en-US.po b/apps/cowswap-frontend/src/locales/en-US.po index a60e50865d..e18f282289 100644 --- a/apps/cowswap-frontend/src/locales/en-US.po +++ b/apps/cowswap-frontend/src/locales/en-US.po @@ -683,8 +683,8 @@ msgid "h" msgstr "h" #: apps/cowswap-frontend/src/common/utils/tradeSettingsTooltips.tsx -msgid "When selling {aNativeCurrency}, the minimum slippage tolerance is set to {minimumETHFlowSlippage}% or higher to ensure a high likelihood of order matching, even in volatile market conditions." -msgstr "When selling {aNativeCurrency}, the minimum slippage tolerance is set to {minimumETHFlowSlippage}% or higher to ensure a high likelihood of order matching, even in volatile market conditions." +#~ msgid "When selling {aNativeCurrency}, the minimum slippage tolerance is set to {minimumETHFlowSlippage}% or higher to ensure a high likelihood of order matching, even in volatile market conditions." +#~ msgstr "When selling {aNativeCurrency}, the minimum slippage tolerance is set to {minimumETHFlowSlippage}% or higher to ensure a high likelihood of order matching, even in volatile market conditions." #: apps/cowswap-frontend/src/modules/rwa/pure/RwaConsentModal/index.tsx #~ msgid "A U.S. Person or resident of the United States." @@ -894,6 +894,10 @@ msgstr "Maybe next time" msgid "Can't find the pool you're looking for?" msgstr "Can't find the pool you're looking for?" +#: apps/cowswap-frontend/src/common/utils/tradeSettingsTooltips.tsx +msgid "Custom slippage amount set{amountRange}." +msgstr "Custom slippage amount set{amountRange}." + #: apps/cowswap-frontend/src/common/pure/CustomRecipientWarningBanner/index.tsx msgid "Order recipient address differs from order owner!" msgstr "Order recipient address differs from order owner!" @@ -5238,6 +5242,10 @@ msgstr "Version" msgid "All tokens" msgstr "All tokens" +#: apps/cowswap-frontend/src/common/utils/tradeSettingsTooltips.tsx +msgid "When selling {aNativeCurrency}, the minimum slippage tolerance is set to {minimumETHFlowSlippage}% or higher{amountRange} to ensure a high likelihood of order matching, even in volatile market conditions." +msgstr "When selling {aNativeCurrency}, the minimum slippage tolerance is set to {minimumETHFlowSlippage}% or higher{amountRange} to ensure a high likelihood of order matching, even in volatile market conditions." + #: apps/cowswap-frontend/src/modules/tokensList/pure/TokenSearchContent/useSearchRows.ts msgid "Additional Results from External Sources" msgstr "Additional Results from External Sources" @@ -5544,11 +5552,9 @@ msgstr "Favorite tokens" #~ msgid "Limit Orders" #~ msgstr "Limit Orders" -#. placeholder {0}: slippageWarningParams.lowSlippageBound.toFixed(2) -#. placeholder {1}: slippageWarningParams.highSlippageBound.toFixed(2) #: apps/cowswap-frontend/src/common/utils/tradeSettingsTooltips.tsx -msgid "{0} - {1}%: Recommended slippage tolerance." -msgstr "{0} - {1}%: Recommended slippage tolerance." +#~ msgid "{0} - {1}%: Recommended slippage tolerance." +#~ msgstr "{0} - {1}%: Recommended slippage tolerance." #: apps/cowswap-frontend/src/modules/erc20Approve/hooks/useApproveAndSwap.ts msgid "Approved amount is not sufficient!" @@ -5588,11 +5594,9 @@ msgstr "Orders on CoW Swap can either be market orders (which fill at the market #~ msgid "Code binds on your first eligible trade. Earn {0} {1} per {2} eligible volume in {3} days. Payouts happen on Ethereum mainnet." #~ msgstr "Code binds on your first eligible trade. Earn {0} {1} per {2} eligible volume in {3} days. Payouts happen on Ethereum mainnet." -#. placeholder {0}: (slippageWarningParams.highSlippageBound + 0.01).toFixed(2) -#. placeholder {1}: slippageWarningParams.max.toFixed(2) #: apps/cowswap-frontend/src/common/utils/tradeSettingsTooltips.tsx -msgid "{0} - {1}%: High slippage. You may not get the best price." -msgstr "{0} - {1}%: High slippage. You may not get the best price." +#~ msgid "{0} - {1}%: High slippage. You may not get the best price." +#~ msgstr "{0} - {1}%: High slippage. You may not get the best price." #: apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx msgid "at least" @@ -7271,11 +7275,9 @@ msgstr "Longer limit orders - place orders for up to a year." msgid "User rejected signing the cancellation" msgstr "User rejected signing the cancellation" -#. placeholder {0}: slippageWarningParams.min.toFixed(2) -#. placeholder {1}: (slippageWarningParams.lowSlippageBound - 0.01).toFixed(2) #: apps/cowswap-frontend/src/common/utils/tradeSettingsTooltips.tsx -msgid "{0} - {1}%: Low slippage. Your transaction may expire." -msgstr "{0} - {1}%: Low slippage. Your transaction may expire." +#~ msgid "{0} - {1}%: Low slippage. Your transaction may expire." +#~ msgstr "{0} - {1}%: Low slippage. Your transaction may expire." #: apps/cowswap-frontend/src/modules/affiliate/containers/AffiliatePartnerStats.tsx msgid "Total referrals" @@ -7301,10 +7303,9 @@ msgstr "We weren't able to check your eligibility. Feel free to continue, but yo msgid "Reset {symbol} allowance to 0 before setting new spending cap" msgstr "Reset {symbol} allowance to 0 before setting new spending cap" -#. placeholder {0}: slippageWarningParams ? ':' : '.' #: apps/cowswap-frontend/src/common/utils/tradeSettingsTooltips.tsx -msgid "Custom slippage amount set{0}" -msgstr "Custom slippage amount set{0}" +#~ msgid "Custom slippage amount set{0}" +#~ msgstr "Custom slippage amount set{0}" #: apps/cowswap-frontend/src/pages/Account/Delegate.tsx msgid "Delegate Now" diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx index 764a1828dc..ebbdaa5d55 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx @@ -7,7 +7,7 @@ import { TokenLogo } from '@cowprotocol/tokens' import { ButtonPrimary, ExternalLink, ModalHeader, UI } from '@cowprotocol/ui' import { Trans } from '@lingui/react/macro' -import { AlertTriangle, AlertTriangle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import styled from 'styled-components/macro' import * as styledEl from './styled' From f0ab6b08edca26ba995ce2b84966a0d9de327eb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Mon, 30 Mar 2026 15:57:48 +0200 Subject: [PATCH 03/13] fix: replace remaining AlertCircle except for the one in TradeButton --- .../src/common/pure/UnsupportedNetworkBanner/index.tsx | 6 +++--- .../src/common/pure/WarningCard/WarningCard.tsx | 4 ++-- .../src/modules/tokensList/pure/ImportTokenModal/styled.ts | 4 ++-- libs/snackbars/src/containers/SnackbarsWidget/index.tsx | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/cowswap-frontend/src/common/pure/UnsupportedNetworkBanner/index.tsx b/apps/cowswap-frontend/src/common/pure/UnsupportedNetworkBanner/index.tsx index 089e174e0c..e706a11098 100644 --- a/apps/cowswap-frontend/src/common/pure/UnsupportedNetworkBanner/index.tsx +++ b/apps/cowswap-frontend/src/common/pure/UnsupportedNetworkBanner/index.tsx @@ -2,7 +2,7 @@ import { ReactElement, ReactNode } from 'react' import { Media, UI } from '@cowprotocol/ui' -import { AlertCircle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import styled from 'styled-components/macro' const Wrapper = styled.div` @@ -31,7 +31,7 @@ const Wrapper = styled.div` } ` -const StyledAlertCircle = styled(AlertCircle)` +const StyledAlertTriangle = styled(AlertTriangle)` color: var(${UI.COLOR_DANGER}); ` @@ -43,7 +43,7 @@ export function UnsupportedNetworkBanner({ children }: UnsupportedNetworkBannerP return (
- +
{children}
 diff --git a/apps/cowswap-frontend/src/common/pure/WarningCard/WarningCard.tsx b/apps/cowswap-frontend/src/common/pure/WarningCard/WarningCard.tsx index c2b46dec1e..21f65ab38e 100644 --- a/apps/cowswap-frontend/src/common/pure/WarningCard/WarningCard.tsx +++ b/apps/cowswap-frontend/src/common/pure/WarningCard/WarningCard.tsx @@ -1,6 +1,6 @@ import { PropsWithChildren } from 'react' -import { AlertCircle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import styled from 'styled-components/macro' import Card from 'legacy/components/Card' @@ -30,7 +30,7 @@ const RightContainer = styled.div` } ` -const WarningIcon = styled(AlertCircle)` +const WarningIcon = styled(AlertTriangle)` min-height: 32px; min-width: 32px; color: #764e0766; diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/styled.ts index 411930c870..6a7cc16ff1 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/styled.ts +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/styled.ts @@ -1,6 +1,6 @@ import { TokenName, TokenSymbol, UI } from '@cowprotocol/ui' -import { AlertCircle } from 'react-feather' +import { AlertTriangle } from 'react-feather' import styled from 'styled-components/macro' export const Wrapper = styled.div` @@ -20,7 +20,7 @@ export const Contents = styled.div` padding: 20px; ` -export const AlertIcon = styled(AlertCircle)` +export const AlertIcon = styled(AlertTriangle)` color: var(${UI.COLOR_RED}); margin-top: 20px; ` diff --git a/libs/snackbars/src/containers/SnackbarsWidget/index.tsx b/libs/snackbars/src/containers/SnackbarsWidget/index.tsx index 5d788fe0f3..223e12d26c 100644 --- a/libs/snackbars/src/containers/SnackbarsWidget/index.tsx +++ b/libs/snackbars/src/containers/SnackbarsWidget/index.tsx @@ -6,7 +6,7 @@ import { useMediaQuery } from '@cowprotocol/common-hooks' import { Media, UI } from '@cowprotocol/ui' import ms from 'ms.macro' -import { AlertCircle, CheckCircle } from 'react-feather' +import { AlertTriangle, CheckCircle } from 'react-feather' import styled from 'styled-components/macro' import { useAnchorPosition } from '../../hooks/useAnchorPosition' @@ -57,7 +57,7 @@ const SuccessIcon = styled(CheckCircle)` color: ${({ theme }) => theme.green1}; ` -const AlertIcon = styled(AlertCircle)` +const AlertIcon = styled(AlertTriangle)` color: ${({ theme }) => theme.danger}; ` From 6ad1e0734669a6403f4cf0f521b82e2148cdccaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Mon, 30 Mar 2026 16:47:43 +0200 Subject: [PATCH 04/13] fix: rename alert-circle.svg to filled-info-circle.svg --- .../pure/RefCodeInput/RefCodeAdornment.tsx | 16 ++++++++-------- .../pure/BottomBanners/BottomBanners.pure.tsx | 4 ++-- .../Row/WarningTooltip/WarningTooltip.pure.tsx | 6 +++--- .../pure/OrdersTabs/OrdersTabs.pure.tsx | 8 ++++---- .../{alert-circle.svg => filled-info-circle.svg} | 0 libs/ui/src/pure/Icon/index.tsx | 2 +- 6 files changed, 18 insertions(+), 18 deletions(-) rename libs/assets/src/cow-swap/{alert-circle.svg => filled-info-circle.svg} (100%) diff --git a/apps/cowswap-frontend/src/modules/affiliate/pure/RefCodeInput/RefCodeAdornment.tsx b/apps/cowswap-frontend/src/modules/affiliate/pure/RefCodeInput/RefCodeAdornment.tsx index b0bf93f2e2..9bf85643dc 100644 --- a/apps/cowswap-frontend/src/modules/affiliate/pure/RefCodeInput/RefCodeAdornment.tsx +++ b/apps/cowswap-frontend/src/modules/affiliate/pure/RefCodeInput/RefCodeAdornment.tsx @@ -1,8 +1,8 @@ import { ReactNode } from 'react' -import AlertIcon from '@cowprotocol/assets/cow-swap/alert-circle.svg' -import CheckIcon from '@cowprotocol/assets/cow-swap/order-check.svg' -import PendingIcon from '@cowprotocol/assets/cow-swap/spinner.svg' +import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' +import iconCheck from '@cowprotocol/assets/cow-swap/order-check.svg' +import iconPending from '@cowprotocol/assets/cow-swap/spinner.svg' import { Media, UI } from '@cowprotocol/ui' import { t } from '@lingui/core/macro' @@ -24,7 +24,7 @@ export function RefCodeAdornment({ variant, isAdornmentWrappable = false }: RefC if (variant === 'error') { return ( - + ) } @@ -32,7 +32,7 @@ export function RefCodeAdornment({ variant, isAdornmentWrappable = false }: RefC if (variant === 'checking') { return ( - + {t`Checking`} ) @@ -41,7 +41,7 @@ export function RefCodeAdornment({ variant, isAdornmentWrappable = false }: RefC if (variant === 'pending') { return ( - + {t`Pending`} ) @@ -50,7 +50,7 @@ export function RefCodeAdornment({ variant, isAdornmentWrappable = false }: RefC if (variant === 'available') { return ( - + {t`Available`} ) @@ -58,7 +58,7 @@ export function RefCodeAdornment({ variant, isAdornmentWrappable = false }: RefC return ( - + {t`Valid`} ) diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx index 4e6da5dde1..c5fbd27daa 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx @@ -1,6 +1,6 @@ import { useCallback, ReactNode } from 'react' -import AlertIcon from '@cowprotocol/assets/cow-swap/alert-circle.svg' +import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' import { ClosableBanner } from '@cowprotocol/ui' import { Trans } from '@lingui/react/macro' @@ -23,7 +23,7 @@ export function BottomBanners(): ReactNode { (close: () => void) => (
- +
Your order may not fill exactly when the market price reaches your limit price.{' '} diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx index 530934b05e..a06d6967fa 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx @@ -1,6 +1,6 @@ -import React, { ReactNode } from 'react' +import { ReactNode } from 'react' -import alertCircle from '@cowprotocol/assets/cow-swap/alert-circle.svg' +import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' import { Command } from '@cowprotocol/types' import { ButtonSecondary, TokenSymbol, UI } from '@cowprotocol/ui' @@ -139,7 +139,7 @@ export function WarningTooltip({ placement="bottom" bgColor={`var(${UI.COLOR_DANGER_BG})`} color={`var(${UI.COLOR_DANGER_TEXT})`} - Icon={} + Icon={} /> {children} diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx index a6e917d2b8..919ff740a0 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx @@ -1,7 +1,7 @@ import { ReactNode, ChangeEvent } from 'react' -import alertCircle from '@cowprotocol/assets/cow-swap/alert-circle.svg' -import orderPresignaturePending from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' +import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' +import iconOrderPresignaturePending from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' import { useWalletInfo } from '@cowprotocol/wallet' import { t } from '@lingui/core/macro' @@ -65,8 +65,8 @@ export function OrdersTabs({ tabs }: OrdersTabsProps): ReactNode { $isDisabled={!account} to={buildOrdersTableUrl({ tabId: tab.id, pageNumber: 1 })} > - {isUnfillable && } - {isSigning && } + {isUnfillable && } + {isSigning && } {i18n._(tab.title)} {account && ({tab.count})} ) diff --git a/libs/assets/src/cow-swap/alert-circle.svg b/libs/assets/src/cow-swap/filled-info-circle.svg similarity index 100% rename from libs/assets/src/cow-swap/alert-circle.svg rename to libs/assets/src/cow-swap/filled-info-circle.svg diff --git a/libs/ui/src/pure/Icon/index.tsx b/libs/ui/src/pure/Icon/index.tsx index 97573ef606..e79c1389a0 100644 --- a/libs/ui/src/pure/Icon/index.tsx +++ b/libs/ui/src/pure/Icon/index.tsx @@ -1,7 +1,7 @@ -import iconInformation from '@cowprotocol/assets/cow-swap/alert-circle.svg' import iconAlert from '@cowprotocol/assets/cow-swap/alert.svg' import iconDanger from '@cowprotocol/assets/cow-swap/alert.svg' import iconSuccess from '@cowprotocol/assets/cow-swap/check.svg' +import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' import SVG from 'react-inlinesvg' import styled from 'styled-components/macro' From ef163e03020e6357e2556c23b67c13e419c4bf8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Mon, 30 Mar 2026 17:50:43 +0200 Subject: [PATCH 05/13] chore: rename some SVG icon assets --- .../OrderEstimatedExecutionPrice.pure.tsx | 8 ++++---- .../ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx | 3 ++- libs/ui/src/pure/Icon/index.tsx | 7 +++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx index 685941bbe5..f95c81ed96 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' -import AlertTriangle from '@cowprotocol/assets/cow-swap/alert.svg' -import allowanceIcon from '@cowprotocol/assets/images/icon-allowance.svg' +import iconFilledAlertTriangle from '@cowprotocol/assets/cow-swap/alert.svg' +import iconAllowance from '@cowprotocol/assets/images/icon-allowance.svg' import { ZERO_FRACTION } from '@cowprotocol/common-const' import { Currency, CurrencyAmount, Fraction, Percent, Price } from '@cowprotocol/currency' import { Command } from '@cowprotocol/types' @@ -140,7 +140,7 @@ export function OrderEstimatedExecutionPrice({ color={`var(${UI.COLOR_DANGER_TEXT})`} > - + {internationalizedWarningText} @@ -257,7 +257,7 @@ function UnlikelyToExecuteWarning(props: UnlikelyToExecuteWarningProps) { } > - + ) diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx index b88952d407..656de19e3e 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx @@ -157,7 +157,8 @@ export function OrderFillsAt({ return ( - {!isUnfillable && + {false && + !isUnfillable && priceDiffs?.percentage && Math.abs(Number(priceDiffs.percentage.toFixed(4))) <= PENDING_EXECUTION_THRESHOLD_PERCENTAGE ? ( = { - [IconType.ALERT]: iconAlert, + [IconType.ALERT]: iconFilledAlertTriangle, [IconType.INFORMATION]: iconInformation, - [IconType.DANGER]: iconDanger, + [IconType.DANGER]: iconFilledAlertTriangle, [IconType.SUCCESS]: iconSuccess, } From d5b8b52fdbc64dc7b28445aea157c1415234e361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Mon, 30 Mar 2026 18:18:32 +0200 Subject: [PATCH 06/13] feat: add rule to enforce consistent naming for SVG asset imports --- eslint.config.js | 18 ++ tools/codemods/rename-svg-import-bindings.mjs | 220 ++++++++++++++++++ 2 files changed, 238 insertions(+) create mode 100644 tools/codemods/rename-svg-import-bindings.mjs diff --git a/eslint.config.js b/eslint.config.js index 9ae5e4f070..5a347ad442 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -194,6 +194,24 @@ module.exports = [ selector: 'ImportExpression[source.value="@1inch/permit-signed-approvals-utils"]', message: 'Please import dynamically from @cowprotocol/permit-utils', }, + { + selector: + 'ImportDeclaration[source.value=/\\.svg$/] > ImportDefaultSpecifier:not([local.name=/^(icon|svg)[A-Za-z0-9]+Src$/])', + message: + 'Default import from .svg must be named iconSomethingSrc or svgSomethingSrc (camelCase body + Src suffix).', + }, + { + selector: + 'ImportDeclaration[source.value=/\\.svg$/] > ImportNamespaceSpecifier:not([local.name=/^(icon|svg)[A-Za-z0-9]+Src$/])', + message: + 'Namespace import from .svg must be named iconSomethingSrc or svgSomethingSrc (camelCase body + Src suffix).', + }, + { + selector: + 'ImportDeclaration[source.value=/\\.svg$/] ImportSpecifier[imported.type=Identifier][imported.name=default]:not([local.name=/^(icon|svg)[A-Za-z0-9]+Src$/])', + message: + 'Default re-export import from .svg must be named iconSomethingSrc or svgSomethingSrc (camelCase body + Src suffix).', + }, ], 'no-unused-vars': 'off', 'unused-imports/no-unused-imports': 'error', diff --git a/tools/codemods/rename-svg-import-bindings.mjs b/tools/codemods/rename-svg-import-bindings.mjs new file mode 100644 index 0000000000..4207ce09c3 --- /dev/null +++ b/tools/codemods/rename-svg-import-bindings.mjs @@ -0,0 +1,220 @@ +/** + * Rename default SVG import bindings to icon*Src / svg*Src (outside string literals only). + * Run from repo root: node tools/codemods/rename-svg-import-bindings.mjs + */ +import { execSync } from 'node:child_process' +import { readFileSync, writeFileSync } from 'node:fs' + +function snakeToCamel(str) { + const s = str.toLowerCase() + return s.replace(/_([a-z0-9])/g, (_, c) => c.toUpperCase()) +} + +function isValidBinding(name) { + return /^(icon|svg)[A-Za-z0-9]+Src$/.test(name) +} + +function camelCaseToPascalFirst(s) { + return s.charAt(0).toUpperCase() + s.slice(1) +} + +function legacyToNew(name) { + if (isValidBinding(name)) return name + if (/^icon[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { + return `${name}Src` + } + if (/^svg[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { + return `${name}Src` + } + if (/^[A-Z][A-Z0-9_]*$/.test(name)) { + let c = snakeToCamel(name) + if (!c.startsWith('icon') && !c.startsWith('svg')) { + c = 'icon' + camelCaseToPascalFirst(c) + } + return c.endsWith('Src') ? c : `${c}Src` + } + let base = name.replace(/Icon$/i, '').replace(/Image$/i, '').replace(/Illustration$/i, '') + base = base.replace(/^_+/, '') + const pascal = camelCaseToPascalFirst(base) + return `icon${pascal}Src` +} + +/** Replace `oldName` with `newName` only outside strings / line & block comments */ +function replaceIdentifierOutsideStrings(code, oldName, newName) { + if (oldName === newName) return code + const boundaryRe = new RegExp(String.raw`^${oldName.replaceAll('$', String.raw`\$`)}\b`) + + let out = '' + let i = 0 + let inString = null + let stringEscaped = false + const n = code.length + + while (i < n) { + const c = code[i] + + if (inString) { + out += c + if (inString === '`' && c === '$' && code[i + 1] === '{') { + out += '{' + i += 2 + let depth = 1 + while (i < n && depth > 0) { + const ch = code[i] + out += ch + if (ch === '{') depth++ + else if (ch === '}') depth-- + i++ + } + continue + } + if (stringEscaped) { + stringEscaped = false + i++ + continue + } + if (c === '\\') { + stringEscaped = true + i++ + continue + } + if (c === inString) { + inString = null + } + i++ + continue + } + + if (c === '/' && code[i + 1] === '/') { + while (i < n && code[i] !== '\n') out += code[i++] + continue + } + if (c === '/' && code[i + 1] === '*') { + out += '/*' + i += 2 + while (i < n - 1 && !(code[i] === '*' && code[i + 1] === '/')) { + out += code[i++] + } + if (i < n - 1) { + out += '*/' + i += 2 + } + continue + } + + if (c === "'" || c === '"' || c === '`') { + inString = c + out += c + i++ + continue + } + + const rest = code.slice(i) + const beforeOk = i === 0 || !/[\w$]/.test(code[i - 1]) + if (beforeOk && boundaryRe.test(rest)) { + out += newName + i += oldName.length + continue + } + + out += c + i++ + } + + return out +} + +function transformFile(content) { + const reassignments = [] + + function schedule(oldName, newName) { + if (oldName !== newName) reassignments.push({ oldName, newName }) + } + + let out = content + const tail = '((?:\\r?\\n)+|$)' + + out = out.replace( + new RegExp( + String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*,\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\4${tail}`, + 'gm', + ), + (_, indent, a, b, q, path, trail) => { + const next = legacyToNew(a) + schedule(a, next) + schedule(b, next) + return `${indent}import ${next} from ${q}${path}${q}${trail}` + }, + ) + + out = out.replace( + new RegExp( + String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, + 'gm', + ), + (_, indent, bind, q, path, trail) => { + const next = legacyToNew(bind) + schedule(bind, next) + return `${indent}import ${next} from ${q}${path}${q}${trail}` + }, + ) + + out = out.replace( + new RegExp(String.raw`^(\s*)import\s+\*\s+as\s+(\w+)\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, 'gm'), + (_, indent, bind, q, path, trail) => { + const next = legacyToNew(bind) + schedule(bind, next) + return `${indent}import * as ${next} from ${q}${path}${q}${trail}` + }, + ) + + out = out.replace( + new RegExp(String.raw`^(\s*)import\s+(?!type\s)(\w+)\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, 'gm'), + (_, indent, bind, q, path, trail) => { + const next = legacyToNew(bind) + schedule(bind, next) + return `${indent}import ${next} from ${q}${path}${q}${trail}` + }, + ) + + const byOld = new Map() + for (const { oldName, newName } of reassignments) { + byOld.set(oldName, newName) + } + const unique = [...byOld.entries()] + .map(([oldName, newName]) => ({ oldName, newName })) + .sort((a, b) => b.oldName.length - a.oldName.length) + + for (const { oldName, newName } of unique) { + out = replaceIdentifierOutsideStrings(out, oldName, newName) + } + + return out === content ? null : out +} + +function main() { + const files = execSync('git ls-files', { encoding: 'utf8' }) + .split('\n') + .filter((f) => /\.(tsx|ts|jsx|js|mts)$/.test(f)) + .filter((f) => { + try { + return /\.svg['"]/.test(readFileSync(f, 'utf8')) + } catch { + return false + } + }) + + let changed = 0 + for (const f of files) { + const content = readFileSync(f, 'utf8') + const next = transformFile(content) + if (next) { + writeFileSync(f, next, 'utf8') + changed++ + console.log(f) + } + } + console.log(`Updated ${changed} files`) +} + +main() From 64e7567a0c07219f5a087e0240b522bc7b1f651a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Fri, 1 May 2026 18:51:04 +0200 Subject: [PATCH 07/13] fix: update codemod --- tools/codemods/rename-svg-import-bindings.mjs | 127 ++++++++++++++---- .../rename-svg-import-bindings.test.mjs | 75 +++++++++++ 2 files changed, 179 insertions(+), 23 deletions(-) create mode 100644 tools/codemods/rename-svg-import-bindings.test.mjs diff --git a/tools/codemods/rename-svg-import-bindings.mjs b/tools/codemods/rename-svg-import-bindings.mjs index 4207ce09c3..59063faa6d 100644 --- a/tools/codemods/rename-svg-import-bindings.mjs +++ b/tools/codemods/rename-svg-import-bindings.mjs @@ -1,51 +1,98 @@ /** - * Rename default SVG import bindings to icon*Src / svg*Src (outside string literals only). + * Rename default SVG import bindings to icon*Src / image*Src / svg*Src (outside string literals only). + * Prefix is derived from the asset path (see prefixFromAssetPath); default is image*Src. * Run from repo root: node tools/codemods/rename-svg-import-bindings.mjs */ import { execSync } from 'node:child_process' import { readFileSync, writeFileSync } from 'node:fs' +import { resolve } from 'node:path' +import { pathToFileURL } from 'node:url' -function snakeToCamel(str) { +// Converts SCREAMING_SNAKE_CASE-like names into camelCase. +// Example: COW_ICON -> cowIcon +export function snakeToCamel(str) { + // Work in lowercase first to normalize mixed uppercase inputs. const s = str.toLowerCase() + // Turn "_x" into "X". return s.replace(/_([a-z0-9])/g, (_, c) => c.toUpperCase()) } -function isValidBinding(name) { - return /^(icon|svg)[A-Za-z0-9]+Src$/.test(name) +/** icon | image | svg — checked on path with .svg stripped so the extension does not imply "svg" */ +export function prefixFromAssetPath(assetPath) { + // Remove extension before checks so ".svg" does not force the svg prefix. + const hintPath = assetPath.replace(/\.svg$/i, '').toLowerCase() + // Priority order matters: first matching hint wins. + if (hintPath.includes('icon')) return 'icon' + if (hintPath.includes('image')) return 'image' + if (hintPath.includes('svg')) return 'svg' + // Default to image when there is no explicit hint. + return 'image' } -function camelCaseToPascalFirst(s) { +// Valid final shape: iconFooSrc / imageFooSrc / svgFooSrc +export function isValidBinding(name) { + return /^(icon|image|svg)[A-Za-z0-9]+Src$/.test(name) +} + +// "fooBar" -> "FooBar" +export function camelCaseToPascalFirst(s) { return s.charAt(0).toUpperCase() + s.slice(1) } -function legacyToNew(name) { - if (isValidBinding(name)) return name +export function legacyToNew(name, assetPath) { + // Derive desired prefix from the import path. + const prefix = prefixFromAssetPath(assetPath) + + // Case 1: Already in the new format. + // Keep it as-is if prefix matches, otherwise swap prefix only. + if (isValidBinding(name)) { + const m = name.match(/^(icon|image|svg)([A-Za-z0-9]+)Src$/) + if (m && m[1] === prefix) return name + if (m) return `${prefix}${m[2]}Src` + } + + // Case 2: Legacy prefixed names without Src suffix. + // Reuse the existing tail but enforce the path-derived prefix. if (/^icon[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { - return `${name}Src` + return `${prefix}${name.slice(4)}Src` + } + if (/^image[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { + return `${prefix}${name.slice(5)}Src` } if (/^svg[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { - return `${name}Src` + return `${prefix}${name.slice(3)}Src` } + + // Case 3: CONSTANT_STYLE legacy names. + // Normalize to camel, drop any old prefix token, then re-prefix. if (/^[A-Z][A-Z0-9_]*$/.test(name)) { - let c = snakeToCamel(name) - if (!c.startsWith('icon') && !c.startsWith('svg')) { - c = 'icon' + camelCaseToPascalFirst(c) - } - return c.endsWith('Src') ? c : `${c}Src` + const c = snakeToCamel(name) + const rest = c.replace(/^(icon|image|svg)/, '') + const tail = rest ? camelCaseToPascalFirst(rest) : camelCaseToPascalFirst(c) + const out = `${prefix}${tail}` + return out.endsWith('Src') ? out : `${out}Src` } + + // Case 4: generic fallback. + // Remove common semantic suffixes to avoid duplicates like iconFooIconSrc. let base = name.replace(/Icon$/i, '').replace(/Image$/i, '').replace(/Illustration$/i, '') + // Also trim accidental leading underscores. base = base.replace(/^_+/, '') const pascal = camelCaseToPascalFirst(base) - return `icon${pascal}Src` + return `${prefix}${pascal}Src` } /** Replace `oldName` with `newName` only outside strings / line & block comments */ -function replaceIdentifierOutsideStrings(code, oldName, newName) { +export function replaceIdentifierOutsideStrings(code, oldName, newName) { + // Fast path for no-op replacements. if (oldName === newName) return code + // Match only full identifier occurrences at the current cursor. const boundaryRe = new RegExp(String.raw`^${oldName.replaceAll('$', String.raw`\$`)}\b`) + // out = rebuilt source; i = read cursor let out = '' let i = 0 + // String parsing state: null | "'" | '"' | '`' let inString = null let stringEscaped = false const n = code.length @@ -53,8 +100,11 @@ function replaceIdentifierOutsideStrings(code, oldName, newName) { while (i < n) { const c = code[i] + // If currently inside a string, copy characters until the string closes. if (inString) { out += c + // Special handling for template string interpolations: `${ ... }` + // We copy the entire expression verbatim without attempting replacements. if (inString === '`' && c === '$' && code[i + 1] === '{') { out += '{' i += 2 @@ -68,6 +118,7 @@ function replaceIdentifierOutsideStrings(code, oldName, newName) { } continue } + // Handle escaped chars inside strings. if (stringEscaped) { stringEscaped = false i++ @@ -78,6 +129,7 @@ function replaceIdentifierOutsideStrings(code, oldName, newName) { i++ continue } + // End of current string literal. if (c === inString) { inString = null } @@ -85,10 +137,12 @@ function replaceIdentifierOutsideStrings(code, oldName, newName) { continue } + // Skip line comments as opaque text. if (c === '/' && code[i + 1] === '/') { while (i < n && code[i] !== '\n') out += code[i++] continue } + // Skip block comments as opaque text. if (c === '/' && code[i + 1] === '*') { out += '/*' i += 2 @@ -102,6 +156,7 @@ function replaceIdentifierOutsideStrings(code, oldName, newName) { continue } + // Enter string mode. if (c === "'" || c === '"' || c === '`') { inString = c out += c @@ -109,6 +164,7 @@ function replaceIdentifierOutsideStrings(code, oldName, newName) { continue } + // Replace only when oldName starts at this exact cursor and is token-bounded. const rest = code.slice(i) const beforeOk = i === 0 || !/[\w$]/.test(code[i - 1]) if (beforeOk && boundaryRe.test(rest)) { @@ -124,97 +180,122 @@ function replaceIdentifierOutsideStrings(code, oldName, newName) { return out } -function transformFile(content) { +export function transformFile(content) { + // Keep all scheduled symbol replacements, then apply them after imports are rewritten. const reassignments = [] function schedule(oldName, newName) { if (oldName !== newName) reassignments.push({ oldName, newName }) } + // Build transformed source incrementally. let out = content + // Preserve either blank line(s) or EOF after each matched import. const tail = '((?:\\r?\\n)+|$)' + // 1) import { default as A, default as B } from 'x.svg' -> import imageFooSrc from 'x.svg' out = out.replace( new RegExp( String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*,\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\4${tail}`, 'gm', ), (_, indent, a, b, q, path, trail) => { - const next = legacyToNew(a) + const next = legacyToNew(a, path) schedule(a, next) schedule(b, next) return `${indent}import ${next} from ${q}${path}${q}${trail}` }, ) + // 2) import { default as A } from 'x.svg' -> import imageFooSrc from 'x.svg' out = out.replace( new RegExp( String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, 'gm', ), (_, indent, bind, q, path, trail) => { - const next = legacyToNew(bind) + const next = legacyToNew(bind, path) schedule(bind, next) return `${indent}import ${next} from ${q}${path}${q}${trail}` }, ) + // 3) import * as A from 'x.svg' -> keep style, only rename binding. out = out.replace( new RegExp(String.raw`^(\s*)import\s+\*\s+as\s+(\w+)\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, 'gm'), (_, indent, bind, q, path, trail) => { - const next = legacyToNew(bind) + const next = legacyToNew(bind, path) schedule(bind, next) return `${indent}import * as ${next} from ${q}${path}${q}${trail}` }, ) + // 4) import A from 'x.svg' -> rename default binding. out = out.replace( new RegExp(String.raw`^(\s*)import\s+(?!type\s)(\w+)\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, 'gm'), (_, indent, bind, q, path, trail) => { - const next = legacyToNew(bind) + const next = legacyToNew(bind, path) schedule(bind, next) return `${indent}import ${next} from ${q}${path}${q}${trail}` }, ) + // Deduplicate by oldName: last scheduled value wins. const byOld = new Map() for (const { oldName, newName } of reassignments) { byOld.set(oldName, newName) } + // Replace longer names first to avoid partial collisions. const unique = [...byOld.entries()] .map(([oldName, newName]) => ({ oldName, newName })) .sort((a, b) => b.oldName.length - a.oldName.length) + // Update usage sites in code (excluding comments/strings via parser above). for (const { oldName, newName } of unique) { out = replaceIdentifierOutsideStrings(out, oldName, newName) } + // Return null when unchanged, so caller can skip writes. return out === content ? null : out } -function main() { +export function main() { + // Enumerate tracked files only. const files = execSync('git ls-files', { encoding: 'utf8' }) .split('\n') + // Restrict to JS/TS source-like files. .filter((f) => /\.(tsx|ts|jsx|js|mts)$/.test(f)) + // Keep only files that contain an .svg import-like string. .filter((f) => { try { return /\.svg['"]/.test(readFileSync(f, 'utf8')) } catch { + // Ignore unreadable files defensively. return false } }) let changed = 0 for (const f of files) { + // Read -> transform -> write only when a change is needed. const content = readFileSync(f, 'utf8') const next = transformFile(content) if (next) { writeFileSync(f, next, 'utf8') changed++ + // Print touched file to help review/diff. console.log(f) } } + // Final summary count. console.log(`Updated ${changed} files`) } -main() +// CLI entrypoint: execute only when file is run directly with node. +const isDirectRun = process.argv[1] + ? import.meta.url === pathToFileURL(resolve(process.argv[1])).href + : false + +if (isDirectRun) { + main() +} diff --git a/tools/codemods/rename-svg-import-bindings.test.mjs b/tools/codemods/rename-svg-import-bindings.test.mjs new file mode 100644 index 0000000000..ba69213a5a --- /dev/null +++ b/tools/codemods/rename-svg-import-bindings.test.mjs @@ -0,0 +1,75 @@ +import { + legacyToNew, + prefixFromAssetPath, + replaceIdentifierOutsideStrings, + transformFile, +} from './rename-svg-import-bindings.mjs' + +const CHECK = '✓' +const CROSS = '✗' + +let failures = 0 + +function report(name, ok, details = '') { + if (ok) { + console.log(`${CHECK} ${name}`) + return + } + + failures++ + console.error(`${CROSS} ${name}`) + if (details) console.error(` ${details}`) +} + +function expectEqual(name, actual, expected) { + report(name, actual === expected, `expected: ${expected}\n actual: ${actual}`) +} + +function run() { + console.log('Running rename-svg-import-bindings self-tests...\n') + + expectEqual('prefix: icon from path hint', prefixFromAssetPath('/assets/icon-social-x.svg'), 'icon') + expectEqual('prefix: image from path hint', prefixFromAssetPath('/assets/images/hero-banner.svg'), 'image') + expectEqual('prefix: svg from path hint', prefixFromAssetPath('/assets/svg-set/brand-mark.svg'), 'svg') + expectEqual('prefix: default to image', prefixFromAssetPath('/assets/brand-mark.svg'), 'image') + + expectEqual('legacy: old icon name can become image', legacyToNew('iconSearch', '/assets/search.svg'), 'imageSearchSrc') + expectEqual('legacy: old image name keeps image', legacyToNew('imageHero', '/assets/images/hero.svg'), 'imageHeroSrc') + expectEqual('legacy: old svg name keeps svg', legacyToNew('svgBadge', '/assets/svg/badge.svg'), 'svgBadgeSrc') + expectEqual( + 'legacy: CONSTANT_STYLE gets prefixed by path hint', + legacyToNew('COW_PROTOCOL_LOGO', '/assets/icons/cow.svg'), + 'iconCowProtocolLogoSrc', + ) + + const replaced = replaceIdentifierOutsideStrings( + "const a = iconSearch\nconst b = 'iconSearch'\n// iconSearch\n", + 'iconSearch', + 'imageSearchSrc', + ) + expectEqual( + 'replace: updates code but not strings/comments', + replaced, + "const a = imageSearchSrc\nconst b = 'iconSearch'\n// iconSearch\n", + ) + + const transformed = transformFile( + "import iconSearch from 'assets/search.svg'\nconst img = iconSearch\nconst text = 'iconSearch'\n", + ) + expectEqual( + 'transform: rewrites import + references', + transformed, + "import imageSearchSrc from 'assets/search.svg'\nconst img = imageSearchSrc\nconst text = 'iconSearch'\n", + ) + + console.log('') + if (failures === 0) { + console.log(`${CHECK} All tests passed`) + return + } + + console.error(`${CROSS} ${failures} test(s) failed`) + process.exitCode = 1 +} + +run() From 544db110adc1c628bb76b9ca35fec138e655d68b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Fri, 1 May 2026 19:14:11 +0200 Subject: [PATCH 08/13] fix: update codemod --- tools/codemods/rename-svg-import-bindings.mjs | 122 +++++++++++------- .../rename-svg-import-bindings.test.mjs | 43 ++++-- 2 files changed, 108 insertions(+), 57 deletions(-) diff --git a/tools/codemods/rename-svg-import-bindings.mjs b/tools/codemods/rename-svg-import-bindings.mjs index 59063faa6d..167c13c6c3 100644 --- a/tools/codemods/rename-svg-import-bindings.mjs +++ b/tools/codemods/rename-svg-import-bindings.mjs @@ -1,6 +1,6 @@ /** - * Rename default SVG import bindings to icon*Src / image*Src / svg*Src (outside string literals only). - * Prefix is derived from the asset path (see prefixFromAssetPath); default is image*Src. + * Rename default SVG import bindings to icon*Src / img*Src / svg*Src (outside string literals only). + * Prefix detection is filename-first, then path fallback, then default "img". * Run from repo root: node tools/codemods/rename-svg-import-bindings.mjs */ import { execSync } from 'node:child_process' @@ -8,6 +8,9 @@ import { readFileSync, writeFileSync } from 'node:fs' import { resolve } from 'node:path' import { pathToFileURL } from 'node:url' +// Generic words we strip from the semantic "tail" of the generated binding. +const GENERIC_TAIL_WORDS = new Set(['icon', 'img', 'image', 'svg', 'logo', 'illustration', 'asset', 'assets']) + // Converts SCREAMING_SNAKE_CASE-like names into camelCase. // Example: COW_ICON -> cowIcon export function snakeToCamel(str) { @@ -17,21 +20,55 @@ export function snakeToCamel(str) { return s.replace(/_([a-z0-9])/g, (_, c) => c.toUpperCase()) } -/** icon | image | svg — checked on path with .svg stripped so the extension does not imply "svg" */ +// Split identifiers/paths into lowercase words: +// - handles kebab/snake/dots/slashes +// - handles camelCase / PascalCase boundaries +export function splitWords(value) { + return value + .replace(/([a-z0-9])([A-Z])/g, '$1 $2') + .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2') + .split(/[^A-Za-z0-9]+/) + .filter(Boolean) + .map((w) => w.toLowerCase()) +} + +// Extract the filename segment without ".svg". +export function filenameNoExt(assetPath) { + const file = assetPath.split('/').pop() || assetPath + return file.replace(/\.svg$/i, '') +} + +// Turn words into PascalCase tail. +export function toPascal(words) { + return words.map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('') +} + +// Decide canonical prefix from words. +// We accept plural/path variants via startsWith checks. +export function prefixFromWords(words) { + if (words.some((w) => w.startsWith('icon'))) return 'icon' + if (words.some((w) => w === 'img' || w.startsWith('image') || w.startsWith('img'))) return 'img' + if (words.some((w) => w.startsWith('svg'))) return 'svg' + return null +} + +/** icon | img | svg — filename first, then path fallback, else img */ export function prefixFromAssetPath(assetPath) { - // Remove extension before checks so ".svg" does not force the svg prefix. - const hintPath = assetPath.replace(/\.svg$/i, '').toLowerCase() - // Priority order matters: first matching hint wins. - if (hintPath.includes('icon')) return 'icon' - if (hintPath.includes('image')) return 'image' - if (hintPath.includes('svg')) return 'svg' - // Default to image when there is no explicit hint. - return 'image' + // 1) First, inspect file name (most specific source of intent). + const filePrefix = prefixFromWords(splitWords(filenameNoExt(assetPath))) + if (filePrefix) return filePrefix + + // 2) Fallback to full path (directory names like images/icons/svg). + const pathPrefix = prefixFromWords(splitWords(assetPath.replace(/\.svg$/i, ''))) + if (pathPrefix) return pathPrefix + + // 3) Final fallback when no explicit hint is found. + return 'img' } -// Valid final shape: iconFooSrc / imageFooSrc / svgFooSrc +// Valid final shape: iconFooSrc / imgFooSrc / svgFooSrc export function isValidBinding(name) { - return /^(icon|image|svg)[A-Za-z0-9]+Src$/.test(name) + return /^(icon|img|svg)[A-Za-z0-9]+Src$/.test(name) } // "fooBar" -> "FooBar" @@ -40,46 +77,35 @@ export function camelCaseToPascalFirst(s) { } export function legacyToNew(name, assetPath) { - // Derive desired prefix from the import path. + // Derive desired prefix from filename/path hints. const prefix = prefixFromAssetPath(assetPath) - // Case 1: Already in the new format. - // Keep it as-is if prefix matches, otherwise swap prefix only. - if (isValidBinding(name)) { - const m = name.match(/^(icon|image|svg)([A-Za-z0-9]+)Src$/) - if (m && m[1] === prefix) return name - if (m) return `${prefix}${m[2]}Src` - } + // Build semantic tail from filename first; remove generic words. + const fileWords = splitWords(filenameNoExt(assetPath)) + let tailWords = fileWords.filter((w) => !GENERIC_TAIL_WORDS.has(w)) - // Case 2: Legacy prefixed names without Src suffix. - // Reuse the existing tail but enforce the path-derived prefix. - if (/^icon[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { - return `${prefix}${name.slice(4)}Src` - } - if (/^image[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { - return `${prefix}${name.slice(5)}Src` - } - if (/^svg[A-Za-z0-9]+$/.test(name) && !name.endsWith('Src')) { - return `${prefix}${name.slice(3)}Src` + // If filename contains only generic words, fallback to current binding words. + if (tailWords.length === 0) { + const fallbackCore = name.replace(/Src$/, '').replace(/^(icon|img|image|svg)/i, '') + const fallbackWords = splitWords(fallbackCore).filter((w) => !GENERIC_TAIL_WORDS.has(w)) + tailWords = fallbackWords } - // Case 3: CONSTANT_STYLE legacy names. - // Normalize to camel, drop any old prefix token, then re-prefix. - if (/^[A-Z][A-Z0-9_]*$/.test(name)) { - const c = snakeToCamel(name) - const rest = c.replace(/^(icon|image|svg)/, '') - const tail = rest ? camelCaseToPascalFirst(rest) : camelCaseToPascalFirst(c) - const out = `${prefix}${tail}` - return out.endsWith('Src') ? out : `${out}Src` + // Last-resort tail to keep output deterministic. + if (tailWords.length === 0) { + const fallback = snakeToCamel(name.replace(/Src$/i, '')) || 'asset' + tailWords = splitWords(fallback).filter((w) => !GENERIC_TAIL_WORDS.has(w)) } - // Case 4: generic fallback. - // Remove common semantic suffixes to avoid duplicates like iconFooIconSrc. - let base = name.replace(/Icon$/i, '').replace(/Image$/i, '').replace(/Illustration$/i, '') - // Also trim accidental leading underscores. - base = base.replace(/^_+/, '') - const pascal = camelCaseToPascalFirst(base) - return `${prefix}${pascal}Src` + // If still empty (extremely defensive), use "Asset". + const tail = toPascal(tailWords.length ? tailWords : ['asset']) + + // Canonical output always follows "Src". + const candidate = `${prefix}${tail}Src` + + // Keep unchanged only when name already matches canonical candidate. + if (name === candidate) return name + return candidate } /** Replace `oldName` with `newName` only outside strings / line & block comments */ @@ -193,7 +219,7 @@ export function transformFile(content) { // Preserve either blank line(s) or EOF after each matched import. const tail = '((?:\\r?\\n)+|$)' - // 1) import { default as A, default as B } from 'x.svg' -> import imageFooSrc from 'x.svg' + // 1) import { default as A, default as B } from 'x.svg' -> import imgFooSrc from 'x.svg' out = out.replace( new RegExp( String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*,\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\4${tail}`, @@ -207,7 +233,7 @@ export function transformFile(content) { }, ) - // 2) import { default as A } from 'x.svg' -> import imageFooSrc from 'x.svg' + // 2) import { default as A } from 'x.svg' -> import imgFooSrc from 'x.svg' out = out.replace( new RegExp( String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, diff --git a/tools/codemods/rename-svg-import-bindings.test.mjs b/tools/codemods/rename-svg-import-bindings.test.mjs index ba69213a5a..47fff02618 100644 --- a/tools/codemods/rename-svg-import-bindings.test.mjs +++ b/tools/codemods/rename-svg-import-bindings.test.mjs @@ -29,28 +29,28 @@ function run() { console.log('Running rename-svg-import-bindings self-tests...\n') expectEqual('prefix: icon from path hint', prefixFromAssetPath('/assets/icon-social-x.svg'), 'icon') - expectEqual('prefix: image from path hint', prefixFromAssetPath('/assets/images/hero-banner.svg'), 'image') + expectEqual('prefix: img from path hint', prefixFromAssetPath('/assets/images/hero-banner.svg'), 'img') expectEqual('prefix: svg from path hint', prefixFromAssetPath('/assets/svg-set/brand-mark.svg'), 'svg') - expectEqual('prefix: default to image', prefixFromAssetPath('/assets/brand-mark.svg'), 'image') + expectEqual('prefix: default to img', prefixFromAssetPath('/assets/brand-mark.svg'), 'img') - expectEqual('legacy: old icon name can become image', legacyToNew('iconSearch', '/assets/search.svg'), 'imageSearchSrc') - expectEqual('legacy: old image name keeps image', legacyToNew('imageHero', '/assets/images/hero.svg'), 'imageHeroSrc') + expectEqual('legacy: old icon name can become img', legacyToNew('iconSearch', '/assets/search.svg'), 'imgSearchSrc') + expectEqual('legacy: old image name becomes img', legacyToNew('imageHero', '/assets/images/hero.svg'), 'imgHeroSrc') expectEqual('legacy: old svg name keeps svg', legacyToNew('svgBadge', '/assets/svg/badge.svg'), 'svgBadgeSrc') expectEqual( - 'legacy: CONSTANT_STYLE gets prefixed by path hint', + 'legacy: CONSTANT_STYLE uses filename tail with icon prefix', legacyToNew('COW_PROTOCOL_LOGO', '/assets/icons/cow.svg'), - 'iconCowProtocolLogoSrc', + 'iconCowSrc', ) const replaced = replaceIdentifierOutsideStrings( "const a = iconSearch\nconst b = 'iconSearch'\n// iconSearch\n", 'iconSearch', - 'imageSearchSrc', + 'imgSearchSrc', ) expectEqual( 'replace: updates code but not strings/comments', replaced, - "const a = imageSearchSrc\nconst b = 'iconSearch'\n// iconSearch\n", + "const a = imgSearchSrc\nconst b = 'iconSearch'\n// iconSearch\n", ) const transformed = transformFile( @@ -59,7 +59,32 @@ function run() { expectEqual( 'transform: rewrites import + references', transformed, - "import imageSearchSrc from 'assets/search.svg'\nconst img = imageSearchSrc\nconst text = 'iconSearch'\n", + "import imgSearchSrc from 'assets/search.svg'\nconst img = imgSearchSrc\nconst text = 'iconSearch'\n", + ) + + const transformedLogo = transformFile("import imageEtherscanSrc from 'assets/img/etherscan-logo.svg'\n") + expectEqual( + 'transform: uses "img" prefix and removes generic "logo" token', + transformedLogo, + "import imgEtherscanSrc from 'assets/img/etherscan-logo.svg'\n", + ) + + const transformedImgArrow = transformFile( + "import imageImgIconArrowRightSrc from '@cowprotocol/assets/images/arrow-right.svg'\n", + ) + expectEqual( + 'transform: removes redundant img/icon tokens when filename is arrow-right', + transformedImgArrow, + "import imgArrowRightSrc from '@cowprotocol/assets/images/arrow-right.svg'\n", + ) + + const transformedIconMinus = transformFile( + "import iconImgIconMinusSrc from '@cowprotocol/assets/images/icon-minus.svg'\n", + ) + expectEqual( + 'transform: keeps icon token from filename and drops redundant img token', + transformedIconMinus, + "import iconMinusSrc from '@cowprotocol/assets/images/icon-minus.svg'\n", ) console.log('') From c64eb18a9f6402bc5d002561d0a1cfc818bafb54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Fri, 1 May 2026 20:03:27 +0200 Subject: [PATCH 09/13] fix: fix codemod --- tools/codemods/rename-svg-import-bindings.mjs | 191 +++++++++++++++--- .../rename-svg-import-bindings.test.mjs | 40 ++++ 2 files changed, 205 insertions(+), 26 deletions(-) diff --git a/tools/codemods/rename-svg-import-bindings.mjs b/tools/codemods/rename-svg-import-bindings.mjs index 167c13c6c3..3f07ae6619 100644 --- a/tools/codemods/rename-svg-import-bindings.mjs +++ b/tools/codemods/rename-svg-import-bindings.mjs @@ -1,5 +1,5 @@ /** - * Rename default SVG import bindings to icon*Src / img*Src / svg*Src (outside string literals only). + * Rename default asset import bindings to icon*Src / img*Src / svg*Src (outside string literals only). * Prefix detection is filename-first, then path fallback, then default "img". * Run from repo root: node tools/codemods/rename-svg-import-bindings.mjs */ @@ -10,6 +10,16 @@ import { pathToFileURL } from 'node:url' // Generic words we strip from the semantic "tail" of the generated binding. const GENERIC_TAIL_WORDS = new Set(['icon', 'img', 'image', 'svg', 'logo', 'illustration', 'asset', 'assets']) +// Common path words that should not be used as collision disambiguators. +const GENERIC_PATH_WORDS = new Set([ + ...GENERIC_TAIL_WORDS, + 'src', + 'public', + 'static', + 'media', + 'file', + 'files', +]) // Converts SCREAMING_SNAKE_CASE-like names into camelCase. // Example: COW_ICON -> cowIcon @@ -35,7 +45,7 @@ export function splitWords(value) { // Extract the filename segment without ".svg". export function filenameNoExt(assetPath) { const file = assetPath.split('/').pop() || assetPath - return file.replace(/\.svg$/i, '') + return file.replace(/\.(svg|png|jpe?g|webp|gif)$/i, '') } // Turn words into PascalCase tail. @@ -59,7 +69,7 @@ export function prefixFromAssetPath(assetPath) { if (filePrefix) return filePrefix // 2) Fallback to full path (directory names like images/icons/svg). - const pathPrefix = prefixFromWords(splitWords(assetPath.replace(/\.svg$/i, ''))) + const pathPrefix = prefixFromWords(splitWords(assetPath.replace(/\.(svg|png|jpe?g|webp|gif)$/i, ''))) if (pathPrefix) return pathPrefix // 3) Final fallback when no explicit hint is found. @@ -108,6 +118,67 @@ export function legacyToNew(name, assetPath) { return candidate } +// Produce candidate words from nearest parent directories first. +// Example: /a/b/dark/cow.svg -> ['dark', 'b', 'a'] (generic words removed) +export function disambiguationWordsFromPath(assetPath) { + const noExt = assetPath.replace(/\.(svg|png|jpe?g|webp|gif)$/i, '') + const parts = noExt.split('/').filter(Boolean) + const dirParts = parts.slice(0, -1) + + const words = [] + for (let i = dirParts.length - 1; i >= 0; i--) { + const segmentWords = splitWords(dirParts[i]).filter((w) => !GENERIC_PATH_WORDS.has(w)) + for (const w of segmentWords) words.push(w) + } + + return words +} + +// Ensure generated binding is unique within a file. +// On conflict, append nearest-path qualifiers (Dark/Light/...) before fallback numeric suffix. +export function makeUniqueBinding(baseName, assetPath, usedNames, forceQualifier = false) { + if (!forceQualifier && !usedNames.has(baseName)) return baseName + + const m = baseName.match(/^(icon|img|svg)([A-Za-z0-9]+)Src$/) + if (!m) { + if (!forceQualifier) { + let i = 2 + let candidate = `${baseName}${i}` + while (usedNames.has(candidate)) { + i++ + candidate = `${baseName}${i}` + } + return candidate + } + // If qualifier is forced but base format is unexpected, fall through to numeric suffix. + let i = 2 + let candidate = `${baseName}${i}` + while (usedNames.has(candidate)) { + i++ + candidate = `${baseName}${i}` + } + return candidate + } + + const [, prefix, tail] = m + const tailWords = new Set(splitWords(tail)) + const disambiguationWords = disambiguationWordsFromPath(assetPath) + + for (const w of disambiguationWords) { + if (tailWords.has(w)) continue + const candidate = `${prefix}${tail}${camelCaseToPascalFirst(w)}Src` + if (!usedNames.has(candidate)) return candidate + } + + let i = 2 + let candidate = `${prefix}${tail}${i}Src` + while (usedNames.has(candidate)) { + i++ + candidate = `${prefix}${tail}${i}Src` + } + return candidate +} + /** Replace `oldName` with `newName` only outside strings / line & block comments */ export function replaceIdentifierOutsideStrings(code, oldName, newName) { // Fast path for no-op replacements. @@ -130,18 +201,26 @@ export function replaceIdentifierOutsideStrings(code, oldName, newName) { if (inString) { out += c // Special handling for template string interpolations: `${ ... }` - // We copy the entire expression verbatim without attempting replacements. + // We DO run replacement in the expression body (recursive call) while + // still treating the surrounding template string as a string context. if (inString === '`' && c === '$' && code[i + 1] === '{') { out += '{' i += 2 let depth = 1 + let expr = '' while (i < n && depth > 0) { const ch = code[i] - out += ch if (ch === '{') depth++ else if (ch === '}') depth-- + if (depth === 0) { + i++ + break + } + expr += ch i++ } + out += replaceIdentifierOutsideStrings(expr, oldName, newName) + out += '}' continue } // Handle escaped chars inside strings. @@ -209,9 +288,68 @@ export function replaceIdentifierOutsideStrings(code, oldName, newName) { export function transformFile(content) { // Keep all scheduled symbol replacements, then apply them after imports are rewritten. const reassignments = [] + const usedNames = new Set() + const assignedByOld = new Map() + + // Pre-scan imports so we can force disambiguation when multiple SVG paths + // collapse to the same canonical binding (e.g. dark/cow.svg + light/cow.svg). + const imported = [] + const importTail = '((?:\\r?\\n)+|$)' + const assetExt = String.raw`(?:svg|png|jpe?g|webp|gif)` + const captureAandB = new RegExp( + String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*,\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.${assetExt})\4${importTail}`, + 'gm', + ) + const captureDefaultAs = new RegExp( + String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.${assetExt})\3${importTail}`, + 'gm', + ) + const captureNamespace = new RegExp( + String.raw`^(\s*)import\s+\*\s+as\s+(\w+)\s+from\s+(['"])([^'"]+\.${assetExt})\3${importTail}`, + 'gm', + ) + const captureDefault = new RegExp( + String.raw`^(\s*)import\s+(?!type\s)(\w+)\s+from\s+(['"])([^'"]+\.${assetExt})\3${importTail}`, + 'gm', + ) + + content.replace(captureAandB, (_, __, a, b, ___, path) => { + imported.push({ bind: a, path }, { bind: b, path }) + return _ + }) + content.replace(captureDefaultAs, (_, __, bind, ___, path) => { + imported.push({ bind, path }) + return _ + }) + content.replace(captureNamespace, (_, __, bind, ___, path) => { + imported.push({ bind, path }) + return _ + }) + content.replace(captureDefault, (_, __, bind, ___, path) => { + imported.push({ bind, path }) + return _ + }) + + const baseToDistinctPaths = new Map() + for (const { bind, path } of imported) { + const base = legacyToNew(bind, path) + if (!baseToDistinctPaths.has(base)) baseToDistinctPaths.set(base, new Set()) + baseToDistinctPaths.get(base).add(path) + } + const forcedQualifierBases = new Set( + [...baseToDistinctPaths.entries()].filter(([, paths]) => paths.size > 1).map(([base]) => base), + ) + + function schedule(oldName, newName, assetPath) { + if (assignedByOld.has(oldName)) return assignedByOld.get(oldName) + + const forceQualifier = forcedQualifierBases.has(newName) + const uniqueName = makeUniqueBinding(newName, assetPath, usedNames, forceQualifier) + usedNames.add(uniqueName) + assignedByOld.set(oldName, uniqueName) - function schedule(oldName, newName) { - if (oldName !== newName) reassignments.push({ oldName, newName }) + if (oldName !== uniqueName) reassignments.push({ oldName, newName: uniqueName }) + return uniqueName } // Build transformed source incrementally. @@ -219,50 +357,51 @@ export function transformFile(content) { // Preserve either blank line(s) or EOF after each matched import. const tail = '((?:\\r?\\n)+|$)' - // 1) import { default as A, default as B } from 'x.svg' -> import imgFooSrc from 'x.svg' + // 1) import { default as A, default as B } from 'x.asset' -> import imgFooSrc from 'x.asset' out = out.replace( new RegExp( - String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*,\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\4${tail}`, + String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*,\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.${assetExt})\4${tail}`, 'gm', ), (_, indent, a, b, q, path, trail) => { const next = legacyToNew(a, path) - schedule(a, next) - schedule(b, next) - return `${indent}import ${next} from ${q}${path}${q}${trail}` + const assigned = schedule(a, next, path) + schedule(b, next, path) + // Keep the collapsed single import binding; both old aliases map to it. + return `${indent}import ${assigned} from ${q}${path}${q}${trail}` }, ) - // 2) import { default as A } from 'x.svg' -> import imgFooSrc from 'x.svg' + // 2) import { default as A } from 'x.asset' -> import imgFooSrc from 'x.asset' out = out.replace( new RegExp( - String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, + String.raw`^(\s*)import\s+\{\s*default\s+as\s+(\w+)\s*\}\s+from\s+(['"])([^'"]+\.${assetExt})\3${tail}`, 'gm', ), (_, indent, bind, q, path, trail) => { const next = legacyToNew(bind, path) - schedule(bind, next) - return `${indent}import ${next} from ${q}${path}${q}${trail}` + const assigned = schedule(bind, next, path) + return `${indent}import ${assigned} from ${q}${path}${q}${trail}` }, ) - // 3) import * as A from 'x.svg' -> keep style, only rename binding. + // 3) import * as A from 'x.asset' -> keep style, only rename binding. out = out.replace( - new RegExp(String.raw`^(\s*)import\s+\*\s+as\s+(\w+)\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, 'gm'), + new RegExp(String.raw`^(\s*)import\s+\*\s+as\s+(\w+)\s+from\s+(['"])([^'"]+\.${assetExt})\3${tail}`, 'gm'), (_, indent, bind, q, path, trail) => { const next = legacyToNew(bind, path) - schedule(bind, next) - return `${indent}import * as ${next} from ${q}${path}${q}${trail}` + const assigned = schedule(bind, next, path) + return `${indent}import * as ${assigned} from ${q}${path}${q}${trail}` }, ) - // 4) import A from 'x.svg' -> rename default binding. + // 4) import A from 'x.asset' -> rename default binding. out = out.replace( - new RegExp(String.raw`^(\s*)import\s+(?!type\s)(\w+)\s+from\s+(['"])([^'"]+\.svg)\3${tail}`, 'gm'), + new RegExp(String.raw`^(\s*)import\s+(?!type\s)(\w+)\s+from\s+(['"])([^'"]+\.${assetExt})\3${tail}`, 'gm'), (_, indent, bind, q, path, trail) => { const next = legacyToNew(bind, path) - schedule(bind, next) - return `${indent}import ${next} from ${q}${path}${q}${trail}` + const assigned = schedule(bind, next, path) + return `${indent}import ${assigned} from ${q}${path}${q}${trail}` }, ) @@ -291,10 +430,10 @@ export function main() { .split('\n') // Restrict to JS/TS source-like files. .filter((f) => /\.(tsx|ts|jsx|js|mts)$/.test(f)) - // Keep only files that contain an .svg import-like string. + // Keep only files that contain a supported asset import-like string. .filter((f) => { try { - return /\.svg['"]/.test(readFileSync(f, 'utf8')) + return /\.(svg|png|jpe?g|webp|gif)['"]/.test(readFileSync(f, 'utf8')) } catch { // Ignore unreadable files defensively. return false diff --git a/tools/codemods/rename-svg-import-bindings.test.mjs b/tools/codemods/rename-svg-import-bindings.test.mjs index 47fff02618..90278ffe34 100644 --- a/tools/codemods/rename-svg-import-bindings.test.mjs +++ b/tools/codemods/rename-svg-import-bindings.test.mjs @@ -87,6 +87,46 @@ function run() { "import iconMinusSrc from '@cowprotocol/assets/images/icon-minus.svg'\n", ) + const transformedTemplateInterpolation = transformFile( + "import IMAGE_BACKGROUND_DARK from '@cowprotocol/assets/images/background-cowswap-darkmode.svg'\n" + + 'const styles = `background: url(${IMAGE_BACKGROUND_DARK}) no-repeat;`\n', + ) + expectEqual( + 'transform: replaces identifiers used inside template interpolation', + transformedTemplateInterpolation, + "import imgBackgroundCowswapDarkmodeSrc from '@cowprotocol/assets/images/background-cowswap-darkmode.svg'\n" + + 'const styles = `background: url(${imgBackgroundCowswapDarkmodeSrc}) no-repeat;`\n', + ) + + const transformedSameBasenameCollision = transformFile( + "import CowDark from '@cowprotocol/assets/images/404/swap/dark/cow.svg'\n" + + "import CowLight from '@cowprotocol/assets/images/404/swap/light/cow.svg'\n", + ) + expectEqual( + 'transform: avoids collisions for same filename in different folders', + transformedSameBasenameCollision, + "import imgCowDarkSrc from '@cowprotocol/assets/images/404/swap/dark/cow.svg'\n" + + "import imgCowLightSrc from '@cowprotocol/assets/images/404/swap/light/cow.svg'\n", + ) + + const transformedWalletAssets = transformFile( + "import CoinbaseWalletIcon from './api/assets/coinbase.svg'\n" + + "import MetaMaskLogo from './api/assets/metamask.png'\n" + + "import WalletConnectIcon from './api/assets/walletConnectIcon.svg'\n" + + '\n' + + 'export { CoinbaseWalletIcon, WalletConnectIcon, MetaMaskLogo }\n', + ) + expectEqual( + 'transform: updates asset imports and export bindings in wallet assets re-export file', + transformedWalletAssets, + "import imgCoinbaseSrc from './api/assets/coinbase.svg'\n" + + "import imgMetamaskSrc from './api/assets/metamask.png'\n" + + "import iconWalletConnectSrc from './api/assets/walletConnectIcon.svg'\n" + + '\n' + + 'export { imgCoinbaseSrc, iconWalletConnectSrc, imgMetamaskSrc }\n', + ) + + console.log('') if (failures === 0) { console.log(`${CHECK} All tests passed`) From aba97dfa2d0322afca70f6d08a144d7205bd9e6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Fri, 1 May 2026 20:13:12 +0200 Subject: [PATCH 10/13] fix: undo debugging change --- .../ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx index 656de19e3e..f0e6be4a82 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import orderPresignaturePendingIcon from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' +import imgOrderPresignaturePendingSrc from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' import { ZERO_FRACTION } from '@cowprotocol/common-const' import { Currency, Price } from '@cowprotocol/currency' import { Command, UiOrderType } from '@cowprotocol/types' @@ -90,7 +90,7 @@ export function OrderFillsAt({ } > - + Please sign order @@ -157,8 +157,7 @@ export function OrderFillsAt({ return ( - {false && - !isUnfillable && + {!isUnfillable && priceDiffs?.percentage && Math.abs(Number(priceDiffs.percentage.toFixed(4))) <= PENDING_EXECUTION_THRESHOLD_PERCENTAGE ? ( Date: Fri, 1 May 2026 20:18:14 +0200 Subject: [PATCH 11/13] fix: update codemod --- tools/codemods/rename-svg-import-bindings.mjs | 23 ++++++++++++- .../rename-svg-import-bindings.test.mjs | 34 +++++++++---------- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/tools/codemods/rename-svg-import-bindings.mjs b/tools/codemods/rename-svg-import-bindings.mjs index 3f07ae6619..98962836c4 100644 --- a/tools/codemods/rename-svg-import-bindings.mjs +++ b/tools/codemods/rename-svg-import-bindings.mjs @@ -48,6 +48,12 @@ export function filenameNoExt(assetPath) { return file.replace(/\.(svg|png|jpe?g|webp|gif)$/i, '') } +// Read normalized extension without the dot (svg/png/jpg/...). +export function assetExt(assetPath) { + const m = assetPath.toLowerCase().match(/\.([a-z0-9]+)$/) + return m ? m[1] : '' +} + // Turn words into PascalCase tail. export function toPascal(words) { return words.map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('') @@ -62,8 +68,23 @@ export function prefixFromWords(words) { return null } -/** icon | img | svg — filename first, then path fallback, else img */ +/** For .svg: icon|svg only. For raster assets: icon|img|svg, fallback img. */ export function prefixFromAssetPath(assetPath) { + const ext = assetExt(assetPath) + const isSvg = ext === 'svg' + + // For SVG imports lint only allows icon*Src or svg*Src. + if (isSvg) { + const fileWords = splitWords(filenameNoExt(assetPath)) + const pathWords = splitWords(assetPath.replace(/\.(svg|png|jpe?g|webp|gif)$/i, '')) + + if (fileWords.some((w) => w.startsWith('icon')) || pathWords.some((w) => w.startsWith('icon'))) { + return 'icon' + } + + return 'svg' + } + // 1) First, inspect file name (most specific source of intent). const filePrefix = prefixFromWords(splitWords(filenameNoExt(assetPath))) if (filePrefix) return filePrefix diff --git a/tools/codemods/rename-svg-import-bindings.test.mjs b/tools/codemods/rename-svg-import-bindings.test.mjs index 90278ffe34..6bb98e2542 100644 --- a/tools/codemods/rename-svg-import-bindings.test.mjs +++ b/tools/codemods/rename-svg-import-bindings.test.mjs @@ -29,12 +29,12 @@ function run() { console.log('Running rename-svg-import-bindings self-tests...\n') expectEqual('prefix: icon from path hint', prefixFromAssetPath('/assets/icon-social-x.svg'), 'icon') - expectEqual('prefix: img from path hint', prefixFromAssetPath('/assets/images/hero-banner.svg'), 'img') + expectEqual('prefix: svg from generic svg file', prefixFromAssetPath('/assets/images/hero-banner.svg'), 'svg') expectEqual('prefix: svg from path hint', prefixFromAssetPath('/assets/svg-set/brand-mark.svg'), 'svg') - expectEqual('prefix: default to img', prefixFromAssetPath('/assets/brand-mark.svg'), 'img') + expectEqual('prefix: default to svg for .svg files', prefixFromAssetPath('/assets/brand-mark.svg'), 'svg') - expectEqual('legacy: old icon name can become img', legacyToNew('iconSearch', '/assets/search.svg'), 'imgSearchSrc') - expectEqual('legacy: old image name becomes img', legacyToNew('imageHero', '/assets/images/hero.svg'), 'imgHeroSrc') + expectEqual('legacy: old icon name can become svg', legacyToNew('iconSearch', '/assets/search.svg'), 'svgSearchSrc') + expectEqual('legacy: old image name becomes svg', legacyToNew('imageHero', '/assets/images/hero.svg'), 'svgHeroSrc') expectEqual('legacy: old svg name keeps svg', legacyToNew('svgBadge', '/assets/svg/badge.svg'), 'svgBadgeSrc') expectEqual( 'legacy: CONSTANT_STYLE uses filename tail with icon prefix', @@ -45,12 +45,12 @@ function run() { const replaced = replaceIdentifierOutsideStrings( "const a = iconSearch\nconst b = 'iconSearch'\n// iconSearch\n", 'iconSearch', - 'imgSearchSrc', + 'svgSearchSrc', ) expectEqual( 'replace: updates code but not strings/comments', replaced, - "const a = imgSearchSrc\nconst b = 'iconSearch'\n// iconSearch\n", + "const a = svgSearchSrc\nconst b = 'iconSearch'\n// iconSearch\n", ) const transformed = transformFile( @@ -59,23 +59,23 @@ function run() { expectEqual( 'transform: rewrites import + references', transformed, - "import imgSearchSrc from 'assets/search.svg'\nconst img = imgSearchSrc\nconst text = 'iconSearch'\n", + "import svgSearchSrc from 'assets/search.svg'\nconst img = svgSearchSrc\nconst text = 'iconSearch'\n", ) const transformedLogo = transformFile("import imageEtherscanSrc from 'assets/img/etherscan-logo.svg'\n") expectEqual( - 'transform: uses "img" prefix and removes generic "logo" token', + 'transform: uses "svg" prefix for non-icon svg and removes generic "logo" token', transformedLogo, - "import imgEtherscanSrc from 'assets/img/etherscan-logo.svg'\n", + "import svgEtherscanSrc from 'assets/img/etherscan-logo.svg'\n", ) const transformedImgArrow = transformFile( "import imageImgIconArrowRightSrc from '@cowprotocol/assets/images/arrow-right.svg'\n", ) expectEqual( - 'transform: removes redundant img/icon tokens when filename is arrow-right', + 'transform: removes redundant img/icon tokens and normalizes to svg prefix', transformedImgArrow, - "import imgArrowRightSrc from '@cowprotocol/assets/images/arrow-right.svg'\n", + "import svgArrowRightSrc from '@cowprotocol/assets/images/arrow-right.svg'\n", ) const transformedIconMinus = transformFile( @@ -94,8 +94,8 @@ function run() { expectEqual( 'transform: replaces identifiers used inside template interpolation', transformedTemplateInterpolation, - "import imgBackgroundCowswapDarkmodeSrc from '@cowprotocol/assets/images/background-cowswap-darkmode.svg'\n" + - 'const styles = `background: url(${imgBackgroundCowswapDarkmodeSrc}) no-repeat;`\n', + "import svgBackgroundCowswapDarkmodeSrc from '@cowprotocol/assets/images/background-cowswap-darkmode.svg'\n" + + 'const styles = `background: url(${svgBackgroundCowswapDarkmodeSrc}) no-repeat;`\n', ) const transformedSameBasenameCollision = transformFile( @@ -105,8 +105,8 @@ function run() { expectEqual( 'transform: avoids collisions for same filename in different folders', transformedSameBasenameCollision, - "import imgCowDarkSrc from '@cowprotocol/assets/images/404/swap/dark/cow.svg'\n" + - "import imgCowLightSrc from '@cowprotocol/assets/images/404/swap/light/cow.svg'\n", + "import svgCowDarkSrc from '@cowprotocol/assets/images/404/swap/dark/cow.svg'\n" + + "import svgCowLightSrc from '@cowprotocol/assets/images/404/swap/light/cow.svg'\n", ) const transformedWalletAssets = transformFile( @@ -119,11 +119,11 @@ function run() { expectEqual( 'transform: updates asset imports and export bindings in wallet assets re-export file', transformedWalletAssets, - "import imgCoinbaseSrc from './api/assets/coinbase.svg'\n" + + "import svgCoinbaseSrc from './api/assets/coinbase.svg'\n" + "import imgMetamaskSrc from './api/assets/metamask.png'\n" + "import iconWalletConnectSrc from './api/assets/walletConnectIcon.svg'\n" + '\n' + - 'export { imgCoinbaseSrc, iconWalletConnectSrc, imgMetamaskSrc }\n', + 'export { svgCoinbaseSrc, iconWalletConnectSrc, imgMetamaskSrc }\n', ) From 0e35c946c932e236079378898338d5f63a42ad17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Fri, 1 May 2026 20:25:06 +0200 Subject: [PATCH 12/13] fix: run codemod and manually fix some imports --- .../app/(main)/affiliate-program/page.tsx | 12 +- apps/cow-fi/app/(main)/cow-amm/page.tsx | 32 ++--- apps/cow-fi/app/(main)/cow-protocol/page.tsx | 64 ++++----- apps/cow-fi/app/(main)/cow-swap/page.tsx | 22 ++-- apps/cow-fi/app/(main)/page.tsx | 12 +- apps/cow-fi/app/(main)/widget/page.tsx | 8 +- apps/cow-fi/components/ArrowButton.tsx | 4 +- apps/cow-fi/components/CowSaucerScene.tsx | 16 +-- apps/cow-fi/components/DaosPageComponent.tsx | 16 +-- apps/cow-fi/components/FAQ.tsx | 8 +- apps/cow-fi/components/LearnPageComponent.tsx | 4 +- apps/cow-fi/components/SearchBar/index.tsx | 8 +- apps/cow-fi/data/affiliate-program/const.tsx | 12 +- apps/cow-fi/data/cow-amm/const.tsx | 20 +-- apps/cow-fi/data/cow-protocol/const.tsx | 124 +++++++++--------- apps/cow-fi/data/cow-swap/const.tsx | 36 ++--- apps/cow-fi/data/home/const.tsx | 28 ++-- apps/cow-fi/data/mev-blocker/const.tsx | 68 +++++----- .../src/common/constants/routes.ts | 4 +- .../ReceiverPanelBody.container.tsx | 4 +- .../ReceiverPanelHeader.container.tsx | 4 +- .../pure/CoWAmmBannerContent/Common/index.tsx | 4 +- .../CoWAmmBannerContent/LpEmblems/index.tsx | 4 +- .../common/pure/CoWAmmBannerContent/const.ts | 16 +-- .../src/common/pure/NewModal/index.cosmos.tsx | 4 +- .../src/common/pure/NewModal/index.tsx | 4 +- .../src/common/pure/PermitModal/index.tsx | 4 +- .../src/common/pure/Stepper/index.tsx | 4 +- .../common/pure/ToggleArrow/ToggleArrow.tsx | 4 +- .../cowswap-frontend/src/cosmos.decorator.tsx | 6 +- .../src/legacy/components/AMMsLogo/index.tsx | 60 ++++----- .../legacy/components/AppziButton/index.tsx | 4 +- .../components/CowProtocolLogo/index.tsx | 4 +- .../ErrorBoundary/ChunkLoadError.tsx | 4 +- .../ErrorBoundary/ErrorWithStackTrace.tsx | 4 +- .../components/Tokens/TokensTableRow.tsx | 4 +- .../src/legacy/components/Version/index.tsx | 8 +- apps/cowswap-frontend/src/locales/en-US.po | 5 +- .../containers/Transaction/StatusDetails.tsx | 28 ++-- .../accountProxy/pure/FAQContent/index.tsx | 6 +- .../pure/WalletNotConnected/index.tsx | 4 +- .../containers/AffiliatePartnerCodeInfo.tsx | 12 +- .../containers/AffiliatePartnerOnboard.tsx | 4 +- .../containers/AffiliatePartnerQrModal.tsx | 12 +- .../containers/AffiliateTraderCodeInfo.tsx | 8 +- .../AffiliateTraderModalCodeInfo.tsx | 4 +- .../AffiliateTraderModalIneligible.tsx | 4 +- .../AffiliateTraderModalUnsupported.tsx | 4 +- .../containers/AffiliateTraderOnboard.tsx | 4 +- .../AffiliateTraderIneligible.tsx | 4 +- .../AffiliateTradeCodeForm.tsx | 4 +- .../pure/RefCodeInput/RefCodeAdornment.tsx | 16 +-- .../application/containers/App/styled.ts | 46 +++---- .../modules/bridge/pure/StopStatus/index.tsx | 18 +-- .../TransactionLinkDisplay.tsx | 4 +- .../FailedBridgingContent/index.tsx | 4 +- .../RefundedBridgingContent/index.tsx | 4 +- .../contents/SwapResultContent/contents.tsx | 4 +- .../erc20Approve/pure/Toggle/Toggle.tsx | 4 +- .../ethFlow/pure/EthFlowBanner/index.tsx | 4 +- .../pure/EthFlowStepper/steps/Step1.tsx | 16 +-- .../pure/EthFlowStepper/steps/Step2.tsx | 20 +-- .../pure/EthFlowStepper/steps/Step3.tsx | 24 ++-- .../containers/FortuneWidget/index.tsx | 8 +- .../containers/HookRegistryList/index.tsx | 4 +- .../containers/HookSearchInput/index.tsx | 4 +- .../containers/HooksStoreWidget/index.tsx | 4 +- .../containers/PostHookButton/index.tsx | 4 +- .../containers/PreHookButton/index.tsx | 4 +- .../hooksStore/pure/AppliedHookItem/index.tsx | 16 +-- .../hooksStore/pure/HookListItem/index.tsx | 4 +- .../containers/RateInput/index.tsx | 10 +- .../pure/BottomBanners/BottomBanners.pure.tsx | 4 +- .../pure/LimitOrdersDetails/index.tsx | 4 +- .../limitOrders/pure/OrderType/index.tsx | 4 +- .../containers/NotificationBell.tsx | 4 +- .../containers/NotificationSettings.tsx | 4 +- .../containers/NotificationSidebar/index.tsx | 4 +- .../containers/NotificationSidebar/styled.tsx | 8 +- .../containers/NotificationsList/index.tsx | 4 +- .../src/modules/orderProgressBar/constants.ts | 16 +-- .../orderProgressBar/pure/TopSections.tsx | 16 +-- .../SurplusModal.tsx | 12 +- .../pure/steps/ExpiredStep.tsx | 8 +- .../pure/steps/FinishedStep.tsx | 4 +- .../orderProgressBar/pure/steps/styled.ts | 4 +- .../OrderEstimatedExecutionPrice.pure.tsx | 8 +- .../pure/OrderFillsAt/OrderFillsAt.pure.tsx | 4 +- .../OrderStatusBox/OrderStatusBox.pure.tsx | 4 +- .../NoWallet/OrdersTableNoWalletContent.tsx | 4 +- .../WarningTooltip/WarningTooltip.pure.tsx | 4 +- .../pure/OrdersTabs/OrdersTabs.pure.tsx | 8 +- .../pure/ReceiptModal/fields/SafeTxFields.tsx | 4 +- .../BottomBanners/BottomBanners.container.tsx | 4 +- .../pure/CrossChainUnlockScreen/index.tsx | 4 +- .../pure/CrossChainUnlockScreen/styled.tsx | 4 +- .../pure/ChainsSelector/ChainButton.tsx | 4 +- .../pure/TokenSourceTitle/index.tsx | 4 +- .../tokensList/pure/TokenTags/index.tsx | 4 +- .../TradeWidget/TradeWidgetForm.tsx | 4 +- .../containers/TradeWidgetLinks/index.tsx | 4 +- .../pure/LimitOrdersPromoBanner/index.tsx | 4 +- .../trade/pure/ReceiveAmountTitle/index.tsx | 4 +- .../trade/pure/Settings/SettingsIcon.tsx | 4 +- .../trade/pure/TradeNumberInput/index.tsx | 6 +- .../trade/pure/UnlockWidgetScreen/index.tsx | 4 +- .../SettingsDropdown.container.tsx | 4 +- .../containers/TwapFormWidget/tooltips.tsx | 4 +- .../modules/wallet/pure/StatusIcon/index.tsx | 6 +- .../wallet/pure/Web3StatusInner/index.tsx | 4 +- .../src/pages/Account/Balances.tsx | 12 +- .../src/pages/Account/Delegate.tsx | 8 +- .../pages/Account/LockedGnoVesting/index.tsx | 8 +- .../error/AnySwapAffectedUsers/index.tsx | 4 +- .../pages/error/NotFound/CowSaucerScene.tsx | 6 +- .../src/pages/games/MevSlicer/index.tsx | 4 +- apps/explorer/src/components/Tooltip.tsx | 6 +- .../BlockExplorerLink/BlockExplorerLink.tsx | 2 +- .../common/CardRow/CardRow.stories.tsx | 4 +- .../src/components/common/CowLoading.tsx | 4 +- .../src/components/common/LogoWrapper.ts | 8 +- .../MenuDropdown/MainMenuTree.stories.tsx | 22 ++-- .../MenuDropdown/MenuDropdownItem.stories.tsx | 18 +-- .../components/common/MenuDropdown/index.tsx | 4 +- .../common/MenuDropdown/mainMenu.ts | 22 ++-- .../common/TableSearch/TableSearch.tsx | 4 +- .../src/components/common/TokenImg/index.tsx | 4 +- .../layout/GenericLayout/Footer/index.tsx | 7 +- .../components/orders/OrderNotFound/index.tsx | 4 +- .../VolumeChart/VolumeChart.styled.ts | 4 +- .../TransanctionBatchGraph/hooks.ts | 4 +- .../TransanctionBatchGraph/styled.ts | 20 +-- .../components/common/Search/index.tsx | 4 +- .../src/app/embedDialog/index.tsx | 16 +-- .../src/containers/Footer/footer.constants.ts | 20 +-- .../src/containers/Footer/footerAnimation.tsx | 6 +- libs/ui/src/containers/Footer/index.tsx | 4 +- libs/ui/src/pure/ArrowIcon/index.tsx | 4 +- .../pure/CollapsibleInlineBanner/index.tsx | 4 +- libs/ui/src/pure/HelpTooltip/index.tsx | 4 +- libs/ui/src/pure/Icon/index.tsx | 14 +- libs/ui/src/pure/MenuBar/index.tsx | 43 +++--- libs/ui/src/pure/ProductLogo/index.tsx | 78 +++++------ libs/wallet/src/assets.ts | 8 +- 144 files changed, 781 insertions(+), 776 deletions(-) diff --git a/apps/cow-fi/app/(main)/affiliate-program/page.tsx b/apps/cow-fi/app/(main)/affiliate-program/page.tsx index 3cba9e49ea..22d50c6e3a 100644 --- a/apps/cow-fi/app/(main)/affiliate-program/page.tsx +++ b/apps/cow-fi/app/(main)/affiliate-program/page.tsx @@ -2,9 +2,9 @@ import type { ReactNode } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' -import IMG_ICON_COW_LENS from '@cowprotocol/assets/images/icon-cow-lens.svg' -import IMG_ICON_FAQ from '@cowprotocol/assets/images/icon-faq.svg' -import IMG_COWSWAP_HERO from '@cowprotocol/assets/images/image-affiliate-hero.svg' +import iconCowLensSrc from '@cowprotocol/assets/images/icon-cow-lens.svg' +import iconFaqSrc from '@cowprotocol/assets/images/icon-faq.svg' +import svgAffiliateHeroSrc from '@cowprotocol/assets/images/image-affiliate-hero.svg' import { useFeatureFlags } from '@cowprotocol/common-hooks' import { Media, ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' @@ -93,7 +93,7 @@ function AffiliateHero({ sendEvent }: { sendEvent: SendEvent }): ReactNode { color={`var(${UI.COLOR_BLUE_900_PRIMARY})`} marginMobile="24px auto 56px" > - + ) @@ -108,7 +108,7 @@ function HowItWorksSection(): ReactNode { - + The more you moo, the more you earn @@ -197,7 +197,7 @@ function AffiliateFaqSection({ sendEvent }: { sendEvent: SendEvent }): ReactNode - + FAQs diff --git a/apps/cow-fi/app/(main)/cow-amm/page.tsx b/apps/cow-fi/app/(main)/cow-amm/page.tsx index 06bdc3f870..ba4a5ab44f 100644 --- a/apps/cow-fi/app/(main)/cow-amm/page.tsx +++ b/apps/cow-fi/app/(main)/cow-amm/page.tsx @@ -1,13 +1,13 @@ 'use client' import { useCowAnalytics } from '@cowprotocol/analytics' -import IMG_ICON_BULB_COW from '@cowprotocol/assets/images/icon-bulb-cow.svg' -import IMG_ICON_CROWN_COW from '@cowprotocol/assets/images/icon-crown-cow.svg' -import IMG_ICON_FAQ from '@cowprotocol/assets/images/icon-faq.svg' -import IMG_COWAMM_HERO from '@cowprotocol/assets/images/image-cowamm-hero.svg' -import IMG_COWAMM_PASSIVE from '@cowprotocol/assets/images/image-cowamm-passive.svg' -import IMG_COWAMM_RAISING from '@cowprotocol/assets/images/image-cowamm-raising.svg' -import IMG_COWAMM_REKT from '@cowprotocol/assets/images/image-cowamm-rekt.svg' +import iconBulbCowSrc from '@cowprotocol/assets/images/icon-bulb-cow.svg' +import iconCrownCowSrc from '@cowprotocol/assets/images/icon-crown-cow.svg' +import iconFaqSrc from '@cowprotocol/assets/images/icon-faq.svg' +import svgCowammHeroSrc from '@cowprotocol/assets/images/image-cowamm-hero.svg' +import svgCowammPassiveSrc from '@cowprotocol/assets/images/image-cowamm-passive.svg' +import svgCowammRaisingSrc from '@cowprotocol/assets/images/image-cowamm-raising.svg' +import svgCowammRektSrc from '@cowprotocol/assets/images/image-cowamm-rekt.svg' import { Color, ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' import { CowFiCategory } from 'src/common/analytics/types' @@ -71,7 +71,7 @@ export default function Page() { - + @@ -114,7 +114,7 @@ export default function Page() { - + AMMs don't want you to know about LVR @@ -165,7 +165,7 @@ export default function Page() { color={`var(${UI.COLOR_NEUTRAL_10})`} > - + Finally, an AMM designed with LPs in mind @@ -210,7 +210,7 @@ export default function Page() { - + Raising the bar curve @@ -246,7 +246,7 @@ export default function Page() { orderReverseTablet borderRadius={32} > - + @@ -257,7 +257,7 @@ export default function Page() { - + CoW AMM benefits LPs of all types @@ -281,7 +281,7 @@ export default function Page() { orderReverseTablet borderRadius={32} > - + Provide liquidity for your token without getting rekt @@ -320,7 +320,7 @@ export default function Page() { orderReverseTablet borderRadius={32} > - + @@ -362,7 +362,7 @@ export default function Page() { - + FAQs diff --git a/apps/cow-fi/app/(main)/cow-protocol/page.tsx b/apps/cow-fi/app/(main)/cow-protocol/page.tsx index 680e63627d..3e4cd61986 100644 --- a/apps/cow-fi/app/(main)/cow-protocol/page.tsx +++ b/apps/cow-fi/app/(main)/cow-protocol/page.tsx @@ -1,21 +1,21 @@ 'use client' -import IMG_ICON_BUILD_WITH_COW from '@cowprotocol/assets/images/icon-build-with-cow.svg' -import IMG_ICON_BULB_COW from '@cowprotocol/assets/images/icon-bulb-cow.svg' -import IMG_COW_LENS from '@cowprotocol/assets/images/icon-cow-lens.svg' -import IMG_ICON_CROWN_COW from '@cowprotocol/assets/images/icon-crown-cow.svg' -import IMG_ICON_FAQ from '@cowprotocol/assets/images/icon-faq.svg' -import IMG_ICON_GHOST from '@cowprotocol/assets/images/icon-ghost.svg' -import IMG_LOGO_CURVE from '@cowprotocol/assets/images/icon-logo-curve.svg' -import IMG_LOGO_LIDO from '@cowprotocol/assets/images/icon-logo-lido.svg' -import IMG_LOGO_SAFE from '@cowprotocol/assets/images/icon-logo-safe.svg' -import IMG_ICON_OWL from '@cowprotocol/assets/images/icon-owl.svg' -import IMG_ICON_SECURE from '@cowprotocol/assets/images/icon-secure.svg' -import IMG_BATCHAUCTIONS from '@cowprotocol/assets/images/image-batchauctions.svg' -import IMG_COW_BITS from '@cowprotocol/assets/images/image-cow-bits.svg' -import IMG_INTENTS from '@cowprotocol/assets/images/image-intents.svg' -import IMG_LEADING from '@cowprotocol/assets/images/image-leading.svg' -import IMG_SOLVERS from '@cowprotocol/assets/images/image-solvers.svg' +import iconBuildWithCowSrc from '@cowprotocol/assets/images/icon-build-with-cow.svg' +import iconBulbCowSrc from '@cowprotocol/assets/images/icon-bulb-cow.svg' +import iconCowLensSrc from '@cowprotocol/assets/images/icon-cow-lens.svg' +import iconCrownCowSrc from '@cowprotocol/assets/images/icon-crown-cow.svg' +import iconFaqSrc from '@cowprotocol/assets/images/icon-faq.svg' +import iconGhostSrc from '@cowprotocol/assets/images/icon-ghost.svg' +import iconCurveSrc from '@cowprotocol/assets/images/icon-logo-curve.svg' +import iconLidoSrc from '@cowprotocol/assets/images/icon-logo-lido.svg' +import iconSafeSrc from '@cowprotocol/assets/images/icon-logo-safe.svg' +import iconOwlSrc from '@cowprotocol/assets/images/icon-owl.svg' +import iconSecureSrc from '@cowprotocol/assets/images/icon-secure.svg' +import svgBatchauctionsSrc from '@cowprotocol/assets/images/image-batchauctions.svg' +import svgCowBitsSrc from '@cowprotocol/assets/images/image-cow-bits.svg' +import svgIntentsSrc from '@cowprotocol/assets/images/image-intents.svg' +import svgLeadingSrc from '@cowprotocol/assets/images/image-leading.svg' +import svgSolversSrc from '@cowprotocol/assets/images/image-solvers.svg' import { Color, ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' import { CowFiCategory, toCowFiGtmEvent } from 'src/common/analytics/types' @@ -85,7 +85,7 @@ export default function Page() { - + @@ -126,7 +126,7 @@ export default function Page() { - + The leading intents-based DEX aggregation protocol @@ -135,7 +135,7 @@ export default function Page() { - + @@ -144,7 +144,7 @@ export default function Page() { - + How it works @@ -185,7 +185,7 @@ export default function Page() { orderReverseTablet borderRadius={90} > - + @@ -200,7 +200,7 @@ export default function Page() { orderReverseTablet borderRadius={90} > - + Solvers @@ -257,7 +257,7 @@ export default function Page() { orderReverseMobile borderRadius={90} > - + @@ -344,7 +344,7 @@ export default function Page() { - + Powering innovation across DeFi @@ -358,7 +358,7 @@ export default function Page() { asProp="div" > - + Automating advanced treasury tasks @@ -378,7 +378,7 @@ export default function Page() { asProp="div" > - + @@ -401,7 +401,7 @@ export default function Page() { asProp="div" > - + Powering native swaps @@ -420,9 +420,9 @@ export default function Page() { - + - + Trusted by the best @@ -522,7 +522,7 @@ export default function Page() { - + Build with CoW Protocol @@ -578,7 +578,7 @@ export default function Page() { - + Want to build a solver? @@ -616,7 +616,7 @@ export default function Page() { - + FAQs diff --git a/apps/cow-fi/app/(main)/cow-swap/page.tsx b/apps/cow-fi/app/(main)/cow-swap/page.tsx index 7c346677ab..22a32e7e1d 100644 --- a/apps/cow-fi/app/(main)/cow-swap/page.tsx +++ b/apps/cow-fi/app/(main)/cow-swap/page.tsx @@ -4,11 +4,11 @@ import type { ReactNode } from 'react' import { useEffect, useRef } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' -import ICON_BULB from '@cowprotocol/assets/images/icon-bulb-cow.svg' -import IMG_ICON_FAQ from '@cowprotocol/assets/images/icon-faq.svg' -import IMG_ICON_FLOWER_COW from '@cowprotocol/assets/images/icon-flower-cow.svg' -import IMG_ICON_UNICORN from '@cowprotocol/assets/images/icon-unicorn.svg' -import IMG_COWSWAP_HERO from '@cowprotocol/assets/images/image-cowswap-hero.svg' +import iconBulbCowSrc from '@cowprotocol/assets/images/icon-bulb-cow.svg' +import iconFaqSrc from '@cowprotocol/assets/images/icon-faq.svg' +import iconFlowerCowSrc from '@cowprotocol/assets/images/icon-flower-cow.svg' +import iconUnicornSrc from '@cowprotocol/assets/images/icon-unicorn.svg' +import svgCowswapHeroSrc from '@cowprotocol/assets/images/image-cowswap-hero.svg' import { Color, ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' import { CowFiCategory } from 'src/common/analytics/types' @@ -100,7 +100,7 @@ export default function Page(): ReactNode { - + @@ -147,9 +147,9 @@ export default function Page(): ReactNode { - + - + CoW Swap is different @@ -186,7 +186,7 @@ export default function Page(): ReactNode { - + CoW Swap is the first user interface built on top of CoW Protocol @@ -215,7 +215,7 @@ export default function Page(): ReactNode { - + S-moooo-th trading @@ -397,7 +397,7 @@ export default function Page(): ReactNode { - + FAQs diff --git a/apps/cow-fi/app/(main)/page.tsx b/apps/cow-fi/app/(main)/page.tsx index 2b6d15f238..d35928fb65 100644 --- a/apps/cow-fi/app/(main)/page.tsx +++ b/apps/cow-fi/app/(main)/page.tsx @@ -1,9 +1,9 @@ 'use client' import { useCowAnalytics } from '@cowprotocol/analytics' -import IMG_ICON_BULB_COW from '@cowprotocol/assets/images/icon-bulb-cow.svg' -import IMG_ICON_GOVERNANCE from '@cowprotocol/assets/images/icon-governance.svg' -import IMG_ICON_GRANTS_CARTON from '@cowprotocol/assets/images/icon-grants-carton.svg' +import iconBulbCowSrc from '@cowprotocol/assets/images/icon-bulb-cow.svg' +import iconGovernanceSrc from '@cowprotocol/assets/images/icon-governance.svg' +import iconGrantsCartonSrc from '@cowprotocol/assets/images/icon-grants-carton.svg' import VIDEO_HERO_HOME from '@cowprotocol/assets/video/cow-dao-hero-animation.mp4' import { Font, UI } from '@cowprotocol/ui' @@ -61,7 +61,7 @@ export default function Page() { - + Innovation in action @@ -85,7 +85,7 @@ export default function Page() { - + Governance - + Grants - + - + Trusted by the best diff --git a/apps/cow-fi/components/ArrowButton.tsx b/apps/cow-fi/components/ArrowButton.tsx index a31a69b777..c17043d73d 100644 --- a/apps/cow-fi/components/ArrowButton.tsx +++ b/apps/cow-fi/components/ArrowButton.tsx @@ -1,4 +1,4 @@ -import IMG_ICON_ARROW_RIGHT from '@cowprotocol/assets/images/arrow-right.svg' +import svgArrowRightSrc from '@cowprotocol/assets/images/arrow-right.svg' import { Font, UI } from '@cowprotocol/ui' import Link from 'next/link' @@ -66,7 +66,7 @@ export const ArrowButton = ({ link, external = false, text }: ArrowButtonProps) {text && {text}} - + ) diff --git a/apps/cow-fi/components/CowSaucerScene.tsx b/apps/cow-fi/components/CowSaucerScene.tsx index cda95826df..7f620ca68a 100644 --- a/apps/cow-fi/components/CowSaucerScene.tsx +++ b/apps/cow-fi/components/CowSaucerScene.tsx @@ -2,10 +2,10 @@ import { ReactNode } from 'react' -import BG_IMAGE_MED from '@cowprotocol/assets/images/404/cowfi/bg-med.svg' -import BG_IMAGE_SMALL from '@cowprotocol/assets/images/404/cowfi/bg-small.svg' -import BG_IMAGE from '@cowprotocol/assets/images/404/cowfi/bg.svg' -import COW_IMAGE from '@cowprotocol/assets/images/404/cowfi/cow.svg' +import svgBgMedSrc from '@cowprotocol/assets/images/404/cowfi/bg-med.svg' +import svgBgSmallSrc from '@cowprotocol/assets/images/404/cowfi/bg-small.svg' +import svgBgSrc from '@cowprotocol/assets/images/404/cowfi/bg.svg' +import svgCowSrc from '@cowprotocol/assets/images/404/cowfi/cow.svg' import { CowSaucerScene as BaseCowSaucerScene, COWFI_SAUCER_PALETTE_LIGHT, Media } from '@cowprotocol/ui' import styled from 'styled-components/macro' @@ -17,16 +17,16 @@ const SceneSection = styled.section` width: 100%; margin: 0 0 calc(${FOOTER_OVERLAP} * -1); padding-bottom: ${FOOTER_OVERLAP}; - background: url(${BG_IMAGE}) left bottom / 100% auto no-repeat; + background: url(${svgBgSrc}) left bottom / 100% auto no-repeat; overflow: hidden; ${Media.upToMedium()} { margin-top: -10rem; - background-image: url(${BG_IMAGE_MED}); + background-image: url(${svgBgMedSrc}); } ${Media.upToSmall()} { - background-image: url(${BG_IMAGE_SMALL}); + background-image: url(${svgBgSmallSrc}); } ` @@ -37,7 +37,7 @@ const SceneAnimation = styled(BaseCowSaucerScene)` export function CowSaucerScene(): ReactNode { return ( - + ) } diff --git a/apps/cow-fi/components/DaosPageComponent.tsx b/apps/cow-fi/components/DaosPageComponent.tsx index 83fa2edd4f..e424d8c0e1 100644 --- a/apps/cow-fi/components/DaosPageComponent.tsx +++ b/apps/cow-fi/components/DaosPageComponent.tsx @@ -3,10 +3,10 @@ import { useCowAnalytics } from '@cowprotocol/analytics' import 'swiper/css' import 'swiper/css/pagination' import 'swiper/css/navigation' -import IMG_ICON_BULB_COW from '@cowprotocol/assets/images/icon-bulb-cow.svg' -import IMG_ICON_CROWN_COW from '@cowprotocol/assets/images/icon-crown-cow.svg' -import IMG_ICON_GHOST from '@cowprotocol/assets/images/icon-ghost.svg' -import IMG_ICON_OWL from '@cowprotocol/assets/images/icon-owl.svg' +import iconBulbCowSrc from '@cowprotocol/assets/images/icon-bulb-cow.svg' +import iconCrownCowSrc from '@cowprotocol/assets/images/icon-crown-cow.svg' +import iconGhostSrc from '@cowprotocol/assets/images/icon-ghost.svg' +import iconOwlSrc from '@cowprotocol/assets/images/icon-owl.svg' import { Color, ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' import { CowFiCategory } from 'src/common/analytics/types' @@ -53,7 +53,7 @@ export function DaosPageComponent() { The smartest DAOs trust CoW Swap with their most-important trades - + @@ -79,7 +79,7 @@ export function DaosPageComponent() { - + Expert trading for expert DAOs @@ -309,9 +309,9 @@ export function DaosPageComponent() { - + - + Trusted by the best diff --git a/apps/cow-fi/components/FAQ.tsx b/apps/cow-fi/components/FAQ.tsx index 61594d03e8..8f96edcf65 100644 --- a/apps/cow-fi/components/FAQ.tsx +++ b/apps/cow-fi/components/FAQ.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' -import IMG_ICON_MINUS from '@cowprotocol/assets/images/icon-minus.svg' -import IMG_ICON_PLUS from '@cowprotocol/assets/images/icon-plus.svg' +import iconMinusSrc from '@cowprotocol/assets/images/icon-minus.svg' +import iconPlusSrc from '@cowprotocol/assets/images/icon-plus.svg' import { Font, Media, UI } from '@cowprotocol/ui' import SVG from 'react-inlinesvg' @@ -140,11 +140,11 @@ const FAQItem: React.FC = ({ question, answer }) => { {question} {isOpen ? ( - + ) : ( - + )} diff --git a/apps/cow-fi/components/LearnPageComponent.tsx b/apps/cow-fi/components/LearnPageComponent.tsx index 12406a3c6a..607f12c850 100644 --- a/apps/cow-fi/components/LearnPageComponent.tsx +++ b/apps/cow-fi/components/LearnPageComponent.tsx @@ -3,7 +3,7 @@ import type { ReactNode } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' -import IMG_ICON_BULB_COW from '@cowprotocol/assets/images/icon-bulb-cow.svg' +import iconBulbCowSrc from '@cowprotocol/assets/images/icon-bulb-cow.svg' import { Font, Media, UI } from '@cowprotocol/ui' import { CowFiCategory } from 'src/common/analytics/types' @@ -326,7 +326,7 @@ export function LearnPageComponent({ categories, featuredArticles }: PageProps): - + Explore, learn, integrate CoW DAO documentation diff --git a/apps/cow-fi/components/SearchBar/index.tsx b/apps/cow-fi/components/SearchBar/index.tsx index 3a75b4e1aa..14c99d4814 100644 --- a/apps/cow-fi/components/SearchBar/index.tsx +++ b/apps/cow-fi/components/SearchBar/index.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react' -import IMG_ICON_SEARCH from '@cowprotocol/assets/images/icon-search.svg' -import IMG_ICON_X from '@cowprotocol/assets/images/x.svg' +import iconSearchSrc from '@cowprotocol/assets/images/icon-search.svg' +import svgXSrc from '@cowprotocol/assets/images/x.svg' import { useDebounce, useMediaQuery, useOnClickOutside } from '@cowprotocol/common-hooks' import { Media } from '@cowprotocol/ui' @@ -204,7 +204,7 @@ export const SearchBar: React.FC = () => { - + = () => { } }} > - + )} diff --git a/apps/cow-fi/data/affiliate-program/const.tsx b/apps/cow-fi/data/affiliate-program/const.tsx index 43191dddfb..41704164c0 100644 --- a/apps/cow-fi/data/affiliate-program/const.tsx +++ b/apps/cow-fi/data/affiliate-program/const.tsx @@ -1,8 +1,8 @@ import type { ReactNode } from 'react' -import IMG_AFFILIATE_EARN from '@cowprotocol/assets/images/image-affiliate-earn.svg' -import IMG_GENERATE_LINK from '@cowprotocol/assets/images/image-generate-link.svg' -import IMG_SHARE_IT from '@cowprotocol/assets/images/image-shareit.svg' +import svgAffiliateEarnSrc from '@cowprotocol/assets/images/image-affiliate-earn.svg' +import svgGenerateLinkSrc from '@cowprotocol/assets/images/image-generate-link.svg' +import svgShareitSrc from '@cowprotocol/assets/images/image-shareit.svg' import { UI } from '@cowprotocol/ui' import { Link } from '@/components/Link' @@ -29,7 +29,7 @@ export const AFFILIATE_PROGRAM_STEPS = [ bgColor: `var(${UI.COLOR_YELLOW_800_PRIMARY})`, textColor: `var(${UI.COLOR_YELLOW_300_PRIMARY})`, descriptionColor: `var(${UI.COLOR_YELLOW_300_PRIMARY})`, - image: IMG_GENERATE_LINK, + image: svgGenerateLinkSrc, imageHeight: 128, }, { @@ -39,7 +39,7 @@ export const AFFILIATE_PROGRAM_STEPS = [ bgColor: `var(${UI.COLOR_YELLOW_300_PRIMARY})`, textColor: `var(${UI.COLOR_YELLOW_800_PRIMARY})`, descriptionColor: `var(${UI.COLOR_YELLOW_800_PRIMARY})`, - image: IMG_SHARE_IT, + image: svgShareitSrc, imageHeight: 132, }, { @@ -49,7 +49,7 @@ export const AFFILIATE_PROGRAM_STEPS = [ bgColor: `var(${UI.COLOR_YELLOW_700_PRIMARY})`, textColor: `var(${UI.COLOR_NEUTRAL_100})`, descriptionColor: `var(${UI.COLOR_NEUTRAL_100})`, - image: IMG_AFFILIATE_EARN, + image: svgAffiliateEarnSrc, imageHeight: 128, }, ] as const diff --git a/apps/cow-fi/data/cow-amm/const.tsx b/apps/cow-fi/data/cow-amm/const.tsx index 840ce22adf..e4eabae186 100644 --- a/apps/cow-fi/data/cow-amm/const.tsx +++ b/apps/cow-fi/data/cow-amm/const.tsx @@ -1,9 +1,9 @@ import { initGtm } from '@cowprotocol/analytics' -import IMG_COWAMM_LP_1 from '@cowprotocol/assets/images/image-cowamm-lp-1.svg' -import IMG_COWAMM_LP_2 from '@cowprotocol/assets/images/image-cowamm-lp-2.svg' -import IMG_COWAMM_LP_3 from '@cowprotocol/assets/images/image-cowamm-lp-3.svg' -import IMG_COWAMM_LP_4 from '@cowprotocol/assets/images/image-cowamm-lp-4.svg' -import IMG_COWAMM_LVR from '@cowprotocol/assets/images/image-cowamm-lvr.svg' +import svgCowammLp1Src from '@cowprotocol/assets/images/image-cowamm-lp-1.svg' +import svgCowammLp2Src from '@cowprotocol/assets/images/image-cowamm-lp-2.svg' +import svgCowammLp3Src from '@cowprotocol/assets/images/image-cowamm-lp-3.svg' +import svgCowammLp4Src from '@cowprotocol/assets/images/image-cowamm-lp-4.svg' +import svgCowammLvrSrc from '@cowprotocol/assets/images/image-cowamm-lvr.svg' import { Color } from '@cowprotocol/ui' import { CowFiCategory } from 'src/common/analytics/types' @@ -57,25 +57,25 @@ export const COW_AMM_CONTENT = [ 'Liquidity providers deposit tokens into protected CoW AMM liquidity pools, where traders can access the liquidity', bgColor: Color.cowamm_dark_green2, textColor: Color.cowamm_light_green, - image: IMG_COWAMM_LP_1, + image: svgCowammLp1Src, }, { description: 'Solvers bid to rebalance CoW AMM pools whenever there is an arbitrage opportunity', bgColor: Color.cowamm_dark_green2, textColor: Color.cowamm_light_green, - image: IMG_COWAMM_LP_2, + image: svgCowammLp2Src, }, { description: 'The solver that offers the most surplus to the pool wins the right to rebalance the pool', bgColor: Color.cowamm_dark_green2, textColor: Color.cowamm_light_green, - image: IMG_COWAMM_LP_3, + image: svgCowammLp3Src, }, { description: 'CoW AMM eliminates LVR by capturing arbitrage value for LPs and shielding it from MEV bots', bgColor: Color.cowamm_dark_green2, textColor: Color.cowamm_light_green, - image: IMG_COWAMM_LP_4, + image: svgCowammLp4Src, }, ] @@ -92,7 +92,7 @@ export const LVR_CONTENT = [ description2: "Andrea Canidio and Robin Fritsch, Arbitrageurs' profits, LVR, and sandwich attacks: batch trading as an AMM design response (November 2023)", bgColor: 'transparent', - image: IMG_COWAMM_LVR, + image: svgCowammLvrSrc, }, ] diff --git a/apps/cow-fi/data/cow-protocol/const.tsx b/apps/cow-fi/data/cow-protocol/const.tsx index 6935ce579b..fc6c3c2746 100644 --- a/apps/cow-fi/data/cow-protocol/const.tsx +++ b/apps/cow-fi/data/cow-protocol/const.tsx @@ -1,37 +1,37 @@ import { ReactNode } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' -import IMG_DOCS from '@cowprotocol/assets/images/image-docs.svg' -import IMG_GRANT_COLOR from '@cowprotocol/assets/images/image-grant-color.svg' -import IMG_HOOKS from '@cowprotocol/assets/images/image-hooks.svg' -import IMG_MILKMAN from '@cowprotocol/assets/images/image-milkman.svg' -import IMG_PROGRAMMATIC_ORDERS from '@cowprotocol/assets/images/image-programmatic-orders.svg' -import IMG_SMARTORDERS from '@cowprotocol/assets/images/image-smartorders.svg' -import IMG_SURPLUS from '@cowprotocol/assets/images/image-surplus.svg' -import IMG_TWAP from '@cowprotocol/assets/images/image-twap.svg' -import IMG_WIDGET from '@cowprotocol/assets/images/image-widget.svg' -import IMG_LOGO_AAVE from '@cowprotocol/assets/images/logo-aave-icon.svg' -import IMG_LOGO_ALCHEMIX from '@cowprotocol/assets/images/logo-alchemix.svg' -import IMG_LOGO_ARAGON from '@cowprotocol/assets/images/logo-aragon.svg' -import IMG_LOGO_AURA from '@cowprotocol/assets/images/logo-aura.svg' -import IMG_LOGO_BALANCER from '@cowprotocol/assets/images/logo-balancer.svg' -import IMG_LOGO_CURVE_TEXT from '@cowprotocol/assets/images/logo-curve-text.svg' -import IMG_LOGO_ENS from '@cowprotocol/assets/images/logo-ens-icon.svg' -import IMG_LOGO_FRAX_FINANCE from '@cowprotocol/assets/images/logo-frax.svg' -import IMG_LOGO_GNOSIS from '@cowprotocol/assets/images/logo-gnosis.svg' -import IMG_LOGO_INDEX_COOP from '@cowprotocol/assets/images/logo-index.svg' -import IMG_LOGO_KARPATKEY from '@cowprotocol/assets/images/logo-karpatkey.svg' -import IMG_LOGO_LIDO from '@cowprotocol/assets/images/logo-lido.svg' -import IMG_LOGO_MAKER from '@cowprotocol/assets/images/logo-maker.svg' -import IMG_LOGO_NEXUS from '@cowprotocol/assets/images/logo-nexus-icon.svg' -import IMG_LOGO_PLEASER_DAO from '@cowprotocol/assets/images/logo-pleasrdao.svg' -import IMG_LOGO_POLYGON from '@cowprotocol/assets/images/logo-polygon.svg' -import IMG_LOGO_RHINO_FI from '@cowprotocol/assets/images/logo-rhino.svg' -import IMG_LOGO_SAFE from '@cowprotocol/assets/images/logo-safe.svg' -import IMG_LOGO_SHAPESHIFT from '@cowprotocol/assets/images/logo-shapeshift.svg' -import IMG_LOGO_STAKE_DAO from '@cowprotocol/assets/images/logo-stakedao.svg' -import IMG_LOGO_SYNTHETIX from '@cowprotocol/assets/images/logo-synthetix.svg' -import IMG_LOGO_TELLER_FINANCE from '@cowprotocol/assets/images/logo-teller.svg' +import svgDocsSrc from '@cowprotocol/assets/images/image-docs.svg' +import svgGrantColorSrc from '@cowprotocol/assets/images/image-grant-color.svg' +import svgHooksSrc from '@cowprotocol/assets/images/image-hooks.svg' +import svgMilkmanSrc from '@cowprotocol/assets/images/image-milkman.svg' +import svgProgrammaticOrdersSrc from '@cowprotocol/assets/images/image-programmatic-orders.svg' +import svgSmartordersSrc from '@cowprotocol/assets/images/image-smartorders.svg' +import svgSurplusSrc from '@cowprotocol/assets/images/image-surplus.svg' +import svgTwapSrc from '@cowprotocol/assets/images/image-twap.svg' +import svgWidgetSrc from '@cowprotocol/assets/images/image-widget.svg' +import iconAaveSrc from '@cowprotocol/assets/images/logo-aave-icon.svg' +import svgAlchemixSrc from '@cowprotocol/assets/images/logo-alchemix.svg' +import svgAragonSrc from '@cowprotocol/assets/images/logo-aragon.svg' +import svgAuraSrc from '@cowprotocol/assets/images/logo-aura.svg' +import svgBalancerSrc from '@cowprotocol/assets/images/logo-balancer.svg' +import svgCurveTextSrc from '@cowprotocol/assets/images/logo-curve-text.svg' +import iconEnsSrc from '@cowprotocol/assets/images/logo-ens-icon.svg' +import svgFraxSrc from '@cowprotocol/assets/images/logo-frax.svg' +import svgGnosisSrc from '@cowprotocol/assets/images/logo-gnosis.svg' +import svgIndexSrc from '@cowprotocol/assets/images/logo-index.svg' +import svgKarpatkeySrc from '@cowprotocol/assets/images/logo-karpatkey.svg' +import svgLidoSrc from '@cowprotocol/assets/images/logo-lido.svg' +import svgMakerSrc from '@cowprotocol/assets/images/logo-maker.svg' +import iconNexusSrc from '@cowprotocol/assets/images/logo-nexus-icon.svg' +import svgPleasrdaoSrc from '@cowprotocol/assets/images/logo-pleasrdao.svg' +import svgPolygonSrc from '@cowprotocol/assets/images/logo-polygon.svg' +import svgRhinoSrc from '@cowprotocol/assets/images/logo-rhino.svg' +import svgSafeSrc from '@cowprotocol/assets/images/logo-safe.svg' +import svgShapeshiftSrc from '@cowprotocol/assets/images/logo-shapeshift.svg' +import svgStakedaoSrc from '@cowprotocol/assets/images/logo-stakedao.svg' +import svgSynthetixSrc from '@cowprotocol/assets/images/logo-synthetix.svg' +import svgTellerSrc from '@cowprotocol/assets/images/logo-teller.svg' import { getAvailableChainsText } from '@cowprotocol/common-const' import { Color } from '@cowprotocol/ui' @@ -429,7 +429,7 @@ export const ADVANCED_ORDER_TYPES = [ bgColor: Color.cowfi_purple1, textColor: Color.cowfi_purple2, titleColor: Color.neutral98, - imageSrc: IMG_SURPLUS, + imageSrc: svgSurplusSrc, }, { title: 'TWAP orders', @@ -438,7 +438,7 @@ export const ADVANCED_ORDER_TYPES = [ bgColor: Color.cowfi_purple_bright, textColor: Color.cowfi_purple1, titleColor: Color.cowfi_purple_dark, - imageSrc: IMG_TWAP, + imageSrc: svgTwapSrc, }, { title: 'Milkman orders', @@ -447,7 +447,7 @@ export const ADVANCED_ORDER_TYPES = [ bgColor: Color.cowfi_purple_dark, textColor: Color.cowfi_purple_bright, titleColor: Color.neutral98, - imageSrc: IMG_MILKMAN, + imageSrc: svgMilkmanSrc, }, ] @@ -458,7 +458,7 @@ export const UNIQUE_TRADING_LOGIC = [ bgColor: Color.cowfi_purple2, textColor: Color.cowfi_purple1, titleColor: Color.cowfi_purple_dark, - imageSrc: IMG_SMARTORDERS, + imageSrc: svgSmartordersSrc, }, { title: 'Programmatic orders', @@ -466,7 +466,7 @@ export const UNIQUE_TRADING_LOGIC = [ bgColor: Color.cowfi_purple_dark, textColor: Color.cowfi_purple_bright, titleColor: Color.neutral98, - imageSrc: IMG_PROGRAMMATIC_ORDERS, + imageSrc: svgProgrammaticOrdersSrc, }, { title: 'Hooks', @@ -475,14 +475,14 @@ export const UNIQUE_TRADING_LOGIC = [ bgColor: Color.cowfi_purple3, textColor: Color.cowfi_purple_bright, titleColor: Color.neutral98, - imageSrc: IMG_HOOKS, + imageSrc: svgHooksSrc, }, ] export const TOP_LOGOS = [ - { src: IMG_LOGO_LIDO, alt: 'Lido', url: 'https://lido.fi/' }, - { src: IMG_LOGO_CURVE_TEXT, alt: 'Curve', url: 'https://curve.finance/' }, - { src: IMG_LOGO_SAFE, alt: 'Safe', url: 'https://safe.global/' }, + { src: svgLidoSrc, alt: 'Lido', url: 'https://lido.fi/' }, + { src: svgCurveTextSrc, alt: 'Curve', url: 'https://curve.finance/' }, + { src: svgSafeSrc, alt: 'Safe', url: 'https://safe.global/' }, ] export const CASE_STUDIES = [ @@ -490,40 +490,40 @@ export const CASE_STUDIES = [ title: 'Aave', description: 'Aave DAO used CoW Swap to swap over $4 million directly into a Balancer liquidity pool', link: '/learn/aave-trade-breakdown', - logo: IMG_LOGO_AAVE, + logo: iconAaveSrc, }, { title: 'ENS', description: 'ENS DAO traded a whopping 10,000 ETH for USDC through CoW Swap', link: '/learn/ens-trade-breakdown', - logo: IMG_LOGO_ENS, + logo: iconEnsSrc, }, { title: 'Nexus Mutual', description: 'In the largest DAO trade ever, Nexus Mutual relied on CoW Swap to trade 14,400 ETH for rETH, a liquid staking token', link: '/learn/nexus-mutual-trade-breakdown', - logo: IMG_LOGO_NEXUS, + logo: iconNexusSrc, }, ] export const ALL_LOGOS = [ - { src: IMG_LOGO_GNOSIS, alt: 'Gnosis', url: 'https://www.gnosis.io/' }, - { src: IMG_LOGO_BALANCER, alt: 'Balancer', url: 'https://balancer.fi/' }, - { src: IMG_LOGO_AURA, alt: 'Aura', url: 'https://aura.finance/' }, - { src: IMG_LOGO_KARPATKEY, alt: 'Karpatkey', url: 'https://www.karpatkey.com/' }, - { src: IMG_LOGO_SHAPESHIFT, alt: 'Shapeshift', url: 'https://shapeshift.com/' }, - { src: IMG_LOGO_MAKER, alt: 'Maker', url: 'https://makerdao.com/' }, - { src: IMG_LOGO_SYNTHETIX, alt: 'Synthetix', url: 'https://synthetix.io/' }, - { src: IMG_LOGO_ARAGON, alt: 'Aragon', url: 'https://aragon.org/' }, - { src: IMG_LOGO_PLEASER_DAO, alt: 'Pleaser DAO', url: 'https://pleasr.org/' }, - { src: IMG_LOGO_POLYGON, alt: 'Polygon', url: 'https://polygon.technology/' }, - { src: IMG_LOGO_INDEX_COOP, alt: 'Index Coop', url: 'https://indexcoop.com/' }, - { src: IMG_LOGO_ALCHEMIX, alt: 'Alchemix', url: 'https://alchemix.fi/' }, - { src: IMG_LOGO_STAKE_DAO, alt: 'StakeDAO', url: 'https://stakedao.org/' }, - { src: IMG_LOGO_RHINO_FI, alt: 'RhinoFi', url: 'https://rhino.fi/' }, - { src: IMG_LOGO_TELLER_FINANCE, alt: 'Teller Finance', url: 'https://teller.finance/' }, - { src: IMG_LOGO_FRAX_FINANCE, alt: 'Frax Finance', url: 'https://frax.finance/' }, + { src: svgGnosisSrc, alt: 'Gnosis', url: 'https://www.gnosis.io/' }, + { src: svgBalancerSrc, alt: 'Balancer', url: 'https://balancer.fi/' }, + { src: svgAuraSrc, alt: 'Aura', url: 'https://aura.finance/' }, + { src: svgKarpatkeySrc, alt: 'Karpatkey', url: 'https://www.karpatkey.com/' }, + { src: svgShapeshiftSrc, alt: 'Shapeshift', url: 'https://shapeshift.com/' }, + { src: svgMakerSrc, alt: 'Maker', url: 'https://makerdao.com/' }, + { src: svgSynthetixSrc, alt: 'Synthetix', url: 'https://synthetix.io/' }, + { src: svgAragonSrc, alt: 'Aragon', url: 'https://aragon.org/' }, + { src: svgPleasrdaoSrc, alt: 'Pleaser DAO', url: 'https://pleasr.org/' }, + { src: svgPolygonSrc, alt: 'Polygon', url: 'https://polygon.technology/' }, + { src: svgIndexSrc, alt: 'Index Coop', url: 'https://indexcoop.com/' }, + { src: svgAlchemixSrc, alt: 'Alchemix', url: 'https://alchemix.fi/' }, + { src: svgStakedaoSrc, alt: 'StakeDAO', url: 'https://stakedao.org/' }, + { src: svgRhinoSrc, alt: 'RhinoFi', url: 'https://rhino.fi/' }, + { src: svgTellerSrc, alt: 'Teller Finance', url: 'https://teller.finance/' }, + { src: svgFraxSrc, alt: 'Frax Finance', url: 'https://frax.finance/' }, ] export const COW_PROTOCOL_SECTIONS = [ @@ -538,7 +538,7 @@ export const COW_PROTOCOL_SECTIONS = [ linkText: 'Read the docs', linkEvent: 'click-docs', linkUtmContent: 'cow-protocol-docs', - imageSrc: IMG_DOCS, + imageSrc: svgDocsSrc, }, { title: 'For DeFi projects', @@ -550,7 +550,7 @@ export const COW_PROTOCOL_SECTIONS = [ linkHref: '/widget', linkText: 'Integrate the widget', linkEvent: 'click-integrate-widget', - imageSrc: IMG_WIDGET, + imageSrc: svgWidgetSrc, }, { title: 'For anyone', @@ -563,6 +563,6 @@ export const COW_PROTOCOL_SECTIONS = [ linkText: 'Apply for a grant', linkEvent: 'click-apply-for-a-grant', linkUtmContent: 'cow-protocol-grants', - imageSrc: IMG_GRANT_COLOR, + imageSrc: svgGrantColorSrc, }, ] diff --git a/apps/cow-fi/data/cow-swap/const.tsx b/apps/cow-fi/data/cow-swap/const.tsx index f5fda69bfd..caa1e9a709 100644 --- a/apps/cow-fi/data/cow-swap/const.tsx +++ b/apps/cow-fi/data/cow-swap/const.tsx @@ -1,13 +1,13 @@ import { initGtm } from '@cowprotocol/analytics' -import IMG_COWSWAP_COINS from '@cowprotocol/assets/images/image-coins.svg' -import IMG_COWSWAP_GASLESS from '@cowprotocol/assets/images/image-cowswap-gasless.svg' -import IMG_COWSWAP_LIMIT from '@cowprotocol/assets/images/image-cowswap-limit.svg' -import IMG_COWSWAP_MEV from '@cowprotocol/assets/images/image-cowswap-mev.svg' -import IMG_COWSWAP_MULTIPLE from '@cowprotocol/assets/images/image-cowswap-multiple.svg' -import IMG_COWSWAP_NOFEES from '@cowprotocol/assets/images/image-cowswap-nofees.svg' -import IMG_COWSWAP_SWAPS from '@cowprotocol/assets/images/image-cowswap-swaps.svg' -import IMG_COWSWAP_TWAP from '@cowprotocol/assets/images/image-cowswap-twap.svg' -import IMG_COWSWAP_UX from '@cowprotocol/assets/images/image-cowswap-ux.svg' +import svgCoinsSrc from '@cowprotocol/assets/images/image-coins.svg' +import svgCowswapGaslessSrc from '@cowprotocol/assets/images/image-cowswap-gasless.svg' +import svgCowswapLimitSrc from '@cowprotocol/assets/images/image-cowswap-limit.svg' +import svgCowswapMevSrc from '@cowprotocol/assets/images/image-cowswap-mev.svg' +import svgCowswapMultipleSrc from '@cowprotocol/assets/images/image-cowswap-multiple.svg' +import svgCowswapNofeesSrc from '@cowprotocol/assets/images/image-cowswap-nofees.svg' +import svgCowswapSwapsSrc from '@cowprotocol/assets/images/image-cowswap-swaps.svg' +import svgCowswapTwapSrc from '@cowprotocol/assets/images/image-cowswap-twap.svg' +import svgCowswapUxSrc from '@cowprotocol/assets/images/image-cowswap-ux.svg' import { getAvailableChainsText } from '@cowprotocol/common-const' import { Color, UI } from '@cowprotocol/ui' @@ -23,21 +23,21 @@ export const COW_IS_DIFFERENT = [ fontSize: 28, color: `var(${UI.COLOR_BLUE_900_PRIMARY})`, description: "By aligning incentives between solvers and users, CoW Swap finds surplus you won't get anywhere else", - imgSrc: IMG_COWSWAP_COINS, + imgSrc: svgCoinsSrc, }, { bgColor: `var(${UI.COLOR_BLUE_900_PRIMARY})`, fontSize: 28, color: `var(${UI.COLOR_BLUE_100_PRIMARY})`, description: 'MEV is a $1.4+ billion problem that you never have to worry about on CoW Swap', - imgSrc: IMG_COWSWAP_MEV, + imgSrc: svgCowswapMevSrc, }, { bgColor: `var(${UI.COLOR_BLUE_100_PRIMARY})`, fontSize: 28, color: `var(${UI.COLOR_BLUE_900_PRIMARY})`, description: "CoW Swap's unique architecture enables advanced order types and seamless UX", - imgSrc: IMG_COWSWAP_UX, + imgSrc: svgCowswapUxSrc, }, ] @@ -48,7 +48,7 @@ export const ADVANCED_ORDER_TYPES = [ titleColor: Color.neutral98, title: 'Market orders (aka swaps)', description: 'CoW Swap market orders maximize surplus and minimize MEV', - imgSrc: IMG_COWSWAP_SWAPS, + imgSrc: svgCowswapSwapsSrc, }, { bgColor: `var(${UI.COLOR_BLUE_100_PRIMARY})`, @@ -57,7 +57,7 @@ export const ADVANCED_ORDER_TYPES = [ title: 'Limit orders', description: 'Placing a limit order is like setting a trap for a price for your trade. CoW Swap is the only DEX that offers surplus on limit orders – and one of the only DEXs that offers limit orders at all', - imgSrc: IMG_COWSWAP_LIMIT, + imgSrc: svgCowswapLimitSrc, }, { bgColor: Color.cowfi_lightBlue4, @@ -66,7 +66,7 @@ export const ADVANCED_ORDER_TYPES = [ title: 'TWAP orders', description: 'Time-weighted average price (TWAP) orders minimize price impact and volatility risk by letting you trade assets at fixed intervals over a period of time', - imgSrc: IMG_COWSWAP_TWAP, + imgSrc: svgCowswapTwapSrc, }, ] @@ -77,7 +77,7 @@ export const BETTER_UX = [ titleColor: `var(${UI.COLOR_BLUE_900_PRIMARY})`, title: 'Gasless trading', description: 'All gas fees are paid in the sell token - so you can save your precious ETH', - imgSrc: IMG_COWSWAP_GASLESS, + imgSrc: svgCowswapGaslessSrc, }, { bgColor: `var(${UI.COLOR_BLUE_900_PRIMARY})`, @@ -85,7 +85,7 @@ export const BETTER_UX = [ titleColor: Color.neutral98, title: 'No fees for failed transactions', description: "You shouldn't pay for what didn't work, so failed transactions are always free", - imgSrc: IMG_COWSWAP_NOFEES, + imgSrc: svgCowswapNofeesSrc, }, { bgColor: `var(${UI.COLOR_BLUE_100_PRIMARY})`, @@ -93,7 +93,7 @@ export const BETTER_UX = [ titleColor: `var(${UI.COLOR_BLUE_900_PRIMARY})`, title: 'Execute multiple trades at once', description: 'With intent-based trading, you can place as many orders as you want simultaneously', - imgSrc: IMG_COWSWAP_MULTIPLE, + imgSrc: svgCowswapMultipleSrc, }, ] diff --git a/apps/cow-fi/data/home/const.tsx b/apps/cow-fi/data/home/const.tsx index 166792ee29..83ebaa8540 100644 --- a/apps/cow-fi/data/home/const.tsx +++ b/apps/cow-fi/data/home/const.tsx @@ -1,11 +1,11 @@ import { initGtm } from '@cowprotocol/analytics' -import IMG_BITS from '@cowprotocol/assets/images/image-bits.svg' -import IMG_COINS from '@cowprotocol/assets/images/image-coins.svg' -import IMG_DISCORD from '@cowprotocol/assets/images/image-discord.svg' -import IMG_FORUM from '@cowprotocol/assets/images/image-forum.svg' -import IMG_GREEN_WAVES from '@cowprotocol/assets/images/image-green-waves.svg' -import IMG_SNAPSHOT from '@cowprotocol/assets/images/image-snapshot.svg' -import IMG_TUBE from '@cowprotocol/assets/images/image-tube.svg' +import svgBitsSrc from '@cowprotocol/assets/images/image-bits.svg' +import svgCoinsSrc from '@cowprotocol/assets/images/image-coins.svg' +import svgDiscordSrc from '@cowprotocol/assets/images/image-discord.svg' +import svgForumSrc from '@cowprotocol/assets/images/image-forum.svg' +import svgGreenWavesSrc from '@cowprotocol/assets/images/image-green-waves.svg' +import svgSnapshotSrc from '@cowprotocol/assets/images/image-snapshot.svg' +import svgTubeSrc from '@cowprotocol/assets/images/image-tube.svg' import { Color, ProductVariant, UI } from '@cowprotocol/ui' import SVG from 'react-inlinesvg' @@ -41,7 +41,7 @@ export const PRODUCT_LIST = [ linkBgColor: Color.cowfi_purple_bright, linkColor: Color.cowfi_purple_dark, productVariant: ProductVariant.CowDao, - iconImage: IMG_BITS, + iconImage: svgBitsSrc, }, { title: 'CoW Swap', @@ -57,7 +57,7 @@ export const PRODUCT_LIST = [ linkBgColor: `var(${UI.COLOR_BLUE_900_PRIMARY})`, linkColor: `var(${UI.COLOR_BLUE_300_PRIMARY})`, productVariant: ProductVariant.CowDao, - iconImage: IMG_COINS, + iconImage: svgCoinsSrc, }, { title: 'CoW AMM', @@ -71,7 +71,7 @@ export const PRODUCT_LIST = [ linkBgColor: Color.cowamm_green, linkColor: Color.cowamm_dark_green, productVariant: ProductVariant.CowDao, - iconImage: IMG_GREEN_WAVES, + iconImage: svgGreenWavesSrc, }, { title: 'MEV Blocker', @@ -85,7 +85,7 @@ export const PRODUCT_LIST = [ linkBgColor: Color.cowfi_orange_bright, linkColor: Color.cowfi_orange_pale, productVariant: ProductVariant.MevBlocker, - iconImage: IMG_TUBE, + iconImage: svgTubeSrc, }, ] @@ -96,7 +96,7 @@ export const CHANNEL_LIST = [ linkEvent: 'click-discord', iconColor: Color.cowfi_discord_pink, textColor: `var(${UI.COLOR_NEUTRAL_10})`, - iconImage: IMG_DISCORD, + iconImage: svgDiscordSrc, }, { title: 'Forum', @@ -104,7 +104,7 @@ export const CHANNEL_LIST = [ linkEvent: 'click-forum', iconColor: Color.cowamm_dark_green, textColor: Color.neutral98, - iconImage: IMG_FORUM, + iconImage: svgForumSrc, }, { title: 'Snapshot', @@ -112,7 +112,7 @@ export const CHANNEL_LIST = [ linkEvent: 'click-snapshot', iconColor: Color.cowfi_snapshot_red, textColor: Color.neutral98, - iconImage: IMG_SNAPSHOT, + iconImage: svgSnapshotSrc, }, ] diff --git a/apps/cow-fi/data/mev-blocker/const.tsx b/apps/cow-fi/data/mev-blocker/const.tsx index 13dfcf7370..6cf388245c 100644 --- a/apps/cow-fi/data/mev-blocker/const.tsx +++ b/apps/cow-fi/data/mev-blocker/const.tsx @@ -1,20 +1,20 @@ -import IMAGE_FASTFREE from '@cowprotocol/assets/images/image-fastfree.svg' -import IMAGE_FULLPROTECTION from '@cowprotocol/assets/images/image-fullprotection.svg' -import IMAGE_MEVBLOCKER_REVIEW_1 from '@cowprotocol/assets/images/image-mevblocker-review-1.svg' -import IMAGE_MEVBLOCKER_REVIEW_2 from '@cowprotocol/assets/images/image-mevblocker-review-2.svg' -import IMAGE_MEVBLOCKER_REVIEW_3 from '@cowprotocol/assets/images/image-mevblocker-review-3.svg' -import IMAGE_MEVBLOCKER_REVIEW_4 from '@cowprotocol/assets/images/image-mevblocker-review-4.svg' -import IMAGE_MEVBLOCKER_REVIEW_5 from '@cowprotocol/assets/images/image-mevblocker-review-5.svg' -import IMAGE_MEVBLOCKER_REVIEW_6 from '@cowprotocol/assets/images/image-mevblocker-review-6.svg' -import IMAGE_PROFIT from '@cowprotocol/assets/images/image-profit.svg' -import IMG_LOGO_AMBIRE from '@cowprotocol/assets/images/logo-ambire.svg' -import IMG_LOGO_BLOCKNATIVE from '@cowprotocol/assets/images/logo-blocknative.svg' -import IMG_LOGO_CRYPTO_COM from '@cowprotocol/assets/images/logo-crypto-com.svg' -import IMG_LOGO_KARPATKEY from '@cowprotocol/assets/images/logo-karpatkey.svg' -import IMG_LOGO_KEEPKEY from '@cowprotocol/assets/images/logo-keepkey.svg' -import IMG_LOGO_RABBY from '@cowprotocol/assets/images/logo-rabby.svg' -import IMG_LOGO_SAFE from '@cowprotocol/assets/images/logo-safe.svg' -import IMG_LOGO_UNISWAP from '@cowprotocol/assets/images/logo-uniswap.svg' +import svgFastfreeSrc from '@cowprotocol/assets/images/image-fastfree.svg' +import svgFullprotectionSrc from '@cowprotocol/assets/images/image-fullprotection.svg' +import svgMevblockerReview1Src from '@cowprotocol/assets/images/image-mevblocker-review-1.svg' +import svgMevblockerReview2Src from '@cowprotocol/assets/images/image-mevblocker-review-2.svg' +import svgMevblockerReview3Src from '@cowprotocol/assets/images/image-mevblocker-review-3.svg' +import svgMevblockerReview4Src from '@cowprotocol/assets/images/image-mevblocker-review-4.svg' +import svgMevblockerReview5Src from '@cowprotocol/assets/images/image-mevblocker-review-5.svg' +import svgMevblockerReview6Src from '@cowprotocol/assets/images/image-mevblocker-review-6.svg' +import svgProfitSrc from '@cowprotocol/assets/images/image-profit.svg' +import svgAmbireSrc from '@cowprotocol/assets/images/logo-ambire.svg' +import svgBlocknativeSrc from '@cowprotocol/assets/images/logo-blocknative.svg' +import svgCryptoComSrc from '@cowprotocol/assets/images/logo-crypto-com.svg' +import svgKarpatkeySrc from '@cowprotocol/assets/images/logo-karpatkey.svg' +import svgKeepkeySrc from '@cowprotocol/assets/images/logo-keepkey.svg' +import svgRabbySrc from '@cowprotocol/assets/images/logo-rabby.svg' +import svgSafeSrc from '@cowprotocol/assets/images/logo-safe.svg' +import svgUniswapSrc from '@cowprotocol/assets/images/logo-uniswap.svg' import { Color, ProductLogo, ProductVariant, UI } from '@cowprotocol/ui' import { CowFiCategory, toCowFiGtmEvent } from 'src/common/analytics/types' @@ -25,21 +25,21 @@ export const MEV_BLOCKER_LIST = [ { id: 'fullprotection', description: 'Protection from frontrunning and sandwich attacks on all types of transactions', - iconImage: IMAGE_FULLPROTECTION, + iconImage: svgFullprotectionSrc, bgColor: Color.cowfi_orange_bright, textColor: Color.cowfi_orange_pale, }, { id: 'profit', description: 'Profit from any backrunning opportunities your transactions create', - iconImage: IMAGE_PROFIT, + iconImage: svgProfitSrc, bgColor: Color.cowfi_peach, textColor: Color.cowfi_orange_bright, }, { id: 'fastfree', description: 'A fast, free, censorship-resistant solution open to all searchers and builders', - iconImage: IMAGE_FASTFREE, + iconImage: svgFastfreeSrc, bgColor: Color.cowfi_lightBlue4, textColor: `var(${UI.COLOR_BLUE_900_PRIMARY})`, }, @@ -48,15 +48,15 @@ export const MEV_BLOCKER_LIST = [ export const TRUSTED_BY_CONTENT = [ { href: 'https://uniswap.org/', - src: IMG_LOGO_UNISWAP, + src: svgUniswapSrc, }, { href: 'https://rabby.io/', - src: IMG_LOGO_RABBY, + src: svgRabbySrc, }, { href: 'https://crypto.com/', - src: IMG_LOGO_CRYPTO_COM, + src: svgCryptoComSrc, }, { href: 'https://swap.cow.fi/', @@ -64,23 +64,23 @@ export const TRUSTED_BY_CONTENT = [ }, { href: 'https://safe.global/', - src: IMG_LOGO_SAFE, + src: svgSafeSrc, }, { href: 'https://www.karpatkey.com/', - src: IMG_LOGO_KARPATKEY, + src: svgKarpatkeySrc, }, { href: 'https://www.keepkey.com/', - src: IMG_LOGO_KEEPKEY, + src: svgKeepkeySrc, }, { href: 'https://www.ambire.com/', - src: IMG_LOGO_AMBIRE, + src: svgAmbireSrc, }, { href: 'https://www.blocknative.com/', - src: IMG_LOGO_BLOCKNATIVE, + src: svgBlocknativeSrc, }, ] @@ -90,42 +90,42 @@ export const TESTIMONIAL_LIST = [ description: '– Anon', bgColor: `var(${UI.COLOR_BLUE_400_PRIMARY})`, textColor: `var(${UI.COLOR_NEUTRAL_0})`, - iconImage: IMAGE_MEVBLOCKER_REVIEW_1, + iconImage: svgMevblockerReview1Src, }, { title: "If I'd known about MEV Blocker sooner, I could've had a lambo by now", description: '– Anon', bgColor: Color.cowfi_orange_bright, textColor: Color.cowfi_orange_pale, - iconImage: IMAGE_MEVBLOCKER_REVIEW_2, + iconImage: svgMevblockerReview2Src, }, { title: 'I was tired of getting rekt, so I started using MEV Blocker', description: '– Anon', bgColor: `var(${UI.COLOR_NEUTRAL_100})`, textColor: Color.cowfi_orange_bright, - iconImage: IMAGE_MEVBLOCKER_REVIEW_3, + iconImage: svgMevblockerReview3Src, }, { title: 'Robots should work for me, not against me', description: '– Anon', bgColor: `var(${UI.COLOR_NEUTRAL_100})`, textColor: Color.cowfi_orange_bright, - iconImage: IMAGE_MEVBLOCKER_REVIEW_4, + iconImage: svgMevblockerReview4Src, }, { title: "Nobody's stolen my lunch money since I started using MEV Blocker", description: '– Anon', bgColor: Color.cowfi_yellow, textColor: Color.cowfi_orange_bright, - iconImage: IMAGE_MEVBLOCKER_REVIEW_5, + iconImage: svgMevblockerReview5Src, }, { title: 'I used MEV Blocker and I instantly went up a tax bracket', description: '– Anon', bgColor: Color.cowfi_orange_bright, textColor: Color.cowfi_yellow, - iconImage: IMAGE_MEVBLOCKER_REVIEW_6, + iconImage: svgMevblockerReview6Src, }, ] diff --git a/apps/cowswap-frontend/src/common/constants/routes.ts b/apps/cowswap-frontend/src/common/constants/routes.ts index 562f6e9ba1..6da2bfd741 100644 --- a/apps/cowswap-frontend/src/common/constants/routes.ts +++ b/apps/cowswap-frontend/src/common/constants/routes.ts @@ -1,4 +1,4 @@ -import EXPERIMENT_ICON from '@cowprotocol/assets/cow-swap/experiment.svg' +import svgExperimentSrc from '@cowprotocol/assets/cow-swap/experiment.svg' import { isInjectedWidget } from '@cowprotocol/common-utils' import { BadgeTypes } from '@cowprotocol/ui' @@ -89,7 +89,7 @@ export const HOOKS_STORE_MENU_ITEM: I18nIMenuItem = { route: Routes.HOOKS, label: msg`Hooks`, description: msg`Powerful tool to generate pre/post interaction for CoW Protocol`, - badgeImage: EXPERIMENT_ICON, + badgeImage: svgExperimentSrc, badgeType: BadgeTypes.INFORMATION, } diff --git a/apps/cowswap-frontend/src/common/pure/AddressInputPanel/ReceiverPanelBody.container.tsx b/apps/cowswap-frontend/src/common/pure/AddressInputPanel/ReceiverPanelBody.container.tsx index bf0eb7d23a..8c159d07ee 100644 --- a/apps/cowswap-frontend/src/common/pure/AddressInputPanel/ReceiverPanelBody.container.tsx +++ b/apps/cowswap-frontend/src/common/pure/AddressInputPanel/ReceiverPanelBody.container.tsx @@ -1,6 +1,6 @@ import { ReactElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react' -import OrderCheckIcon from '@cowprotocol/assets/cow-swap/order-check.svg' +import svgOrderCheckSrc from '@cowprotocol/assets/cow-swap/order-check.svg' import { TargetChainId } from '@cowprotocol/cow-sdk' import { Trans } from '@lingui/react/macro' @@ -89,7 +89,7 @@ export function ReceiverPanelBody({ {chainPrefixWarning && } - {isValid && !loading &&
diff --git a/apps/cowswap-frontend/src/modules/hooksStore/pure/HookListItem/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/pure/HookListItem/index.tsx index 810bb2c399..f81b9d073d 100644 --- a/apps/cowswap-frontend/src/modules/hooksStore/pure/HookListItem/index.tsx +++ b/apps/cowswap-frontend/src/modules/hooksStore/pure/HookListItem/index.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import ICON_INFO from '@cowprotocol/assets/cow-swap/info.svg' +import svgInfoSrc from '@cowprotocol/assets/cow-swap/info.svg' import { HookDappWalletCompatibility } from '@cowprotocol/hook-dapp-lib' import { Command } from '@cowprotocol/types' @@ -69,7 +69,7 @@ export function HookListItem({ dapp, walletType, onSelect, onOpenDetails, onRemo onOpenDetails() }} > - details + details diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/index.tsx index e45e4e4d35..b4174fe408 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/index.tsx @@ -1,9 +1,9 @@ import { useAtom, useAtomValue, useSetAtom } from 'jotai' import { useCallback, useEffect, useMemo, useState } from 'react' -import LockedIcon from '@cowprotocol/assets/images/icon-locked.svg' -import UnlockedIcon from '@cowprotocol/assets/images/icon-unlocked.svg' -import UsdIcon from '@cowprotocol/assets/images/icon-USD.svg' +import iconLockedSrc from '@cowprotocol/assets/images/icon-locked.svg' +import iconUnlockedSrc from '@cowprotocol/assets/images/icon-unlocked.svg' +import iconUsdSrc from '@cowprotocol/assets/images/icon-USD.svg' import { formatInputAmount, getAddress, isFractionFalsy, tryParseCurrencyAmount } from '@cowprotocol/common-utils' import { TokenLogo } from '@cowprotocol/tokens' import { FiatAmount, HelpTooltip, HoverTooltip, TokenSymbol } from '@cowprotocol/ui' @@ -241,7 +241,7 @@ export function RateInput() { placement="top-start" > - + } @@ -282,7 +282,7 @@ export function RateInput() { setIsUsdRateMode((state) => !state)} $active={isUsdRateMode}> - + )} diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx index c5fbd27daa..c63b9e1db5 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/BottomBanners/BottomBanners.pure.tsx @@ -1,6 +1,6 @@ import { useCallback, ReactNode } from 'react' -import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' +import svgFilledInfoCircleSrc from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' import { ClosableBanner } from '@cowprotocol/ui' import { Trans } from '@lingui/react/macro' @@ -23,7 +23,7 @@ export function BottomBanners(): ReactNode { (close: () => void) => (
- +
Your order may not fill exactly when the market price reaches your limit price.{' '} diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx index 24f1117bb6..2e91cb8e58 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx @@ -1,6 +1,6 @@ import { ReactNode, useMemo, useState } from 'react' -import ArrowDownImage from '@cowprotocol/assets/cow-swap/arrowDownRight.svg' +import svgArrowDownRightSrc from '@cowprotocol/assets/cow-swap/arrowDownRight.svg' import { DEFAULT_DATE_FORMAT } from '@cowprotocol/common-const' import { formatInputAmount } from '@cowprotocol/common-utils' import { Currency, Price } from '@cowprotocol/currency' @@ -93,7 +93,7 @@ export function LimitOrdersDetails(props: LimitOrdersDetailsProps): ReactNode {
- +

order executes at diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/index.tsx index 0c05ee0838..d106263eaa 100644 --- a/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/index.tsx +++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/index.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import IMAGE_CARET_DOWN from '@cowprotocol/assets/cow-swap/carret-down.svg' +import svgCarretDownSrc from '@cowprotocol/assets/cow-swap/carret-down.svg' import { InfoTooltip, RowFixed } from '@cowprotocol/ui' import { Trans, useLingui } from '@lingui/react/macro' @@ -60,7 +60,7 @@ function OrderTypePicker({ isPartiallyFillable, partiallyFillableOverride }: Ord {labelText} diff --git a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationBell.tsx b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationBell.tsx index af659e31d5..c4322c6e93 100644 --- a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationBell.tsx +++ b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationBell.tsx @@ -1,6 +1,6 @@ import React from 'react' -import ICON_NOTIFICATION from '@cowprotocol/assets/images/notification.svg' +import svgNotificationSrc from '@cowprotocol/assets/images/notification.svg' import { Command } from '@cowprotocol/types' import { UI } from '@cowprotocol/ui' @@ -75,7 +75,7 @@ export function NotificationBell({ onClick, unreadCount }: NotificationBellProps label: `Unread count: ${unreadCount}`, })} > - + ) } diff --git a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSettings.tsx b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSettings.tsx index 1aef8cdce8..de3429fb62 100644 --- a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSettings.tsx +++ b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSettings.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import TELEGRAM_ICON from '@cowprotocol/assets/images/icon-telegram.svg' +import iconTelegramSrc from '@cowprotocol/assets/images/icon-telegram.svg' import { RowBetween, RowFixed, HoverTooltip, UI, Toggle } from '@cowprotocol/ui' import SVG from 'react-inlinesvg' @@ -130,7 +130,7 @@ export function NotificationSettings({ children }: NotificationSettingsProps): R - +

Telegram {username && @{username}} diff --git a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/index.tsx b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/index.tsx index 5c4cef9e17..ce0f157ef1 100644 --- a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/index.tsx +++ b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/index.tsx @@ -1,6 +1,6 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react' -import ICON_NOTIFICATION_SETTINGS from '@cowprotocol/assets/images/icon-notification-settings.svg' +import iconNotificationSettingsSrc from '@cowprotocol/assets/images/icon-notification-settings.svg' import { useMediaQuery, useOnClickOutside, useFeatureFlags } from '@cowprotocol/common-hooks' import { Media } from '@cowprotocol/ui' @@ -95,7 +95,7 @@ function NotificationsHeader({ label: 'notification sidebar', })} > - + ) : ( diff --git a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/styled.tsx b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/styled.tsx index d57f3ef3ef..fa19b5b1e2 100644 --- a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/styled.tsx +++ b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationSidebar/styled.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react' -import ICON_ARROW from '@cowprotocol/assets/images/arrow-left.svg' -import ICON_BELL_ALERT from '@cowprotocol/assets/images/icon-bell-alert.svg' +import svgArrowLeftSrc from '@cowprotocol/assets/images/arrow-left.svg' +import iconBellAlertSrc from '@cowprotocol/assets/images/icon-bell-alert.svg' import { Media, UI } from '@cowprotocol/ui' import SVG from 'react-inlinesvg' @@ -51,7 +51,7 @@ const IconBase = styled(SVG)<{ size?: string; opacity?: string }>` export const ArrowLeft = ({ onClick }: IconProps): ReactNode => ( - + ) @@ -172,7 +172,7 @@ export const EnableAlertsButtonWithIcon = ({ ...props }: IconProps & React.ButtonHTMLAttributes): ReactNode => ( - + Enable trade alerts ) diff --git a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationsList/index.tsx b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationsList/index.tsx index de3a4de778..cf882bc358 100644 --- a/apps/cowswap-frontend/src/modules/notifications/containers/NotificationsList/index.tsx +++ b/apps/cowswap-frontend/src/modules/notifications/containers/NotificationsList/index.tsx @@ -1,7 +1,7 @@ import { useSetAtom } from 'jotai' import React, { ReactNode, useEffect, useMemo } from 'react' -import ICON_MESSAGE_READ from '@cowprotocol/assets/images/icon-message-read.svg' +import iconMessageReadSrc from '@cowprotocol/assets/images/icon-message-read.svg' import { i18n } from '@lingui/core' import { Trans } from '@lingui/react/macro' @@ -33,7 +33,7 @@ interface EmptyNotificationsProps { function EmptyNotifications({ hasSubscription, onToggleSettings }: EmptyNotificationsProps): ReactNode { return ( - +

You're all caught up

diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts b/apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts index 9128c2cb62..6f04d96af8 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts @@ -1,7 +1,7 @@ -import PROGRESSBAR_COW_SURPLUS_1 from '@cowprotocol/assets/cow-swap/progressbar-finished-image-1.svg' -import PROGRESSBAR_COW_SURPLUS_2 from '@cowprotocol/assets/cow-swap/progressbar-finished-image-2.svg' -import PROGRESSBAR_COW_SURPLUS_3 from '@cowprotocol/assets/cow-swap/progressbar-finished-image-3.svg' -import PROGRESSBAR_COW_SURPLUS_4 from '@cowprotocol/assets/cow-swap/progressbar-finished-image-4.svg' +import svgProgressbarFinished1Src from '@cowprotocol/assets/cow-swap/progressbar-finished-image-1.svg' +import svgProgressbarFinished2Src from '@cowprotocol/assets/cow-swap/progressbar-finished-image-2.svg' +import svgProgressbarFinished3Src from '@cowprotocol/assets/cow-swap/progressbar-finished-image-3.svg' +import svgProgressbarFinished4Src from '@cowprotocol/assets/cow-swap/progressbar-finished-image-4.svg' import { getAvailableChainsText } from '@cowprotocol/common-const' import { SupportedChainId } from '@cowprotocol/cow-sdk' @@ -110,8 +110,8 @@ export const CHAIN_SPECIFIC_BENEFITS: Record @@ -81,7 +81,7 @@ export function SolvingTopSection({ countdown }: SolvingTopSectionProps): ReactN }} > {t`Cancelling @@ -186,7 +186,7 @@ export function ExpiredTopSection({ stepName }: BaseTopSectionProps): ReactNode }} > {t`Order diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TransactionSubmittedContent/SurplusModal.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TransactionSubmittedContent/SurplusModal.tsx index ce0c3e9dcd..c7bf830a34 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TransactionSubmittedContent/SurplusModal.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/TransactionSubmittedContent/SurplusModal.tsx @@ -1,6 +1,6 @@ -import CheckSingular from '@cowprotocol/assets/cow-swap/check-singular.svg' -import SurplusCow from '@cowprotocol/assets/cow-swap/surplus-cow.svg' -import twitterImage from '@cowprotocol/assets/cow-swap/twitter.svg' +import svgCheckSingularSrc from '@cowprotocol/assets/cow-swap/check-singular.svg' +import svgSurplusCowSrc from '@cowprotocol/assets/cow-swap/surplus-cow.svg' +import svgTwitterSrc from '@cowprotocol/assets/cow-swap/twitter.svg' import { isSellOrder } from '@cowprotocol/common-utils' import { OrderKind } from '@cowprotocol/cow-sdk' import { ExternalLink, FiatAmount, SymbolElement, TokenAmount, UI } from '@cowprotocol/ui' @@ -167,10 +167,10 @@ export function SurplusModal(props: SurplusModalProps) { return (

- Swap completed + Swap completed

- {t`surplus + {t`surplus

Great! {surplusMsg} @@ -192,7 +192,7 @@ export function SurplusModal(props: SurplusModalProps) { action: 'Share on Twitter', })} > - + Share this win! diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/ExpiredStep.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/ExpiredStep.tsx index a1ab807823..34497b5523 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/ExpiredStep.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/ExpiredStep.tsx @@ -1,5 +1,5 @@ -import PROGRESS_BAR_BAD_NEWS from '@cowprotocol/assets/cow-swap/progressbar-bad-news.svg' -import PROGRESS_BAR_GOOD_NEWS from '@cowprotocol/assets/cow-swap/progressbar-good-news.svg' +import svgProgressbarBadNewsSrc from '@cowprotocol/assets/cow-swap/progressbar-bad-news.svg' +import svgProgressbarGoodNewsSrc from '@cowprotocol/assets/cow-swap/progressbar-good-news.svg' import { Command } from '@cowprotocol/types' import { Trans } from '@lingui/react/macro' @@ -43,7 +43,7 @@ export function ExpiredStep({ children, navigateToNewOrder }: ExpiredStepProps) - +

The bad news

@@ -54,7 +54,7 @@ export function ExpiredStep({ children, navigateToNewOrder }: ExpiredStepProps)

- +

The good news

diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx index 14ac1cebba..1d80cadd81 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/FinishedStep.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, useMemo, useState, Suspense, lazy } from 'react' -import ICON_SOCIAL_X from '@cowprotocol/assets/images/icon-social-x.svg' +import iconSocialXSrc from '@cowprotocol/assets/images/icon-social-x.svg' import LOTTIE_GREEN_CHECKMARK_DARK from '@cowprotocol/assets/lottie/green-checkmark-dark.json' import LOTTIE_GREEN_CHECKMARK from '@cowprotocol/assets/lottie/green-checkmark.json' import { RECEIVED_LABEL } from '@cowprotocol/common-const' @@ -204,7 +204,7 @@ export function FinishedStep({ label: shouldShowSurplus ? 'Surplus' : 'Tip', })} > - + Share this {shouldShowSurplus ? win : tip}! diff --git a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/styled.ts b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/styled.ts index 4d81a94f91..95dc69d4f0 100644 --- a/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/styled.ts +++ b/apps/cowswap-frontend/src/modules/orderProgressBar/pure/steps/styled.ts @@ -1,4 +1,4 @@ -import IMAGE_STAR_SHINE from '@cowprotocol/assets/cow-swap/star-shine.svg' +import svgStarShineSrc from '@cowprotocol/assets/cow-swap/star-shine.svg' import { SingleLetterLogoWrapper } from '@cowprotocol/tokens' import { ButtonPrimary, Font, LinkStyledButton, Media, UI } from '@cowprotocol/ui' @@ -140,7 +140,7 @@ export const TokenWrapper = styled.div<{ top: 0; width: var(--size); height: var(--size); - background: url(${IMAGE_STAR_SHINE}) no-repeat; + background: url(${svgStarShineSrc}) no-repeat; background-size: 100% 100%; animation: star-shine 1s infinite; diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx index f95c81ed96..b7a54e3bf5 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderEstimatedExecutionPrice/OrderEstimatedExecutionPrice.pure.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' -import iconFilledAlertTriangle from '@cowprotocol/assets/cow-swap/alert.svg' -import iconAllowance from '@cowprotocol/assets/images/icon-allowance.svg' +import svgAlertSrc from '@cowprotocol/assets/cow-swap/alert.svg' +import iconAllowanceSrc from '@cowprotocol/assets/images/icon-allowance.svg' import { ZERO_FRACTION } from '@cowprotocol/common-const' import { Currency, CurrencyAmount, Fraction, Percent, Price } from '@cowprotocol/currency' import { Command } from '@cowprotocol/types' @@ -140,7 +140,7 @@ export function OrderEstimatedExecutionPrice({ color={`var(${UI.COLOR_DANGER_TEXT})`} > - + {internationalizedWarningText} @@ -257,7 +257,7 @@ function UnlikelyToExecuteWarning(props: UnlikelyToExecuteWarningProps) { } > - + ) diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx index f0e6be4a82..517eb7f0f2 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderFillsAt/OrderFillsAt.pure.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import imgOrderPresignaturePendingSrc from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' +import svgOrderPresignaturePendingSrc from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' import { ZERO_FRACTION } from '@cowprotocol/common-const' import { Currency, Price } from '@cowprotocol/currency' import { Command, UiOrderType } from '@cowprotocol/types' @@ -90,7 +90,7 @@ export function OrderFillsAt({ } > - + Please sign order diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderStatusBox/OrderStatusBox.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderStatusBox/OrderStatusBox.pure.tsx index ed7168c2cb..cc2095c61c 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderStatusBox/OrderStatusBox.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrderStatusBox/OrderStatusBox.pure.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import orderPresignaturePending from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' +import svgOrderPresignaturePendingSrc from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' import { Command } from '@cowprotocol/types' import { t } from '@lingui/core/macro' @@ -122,7 +122,7 @@ export function OrderStatusBox({ order, widthAuto, withWarning, onClick, Warning {withWarning && WarningTooltip} {order.status === OrderStatus.PRESIGNATURE_PENDING && ( - + )} {title} diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Content/NoWallet/OrdersTableNoWalletContent.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Content/NoWallet/OrdersTableNoWalletContent.tsx index d2f0c6a853..86882b0437 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Content/NoWallet/OrdersTableNoWalletContent.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Content/NoWallet/OrdersTableNoWalletContent.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import ICON_WALLET from '@cowprotocol/assets/cow-swap/wallet-plus.svg' +import svgWalletPlusSrc from '@cowprotocol/assets/cow-swap/wallet-plus.svg' import { isInjectedWidget } from '@cowprotocol/common-utils' import { t } from '@lingui/core/macro' @@ -19,7 +19,7 @@ export function OrdersTableNoWalletContent(): ReactNode { return ( - +

Connect a wallet diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx index a06d6967fa..2d78b8bd86 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTable/Row/WarningTooltip/WarningTooltip.pure.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' +import svgFilledInfoCircleSrc from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' import { Command } from '@cowprotocol/types' import { ButtonSecondary, TokenSymbol, UI } from '@cowprotocol/ui' @@ -139,7 +139,7 @@ export function WarningTooltip({ placement="bottom" bgColor={`var(${UI.COLOR_DANGER_BG})`} color={`var(${UI.COLOR_DANGER_TEXT})`} - Icon={} + Icon={} /> {children} diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx index 919ff740a0..4bb5cf6273 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTabs/OrdersTabs.pure.tsx @@ -1,7 +1,7 @@ import { ReactNode, ChangeEvent } from 'react' -import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' -import iconOrderPresignaturePending from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' +import svgFilledInfoCircleSrc from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' +import svgOrderPresignaturePendingSrc from '@cowprotocol/assets/cow-swap/order-presignature-pending.svg' import { useWalletInfo } from '@cowprotocol/wallet' import { t } from '@lingui/core/macro' @@ -65,8 +65,8 @@ export function OrdersTabs({ tabs }: OrdersTabsProps): ReactNode { $isDisabled={!account} to={buildOrdersTableUrl({ tabId: tab.id, pageNumber: 1 })} > - {isUnfillable && } - {isSigning && } + {isUnfillable && } + {isSigning && } {i18n._(tab.title)} {account && ({tab.count})} ) diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/fields/SafeTxFields.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/fields/SafeTxFields.tsx index 50cee6bf54..bc22789901 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/fields/SafeTxFields.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/fields/SafeTxFields.tsx @@ -1,4 +1,4 @@ -import safeLogo from '@cowprotocol/assets/cow-swap/safe-logo.svg' +import svgSafeSrc from '@cowprotocol/assets/cow-swap/safe-logo.svg' import { SupportedChainId } from '@cowprotocol/cow-sdk' import { t } from '@lingui/core/macro' @@ -29,7 +29,7 @@ export function SafeTxFields(props: SafeTxFieldsProps) { const { chainId, safeAddress, safeTxHash, nonce, confirmationsRequired, confirmations } = props const safeTransaction = { safe: safeAddress, safeTxHash } - const safeLogoImg = + const safeLogoImg = return ( <> diff --git a/apps/cowswap-frontend/src/modules/swap/containers/BottomBanners/BottomBanners.container.tsx b/apps/cowswap-frontend/src/modules/swap/containers/BottomBanners/BottomBanners.container.tsx index a75c2a1e77..631cdd8b3c 100644 --- a/apps/cowswap-frontend/src/modules/swap/containers/BottomBanners/BottomBanners.container.tsx +++ b/apps/cowswap-frontend/src/modules/swap/containers/BottomBanners/BottomBanners.container.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import HAND_SVG from '@cowprotocol/assets/cow-swap/hand.svg' +import svgHandSrc from '@cowprotocol/assets/cow-swap/hand.svg' import { BannerOrientation, InlineBanner, StatusColorVariant } from '@cowprotocol/ui' import { useWalletInfo } from '@cowprotocol/wallet' @@ -31,7 +31,7 @@ export function BottomBanners(): ReactNode { bannerNode = ( - + diff --git a/apps/cowswap-frontend/src/modules/swap/pure/CrossChainUnlockScreen/styled.tsx b/apps/cowswap-frontend/src/modules/swap/pure/CrossChainUnlockScreen/styled.tsx index db263dee1e..eaae0110c0 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/CrossChainUnlockScreen/styled.tsx +++ b/apps/cowswap-frontend/src/modules/swap/pure/CrossChainUnlockScreen/styled.tsx @@ -1,4 +1,4 @@ -import CROSS_CHAIN_BG from '@cowprotocol/assets/images/cross-chain-unlock-bg.svg' +import svgCrossChainUnlockBgSrc from '@cowprotocol/assets/images/cross-chain-unlock-bg.svg' import { Media, UI } from '@cowprotocol/ui' import styled from 'styled-components/macro' @@ -21,7 +21,7 @@ export const Container = styled.div<{ darkMode: boolean }>` content: ''; position: absolute; inset: 0; - background: url(${CROSS_CHAIN_BG}) calc(100% - -12px) center/contain no-repeat; + background: url(${svgCrossChainUnlockBgSrc}) calc(100% - -12px) center/contain no-repeat; opacity: ${({ darkMode }) => (darkMode ? 0.5 : 1)}; pointer-events: none; z-index: 0; diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/ChainButton.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/ChainButton.tsx index 1f99880139..ffc3dce777 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/ChainButton.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/ChainButton.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import OrderCheckIcon from '@cowprotocol/assets/cow-swap/order-check.svg' +import svgOrderCheckSrc from '@cowprotocol/assets/cow-swap/order-check.svg' import { ChainInfo } from '@cowprotocol/cow-sdk' import { useLingui } from '@lingui/react/macro' @@ -64,7 +64,7 @@ export function ChainButton({ {isActive && !isLoading && ( - + )} diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx index ff3fb57344..2882a8d02b 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenSourceTitle/index.tsx @@ -1,4 +1,4 @@ -import TokenListLogo from '@cowprotocol/assets/svg/tokenlist.svg' +import svgTokenlistSrc from '@cowprotocol/assets/svg/tokenlist.svg' import { HelpTooltip } from '@cowprotocol/ui' import styled from 'styled-components/macro' @@ -36,7 +36,7 @@ export function TokenSourceTitle(props: TokenSourceTitleProps) { return ( - <img src={TokenListLogo} alt="" /> + <img src={svgTokenlistSrc} alt="" /> {children} {tooltipText ? ( diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/index.tsx index 211e2ad16a..e9b28e3206 100644 --- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/index.tsx +++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/index.tsx @@ -6,7 +6,7 @@ import { TagInfo, TokenListTags } from '@cowprotocol/tokens' import { getStatusColorEnums, HoverTooltip, StatusColorVariant } from '@cowprotocol/ui' import { msg } from '@lingui/core/macro' -import ICON_GAS_FREE from 'assets/icon/gas-free.svg' +import iconGasFreeSrc from 'assets/icon/gas-free.svg' import SVG from 'react-inlinesvg' import { NavLink } from 'react-router' @@ -22,7 +22,7 @@ const APP_TOKEN_TAGS: TokenListTags = { }, 'gas-free': { name: msg`Gas-free`, - icon: ICON_GAS_FREE, + icon: iconGasFreeSrc, description: msg`This token supports gas-free approvals. Enjoy! 🐮`, id: '1', color: StatusColorVariant.Success, diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx index 541bb43048..1a76bb9326 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx +++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, useCallback, useMemo } from 'react' -import ICON_ORDERS from '@cowprotocol/assets/svg/orders.svg' +import svgOrdersSrc from '@cowprotocol/assets/svg/orders.svg' import { useFeatureFlags, useTheme, useMediaQuery } from '@cowprotocol/common-hooks' import { isInjectedWidget, isSellOrder, maxAmountSpend } from '@cowprotocol/common-utils' import { SupportedChainId } from '@cowprotocol/cow-sdk' @@ -234,7 +234,7 @@ export function TradeWidgetForm(props: TradeWidgetProps): ReactNode { {shouldShowMyOrdersButton && ( - My orders + My orders )} diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx index 323d078f73..a7a6013769 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/index.tsx @@ -5,7 +5,7 @@ import { Badge, BadgeTypes, ModalHeader } from '@cowprotocol/ui' import type { TradeType } from '@cowprotocol/widget-lib' import { Trans, useLingui } from '@lingui/react/macro' -import IMAGE_CARET from 'assets/icon/caret.svg' +import iconCaretSrc from 'assets/icon/caret.svg' import SVG from 'react-inlinesvg' import { useLocation } from 'react-router' @@ -129,7 +129,7 @@ export function TradeWidgetLinks({ isDropdown = false }: TradeWidgetLinksProps) > {selectedMenuItem.props.item.label} - {!singleMenuItem ? : null} + {!singleMenuItem ? : null} diff --git a/apps/cowswap-frontend/src/modules/trade/pure/LimitOrdersPromoBanner/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/LimitOrdersPromoBanner/index.tsx index a4af1c2728..f545542d36 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/LimitOrdersPromoBanner/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/LimitOrdersPromoBanner/index.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react' -import iconCompleted from '@cowprotocol/assets/cow-swap/check.svg' +import svgCheckSrc from '@cowprotocol/assets/cow-swap/check.svg' import { UI } from '@cowprotocol/ui' import { MessageDescriptor } from '@lingui/core' @@ -88,7 +88,7 @@ export function LimitOrdersPromoBanner({ {BULLET_POINTS.map((point, index) => (
  • - + {i18n._(point)}
    • diff --git a/apps/cowswap-frontend/src/modules/trade/pure/ReceiveAmountTitle/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/ReceiveAmountTitle/index.tsx index 844f91e7f7..057f82b4af 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/ReceiveAmountTitle/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/ReceiveAmountTitle/index.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import EqualIcon from '@cowprotocol/assets/cow-swap/equal.svg' +import svgEqualSrc from '@cowprotocol/assets/cow-swap/equal.svg' import { UI } from '@cowprotocol/ui' import { t } from '@lingui/core/macro' @@ -77,7 +77,7 @@ export function ReceiveAmountTitle({ className, children, icon, variant }: Recei ) ) : ( - + )}{' '} {children} diff --git a/apps/cowswap-frontend/src/modules/trade/pure/Settings/SettingsIcon.tsx b/apps/cowswap-frontend/src/modules/trade/pure/Settings/SettingsIcon.tsx index cfb60a83ba..c1d2c973e0 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/Settings/SettingsIcon.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/Settings/SettingsIcon.tsx @@ -1,9 +1,9 @@ import { ReactNode } from 'react' -import IMAGE_ICON_SETTINGS_ALT from '@cowprotocol/assets/images/icon-settings-alt.svg' +import iconSettingsAltSrc from '@cowprotocol/assets/images/icon-settings-alt.svg' import SVG from 'react-inlinesvg' export function SettingsIcon(): ReactNode { - return + return } diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/index.tsx index 6cab2e6056..ae31697220 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/index.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useState } from 'react' -import carretDown from '@cowprotocol/assets/cow-swap/carret-down.svg' +import svgCarretDownSrc from '@cowprotocol/assets/cow-swap/carret-down.svg' import { Command } from '@cowprotocol/types' import { t } from '@lingui/core/macro' @@ -46,13 +46,13 @@ export function InputArrows({ onClickUp, onClickDown }: InputArrowsProps) { - + - + diff --git a/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/index.tsx index 764481f7c4..c54f5d0d02 100644 --- a/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/index.tsx +++ b/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/index.tsx @@ -1,6 +1,6 @@ import { isValidElement } from 'react' -import iconCompleted from '@cowprotocol/assets/cow-swap/check.svg' +import svgCheckSrc from '@cowprotocol/assets/cow-swap/check.svg' import { Command } from '@cowprotocol/types' import { ButtonPrimary, ExternalLink } from '@cowprotocol/ui' @@ -52,7 +52,7 @@ export function UnlockWidgetScreen({ {items.map(({ isNew, content }, index) => (
  • - + {' '} {isValidElement(content) ? content : i18n._(content as MessageDescriptor)}
    • diff --git a/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsDropdown/SettingsDropdown.container.tsx b/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsDropdown/SettingsDropdown.container.tsx index 822e43fea4..db07716856 100644 --- a/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsDropdown/SettingsDropdown.container.tsx +++ b/apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsDropdown/SettingsDropdown.container.tsx @@ -1,6 +1,6 @@ import { ReactNode, useCallback, useRef } from 'react' -import EXPERIMENT_ICON from '@cowprotocol/assets/cow-swap/experiment.svg' +import svgExperimentSrc from '@cowprotocol/assets/cow-swap/experiment.svg' import { isInjectedWidget } from '@cowprotocol/common-utils' import { StatefulValue } from '@cowprotocol/types' import { SettingsBox, SettingsBoxGroup, SettingsDropdownSection } from '@cowprotocol/ui' @@ -122,7 +122,7 @@ export function SettingsDropdown({ tooltip={ - Experimental: + Experimental: {' '} Add DeFi interactions before and after your trade. diff --git a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx index 90bbca097f..290beeaeac 100644 --- a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx +++ b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx @@ -1,4 +1,4 @@ -import ShieldImage from '@cowprotocol/assets/cow-swap/protection.svg' +import svgProtectionSrc from '@cowprotocol/assets/cow-swap/protection.svg' import { Trans, useLingui } from '@lingui/react/macro' import SVG from 'react-inlinesvg' @@ -69,7 +69,7 @@ export function useLabelsTooltips(): LabelTooltipItems { label: ( <> - + {' '} Price protection diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx b/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx index 254cbc2f18..da6cf72bac 100644 --- a/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx +++ b/apps/cowswap-frontend/src/modules/wallet/pure/StatusIcon/index.tsx @@ -1,4 +1,4 @@ -import { Identicon, ConnectionType, CoinbaseWalletIcon, WalletConnectIcon } from '@cowprotocol/wallet' +import { Identicon, ConnectionType, svgCoinbaseSrc, iconWalletConnectSrc } from '@cowprotocol/wallet' import { t } from '@lingui/core/macro' import styled from 'styled-components/macro' @@ -27,13 +27,13 @@ export function StatusIcon({ connectionType, account, size = 16 }: StatusIconPro let image switch (connectionType) { case ConnectionType.COINBASE_WALLET: - image = {t`Coinbase + image = {t`Coinbase break case ConnectionType.INJECTED: image = break case ConnectionType.WALLET_CONNECT_V2: - image = {t`WalletConnect`} + image = {t`WalletConnect`} break } diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx index 093105e50b..030e0c2c00 100644 --- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx +++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx @@ -8,7 +8,7 @@ import { ConnectionType } from '@cowprotocol/wallet' import { t } from '@lingui/core/macro' import { Trans } from '@lingui/react/macro' -import ICON_WALLET from 'assets/icon/wallet.svg' +import iconWalletSrc from 'assets/icon/wallet.svg' import { AlertTriangle } from 'react-feather' import SVG from 'react-inlinesvg' @@ -78,7 +78,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps): ReactNode { Connect wallet - + ) } diff --git a/apps/cowswap-frontend/src/pages/Account/Balances.tsx b/apps/cowswap-frontend/src/pages/Account/Balances.tsx index 66ab57a678..7aedd96789 100644 --- a/apps/cowswap-frontend/src/pages/Account/Balances.tsx +++ b/apps/cowswap-frontend/src/pages/Account/Balances.tsx @@ -1,8 +1,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react' -import ArrowIcon from '@cowprotocol/assets/cow-swap/arrow.svg' -import CowImage from '@cowprotocol/assets/cow-swap/cow_token.svg' -import vCOWImage from '@cowprotocol/assets/images/vCOW.svg' +import svgArrowSrc from '@cowprotocol/assets/cow-swap/arrow.svg' +import svgCowTokenSrc from '@cowprotocol/assets/cow-swap/cow_token.svg' +import svgVCowSrc from '@cowprotocol/assets/images/vCOW.svg' import { useCurrencyAmountBalance, useTokensBalances } from '@cowprotocol/balances-and-allowances' import { COW_TOKEN_TO_CHAIN, @@ -193,7 +193,7 @@ export default function Profile() { } else { content = ( - Convert to COW + Convert to COW ) } @@ -252,7 +252,7 @@ export default function Profile() { {hasVCowBalance && vCowToken && ( - + Total vCOW balance @@ -298,7 +298,7 @@ export default function Profile() { {cowContractAddress && ( - {t`Cow + {t`Cow Available COW balance diff --git a/apps/cowswap-frontend/src/pages/Account/Delegate.tsx b/apps/cowswap-frontend/src/pages/Account/Delegate.tsx index d71412dd2f..27edaa76fe 100644 --- a/apps/cowswap-frontend/src/pages/Account/Delegate.tsx +++ b/apps/cowswap-frontend/src/pages/Account/Delegate.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react' -import CowImage from '@cowprotocol/assets/cow-swap/cow_token.svg' -import DelegateCowIcon from '@cowprotocol/assets/cow-swap/delegate-cow.svg' +import svgCowTokenSrc from '@cowprotocol/assets/cow-swap/cow_token.svg' +import svgDelegateCowSrc from '@cowprotocol/assets/cow-swap/delegate-cow.svg' import { ClosableBanner, ButtonPrimary } from '@cowprotocol/ui' import { t } from '@lingui/core/macro' @@ -28,7 +28,7 @@ export default function Delegate({ dismissable = false, rowOnMobile }: DelegateP {dismissable && close && } - + @@ -39,7 +39,7 @@ export default function Delegate({ dismissable = false, rowOnMobile }: DelegateP Delegate your - {t`Cow (v)COW + {t`Cow (v)COW Delegate Now ↗ diff --git a/apps/cowswap-frontend/src/pages/Account/LockedGnoVesting/index.tsx b/apps/cowswap-frontend/src/pages/Account/LockedGnoVesting/index.tsx index 5bbb7c2ab4..07eb4d1778 100644 --- a/apps/cowswap-frontend/src/pages/Account/LockedGnoVesting/index.tsx +++ b/apps/cowswap-frontend/src/pages/Account/LockedGnoVesting/index.tsx @@ -1,8 +1,8 @@ import { useCallback, useEffect, useState } from 'react' import { useCowAnalytics } from '@cowprotocol/analytics' -import ArrowIcon from '@cowprotocol/assets/cow-swap/arrow.svg' -import cowImage from '@cowprotocol/assets/cow-swap/cow_token.svg' +import svgArrowSrc from '@cowprotocol/assets/cow-swap/arrow.svg' +import svgCowTokenSrc from '@cowprotocol/assets/cow-swap/cow_token.svg' import { LOCKED_GNO_VESTING_START_DATE, MERKLE_DROP_CONTRACT_ADDRESSES, @@ -148,7 +148,7 @@ const LockedGnoVesting: React.FC = ({ openModal, closeModal, vested, allo <> - {t`COW + {t`COW COW vesting from locked GNO @@ -220,7 +220,7 @@ const LockedGnoVesting: React.FC = ({ openModal, closeModal, vested, allo Claiming COW... ) : ( - Claim COW + Claim COW )} diff --git a/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx b/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx index 3507f5d876..95d76b015c 100644 --- a/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx +++ b/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import cow404IMG from '@cowprotocol/assets/cow-swap/cow-404.png' +import imgCow404Src from '@cowprotocol/assets/cow-swap/cow-404.png' import { ButtonPrimary, ExternalLink as ExternalLinkTheme, Media } from '@cowprotocol/ui' import { t } from '@lingui/core/macro' @@ -90,7 +90,7 @@ export default function AnySwapAffectedUsers(): ReactNode { - {t`CoW + {t`CoW

    Read how to prevent losing funds

    diff --git a/apps/cowswap-frontend/src/pages/error/NotFound/CowSaucerScene.tsx b/apps/cowswap-frontend/src/pages/error/NotFound/CowSaucerScene.tsx index 324c761131..860801e4a7 100644 --- a/apps/cowswap-frontend/src/pages/error/NotFound/CowSaucerScene.tsx +++ b/apps/cowswap-frontend/src/pages/error/NotFound/CowSaucerScene.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react' -import cowDarkIMG from '@cowprotocol/assets/images/404/swap/dark/cow.svg' -import cowLightIMG from '@cowprotocol/assets/images/404/swap/light/cow.svg' +import svgCowDarkSrc from '@cowprotocol/assets/images/404/swap/dark/cow.svg' +import svgCowLightSrc from '@cowprotocol/assets/images/404/swap/light/cow.svg' import { CowSaucerScene as BaseCowSaucerScene, SWAP_SAUCER_PALETTE_DARK, @@ -17,7 +17,7 @@ export function CowSaucerScene({ darkMode }: CowSaucerSceneProps): ReactNode { ) } diff --git a/apps/cowswap-frontend/src/pages/games/MevSlicer/index.tsx b/apps/cowswap-frontend/src/pages/games/MevSlicer/index.tsx index af3dc42970..d1382f2608 100644 --- a/apps/cowswap-frontend/src/pages/games/MevSlicer/index.tsx +++ b/apps/cowswap-frontend/src/pages/games/MevSlicer/index.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import ninjaCowImg from '@cowprotocol/assets/cow-swap/ninja-cow.png' +import imgNinjaCowSrc from '@cowprotocol/assets/cow-swap/ninja-cow.png' import { PAGE_TITLES } from '@cowprotocol/common-const' import { ButtonPrimary } from '@cowprotocol/ui' @@ -67,7 +67,7 @@ export default function MevSlicer(): ReactNode {

    - {t`Ninja + {t`Ninja

    = ({ tooltip, placement = 'top', offset }) => { - return + return ( + + ) } diff --git a/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx b/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx index 487b76c893..e3c4df0e23 100644 --- a/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx +++ b/apps/explorer/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx @@ -65,7 +65,7 @@ export const BlockExplorerLink: React.FC = (props: Props) => { return ( {label} - {showLogo && } + {showLogo && } ) } diff --git a/apps/explorer/src/components/common/CardRow/CardRow.stories.tsx b/apps/explorer/src/components/common/CardRow/CardRow.stories.tsx index 1425cab4bf..8de58f7fd7 100644 --- a/apps/explorer/src/components/common/CardRow/CardRow.stories.tsx +++ b/apps/explorer/src/components/common/CardRow/CardRow.stories.tsx @@ -4,7 +4,7 @@ import { Card, CardContent } from 'components/common/Card' import { CardRow, CardRowProps } from 'components/common/CardRow' import { GlobalStyles, ThemeToggler } from 'storybook/decorators' -import QuestionIcon from '../../../assets/img/question1.svg' +import svgQuestion1Src from '../../../assets/img/question1.svg' export default { title: 'Common/CardRow', @@ -20,7 +20,7 @@ const Template: Story = (args) => (     } + icon1={Question icon} variant="3row" label1="24h Transactions" value1="194" diff --git a/apps/explorer/src/components/common/CowLoading.tsx b/apps/explorer/src/components/common/CowLoading.tsx index f027e7892e..f8ba185518 100644 --- a/apps/explorer/src/components/common/CowLoading.tsx +++ b/apps/explorer/src/components/common/CowLoading.tsx @@ -1,6 +1,6 @@ import React from 'react' -import CowLoadingSVG from 'assets/img/CowProtocol-logo.svg' +import svgCowProtocolSrc from 'assets/img/CowProtocol-logo.svg' import SVG from 'react-inlinesvg' import styled, { keyframes } from 'styled-components/macro' @@ -36,7 +36,7 @@ export const StyledCowLoading = styled(SVG)` export const CowLoading: React.FC = () => ( - + ) diff --git a/apps/explorer/src/components/common/LogoWrapper.ts b/apps/explorer/src/components/common/LogoWrapper.ts index 9be6ec724a..fb0005f522 100644 --- a/apps/explorer/src/components/common/LogoWrapper.ts +++ b/apps/explorer/src/components/common/LogoWrapper.ts @@ -1,5 +1,5 @@ -import etherscan from 'assets/img/etherscan-logo.svg' -import github from 'assets/img/github-logo.png' +import svgEtherscanSrc from 'assets/img/etherscan-logo.svg' +import imgGithubSrc from 'assets/img/github-logo.png' import styled from 'styled-components/macro' export default styled.img` @@ -25,6 +25,6 @@ export default styled.img` } ` export const LOGO_MAP = { - github, - etherscan, + imgGithubSrc, + svgEtherscanSrc, } diff --git a/apps/explorer/src/components/common/MenuDropdown/MainMenuTree.stories.tsx b/apps/explorer/src/components/common/MenuDropdown/MainMenuTree.stories.tsx index 46620677f1..46603ba37a 100644 --- a/apps/explorer/src/components/common/MenuDropdown/MainMenuTree.stories.tsx +++ b/apps/explorer/src/components/common/MenuDropdown/MainMenuTree.stories.tsx @@ -4,11 +4,11 @@ import { useMediaQuery } from '@cowprotocol/common-hooks' import { Media } from '@cowprotocol/ui' import { Story, Meta } from '@storybook/react/types-6-0' -import IMAGE_APPDATA from 'assets/img/code.svg' -import IMAGE_COW from 'assets/img/CowProtocol-logo.svg' -import IMAGE_DISCORD from 'assets/img/discord.svg' -import IMAGE_DOC from 'assets/img/doc.svg' -import IMAGE_ANALYTICS from 'assets/img/pie.svg' +import svgCodeSrc from 'assets/img/code.svg' +import svgCowProtocolSrc from 'assets/img/CowProtocol-logo.svg' +import svgDiscordSrc from 'assets/img/discord.svg' +import svgDocSrc from 'assets/img/doc.svg' +import svgPieSrc from 'assets/img/pie.svg' import { MenuTree, MenuTreeProps } from 'components/common/MenuDropdown/MenuTree' import { GlobalStyles, ThemeToggler, Router } from 'storybook/decorators' @@ -45,25 +45,25 @@ const DropdownMenu: MenuTreeItem[] = [ title: 'CoW Swap', url: COWSWAP_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_COW, + iconSVG: svgCowProtocolSrc, }, { title: 'CoW Protocol', url: PROTOCOL_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_COW, + iconSVG: svgCowProtocolSrc, }, { title: 'Documentation', url: DOCS_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_DOC, + iconSVG: svgDocSrc, }, { title: 'Analytics', url: DUNE_DASHBOARD_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_ANALYTICS, + iconSVG: svgPieSrc, }, ], }, @@ -73,7 +73,7 @@ const DropdownMenu: MenuTreeItem[] = [ { title: 'Discord', url: DISCORD_LINK, - iconSVG: IMAGE_DISCORD, // If icon is a inline component + iconSVG: svgDiscordSrc, // If icon is a inline component kind: MenuItemKind.EXTERNAL_LINK, }, ], @@ -84,7 +84,7 @@ const DropdownMenu: MenuTreeItem[] = [ { title: 'AppData', url: Routes.APPDATA, - iconSVG: IMAGE_APPDATA, + iconSVG: svgCodeSrc, }, ], }, diff --git a/apps/explorer/src/components/common/MenuDropdown/MenuDropdownItem.stories.tsx b/apps/explorer/src/components/common/MenuDropdown/MenuDropdownItem.stories.tsx index be8ebbcc02..280810d034 100644 --- a/apps/explorer/src/components/common/MenuDropdown/MenuDropdownItem.stories.tsx +++ b/apps/explorer/src/components/common/MenuDropdown/MenuDropdownItem.stories.tsx @@ -1,10 +1,10 @@ import React, { Dispatch, SetStateAction, useState } from 'react' import { Story, Meta } from '@storybook/react/types-6-0' -import IMAGE_APPDATA from 'assets/img/code.svg' -import IMAGE_COW from 'assets/img/CowProtocol-logo.svg' -import IMAGE_DISCORD from 'assets/img/discord.svg' -import IMAGE_DOC from 'assets/img/doc.svg' +import svgCodeSrc from 'assets/img/code.svg' +import svgCowProtocolSrc from 'assets/img/CowProtocol-logo.svg' +import svgDiscordSrc from 'assets/img/discord.svg' +import svgDocSrc from 'assets/img/doc.svg' import { GlobalStyles, ThemeToggler, Router } from 'storybook/decorators' import { DropDownItem, MenuItemKind } from './types' @@ -30,19 +30,19 @@ const DropdownMenu: DropDownItem = { title: 'Option 1', url: COWSWAP_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_COW, + iconSVG: svgCowProtocolSrc, }, { title: 'Option 2', url: PROTOCOL_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_COW, + iconSVG: svgCowProtocolSrc, }, { title: 'Option 3', url: DOCS_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_DOC, + iconSVG: svgDocSrc, }, ], }, @@ -52,7 +52,7 @@ const DropdownMenu: DropDownItem = { { title: 'Option 3', url: DISCORD_LINK, - iconSVG: IMAGE_DISCORD, + iconSVG: svgDiscordSrc, kind: MenuItemKind.EXTERNAL_LINK, }, ], @@ -63,7 +63,7 @@ const DropdownMenu: DropDownItem = { { title: 'Option 4', url: Routes.APPDATA, - iconSVG: IMAGE_APPDATA, + iconSVG: svgCodeSrc, }, ], }, diff --git a/apps/explorer/src/components/common/MenuDropdown/index.tsx b/apps/explorer/src/components/common/MenuDropdown/index.tsx index 98714d65a2..2030e0c305 100644 --- a/apps/explorer/src/components/common/MenuDropdown/index.tsx +++ b/apps/explorer/src/components/common/MenuDropdown/index.tsx @@ -3,7 +3,7 @@ import React, { useState, createRef } from 'react' import { useMediaQuery } from '@cowprotocol/common-hooks' import { Media } from '@cowprotocol/ui' -import IMAGE_CARRET_DOWN from 'assets/img/carret-down.svg' +import svgCarretDownSrc from 'assets/img/carret-down.svg' import { MenuFlyout, Content, MenuSection, MenuTitle, ButtonMenuItem } from 'components/common/MenuDropdown/styled' import useOnClickOutside from 'hooks/useOnClickOutside' import SVG from 'react-inlinesvg' @@ -34,7 +34,7 @@ export function MenuItemsPanel({ title, children }: MenuProps): React.ReactNode return ( - {title} + {title} {showMenu && {children}} diff --git a/apps/explorer/src/components/common/MenuDropdown/mainMenu.ts b/apps/explorer/src/components/common/MenuDropdown/mainMenu.ts index 4cff35bae7..dceaa9bf33 100644 --- a/apps/explorer/src/components/common/MenuDropdown/mainMenu.ts +++ b/apps/explorer/src/components/common/MenuDropdown/mainMenu.ts @@ -1,8 +1,8 @@ -import IMAGE_APPDATA from 'assets/img/code.svg' -import IMAGE_COW from 'assets/img/CowProtocol-logo.svg' -import IMAGE_DISCORD from 'assets/img/discord.svg' -import IMAGE_DOC from 'assets/img/doc.svg' -import IMAGE_ANALYTICS from 'assets/img/pie.svg' +import svgCodeSrc from 'assets/img/code.svg' +import svgCowProtocolSrc from 'assets/img/CowProtocol-logo.svg' +import svgDiscordSrc from 'assets/img/discord.svg' +import svgDocSrc from 'assets/img/doc.svg' +import svgPieSrc from 'assets/img/pie.svg' import { PiMathOperationsFill } from 'react-icons/pi' import { MenuItemKind, MenuLink, MenuTreeItem } from './types' @@ -31,7 +31,7 @@ export function getMainMenu(isSolversEnabled = true): MenuTreeItem[] { { title: 'AppData', url: Routes.APPDATA, - iconSVG: IMAGE_APPDATA, + iconSVG: svgCodeSrc, }, ] @@ -51,25 +51,25 @@ export function getMainMenu(isSolversEnabled = true): MenuTreeItem[] { title: 'CoW Swap', url: COWSWAP_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_COW, + iconSVG: svgCowProtocolSrc, }, { title: 'CoW Protocol', url: PROTOCOL_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_COW, + iconSVG: svgCowProtocolSrc, }, { title: 'Documentation', url: DOCS_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_DOC, + iconSVG: svgDocSrc, }, { title: 'Analytics', url: DUNE_DASHBOARD_LINK, kind: MenuItemKind.EXTERNAL_LINK, - iconSVG: IMAGE_ANALYTICS, + iconSVG: svgPieSrc, }, ], }, @@ -79,7 +79,7 @@ export function getMainMenu(isSolversEnabled = true): MenuTreeItem[] { { title: 'Discord', url: DISCORD_LINK, - iconSVG: IMAGE_DISCORD, // If icon is a inline component + iconSVG: svgDiscordSrc, // If icon is a inline component kind: MenuItemKind.EXTERNAL_LINK, }, ], diff --git a/apps/explorer/src/components/common/TableSearch/TableSearch.tsx b/apps/explorer/src/components/common/TableSearch/TableSearch.tsx index e68942731e..58e89bdfb5 100644 --- a/apps/explorer/src/components/common/TableSearch/TableSearch.tsx +++ b/apps/explorer/src/components/common/TableSearch/TableSearch.tsx @@ -1,6 +1,6 @@ import React from 'react' -import searchImg from 'assets/img/search2.svg' +import svgSearch2Src from 'assets/img/search2.svg' import { SearchWrapped } from './styled' @@ -19,7 +19,7 @@ export function TableSearch({ }: SearchProps): React.ReactNode { return ( e.preventDefault()}> - + or Get Support - Support icon + Support icon diff --git a/apps/explorer/src/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.styled.ts b/apps/explorer/src/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.styled.ts index 8f0ecee6f1..9f7b9b077d 100644 --- a/apps/explorer/src/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.styled.ts +++ b/apps/explorer/src/explorer/components/SummaryCardsWidget/VolumeChart/VolumeChart.styled.ts @@ -2,7 +2,7 @@ import { Media, Color, UI } from '@cowprotocol/ui' import styled, { keyframes } from 'styled-components/macro' -import GraphSkeleton from '../../../../assets/img/graph-skeleton.svg' +import svgGraphSkeletonSrc from '../../../../assets/img/graph-skeleton.svg' import ShimmerBar from '../../common/ShimmerBar' const frameAnimation = keyframes` @@ -19,7 +19,7 @@ export const ChartSkeleton = styled.div<{ backgroundColor?: 'grey' | 'orange' }> display: flex; justify-content: center; align-content: center; - background: url(${GraphSkeleton}) no-repeat bottom/contain + background: url(${svgGraphSkeletonSrc}) no-repeat bottom/contain ${({ backgroundColor = 'grey' }): string => backgroundColor === 'grey' ? Color.explorer_greyOpacity : Color.explorer_orangeOpacity}; opacity: 0.35; diff --git a/apps/explorer/src/explorer/components/TransanctionBatchGraph/hooks.ts b/apps/explorer/src/explorer/components/TransanctionBatchGraph/hooks.ts index 7c7c8f5919..61724d78d0 100644 --- a/apps/explorer/src/explorer/components/TransanctionBatchGraph/hooks.ts +++ b/apps/explorer/src/explorer/components/TransanctionBatchGraph/hooks.ts @@ -13,7 +13,7 @@ import { bindPopper, removePopper, updateLayout } from './utils' import { Order } from '../../../api/operator' import { traceToTransfersAndTrades } from '../../../api/tenderly' -import UnknownToken from '../../../assets/img/question1.svg' +import svgQuestion1Src from '../../../assets/img/question1.svg' import { useMultipleErc20 } from '../../../hooks/useErc20' import { useQuery, useUpdateQueryString } from '../../../hooks/useQuery' import { useTransactionData } from '../../../hooks/useTransactionData' @@ -195,7 +195,7 @@ function getStylesheets( // Right now unknown token image will only be used when the address is undefined // which is not likely // A way to deal with this would be to first fetch the image and when it fails set the fallback image - const image = getImageUrl(node.data.address) || UnknownToken + const image = getImageUrl(node.data.address) || svgQuestion1Src stylesheets.push({ selector: `node[id="${node.data.id}"]`, diff --git a/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts b/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts index 16efd291c7..f9efa26be5 100644 --- a/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts +++ b/apps/explorer/src/explorer/components/TransanctionBatchGraph/styled.ts @@ -4,13 +4,13 @@ import { StylesheetCSS } from 'cytoscape' import styled, { css } from 'styled-components/macro' // TODO: update icon -import CowProtocolIcon from '../../../assets/img/CoW-protocol.svg' -import DexIcon from '../../../assets/img/Dex.svg' -import TokenIcon from '../../../assets/img/eth-network.svg' +import svgCoWProtocolSrc from '../../../assets/img/CoW-protocol.svg' +import svgDexSrc from '../../../assets/img/Dex.svg' +import svgEthNetworkSrc from '../../../assets/img/eth-network.svg' // TODO: update icon -import SpecialIcon from '../../../assets/img/Trader-variant.svg' +import svgTraderVariantSrc from '../../../assets/img/Trader-variant.svg' // TODO: update icon -import TraderIcon from '../../../assets/img/Trader.svg' +import svgTraderSrc from '../../../assets/img/Trader.svg' import { ArrowIconCSS } from '../../../components/icons/cssIcons' import { MEDIA } from '../../../const' import { Dropdown } from '../common/Dropdown' @@ -173,7 +173,7 @@ export function STYLESHEET(): StylesheetCSS[] { { selector: 'node[type="trader"]', css: { - 'background-image': `url(${TraderIcon})`, + 'background-image': `url(${svgTraderSrc})`, 'text-valign': 'bottom', 'text-margin-y': 8, }, @@ -181,7 +181,7 @@ export function STYLESHEET(): StylesheetCSS[] { { selector: 'node[type="special"]', css: { - 'background-image': `url(${SpecialIcon})`, + 'background-image': `url(${svgTraderVariantSrc})`, 'text-valign': 'bottom', 'text-margin-y': 8, }, @@ -189,7 +189,7 @@ export function STYLESHEET(): StylesheetCSS[] { { selector: 'node[type="dex"]', css: { - 'background-image': `url(${DexIcon})`, + 'background-image': `url(${svgDexSrc})`, 'text-max-width': '5rem', 'text-valign': 'bottom', 'text-margin-y': 8, @@ -198,7 +198,7 @@ export function STYLESHEET(): StylesheetCSS[] { { selector: 'node[type="token"]', css: { - 'background-image': `url(${TokenIcon})`, + 'background-image': `url(${svgEthNetworkSrc})`, 'text-max-width': '5rem', 'text-valign': 'bottom', 'text-margin-y': 8, @@ -218,7 +218,7 @@ export function STYLESHEET(): StylesheetCSS[] { { selector: 'node[type="cowProtocol"]', css: { - 'background-image': `url(${CowProtocolIcon})`, + 'background-image': `url(${svgCoWProtocolSrc})`, height: '90', width: '90', 'text-valign': 'bottom', diff --git a/apps/explorer/src/explorer/components/common/Search/index.tsx b/apps/explorer/src/explorer/components/common/Search/index.tsx index 88a6bd7e53..7f15e1be42 100644 --- a/apps/explorer/src/explorer/components/common/Search/index.tsx +++ b/apps/explorer/src/explorer/components/common/Search/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react' import { Wrapper, Button, Input, SearchIcon, Placeholder } from './Search.styled' -import searchImg from '../../../../assets/img/search2.svg' +import svgSearch2Src from '../../../../assets/img/search2.svg' import { useSearchSubmit } from '../../../../hooks/useSearchSubmit' // assets @@ -34,7 +34,7 @@ export const Search: React.FC = (props) => { className={className} > { MOOOOOOOOOOOOOOOOOO - + MOOOOOOOOOOOOOOOOOO - + diff --git a/libs/ui/src/containers/Footer/index.tsx b/libs/ui/src/containers/Footer/index.tsx index 89824d7648..a5c6aa0896 100644 --- a/libs/ui/src/containers/Footer/index.tsx +++ b/libs/ui/src/containers/Footer/index.tsx @@ -1,7 +1,7 @@ import { ReactNode, useRef, useState } from 'react' import { Category, toGtmEvent } from '@cowprotocol/analytics' -import IMG_ICON_ARROW_RIGHT_CIRCULAR from '@cowprotocol/assets/images/arrow-right-circular.svg' +import svgArrowRightCircularSrc from '@cowprotocol/assets/images/arrow-right-circular.svg' import { useTheme } from '@cowprotocol/common-hooks' import SVG from 'react-inlinesvg' @@ -195,7 +195,7 @@ export const Footer = ({ {additionalFooterContent && additionalFooterContent} - + diff --git a/libs/ui/src/pure/ArrowIcon/index.tsx b/libs/ui/src/pure/ArrowIcon/index.tsx index 3f18f28af4..66a0da41bc 100644 --- a/libs/ui/src/pure/ArrowIcon/index.tsx +++ b/libs/ui/src/pure/ArrowIcon/index.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import DropDown from '@cowprotocol/assets/images/dropdown.svg' +import svgDropdownSrc from '@cowprotocol/assets/images/dropdown.svg' import SVG from 'react-inlinesvg' import styled from 'styled-components/macro' @@ -64,7 +64,7 @@ export function ArrowIcon({ }: ArrowIconProps): ReactNode { return ( - + diff --git a/libs/ui/src/pure/HelpTooltip/index.tsx b/libs/ui/src/pure/HelpTooltip/index.tsx index 65079dd1b6..e1b82e0be4 100644 --- a/libs/ui/src/pure/HelpTooltip/index.tsx +++ b/libs/ui/src/pure/HelpTooltip/index.tsx @@ -1,6 +1,6 @@ import { ReactElement, ReactNode } from 'react' -import QuestionImage from '@cowprotocol/assets/svg/question.svg' +import svgQuestionSrc from '@cowprotocol/assets/svg/question.svg' import SVG from 'react-inlinesvg' import styled from 'styled-components/macro' @@ -8,7 +8,7 @@ import styled from 'styled-components/macro' import { UI } from '../../enum' import { HoverTooltip, HoverTooltipProps, renderTooltip } from '../Tooltip' -const DefaultQuestionIcon = +const DefaultQuestionIcon = export const QuestionTooltipIconWrapper = styled.div<{ $size?: number; $dimmed?: boolean }>` position: relative; diff --git a/libs/ui/src/pure/Icon/index.tsx b/libs/ui/src/pure/Icon/index.tsx index c47de3ee55..abfa4e562d 100644 --- a/libs/ui/src/pure/Icon/index.tsx +++ b/libs/ui/src/pure/Icon/index.tsx @@ -1,6 +1,6 @@ -import iconFilledAlertTriangle from '@cowprotocol/assets/cow-swap/alert.svg' -import iconSuccess from '@cowprotocol/assets/cow-swap/check.svg' -import iconInformation from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' +import svgAlertSrc from '@cowprotocol/assets/cow-swap/alert.svg' +import svgCheckSrc from '@cowprotocol/assets/cow-swap/check.svg' +import svgFilledInfoCircleSrc from '@cowprotocol/assets/cow-swap/filled-info-circle.svg' import SVG from 'react-inlinesvg' import styled from 'styled-components/macro' @@ -15,10 +15,10 @@ export enum IconType { } const IconTypeMap: Record = { - [IconType.ALERT]: iconFilledAlertTriangle, - [IconType.INFORMATION]: iconInformation, - [IconType.DANGER]: iconFilledAlertTriangle, - [IconType.SUCCESS]: iconSuccess, + [IconType.ALERT]: svgAlertSrc, + [IconType.INFORMATION]: svgFilledInfoCircleSrc, + [IconType.DANGER]: svgAlertSrc, + [IconType.SUCCESS]: svgCheckSrc, } interface IconProps { diff --git a/libs/ui/src/pure/MenuBar/index.tsx b/libs/ui/src/pure/MenuBar/index.tsx index b275eb8bc0..a30bb94801 100644 --- a/libs/ui/src/pure/MenuBar/index.tsx +++ b/libs/ui/src/pure/MenuBar/index.tsx @@ -10,12 +10,12 @@ import React, { useState, } from 'react' -import IMG_ICON_ARROW_RIGHT from '@cowprotocol/assets/images/arrow-right.svg' -import IMG_ICON_CARRET_DOWN from '@cowprotocol/assets/images/carret-down.svg' -import IMG_ICON_MENU_DOTS from '@cowprotocol/assets/images/menu-grid-dots.svg' -import IMG_ICON_MENU_HAMBURGER from '@cowprotocol/assets/images/menu-hamburger.svg' -import IMG_ICON_SETTINGS_GLOBAL from '@cowprotocol/assets/images/settings-global.svg' -import IMG_ICON_X from '@cowprotocol/assets/images/x.svg' +import svgArrowRightSrc from '@cowprotocol/assets/images/arrow-right.svg' +import svgCarretDownSrc from '@cowprotocol/assets/images/carret-down.svg' +import svgMenuGridDotsSrc from '@cowprotocol/assets/images/menu-grid-dots.svg' +import svgMenuHamburgerSrc from '@cowprotocol/assets/images/menu-hamburger.svg' +import svgSettingsGlobalSrc from '@cowprotocol/assets/images/settings-global.svg' +import svgXSrc from '@cowprotocol/assets/images/x.svg' import { LOCALE_DISPLAY_NAMES } from '@cowprotocol/common-const' import { useBodyScrollbarLocker, useMediaQuery, useOnClickOutside } from '@cowprotocol/common-hooks' @@ -319,7 +319,7 @@ const DropdownContentItem: React.FC<{ {renderItemContent()} {item.href && !item.children && ( - + )} @@ -337,7 +337,7 @@ const DropdownContentItem: React.FC<{ hoverColor={item.hoverColor} > {renderItemContent()} - + {isChildrenVisible && ( {renderItemContent()} - {item.external && !item.children && } - {!item.external && !item.children && } + {item.external && !item.children && } + {!item.external && !item.children && } ) @@ -407,7 +407,7 @@ const NavDaoTrigger: React.FC<{ onClick={handleToggle} isOpen={isOpen} > - + {isOpen && (mobileMode ? ( @@ -464,7 +464,7 @@ const GenericDropdown: React.FC = ({ {item.badgeImage ? : item.badge} )} - {item.children && } + {item.children && } {isOpen && ( = ({ {item.description && {item.description}} - {item.children && } + {item.children && } {!item.children && ( - + )} {item.children && visibleThirdLevel === index && ( = (props) => - + {!mobileMode && languagesContent}

    {mobileMode && languagesContent} @@ -719,7 +719,7 @@ const GlobalSettingsDropdown = forwardRef {item.label} - + ) @@ -967,7 +967,7 @@ export const MenuBar = (props: MenuBarProps) => { {item.label} - + ) @@ -975,7 +975,7 @@ export const MenuBar = (props: MenuBarProps) => { {showGlobalSettings && settingsNavItems && ( <> - + {isSettingsOpen && (isMedium ? ( @@ -1013,7 +1013,7 @@ export const MenuBar = (props: MenuBarProps) => { {isMobile && ( - + )} @@ -1052,10 +1052,7 @@ export const MenuBar = (props: MenuBarProps) => { {item.label} - + ) diff --git a/libs/ui/src/pure/ProductLogo/index.tsx b/libs/ui/src/pure/ProductLogo/index.tsx index 7a68f21261..49e07d2a4c 100644 --- a/libs/ui/src/pure/ProductLogo/index.tsx +++ b/libs/ui/src/pure/ProductLogo/index.tsx @@ -1,16 +1,16 @@ import { ReactNode } from 'react' -import LOGO_COWAMM from '@cowprotocol/assets/images/logo-cowamm.svg' -import LOGO_COWDAO from '@cowprotocol/assets/images/logo-cowdao.svg' -import LOGO_COWEXPLORER from '@cowprotocol/assets/images/logo-cowexplorer.svg' -import LOGO_COWPROTOCOL from '@cowprotocol/assets/images/logo-cowprotocol.svg' -import LOGO_COWSWAP_CHRISTMAS_DARK from '@cowprotocol/assets/images/logo-cowswap-christmas-dark.svg' -import LOGO_COWSWAP_CHRISTMAS from '@cowprotocol/assets/images/logo-cowswap-christmas-light.svg' -import LOGO_COWSWAP_HALLOWEEN from '@cowprotocol/assets/images/logo-cowswap-halloween.svg' -import LOGO_COWSWAP from '@cowprotocol/assets/images/logo-cowswap.svg' -import LOGO_ICON_COW from '@cowprotocol/assets/images/logo-icon-cow.svg' -import LOGO_ICON_MEVBLOCKER from '@cowprotocol/assets/images/logo-icon-mevblocker.svg' -import LOGO_MEVBLOCKER from '@cowprotocol/assets/images/logo-mevblocker.svg' +import svgCowammSrc from '@cowprotocol/assets/images/logo-cowamm.svg' +import svgCowdaoSrc from '@cowprotocol/assets/images/logo-cowdao.svg' +import svgCowexplorerSrc from '@cowprotocol/assets/images/logo-cowexplorer.svg' +import svgCowprotocolSrc from '@cowprotocol/assets/images/logo-cowprotocol.svg' +import svgCowswapChristmasDarkSrc from '@cowprotocol/assets/images/logo-cowswap-christmas-dark.svg' +import svgCowswapChristmasLightSrc from '@cowprotocol/assets/images/logo-cowswap-christmas-light.svg' +import svgCowswapHalloweenSrc from '@cowprotocol/assets/images/logo-cowswap-halloween.svg' +import svgCowswapSrc from '@cowprotocol/assets/images/logo-cowswap.svg' +import iconCowSrc from '@cowprotocol/assets/images/logo-icon-cow.svg' +import iconMevblockerSrc from '@cowprotocol/assets/images/logo-icon-mevblocker.svg' +import svgMevblockerSrc from '@cowprotocol/assets/images/logo-mevblocker.svg' import { useTheme } from '@cowprotocol/common-hooks' import { toPixelValue } from '@cowprotocol/ui-utils' @@ -52,38 +52,38 @@ const LOGOS: Record = { [ProductVariant.CowSwap]: { light: { default: { - src: LOGO_COWSWAP, + src: svgCowswapSrc, alt: 'CoW Swap', color: '#004293', }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW Swap', color: '#004293', }, }, dark: { default: { - src: LOGO_COWSWAP, + src: svgCowswapSrc, alt: 'CoW Swap', color: Color.blue300Primary, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW Swap', color: Color.blue300Primary, }, }, darkHalloween: { default: { - src: LOGO_COWSWAP_HALLOWEEN, + src: svgCowswapHalloweenSrc, alt: 'CoW Swap', preserveOriginalColors: true, }, }, darkChristmas: { default: { - src: LOGO_COWSWAP_CHRISTMAS_DARK, + src: svgCowswapChristmasDarkSrc, alt: 'CoW Swap', color: Color.blue300Primary, height: '56px', @@ -93,7 +93,7 @@ const LOGOS: Record = { }, lightChristmas: { default: { - src: LOGO_COWSWAP_CHRISTMAS, + src: svgCowswapChristmasLightSrc, alt: 'CoW Swap', color: '#004293', height: '56px', @@ -107,24 +107,24 @@ const LOGOS: Record = { [ProductVariant.CowExplorer]: { light: { default: { - src: LOGO_COWEXPLORER, + src: svgCowexplorerSrc, alt: 'CoW Explorer', color: Color.neutral0, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW Explorer', color: Color.neutral0, }, }, dark: { default: { - src: LOGO_COWEXPLORER, + src: svgCowexplorerSrc, alt: 'CoW Explorer', color: Color.neutral100, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW Explorer', color: Color.neutral100, }, @@ -135,24 +135,24 @@ const LOGOS: Record = { [ProductVariant.CowDao]: { light: { default: { - src: LOGO_COWDAO, + src: svgCowdaoSrc, alt: 'CoW DAO', color: Color.neutral0, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW DAO', color: Color.neutral0, }, }, dark: { default: { - src: LOGO_COWDAO, + src: svgCowdaoSrc, alt: 'CoW DAO', color: Color.neutral100, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW DAO', color: Color.neutral100, }, @@ -163,24 +163,24 @@ const LOGOS: Record = { [ProductVariant.CowProtocol]: { light: { default: { - src: LOGO_COWPROTOCOL, + src: svgCowprotocolSrc, alt: 'CoW Protocol', color: Color.neutral0, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW Protocol', color: Color.neutral0, }, }, dark: { default: { - src: LOGO_COWPROTOCOL, + src: svgCowprotocolSrc, alt: 'CoW Protocol', color: Color.neutral100, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW Protocol', color: Color.neutral100, }, @@ -191,24 +191,24 @@ const LOGOS: Record = { [ProductVariant.MevBlocker]: { light: { default: { - src: LOGO_MEVBLOCKER, + src: svgMevblockerSrc, alt: 'MEV Blocker', color: '#EC4612', }, logoIconOnly: { - src: LOGO_ICON_MEVBLOCKER, + src: iconMevblockerSrc, alt: 'MEV Blocker', color: '#EC4612', }, }, dark: { default: { - src: LOGO_MEVBLOCKER, + src: svgMevblockerSrc, alt: 'MEV Blocker', color: '#EC4612', }, logoIconOnly: { - src: LOGO_ICON_MEVBLOCKER, + src: iconMevblockerSrc, alt: 'MEV Blocker', color: '#EC4612', }, @@ -219,24 +219,24 @@ const LOGOS: Record = { [ProductVariant.CowAmm]: { light: { default: { - src: LOGO_COWAMM, + src: svgCowammSrc, alt: 'CoW AMM', color: Color.blue900Primary, }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW AMM', color: Color.blue900Primary, }, }, dark: { default: { - src: LOGO_COWAMM, + src: svgCowammSrc, alt: 'CoW AMM', color: '#007CDB', }, logoIconOnly: { - src: LOGO_ICON_COW, + src: iconCowSrc, alt: 'CoW AMM', color: '#007CDB', }, @@ -310,7 +310,7 @@ export const ProductLogoWrapper = styled.span<{ ` // TODO: Reduce function complexity by extracting logic -// eslint-disable-next-line complexity + export const ProductLogo = ({ variant, theme: customThemeMode, diff --git a/libs/wallet/src/assets.ts b/libs/wallet/src/assets.ts index 9490184658..cfce9919f6 100644 --- a/libs/wallet/src/assets.ts +++ b/libs/wallet/src/assets.ts @@ -1,5 +1,5 @@ -import CoinbaseWalletIcon from './api/assets/coinbase.svg' -import MetaMaskLogo from './api/assets/metamask.png' -import WalletConnectIcon from './api/assets/walletConnectIcon.svg' +import svgCoinbaseSrc from './api/assets/coinbase.svg' +import imgMetamaskSrc from './api/assets/metamask.png' +import iconWalletConnectSrc from './api/assets/walletConnectIcon.svg' -export { CoinbaseWalletIcon, WalletConnectIcon, MetaMaskLogo } +export { svgCoinbaseSrc, iconWalletConnectSrc, imgMetamaskSrc } From 4bdd8e5df2f4a118baebc809536e9b1849941eea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dani=20G=C3=A1mez=20Franco?= Date: Sun, 3 May 2026 02:03:37 +0200 Subject: [PATCH 13/13] fix: fix incorrectly updated copy --- apps/cowswap-frontend/src/locales/en-US.po | 5 +---- .../src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/cowswap-frontend/src/locales/en-US.po b/apps/cowswap-frontend/src/locales/en-US.po index ffb0bf1447..3b68791f0f 100644 --- a/apps/cowswap-frontend/src/locales/en-US.po +++ b/apps/cowswap-frontend/src/locales/en-US.po @@ -2018,6 +2018,7 @@ msgstr "Cancellation failed" msgid "Pool address" msgstr "Pool address" +#: apps/cowswap-frontend/src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx #: apps/cowswap-frontend/src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx msgid "Initiating {nativeTokenSymbol} Refund..." msgstr "Initiating {nativeTokenSymbol} Refund..." @@ -3607,10 +3608,6 @@ msgstr "This way, you'll take advantage of" msgid "Your combined balance" msgstr "Your combined balance" -#: apps/cowswap-frontend/src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx -msgid "Initiating {nativeTokenSymbol} svgRefundSrc..." -msgstr "Initiating {nativeTokenSymbol} svgRefundSrc..." - #: apps/cowswap-frontend/src/modules/affiliate/pure/TraderActivityTable.tsx #~ msgid "Not eligible" #~ msgstr "Not eligible" diff --git a/apps/cowswap-frontend/src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx b/apps/cowswap-frontend/src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx index 4905b8d963..42508ae16b 100644 --- a/apps/cowswap-frontend/src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx +++ b/apps/cowswap-frontend/src/modules/ethFlow/pure/EthFlowStepper/steps/Step3.tsx @@ -152,7 +152,7 @@ export function Step3({ !(refundHash || cancellationHash) && cancellationFailed === undefined && ( - Initiating {nativeTokenSymbol} svgRefundSrc... + Initiating {nativeTokenSymbol} Refund... )} {orderIsNotCreated && (