Modding FailedNetworkSwitchPopup notification

src/custom/components/Popups/FailedNetworkSwitchPopupMod.tsx

@@ -0,0 +1,35 @@
+import { Trans } from '@lingui/macro'
+import { CHAIN_INFO } from 'constants/chainInfo'
+import { SupportedChainId } from 'constants/chains'
+import { useContext } from 'react'
+import { AlertCircle } from 'react-feather'
+import styled, { ThemeContext } from 'styled-components/macro'
+
+import { ThemedText } from 'theme'
+import { AutoColumn } from 'components/Column'
+import { AutoRow } from 'components/Row'
+
+const RowNoFlex = styled(AutoRow)`
+  flex-wrap: nowrap;
+`
+
+export default function FailedNetworkSwitchPopup({ chainId }: { chainId: SupportedChainId }) {
+  const chainInfo = CHAIN_INFO[chainId]
+  const theme = useContext(ThemeContext)
+
+  return (
+    <RowNoFlex>
+      <div style={{ paddingRight: 16 }}>
+        <AlertCircle color={theme.red1} size={24} />
+      </div>
+      <AutoColumn gap="8px">
+        <ThemedText.Body fontWeight={500}>
+          <Trans>
+            Failed to switch networks from the CowSwap Interface. In order to use CowSwap on {chainInfo.label}, you must
+            change the network in your wallet.
+          </Trans>
+        </ThemedText.Body>
+      </AutoColumn>
+    </RowNoFlex>
+  )
+}

src/custom/components/Popups/PopupItemMod.tsx

@@ -6,7 +6,7 @@ import styled, { ThemeContext } from 'styled-components/macro'
 
 import { useRemovePopup } from 'state/application/hooks'
 import { PopupContent } from 'state/application/reducer'
-import FailedNetworkSwitchPopup from 'components/Popups/FailedNetworkSwitchPopup'
+import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopupMod'
 import TransactionPopup from './TransactionPopupMod'
 
 // MOD imports