From 24e498808eb64213c0d9f5123bf132e468b54090 Mon Sep 17 00:00:00 2001 From: esaminu Date: Wed, 2 Mar 2022 01:18:26 +0400 Subject: [PATCH] feat: add new claim confirm modal --- .../src/components/common/modal/Style.css.js | 9 + .../staking/components/ClaimConfirmModal.js | 128 ++++++++------ .../staking/components/TokenStakeRewards.js | 158 ++++++++++++++++++ .../src/components/wallet/TokenAmount.js | 7 +- .../selectNEARAsTokenWithMetadata.js | 2 +- .../frontend/src/translations/en.global.json | 6 +- 6 files changed, 253 insertions(+), 57 deletions(-) create mode 100644 packages/frontend/src/components/staking/components/TokenStakeRewards.js diff --git a/packages/frontend/src/components/common/modal/Style.css.js b/packages/frontend/src/components/common/modal/Style.css.js index 37ea95f175..e8788b639d 100644 --- a/packages/frontend/src/components/common/modal/Style.css.js +++ b/packages/frontend/src/components/common/modal/Style.css.js @@ -23,6 +23,15 @@ const Style = styled.div` }}px; margin: 40px auto; + &.slim { + padding: 0; + border-radius: 16px; + .modal { + padding: 0; + border-radius: 16px; + } + } + &.fade-in { opacity: 1; transition: 0.3s; diff --git a/packages/frontend/src/components/staking/components/ClaimConfirmModal.js b/packages/frontend/src/components/staking/components/ClaimConfirmModal.js index c509a64411..fff3ddd3ed 100644 --- a/packages/frontend/src/components/staking/components/ClaimConfirmModal.js +++ b/packages/frontend/src/components/staking/components/ClaimConfirmModal.js @@ -1,26 +1,27 @@ import React from 'react'; import { Translate } from 'react-localize-redux'; +import { useSelector } from 'react-redux'; import { Textfit } from 'react-textfit'; import styled from 'styled-components'; +import selectNEARAsTokenWithMetadata from '../../../redux/crossStateSelectors/selectNEARAsTokenWithMetadata'; import FormButton from '../../common/FormButton'; import Modal from '../../common/modal/Modal'; import TokenAmount from '../../wallet/TokenAmount'; -import ValidatorBox from './ValidatorBox'; +import TokenStakeRewards from './TokenStakeRewards'; const Container = styled.div` display: flex; flex-direction: column; align-items: center; text-align: center; - padding-top: 40px; + background: #FAFAFA; h2 { - color: #24272a !important; - } - - @media (min-width: 500px) { - padding: 40px 25px; + font-size: 16px; + font-weight: 500; + color: #72727A !important; + padding: 51px 8px 8px 8px; } .validator-box { @@ -45,40 +46,24 @@ const Container = styled.div` } .stake-amount { - color: #24272a; - font-weight: 500; - margin: 40px 0 !important; + color: #111618; + font-weight: 900; + margin-top: 4px !important; + font-size: 25px; .fiat-amount { font-size: 14px; } } - .green { - margin-top: 50px !important; - width: 100%; - max-width: 400px; - } - - .link { - margin-top: 30px !important; - } - - .ledger-disclaimer { - font-style: italic; - margin-top: 50px; - max-width: 400px; - } - .divider { width: 100%; border-top: 1px solid #F2F2F2; position: relative; - margin-bottom: 40px; - max-width: 400px; + margin: 50px 0px; div { - background-color: white; + background-color: #FAFAFA; padding: 0 10px; position: absolute; top: 50%; @@ -88,9 +73,38 @@ const Container = styled.div` } } + .action-buttons { + width: 100%; + display: flex; + padding: 22px 11px 0px 11px; + + .action-button { + flex: 1; + margin: 18px 4px; + } + + .gray { + background: #F0F0F1; + color: #0072CE; + border-width: 0px; + } + } + + .token-whitelist-disclaimer { + width: 100%; + margin-top: 15px; + padding: 12px; + font-size: 12px; + font-weight: 500; + text-align: left; + color: #995200; + background: #FFECD6; + border-radius: 4px; + } `; -const ClaimConfirmModal = ({ open, onClose, onConfirm, validator, loading, title, disclaimer, label, farm }) => { +const ClaimConfirmModal = ({ open, onClose, onConfirm, validator, loading, title, label, farm }) => { + const NEARAsTokenWithMetadata = useSelector(selectNEARAsTokenWithMetadata); const { onChainFTMetadata, fiatValueMetadata, @@ -103,7 +117,8 @@ const ClaimConfirmModal = ({ open, onClose, onConfirm, validator, loading, title id='stake-confirm-modal' isOpen={open} onClose={onClose} - closeButton='desktop' + modalClass='slim' + modalSize='sm' >

@@ -118,27 +133,38 @@ const ClaimConfirmModal = ({ open, onClose, onConfirm, validator, loading, title /> {label &&
} - - {disclaimer &&
} - onConfirm(contractName)} - data-test-id="confirmStakeOnModalButton" - > - - - - - +
+
+ +
+
+
+ + + + onConfirm(contractName)} + color='blue action-button' + data-test-id="confirmStakeOnModalButton" + > + + +
); diff --git a/packages/frontend/src/components/staking/components/TokenStakeRewards.js b/packages/frontend/src/components/staking/components/TokenStakeRewards.js new file mode 100644 index 0000000000..fdf44e9177 --- /dev/null +++ b/packages/frontend/src/components/staking/components/TokenStakeRewards.js @@ -0,0 +1,158 @@ +import React from 'react'; +import { Translate } from 'react-localize-redux'; +import styled from 'styled-components'; + +import { EXPLORER_URL } from '../../../config'; +import TokenIcon from '../../send/components/TokenIcon'; +import TokenAmount from '../../wallet/TokenAmount'; + + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + box-shadow: 0px 54px 80px rgba(0, 0, 0, 0.03), 0px 12.0616px 17.869px rgba(0, 0, 0, 0.0178832), 0px 3.59106px 5.32008px rgba(0, 0, 0, 0.0121168); + border-radius: 8px; + width: 343px; + height: 234px; + + .token-info { + display: flex; + align-items: center; + padding: 16px; + width: 100%; + + .elipse { + width: 8px; + height: 8px; + background-color: #4DD5A6; + border-radius: 50%; + display: inline-block; + margin-right: 6px; + } + + .icon { + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + margin-right: 16px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: 50%; + align-self: center; + + img, svg { + height: 32px; + width: 32px; + } + } + + .symbol { + font-weight: 700; + font-size: 16px; + color: #24272a; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + margin-right: 10px; + + + a { + color: inherit; + } + } + } + + .divider { + margin: 0 !important; + } + + .stake-box { + display: flex; + flex-direction: column; + width: 100%; + padding: 24px 16px 0px 16px; + + .title { + font-size: 14px; + font-weight: 500; + text-align: left; + color: #A2A2A8; + margin-bottom: 4px; + } + + .balance { + font-size: 16px; + font-weight: 700; + text-align: left; + color: #000000; + } + + .reward { + color: #00C08B; + } + + } + +`; + + +const TokenStakeRewards = ({earnedToken, stakedToken}) => { + return ( + +
+
+
+ +
+ {earnedToken.contractName ? + + e.stopPropagation()} + target='_blank' + rel='noopener noreferrer' + > + {earnedToken.contractName} + + + : + + {earnedToken.onChainFTMetadata?.symbol} + + } +
+
+
+
+ +
+ +
+
+
+ +
+ +
+ + ); +}; + +export default TokenStakeRewards; diff --git a/packages/frontend/src/components/wallet/TokenAmount.js b/packages/frontend/src/components/wallet/TokenAmount.js index a9d7b0b355..730eb6448e 100644 --- a/packages/frontend/src/components/wallet/TokenAmount.js +++ b/packages/frontend/src/components/wallet/TokenAmount.js @@ -35,17 +35,18 @@ const TokenAmount = ({ withSymbol = false, className, showFiatAmount = true, - 'data-test-id': testId + 'data-test-id': testId, + balancePrefix = '' }) => { const tokenBalance = formatTokenAmount(balance, onChainFTMetadata?.decimals, FRAC_DIGITS); const tokenBalanceToView = balance && formatToken(balance, onChainFTMetadata?.decimals); const fiatAmount = (tokenBalance && fiatValueMetadata?.usd) && (tokenBalance * +fiatValueMetadata.usd).toFixed(2); return ( -
+
{balance - ? tokenBalanceToView + ? balancePrefix + tokenBalanceToView : } {withSymbol ? ` ${onChainFTMetadata?.symbol}` : null} diff --git a/packages/frontend/src/redux/crossStateSelectors/selectNEARAsTokenWithMetadata.js b/packages/frontend/src/redux/crossStateSelectors/selectNEARAsTokenWithMetadata.js index 3b101fc100..fd2bbae988 100644 --- a/packages/frontend/src/redux/crossStateSelectors/selectNEARAsTokenWithMetadata.js +++ b/packages/frontend/src/redux/crossStateSelectors/selectNEARAsTokenWithMetadata.js @@ -7,7 +7,7 @@ export default createSelector( [selectAvailableBalance, selectNearTokenFiatValueUSD], (balanceAvailable, usd) => ({ balance: balanceAvailable || '', - onChainFTMetadata: { symbol: 'NEAR' }, + onChainFTMetadata: { symbol: 'NEAR', decimals: 24 }, coingeckoMetadata: { usd }, }) ); diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json index 8a9fe20e6c..38028cf580 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -1380,11 +1380,13 @@ "validator": { "apy": "APY", "button": "Stake With Validator", - "claimFarmRewards": "Сlaim you farm rewards", + "claimFarmRewards": "You are claiming", + "activeStake": "Active Stake", + "rewards": "Rewards", "errorClaimRewards": "Something went wrong during claiming your farm rewards. Please, try again later", "desc": "This is the fee paid to the validator to stake on your behalf. This fee is only charged on your rewards.", "fee": "Validator Fee", - "notWhitelistedWarning": "This token isn't whitelisted by ref-finance. Make sure you research this token!", + "notWhitelistedWarning": "This token has not been whitelisted. Proceed at your own risk.", "title": "Validator:
${validator}", "unstake": "You are unstaking", "withdraw": "You are withdrawing",