From 2c8ba230445d2210d08444b928202a8e779924e6 Mon Sep 17 00:00:00 2001 From: esaminu Date: Thu, 10 Mar 2022 02:06:32 +0400 Subject: [PATCH] fix: UI fixes and feature flag APY --- features/features.d.ts | 1 + features/flags.json | 29 +++++++++++++++++++ .../staking/components/AlertBanner.js | 4 +++ .../staking/components/ClaimConfirmModal.js | 14 +++++---- .../staking/components/TokenStakeRewards.js | 10 +------ .../staking/components/Validator.js | 18 +++++++++--- .../staking/components/ValidatorBox.js | 5 ++-- .../src/components/wallet/TokenAmount.js | 10 ++----- .../frontend/src/translations/en.global.json | 6 ++-- 9 files changed, 66 insertions(+), 31 deletions(-) diff --git a/features/features.d.ts b/features/features.d.ts index f3c98794f8..3f6a74de0e 100644 --- a/features/features.d.ts +++ b/features/features.d.ts @@ -5,4 +5,5 @@ export type Features = { CREATE_IMPLICIT_ACCOUNT: boolean; EXAMPLE_FLAG: boolean; IMPORT_ACCOUNT_WITH_LINK_V2: boolean; + FARMING_VALIDATOR_APY_DISPLAY: boolean; }; diff --git a/features/flags.json b/features/flags.json index c332ccd3a7..4612e75ef4 100644 --- a/features/flags.json +++ b/features/flags.json @@ -85,5 +85,34 @@ "lastEditedBy": "Patrick Tajima", "lastEditedAt": "2022-03-12T01:30:32.577Z" } + }, + "FARMING_VALIDATOR_APY_DISPLAY": { + "createdBy": "esaminu", + "createdAt": "2022-03-09T21:26:58.971Z", + "development": { + "enabled": false, + "lastEditedBy": "esaminu", + "lastEditedAt": "2022-03-09T21:26:58.971Z" + }, + "testnet": { + "enabled": false, + "lastEditedBy": "esaminu", + "lastEditedAt": "2022-03-09T21:26:58.971Z" + }, + "mainnet": { + "enabled": false, + "lastEditedBy": "esaminu", + "lastEditedAt": "2022-03-09T21:26:58.971Z" + }, + "mainnet_STAGING": { + "enabled": false, + "lastEditedBy": "esaminu", + "lastEditedAt": "2022-03-09T21:26:58.971Z" + }, + "testnet_STAGING": { + "enabled": false, + "lastEditedBy": "esaminu", + "lastEditedAt": "2022-03-09T21:26:58.971Z" + } } } diff --git a/packages/frontend/src/components/staking/components/AlertBanner.js b/packages/frontend/src/components/staking/components/AlertBanner.js index fae16e51cc..6869badaef 100644 --- a/packages/frontend/src/components/staking/components/AlertBanner.js +++ b/packages/frontend/src/components/staking/components/AlertBanner.js @@ -21,6 +21,9 @@ const Container = styled.div` } div { + display: flex; + flex-direction: column; + justify-content: center; font-style: italic; margin-left: 20px; font-size: 13px; @@ -34,6 +37,7 @@ const Container = styled.div` margin: 20px 0 0 0 !important; width: auto !important; font-size: 13px !important; + align-self: flex-start; } &.error { diff --git a/packages/frontend/src/components/staking/components/ClaimConfirmModal.js b/packages/frontend/src/components/staking/components/ClaimConfirmModal.js index fff3ddd3ed..77602b7cc6 100644 --- a/packages/frontend/src/components/staking/components/ClaimConfirmModal.js +++ b/packages/frontend/src/components/staking/components/ClaimConfirmModal.js @@ -125,7 +125,7 @@ const ClaimConfirmModal = ({ open, onClose, onConfirm, validator, loading, title -
-
- + {!isWhiteListed ? ( +
+
+ +
-
+ ) : null}
@@ -158,6 +159,7 @@ const ClaimConfirmModal = ({ open, onClose, onConfirm, validator, loading, title 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 index fdf44e9177..6ed104687c 100644 --- a/packages/frontend/src/components/staking/components/TokenStakeRewards.js +++ b/packages/frontend/src/components/staking/components/TokenStakeRewards.js @@ -2,7 +2,6 @@ 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'; @@ -112,14 +111,7 @@ const TokenStakeRewards = ({earnedToken, stakedToken}) => {
{earnedToken.contractName ? - e.stopPropagation()} - target='_blank' - rel='noopener noreferrer' - > - {earnedToken.contractName} - + {earnedToken.contractName} : diff --git a/packages/frontend/src/components/staking/components/Validator.js b/packages/frontend/src/components/staking/components/Validator.js index ecb351a6df..829f430fa5 100644 --- a/packages/frontend/src/components/staking/components/Validator.js +++ b/packages/frontend/src/components/staking/components/Validator.js @@ -1,8 +1,9 @@ import BN from 'bn.js'; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useMemo } from 'react'; import { Translate } from 'react-localize-redux'; import { useDispatch, useSelector } from 'react-redux'; +import { FARMING_VALIDATOR_APY_DISPLAY } from '../../../../../../features'; import { Mixpanel } from '../../../mixpanel'; import { redirectTo } from '../../../redux/actions/account'; import { claimFarmRewards, getValidatorFarmData } from '../../../redux/actions/staking'; @@ -46,7 +47,6 @@ const renderFarmUi = ({ farmList, contractMetadataByContractId, openModal, token fiatValueMetadata, balance, contractName: token_id, - isWhiteListed, }} onClick={() => { openModal({ @@ -59,7 +59,7 @@ const renderFarmUi = ({ farmList, contractMetadataByContractId, openModal, token }} button="staking.balanceBox.farm.button" - hideBorder={farmList.length > 1 && i < farmList.length} + hideBorder={farmList.length > 1 && i < (farmList.length - 1)} /> ); }); @@ -133,6 +133,11 @@ export default function Validator({ const farmList = validatorFarmData?.farmRewards || []; const tokenPriceMetadata = { tokenFiatValues, tokenWhitelist }; + const hasUnwhitelistedTokens = useMemo( + () => + farmList.some(({ token_id }) => !tokenWhitelist.includes(token_id)), + [farmList, tokenWhitelist] + ); const farmAPY = useSelector((state) => selectFarmValidatorAPY(state, {validatorId: validator?.accountId})); @@ -148,6 +153,9 @@ export default function Validator({ /> : null } + {hasUnwhitelistedTokens ? : null}

{validator && } - {isFarmingValidator && } + {FARMING_VALIDATOR_APY_DISPLAY + ? isFarmingValidator && + : null} {validator && !stakeNotAllowed && !pendingUpdateStaking && <> {typeof fee === 'number' &&
- { + {FARMING_VALIDATOR_APY_DISPLAY ? isFarmingValidator && <>   {farmAPY === null @@ -197,7 +198,7 @@ export default function ValidatorBox({ } % -  - } + : null} {fee}% -  { diff --git a/packages/frontend/src/components/wallet/TokenAmount.js b/packages/frontend/src/components/wallet/TokenAmount.js index 730eb6448e..179fda0619 100644 --- a/packages/frontend/src/components/wallet/TokenAmount.js +++ b/packages/frontend/src/components/wallet/TokenAmount.js @@ -1,8 +1,6 @@ import React from 'react'; import { formatTokenAmount, removeTrailingZeros } from '../../utils/amounts'; -import Tooltip from '../common/Tooltip'; -import AlertRoundedIcon from '../svg/AlertRoundedIcon'; const FRAC_DIGITS = 5; @@ -31,7 +29,7 @@ const showFullAmount = (amount, decimals, symbol) => : ''; const TokenAmount = ({ - token: { balance, onChainFTMetadata, fiatValueMetadata, isWhiteListed = true }, + token: { balance, onChainFTMetadata, fiatValueMetadata }, withSymbol = false, className, showFiatAmount = true, @@ -55,17 +53,13 @@ const TokenAmount = ({
- { fiatAmount + {fiatAmount ? `≈ $${fiatAmount} USD` : '— USD' } - {!isWhiteListed && - - }
}
diff --git a/packages/frontend/src/translations/en.global.json b/packages/frontend/src/translations/en.global.json index 38028cf580..7492e07de3 100644 --- a/packages/frontend/src/translations/en.global.json +++ b/packages/frontend/src/translations/en.global.json @@ -1373,12 +1373,13 @@ }, "claimSuccess": { "button": "Return to Dashboard", - "desc": "Tokens has successfully been claimed from validator", + "desc": "Tokens have been successfully claimed from the validator", "descTwo": "Your tokens are already available", "title": "Success!" }, "validator": { "apy": "APY", + "claiming": "Claiming", "button": "Stake With Validator", "claimFarmRewards": "You are claiming", "activeStake": "Active Stake", @@ -1386,7 +1387,8 @@ "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 has not been whitelisted. Proceed at your own risk.", + "notWhitelistedTokenWarning": "This token has not been whitelisted by ref-finance. Proceed at your own risk.", + "notWhitelistedValidatorWarning": "Tokens awarded by this validator have not been whitelisted by ref-finance. Proceed at your own risk.", "title": "Validator:
${validator}", "unstake": "You are unstaking", "withdraw": "You are withdrawing",