From 95cb964324c6b2049b38d61fa5c96715a4ea7b11 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Thu, 19 Oct 2023 14:46:16 +0100
Subject: [PATCH] feat: powered by footer
---
.../src/assets/logo/cow-icon.svg | 1 +
.../src/common/pure/PoweredFooter/index.tsx | 47 +++++++++++++++++++
.../src/legacy/theme/baseTheme.tsx | 8 ++--
.../trade/containers/TradeWidget/index.tsx | 3 ++
.../src/utils/iframeResizer.ts | 28 +++++------
libs/common-const/src/chainInfo.ts | 5 +-
libs/common-const/src/common.ts | 1 +
7 files changed, 72 insertions(+), 21 deletions(-)
create mode 100644 apps/cowswap-frontend/src/assets/logo/cow-icon.svg
create mode 100644 apps/cowswap-frontend/src/common/pure/PoweredFooter/index.tsx
diff --git a/apps/cowswap-frontend/src/assets/logo/cow-icon.svg b/apps/cowswap-frontend/src/assets/logo/cow-icon.svg
new file mode 100644
index 0000000000..7cebd117b8
--- /dev/null
+++ b/apps/cowswap-frontend/src/assets/logo/cow-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/cowswap-frontend/src/common/pure/PoweredFooter/index.tsx b/apps/cowswap-frontend/src/common/pure/PoweredFooter/index.tsx
new file mode 100644
index 0000000000..7f01d64adf
--- /dev/null
+++ b/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 (
+
+
+
+ Powered by CoW Protocol
+
+
+ )
+}
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index c4fe1f9219..56de92726a 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/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;
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
index 59bc94d6ae..f32e5f0b3f 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
+++ b/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 ? : bottomContent}
)}
+
+ {isInjectedWidgetMode && }
diff --git a/apps/cowswap-frontend/src/utils/iframeResizer.ts b/apps/cowswap-frontend/src/utils/iframeResizer.ts
index 571103f1be..94e2820b3e 100644
--- a/apps/cowswap-frontend/src/utils/iframeResizer.ts
+++ b/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;
-}
\ No newline at end of file
+ return null
+}
diff --git a/libs/common-const/src/chainInfo.ts b/libs/common-const/src/chainInfo.ts
index f43a04c165..bcebee3aa2 100644
--- a/libs/common-const/src/chainInfo.ts
+++ b/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',
diff --git a/libs/common-const/src/common.ts b/libs/common-const/src/common.ts
index c67443c490..ca44bd8eea 100644
--- a/libs/common-const/src/common.ts
+++ b/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'