fix: display conversion rate (#21185)

## **Description**
This PR solves one bug shown in this github issue:
#20106

When you try to send a token, on Polygon, it does not show the
conversion of the amount, it just shows "ETH".

If you chose "FIAT" in the settings=>general, this issue does not occur.
This only happens when you choose crypto.

PS: I have also noticed this issue on BNB chain. On Ethereum network,
all works fine. If you try to send a token on other chains, you won't be
able to see the conversion correctly and it will always just show "ETH".

## **Manual testing steps**

_1. Chose polygon network
_2. Go to settings => General and choose "MATIC" as the primary
currency.
_3. Go back to the home screen and choose a token to send (exp USDC)
_4. Click on the "send" button and choose an account
_5. Notice that if you type "5" in the amount input, you will see "ETH"
as the conversion of that amount.

(The same steps are applicable on BNB chain)

## **Screenshots/Recordings**

_If applicable, add screenshots and/or recordings to visualize the
before and after of your change._

### **Before**

On Polygon


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/56959e21-d14c-4cc4-a950-46ec240476dd)

On BNB


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/de6aac12-b250-4b56-b1d2-4f38c21fd6c2)


### **After**

On Polygon:


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/19ed9179-0f55-4f90-8c9b-4cc8ee49f1a1)

On BNB:


![image](https://github.com/MetaMask/metamask-extension/assets/10994169/8c5819f3-62e5-4156-9e76-406c760c8827)


## **Related issues**

(_Fixes
#MMASSETS-26)[https://consensyssoftware.atlassian.net/browse/MMASSETS-26]

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained:
  - [x] What problem this PR is solving.
  - [x] How this problem was solved.
  - [x] How reviewers can test my changes.
- [x] I’ve indicated what issue this PR is linked to: Fixes #???
- [x] I’ve included tests if applicable.
- [x] I’ve documented any added code.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
- [ ] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/ui/token-input/token-input.component.js

@@ -33,6 +33,7 @@ export default class TokenInput extends PureComponent {
       symbol: PropTypes.string,
     }).isRequired,
     tokenExchangeRates: PropTypes.object,
+    nativeCurrency: PropTypes.string,
     tokens: PropTypes.array.isRequired,
   };
 
@@ -104,7 +105,9 @@ export default class TokenInput extends PureComponent {
       hideConversion,
       token,
       tokens,
+      nativeCurrency,
     } = this.props;
+
     const { decimalValue } = this.state;
 
     const existingToken = tokens.find(({ address }) =>
@@ -127,8 +130,8 @@ export default class TokenInput extends PureComponent {
       currency = currentCurrency;
       numberOfDecimals = 2;
     } else {
-      // Display ETH
-      currency = EtherDenomination.ETH;
+      // Display Native currency
+      currency = nativeCurrency;
       numberOfDecimals = 6;
     }
 
@@ -138,7 +141,6 @@ export default class TokenInput extends PureComponent {
       fromCurrency: EtherDenomination.ETH,
       fromDenomination: EtherDenomination.ETH,
     });
-
     return tokenExchangeRate ? (
       <CurrencyDisplay
         className="currency-input__conversion-component"

ui/components/ui/token-input/token-input.component.test.js

@@ -3,6 +3,7 @@ import configureMockStore from 'redux-mock-store';
 import { fireEvent } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import mockState from '../../../../test/data/mock-state.json';
+import { NETWORK_TYPES, CHAIN_IDS } from '../../../../shared/constants/network';
 import TokenInput from '.';
 
 describe('TokenInput Component', () => {
@@ -55,6 +56,32 @@ describe('TokenInput Component', () => {
       expect(queryByTitle('0 ETH')).toBeInTheDocument();
     });
 
+    it('should render conversionRate on polygon', () => {
+      const showFiatState = {
+        ...mockState,
+        metamask: {
+          ...mockState.metamask,
+          nativeCurrency: 'MATIC',
+          preferences: {
+            ...mockState.metamask.preferences,
+            showFiatInTestnets: true,
+          },
+          providerConfig: {
+            chainId: CHAIN_IDS.POLYGON,
+            type: NETWORK_TYPES.MAINNET,
+          },
+        },
+      };
+      const mockStore = configureMockStore()(showFiatState);
+
+      const { queryByTitle } = renderWithProvider(
+        <TokenInput {...props} />,
+        mockStore,
+      );
+
+      expect(queryByTitle('0 MATIC')).toBeInTheDocument();
+    });
+
     it('should render showFiat', () => {
       const showFiatState = {
         ...mockState,

ui/components/ui/token-input/token-input.container.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { getTokenExchangeRates, getShouldShowFiat } from '../../../selectors';
+import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import TokenInput from './token-input.component';
 
 const mapStateToProps = (state) => {
@@ -12,6 +13,7 @@ const mapStateToProps = (state) => {
     currentCurrency,
     tokenExchangeRates: getTokenExchangeRates(state),
     hideConversion: !getShouldShowFiat(state),
+    nativeCurrency: getNativeCurrency(state),
     tokens,
   };
 };