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/question.ts

@@ -0,0 +1,10 @@
+export function questionIcon(darkMode: boolean): string {
+  return `<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 0H6a6 6 0 0 0-6 6v2a6 6 0 0 0 6 6h2a6 6 0 0 0 6-6V6a6 6 0 0 0-6-6Z" fill="${
+      darkMode ? '#C9DAED' : '#FFFFFF'
+    }"/>
+    <path fill="${
+      darkMode ? '#1E385E' : '#000000'
+    }" fill-rule="evenodd" clip-rule="evenodd" d="M10.258 5.734c-.2 1.8-1.5 2.4-2.8 3-1.3.4-1.9-1.5-.6-1.8.4-.2 1.5-.8 1.4-1.2 0-.9-1-1.4-1.7-1-.29.145-.423.396-.55.638-.048.09-.095.18-.15.262-.4.6-1.4.4-1.6-.2-.4-1 .5-1.9 1.3-2.4 1.9-1.3 4.7.3 4.7 2.7Zm-3.1 3.9c-1.3 0-1.3 2 0 2 1.3-.1 1.3-2 0-2Z" />
+  </svg>`
+}

src/custom/components/Page/index.tsx

@@ -3,6 +3,29 @@ import { PropsWithChildren } from 'react'
 import styled, { css } from 'styled-components/macro'
 import AppBody from 'pages/AppBody'
 import { WithClassName } from 'types'
+import { useIsDarkMode } from 'state/user/hooks'
+import SVG from 'react-inlinesvg'
+import { questionIcon } from 'assets/cow-swap/question'
+
+const HelpCircleWrapper = styled.div`
+  > svg {
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`
+
+export function HelpCircle({ size }: { size: number }) {
+  const darkMode = useIsDarkMode()
+  return (
+    <HelpCircleWrapper>
+      <SVG width={size ? size : 14} height={size ? size : 14} src={questionIcon(darkMode)} />
+    </HelpCircleWrapper>
+  )
+}
 
 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;

src/custom/pages/Profile/index.tsx

@@ -12,30 +12,40 @@ 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'
 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: (
+      <div>
+        Unvested {unvested} vCOW Vested {vested} vCOW
+      </div>
+    ),
+    vested: (
+      <div>
+        <p>
+          <strong>Vested vCOW</strong> is the portion of your vCOW token balance, which is fully available to convert to
+          COW token.
+        </p>
+        <p>
+          This includes any vCOW received through an <strong>airdrop.</strong>
+        </p>
+        <p>When converting your vested vCOW balance to COW, your entire vested balance will be converted.</p>
+      </div>
+    ),
   }
 
   const renderNotificationMessages = (
@@ -76,18 +110,70 @@ export default function Profile() {
   return (
     <Container>
       {chainId && chainId === ChainId.MAINNET && <AffiliateStatusCheck />}
-      <ProfileWrapper>
-        <ProfileGridWrap horizontal>
-          <CardHead>
-            <Title>Profile</Title>
-          </CardHead>
-          {IS_CLAIMING_ENABLED && vCowBalance && <VCOWDropdown balance={vCowBalance} />}
-        </ProfileGridWrap>
-      </ProfileWrapper>
+      <Title>Profile</Title>
+
+      <CardsWrapper>
+        {vCowBalance && (
+          <Card>
+            <BalanceDisplay hAlign="left">
+              <img src={vCOWImage} alt="vCOW token" width="56" height="56" />
+              <span>
+                <i>Total vCOW balance</i>
+                <b>
+                  {vCowBalance} vCOW{' '}
+                  <MouseoverTooltipContent content={tooltipText.balanceBreakdown}>
+                    <HelpCircle size={14} />
+                  </MouseoverTooltipContent>
+                </b>
+              </span>
+            </BalanceDisplay>
+            <ConvertWrapper>
+              <BalanceDisplay titleSize={18} altColor={true}>
+                <i>
+                  Vested{' '}
+                  <MouseoverTooltipContent content={tooltipText.vested}>
+                    <HelpCircle size={14} />
+                  </MouseoverTooltipContent>
+                </i>
+                <b>{vested}</b>
+              </BalanceDisplay>
+              <ButtonPrimary>
+                Convert to COW <SVG src={ArrowIcon} />
+              </ButtonPrimary>
+            </ConvertWrapper>
+          </Card>
+        )}
+
+        {cowBalance && (
+          <Card>
+            <BalanceDisplay titleSize={26}>
+              <img src={CowImage} alt="Cow Balance" height="80" width="80" />
+              <span>
+                <i>Available COW balance</i>
+                <b>{cowBalance} COW</b>
+              </span>
+            </BalanceDisplay>
+          </Card>
+        )}
+
+        <BannerCard>
+          <span>
+            <b>CoW DAO Governance</b>
+            <small>Use your (v)COW balance to vote on important proposals or participate in forum discussions.</small>
+            <span>
+              {' '}
+              <ExtLink href={'https://snapshot.org/#/cow.eth'}>View proposals ↗</ExtLink>
+              <ExtLink href={'https://forum.cow.fi/'}>CoW Forum ↗</ExtLink>
+            </span>
+          </span>
+          <SVG src={CowProtocolImage} description="CoWDAO Governance" />
+        </BannerCard>
+      </CardsWrapper>
+
       <Wrapper>
         <GridWrap>
           <CardHead>
-            <Title>Affiliate Program</Title>
+            <SectionTitle>Affiliate Program</SectionTitle>
             {account && (
               <Loader isLoading={isLoading}>
                 <StyledContainer>