feat(widget): hide bridge info

apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx

@@ -10,6 +10,8 @@ import styled from 'styled-components/macro'
 
 import { useDarkModeManager } from 'legacy/state/user/hooks'
 
+import { useInjectedWidgetParams } from 'modules/injectedWidget'
+
 const HideSmall = styled.span`
   ${Media.upToSmall()} {
     display: none;
@@ -61,7 +63,9 @@ const StyledArrowUpRight = styled(ArrowUpRight)`
 
 const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boolean; logoUrl: string }>`
   background: var(${UI.COLOR_PAPER_DARKER});
-  transition: color var(${UI.ANIMATION_DURATION}) ease-in-out, background var(${UI.ANIMATION_DURATION}) ease-in-out; // MOD
+  transition:
+    color var(${UI.ANIMATION_DURATION}) ease-in-out,
+    background var(${UI.ANIMATION_DURATION}) ease-in-out; // MOD
   border-radius: 20px;
   display: flex;
   flex-direction: row;
@@ -88,7 +92,9 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole
     color: inherit;
     stroke: currentColor;
     text-decoration: none;
-    transition: transform var(${UI.ANIMATION_DURATION}) ease-in-out, stroke var(${UI.ANIMATION_DURATION}) ease-in-out,
+    transition:
+      transform var(${UI.ANIMATION_DURATION}) ease-in-out,
+      stroke var(${UI.ANIMATION_DURATION}) ease-in-out,
       color var(${UI.ANIMATION_DURATION}) ease-in-out;
   }
 
@@ -136,7 +142,9 @@ export function NetworkAlert() {
 
   const theme = useTheme()
 
-  if (!shouldShowAlert(chainId) || !isActive) {
+  const { hideBridgeInfo } = useInjectedWidgetParams()
+
+  if (!shouldShowAlert(chainId) || !isActive || hideBridgeInfo) {
     return null
   }
 

apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts

@@ -39,6 +39,7 @@ export function useWidgetParams(configuratorState: ConfiguratorState): CowSwapWi
       standaloneMode,
       disableToastMessages,
       disableProgressBar,
+      hideBridgeInfo,
     } = configuratorState
 
     const themeColors = {
@@ -84,6 +85,7 @@ export function useWidgetParams(configuratorState: ConfiguratorState): CowSwapWi
               recipient: partnerFeeRecipient,
             }
           : undefined,
+      hideBridgeInfo,
     }
 
     return params

apps/widget-configurator/src/app/configurator/index.tsx

@@ -128,9 +128,10 @@ export function Configurator({ title }: { title: string }) {
   const firstToast = toasts?.[0]
 
   const [disableProgressBar, setDisableProgressBar] = useState<boolean>(false)
-  const toggleDisableProgressBar = useCallback(() => {
-    setDisableProgressBar((curr) => !curr)
-  }, [])
+  const toggleDisableProgressBar = useCallback(() => setDisableProgressBar((curr) => !curr), [])
+
+  const [hideBridgeInfo, setHideBridgeInfo] = useState<boolean | undefined>(false)
+  const toggleHideBridgeInfo = useCallback(() => setHideBridgeInfo((curr) => !curr), [])
 
   const LINKS = [
     { icon: <CodeIcon />, label: 'View embed code', onClick: () => handleDialogOpen() },
@@ -161,6 +162,7 @@ export function Configurator({ title }: { title: string }) {
     standaloneMode,
     disableToastMessages,
     disableProgressBar,
+    hideBridgeInfo,
   }
 
   const computedParams = useWidgetParams(state)
@@ -283,6 +285,7 @@ export function Configurator({ title }: { title: string }) {
             <FormControlLabel value="true" control={<Radio />} label="Dapp mode" />
           </RadioGroup>
         </FormControl>
+
         <FormControl component="fieldset">
           <FormLabel component="legend">Progress bar:</FormLabel>
           <RadioGroup row aria-label="mode" name="mode" value={disableProgressBar} onChange={toggleDisableProgressBar}>
@@ -291,6 +294,14 @@ export function Configurator({ title }: { title: string }) {
           </RadioGroup>
         </FormControl>
 
+        <FormControl component="fieldset">
+          <FormLabel component="legend">Hide bridge info:</FormLabel>
+          <RadioGroup row aria-label="mode" name="mode" value={hideBridgeInfo} onChange={toggleHideBridgeInfo}>
+            <FormControlLabel value="false" control={<Radio />} label="Show bridge info" />
+            <FormControlLabel value="true" control={<Radio />} label="Hide bridge info" />
+          </RadioGroup>
+        </FormControl>
+
         {isDrawerOpen && (
           <Fab
             size="small"

apps/widget-configurator/src/app/configurator/types.ts

@@ -29,4 +29,5 @@ export interface ConfiguratorState {
   standaloneMode: boolean
   disableToastMessages: boolean
   disableProgressBar: boolean
+  hideBridgeInfo: boolean | undefined
 }

libs/widget-lib/src/types.ts

@@ -274,6 +274,11 @@ export interface CowSwapWidgetParams {
    */
   hideNetworkSelector?: boolean
 
+  /**
+   * Option to hide bridge info
+   */
+  hideBridgeInfo?: boolean
+
   /**
    * Defines the widget mode.
    *  - `true` (standalone mode): The widget is standalone, so it will use its own Ethereum provider. The user can connect from within the widget.