Affiliate program
- What is the Profile page?
+ What is the Account page?
- It is a page where you can see your number of trades and volume that you have done with the wallet you have
- connected with.
+ The
@@ -97,8 +99,8 @@ export default function AffiliateFaq() {
counted.
-
- I shared my referral with a friend, who then also traded. Why do I not see any referral trades in my profile
+
+ I shared my referral with a friend, who then also traded. Why do I not see any referral trades in my account
page?
@@ -139,10 +141,13 @@ export default function AffiliateFaq() {
- Why do I see more trades and referrals in my profile page than I actually see in the activity list?
+ Why do I see more trades and referrals in my account page than I actually see in the activity list?
- The number of trades on the profile page is calculated based on on-chain data.
+
+ The number of trades on the
We have two publicly facing interfaces where both use the same contracts, which are:
diff --git a/src/custom/pages/Faq/Menu.tsx b/src/custom/pages/Faq/Menu.tsx
index 121c88987d..3ecd22bde7 100644
--- a/src/custom/pages/Faq/Menu.tsx
+++ b/src/custom/pages/Faq/Menu.tsx
@@ -1,12 +1,13 @@
import { NavLink } from 'react-router-dom'
import { Menu } from './styled'
+import { Routes } from 'constants/routes'
const LINKS = [
- { title: 'General', url: '/faq' },
- { title: 'Protocol', url: '/faq/protocol' },
- { title: 'Token', url: '/faq/token' },
- { title: 'Trading', url: '/faq/trading' },
- { title: 'Affiliate', url: '/faq/affiliate' },
+ { title: 'General', url: Routes.FAQ },
+ { title: 'Protocol', url: Routes.FAQ_PROTOCOL },
+ { title: 'Token', url: Routes.FAQ_TOKEN },
+ { title: 'Trading', url: Routes.FAQ_TRADING },
+ { title: 'Affiliate', url: Routes.FAQ_AFFILIATE },
]
export function FaqMenu() {
diff --git a/src/custom/pages/Faq/TokenFaq.tsx b/src/custom/pages/Faq/TokenFaq.tsx
index f680e19cac..69e8c86667 100644
--- a/src/custom/pages/Faq/TokenFaq.tsx
+++ b/src/custom/pages/Faq/TokenFaq.tsx
@@ -1,10 +1,12 @@
import Page, { Content } from 'components/Page'
import { ExternalLinkFaq, Wrapper } from './styled'
+import { Link } from 'react-router-dom'
import { Footer } from '.'
import { useToC } from './hooks'
import ToC from './ToC'
import { FaqMenu } from './Menu'
+import { Routes } from 'constants/routes'
export default function TokenFaq() {
const { toc, faqRef } = useToC()
@@ -51,9 +53,10 @@ export default function TokenFaq() {
{' '}
- Directly in the CowSwap UI. Simply click on the profile section at the top left of the page, or in the menu
- if you are on mobile, and you will be redirected to a page where you can see your total combined balance for
- COW and vCOW and convert them instantly.
+ Directly in the CowSwap UI. Simply click on the
What is the purpose of COW Token?
diff --git a/src/custom/pages/Faq/index.tsx b/src/custom/pages/Faq/index.tsx
index 08bdb5032b..f8b26b9297 100644
--- a/src/custom/pages/Faq/index.tsx
+++ b/src/custom/pages/Faq/index.tsx
@@ -10,6 +10,7 @@ import {
FLASHBOTS_LINK,
} from 'constants/index'
import Page, { Content } from 'components/Page'
+import { Routes } from 'constants/routes'
import { ExternalLinkFaq, Wrapper, ButtonNav, FooterWrapper } from './styled'
import { FaqMenu } from './Menu'
import { StyledInternalLink } from 'theme'
@@ -37,7 +38,7 @@ export function Footer() {
{' '}
🥛
@@ -179,7 +180,7 @@ export default function Faq() {
protocols or dapps, your use is at your own risk.{' '}
Please review our{' '}
-
+
Terms and Conditions
.
diff --git a/src/custom/pages/Swap/SwapMod.tsx b/src/custom/pages/Swap/SwapMod.tsx
index 8fa53d33e0..80206e6fd2 100644
--- a/src/custom/pages/Swap/SwapMod.tsx
+++ b/src/custom/pages/Swap/SwapMod.tsx
@@ -19,7 +19,7 @@ import ReactGA from 'react-ga'
// import { RouteComponentProps } from 'react-router-dom'
import { Text } from 'rebass'
// import { TradeState } from 'state/routing/types'
-import styled, { ThemeContext } from 'styled-components/macro'
+import { ThemeContext } from 'styled-components/macro'
import AddressInputPanel from 'components/AddressInputPanel'
import { ButtonConfirmed /*, ButtonError, ButtonLight, ButtonPrimary*/ } from 'components/Button'
@@ -84,11 +84,12 @@ import { useErrorMessage } from 'hooks/useErrorMessageAndModal'
import { GpEther } from 'constants/tokens'
import { SupportedChainId } from 'constants/chains'
import CowSubsidyModal from 'components/CowSubsidyModal'
+import { AlertWrapper } from './styleds' // mod
-const AlertWrapper = styled.div`
- max-width: 460px;
- width: 100%;
-`
+// const AlertWrapper = styled.div`
+// max-width: 460px;
+// width: 100%;
+// `
export default function Swap({
history,
location,
diff --git a/src/custom/pages/Swap/styleds.tsx b/src/custom/pages/Swap/styleds.tsx
index 427d78f998..54a0374f8e 100644
--- a/src/custom/pages/Swap/styleds.tsx
+++ b/src/custom/pages/Swap/styleds.tsx
@@ -17,4 +17,19 @@ export const StyledAppBody = styled(AppBody)`
border: ${({ theme }) => theme.appBody.border};
box-shadow: ${({ theme }) => theme.appBody.boxShadow};
background: ${({ theme }) => theme.bg1};
+
+ ${({ theme }) => theme.mediaWidth.upToSmall`
+ border: ${({ theme }) => theme.appBody.borderMobile};
+ box-shadow: ${({ theme }) => theme.appBody.boxShadowMobile};
+ `};
+`
+
+export const AlertWrapper = styled.div`
+ max-width: 460px;
+ width: 100%;
+
+ ${({ theme }) => theme.mediaWidth.upToSmall`
+ margin: 26px auto 0;
+ padding: 0 16px;
+ `}
`
diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx
index a1070f2347..76ef947da1 100644
--- a/src/custom/theme/baseTheme.tsx
+++ b/src/custom/theme/baseTheme.tsx
@@ -150,9 +150,11 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
}
`,
appBody: {
- boxShadow: `4px 4px 0px ${colorsTheme.black}`,
+ boxShadow: `4px 4px 0 ${colorsTheme.black}`,
+ boxShadowMobile: `0 4px 0 ${colorsTheme.black}`,
borderRadius: '16px',
border: `3px solid ${colorsTheme.black}`,
+ borderMobile: 'none',
padding: '12px 6px',
maxWidth: {
normal: '460px',
@@ -280,7 +282,7 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
},
wallet: {
color: darkMode ? colorsTheme.text1 : colorsTheme.text1,
- background: darkMode ? colorsTheme.bg3 : colorsTheme.bg2,
+ background: darkMode ? colorsTheme.bg3 : colorsTheme.bg1,
},
}
}
diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts
index 8ac88aab38..cf33e2fbd8 100644
--- a/src/custom/theme/styled.d.ts
+++ b/src/custom/theme/styled.d.ts
@@ -77,8 +77,10 @@ declare module 'styled-components' {
}
appBody: {
boxShadow: string
+ boxShadowMobile: string
borderRadius: string
border: string
+ borderMobile: string
padding: string
maxWidth: {
normal: string
diff --git a/src/custom/utils/toggleBodyClass.ts b/src/custom/utils/toggleBodyClass.ts
new file mode 100644
index 0000000000..1879f8c345
--- /dev/null
+++ b/src/custom/utils/toggleBodyClass.ts
@@ -0,0 +1,7 @@
+export const toggleBodyClass = (className: string, isAdd: boolean) => {
+ if (isAdd) {
+ document.body.classList.add(className)
+ } else {
+ document.body.classList.remove(className)
+ }
+}