From 22c9438ea0affe08b11ac5a8f97d1d500f379648 Mon Sep 17 00:00:00 2001
From: Alfetopito <alfetopito@users.noreply.github.com>
Date: Tue, 15 Oct 2024 18:10:04 +0100
Subject: [PATCH 1/2] feat: add option to hide brigde info to widget

---
 .../hooks/useWidgetParamsAndSettings.ts         |  2 ++
 .../src/app/configurator/index.tsx              | 17 ++++++++++++++---
 .../src/app/configurator/types.ts               |  1 +
 libs/widget-lib/src/types.ts                    |  5 +++++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
index 69143ec592..b00d73748b 100644
--- a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
+++ b/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
diff --git a/apps/widget-configurator/src/app/configurator/index.tsx b/apps/widget-configurator/src/app/configurator/index.tsx
index 1a6b9cf699..2bd0b12d5f 100644
--- a/apps/widget-configurator/src/app/configurator/index.tsx
+++ b/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"
diff --git a/apps/widget-configurator/src/app/configurator/types.ts b/apps/widget-configurator/src/app/configurator/types.ts
index 1475143274..2755dbb135 100644
--- a/apps/widget-configurator/src/app/configurator/types.ts
+++ b/apps/widget-configurator/src/app/configurator/types.ts
@@ -29,4 +29,5 @@ export interface ConfiguratorState {
   standaloneMode: boolean
   disableToastMessages: boolean
   disableProgressBar: boolean
+  hideBridgeInfo: boolean | undefined
 }
diff --git a/libs/widget-lib/src/types.ts b/libs/widget-lib/src/types.ts
index 718ac05d76..368ef01970 100644
--- a/libs/widget-lib/src/types.ts
+++ b/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.

From 782d7aaecd9cbb188d2ea1f63ef25baf1b109448 Mon Sep 17 00:00:00 2001
From: Alfetopito <alfetopito@users.noreply.github.com>
Date: Tue, 15 Oct 2024 18:11:01 +0100
Subject: [PATCH 2/2] feat: use hideBridgeInfo on Network alert

---
 .../components/NetworkAlert/NetworkAlert.tsx       | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx b/apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx
index 7fb20f05ed..03bd936cb5 100644
--- a/apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx
+++ b/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
   }