Success page (#2273)

* Fake being in the success page * Fix type issue. * Style successful claim page. (#2300) * Style successful claim page. * Add missing prop * Disable SVG stroke. * isSelfClaim logic * use ExternalLink * Update src/custom/pages/Claim/ClaimingStatus.tsx * Update src/custom/pages/Claim/ClaimingStatus.tsx Co-authored-by: Leandro Boscariol <[email protected]> * Reorder banner and fix underline. Co-authored-by: Anxo Rodriguez <[email protected]> Co-authored-by: Leandro Boscariol <[email protected]> * Revert "Fake being in the success page" This reverts commit f826b32. Co-authored-by: biocom <[email protected]> Co-authored-by: Michel <[email protected]> Co-authored-by: Leandro Boscariol <[email protected]>
gnosis · Jan 26, 2022 · 7b153b0 · 7b153b0
1 parent 7b33989
commit 7b153b0
Show file tree

Hide file tree

Showing 2 changed files with 200 additions and 28 deletions.
diff --git a/src/custom/pages/Claim/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx
@@ -1,21 +1,36 @@
 import { CurrencyAmount } from '@uniswap/sdk-core'
 import { Trans } from '@lingui/macro'
-import { ConfirmOrLoadingWrapper, ConfirmedIcon, AttemptFooter, CowSpinner } from 'pages/Claim/styled'
+import {
+  ConfirmOrLoadingWrapper,
+  ConfirmedIcon,
+  AttemptFooter,
+  CowSpinner,
+  BannersWrapper,
+  SuccessBanner,
+} from 'pages/Claim/styled'
 import { ClaimStatus } from 'state/claim/actions'
 import { useClaimState } from 'state/claim/hooks'
 import { useActiveWeb3React } from 'hooks/web3'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { useAllClaimingTransactions } from 'state/enhancedTransactions/hooks'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { ExplorerLink } from 'components/ExplorerLink'
 import { EnhancedTransactionLink } from 'components/EnhancedTransactionLink'
 import { ExplorerDataType } from 'utils/getExplorerLink'
 import { V_COW } from 'constants/tokens'
 import AddToMetamask from 'components/AddToMetamask'
+import SVG from 'react-inlinesvg'
+import twitterImage from 'assets/cow-swap/twitter.svg'
+import discordImage from 'assets/cow-swap/discord.svg'
+import CowProtocolIcon from 'assets/cow-swap/cowprotocol.svg'
+import { ExternalLink } from 'theme'
 import { formatMax, formatSmartLocaleAware } from 'utils/format'
 import { AMOUNT_PRECISION } from 'constants/index'
 
+const COW_TWEET_TEMPLATE =
+  'I just joined the 🐮 COWmmunity @MEVprotection and claimed my first vCOW tokens! Join me at https://cowswap.exchange/'
+
 export default function ClaimingStatus() {
   const { chainId, account } = useActiveWeb3React()
   const { activeClaimAccount, claimStatus, claimedAmount } = useClaimState()
@@ -43,7 +58,7 @@ export default function ClaimingStatus() {
 
   return (
     <ConfirmOrLoadingWrapper activeBG={true}>
-      <ConfirmedIcon>
+      <ConfirmedIcon isConfirmed={isConfirmed}>
         {!isConfirmed ? (
           <CowSpinner>
             <CowProtocolLogo />
@@ -67,27 +82,63 @@ export default function ClaimingStatus() {
           <Trans>
             <p title={formattedMaxVCowAmount && `${formattedMaxVCowAmount} vCOW`}>{formattedVCowAmount} vCOW</p>
           </Trans>
-          <Trans>
-            <span role="img" aria-label="party-hat">
-              🎉🐮{' '}
-            </span>
-            <p>Welcome to the COWmunnity! :)</p>
-          </Trans>
-          {isSelfClaiming ? (
-            <Trans>
-              <p>
-                You can see your vCOW balance in the <Link to="/profile">Profile</Link>
-              </p>
+
+          <BannersWrapper>
+            <ExternalLink href={`https://twitter.com/intent/tweet?text=${COW_TWEET_TEMPLATE}`}>
+              <SuccessBanner type={'Twitter'}>
+                <span>
+                  <Trans>Share on Twitter</Trans>
+                </span>
+                <SVG src={twitterImage} description="Twitter" />
+              </SuccessBanner>
+            </ExternalLink>
+            <ExternalLink href="https://chat.cowswap.exchange/">
+              <SuccessBanner type={'Discord'}>
+                <span>
+                  <Trans>Join Discord</Trans>
+                </span>
+                <SVG src={discordImage} description="Discord" />
+              </SuccessBanner>
+            </ExternalLink>
+            {/* 
+            {isSelfClaiming ? (
               <AddToMetamask currency={currency} />
-            </Trans>
-          ) : (
-            <Trans>
-              <p>
-                You have just claimed on behalf of{' '}
-                <ExplorerLink id={activeClaimAccount} type={ExplorerDataType.ADDRESS} />
-              </p>
-            </Trans>
-          )}
+            ) : (
+              <div>
+                <p>
+                  You have just claimed on behalf of{' '}
+                  <b>
+                    {activeClaimAccount} (
+                    <ExplorerLink id={activeClaimAccount} type={ExplorerDataType.ADDRESS} />)
+                  </b>
+                </p>
+              </div>
+            )} 
+            */}
+            {isSelfClaiming ? (
+              <>
+                <Link to="/profile">
+                  <SuccessBanner type={'Profile'}>
+                    <span>
+                      <Trans>View vCOW balance</Trans>
+                    </span>
+                    <SVG src={CowProtocolIcon} description="Profile" />
+                  </SuccessBanner>
+                </Link>
+                <AddToMetamask currency={currency} />
+              </>
+            ) : (
+              <div>
+                <p>
+                  You have just claimed on behalf of{' '}
+                  <b>
+                    {activeClaimAccount} (
+                    <ExplorerLink id={activeClaimAccount} type={ExplorerDataType.ADDRESS} />)
+                  </b>
+                </p>
+              </div>
+            )}
+          </BannersWrapper>
         </>
       )}
       {isAttempting && (

diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
@@ -582,7 +582,7 @@ export const ClaimTotal = styled.div`
 
 export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
   width: 100%;
-  padding: 24px;
+  padding: 24px 24px 0;
   color: ${({ theme }) => theme.text1};
   position: relative;
   display: flex;
@@ -591,13 +591,50 @@ export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
   font-size: 26px;
   font-weight: 300;
 
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 16px 8px 0;
+  `};
+
   h3 {
-    font-size: 26px;
-    font-weight: 600;
+    font-size: 42px;
+    font-weight: bold;
     line-height: 1.2;
     text-align: center;
     margin: 0 0 12px;
     color: ${({ theme }) => theme.text1};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      font-size: 26px;
+    `};
+  }
+
+  > h4 {
+    font-size: 18px;
+    line-height: 1.5;
+    font-weight: normal;
+    margin: 0 0 24px;
+    text-align: center;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      text-align: center;
+    `};
+  }
+
+  > h4 > div > p {
+    margin: 24px auto 0;
+  }
+
+  > h4 > div > p > b {
+    word-break: break-all;
+    display: block;
+  }
+
+  > h4 > button {
+    margin: 32px auto;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      margin: 20px auto;
+    `};
   }
 `
 
@@ -615,8 +652,8 @@ export const AttemptFooter = styled.div`
   }
 `
 
-export const ConfirmedIcon = styled.div`
-  padding: 60px 0;
+export const ConfirmedIcon = styled.div<{ isConfirmed: boolean }>`
+  padding: ${({ isConfirmed }) => (isConfirmed ? '12px 0' : '60px 0')};
 `
 
 export const CheckIcon = styled(CheckCircle)`
@@ -1405,6 +1442,90 @@ export const CowSpinner = styled.div`
   }
 `
 
+const SuccessBannerColors = {
+  opacity: 0.8,
+  darken: 0.1,
+  twitter: '#17a7ff',
+  discord: '#4e72ef',
+}
+
+export const BannersWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  margin: 12px 0 0;
+  flex-flow: column wrap;
+
+  > a,
+  > a:hover,
+  > a:focus {
+    text-decoration: none;
+  }
+`
+
+export const SuccessBanner = styled.div<{ type: string }>`
+  width: 100%;
+  height: 86px;
+  padding: 0 24px;
+  border-radius: 24px;
+  margin: 0 0 12px;
+  font-weight: bold;
+  font-size: 21px;
+  justify-content: space-between;
+  align-items: center;
+  transition: border 0.3s ease-in-out;
+  border: 2px solid transparent;
+  color: ${({ type, theme }) =>
+    type === 'Twitter' ? SuccessBannerColors.twitter : type === 'Discord' ? SuccessBannerColors.discord : theme.text1};
+  display: flex;
+  background: ${({ type, theme }) =>
+    type === 'Twitter'
+      ? transparentize(SuccessBannerColors.opacity, SuccessBannerColors.twitter)
+      : type === 'Discord'
+      ? transparentize(SuccessBannerColors.opacity, SuccessBannerColors.discord)
+      : theme.blueShade3};
+
+  &:hover {
+    border: 2px solid
+      ${({ type, theme }) =>
+        type === 'Twitter'
+          ? darken(SuccessBannerColors.darken, SuccessBannerColors.twitter)
+          : type === 'Discord'
+          ? darken(SuccessBannerColors.darken, SuccessBannerColors.discord)
+          : darken(SuccessBannerColors.darken, theme.blueShade3)};
+  }
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    font-size: 16px;
+  `};
+
+  > svg {
+    width: 42px;
+    height: 42px;
+    object-fit: contain;
+    stroke: none;
+    fill: ${({ type, theme }) =>
+      type === 'Twitter'
+        ? SuccessBannerColors.twitter
+        : type === 'Discord'
+        ? SuccessBannerColors.discord
+        : theme.primary1};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      width: 32px;
+      height: 32px;
+    `};
+
+    > path {
+      fill: ${({ type, theme }) =>
+        type === 'Twitter'
+          ? SuccessBannerColors.twitter
+          : type === 'Discord'
+          ? SuccessBannerColors.discord
+          : theme.text1};
+    }
+
+`
+
 export const StepExplainer = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;