diff --git a/src/custom/assets/cow-swap/CowError.png b/src/custom/assets/cow-swap/CowError.png index ef47e71a6..fa7ec2e90 100644 Binary files a/src/custom/assets/cow-swap/CowError.png and b/src/custom/assets/cow-swap/CowError.png differ diff --git a/src/custom/assets/cow-swap/attention.svg b/src/custom/assets/cow-swap/attention.svg index 415f410d8..014ae198f 100644 --- a/src/custom/assets/cow-swap/attention.svg +++ b/src/custom/assets/cow-swap/attention.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/check.svg b/src/custom/assets/cow-swap/check.svg index 76d865c76..a2114f9aa 100644 --- a/src/custom/assets/cow-swap/check.svg +++ b/src/custom/assets/cow-swap/check.svg @@ -1,5 +1 @@ - - - - - + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/cow-404.png b/src/custom/assets/cow-swap/cow-404.png index 3b18c1176..93a5d57a6 100644 Binary files a/src/custom/assets/cow-swap/cow-404.png and b/src/custom/assets/cow-swap/cow-404.png differ diff --git a/src/custom/assets/cow-swap/cow-load.gif b/src/custom/assets/cow-swap/cow-load.gif index 6403c5982..155d83183 100644 Binary files a/src/custom/assets/cow-swap/cow-load.gif and b/src/custom/assets/cow-swap/cow-load.gif differ diff --git a/src/custom/assets/cow-swap/cows-side-by-side.png b/src/custom/assets/cow-swap/cows-side-by-side.png index e14aefee8..e31bfb386 100644 Binary files a/src/custom/assets/cow-swap/cows-side-by-side.png and b/src/custom/assets/cow-swap/cows-side-by-side.png differ diff --git a/src/custom/assets/cow-swap/feedback.svg b/src/custom/assets/cow-swap/feedback.svg index ad7b84a8a..f38268652 100644 --- a/src/custom/assets/cow-swap/feedback.svg +++ b/src/custom/assets/cow-swap/feedback.svg @@ -1,3 +1 @@ - + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/gno.png b/src/custom/assets/cow-swap/gno.png index 94c61d6ef..f6e1924f7 100644 Binary files a/src/custom/assets/cow-swap/gno.png and b/src/custom/assets/cow-swap/gno.png differ diff --git a/src/custom/assets/cow-swap/network-gnosis-chain-logo.svg b/src/custom/assets/cow-swap/network-gnosis-chain-logo.svg index 36d7d8532..bf49d1310 100644 --- a/src/custom/assets/cow-swap/network-gnosis-chain-logo.svg +++ b/src/custom/assets/cow-swap/network-gnosis-chain-logo.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/network-mainnet-logo.svg b/src/custom/assets/cow-swap/network-mainnet-logo.svg index 1834dcc1f..507f41089 100644 --- a/src/custom/assets/cow-swap/network-mainnet-logo.svg +++ b/src/custom/assets/cow-swap/network-mainnet-logo.svg @@ -1,9 +1 @@ - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/network-rinkeby-logo.svg b/src/custom/assets/cow-swap/network-rinkeby-logo.svg index 116b1ccf0..f2c9b10e8 100644 --- a/src/custom/assets/cow-swap/network-rinkeby-logo.svg +++ b/src/custom/assets/cow-swap/network-rinkeby-logo.svg @@ -1,9 +1 @@ - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/ninja-cow.png b/src/custom/assets/cow-swap/ninja-cow.png index c440dad4b..f8d740ed3 100644 Binary files a/src/custom/assets/cow-swap/ninja-cow.png and b/src/custom/assets/cow-swap/ninja-cow.png differ diff --git a/src/custom/assets/cow-swap/order-check.svg b/src/custom/assets/cow-swap/order-check.svg index e509ff46c..b4857922f 100644 --- a/src/custom/assets/cow-swap/order-check.svg +++ b/src/custom/assets/cow-swap/order-check.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/order-cross.svg b/src/custom/assets/cow-swap/order-cross.svg index 1f5c556c4..ea48e4f1d 100644 --- a/src/custom/assets/cow-swap/order-cross.svg +++ b/src/custom/assets/cow-swap/order-cross.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/order-open.svg b/src/custom/assets/cow-swap/order-open.svg index 59c71048b..b986a9302 100644 --- a/src/custom/assets/cow-swap/order-open.svg +++ b/src/custom/assets/cow-swap/order-open.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/order-presignature-pending.svg b/src/custom/assets/cow-swap/order-presignature-pending.svg index eea538963..cc90f5ae4 100644 --- a/src/custom/assets/cow-swap/order-presignature-pending.svg +++ b/src/custom/assets/cow-swap/order-presignature-pending.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/transaction-arrows.svg b/src/custom/assets/cow-swap/transaction-arrows.svg index 808f05d8b..ff78a4f56 100644 --- a/src/custom/assets/cow-swap/transaction-arrows.svg +++ b/src/custom/assets/cow-swap/transaction-arrows.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/transaction-confirmed.svg b/src/custom/assets/cow-swap/transaction-confirmed.svg index 916c6f0e9..a18295260 100644 --- a/src/custom/assets/cow-swap/transaction-confirmed.svg +++ b/src/custom/assets/cow-swap/transaction-confirmed.svg @@ -1,3 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/custom/assets/cow-swap/usdc.png b/src/custom/assets/cow-swap/usdc.png index ae30bd6bc..45a702084 100644 Binary files a/src/custom/assets/cow-swap/usdc.png and b/src/custom/assets/cow-swap/usdc.png differ diff --git a/src/custom/assets/cow-swap/xdai.png b/src/custom/assets/cow-swap/xdai.png new file mode 100644 index 000000000..3050b449f Binary files /dev/null and b/src/custom/assets/cow-swap/xdai.png differ diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index 80dd58158..e01e2acea 100644 --- a/src/custom/pages/Claim/ClaimsTable.tsx +++ b/src/custom/pages/Claim/ClaimsTable.tsx @@ -76,8 +76,8 @@ const ClaimsTableRow = ({ {' '} - {!isFree && } - + {!isFree && } + {isFree ? ClaimType[type] : 'Buy vCOW'} {!isFree && with {currencyAmount?.currency?.symbol}} diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx index a462533ef..48a11028b 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx @@ -1,6 +1,6 @@ import { ClaimType } from 'state/claim/hooks' import { calculatePercentage } from 'state/claim/hooks/utils' -import { TokenLogo } from 'pages/Claim/styled' +import { TokenLogo, InvestAvailableBar } from 'pages/Claim/styled' import { ClaimWithInvestmentData } from 'pages/Claim/types' import CowProtocolLogo from 'components/CowProtocolLogo' import { formatSmart } from 'utils/format' @@ -23,11 +23,16 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { {isFree ? ( - {ClaimType[type]} + <> + + + {ClaimType[type]} + + ) : ( <> - - + + Buy vCOW with {symbol} @@ -37,18 +42,22 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { + {formatSmart(vCowAmount) || '0'} vCOW + {!isFree && ( Investment amount:{' '} - {formattedCost} {symbol} ({percentage}% of available investing opportunity) + {formattedCost} {symbol} + + {Number(percentage) > 0 && Number(percentage) < 100 && ( + + Note: You will not be able to invest the remaining {100 - Number(percentage)}% after claiming. + + )} )} - - Amount to receive: - {formatSmart(vCowAmount) || '0'} vCOW - diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx index b7af55607..a26acf352 100644 --- a/src/custom/pages/Claim/InvestmentFlow/index.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/index.tsx @@ -4,6 +4,7 @@ import { InvestFlow, InvestContent, InvestFlowValidation, + InvestSummaryTable, StepIndicator, Steps, ClaimTable, @@ -155,23 +156,12 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro {/* Invest flow: Step 2 > Review summary */} {investFlowStep === 2 ? ( - - - Claiming with account: - {account} (connected account) - - - {' '} - Receiving account: - {activeClaimAccount} - - - + - + @@ -180,9 +170,21 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, ...tokenAppro ))} -
Claim typeAccount & vCOW amountAmount to receive Details
+ + + + Claiming with account: + {account} (connected account) + + + {' '} + Receiving account: + {activeClaimAccount} + + +

Ready to claim your vCOW?

What will happen? By sending this Ethereum transaction, you will be investing tokens from the diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts index 6e5e61625..080e4723e 100644 --- a/src/custom/pages/Claim/styled.ts +++ b/src/custom/pages/Claim/styled.ts @@ -729,11 +729,6 @@ export const InvestContent = styled.div` display: flex; flex-flow: column wrap; - ${TokenLogo}, - ${Icon} { - border: 4px solid ${({ theme }) => theme.blueShade3}; - } - ${ClaimTable} { table { display: grid; @@ -754,7 +749,6 @@ export const InvestContent = styled.div` font-size: inherit; display: flex; flex-flow: column wrap; - gap: 3px; > i { font-style: normal; @@ -768,23 +762,33 @@ export const InvestContent = styled.div` tr > td:nth-of-type(1) { flex-flow: row wrap; align-content: center; + gap: 6px; + > span > b, > b { + font-size: 16px; font-weight: bold; } + + > span > i { + font-size: 15px; + } } tr > td:nth-of-type(2) { flex-flow: column wrap; + align-items: flex-start; + align-content: flex-start; justify-content: center; > span { margin: 0; } - > span > i { + > i { font-style: normal; - font-size: inherit; + font-size: 18px; + font-weight: 500; } } @@ -801,6 +805,17 @@ export const InvestContent = styled.div` } ` +export const InvestSummaryTable = styled.table` + ${TokenLogo} { + margin: 0 -28px 0 0; + } + + ${TokenLogo}, + ${Icon} { + border: 2px solid ${({ theme }) => theme.blueShade3}; + } +` + export const StepIndicator = styled.div` display: flex; flex-flow: column wrap; @@ -834,6 +849,11 @@ export const InvestTokenGroup = styled.div` border-radius: 12px; background: ${({ theme }) => theme.blueShade3}; + ${TokenLogo}, + ${Icon} { + border: 4px solid ${({ theme }) => theme.blueShade3}; + } + > div { display: flex; flex-flow: column wrap; @@ -976,33 +996,45 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>` width: 100%; display: flex; position: relative; - height: 10px; + height: 17px; + align-items: center; + justify-content: flex-start; + overflow: hidden; border-radius: 24px; - background: ${({ theme }) => (theme.currencyInput?.background ? theme.currencyInput?.background : theme.bg1)}; + background: ${({ theme }) => theme.bg1}; margin: 6px 0; - padding: 0 36px 0 0; + padding: 0; &::before { content: ''; display: block; - background-color: ${({ theme }) => theme.primary4}; + background: ${({ theme }) => + `linear-gradient(to right, ${transparentize(0.2, theme.primary5)}, ${theme.primary4})`}; height: 100%; border-radius: 24px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; position: absolute; left: 0; top: 0; bottom: 0; - transition: width 0.3s ease-in; + transition: width 0.3s ease-in-out; width: ${({ percentage }) => (percentage ? `${percentage}%` : '0%')}; } &::after { content: ${({ percentage }) => (percentage ? `'${percentage}%'` : '0%')}; - display: inline-block; - position: absolute; - font-size: 13px; - color: ${({ theme }) => theme.primary1}; - left: 100%; + display: block; + font-size: 12px; + color: ${({ theme }) => theme.text1}; + z-index: 1; + height: 100%; + width: ${({ percentage }) => (percentage ? `${percentage}%` : '0%')}; + transition: width 0.3s ease-in-out; + margin: 0; + padding: 1px 4px 0 4px; + min-width: max-content; + text-align: right; } `