Improve input field claim (#2186)

* Wording change and CSS cleanup. * Style update + hide approve button for ETH. * Style updates + organise invest options * Style updates, input field. * Style updates, input field. * Rename max. * Further investment flow styling. * Further investment flow styling. * Further investment flow styling. * Further investment flow styling. * Add token symbol images. * Further styling of investment flow (#2192) * Further investment flow styling. * Further investment flow styling. * Further investment flow styling. * Further investment flow styling. * Update src/custom/pages/Claim/ClaimsTable.tsx Thank you Co-authored-by: Leandro Boscariol <[email protected]> * Fix code style issues with Prettier * Remove unused function. Co-authored-by: Anxo Rodriguez <[email protected]> Co-authored-by: Leandro Boscariol <[email protected]> Co-authored-by: Lint Action <[email protected]>
gnosis · Jan 19, 2022 · 2146760 · 2146760
1 parent 391f26c
commit 2146760
Show file tree

Hide file tree

Showing 9 changed files with 292 additions and 116 deletions.
diff --git a/src/custom/assets/cow-swap/check.svg b/src/custom/assets/cow-swap/check.svg
diff --git a/src/custom/assets/cow-swap/gno.png b/src/custom/assets/cow-swap/gno.png
diff --git a/src/custom/assets/cow-swap/usdc.png b/src/custom/assets/cow-swap/usdc.png
diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx
@@ -85,10 +85,12 @@ const ClaimsTableRow = ({
       </td>
       <td>{formatSmart(claimAmount) || 0} vCOW</td>
       <td>
-        <span>
-          Price:{' '}
-          <b>{isFree || !price ? '-' : `${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`}</b>
-        </span>
+        {!isFree ||
+          (price && (
+            <span>
+              Price: <b>{`${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`}</b>
+            </span>
+          ))}
         <span>
           Cost:{' '}
           <b>

diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -7,7 +7,7 @@ import { Currency, CurrencyAmount, Fraction } from '@uniswap/sdk-core'
 import { InvestTokenGroup, TokenLogo, InvestSummary, InvestInput, InvestAvailableBar } from '../styled'
 import { formatSmart } from 'utils/format'
 import Row from 'components/Row'
-import { CheckCircle } from 'react-feather'
+import CheckCircle from 'assets/cow-swap/check.svg'
 import { InvestOptionProps } from '.'
 import { ApprovalState } from 'hooks/useApproveCallback'
 import { useCurrencyBalance } from 'state/wallet/hooks'
@@ -153,15 +153,16 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
                   `${currencyAmount?.currency?.symbol} not approved`
                 ) : (
                   <Row>
-                    {currencyAmount?.currency?.symbol} approved{' '}
-                    <CheckCircle color="lightgreen" style={{ marginLeft: 5 }} />
+                    <span>{currencyAmount?.currency?.symbol} approved</span>
+                    <img src={CheckCircle} alt="Approved" />
                   </Row>
                 )}
               </i>
             ) : (
               <i>
                 <Row>
-                  Approval not required! <CheckCircle color="lightgreen" style={{ marginLeft: 5 }} />
+                  <span>Approval not required!</span>
+                  <img src={CheckCircle} alt="Approved" />
                 </Row>
               </i>
             )}
@@ -195,7 +196,6 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
                   </RangeStep>
                 ))}
               </RangeSteps>
-
               <InvestAvailableBar percentage={Number(percentage)} />
             </div>
           </span>
@@ -205,15 +205,15 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
         {/* Investment inputs */}
         <InvestInput>
           <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 */}
-              <button onClick={onMaxClick}>(invest max. possible)</button>
-            </span>
             <label>
+              <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 */}
+                <button onClick={onMaxClick}>(invest max possible)</button>
+              </span>
               <input
                 // disabled
                 placeholder="0"

diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx
@@ -6,13 +6,17 @@ import {
   InvestTokenSubtotal,
   StepIndicator,
   Steps,
+  ClaimTable,
+  AccountClaimSummary,
+  TokenLogo,
 } from 'pages/Claim/styled'
 import { ClaimType, useClaimState, useUserEnhancedClaimData, useClaimDispatchers } from 'state/claim/hooks'
 import { ClaimCommonTypes, EnhancedUserClaimData } from '../types'
 import { ClaimStatus } from 'state/claim/actions'
 import { useActiveWeb3React } from 'hooks/web3'
 import { ApprovalState, OptionalApproveCallbackParams } from 'hooks/useApproveCallback'
 import InvestOption from './InvestOption'
+import CowProtocolLogo from 'components/CowProtocolLogo'
 
 export type InvestOptionProps = {
   claim: EnhancedUserClaimData
@@ -73,17 +77,17 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
   return (
     <InvestFlow>
       <StepIndicator>
+        <Steps step={investFlowStep}>
+          <li>Allowances: Approve all tokens to be used for investment.</li>
+          <li>Submit and confirm the transaction to claim vCOW</li>
+        </Steps>
         <h1>
           {investFlowStep === 0
             ? 'Claiming vCOW is a two step process'
             : investFlowStep === 1
             ? 'Set allowance to Buy vCOW'
             : 'Confirm transaction to claim all vCOW'}
         </h1>
-        <Steps step={investFlowStep}>
-          <li>Allowances: Approve all tokens to be used for investment.</li>
-          <li>Submit and confirm the transaction to claim vCOW</li>
-        </Steps>
       </StepIndicator>
 
       {/* Invest flow: Step 1 > Set allowances and investment amounts */}
@@ -105,7 +109,13 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
 
           {/* TODO: Update this with real data */}
           <InvestTokenSubtotal>
-            {activeClaimAccount} will receive: 4,054,671.28 vCOW based on investment(s)
+            <h3>Investment summary</h3>
+            <span>
+              <b>Claim account:</b> {activeClaimAccount}
+            </span>
+            <span>
+              <b>vCOW to receive based on selected investment(s):</b> 4,054,671.28 vCOW
+            </span>
           </InvestTokenSubtotal>
 
           <InvestFlowValidation>Approve all investment tokens before continuing</InvestFlowValidation>
@@ -115,18 +125,87 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
       {/* Invest flow: Step 2 > Review summary */}
       {investFlowStep === 2 ? (
         <InvestContent>
-          1. Claim airdrop: {activeClaimAccount} receives 13,120.50 vCOW (Note: please make sure you intend to claim and
-          send vCOW to the mentioned account)
-          <br />
-          <br />
-          2. Claim and invest: Investing with account: {account} (connected account). Investing: 1343 GNO (50% of
-          available investing opportunity) and 32 ETH (30% of available investing opportunity)
-          <br />
-          <br />
-          3. Receive vCOW claims on account {activeClaimAccount}: 23,947.6 vCOW - available NOW! and 120,567.12 vCOW -
-          Vested linearly 4 years <br />
-          <br />
-          <br />
+          <AccountClaimSummary>
+            <span>
+              <b>Claiming with account:</b>
+              <i>{account} (connected account)</i>
+            </span>
+            <span>
+              {' '}
+              <b>Receiving account:</b>
+              <i>{activeClaimAccount}</i>
+            </span>
+          </AccountClaimSummary>
+          <ClaimTable>
+            <table>
+              <thead>
+                <tr>
+                  <th>Claim type</th>
+                  <th>Account &amp; vCOW amount</th>
+                  <th>Details</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <b>Airdrop</b>
+                  </td>
+                  <td>
+                    <span>
+                      <b>Amount to receive:</b>
+                      <i>13,120.50 vCOW</i>
+                    </span>
+                  </td>
+
+                  <td>
+                    <span>
+                      <b>Cost:</b> <i>Free!</i>
+                    </span>
+                    <span>
+                      <b>Vesting:</b>
+                      <i>No</i>
+                    </span>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td>
+                    {' '}
+                    <TokenLogo symbol="GNO" size={32} />
+                    <CowProtocolLogo size={32} />
+                    <span>
+                      <b>Buy vCOW</b>
+                      <i>with GNO</i>
+                    </span>
+                  </td>
+
+                  <td>
+                    <span>
+                      <b>Investment amount:</b> <i>1343 GNO (50% of available investing opportunity)</i>
+                    </span>
+                    <span>
+                      <b>Amount to receive:</b>
+                      <i>13,120.50 vCOW</i>
+                    </span>
+                  </td>
+
+                  <td>
+                    <span>
+                      <b>Price:</b> <i>2666.6666 vCoW per GNO</i>
+                    </span>
+                    <span>
+                      <b>Cost:</b> <i>0.783375 GNO</i>
+                    </span>
+                    <span>
+                      <b>Vesting:</b>
+                      <i>4 years (linear)</i>
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </ClaimTable>
+
           <h4>Ready to claim your vCOW?</h4>
           <p>
             <b>What will happen?</b> By sending this Ethereum transaction, you will be investing tokens from the
@@ -137,6 +216,9 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
             <b>Can I modify the invested amounts or invest partial amounts later?</b> No. Once you send the transaction,
             you cannot increase or reduce the investment. Investment oportunities can only be exercised once.
           </p>
+          <p>
+            <b>Important!</b> Please make sure you intend to claim and send vCOW to the mentioned receiving account(s)
+          </p>
         </InvestContent>
       ) : null}
     </InvestFlow>