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%;