diff --git a/src/custom/assets/cow-swap/check.svg b/src/custom/assets/cow-swap/check.svg
new file mode 100644
index 000000000..00ef30537
--- /dev/null
+++ b/src/custom/assets/cow-swap/check.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/custom/assets/cow-swap/gno.png b/src/custom/assets/cow-swap/gno.png
new file mode 100644
index 000000000..94c61d6ef
Binary files /dev/null and b/src/custom/assets/cow-swap/gno.png differ
diff --git a/src/custom/assets/cow-swap/usdc.png b/src/custom/assets/cow-swap/usdc.png
new file mode 100644
index 000000000..ae30bd6bc
Binary files /dev/null and b/src/custom/assets/cow-swap/usdc.png differ
diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx
index c0f1172ca..19abf9128 100644
--- a/src/custom/pages/Claim/ClaimsTable.tsx
+++ b/src/custom/pages/Claim/ClaimsTable.tsx
@@ -85,10 +85,12 @@ const ClaimsTableRow = ({
{formatSmart(claimAmount) || 0} vCOW
-
- Price:{' '}
- {isFree || !price ? '-' : `${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`}
-
+ {!isFree ||
+ (price && (
+
+ Price: {`${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`}
+
+ ))}
Cost:{' '}
diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
index 0e358ae65..0a67677df 100644
--- 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`
) : (
- {currencyAmount?.currency?.symbol} approved{' '}
- {currencyAmount?.currency?.symbol} approved
+
)}
) : (
- Approval not required! Approval not required!
+
)}
@@ -195,7 +196,6 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
))}
-
@@ -205,15 +205,15 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
{/* Investment inputs */}
-
- Balance:
-
- {formatSmart(balance) || 0} {currencyAmount?.currency?.symbol}
-
- {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
- (invest max. possible)
-
+
+ Balance:
+
+ {formatSmart(balance) || 0} {currencyAmount?.currency?.symbol}
+
+ {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
+ (invest max possible)
+
+
+ Allowances: Approve all tokens to be used for investment.
+ Submit and confirm the transaction to claim vCOW
+
{investFlowStep === 0
? 'Claiming vCOW is a two step process'
@@ -80,10 +88,6 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
? '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 */}
@@ -105,7 +109,13 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
{/* TODO: Update this with real data */}
- {activeClaimAccount} will receive: 4,054,671.28 vCOW based on investment(s)
+ Investment summary
+
+ Claim account: {activeClaimAccount}
+
+
+ vCOW to receive based on selected investment(s): 4,054,671.28 vCOW
+
Approve all investment tokens before continuing
@@ -115,18 +125,87 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
{/* 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)
-
+
+ Claiming with account:
+ {account} (connected account)
+
+
+ {' '}
+ Receiving account:
+ {activeClaimAccount}
+
+
+
+
+
+
+ Claim type
+ Account & vCOW amount
+ Details
+
+
+
+
+
+ Airdrop
+
+
+
+ Amount to receive:
+ 13,120.50 vCOW
+
+
+
+
+
+ Cost: Free!
+
+
+ Vesting:
+ No
+
+
+
+
+
+
+ {' '}
+
+ Buy vCOW
+ with GNO
+
+
+
+
+
+ Investment amount: 1343 GNO (50% of available investing opportunity)
+
+
+ Amount to receive:
+ 13,120.50 vCOW
+
+
+
+
+
+ Price: 2666.6666 vCoW per GNO
+
+
+ Cost: 0.783375 GNO
+
+
+ Vesting:
+ 4 years (linear)
+
+
+
+
+
+
+
Ready to claim your vCOW?
What will happen? By sending this Ethereum transaction, you will be investing tokens from the
@@ -137,6 +216,9 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro
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.
+
+ Important! Please make sure you intend to claim and send vCOW to the mentioned receiving account(s)
+
) : null}
diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
index 2d921bdf5..7eb94b51b 100644
--- a/src/custom/pages/Claim/styled.ts
+++ b/src/custom/pages/Claim/styled.ts
@@ -3,6 +3,9 @@ import { CheckCircle, Frown } from 'react-feather'
import { Icon } from 'components/CowProtocolLogo'
import { ButtonPrimary, ButtonSecondary } from 'components/Button'
import { transparentize, darken } from 'polished'
+import LogoETH from 'assets/cow-swap/network-mainnet-logo.svg'
+import LogoGNO from 'assets/cow-swap/gno.png'
+import LogoUSDC from 'assets/cow-swap/usdc.png'
export const PageWrapper = styled.div`
--border-radius: 56px;
@@ -29,9 +32,10 @@ export const PageWrapper = styled.div`
--focus: 2px rgba(39, 94, 254, .3);
--border: ${({ theme }) => theme.bg4};
--border-hover: ${({ theme }) => theme.primary1};
- --background: ${({ theme }) => theme.bg5};
+ --background: ${({ theme }) => theme.blueShade3};;
appearance: none;
height: 21px;
+ width: 21px;
outline: none;
display: inline-block;
vertical-align: top;
@@ -78,16 +82,13 @@ export const PageWrapper = styled.div`
box-shadow: 0 0 0 var(--focus);
}
- &:not(.switch) {
- width: 21px;
- &:after {
- opacity: var(--o, 0);
- }
- &:checked {
- --o: 1;
- }
+ &:after {
+ opacity: var(--o, 0);
}
-
+ &:checked {
+ --o: 1;
+ }
+
& + label {
font-size: 14px;
line-height: 21px;
@@ -99,8 +100,7 @@ export const PageWrapper = styled.div`
}
input[type='checkbox'] {
- &:not(.switch) {
- border-radius: 7px;
+ border-radius: 7px;
&:after {
width: 5px;
@@ -112,38 +112,10 @@ export const PageWrapper = styled.div`
top: 4px;
transform: rotate(var(--r, 20deg));
}
- &:checked {
- --r: 43deg;
- }
- }
-
- &.switch {
- width: 38px;
- border-radius: 11px;
-
- &:after {
- left: 2px;
- top: 2px;
- border-radius: 50%;
- width: 15px;
- height: 15px;
- background: var(--ab, var(--border));
- transform: translateX(var(--x, 0));
- }
&:checked {
- --ab: var(--active-inner);
- --x: 17px;
- }
-
- &:disabled {
- &:not(:checked) {
- &:after {
- opacity: .6;
- }
- }
+ --r: 43deg;
}
- }
}
input[type='radio'] {
@@ -219,8 +191,10 @@ export const TokenLogo = styled.div<{ symbol: string; size: number }>`
width: ${({ size }) => `${size}px`};
height: ${({ size }) => `${size}px`};
border-radius: ${({ size }) => `${size}px`};
- /* background: ${({ symbol }) => `url(${symbol}.png) no-repeat center/contain`}; */
- background: grey;
+ background: ${({ symbol, theme }) =>
+ `url(${
+ symbol === 'GNO' ? LogoGNO : symbol === 'ETH' ? LogoETH : symbol === 'USDC' ? LogoUSDC : theme.blueShade3
+ }) no-repeat center/contain`};
`
export const ClaimSummary = styled.div`
@@ -287,6 +261,11 @@ export const ClaimTable = styled.div`
width: 100%;
margin: 0 0 24px;
+ ${TokenLogo},
+ ${Icon} {
+ border: 2px solid ${({ theme }) => theme.blueShade3};
+ }
+
${TokenLogo} {
margin: 0 -26px 0 0;
}
@@ -305,6 +284,10 @@ export const ClaimTable = styled.div`
display: contents;
}
+ tr > td {
+ background: ${({ theme }) => theme.blueShade3};
+ }
+
th,
td {
padding: 15px;
@@ -335,7 +318,7 @@ export const ClaimTable = styled.div`
align-items: center;
color: ${({ theme }) => theme.text1};
word-break: break-word;
- background: ${({ theme }) => transparentize(0.7, theme.blueShade2)};
+ background: ${({ theme }) => theme.blueShade3};
}
td > b {
@@ -396,7 +379,7 @@ export const ClaimTable = styled.div`
export const ClaimRow = styled.tr<{ isPending?: boolean }>`
> td {
- background-color: ${({ isPending }) => (isPending ? '#221954' : 'rgb(255 255 255 / 6%)')};
+ background-color: ${({ theme, isPending }) => (isPending ? '#221954' : theme.bg5)};
cursor: ${({ isPending }) => (isPending ? 'pointer' : 'initial')};
&:first-child {
@@ -672,6 +655,8 @@ export const ClaimBreakdown = styled.div`
line-height: 1.6;
font-weight: 300;
margin: 0 0 24px;
+ text-align: center;
+ }
`
export const FooterNavButtons = styled.div`
@@ -713,20 +698,6 @@ export const TopNav = styled.div`
}
`
-export const Demo = styled(ClaimTable)`
- background: #3e0c46;
- > table {
- grid-template-columns: min-content auto max-content auto;
- }
-
- > table tr td:first-of-type {
- opacity: 0.6;
- }
- > table tr td:last-of-type {
- font-weight: bold;
- }
-`
-
export const InvestFlow = styled.div`
display: flex;
flex-flow: column wrap;
@@ -741,6 +712,73 @@ export const InvestFlow = styled.div`
export const InvestContent = styled.div`
display: flex;
flex-flow: column wrap;
+
+ ${TokenLogo},
+ ${Icon} {
+ border: 4px solid ${({ theme }) => theme.blueShade3};
+ }
+
+ ${ClaimTable} {
+ table {
+ display: grid;
+ border-collapse: collapse;
+ min-width: 100%;
+ font-size: 14px;
+ grid-template-columns: repeat(3, auto);
+
+ tr > td {
+ flex-flow: column wrap;
+ align-content: center;
+ gap: 18px;
+ font-weight: 300;
+ font-size: 14px;
+ }
+
+ tr > td > span {
+ font-size: inherit;
+ display: flex;
+ flex-flow: column wrap;
+ gap: 3px;
+
+ &:last-child {
+ width: 100%;
+ }
+ }
+
+ tr > td:nth-of-type(1) {
+ flex-flow: row wrap;
+ align-content: center;
+
+ > b {
+ font-weight: bold;
+ }
+ }
+
+ tr > td:nth-of-type(2) {
+ flex-flow: column wrap;
+ justify-content: center;
+
+ > span {
+ margin: 0;
+ }
+
+ > span > i {
+ font-style: normal;
+ font-size: inherit;
+ }
+ }
+
+ tr > td:nth-of-type(3) {
+ font-weight: 300;
+ font-size: 14px;
+ justify-content: flex-start;
+
+ > span {
+ width: 100%;
+ }
+ }
+ }
+ }
`
export const StepIndicator = styled.div`
@@ -751,9 +789,9 @@ export const StepIndicator = styled.div`
export const Steps = styled.div<{ step: number | 0 }>`
list-style-type: decimal;
margin: 0 0 12px;
- background: grey;
padding: 12px;
border-radius: 12px;
+ background: ${({ theme }) => theme.blueShade3};
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
@@ -763,7 +801,7 @@ export const Steps = styled.div<{ step: number | 0 }>`
}
> li:nth-of-type(${({ step }) => step}) {
- background: rgb(237 104 52 / 29%);
+ background: ${({ theme }) => transparentize(0.5, theme.primary1)};
}
`
@@ -774,7 +812,7 @@ export const InvestTokenGroup = styled.div`
padding: 24px;
margin: 0 0 24px;
border-radius: 12px;
- background: ${({ theme }) => transparentize(0.7, theme.blueShade2)};
+ background: ${({ theme }) => theme.blueShade3};
> div {
display: flex;
@@ -797,11 +835,6 @@ export const InvestTokenGroup = styled.div`
margin: 0 0 18px;
}
- ${TokenLogo},
- ${Icon} {
- border: 4px solid ${({ theme }) => theme.blueShade2};
- }
-
${TokenLogo} {
margin: 0 -34px 0 0;
}
@@ -829,6 +862,8 @@ export const InvestInput = styled.span`
> div > label {
display: flex;
+ flex-flow: row wrap;
+ padding: 12px;
position: relative;
background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)};
border: ${({ theme }) =>
@@ -847,26 +882,31 @@ export const InvestInput = styled.span`
align-items: center;
position: absolute;
right: 12px;
- top: 0;
+ top: 28px;
bottom: 0;
margin: auto;
font-weight: normal;
- opacity: 0.7;
color: ${({ theme }) => theme.text1};
+ background: ${({ theme }) => theme.blueShade3};
+ border-radius: 12px;
+ padding: 0 12px;
+ height: 32px;
}
> div > label > input {
color: ${({ theme }) => theme.text1};
border: none;
border-radius: 12px;
- padding: 12px 70px 12px 12px;
+ padding: 12px 70px 0 0;
font-size: 26px;
outline: 0;
background: transparent;
width: 100%;
+ line-height: 1;
&::placeholder {
opacity: 0.5;
+ line-height: 1;
}
}
@@ -880,19 +920,22 @@ export const InvestInput = styled.span`
font-style: normal;
}
- > div > span {
+ > div > label > span {
display: flex;
+ width: 100%;
+ font-size: 14px;
}
- > div > span > b {
+ > div > label > span > b {
margin: 0 3px 0 0;
+ font-weight: normal;
}
- > div > span > i {
+ > div > Label > span > i {
font-style: normal;
}
- > div > span > button {
+ > div > label > span > button {
background: none;
border: 0;
cursor: pointer;
@@ -947,13 +990,13 @@ export const InvestSummary = styled.div`
> span {
display: flex;
flex-flow: column wrap;
- margin: 0 0 12px;
+ margin: 0 0 18px;
color: ${({ theme }) => transparentize(0.1, theme.text1)};
- gap: 3px;
+ gap: 6px;
}
> span > ${ButtonPrimary} {
- margin: 12px 0 12px -9px;
+ margin: 3px 0 12px -9px;
padding: 6px;
font-size: 16px;
}
@@ -962,6 +1005,10 @@ export const InvestSummary = styled.div`
font-style: normal;
}
+ > span > i > div > img {
+ margin: 0 0 0 4px;
+ }
+
> span > b {
font-weight: 600;
color: ${({ theme }) => theme.text1};
@@ -984,15 +1031,53 @@ export const InvestFlowValidation = styled.div`
export const InvestTokenSubtotal = styled.div`
display: flex;
- padding: 56px;
- margin: 0 0 24px;
- background: grey;
+ flex-flow: column wrap;
color: ${({ theme }) => theme.text1};
- border-radius: var(--border-radius);
- font-size: 21px;
+ width: 100%;
+ padding: 24px;
+ margin: 0 0 24px;
+ border-radius: 12px;
+ background: ${({ theme }) => theme.blueShade3};
+ font-size: 15px;
+
+ > h3 {
+ font-weight: 600;
+ font-size: 21px;
+ margin: 0 0 8px;
+ }
+
+ > span {
+ display: flex;
+ flex-flow: column wrap;
+ margin: 18px 0 0;
+
+ > b {
+ font-weight: 600;
+ margin: 0 0 3px;
+ }
+ }
`
export const ClaimAccountButtons = styled.div`
display: flex;
flex-direction: column;
`
+
+export const AccountClaimSummary = styled.div`
+ display: flex;
+ flex-flow: row wrap;
+ gap: 12px;
+ margin: 24px 0;
+
+ > span {
+ display: flex;
+ flex-flow: column wrap;
+ white-space: wrap;
+ gap: 3px;
+ }
+
+ > span > i {
+ font-style: normal;
+ break-word: break-all;
+ }
+`
diff --git a/src/custom/theme/baseTheme.tsx b/src/custom/theme/baseTheme.tsx
index e2ab33494..48fe4f92c 100644
--- a/src/custom/theme/baseTheme.tsx
+++ b/src/custom/theme/baseTheme.tsx
@@ -67,6 +67,7 @@ export function colors(darkMode: boolean): Colors {
greenShade: '#376c57',
blueShade: '#0f2644',
blueShade2: '#011e34',
+ blueShade3: darkMode ? '#1c416e' : '#bdd6e1',
// states
success: darkMode ? '#00d897' : '#00815a',
diff --git a/src/custom/theme/styled.d.ts b/src/custom/theme/styled.d.ts
index afa07fee0..207d110b6 100644
--- a/src/custom/theme/styled.d.ts
+++ b/src/custom/theme/styled.d.ts
@@ -10,6 +10,7 @@ export interface Colors extends ColorsUniswap {
greenShade: Color
blueShade: Color
blueShade2: Color
+ blueShade3: Color
success: Color
danger: Color
pending: Color