feat: powered by footer

apps/cowswap-frontend/src/common/pure/PoweredFooter/index.tsx

@@ -0,0 +1,47 @@
+import { COW_PROTOCOL_LINK } from '@cowprotocol/common-const'
+import { ExternalLink } from '@cowprotocol/ui'
+
+import { Trans } from '@lingui/macro'
+import cowIcon from 'assets/logo/cow-icon.svg'
+import SVG from 'react-inlinesvg'
+import styled from 'styled-components/macro'
+
+import { UI } from 'common/constants/theme'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  font-size: var(${UI.FONT_SIZE_SMALLER});
+  padding: 4px 0;
+`
+
+const StyledExternalLink = styled(ExternalLink)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: var(${UI.COLOR_TEXT2});
+
+  > svg {
+    --size: 14px;
+    width: var(--size);
+    height: var(--size);
+  }
+
+  > svg > g > path {
+    fill: var(${UI.COLOR_TEXT2});
+  }
+`
+
+export function PoweredFooter() {
+  return (
+    <Wrapper>
+      <StyledExternalLink href={COW_PROTOCOL_LINK}>
+        <SVG src={cowIcon} title="CoW Protocol" />
+        <Trans>Powered by CoW Protocol</Trans>
+      </StyledExternalLink>
+    </Wrapper>
+  )
+}

apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx

@@ -491,8 +491,9 @@ export const ThemedGlobalStyle = createGlobalStyle`
   ${UniThemedGlobalStyle}
 
   html {
-    background-color: ${({ theme }) => theme.isInjectedWidgetMode ? 'transparent' : `var(${UI.COLOR_CONTAINER_BG_02})`};
-    ${({ theme }) => theme.isInjectedWidgetMode ? 'transparent' : theme.body.background};
+    background-color: ${({ theme }) =>
+      theme.isInjectedWidgetMode ? 'transparent' : `var(${UI.COLOR_CONTAINER_BG_02})`};
+    ${({ theme }) => (theme.isInjectedWidgetMode ? 'transparent' : theme.body.background)};
   }
 
   *, *:after, *:before { box-sizing:border-box; }
@@ -533,8 +534,7 @@ export const ThemedGlobalStyle = createGlobalStyle`
   body #wcm-modal.wcm-overlay {
     ${({ theme }) => theme.mediaWidth.upToSmall`
       align-items: flex-start;
-    `
-  }
+    `}
 
   a {
     text-decoration: none;

apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx

@@ -22,6 +22,7 @@ import { useThrottleFn } from 'common/hooks/useThrottleFn'
 import { CurrencyArrowSeparator } from 'common/pure/CurrencyArrowSeparator'
 import { CurrencyInputPanel, CurrencyInputPanelProps } from 'common/pure/CurrencyInputPanel'
 import { CurrencyInfo } from 'common/pure/CurrencyInputPanel/types'
+import { PoweredFooter } from 'common/pure/PoweredFooter'
 
 import * as styledEl from './styled'
 import { TradeWidgetModals } from './TradeWidgetModals'
@@ -201,6 +202,8 @@ export function TradeWidget(props: TradeWidgetProps) {
               {isWrapOrUnwrap ? <WrapFlowActionButton /> : bottomContent}
             </>
           )}
+
+          {isInjectedWidgetMode && <PoweredFooter />}
         </styledEl.ContainerBox>
       </styledEl.Container>
     </styledEl.Container>

apps/cowswap-frontend/src/utils/iframeResizer.ts

@@ -1,29 +1,27 @@
-import { useEffect } from 'react';
+import { useEffect } from 'react'
 
 export function IframeResizer() {
   useEffect(() => {
     // Initial height calculation and message
     const sendHeightUpdate = () => {
-        const contentHeight = document.body.scrollHeight;
-        window.parent.postMessage({ type: 'iframeHeight', height: contentHeight }, '*');
-    };
-    sendHeightUpdate();
+      const contentHeight = document.body.scrollHeight
+      window.parent.postMessage({ type: 'iframeHeight', height: contentHeight }, '*')
+    }
+    sendHeightUpdate()
 
     // Set up a MutationObserver to watch for changes in the DOM
     const observer = new MutationObserver(() => {
-        // For simplicity, we'll send an update for any mutation, but you can add more specific checks if needed
-        sendHeightUpdate();
-    });
+      sendHeightUpdate()
+    })
 
     // Start observing the entire body and its descendants for changes to the structure of the DOM
-    observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+    observer.observe(document.body, { attributes: true, childList: true, subtree: true })
 
     // Cleanup: Disconnect the observer when the component is unmounted
     return () => {
-      observer.disconnect();
-    };
+      observer.disconnect()
+    }
+  }, [])
 
-  }, []);
-
-  return null;
-}
+  return null
+}

libs/common-const/src/chainInfo.ts

@@ -1,4 +1,5 @@
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { COW_PROTOCOL_LINK } from './common'
 
 import GnosisChainLogo from '@cowprotocol/assets/cow-swap/network-gnosis-chain-logo.svg'
 import GoerliLogo from '@cowprotocol/assets/cow-swap/network-goerli-logo.svg'
@@ -40,7 +41,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     networkType: NetworkType.L1,
     docs: 'https://docs.cow.fi/',
     explorer: 'https://etherscan.io/',
-    infoLink: 'https://cow.fi/',
+    infoLink: COW_PROTOCOL_LINK,
     label: 'Ethereum',
     name: 'mainnet',
     explorerTitle: 'Etherscan',
@@ -51,7 +52,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     networkType: NetworkType.L1,
     docs: 'https://docs.cow.fi/',
     explorer: 'https://goerli.etherscan.io/',
-    infoLink: 'https://cow.fi/',
+    infoLink: COW_PROTOCOL_LINK,
     label: 'Görli',
     name: 'goerli',
     explorerTitle: 'Etherscan',

libs/common-const/src/common.ts

@@ -118,6 +118,7 @@ const GITHUB_REPOSITORY = 'cowprotocol/cowswap'
 export const CODE_LINK = 'https://github.com/' + GITHUB_REPOSITORY
 export const RAW_CODE_LINK = 'https://raw.githubusercontent.com/' + GITHUB_REPOSITORY
 
+export const COW_PROTOCOL_LINK = 'https://cow.fi/'
 export const DOCS_LINK = 'https://docs.cow.fi'
 export const CONTRACTS_CODE_LINK = 'https://github.com/cowprotocol/contracts'
 export const DISCORD_LINK = 'https://discord.com/invite/cowprotocol'