diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx index 4ac267ad6..b91b41821 100644 --- a/src/custom/pages/Claim/InvestmentFlow/index.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/index.tsx @@ -8,6 +8,7 @@ import { InvestSummaryTable, ClaimTable, AccountClaimSummary, + Badge, } from 'pages/Claim/styled' import { InvestSummaryRow } from 'pages/Claim/InvestmentFlow/InvestSummaryRow' import { ClaimSummaryView } from 'pages/Claim/ClaimSummary' @@ -32,6 +33,11 @@ import InvestOption from './InvestOption' import { ClaimCommonTypes, ClaimWithInvestmentData, EnhancedUserClaimData } from '../types' import { COW_LINKS } from 'pages/Claim' import { ExternalLink } from 'theme' +import { ExplorerLink } from '@src/custom/components/ExplorerLink' +import { ExplorerDataType } from '@src/utils/getExplorerLink' + +import { BadgeVariant } from 'components/Badge' +import { DollarSign, Icon, Send } from 'react-feather' const STEPS_DATA = [ { @@ -118,6 +124,31 @@ function _calculateTotalVCow(allClaims: ClaimWithInvestmentData[]) { ) } +type AccountDetailsProps = { + label: string + account: string + connectedAccount: string + Icon: Icon +} + +function AccountDetails({ label, account, connectedAccount, Icon }: AccountDetailsProps) { + return ( + + + {label}: + + + {' '} + {account === connectedAccount ? ( +   Connected account + ) : ( +   External account + )} + + + ) +} + export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenApproveData }: InvestmentFlowProps) { const { account } = useActiveWeb3React() const { selected, activeClaimAccount, claimStatus, isInvestFlowActive, investFlowStep, investFlowData } = @@ -149,7 +180,8 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro }, [isInvestFlowActive]) if ( - !activeClaimAccount || // no connected account + !account || // no connected account + !activeClaimAccount || // no selected account for claiming !hasClaims || // no claims !isInvestFlowActive || // not on correct step (account change in mid-step) claimStatus !== ClaimStatus.DEFAULT || // not in default claim state @@ -235,15 +267,18 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro - - Claiming with account: - {account} (connected account) - - - {' '} - Receiving account: - {activeClaimAccount} - + +

Ready to claim your vCOW?

diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 6461137cc..066088df3 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -1,5 +1,7 @@ import styled from 'styled-components/macro' import { CheckCircle, Frown } from 'react-feather' +import BadgeOriginal from 'components/Badge' + import { Icon } from 'components/CowProtocolLogo' import { ButtonPrimary, ButtonSecondary } from 'components/Button' import { transparentize, darken } from 'polished' @@ -1091,6 +1093,10 @@ export const AccountClaimSummary = styled.div` } ` +export const Badge = styled(BadgeOriginal)` + font-size: 11px; +` + export const CowSpinner = styled.div` --circle-size: 120px; --border-radius: 100%;