From 0caad3cc1d79b3e7db3f197ebb7b8a2b1d0f65be Mon Sep 17 00:00:00 2001 From: nenadV91 Date: Wed, 12 Jan 2022 15:55:36 +0100 Subject: [PATCH] Refactor of investment-flow to separate component --- src/custom/pages/Claim/InvestmentFlow.tsx | 185 +++++++++++++++++ src/custom/pages/Claim/index.tsx | 231 +++------------------- 2 files changed, 217 insertions(+), 199 deletions(-) create mode 100644 src/custom/pages/Claim/InvestmentFlow.tsx diff --git a/src/custom/pages/Claim/InvestmentFlow.tsx b/src/custom/pages/Claim/InvestmentFlow.tsx new file mode 100644 index 000000000..2509f82bd --- /dev/null +++ b/src/custom/pages/Claim/InvestmentFlow.tsx @@ -0,0 +1,185 @@ +import { + InvestFlow, + InvestContent, + InvestTokenGroup, + InvestInput, + InvestAvailableBar, + InvestSummary, + InvestFlowValidation, + InvestTokenSubtotal, + StepIndicator, + Steps, + TokenLogo, +} from 'pages/Claim/styled' +import CowProtocolLogo from 'components/CowProtocolLogo' +import { useClaimState } from 'state/claim/hooks' +import { ClaimCommonTypes } from './types' +import { ClaimStatus } from 'state/claim/actions' +import { useActiveWeb3React } from 'hooks/web3' + +type InvestmentFlowProps = Pick & { + isAirdropOnly: boolean +} + +export default function InvestmentFlow({ hasClaims, isAirdropOnly }: InvestmentFlowProps) { + const { account } = useActiveWeb3React() + + const { activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep } = useClaimState() + + if (!activeClaimAccount || !hasClaims || !isInvestFlowActive) return null + if (claimStatus !== ClaimStatus.DEFAULT || isAirdropOnly) return null + + return ( + + +

+ {investFlowStep === 0 + ? 'Claiming vCOW is a two step process' + : investFlowStep === 1 + ? 'Set allowance to Buy vCOW' + : 'Confirm transaction to claim all vCOW'} +

+ +
  • Allowances: Approve all tokens to be used for investment.
    • +
  • Submit and confirm the transaction to claim vCOW
    • +     +     + + {/* Invest flow: Step 1 > Set allowances and investment amounts */} + {investFlowStep === 1 ? ( + +

    + Your account can participate in the investment of vCOW. Each investment opportunity will allow you to invest + up to a predefined maximum amount of tokens{' '} +

    + +
    + + + + +

    Buy vCOW with GNO

    +
    + + + + + Price 16.66 vCoW per GNO + + + Token approval + GNO not approved + + + + Max. investment available 2,500.04 GNO + + + Available investment used + + + +
    + + Balance: 10,583.34 GNO + {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} + + + + Receive: 32,432.54 vCOW + {/* Insufficient balance validation error */} + + Insufficient balance to invest. Adjust the amount or go back to remove this investment option. + +
    +     +     +     + + +
    + + + + +

    Buy vCOW with ETH

    +
    + + + + + Price 16.66 vCoW per ETH + + + Token approval + Not needed for ETH! + + + Max. investment available 2,500.04 ETH + + + Available investment used + + + +
    + + Balance: 10,583.34 ETH + {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} + + + + Receive: 32,432.54 vCOW + {/* Insufficient balance validation error */} + + Insufficient balance to invest. Adjust the amount or go back to remove this investment option. + +
    +     +     +     + + + {activeClaimAccount} will receive: 4,054,671.28 vCOW based on investment(s) + + + Approve all investment tokens before continuing +     + ) : null} + + {/* Invest flow: Step 2 > Review summary */} + {investFlowStep === 2 ? ( + + 1. Claim airdrop: {activeClaimAccount} receives 13,120.50 vCOW (Note: please make sure you intend to claim and + send vCOW to the mentioned account) +
    +
    + 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) +
    +
    + 3. Receive vCOW claims on account {activeClaimAccount}: 23,947.6 vCOW - available NOW! and 120,567.12 vCOW - + Vested linearly 4 years
    +
    +
    +

    Ready to claim your vCOW?

    +

    + What will happen? By sending this Ethereum transaction, you will be investing tokens from the + connected account and exchanging them for vCOW tokens that will be received by the claiming account + specified above. +

    +

    + Can I modify the invested amounts or invest partial amounts later? No. Once you send the transaction, + you cannot increase or reduce the investment. Investment oportunities can only be exercised once. +

    +     + ) : null} +     + ) +} diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx index dfa2a7c5c..1d75654a6 100644 --- a/src/custom/pages/Claim/index.tsx +++ b/src/custom/pages/Claim/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react' +import { useEffect, useMemo, useCallback } from 'react' import { Trans } from '@lingui/macro' import { useActiveWeb3React } from 'hooks/web3' import { @@ -10,25 +10,10 @@ import { ClaimInput, } from 'state/claim/hooks' import { ButtonPrimary, ButtonSecondary } from 'components/Button' -import { - PageWrapper, - FooterNavButtons, - InvestFlow, - InvestContent, - InvestTokenGroup, - InvestInput, - InvestAvailableBar, - InvestSummary, - InvestFlowValidation, - InvestTokenSubtotal, - StepIndicator, - Steps, - TokenLogo, -} from 'pages/Claim/styled' +import { PageWrapper, FooterNavButtons } from 'pages/Claim/styled' import EligibleBanner from './EligibleBanner' import { getFreeClaims, hasPaidClaim, getIndexes, getPaidClaims } from 'state/claim/hooks/utils' import { useWalletModalToggle } from 'state/application/hooks' -import CowProtocolLogo from 'components/CowProtocolLogo' import Confetti from 'components/Confetti' import { isAddress } from 'web3-utils' import useENS from 'hooks/useENS' @@ -40,6 +25,7 @@ import { useClaimDispatchers, useClaimState } from 'state/claim/hooks' import { ClaimStatus } from 'state/claim/actions' import ClaimingStatus from './ClaimingStatus' import ClaimsTable from './ClaimsTable' +import InvestmentFlow from './InvestmentFlow' export default function Claim() { const { account } = useActiveWeb3React() @@ -135,6 +121,25 @@ export default function Claim() { setInputAddress('') } + const handleClaiming = useCallback( + (inputData: ClaimInput[]) => { + setClaimStatus(ClaimStatus.ATTEMPTING) + + if (inputData) { + claimCallback(inputData) + .then((res) => { + setClaimStatus(ClaimStatus.SUBMITTED) + console.log(`Transaction ${res} submitted`) + }) + .catch((error) => { + setClaimStatus(ClaimStatus.DEFAULT) + console.log(error) + }) + } + }, + [claimCallback, setClaimStatus] + ) + // handle submit claim const handleSubmitClaim = () => { // just to be sure @@ -142,16 +147,16 @@ export default function Claim() { const freeClaims = getFreeClaims(userClaimData) - let inputData = null - // check if there are any selected (paid) claims if (!selected.length) { - inputData = freeClaims.map(({ index }) => ({ index })) + const inputData = freeClaims.map(({ index }) => ({ index })) + + console.log('Starting claiming with', inputData) - console.log('starting claiming with', inputData) + handleClaiming(inputData) } else { const inputIndices = [...getIndexes(freeClaims), ...selected] - inputData = inputIndices.reduce((acc, idx: number) => { + const inputData = inputIndices.reduce((acc, idx: number) => { const claim = userClaimData.find(({ index }) => index === idx) if (claim) { @@ -164,22 +169,9 @@ export default function Claim() { return acc }, []) - console.log('starting investment flow', inputData) - } + console.log('Starting investment flow', inputData) - setClaimStatus(ClaimStatus.ATTEMPTING) - - if (inputData) { - claimCallback(inputData) - // this is not right currently - .then((/* res */) => { - // I don't really understand what to expect or do here ¯\_(ツ)_/¯ - setClaimStatus(ClaimStatus.SUBMITTED) - }) - .catch((error) => { - setClaimStatus(ClaimStatus.DEFAULT) - console.log(error) - }) + setIsInvestFlowActive(true) } } @@ -225,7 +217,7 @@ export default function Claim() { {/* Top nav buttons */} - {/* Show general title OR total to claim (user has airdrop or airdrop+investment) --------------------------- */} + {/* Show general title OR total to claim (user has airdrop or airdrop+investment) */} {/* Show total to claim (user has airdrop or airdrop+investment) */} @@ -243,167 +235,8 @@ export default function Claim() { handleSelectAll={handleSelectAll} hasClaims={hasClaims} /> - - {/* START -- Investing vCOW flow (advanced) ----------------------------------------------------- */} - {!!activeClaimAccount && - !!hasClaims && - claimStatus === ClaimStatus.DEFAULT && - !isAirdropOnly && - !!isInvestFlowActive && ( - - -

    - {investFlowStep === 0 - ? 'Claiming vCOW is a two step process' - : investFlowStep === 1 - ? 'Set allowance to Buy vCOW' - : 'Confirm transaction to claim all vCOW'} -

    - -
  • Allowances: Approve all tokens to be used for investment.
    • -
  • Submit and confirm the transaction to claim vCOW
    • -     -     - - {/* Invest flow: Step 1 > Set allowances and investment amounts */} - {investFlowStep === 1 ? ( - -

    - Your account can participate in the investment of vCOW. Each investment opportunity will allow you to - invest up to a predefined maximum amount of tokens{' '} -

    - -
    - - - - -

    Buy vCOW with GNO

    -
    - - - - - Price 16.66 vCoW per GNO - - - Token approval - GNO not approved - - - - Max. investment available 2,500.04 GNO - - - Available investment used - - - -
    - - Balance: 10,583.34 GNO - {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} - - - - Receive: 32,432.54 vCOW - {/* Insufficient balance validation error */} - - Insufficient balance to invest. Adjust the amount or go back to remove this investment option. - -
    -     -     -     - - -
    - - - - -

    Buy vCOW with ETH

    -
    - - - - - Price 16.66 vCoW per ETH - - - Token approval - Not needed for ETH! - - - Max. investment available 2,500.04 ETH - - - Available investment used - - - -
    - - Balance: 10,583.34 ETH - {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} - - - - Receive: 32,432.54 vCOW - {/* Insufficient balance validation error */} - - Insufficient balance to invest. Adjust the amount or go back to remove this investment option. - -
    -     -     -     - - - {activeClaimAccount} will receive: 4,054,671.28 vCOW based on investment(s) - - - Approve all investment tokens before continuing -     - ) : null} - - {/* Invest flow: Step 2 > Review summary */} - {investFlowStep === 2 ? ( - - 1. Claim airdrop: {activeClaimAccount} receives 13,120.50 vCOW (Note: please make sure you intend to - claim and send vCOW to the mentioned account) -
    -
    - 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) -
    -
    - 3. Receive vCOW claims on account {activeClaimAccount}: 23,947.6 vCOW - available NOW! and 120,567.12 - vCOW - Vested linearly 4 years
    -
    -
    -

    Ready to claim your vCOW?

    -

    - What will happen? By sending this Ethereum transaction, you will be investing tokens from the - connected account and exchanging them for vCOW tokens that will be received by the claiming account - specified above. -

    -

    - Can I modify the invested amounts or invest partial amounts later? No. Once you send the - transaction, you cannot increase or reduce the investment. Investment oportunities can only be - exercised once. -

    -     - ) : null} -     - )} - {/* END -- Investing vCOW flow (advanced) ----------------------------------------------------- */} + {/* Investing vCOW flow (advanced) */} + {/* General claim vCOW button (no invest) */}