Adding edit navigation button flow back to send token flow (#11335)

ui/ducks/confirm-transaction/confirm-transaction.duck.js

@@ -3,7 +3,7 @@ import {
   currentCurrencySelector,
   unconfirmedTransactionsHashSelector,
 } from '../../selectors';
-import { getNativeCurrency } from '../metamask/metamask';
+import { getNativeCurrency, getTokens } from '../metamask/metamask';
 
 import {
   getValueFromWeiHex,
@@ -25,6 +25,7 @@ const createActionType = (action) => `metamask/confirm-transaction/${action}`;
 
 const UPDATE_TX_DATA = createActionType('UPDATE_TX_DATA');
 const UPDATE_TOKEN_DATA = createActionType('UPDATE_TOKEN_DATA');
+const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS');
 const CLEAR_CONFIRM_TRANSACTION = createActionType('CLEAR_CONFIRM_TRANSACTION');
 const UPDATE_TRANSACTION_AMOUNTS = createActionType(
   'UPDATE_TRANSACTION_AMOUNTS',
@@ -37,6 +38,7 @@ const UPDATE_NONCE = createActionType('UPDATE_NONCE');
 const initState = {
   txData: {},
   tokenData: {},
+  tokenProps: {},
   fiatTransactionAmount: '',
   fiatTransactionFee: '',
   fiatTransactionTotal: '',
@@ -66,6 +68,13 @@ export default function reducer(state = initState, action = {}) {
           ...action.payload,
         },
       };
+    case UPDATE_TOKEN_PROPS:
+      return {
+        ...state,
+        tokenProps: {
+          ...action.payload,
+        },
+      };
     case UPDATE_TRANSACTION_AMOUNTS: {
       const {
         fiatTransactionAmount,
@@ -136,6 +145,13 @@ export function updateTokenData(tokenData) {
   };
 }
 
+export function updateTokenProps(tokenProps) {
+  return {
+    type: UPDATE_TOKEN_PROPS,
+    payload: tokenProps,
+  };
+}
+
 export function updateTransactionAmounts(amounts) {
   return {
     type: UPDATE_TRANSACTION_AMOUNTS,
@@ -296,9 +312,20 @@ export function setTransactionToConfirm(transactionId) {
       const { txParams } = transaction;
 
       if (txParams.data) {
-        const { data } = txParams;
+        const { to: tokenAddress, data } = txParams;
 
         const tokenData = getTokenData(data);
+        const tokens = getTokens(state);
+        const currentToken = tokens?.find(
+          ({ address }) => tokenAddress === address,
+        );
+
+        dispatch(
+          updateTokenProps({
+            decimals: currentToken?.decimals,
+            symbol: currentToken?.symbol,
+          }),
+        );
         dispatch(updateTokenData(tokenData));
       }
 

ui/ducks/confirm-transaction/confirm-transaction.duck.test.js

@@ -12,6 +12,7 @@ import ConfirmTransactionReducer, * as actions from './confirm-transaction.duck'
 const initialState = {
   txData: {},
   tokenData: {},
+  tokenProps: {},
   fiatTransactionAmount: '',
   fiatTransactionFee: '',
   fiatTransactionTotal: '',
@@ -307,8 +308,8 @@ describe('Confirm Transaction Duck', () => {
           nonce: '',
           tokenData: {},
           tokenProps: {
-            tokenDecimals: '',
-            tokenSymbol: '',
+            decimals: '',
+            symbol: '',
           },
           txData: {
             ...txData,

ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js

@@ -23,6 +23,7 @@ export default function ConfirmTokenTransactionBase({
   contractExchangeRate,
   conversionRate,
   currentCurrency,
+  onEdit,
 }) {
   const t = useContext(I18nContext);
 
@@ -69,6 +70,7 @@ export default function ConfirmTokenTransactionBase({
   return (
     <ConfirmTransactionBase
       toAddress={toAddress}
+      onEdit={onEdit}
       identiconAddress={tokenAddress}
       title={tokensText}
       subtitleComponent={
@@ -105,4 +107,5 @@ ConfirmTokenTransactionBase.propTypes = {
   contractExchangeRate: PropTypes.number,
   conversionRate: PropTypes.number,
   currentCurrency: PropTypes.string,
+  onEdit: PropTypes.func,
 };

ui/selectors/confirm-transaction.js

@@ -159,7 +159,7 @@ const contractExchangeRatesSelector = (state) =>
 
 const tokenDecimalsSelector = createSelector(
   tokenPropsSelector,
-  (tokenProps) => tokenProps && tokenProps.tokenDecimals,
+  (tokenProps) => tokenProps && tokenProps.decimals,
 );
 
 const tokenDataArgsSelector = createSelector(

ui/selectors/confirm-transaction.test.js

@@ -58,8 +58,8 @@ describe('Confirm Transaction Selector', () => {
           }),
         },
         tokenProps: {
-          tokenDecimals: '2',
-          tokenSymbol: 'META',
+          decimals: '2',
+          symbol: 'META',
         },
       },
     };