Merge branch 'claim' into claim-investment-flow-2

gnosis · Jan 18, 2022 · fd056b1 · fd056b1
2 parents 9f448bf + 172fe43
commit fd056b1
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 129 deletions.
diff --git a/src/custom/pages/Claim/CanUserClaimMessage.tsx b/src/custom/pages/Claim/CanUserClaimMessage.tsx
@@ -3,7 +3,7 @@ import { ButtonSecondary } from 'components/Button'
 import { ExternalLink } from 'theme'
 import { IntroDescription } from './styled'
 import { ClaimCommonTypes } from './types'
-import { useClaimDispatchers, useClaimState } from 'state/claim/hooks'
+import { useClaimDispatchers, useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
 
 type ClaimIntroductionProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
@@ -14,6 +14,8 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly }: ClaimI
   const { activeClaimAccount, claimStatus } = useClaimState()
   const { setActiveClaimAccount } = useClaimDispatchers()
 
+  const { airdropDeadline } = useClaimTimeInfo()
+
   // only show when active claim account
   if (!activeClaimAccount || claimStatus !== ClaimStatus.DEFAULT) return null
 
@@ -24,7 +26,7 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly }: ClaimI
           <Trans>
             Thank you for being a supporter of CowSwap and the CoW protocol. As an important member of the CowSwap
             Community you may claim vCOW to be used for voting and governance. You can claim your tokens until{' '}
-            <i>XX-XX-XXXX - XX:XX GMT</i>
+            <i>{airdropDeadline && new Date(airdropDeadline).toLocaleString()}</i>
             <ExternalLink href="https://cow.fi/">Read more about vCOW</ExternalLink>
           </Trans>
         </p>

diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx
@@ -1,10 +1,4 @@
-import {
-  ClaimType,
-  useAirdropDeadline,
-  useClaimState,
-  useDeploymentTimestamp,
-  useInvestmentDeadline,
-} from 'state/claim/hooks'
+import { ClaimType, useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
 import styled from 'styled-components/macro'
 import { ClaimTable, ClaimBreakdown, TokenLogo } from 'pages/Claim/styled'
 import CowProtocolLogo from 'components/CowProtocolLogo'
@@ -130,15 +124,17 @@ export default function ClaimsTable({
   const hideTable =
     isAirdropOnly || !hasClaims || !activeClaimAccount || claimStatus !== ClaimStatus.DEFAULT || isInvestFlowActive
 
-  const start = useDeploymentTimestamp()
-  const investmentEnd = useInvestmentDeadline()
-  const airdropEnd = useAirdropDeadline()
+  const { deployment: start, investmentDeadline, airdropDeadline } = useClaimTimeInfo()
 
   if (hideTable) return null
 
   return (
     <ClaimBreakdown>
-      <h2>vCOW claim breakdown</h2>
+      <p>
+        The table overview below represents your current vCow claiming opportunities. To move forward with one or all of
+        the options, simply select the row(s) you would like to engage with and move forward via the &apos;Claim
+        vCOW&apos; button.
+      </p>
       <ClaimTable>
         <table>
           <thead>
@@ -162,7 +158,7 @@ export default function ClaimsTable({
                 selected={selected}
                 handleSelect={handleSelect}
                 start={start}
-                end={claim.isFree ? airdropEnd : investmentEnd}
+                end={claim.isFree ? airdropDeadline : investmentDeadline}
               />
             ))}
           </tbody>

diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -34,19 +34,6 @@ const RangeStep = styled.button`
   padding: 0;
 `
 
-const InvestBalance = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-
-const InvestMaxBalance = styled.button`
-  cursor: pointer;
-  color: ${({ theme }) => theme.primary1};
-  background: none;
-  border: none;
-`
-
 const INVESTMENT_STEPS = [0, 25, 50, 75, 100]
 
 export default function InvestOption({ approveData, claim, optionIndex }: InvestOptionProps) {
@@ -224,19 +211,22 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
         </InvestSummary>
         <InvestInput>
           <div>
-            <InvestBalance>
-              <div>
-                <b>Balance:</b>{' '}
-                <i>
-                  {formatSmart(balance)} {currencyAmount?.currency?.symbol}
-                </i>
-              </div>
+            <span>
+              <b>Balance:</b>
+              <i>
+                {formatSmart(balance) || 0} {currencyAmount?.currency?.symbol}
+              </i>
               {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
-              <InvestMaxBalance onClick={onMaxClick}>Invest max. possible</InvestMaxBalance>
-            </InvestBalance>
+              <button onClick={onMaxClick}>(invest max. possible)</button>
+            </span>
             <label>
+              <input
+                // disabled
+                placeholder="0"
+                value={investedAmount}
+                max={formatSmart(currencyAmount)}
+              />
               <b>{currencyAmount?.currency?.symbol}</b>
-              <input disabled placeholder="0" value={investedAmount} max={formatSmart(currencyAmount)} />
             </label>
             <i>Receive: {formatSmart(vCowAmount) || 0} vCOW</i>
             {/* Insufficient balance validation error */}

diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
@@ -2,13 +2,7 @@ import { useEffect, useMemo } from 'react'
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, MaxUint256 } from '@uniswap/sdk-core'
 import { useActiveWeb3React } from 'hooks/web3'
-import {
-  useUserEnhancedClaimData,
-  useUserUnclaimedAmount,
-  useClaimCallback,
-  useInvestmentStillAvailable,
-  useAirdropStillAvailable,
-} from 'state/claim/hooks'
+import { useUserEnhancedClaimData, useUserUnclaimedAmount, useClaimCallback } from 'state/claim/hooks'
 import { ButtonPrimary, ButtonSecondary } from 'components/Button'
 import { PageWrapper, FooterNavButtons } from 'pages/Claim/styled'
 import EligibleBanner from './EligibleBanner'
@@ -91,10 +85,6 @@ export default function Claim() {
   const hasClaims = useMemo(() => userClaimData.length > 0, [userClaimData])
   const isAirdropOnly = useMemo(() => !hasPaidClaim(userClaimData), [userClaimData])
 
-  // checks regarding investment time window
-  const isInvestmentStillAvailable = useInvestmentStillAvailable()
-  const isAirdropStillAvailable = useAirdropStillAvailable()
-
   // claim callback
   const { claimCallback } = useClaimCallback(activeClaimAccount)
 
@@ -169,9 +159,7 @@ export default function Claim() {
     `[unclaimedAmount ${unclaimedAmount?.toFixed(2)}]`,
     `[hasClaims ${hasClaims}]`,
     `[activeClaimAccount ${activeClaimAccount}]`,
-    `[isAirdropOnly ${isAirdropOnly}]`,
-    `[isInvestmentStillAvailable ${isInvestmentStillAvailable}]`,
-    `[isAirdropStillAvailable ${isAirdropStillAvailable}]`
+    `[isAirdropOnly ${isAirdropOnly}]`
   )
 
   // on account change

diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
@@ -169,7 +169,7 @@ export const PageWrapper = styled.div`
     display: block;
     line-height: 1.6;
     font-weight: 300;
-    margin: 24px auto;
+    margin: 0 0 24px;
     text-align: center;
   }
 
@@ -667,11 +667,11 @@ export const ClaimBreakdown = styled.div`
   width: 100%;
   flex-flow: column wrap;
 
-  > h2 {
-    font-size: 28px;
-    font-weight: 500;
-    text-align: center;
-  }
+  > p {
+    font-size: 16px;
+    line-height: 1.6;
+    font-weight: 300;
+    margin: 0 0 24px;
 `
 
 export const FooterNavButtons = styled.div`
@@ -830,6 +830,15 @@ export const InvestInput = styled.span`
   > div > label {
     display: flex;
     position: relative;
+    background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)};
+    border: ${({ theme }) =>
+      theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`};
+    border-radius: 12px;
+
+    &:hover {
+      border: ${({ theme }) =>
+        theme.currencyInput?.border ? theme.currencyInput?.border : `border: 1px solid ${theme.bg2}`};
+    }
   }
 
   > div > label > b {
@@ -841,22 +850,58 @@ export const InvestInput = styled.span`
     top: 0;
     bottom: 0;
     margin: auto;
-    opacity: 0.5;
+    font-weight: normal;
+    opacity: 0.7;
+    color: ${({ theme }) => theme.text1};
   }
 
   > div > label > input {
     color: ${({ theme }) => theme.text1};
-    border: 1px solid grey;
+    border: none;
     border-radius: 12px;
     padding: 12px 70px 12px 12px;
     font-size: 26px;
     outline: 0;
+    background: transparent;
     width: 100%;
+
+    &::placeholder {
+      opacity: 0.5;
+    }
   }
 
   > div > small {
     color: red;
     margin: 12px 0;
+    font-size: 15px;
+  }
+
+  > div > i {
+    font-style: normal;
+  }
+
+  > div > span {
+    display: flex;
+  }
+
+  > div > span > b {
+    margin: 0 3px 0 0;
+  }
+
+  > div > span > i {
+    font-style: normal;
+  }
+
+  > div > span > button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    color: ${({ theme }) => theme.primary4};
+    text-decoration: underline;
+
+    &:hover {
+      color: ${({ theme }) => theme.text1};
+    }
   }
 `
 

diff --git a/src/custom/pages/Claim/types.ts b/src/custom/pages/Claim/types.ts
@@ -12,9 +12,9 @@ export type ClaimCommonTypes = {
 
 // Enhanced UserClaimData with useful additional properties
 export type EnhancedUserClaimData = UserClaimData & {
+  claimAmount: CurrencyAmount<Token>
+  isFree: boolean
   currencyAmount?: CurrencyAmount<Token | GpEther> | undefined
-  claimAmount?: CurrencyAmount<Token> | undefined
   price?: Price<Currency, Currency> | undefined
   cost?: CurrencyAmount<Currency> | undefined
-  isFree: boolean
 }