chore: Update staking farm related copy

packages/frontend/src/components/staking/components/BalanceBox.js

@@ -1,7 +1,7 @@
 import BN from 'bn.js';
 import React from 'react';
 import { Translate } from 'react-localize-redux';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import classNames from '../../../utils/classNames';
 import Balance from '../../common/balance/Balance';
@@ -11,7 +11,9 @@ import TokenIcon from '../../send/components/TokenIcon';
 import TokenAmount from '../../wallet/TokenAmount';
 
 const Container = styled.div`
-    border-bottom: 2px solid #F2F2F2;
+    ${props => !props.hideBorder && css`
+        border-bottom: 2px solid #F2F2F2;
+    `}
     padding: 15px 0;
     display: flex;
 
@@ -25,7 +27,7 @@ const Container = styled.div`
         color: #24272a;
         font-size: 16px;
         font-weight: 700;
-        
+
         .fiat-amount {
             font-size: 14px;
             font-weight: 400;
@@ -39,7 +41,7 @@ const Container = styled.div`
         color: #6E7073;
         display: flex;
         align-items: center;
-        
+
         .tooltip {
             margin-bottom: -1px;
         }
@@ -77,6 +79,7 @@ const Container = styled.div`
 
     .token-balance {
         display: flex;
+
         .icon {
             width: 32px;
             height: 32px;
@@ -90,7 +93,7 @@ const Container = styled.div`
             border-radius: 50%;
             box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
             align-self: center;
-    
+
             img, svg {
                 height: 32px;
                 width: 32px;
@@ -110,15 +113,19 @@ export default function BalanceBox({
     disclaimer,
     linkTo,
     buttonTestId,
-    balanceTestId
+    balanceTestId,
+    hideBorder = false
 }) {
     return (
-        <Container className='balance-box'>
+        <Container className='balance-box' hideBorder={hideBorder}>
             <div className='left'>
-                <div className='title'>
-                    <Translate id={title} />
-                    <Tooltip translate={info}/>
-                </div>
+                {
+                    (title || info) &&
+                    <div className='title'>
+                        {title && <Translate id={title}/>}
+                        {info && <Tooltip translate={info}/>}
+                    </div>
+                }
                 <div className='token-balance'>
                     <div className='icon'>
                         <TokenIcon symbol={token.onChainFTMetadata?.symbol} icon={token.onChainFTMetadata?.icon}/>
@@ -139,24 +146,24 @@ export default function BalanceBox({
                         />
                     )}
                 </div>
-                
+
                 {disclaimer &&
-                    <div className='withdrawal-disclaimer'>
-                        <Translate id={disclaimer} />
-                    </div>
+                <div className='withdrawal-disclaimer'>
+                    <Translate id={disclaimer}/>
+                </div>
                 }
             </div>
             {button && (onClick || linkTo) &&
-                <FormButton
-                    data-test-id={buttonTestId}
-                    disabled={new BN(token.balance).isZero() || loading}
-                    onClick={onClick}
-                    linkTo={linkTo}
-                    className={classNames(['small', buttonColor])}
-                >
-                    <Translate id={button} />
-                </FormButton>
+            <FormButton
+                data-test-id={buttonTestId}
+                disabled={new BN(token.balance).isZero() || loading}
+                onClick={onClick}
+                linkTo={linkTo}
+                className={classNames(['small', buttonColor])}
+            >
+                <Translate id={button}/>
+            </FormButton>
             }
         </Container>
     );
-}
+}

packages/frontend/src/components/staking/components/Validator.js

@@ -18,6 +18,40 @@ import StakingFee from './StakingFee';
 
 const { fetchToken } = tokensActions;
 
+const renderFarmUi = ({ farmList, contractMetadataByContractId, isFarmListLoading }) => {
+    if(isFarmListLoading) {
+        // eslint-disable-next-line jsx-a11y/heading-has-content
+        return <h1 className="animated-dots"/>;
+    }
+
+    return farmList.map(({ token_id, balance }, i) => {
+        const currentTokenContractMetadata = contractMetadataByContractId[token_id];
+
+        if (!currentTokenContractMetadata) {
+            return;
+        }
+
+        return (
+            <BalanceBox
+                key={token_id}
+                token={{
+                    onChainFTMetadata: currentTokenContractMetadata,
+                    coingeckoMetadata: {},
+                    balance,
+                    contractName: token_id,
+                }}
+                // onClick={() => {
+                //     // TODO claim accrued rewards and redirect home where tokens will be fetched
+                //     return validator.contract.claim({token_id}).then(() => dispatch(redirectTo('/')));
+                // }}
+                button="staking.balanceBox.farm.button"
+                buttonColor='gray-red'
+                hideBorder={farmList.length > 1 && i < farmList.length}
+            />
+        );
+    });
+};
+
 export default function Validator({
     match,
     validator,
@@ -28,29 +62,39 @@ export default function Validator({
 }) {
     const [confirm, setConfirm] = useState(null);
     const [farmList, setFarmList] = useState([]);
+    const [isFarmListLoading, setIsFarmListLoading] = useState(false);
     const nearAsFT = useNEARAsTokenWithMetadata();
     const accountId = useSelector(selectAccountId);
-    const contractMetadata = useSelector(selectAllContractMetadata);
+    const contractMetadataByContractId = useSelector(selectAllContractMetadata);
 
     const dispatch = useDispatch();
     const stakeNotAllowed = !!selectedValidator && selectedValidator !== match.params.validator && !!currentValidators.length;
     const showConfirmModal = confirm === 'withdraw';
+    const stakingPoolHasFarms = validator && validator.version === ValidatorVersion[PROJECT_VALIDATOR_VERSION];
+
 
     useEffect(() => {
         const getFarms = async () => {
-            const farms = await validator.contract.get_farms({from_index: 0, limit: 300});
-            setFarmList(await Promise.all(farms.map(({ token_id }, i) => {
-                dispatch(fetchToken({contractName: token_id}));
-                return validator.contract
-                    .get_unclaimed_reward({ account_id: accountId, farm_id: i })
-                    .catch(() => "0")
-                    .then((balance) => ({ token_id, balance, farm_id: i }));
-            })));
+            setIsFarmListLoading(true);
+
+            try {
+                const farms = await validator.contract.get_farms({ from_index: 0, limit: 300 });
+
+                const list = await Promise.all(farms.map(({ token_id }, i) => {
+                    dispatch(fetchToken({ contractName: token_id }));
+                    return validator.contract
+                        .get_unclaimed_reward({ account_id: accountId, farm_id: i })
+                        .catch(() => "0")
+                        .then((balance) => ({ token_id, balance, farm_id: i }));
+                }));
+
+                setFarmList(list);
+            } finally {
+                setIsFarmListLoading(false);
+            }
         };
-        if(validator && validator.version === ValidatorVersion[PROJECT_VALIDATOR_VERSION]) {
-            getFarms();
-        }
-    },[validator]);
+        if (stakingPoolHasFarms) { getFarms(); }
+    }, [validator, stakingPoolHasFarms, accountId]);
 
     const handleStakeAction = async () => {
         if (showConfirmModal && !loading) {
@@ -79,7 +123,7 @@ export default function Validator({
             </h1>
             <FormButton
                 linkTo={`/staking/${match.params.validator}/stake`}
-                disabled={(stakeNotAllowed || !validator) ? true : false}
+                disabled={(stakeNotAllowed || !validator)}
                 trackingId="STAKE Click stake with validator button"
                 data-test-id="validatorPageStakeButton"
             >
@@ -105,26 +149,9 @@ export default function Validator({
                         title='staking.balanceBox.unclaimed.title'
                         info='staking.balanceBox.unclaimed.info'
                         token={{...nearAsFT, balance: validator.unclaimed || '0'}}
+                        hideBorder={(stakingPoolHasFarms && isFarmListLoading) || (!isFarmListLoading && farmList.length > 0)}
                     />
-                    {farmList.map(({ token_id, balance }) => (
-                            <BalanceBox
-                                key={token_id}
-                                title="staking.balanceBox.farm.title"
-                                info="staking.balanceBox.farm.info"
-                                token={{
-                                    onChainFTMetadata: contractMetadata[token_id],
-                                    coingeckoMetadata: {},
-                                    balance,
-                                    contractName: token_id,
-                                }}
-                                // onClick={() => {
-                                //     // TODO claim accrued rewards and redirect home where tokens will be fetched
-                                //     return validator.contract.claim({token_id}).then(() => dispatch(redirectTo('/')));
-                                // }}
-                                button="staking.balanceBox.farm.button"
-                                buttonColor='gray-red'
-                            />
-                    ))}
+                    {renderFarmUi({ farmList, contractMetadataByContractId, isFarmListLoading })}
                     <BalanceBox
                         title='staking.balanceBox.pending.title'
                         info='staking.balanceBox.pending.info'
@@ -159,4 +186,4 @@ export default function Validator({
             }
         </>
     );
-}
+}

packages/frontend/src/components/staking/components/ValidatorBox.js

@@ -157,7 +157,6 @@ export default function ValidatorBox({
         }
     };
     const isProjectValidator = validator.version === ValidatorVersion[PROJECT_VALIDATOR_VERSION];
-    console.log(isProjectValidator, isProjectValidator && validator);
     return (
         <Container
             className='validator-box'
@@ -180,10 +179,9 @@ export default function ValidatorBox({
                         <span>{fee}% <Translate id='staking.validatorBox.fee' /> - </span>
                         <span>
                             {
-                                active ?
-                                    <span className="active"> <Translate id='staking.validatorBox.state.active' /></span>
-                                    :
-                                    <span className="inactive"> <Translate id='staking.validatorBox.state.inactive' /></span>
+                                active
+                                    ? <span className="active"> <Translate id='staking.validatorBox.state.active' /></span>
+                                    : <span className="inactive"> <Translate id='staking.validatorBox.state.inactive' /></span>
                             }
                         </span>
                     </div>

packages/frontend/src/translations/en.global.json

@@ -1227,8 +1227,7 @@
             },
             "farm": {
                 "button": "Claim",
-                "info": "This is project validator. You’ll get the farming reward while staking on it.",
-                "title": "Total token earned"
+                "info": "This validator grants staking rewards in a token other than NEAR."
             },
             "pending": {
                 "info": "These tokens have been unstaked, but are not yet ready to withdraw. Tokens are ready to withdraw 52 to 65 hours after unstaking.",
@@ -1240,7 +1239,7 @@
                 "title": "Total amount staked"
             },
             "unclaimed": {
-                "info": "Rewards that have been earned, but not withdrawn. Rewards earned are automatically restaked, which means your Total Amount Staked automatically increases over time, and your rewards are <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>compounding</a>.",
+                "info": "Rewards that have been earned, but not withdrawn. NEAR token rewards are  <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>compounding</a> and are automatically re-staked.",
                 "title": "Rewards earned",
                 "unavailable": {
                     "cta": "Learn More",

packages/frontend/src/translations/pt.global.json

@@ -1189,8 +1189,7 @@
             },
             "farm": {
                 "button": "Claim",
-                "info": "This is project validator. You’ll get the farming reward while staking on it.",
-                "title": "Total token earned"
+                "info": "This validator grants staking rewards in a token other than NEAR."
             },
             "pending": {
                 "info": "Esses tokens foram removidos de stake, mas ainda não estão disponíveis para serem sacados. Tokens ficam disponíveis entre 52 a 65 horas após a remoção.",
@@ -1202,7 +1201,7 @@
                 "title": "Quantidade total em stake"
             },
             "unclaimed": {
-                "info": "Recompensas que foram ganhas, mas não retiradas. Recompensas obtidas são automaticamente colocadas em stake, o que significa que sua quantidade total acumulada aumenta automaticamente ao longo do tempo, e suas recompensas estão <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>crescendo</a>.",
+                "info": "Rewards that have been earned, but not withdrawn. NEAR token rewards are  <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>compounding</a> and are automatically re-staked.",
                 "title": "Recompensas ganhas",
                 "unavailable": {
                     "cta": "Saber mais",

packages/frontend/src/translations/ru.global.json

@@ -1050,8 +1050,7 @@
             },
             "farm": {
                 "button": "Claim",
-                "info": "This is project validator. You’ll get the farming reward while staking on it.",
-                "title": "Total token earned"
+                "info": "This validator grants staking rewards in a token other than NEAR."
             },
             "pending": {
                 "info": "Эти токены сняты со стейкинга, но еще не могут быть выведены. Токенам требуется от 52 до 65 часов на вывод со стейкинга.",
@@ -1063,7 +1062,7 @@
                 "title": "Общий размер стейкинга"
             },
             "unclaimed": {
-                "info": "Награды, которые были заработаны, но еще не были выведены. Незатребованные награды автоматически отправляются в рестейкинг, что означает автоматическое увеличение общего размера вашего стейкинга по прошествии времени, а ваши награды увечиваются за счет <a target='_blank' rel='noopener noreferrer' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>начисления сложных процентов</a>.",
+                "info": "Rewards that have been earned, but not withdrawn. NEAR token rewards are  <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>compounding</a> and are automatically re-staked.",
                 "title": "Незатребованные награды",
                 "unavailable": {
                     "cta": "Подробнее",

packages/frontend/src/translations/vi.global.json

@@ -1119,8 +1119,7 @@
             },
             "farm": {
                 "button": "Claim",
-                "info": "This is project validator. You’ll get the farming reward while staking on it.",
-                "title": "Total token earned"
+                "info": "This validator grants staking rewards in a token other than NEAR."
             },
             "pending": {
                 "info": "Các token này đã được unstake, nhưng vẫn chưa sẵn sàng để rút. Việc rút sẽ khả dụng từ 52 đến 65 giờ sau khi unstake.",
@@ -1132,7 +1131,7 @@
                 "title": "Tổng số tiền đã stake"
             },
             "unclaimed": {
-                "info": "Phần thưởng đã kiếm được, nhưng không được rút. Phần thưởng kiếm được sẽ tự động được stake, có nghĩa là tổng số tiền đã stake của bạn tự động tăng lên theo thời gian, và phần thưởng của bạn là <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>lãi kép</a>.",
+                "info": "Rewards that have been earned, but not withdrawn. NEAR token rewards are  <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>compounding</a> and are automatically re-staked.",
                 "title": "Phần thưởng đã kiếm được",
                 "unavailable": {
                     "cta": "Tìm hiểu thêm",

packages/frontend/src/translations/zh-hans.global.json

@@ -1190,8 +1190,7 @@
             },
             "farm": {
                 "button": "Claim",
-                "info": "This is project validator. You’ll get the farming reward while staking on it.",
-                "title": "Total token earned"
+                "info": "This validator grants staking rewards in a token other than NEAR."
             },
             "pending": {
                 "info": "这些通证并未质押，但还不可提现。通常在赎回质押后 36 - 48 小时变为可提现。",
@@ -1203,7 +1202,7 @@
                 "title": "质押总数"
             },
             "unclaimed": {
-                "info": "已赚得的奖励并未提现。未提现奖励将自动质押，这意味着你的质押总数将不断增加，奖励是<a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>复利</a>计算的。",
+                "info": "Rewards that have been earned, but not withdrawn. NEAR token rewards are  <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>compounding</a> and are automatically re-staked.",
                 "title": "未提现奖励",
                 "unavailable": {
                     "cta": "了解更多",

packages/frontend/src/translations/zh-hant.global.json

@@ -1190,8 +1190,7 @@
             },
             "farm": {
                 "button": "Claim",
-                "info": "This is project validator. You’ll get the farming reward while staking on it.",
-                "title": "Total token earned"
+                "info": "This validator grants staking rewards in a token other than NEAR."
             },
             "pending": {
                 "info": "這些通證並未質押，但還不可提現。通常在贖回質押後 36 - 48 小時變為可提現。",
@@ -1203,7 +1202,7 @@
                 "title": "質押總數"
             },
             "unclaimed": {
-                "info": "已賺得的獎勵並未提現。未提現獎勵將自動質押，這意味著你的質押總數將不斷增加，獎勵是<a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>復利</a>計算的。",
+                "info": "Rewards that have been earned, but not withdrawn. NEAR token rewards are  <a target='_blank' href='https://www.investopedia.com/terms/c/compoundinterest.asp'>compounding</a> and are automatically re-staked.",
                 "title": "未提現獎勵",
                 "unavailable": {
                     "cta": "了解更多",