Inline banner on token list (cowprotocol#3956)

* feat: progress * feat: progress * fix: do not use alias import inside module * fix: remove disabling of module-boundaries rule * feat: cleanup * feat: cleanup --------- Co-authored-by: Alfetopito <[email protected]>
xyzseer · Mar 4, 2024 · fb4d797 · fb4d797
1 parent ceb30ed
commit fb4d797
Show file tree

Hide file tree

Showing 36 changed files with 142 additions and 81 deletions.
diff --git a/apps/cowswap-frontend/src/common/constants/common.ts b/apps/cowswap-frontend/src/common/constants/common.ts
@@ -5,8 +5,6 @@ import ms from 'ms.macro'
 
 export const HIGH_FEE_WARNING_PERCENTAGE = new Percent(1, 10)
 
-export const SAFE_COW_APP_LINK = 'https://app.safe.global/share/safe-app?appUrl=https%3A%2F%2Fswap.cow.fi&chain=eth'
-
 export const MAX_ORDER_DEADLINE = ms`182d` + ms`12h` // 6 months, matching backend's https://github.com/cowprotocol/infrastructure/blob/901ed8e2fe3ea57956585f107bdd7539c2e7d3d1/services/Pulumi.yaml#L15
 
 // Use a 150K gas as a fallback if there's issue calculating the gas estimation (fixes some issues with some nodes failing to calculate gas costs for SC wallets)

diff --git a/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx b/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx
@@ -6,7 +6,15 @@ import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useENS } from '@cowprotocol/ens'
 import { TokenLogo, useTokenBySymbolOrAddress } from '@cowprotocol/tokens'
 import { UiOrderType } from '@cowprotocol/types'
-import { ExternalLink, TokenAmount, UI } from '@cowprotocol/ui'
+import {
+  ExternalLink,
+  TokenAmount,
+  UI,
+  Icon,
+  IconType,
+  BannerOrientation,
+  CustomRecipientWarningBanner,
+} from '@cowprotocol/ui'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
 import { OrderProgressBar } from 'legacy/components/OrderProgressBar'
@@ -19,8 +27,6 @@ import { EthFlowStepper } from 'modules/swap/containers/EthFlowStepper'
 import { useCancelOrder } from 'common/hooks/useCancelOrder'
 import { isPending } from 'common/hooks/useCategorizeRecentActivity'
 import { useGetSurplusData } from 'common/hooks/useGetSurplusFiatValue'
-import { Icon, IconType } from 'common/pure/Icon'
-import { BannerOrientation, CustomRecipientWarningBanner } from 'common/pure/InlineBanner/banners'
 import { RateInfo, RateInfoParams } from 'common/pure/RateInfo'
 import { SafeWalletLink } from 'common/pure/SafeWalletLink'
 import {

diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx
@@ -2,6 +2,7 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import React, { useCallback, useEffect } from 'react'
 
 import { isFractionFalsy } from '@cowprotocol/common-utils'
+import { BundleTxApprovalBanner, BundleTxSafeWcBanner, SmallVolumeWarningBanner } from '@cowprotocol/ui'
 import { useIsSafeViaWc, useWalletInfo } from '@cowprotocol/wallet'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
@@ -23,11 +24,6 @@ import { useTradeQuote } from 'modules/tradeQuote'
 import { useShouldZeroApprove } from 'modules/zeroApproval'
 
 import { HIGH_FEE_WARNING_PERCENTAGE } from 'common/constants/common'
-import {
-  BundleTxApprovalBanner,
-  BundleTxSafeWcBanner,
-  SmallVolumeWarningBanner,
-} from 'common/pure/InlineBanner/banners'
 import { ZeroApprovalWarning } from 'common/pure/ZeroApprovalWarning'
 import { calculatePercentageInRelationToReference } from 'utils/orderUtils/calculatePercentageInRelationToReference'
 

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx
@@ -7,7 +7,7 @@ import { getAddress, getEtherscanLink } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenLogo } from '@cowprotocol/tokens'
 import { Command, UiOrderType } from '@cowprotocol/types'
-import { Loader, TokenAmount, TokenSymbol, UI } from '@cowprotocol/ui'
+import { Loader, TokenAmount, TokenSymbol, UI, ButtonSecondary } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount, Percent, Price } from '@uniswap/sdk-core'
 
 import SVG from 'react-inlinesvg'
@@ -28,7 +28,6 @@ import { OrderStatusBox } from 'modules/ordersTable/pure/OrderStatusBox'
 import { getIsEthFlowOrder } from 'modules/swap/containers/EthFlowStepper'
 
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
-import { ButtonSecondary } from 'common/pure/ButtonSecondary'
 import { RateInfo } from 'common/pure/RateInfo'
 import { getQuoteCurrency } from 'common/services/getQuoteCurrency'
 import { isOrderCancellable } from 'common/utils/isOrderCancellable'

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
@@ -4,16 +4,14 @@ import cowMeditatingV2 from '@cowprotocol/assets/cow-swap/meditating-cow-v2.svg'
 import imageConnectWallet from '@cowprotocol/assets/cow-swap/wallet-plus.svg'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { ExternalLink } from '@cowprotocol/ui'
-import { UI } from '@cowprotocol/ui'
+import { UI, CowSwapSafeAppLink } from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/macro'
 import SVG from 'react-inlinesvg'
 import styled from 'styled-components/macro'
 
 import { Web3Status } from 'modules/wallet/containers/Web3Status'
 
-import { CowSwapSafeAppLink } from 'common/pure/CowSwapSafeAppLink'
-
 import { OrdersTable, OrdersTableProps } from './OrdersTable'
 import { OrdersTabs, OrdersTabsProps } from './OrdersTabs'
 

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/index.tsx
@@ -1,7 +1,15 @@
 import { ExplorerDataType, getExplorerLink, isSellOrder, shortenAddress } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { Command } from '@cowprotocol/types'
-import { ExternalLink, UI } from '@cowprotocol/ui'
+import {
+  UI,
+  Icon,
+  IconType,
+  ExternalLink,
+  InlineBanner,
+  BannerOrientation,
+  CustomRecipientWarningBanner,
+} from '@cowprotocol/ui'
 import { CurrencyAmount, Fraction, Token } from '@uniswap/sdk-core'
 
 import { OrderStatus } from 'legacy/state/orders/actions'
@@ -10,9 +18,6 @@ import { CloseIcon } from 'legacy/theme'
 import { TwapOrderItem } from 'modules/twap/types'
 
 import { isPending } from 'common/hooks/useCategorizeRecentActivity'
-import { Icon, IconType } from 'common/pure/Icon'
-import { InlineBanner } from 'common/pure/InlineBanner'
-import { BannerOrientation, CustomRecipientWarningBanner } from 'common/pure/InlineBanner/banners'
 import { CowModal } from 'common/pure/Modal'
 import {
   useHideReceiverWalletBanner,

diff --git a/apps/cowswap-frontend/src/modules/swap/pure/banners/TwapSuggestionBanner.tsx b/apps/cowswap-frontend/src/modules/swap/pure/banners/TwapSuggestionBanner.tsx
@@ -1,4 +1,5 @@
 import { OrderKind, SupportedChainId } from '@cowprotocol/cow-sdk'
+import { InlineBanner } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 
 import { NavLink } from 'react-router-dom'
@@ -9,7 +10,6 @@ import { parameterizeTradeRoute } from 'modules/trade/utils/parameterizeTradeRou
 import { parameterizeTradeSearch } from 'modules/trade/utils/parameterizeTradeSearch'
 
 import { Routes } from 'common/constants/routes'
-import { InlineBanner } from 'common/pure/InlineBanner'
 
 const StyledNavLink = styled(NavLink)`
   color: inherit;

diff --git a/apps/cowswap-frontend/src/modules/swap/pure/warnings.tsx b/apps/cowswap-frontend/src/modules/swap/pure/warnings.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { genericPropsChecker } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { BundleTxApprovalBanner, BundleTxSafeWcBanner, BundleTxWrapBanner } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 
 import styled from 'styled-components/macro'
@@ -13,7 +14,6 @@ import { CompatibilityIssuesWarning } from 'modules/trade/pure/CompatibilityIssu
 import { NoImpactWarning } from 'modules/trade/pure/NoImpactWarning'
 import { TradeUrlParams } from 'modules/trade/types/TradeRawState'
 
-import { BundleTxApprovalBanner, BundleTxSafeWcBanner, BundleTxWrapBanner } from 'common/pure/InlineBanner/banners'
 import { ZeroApprovalWarning } from 'common/pure/ZeroApprovalWarning'
 
 import { TwapSuggestionBanner } from './banners/TwapSuggestionBanner'

diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokensVirtualList/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokensVirtualList/index.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react'
 
 import { TokenWithLogo } from '@cowprotocol/common-const'
+import { BannerOrientation, ExternalLink, InlineBanner, LINK_GUIDE_ADD_CUSTOM_TOKEN } from '@cowprotocol/ui'
 
 import { useVirtualizer } from '@tanstack/react-virtual'
 import ms from 'ms.macro'
@@ -63,6 +64,19 @@ export function TokensVirtualList(props: TokensVirtualListProps) {
     <CommonListContainer id="tokens-list" ref={parentRef} onScroll={onScroll}>
       <styledEl.TokensInner ref={wrapperRef} style={{ height: virtualizer.getTotalSize() }}>
         <styledEl.TokensScroller style={{ transform: `translateY(${items[0]?.start ?? 0}px)` }}>
+          <InlineBanner
+            margin={'10px'}
+            width="auto"
+            orientation={BannerOrientation.Horizontal}
+            bannerType={'information'}
+          >
+            <p>
+              Can't find your token on the list?{' '}
+              <ExternalLink href={LINK_GUIDE_ADD_CUSTOM_TOKEN}>Read our guide</ExternalLink> on how to add custom
+              tokens.
+            </p>
+          </InlineBanner>
+
           {items.map((virtualRow) => {
             const token = sortedTokens[virtualRow.index]
             const addressLowerCase = token.address.toLowerCase()

diff --git a/apps/cowswap-frontend/src/modules/trade/containers/SellNativeWarningBanner/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/SellNativeWarningBanner/index.tsx
@@ -1,8 +1,8 @@
 import { OrderKind } from '@cowprotocol/cow-sdk'
+import { SellNativeWarningBanner as Pure } from '@cowprotocol/ui'
 
 import { Field } from 'legacy/state/types'
 
-import { SellNativeWarningBanner as Pure } from 'common/pure/InlineBanner/banners'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 
 import { useDerivedTradeState } from '../../hooks/useDerivedTradeState'

diff --git a/apps/cowswap-frontend/src/modules/trade/pure/PriceUpdatedBanner/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/PriceUpdatedBanner/index.tsx
@@ -1,9 +1,9 @@
 import { UI } from '@cowprotocol/ui'
+import { InlineBanner } from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
 
-import { InlineBanner } from 'common/pure/InlineBanner'
 
 const Wrapper = styled.div`
   display: flex;

diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradeConfirmation/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradeConfirmation/index.tsx
@@ -1,6 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react'
 
-import { ButtonSize, ButtonPrimary, BackButton, CenteredDots, LongLoadText } from '@cowprotocol/ui'
+import {
+  ButtonSize,
+  ButtonPrimary,
+  BackButton,
+  CenteredDots,
+  LongLoadText,
+  BannerOrientation,
+  CustomRecipientWarningBanner,
+} from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/macro'
 import ms from 'ms.macro'
@@ -9,7 +17,6 @@ import { useMediaQuery, upToMedium } from 'legacy/hooks/useMediaQuery'
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 
 import { CurrencyAmountPreview, CurrencyPreviewInfo } from 'common/pure/CurrencyInputPanel'
-import { BannerOrientation, CustomRecipientWarningBanner } from 'common/pure/InlineBanner/banners'
 
 import { QuoteCountdown } from './CountDown'
 import { useIsPriceChanged } from './hooks/useIsPriceChanged'

diff --git a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/index.tsx
@@ -2,6 +2,7 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { useCallback } from 'react'
 
 import { modifySafeHandlerAnalytics } from '@cowprotocol/analytics'
+import { BundleTxApprovalBanner } from '@cowprotocol/ui'
 import { useIsSafeViaWc, useWalletInfo } from '@cowprotocol/wallet'
 
 import { useAdvancedOrdersDerivedState } from 'modules/advancedOrders'
@@ -12,7 +13,6 @@ import { TradeFormValidation, useGetTradeFormValidation } from 'modules/tradeFor
 import { useTradeQuoteFeeFiatAmount } from 'modules/tradeQuote'
 import { useShouldZeroApprove } from 'modules/zeroApproval'
 
-import { BundleTxApprovalBanner } from 'common/pure/InlineBanner/banners'
 import { ZeroApprovalWarning } from 'common/pure/ZeroApprovalWarning'
 
 import {

diff --git a/...wap-frontend/src/modules/twap/containers/TwapFormWarnings/warnings/BigPartTimeWarning.tsx b/...wap-frontend/src/modules/twap/containers/TwapFormWarnings/warnings/BigPartTimeWarning.tsx
@@ -1,4 +1,4 @@
-import { InlineBanner } from 'common/pure/InlineBanner'
+import { InlineBanner } from '@cowprotocol/ui'
 
 import { MAX_PART_TIME } from '../../../const'
 import { deadlinePartsDisplay } from '../../../utils/deadlinePartsDisplay'

diff --git a/...frontend/src/modules/twap/containers/TwapFormWarnings/warnings/FallbackHandlerWarning.tsx b/...frontend/src/modules/twap/containers/TwapFormWarnings/warnings/FallbackHandlerWarning.tsx
@@ -1,11 +1,9 @@
-import { ExternalLink } from '@cowprotocol/ui'
+import { ExternalLink, InlineBanner } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
 import { UNSUPPORTED_SAFE_LINK } from 'modules/twap/const'
 
-import { InlineBanner } from 'common/pure/InlineBanner'
-
 const Wrapper = styled.div`
   display: flex;
   flex-flow: column wrap;

diff --git a/...p-frontend/src/modules/twap/containers/TwapFormWarnings/warnings/SmallPartTimeWarning.tsx b/...p-frontend/src/modules/twap/containers/TwapFormWarnings/warnings/SmallPartTimeWarning.tsx
@@ -1,4 +1,4 @@
-import { InlineBanner } from 'common/pure/InlineBanner'
+import { InlineBanner } from '@cowprotocol/ui'
 
 import { MINIMUM_PART_TIME } from '../../../const'
 import { deadlinePartsDisplay } from '../../../utils/deadlinePartsDisplay'

diff --git a/...frontend/src/modules/twap/containers/TwapFormWarnings/warnings/SmallPartVolumeWarning.tsx b/...frontend/src/modules/twap/containers/TwapFormWarnings/warnings/SmallPartVolumeWarning.tsx
@@ -1,7 +1,5 @@
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
-import { TokenAmount } from '@cowprotocol/ui'
-
-import { InlineBanner } from 'common/pure/InlineBanner'
+import { TokenAmount, InlineBanner } from '@cowprotocol/ui'
 
 import { MINIMUM_PART_SELL_AMOUNT_FIAT } from '../../../const'
 

diff --git a/...end/src/modules/twap/containers/TwapFormWarnings/warnings/SmallPriceProtectionWarning.tsx b/...end/src/modules/twap/containers/TwapFormWarnings/warnings/SmallPriceProtectionWarning.tsx
@@ -1,4 +1,4 @@
-import { InlineBanner } from 'common/pure/InlineBanner'
+import { InlineBanner } from '@cowprotocol/ui'
 
 export function SmallPriceProtectionWarning() {
   return (

diff --git a/...tend/src/modules/twap/containers/TwapFormWarnings/warnings/SwapPriceDifferenceWarning.tsx b/...tend/src/modules/twap/containers/TwapFormWarnings/warnings/SwapPriceDifferenceWarning.tsx
@@ -1,4 +1,4 @@
-import { FiatAmount, TokenAmount } from '@cowprotocol/ui'
+import { FiatAmount, TokenAmount, InlineBanner } from '@cowprotocol/ui'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 
 import { NavLink } from 'react-router-dom'
@@ -8,7 +8,6 @@ import { TradeUrlParams } from 'modules/trade/types/TradeRawState'
 import { parameterizeTradeRoute } from 'modules/trade/utils/parameterizeTradeRoute'
 
 import { Routes } from 'common/constants/routes'
-import { InlineBanner } from 'common/pure/InlineBanner'
 
 import { SwapAmountDifference } from '../../../state/swapAmountDifferenceAtom'
 

diff --git a/...ontend/src/modules/twap/containers/TwapFormWarnings/warnings/UnsupportedWalletWarning.tsx b/...ontend/src/modules/twap/containers/TwapFormWarnings/warnings/UnsupportedWalletWarning.tsx
@@ -1,10 +1,7 @@
-import { ExternalLink } from '@cowprotocol/ui'
+import { ExternalLink, InlineBanner, CowSwapSafeAppLink } from '@cowprotocol/ui'
 
 import { UNSUPPORTED_WALLET_LINK } from 'modules/twap/const'
 
-import { CowSwapSafeAppLink } from 'common/pure/CowSwapSafeAppLink'
-import { InlineBanner } from 'common/pure/InlineBanner'
-
 export function UnsupportedWalletWarning({ isSafeViaWc }: { isSafeViaWc: boolean }) {
   if (isSafeViaWc) {
     return (

diff --git a/apps/cowswap-frontend/src/pages/Claim/CanUserClaimMessage.tsx b/apps/cowswap-frontend/src/pages/Claim/CanUserClaimMessage.tsx
@@ -8,10 +8,10 @@ import { Trans } from '@lingui/macro'
 import SVG from 'react-inlinesvg'
 
 import { ClaimStatus } from 'legacy/state/claim/actions'
-import { useClaimState, useClaimTimeInfo, useClaimLinks } from 'legacy/state/claim/hooks'
+import { useClaimLinks, useClaimState, useClaimTimeInfo } from 'legacy/state/claim/hooks'
 import { ClaimCommonTypes } from 'legacy/state/claim/types'
 
-import { IntroDescription, BannerExplainer } from './styled'
+import { BannerExplainer, IntroDescription } from './styled'
 
 type ClaimIntroductionProps = Pick<
   ClaimCommonTypes,

diff --git a/apps/cowswap-frontend/src/pages/Claim/ClaimAddress.tsx b/apps/cowswap-frontend/src/pages/Claim/ClaimAddress.tsx
@@ -12,7 +12,7 @@ import { useClaimDispatchers, useClaimState } from 'legacy/state/claim/hooks'
 import { ClaimCommonTypes } from 'legacy/state/claim/types'
 import { CustomLightSpinner, ThemedText } from 'legacy/theme'
 
-import { CheckAddress, InputField, InputFieldTitle, InputErrorText } from './styled'
+import { CheckAddress, InputErrorText, InputField, InputFieldTitle } from './styled'
 
 export type ClaimAddressProps = Pick<ClaimCommonTypes, 'account'> & {
   toggleWalletModal: Command | null

diff --git a/apps/cowswap-frontend/src/pages/Claim/ClaimNav.tsx b/apps/cowswap-frontend/src/pages/Claim/ClaimNav.tsx
@@ -7,7 +7,7 @@ import { ClaimStatus } from 'legacy/state/claim/actions'
 import { useClaimDispatchers, useClaimState } from 'legacy/state/claim/hooks'
 import { ClaimCommonTypes } from 'legacy/state/claim/types'
 
-import { TopNav, ClaimAccount, ClaimAccountButtons } from './styled'
+import { ClaimAccount, ClaimAccountButtons, TopNav } from './styled'
 
 type ClaimNavProps = Pick<ClaimCommonTypes, 'account' | 'handleChangeAccount'>
 

diff --git a/apps/cowswap-frontend/src/pages/Claim/ClaimingStatus.tsx b/apps/cowswap-frontend/src/pages/Claim/ClaimingStatus.tsx
@@ -5,8 +5,7 @@ import discordImage from '@cowprotocol/assets/cow-swap/discord.svg'
 import twitterImage from '@cowprotocol/assets/cow-swap/twitter.svg'
 import { V_COW } from '@cowprotocol/common-const'
 import { shortenAddress } from '@cowprotocol/common-utils'
-import { TokenAmount, ButtonSecondary } from '@cowprotocol/ui'
-import { ExternalLink } from '@cowprotocol/ui'
+import { ExternalLink, TokenAmount, ButtonSecondary } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 

diff --git a/libs/ui/src/consts.ts b/libs/ui/src/consts.ts
@@ -1 +1,3 @@
 export const AMOUNTS_FORMATTING_FEATURE_FLAG = 'highlight-amounts-formatting'
+export const SAFE_COW_APP_LINK = 'https://app.safe.global/share/safe-app?appUrl=https%3A%2F%2Fswap.cow.fi&chain=eth'
+export const LINK_GUIDE_ADD_CUSTOM_TOKEN = 'https://blog.cow.fi/how-to-add-custom-tokens-on-cow-swap-a72d677c78c0'
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -1,6 +1,12 @@
 export * from './pure/Button'
+export * from './pure/ButtonSecondaryAlt'
+export * from './pure/CowSwapSafeAppLink'
 export * from './pure/CenteredDots'
 export * from './pure/LongLoadText'
+export * from './pure/InlineBanner'
+export * from './pure/InlineBanner/banners'
+export * from './pure/Icon'
+export * from './pure/LinkStyledButton'
 export * from './pure/Loader'
 export { loadingOpacityMixin, LoadingRows } from './pure/Loader/styled'
 export * from './pure/Row'
@@ -15,3 +21,4 @@ export * from './pure/ExternalLink'
 export * from './pure/BackButton'
 export * from './enum'
 export * from './types'
+export * from './consts'
diff --git a/libs/ui/src/pure/Button/index.tsx b/libs/ui/src/pure/Button/index.tsx
@@ -5,7 +5,6 @@ import { ButtonProps } from 'rebass/styled-components'
 import styled from 'styled-components'
 
 import { RowBetween } from '../Row'
-import { ButtonSize, UI } from '../../enum'
 
 import {
   ButtonConfirmedStyle as ButtonConfirmedStyleMod,
@@ -14,6 +13,7 @@ import {
   ButtonOutlined as ButtonOutlinedMod,
   ButtonPrimary as ButtonPrimaryMod,
 } from './ButtonMod'
+import { ButtonSize, UI } from '../../enum'
 
 export * from './ButtonMod'
 

diff --git a/...src/common/pure/ButtonSecondary/index.tsx → .../ui/src/pure/ButtonSecondaryAlt/index.tsx b/...src/common/pure/ButtonSecondary/index.tsx → .../ui/src/pure/ButtonSecondaryAlt/index.tsx
@@ -1,8 +1,8 @@
-import { UI } from '@cowprotocol/ui'
+import { UI } from '../../enum'
 
 import styled from 'styled-components/macro'
 
-export const ButtonSecondary = styled.button<{ padding?: string; minHeight?: string }>`
+export const ButtonSecondaryAlt = styled.button<{ padding?: string; minHeight?: string }>`
   background: var(${UI.COLOR_PRIMARY});
   color: var(${UI.COLOR_BUTTON_TEXT});
   font-size: 12px;