Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

Refactor of investment-flow to separate component #2125

Merged
merged 1 commit into from
Jan 13, 2022
Merged

Refactor of investment-flow to separate component #2125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 185 additions & 0 deletions src/custom/pages/Claim/InvestmentFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<ClaimCommonTypes, 'hasClaims'> & {
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 (
<InvestFlow>
<StepIndicator>
<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 */}
{investFlowStep === 1 ? (
<InvestContent>
<p>
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{' '}
</p>
<InvestTokenGroup>
<div>
<span>
<TokenLogo symbol={'GNO'} size={72} />
<CowProtocolLogo size={72} />
</span>
<h3>Buy vCOW with GNO</h3>
</div>

<span>
<InvestSummary>
<span>
<b>Price</b> <i>16.66 vCoW per GNO</i>
</span>
<span>
<b>Token approval</b>
<i>GNO not approved</i>
<button>Approve GNO</button>
</span>
<span>
<b>Max. investment available</b> <i>2,500.04 GNO</i>
</span>
<span>
<b>Available investment used</b> <InvestAvailableBar percentage={50} />
</span>
</InvestSummary>
<InvestInput>
<div>
<span>
<b>Balance:</b> <i>10,583.34 GNO</i>
{/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
<button>Invest max. possible</button>
</span>
<label>
<b>GNO</b>
<input placeholder="0" />
</label>
<i>Receive: 32,432.54 vCOW</i>
{/* Insufficient balance validation error */}
<small>
Insufficient balance to invest. Adjust the amount or go back to remove this investment option.
</small>
</div>
</InvestInput>
</span>
</InvestTokenGroup>

<InvestTokenGroup>
<div>
<span>
<TokenLogo symbol={'ETH'} size={72} />
<CowProtocolLogo size={72} />
</span>
<h3>Buy vCOW with ETH</h3>
</div>

<span>
<InvestSummary>
<span>
<b>Price</b> <i>16.66 vCoW per ETH</i>
</span>
<span>
<b>Token approval</b>
<i>Not needed for ETH!</i>
</span>
<span>
<b>Max. investment available</b> <i>2,500.04 ETH</i>
</span>
<span>
<b>Available investment used</b> <InvestAvailableBar percentage={50} />
</span>
</InvestSummary>
<InvestInput>
<div>
<span>
<b>Balance:</b> <i>10,583.34 ETH</i>
{/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
<button>Invest max. possible</button>
</span>
<label>
<b>ETH</b>
<input placeholder="0" />
</label>
<i>Receive: 32,432.54 vCOW</i>
{/* Insufficient balance validation error */}
<small>
Insufficient balance to invest. Adjust the amount or go back to remove this investment option.
</small>
</div>
</InvestInput>
</span>
</InvestTokenGroup>

<InvestTokenSubtotal>
{activeClaimAccount} will receive: 4,054,671.28 vCOW based on investment(s)
</InvestTokenSubtotal>

<InvestFlowValidation>Approve all investment tokens before continuing</InvestFlowValidation>
</InvestContent>
) : null}

{/* 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 />
<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
connected account and exchanging them for vCOW tokens that will be received by the claiming account
specified above.
</p>
<p>
<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>
</InvestContent>
) : null}
</InvestFlow>
)
}
Loading