add loading tokens

near · Jan 19, 2022 · beead3f · beead3f
1 parent e4c5b6f
commit beead3f
Show file tree

Hide file tree

Showing 15 changed files with 227 additions and 60 deletions.
diff --git a/packages/frontend/src/components/staking/components/Staking.js b/packages/frontend/src/components/staking/components/Staking.js
@@ -35,7 +35,7 @@ export default function Staking({
             {multipleAccounts &&
                 <div className='select-account-title'>
                     <Translate id='staking.staking.selectAccount' />
-                    <Tooltip translate='staking.stake.accounts' position='bottom'/>
+                    <Tooltip translate='staking.stake.accounts' position='bottom' />
                 </div>
             }
             {!loading && !loadingDetails &&
@@ -51,8 +51,8 @@ export default function Staking({
                 show={loading || loadingDetails}
                 className='account-loader'
             />
-            <FormButton 
-                disabled={loadingDetails} 
+            <FormButton
+                disabled={loadingDetails}
                 linkTo='/staking/validators'
                 trackingId="STAKE Click stake my tokens button"
                 data-test-id="stakeMyTokensButton"
@@ -77,6 +77,16 @@ export default function Staking({
                         buttonTestId="stakingPageUnstakingButton"
                         balanceTestId="stakingPageTotalStakedAmount"
                     />
+                    <BalanceBox
+                        title='staking.balanceBox.farm.title'
+                        info='staking.balanceBox.farm.info'
+                        amount={totalStaked}
+                        button={new BN(totalStaked).isZero() ? null : 'staking.balanceBox.farm.button'}
+                        linkTo={stakeFromAccount ? `/staking/unstake` : `/staking/${selectedValidator}/unstake`}
+                        buttonColor='gray-blue'
+                        buttonTestId="stakingPageUnstakingButton"
+                        balanceTestId="stakingPageTotalStakedAmount"
+                    />
                     <BalanceBox
                         title='staking.balanceBox.unclaimed.title'
                         info='staking.balanceBox.unclaimed.info'
@@ -103,7 +113,7 @@ export default function Staking({
                 </>
                 : null}
             <h3><Translate id='staking.staking.currentValidators' /></h3>
-            {!loadingDetails 
+            {!loadingDetails
                 ? currentValidators.length
                     ? <ListWrapper>
                         {currentValidators.map((validator, i) =>

diff --git a/packages/frontend/src/components/staking/components/Validator.js b/packages/frontend/src/components/staking/components/Validator.js
@@ -27,14 +27,14 @@ export default function Validator({
 
     const handleStakeAction = async () => {
         if (showConfirmModal && !loading) {
-           await onWithdraw('withdraw', selectedValidator || validator.accountId);
-           setConfirm('done');
+            await onWithdraw('withdraw', selectedValidator || validator.accountId);
+            setConfirm('done');
         }
     };
 
     return (
         <>
-            {stakeNotAllowed 
+            {stakeNotAllowed
                 ? <AlertBanner
                     title='staking.alertBanner.title'
                     button='staking.alertBanner.button'
@@ -48,15 +48,15 @@ export default function Validator({
                     data={{ validator: match.params.validator }}
                 />
             </h1>
-            <FormButton 
-                linkTo={`/staking/${match.params.validator}/stake`} 
+            <FormButton
+                linkTo={`/staking/${match.params.validator}/stake`}
                 disabled={(stakeNotAllowed || !validator) ? true : false}
                 trackingId="STAKE Click stake with validator button"
                 data-test-id="validatorPageStakeButton"
             >
                 <Translate id='staking.validator.button' />
             </FormButton>
-            {validator && <StakingFee fee={validator.fee.percentage}/>}
+            {validator && <StakingFee fee={validator.fee.percentage} />}
             {validator && !stakeNotAllowed && !actionsPending('UPDATE_STAKING') &&
                 <>
                     <BalanceBox
@@ -71,6 +71,18 @@ export default function Validator({
                         buttonColor='gray-red'
                         loading={loading}
                     />
+                    <BalanceBox
+                        title='staking.balanceBox.farm.title'
+                        info='staking.balanceBox.farm.info'
+                        amount={validator.staked || '0'}
+                        onClick={() => {
+                            dispatch(redirectTo(`/staking/${match.params.validator}/claim`));
+                            Mixpanel.track("CLAIM Click claim button");
+                        }}
+                        button='staking.balanceBox.farm.button'
+                        buttonColor='gray-red'
+                        loading={loading}
+                    />
                     <BalanceBox
                         title='staking.balanceBox.unclaimed.title'
                         info='staking.balanceBox.unclaimed.info'
@@ -79,13 +91,13 @@ export default function Validator({
                     <BalanceBox
                         title='staking.balanceBox.pending.title'
                         info='staking.balanceBox.pending.info'
-                        amount={ validator.pending || '0' }
+                        amount={validator.pending || '0'}
                         disclaimer='staking.validator.withdrawalDisclaimer'
                     />
                     <BalanceBox
                         title='staking.balanceBox.available.title'
                         info='staking.balanceBox.available.info'
-                        amount={ validator.available || '0' }
+                        amount={validator.available || '0'}
                         onClick={() => {
                             setConfirm('withdraw');
                             Mixpanel.track("WITHDRAW Click withdraw button");

diff --git a/packages/frontend/src/components/staking/components/ValidatorBox.js b/packages/frontend/src/components/staking/components/ValidatorBox.js
@@ -5,8 +5,10 @@ import styled from 'styled-components';
 
 import { Mixpanel } from '../../../mixpanel/index';
 import { redirectTo } from '../../../redux/actions/account';
+import { PROJECT_VALIDATOR_VERSION, ValidatorVersion } from '../../../utils/constants';
 import Balance from '../../common/balance/Balance';
 import FormButton from '../../common/FormButton';
+import Tooltip from '../../common/Tooltip';
 import ChevronIcon from '../../svg/ChevronIcon';
 import UserIcon from '../../svg/UserIcon';
 
@@ -47,6 +49,8 @@ const Container = styled.div`
         div {
             text-align: left;
             color: #A7A29E;
+            display: flex;
+            flex-direction: row;
             &:first-of-type {
                 color: #24272a;
                 max-width: 165px;
@@ -128,7 +132,7 @@ export default function ValidatorBox({
     style,
     label = false,
     stakeAction,
-    showBalanceInUSD
+    showBalanceInUSD,
 }) {
     const dispatch = useDispatch();
     const { accountId: validatorId, active } = validator;
@@ -152,31 +156,36 @@ export default function ValidatorBox({
             dispatch(redirectTo(`/staking/${validatorId}${stakeAction ? `/${stakeAction}` : ``}`));
         }
     };
-
+    const isProjectValidator = validator.version === ValidatorVersion[PROJECT_VALIDATOR_VERSION];
     return (
-        <Container 
-            className='validator-box' 
+        <Container
+            className='validator-box'
             data-test-id="stakingPageValidatorItem"
-            clickable={clickable && amount ? 'true' : ''} 
-            style={style} 
+            clickable={clickable && amount ? 'true' : ''}
+            style={style}
             onClick={handleClick}
         >
             {label && <div className='with'><Translate id='staking.validatorBox.with' /></div>}
-            <UserIcon background={true}/>
+            <UserIcon background={true} />
             <div className='left'>
                 <div data-test-id="stakingPageValidatorItemName">
                     {validatorId}
+                    {isProjectValidator && <Tooltip translate='staking.balanceBox.farm.info' />}
                 </div>
                 {typeof fee === 'number' &&
-                    <div className="text-left"> 
-                        <span>{fee}% <Translate id='staking.validatorBox.fee' /> - </span>
+                    <div className="text-left">
+                        {
+                            isProjectValidator
+                                ? <span>{fee}% <Translate id='staking.validatorBox.fee' /> - </span>
+                                : <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>
                 }
@@ -185,7 +194,7 @@ export default function ValidatorBox({
                 <div className='right'>
                     {staking && <div><Translate id='staking.validatorBox.staking' /></div>}
                     <div className='amount'>
-                        <Balance amount={amount} showBalanceInUSD={showBalanceInUSD}/>
+                        <Balance amount={amount} showBalanceInUSD={showBalanceInUSD} />
                     </div>
                 </div>
             }

diff --git a/packages/frontend/src/components/staking/components/Validators.js b/packages/frontend/src/components/staking/components/Validators.js
@@ -1,15 +1,25 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Translate } from 'react-localize-redux';
+import { useDispatch } from 'react-redux';
 
+import { actions as tokensActions } from '../../../redux/slices/tokens';
+import { getValidatorRegExp } from '../../../utils/constants';
+import { wallet } from '../../../utils/wallet';
 import ListWrapper from './ListWrapper';
 import ValidatorBox from './ValidatorBox';
+const { fetchToken } = tokensActions;
 
 export default function Validators({ validators, stakeFromAccount }) {
-
+    // const dispatch = useDispatch();
     const [validator, setValidator] = useState('');
-
+    const networkId = wallet.connection.networkId;
+    const validatorPrefix = getValidatorRegExp(networkId);
     const validValidator = validators.map(validator => validator.accountId).includes(validator);
 
+    // useEffect(() => {
+    //     dispatch(fetchToken({ contractName: 'token.solniechniy.testnet', accountId: stakeFromAccount }));
+    // }, []);
+
     return (
         <>
             <h1><Translate id='staking.validators.title' /></h1>
@@ -22,7 +32,7 @@ export default function Validators({ validators, stakeFromAccount }) {
                         placeholder={translate('staking.validators.inputPlaceholder')}
                         value={validator}
                         onChange={e => setValidator(e.target.value)}
-                        autoFocus 
+                        autoFocus
                         spellCheck='false'
                         autoCapitalize='off'
                         data-test-id="stakingSearchForValidator"
@@ -38,12 +48,16 @@ export default function Validators({ validators, stakeFromAccount }) {
                 </div>
             )}
             <ListWrapper>
-                {validators.filter(v => v.accountId.includes(validator)).map((validator, i) => 
-                    <ValidatorBox
-                        key={i}
-                        validator={validator}
-                    />
-                )}
+                {validators.filter(v => v.accountId.includes(validator))
+                    .sort((first, second) =>
+                        (second.accountId.includes(validatorPrefix) - first.accountId.includes(validatorPrefix))
+                    )
+                    .map((validator, i) =>
+                        <ValidatorBox
+                            key={i}
+                            validator={validator}
+                        />
+                    )}
             </ListWrapper>
         </>
     );

diff --git a/packages/frontend/src/redux/actions/staking.js b/packages/frontend/src/redux/actions/staking.js
@@ -10,13 +10,21 @@ import {
 import { getLockupAccountId, getLockupMinBalanceForStorage } from '../../utils/account-with-lockup';
 import { showAlert } from '../../utils/alerts';
 import { setStakingAccountSelected } from '../../utils/localStorage';
-import { 
+import {
+    PROJECT_VALIDATOR_VERSION,
+    ValidatorVersion,
+    MAINNET,
+    getValidatorRegExp,
+    getValidationVersion,
+    TESTNET
+} from '../../utils/constants';
+import {
     STAKING_AMOUNT_DEVIATION,
     MIN_DISPLAY_YOCTO,
     ZERO,
     EXPLORER_DELAY,
     ACCOUNT_DEFAULTS,
-    getStakingDeposits, 
+    getStakingDeposits,
     lockupMethods,
     updateStakedBalance,
     signAndSendTransaction,
@@ -25,12 +33,12 @@ import {
 } from '../../utils/staking';
 import { wallet } from '../../utils/wallet';
 import { WalletError } from '../../utils/walletError';
-import { 
+import {
     selectAccountId,
     selectAccountSlice
 } from '../slices/account';
 import { selectAllAccountsByAccountId } from '../slices/allAccounts';
-import { 
+import {
     selectStakingAccountsMain,
     selectStakingMainAccountId,
     selectStakingLockupAccountId,
@@ -259,12 +267,23 @@ export const { staking } = createActions({
 
                     totalStaked = totalStaked.add(new BN(validator.staked));
                     totalUnclaimed = totalUnclaimed.add(new BN(validator.unclaimed));
+                    const networkId = wallet.connection.provider.connection.url.indexOf(MAINNET) > -1 ? MAINNET : TESTNET;
+
+                    console.log(networkId, validator.accountId);
+                    validator.version = getValidationVersion(networkId, validator.accountId);
                 } catch (e) {
                     if (e.message.indexOf('cannot find contract code') === -1) {
                         console.warn('Error getting data for validator', validator.accountId, e);
                     }
                 }
             }));
+            const projectValidators = validators.filter(v => v.version === ValidatorVersion[PROJECT_VALIDATOR_VERSION]);
+            await Promise.all(projectValidators.map(async () => {
+                const allFarms = await projectValidators.contract.get_farms({ from_index: 0, limit: 1000 });
+                const allFarmsData = Promise.all(allFarms.map((_, index) => projectValidators.contract.get_farm({ farm_id: index })));
+                console.log(allFarmsData);
+            }));
+
 
             return {
                 accountId,
@@ -290,7 +309,7 @@ export const { staking } = createActions({
             if (totalUnstaked.lt(new BN(parseNearAmount('0.002')))) {
                 totalUnstaked = ZERO.clone();
             }
-            
+
             // validator specific
             const selectedValidator = await contract.get_staking_pool_account_id();
             if (!selectedValidator) {
@@ -301,7 +320,7 @@ export const { staking } = createActions({
                     mainAccountId: exAccountId
                 };
             }
-            let validator = validators.find((validator) => 
+            let validator = validators.find((validator) =>
                 validator.accountId === selectedValidator
             );
 
@@ -377,15 +396,14 @@ export const { staking } = createActions({
         GET_VALIDATORS: async (accountIds, accountId) => {
             const { current_validators, next_validators, current_proposals } = await wallet.connection.provider.validators();
             const currentValidators = shuffle(current_validators).map(({ account_id }) => account_id);
-
             if (!accountIds) {
                 const rpcValidators = [...current_validators, ...next_validators, ...current_proposals].map(({ account_id }) => account_id);
 
-                const networkId = wallet.connection.provider.connection.url.indexOf('mainnet') > -1 ? 'mainnet' : 'testnet';
+                const networkId = wallet.connection.provider.connection.url.indexOf(MAINNET) > -1 ? MAINNET : TESTNET;
                 const allStakingPools = (await fetch(`${ACCOUNT_HELPER_URL}/stakingPools`).then((r) => r.json()));
-
+                const prefix = getValidatorRegExp(networkId);
                 accountIds = [...new Set([...rpcValidators, ...allStakingPools])]
-                    .filter((v) => v.indexOf('nfvalidator') === -1 && v.indexOf(networkId === 'mainnet' ? '.near' : '.m0') > -1);
+                    .filter((v) => v.indexOf('nfvalidator') === -1 && v.match(prefix));
             }
 
             const currentAccount = wallet.getAccountBasic(accountId);

diff --git a/packages/frontend/src/redux/slices/staking/index.js b/packages/frontend/src/redux/slices/staking/index.js
@@ -14,7 +14,7 @@ export const selectStakingSlice = (state) => state[SLICE_NAME] || {};
 export const selectStakingAccounts = createSelector(selectStakingSlice, (staking) => staking.accounts || []);
 
 export const selectStakingCurrentAccountbyAccountId = createSelector(
-    [selectStakingAccounts, getAccountIdParam], 
+    [selectStakingAccounts, getAccountIdParam],
     (accounts, accountId) => accounts.find((account) => account.accountId === accountId)
 );