From baf229374a68c207f1efbb1fb0279bc8a630405a Mon Sep 17 00:00:00 2001 From: fairlight <31534717+fairlighteth@users.noreply.github.com> Date: Tue, 22 Mar 2022 14:22:23 +0000 Subject: [PATCH] Profile page: Add vCOW swap feature cards (#2564) * Style vCOW swap cards. * Style vCOW swap cards. (#2565) * Add governance card banner. (#2566) * Add governance card banner. * Governance banner update styles. * Make question icon use dynamic dark/light mode colors. * Center content properly cross devices. * Dummy values. * Disable unused vars * Cleanup obsolete color --- src/custom/assets/cow-swap/arrow.svg | 3 + src/custom/assets/cow-swap/cow_v2.svg | 19 ++ src/custom/assets/cow-swap/question.ts | 10 + src/custom/assets/cow-swap/vCOW.png | Bin 0 -> 25112 bytes src/custom/components/Page/index.tsx | 29 +++ src/custom/pages/Profile/index.tsx | 142 +++++++++++--- src/custom/pages/Profile/styled.tsx | 256 +++++++++++++++++++++++-- 7 files changed, 417 insertions(+), 42 deletions(-) create mode 100644 src/custom/assets/cow-swap/arrow.svg create mode 100644 src/custom/assets/cow-swap/cow_v2.svg create mode 100644 src/custom/assets/cow-swap/question.ts create mode 100644 src/custom/assets/cow-swap/vCOW.png diff --git a/src/custom/assets/cow-swap/arrow.svg b/src/custom/assets/cow-swap/arrow.svg new file mode 100644 index 0000000000..511d2a92a9 --- /dev/null +++ b/src/custom/assets/cow-swap/arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/cow_v2.svg b/src/custom/assets/cow-swap/cow_v2.svg new file mode 100644 index 0000000000..2fd9cdbc69 --- /dev/null +++ b/src/custom/assets/cow-swap/cow_v2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/question.ts b/src/custom/assets/cow-swap/question.ts new file mode 100644 index 0000000000..83e560e424 --- /dev/null +++ b/src/custom/assets/cow-swap/question.ts @@ -0,0 +1,10 @@ +export function questionIcon(darkMode: boolean): string { + return ` + + + ` +} diff --git a/src/custom/assets/cow-swap/vCOW.png b/src/custom/assets/cow-swap/vCOW.png new file mode 100644 index 0000000000000000000000000000000000000000..4feb81be05f550631f50acff90ea6eb735910aff GIT binary patch literal 25112 zcmWJsX&_W>6n^iWeQaaj&DfQF$x@bUDT+{JDKQGE6iQK+xnnPtX{Ay|NwlElixyl< zp;XgKDaKNWGM4OSzJ8te&-?y4=Q;0ro^#GIUvGB_stOeVAhF)VZ8HGyzatFDxPPX( zOsDOiG4u8EU+W&{^)csg`@7MvPoL@=n5e01$;!x?TiOu`M4?dRw${7w%JUx?J1Wjr z1O-Rc=bijzS5x)xEMGTG5X%V^yFy8U!9t-{(j83iAnz2`!H|f#%k|XNhyC= zcZsKlQF)-;HTiowy>(F7dE(fD>rz;y`F_Hc2SNr19u%MI6BY3G6;iTP5;it&dm_v5_ z-K1Ssa|s=TBK>AEdSak9Ko{L~9<@|SkzN#SY-z5WKnE6Bkz1(T*05GLH%q0ljs84%#)ltwl_G-j^`5n6(2Im j3_xK%hBaZ@UVv6zIcA~3&+ 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 svg { + opacity: 0.5; + transition: opacity 0.2s ease-in-out; + + &:hover { + opacity: 1; + } + } +` + +export function HelpCircle({ size }: { size: number }) { + const darkMode = useIsDarkMode() + return ( + + + + ) +} export const PageWrapper = styled(AppBody)` padding: 0 24px 24px; @@ -14,11 +37,17 @@ export const Title = styled.h1` font-size: 32px; margin: 24px 0 16px; color: ${({ theme }) => theme.text1}; + ${({ theme }) => theme.mediaWidth.upToVerySmall` font-size: 24px; `} ` +export const SectionTitle = styled(Title)` + font-size: 21px; + margin: 12px 0 16px; +` + export const Content = styled.div` font-size: 15px; margin: 0 0 28px; diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx index 56d5205a27..e26c0dcabc 100644 --- a/src/custom/pages/Profile/index.tsx +++ b/src/custom/pages/Profile/index.tsx @@ -12,16 +12,22 @@ import { ChildWrapper, Loader, ExtLink, - ProfileWrapper, - ProfileGridWrap, + CardsWrapper, + Card, + BannerCard, + BalanceDisplay, + ConvertWrapper, } from 'pages/Profile/styled' import { useActiveWeb3React } from 'hooks/web3' import Copy from 'components/Copy/CopyMod' -import { HelpCircle, RefreshCcw } from 'react-feather' +import { RefreshCcw } from 'react-feather' import Web3Status from 'components/Web3Status' import useReferralLink from 'hooks/useReferralLink' import useFetchProfile from 'hooks/useFetchProfile' -import { formatSmartLocaleAware, numberFormatter } from 'utils/format' +import { + // formatSmartLocaleAware, + numberFormatter, +} from 'utils/format' import { getExplorerAddressLink } from 'utils/explorer' import useTimeAgo from 'hooks/useTimeAgo' import { MouseoverTooltipContent } from 'components/Tooltip' @@ -29,13 +35,17 @@ import NotificationBanner from 'components/NotificationBanner' import { SupportedChainId as ChainId } from 'constants/chains' import AffiliateStatusCheck from 'components/AffiliateStatusCheck' import { useHasOrders } from 'api/gnosisProtocol/hooks' -import { Title } from 'components/Page' -import { useTokenBalance } from 'state/wallet/hooks' -import { useVCowData } from 'state/claim/hooks' -import { V_COW, COW } from 'constants/tokens' -import VCOWDropdown from './VCOWDropdown' -import { isPr, isLocal } from 'utils/environments' -import { IS_CLAIMING_ENABLED } from 'pages/Claim/const' +import { Title, SectionTitle, HelpCircle } from 'components/Page' +import { ButtonPrimary } from 'custom/components/Button' +import vCOWImage from 'assets/cow-swap/vCOW.png' +import SVG from 'react-inlinesvg' +import ArrowIcon from 'assets/cow-swap/arrow.svg' +import CowImage from 'assets/cow-swap/cow_v2.svg' +import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg' +// import { useTokenBalance } from 'state/wallet/hooks' +// import { useVCowData } from 'state/claim/hooks' +// import { V_COW, COW } from 'constants/tokens' +// import { isPr, isLocal } from 'utils/environments' export default function Profile() { const referralLink = useReferralLink() @@ -45,17 +55,41 @@ export default function Profile() { const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades const hasOrders = useHasOrders(account) - const vCowBalance = useTokenBalance(account || undefined, chainId ? V_COW[chainId] : undefined) - const cowBalance = useTokenBalance(account || undefined, chainId ? COW[chainId] : undefined) + // const vCowBalance = useTokenBalance(account || undefined, chainId ? V_COW[chainId] : undefined) + const vCowBalance = '10,240,800.32' + // const cowBalance = useTokenBalance(account || undefined, chainId ? COW[chainId] : undefined) + const cowBalance = '0' - const { vested, total, unvested } = useVCowData() + // const { vested, total, unvested } = useVCowData() + const unvested = '9,240,800.32' + const vested = '1,240,800.32' // TODO: remove once this is not needed anymore - if (isPr || isLocal) { - console.force.log('vested', formatSmartLocaleAware(vested, vested?.currency.decimals)) - console.force.log('total', formatSmartLocaleAware(total, total?.currency.decimals)) - console.force.log('unvested', formatSmartLocaleAware(unvested, unvested?.currency.decimals)) - console.force.log('cowBalance', formatSmartLocaleAware(cowBalance, cowBalance?.currency.decimals)) + // if (isPr || isLocal) { + // console.force.log('vested', formatSmartLocaleAware(vested, vested?.currency.decimals)) + // console.force.log('total', formatSmartLocaleAware(total, total?.currency.decimals)) + // console.force.log('unvested', formatSmartLocaleAware(unvested, unvested?.currency.decimals)) + // console.force.log('cowBalance', formatSmartLocaleAware(cowBalance, cowBalance?.currency.decimals)) + // } + + const tooltipText = { + balanceBreakdown: ( +
+ Unvested {unvested} vCOW Vested {vested} vCOW +
+ ), + vested: ( +
+

+ Vested vCOW is the portion of your vCOW token balance, which is fully available to convert to + COW token. +

+

+ This includes any vCOW received through an airdrop. +

+

When converting your vested vCOW balance to COW, your entire vested balance will be converted.

+
+ ), } const renderNotificationMessages = ( @@ -76,18 +110,70 @@ export default function Profile() { return ( {chainId && chainId === ChainId.MAINNET && } - - - - Profile - - {IS_CLAIMING_ENABLED && vCowBalance && } - - + Profile + + + {vCowBalance && ( + + + vCOW token + + Total vCOW balance + + {vCowBalance} vCOW{' '} + + + + + + + + + + Vested{' '} + + + + + {vested} + + + Convert to COW + + + + )} + + {cowBalance && ( + + + Cow Balance + + Available COW balance + {cowBalance} COW + + + + )} + + + + CoW DAO Governance + Use your (v)COW balance to vote on important proposals or participate in forum discussions. + + {' '} + View proposals ↗ + CoW Forum ↗ + + + + + + - Affiliate Program + Affiliate Program {account && ( diff --git a/src/custom/pages/Profile/styled.tsx b/src/custom/pages/Profile/styled.tsx index b5ca6911be..984895b4a3 100644 --- a/src/custom/pages/Profile/styled.tsx +++ b/src/custom/pages/Profile/styled.tsx @@ -1,5 +1,7 @@ import styled, { css } from 'styled-components/macro' import Page, { GdocsListStyle } from 'components/Page' +import { ButtonPrimary } from 'custom/components/Button' +import { BannerExplainer } from 'pages/Claim/styled' import * as CSS from 'csstype' import { transparentize } from 'polished' import { ExternalLink } from 'theme' @@ -8,6 +10,7 @@ export const Container = styled.div` max-width: 910px; width: 100%; ` + export const Wrapper = styled(Page)` ${GdocsListStyle} @@ -19,14 +22,17 @@ export const Wrapper = styled(Page)` justify-content: flex-end; flex-direction: column; margin: 0; - background: ${({ theme }) => transparentize(0.5, theme.bg1)}; + background: ${({ theme }) => transparentize(0.3, theme.bg1)}; box-shadow: none; border: 1px solid ${({ theme }) => theme.cardBorder}; + ${({ theme }) => theme.mediaWidth.upToSmall` padding: 16px; `} + span[role='img'] { font-size: 55px; + ${({ theme }) => theme.mediaWidth.upToSmall` font-size: 30px; `} @@ -96,6 +102,7 @@ export const ItemTitle = styled.h3` font-size: 18px; line-height: 1.21; color: ${({ theme }) => theme.text1}; + ${({ theme }) => theme.mediaWidth.upToSmall` margin: 0 0 10px 0; font-size: 16px; @@ -126,11 +133,12 @@ export const FlexWrap = styled.div` ` export const StyledContainer = styled.div` - display: flex; - flex:1; - align-items:center; - justify-content: space-between; + display: flex; + flex:1; + align-items:center; + justify-content: space-between; } + ${({ theme }) => theme.mediaWidth.upToSmall` flex-wrap: wrap; flex-direction: column; @@ -196,15 +204,6 @@ export const Loader = styled.div<{ isLoading: boolean }>` `} ` -export const ProfileWrapper = styled(Wrapper)` - margin: 16px 0 16px 0; - padding: 16px 24px; - z-index: 2; - ${({ theme }) => theme.mediaWidth.upToVerySmall` - padding: 0 16px 16px; - `}; -` - export const ProfileGridWrap = styled(GridWrap)` grid-template-columns: 1fr auto; justify-content: space-between; @@ -225,3 +224,232 @@ export const ProfileGridWrap = styled(GridWrap)` grid-row-gap: 0px; `}; ` + +export const CardsWrapper = styled.div` + display: flex; + flex-flow: row wrap; + gap: 16px; + margin: 16px 0 16px 0; + padding: 0; + z-index: 2; + + > div:nth-of-type(3n) { + flex: 1 1 100%; + } + + ${({ theme }) => theme.mediaWidth.upToSmall` + display: flex; + flex-flow: column wrap; + `}; +` + +export const Card = styled.div` + display: flex; + flex-flow: row wrap; + flex: 1; + min-height: 192px; + margin: 0; + background: ${({ theme }) => transparentize(0.3, theme.bg1)}; + box-shadow: none; + padding: 24px; + gap: 24px 0; + border-radius: 16px; + border: 1px solid ${({ theme }) => theme.cardBorder}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + min-height: 130px; + padding: 24px 16px; + `}; + + ${ButtonPrimary} { + height: 52px; + + > svg { + height: 100%; + width: auto; + object-fit: contain; + margin: 0 0 0 6px; + transform: translateX(0); + transition: transform 0.2s ease-in-out; + } + + &:hover > svg { + transform: translateX(2px); + } + } +` + +export const BannerCard = styled(BannerExplainer)` + min-height: 192px; + border-radius: 16px; + border: 0; + padding: 0 100px 0 24px; + flex: 1; + overflow: hidden; + + ${({ theme }) => theme.mediaWidth.upToSmall` + text-align: center; + padding: 24px 16px; + `} + + &:hover { + border: 0; + } + + > span { + align-items: flex-start; + justify-content: space-between; + height: 100%; + padding: 24px 0; + + ${({ theme }) => theme.mediaWidth.upToSmall` + padding: 0; + `} + + > b { + font-size: 24px; + + ${({ theme }) => theme.mediaWidth.upToSmall` + text-align: center; + margin: 0 auto; + `}; + } + + > small { + font-size: 14px; + line-height: 1.5; + text-align: left; + padding: 0; + margin: 8px 0 auto; + + ${({ theme }) => theme.mediaWidth.upToSmall` + text-align: center; + margin: 16px auto; + `} + } + + > span { + display: flex; + margin: 8px 0 0; + gap: 0 16px; + width: 100%; + + ${({ theme }) => theme.mediaWidth.upToSmall` + flex-flow: column wrap; + gap: 16px 0; + justify-content: center; + margin: 24px 0 12px; + `} + } + + > span > a, + > span > a:link { + font-size: 15px; + color: ${({ theme }) => theme.white}; + + &:hover { + color: ${({ theme }) => theme.primary1}; + } + } + } + + > svg { + left: initial; + right: -190px; + transform: scale(-1, 1); // flip mirror + opacity: 0.25; + mix-blend-mode: initial; + } +` + +export const BalanceDisplay = styled.div<{ titleSize?: number; altColor?: boolean; hAlign?: string }>` + display: flex; + flex-flow: row wrap; + align-items: center; + align-content: center; + justify-content: ${({ hAlign }) => (hAlign === 'left' ? 'flex-start' : 'center')}; + gap: 3px 12px; + width: 100%; + font-size: 14px; + color: ${({ theme }) => transparentize(0.3, theme.text1)}; + + ${({ theme }) => theme.mediaWidth.upToMedium` + gap: 12px; + flex-flow: column wrap; + `}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + justify-content: center; + `}; + + > img { + ${({ theme }) => theme.mediaWidth.upToSmall` + height: 56px; + width: 56px; + object-fit: contain; + `}; + } + + > span { + display: flex; + flex-flow: column wrap; + gap: 3px 0; + } + + i { + display: flex; + align-items: center; + gap: 0 3px; + width: 100%; + font-style: normal; + + ${({ theme }) => theme.mediaWidth.upToMedium` + justify-content: center; + `}; + } + + b { + width: 100%; + display: flex; + align-items: center; + gap: 0 6px; + color: ${({ theme, altColor }) => (altColor ? theme.primary1 : theme.text1)}; + font-size: ${({ titleSize }) => (titleSize ? `${titleSize}px` : '21px')}; + + ${({ theme }) => theme.mediaWidth.upToMedium` + justify-content: center; + `}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + font-size: 18px; + `}; + + > div { + cursor: pointer; + } + + // Todo: Prevent requiring overriding tooltip padding with important! + > div > div { + padding: 0 !important; + } + } +` + +export const ConvertWrapper = styled.div` + display: grid; + grid-template-columns: 1fr 200px; + align-items: center; + ${({ theme }) => theme.neumorphism.boxShadow}; + background: ${({ theme }) => theme.bg7}; + border-radius: 16px; + padding: 16px; + width: 100%; + + ${({ theme }) => theme.mediaWidth.upToMedium` + display: flex; + flex-flow: column wrap; + gap: 16px 0; + + > div { gap: 6px 12px; } + `}; +`