diff --git a/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx index 91758f84ac..acf7f7755b 100644 --- a/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx +++ b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx @@ -7,8 +7,6 @@ import { useWalletInfo } from '@cowprotocol/wallet' import ReactDOM from 'react-dom' - - import { upToLarge, useMediaQuery } from 'legacy/hooks/useMediaQuery' import { useToggleAccountModal } from 'modules/account' @@ -21,13 +19,21 @@ import { useIsProviderNetworkUnsupported } from 'common/hooks/useIsProviderNetwo import { BalanceText, Wrapper } from './styled' +import { NetworkSelector } from '../NetworkSelector' + interface AccountElementProps { pendingActivities: string[] standaloneMode?: boolean className?: string + hideNetworkSelector?: boolean } -export function AccountElement({ className, standaloneMode, pendingActivities }: AccountElementProps) { +export function AccountElement({ + className, + standaloneMode, + pendingActivities, + hideNetworkSelector, +}: AccountElementProps) { const { account, chainId } = useWalletInfo() const isChainIdUnsupported = useIsProviderNetworkUnsupported() const userEthBalance = useNativeCurrencyAmount(chainId, account) @@ -35,7 +41,6 @@ export function AccountElement({ className, standaloneMode, pendingActivities }: const nativeTokenSymbol = NATIVE_CURRENCIES[chainId].symbol const isUpToLarge = useMediaQuery(upToLarge) - const unreadNotifications = useUnreadNotifications() const unreadNotificationsCount = Object.keys(unreadNotifications).length @@ -44,18 +49,25 @@ export function AccountElement({ className, standaloneMode, pendingActivities }: return ( <> - {standaloneMode !== false && account && !isChainIdUnsupported && userEthBalance && chainId && !isUpToLarge && ( - - - - )} + {!!hideNetworkSelector && + standaloneMode !== false && + account && + !isChainIdUnsupported && + userEthBalance && + chainId && + !isUpToLarge && ( + + + + )} + {!hideNetworkSelector && } account && toggleAccountModal()} /> {account && ( { clickNotifications( - unreadNotificationsCount === 0 ? 'click-bell' : 'click-bell-with-pending-notifications' + unreadNotificationsCount === 0 ? 'click-bell' : 'click-bell-with-pending-notifications', ) setSidebarOpen(true) }} @@ -65,7 +77,7 @@ export function AccountElement({ className, standaloneMode, pendingActivities }: {ReactDOM.createPortal( setSidebarOpen(false)} />, - document.body + document.body, )} ) 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 6866a903ba..78858960d4 100644 --- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx +++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/TradeWidgetForm.tsx @@ -45,7 +45,7 @@ const scrollToMyOrders = () => { export function TradeWidgetForm(props: TradeWidgetProps) { const isInjectedWidgetMode = isInjectedWidget() - const { standaloneMode, hideOrdersTable } = useInjectedWidgetParams() + const { standaloneMode, hideOrdersTable, hideNetworkSelector } = useInjectedWidgetParams() const isMobile = useMediaQuery(Media.upToSmall(false)) const isAlternativeOrderModalVisible = useIsAlternativeOrderModalVisible() @@ -162,7 +162,11 @@ export function TradeWidgetForm(props: TradeWidgetProps) { {isAlternativeOrderModalVisible ?
: } {isInjectedWidgetMode && standaloneMode && ( - + )} {shouldShowMyOrdersButton && ( diff --git a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts index 0e9c49a740..8be13eed13 100644 --- a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts +++ b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts @@ -43,6 +43,7 @@ export function useWidgetParams(configuratorState: ConfiguratorState): CowSwapWi standaloneMode, disableToastMessages, disableProgressBar, + hideNetworkSelector, hideBridgeInfo, hideOrdersTable, } = configuratorState @@ -90,6 +91,7 @@ export function useWidgetParams(configuratorState: ConfiguratorState): CowSwapWi standaloneMode, disableToastMessages, disableProgressBar, + hideNetworkSelector, partnerFee: partnerFeeBps > 0 diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx index 36957e41df..38172b34ed 100644 --- a/apps/widget-configurator/src/app/configurator/index.tsx +++ b/apps/widget-configurator/src/app/configurator/index.tsx @@ -145,6 +145,9 @@ export function Configurator({ title }: { title: string }) { const [disableProgressBar, setDisableProgressBar] = useState(false) const toggleDisableProgressBar = useCallback(() => setDisableProgressBar((curr) => !curr), []) + const [hideNetworkSelector, setHideNetworkSelector] = useState(true) + const toggleHideNetworkSelector = useCallback(() => setHideNetworkSelector((curr) => !curr), []) + const [hideBridgeInfo, setHideBridgeInfo] = useState(false) const toggleHideBridgeInfo = useCallback(() => setHideBridgeInfo((curr) => !curr), []) @@ -184,6 +187,7 @@ export function Configurator({ title }: { title: string }) { standaloneMode, disableToastMessages, disableProgressBar, + hideNetworkSelector, hideBridgeInfo, hideOrdersTable, } @@ -335,6 +339,20 @@ export function Configurator({ title }: { title: string }) { + + Network selector: + + } label="Show network selector" /> + } label="Hide network selector" /> + + + Progress bar: diff --git a/apps/widget-configurator/src/app/configurator/types.ts b/apps/widget-configurator/src/app/configurator/types.ts index 4eef4bf02a..003b373c13 100644 --- a/apps/widget-configurator/src/app/configurator/types.ts +++ b/apps/widget-configurator/src/app/configurator/types.ts @@ -35,4 +35,5 @@ export interface ConfiguratorState { disableProgressBar: boolean hideBridgeInfo: boolean | undefined hideOrdersTable: boolean | undefined + hideNetworkSelector: boolean | undefined }