Merge pull request #2421 from near/fix-use-max-loading

fix: loading on receiver screen when use max is used
near · Feb 7, 2022 · fcccdab · fcccdab
2 parents ba4f547 + 0772666
commit fcccdab
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 24 deletions.
diff --git a/packages/frontend/src/components/send/SendContainerV2.js b/packages/frontend/src/components/send/SendContainerV2.js
@@ -14,7 +14,7 @@ import Review from './components/views/Review';
 import SelectToken from './components/views/SelectToken';
 import Success from './components/views/Success';
 
-const { getFormattedTokenAmount, getParsedTokenAmount } = FungibleTokens;
+const { getFormattedTokenAmount, getParsedTokenAmount, getUniqueTokenIdentity } = FungibleTokens;
 
 export const VIEWS = {
     ENTER_AMOUNT: 'enterAmount',
@@ -118,7 +118,7 @@ const SendContainerV2 = ({
             setIsMaxAmount(false);
             setUserInputAmount('');
         }
-    }, [selectedToken]);
+    }, [getUniqueTokenIdentity(selectedToken)]);
 
     useEffect(() => window.scrollTo(0, 0), [activeView]);
 
@@ -194,7 +194,7 @@ const SendContainerV2 = ({
                 <EnterReceiver
                     onClickGoBack={() => setActiveView(VIEWS.ENTER_AMOUNT)}
                     onClickCancel={() => redirectTo('/')}
-                    amount={getRawAmount()}
+                    amount={isMaxAmount ? selectedToken.balance : getRawAmount()}
                     selectedToken={selectedToken}
                     handleChangeReceiverId={(receiverId) => setReceiverId(receiverId)}
                     receiverId={receiverId}

diff --git a/packages/frontend/src/components/staking/components/Staking.js b/packages/frontend/src/components/staking/components/Staking.js
@@ -1,8 +1,9 @@
 import BN from 'bn.js';
 import React from 'react';
 import { Translate } from 'react-localize-redux';
+import { useSelector } from 'react-redux';
 
-import { useNEARAsTokenWithMetadata } from '../../../hooks/fungibleTokensIncludingNEAR';
+import { selectNEARAsTokenWithMetadata } from '../../../redux/slices/tokens';
 import FormButton from '../../common/FormButton';
 import SkeletonLoading from '../../common/SkeletonLoading';
 import Tooltip from '../../common/Tooltip';
@@ -28,7 +29,7 @@ export default function Staking({
     selectedValidator,
     multipleAccounts
 }) {
-    const nearAsFT = useNEARAsTokenWithMetadata();
+    const nearAsFT = useSelector(selectNEARAsTokenWithMetadata);
 
     return (
         <>

diff --git a/packages/frontend/src/components/staking/components/Validator.js b/packages/frontend/src/components/staking/components/Validator.js
@@ -2,12 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { Translate } from 'react-localize-redux';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useNEARAsTokenWithMetadata } from '../../../hooks/fungibleTokensIncludingNEAR';
 import { Mixpanel } from '../../../mixpanel';
 import { redirectTo } from '../../../redux/actions/account';
 import { selectAccountId } from '../../../redux/slices/account';
 import { selectActionsPending } from '../../../redux/slices/status';
-import { actions as tokensActions, selectAllContractMetadata } from '../../../redux/slices/tokens';
+import { actions as tokensActions, selectAllContractMetadata, selectNEARAsTokenWithMetadata } from '../../../redux/slices/tokens';
 import { PROJECT_VALIDATOR_VERSION, ValidatorVersion } from '../../../utils/constants';
 import FormButton from '../../common/FormButton';
 import SafeTranslate from '../../SafeTranslate';
@@ -63,7 +62,7 @@ export default function Validator({
     const [confirm, setConfirm] = useState(null);
     const [farmList, setFarmList] = useState([]);
     const [isFarmListLoading, setIsFarmListLoading] = useState(false);
-    const nearAsFT = useNEARAsTokenWithMetadata();
+    const nearAsFT = useSelector(selectNEARAsTokenWithMetadata);
     const accountId = useSelector(selectAccountId);
     const contractMetadataByContractId = useSelector(selectAllContractMetadata);
 

diff --git a/packages/frontend/src/components/wallet/Tokens.js b/packages/frontend/src/components/wallet/Tokens.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import FungibleTokens from '../../services/FungibleTokens';
 import TokenBox from './TokenBox';
 
+const { getUniqueTokenIdentity } = FungibleTokens;
+
 const StyledContainer = styled.div`
     width: 100%;
 
@@ -27,7 +30,7 @@ const Tokens = ({ tokens, onClick }) => {
     return (
         <StyledContainer>
             {tokens.map((token, i) => (
-                <TokenBox key={token.contractName || token.onChainFTMetadata?.symbol} token={token} onClick={onClick}/>
+                <TokenBox key={getUniqueTokenIdentity(token)} token={token} onClick={onClick}/>
             ))}
         </StyledContainer>
     );

diff --git a/packages/frontend/src/hooks/fungibleTokensIncludingNEAR.js b/packages/frontend/src/hooks/fungibleTokensIncludingNEAR.js
@@ -1,22 +1,10 @@
 import { useSelector } from "react-redux";
 
-import { selectAccountId, selectBalance } from "../redux/slices/account";
-import { selectNearTokenFiatValueUSD } from "../redux/slices/tokenFiatValues";
-import { selectTokensWithMetadataForAccountId } from "../redux/slices/tokens";
-
-export const useNEARAsTokenWithMetadata = () => {
-    const nearBalance = useSelector(selectBalance);
-    const nearTokenFiatValueUSD = useSelector(selectNearTokenFiatValueUSD);
-
-    return {
-        balance: nearBalance?.balanceAvailable || "",
-        onChainFTMetadata: { symbol: "NEAR" },
-        coingeckoMetadata: { usd: nearTokenFiatValueUSD },
-    };
-};
+import { selectAccountId } from "../redux/slices/account";
+import { selectNEARAsTokenWithMetadata, selectTokensWithMetadataForAccountId } from "../redux/slices/tokens";
 
 export const useFungibleTokensIncludingNEAR = function () {
-    const nearAsToken = useNEARAsTokenWithMetadata();
+    const nearAsToken = useSelector(selectNEARAsTokenWithMetadata);
     const accountId = useSelector(selectAccountId);
     const fungibleTokens = useSelector((state) =>
         selectTokensWithMetadataForAccountId(state, { accountId })

diff --git a/packages/frontend/src/redux/slices/tokens/index.js b/packages/frontend/src/redux/slices/tokens/index.js
@@ -5,8 +5,10 @@ import { createSelector } from 'reselect';
 
 import { WHITELISTED_CONTRACTS } from '../../../config';
 import FungibleTokens from '../../../services/FungibleTokens';
+import { selectBalance } from '../account';
 import createParameterSelector from '../createParameterSelector';
 import initialErrorState from '../initialErrorState';
+import { selectNearTokenFiatValueUSD } from '../tokenFiatValues';
 
 const SLICE_NAME = 'tokens';
 
@@ -202,4 +204,13 @@ export const selectTokensLoading = createSelector(
 const selectOneTokenLoading = createSelector(
     [selectOneTokenFromOwnedTokens],
     (token) => token.loading
+);
+
+export const selectNEARAsTokenWithMetadata = createSelector(
+    [selectBalance, selectNearTokenFiatValueUSD],
+    (nearBalance, nearTokenFiatValueUSD) => ({
+        balance: nearBalance?.balanceAvailable || "",
+        onChainFTMetadata: { symbol: "NEAR" },
+        coingeckoMetadata: { usd: nearTokenFiatValueUSD },
+    })
 );
diff --git a/packages/frontend/src/services/FungibleTokens.js b/packages/frontend/src/services/FungibleTokens.js
@@ -61,6 +61,10 @@ export default class FungibleTokens {
         return formattedTokenAmount;
     }
 
+    static getUniqueTokenIdentity(token) {
+        return token.contractName || token.onChainFTMetadata?.symbol;
+    }
+
     static async getLikelyTokenContracts({ accountId }) {
         return sendJson('GET', `${ACCOUNT_HELPER_URL}/account/${accountId}/likelyTokens`);
     }