chore: update network info component for non evm networks (#13734)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR adds new copy and support for the NetworkInfo modal supports
non-evm networks.
This PR also adds a few [proposed design
changes](https://www.figma.com/design/fVhz69fbI9RWonNRN9MaYi/Mobile-network-education-modal?node-id=1-21&t=Pr6c0xsM0vZmZpQw-1)

![image](https://github.com/user-attachments/assets/889998d5-88ed-4507-9bf3-b023b47e43ad)

![image](https://github.com/user-attachments/assets/6951645e-3490-49e3-9a20-a0b44fbba5c6)


Also it creates a `selectEvmTicker` for get the ticker of evm current
selected network, and a `selectTicker` for the current overall selected
network.

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **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.

Author: tommasini

.eslintrc.js

@@ -78,10 +78,11 @@ module.exports = {
         'app/components/UI/Name/**/*.{js,ts,tsx}',
         'app/components/UI/SimulationDetails/**/*.{js,ts,tsx}',
         'app/components/hooks/DisplayName/**/*.{js,ts,tsx}',
-        'app/components/Views/confirmations/**/*.{js,ts,tsx}'
+        'app/components/Views/confirmations/**/*.{js,ts,tsx}',
       ],
       excludedFiles: [
-        'app/components/Views/confirmations/components/WatchAssetRequest/**/*.{js,ts,tsx}'],
+        'app/components/Views/confirmations/components/WatchAssetRequest/**/*.{js,ts,tsx}',
+      ],
       rules: {
         'no-restricted-syntax': [
           'error',
@@ -97,7 +98,7 @@ module.exports = {
               'selectProviderType',
               'selectRpcUrl',
               'selectSelectedNetworkClientId',
-              'selectTicker',
+              'selectEvmTicker',
             ]
               .map((method) => `^${method}$`)
               .join('|')}/]`,

app/components/Base/RemoteImage/index.js

@@ -23,7 +23,7 @@ import Badge, {
 import { useSelector } from 'react-redux';
 import {
   selectChainId,
-  selectTicker,
+  selectEvmTicker,
 } from '../../../selectors/networkController';
 import {
   getTestNetImageByChainId,
@@ -66,7 +66,7 @@ const RemoteImage = (props) => {
   const ipfsGateway = useIpfsGateway();
   const styles = createStyles();
   const chainId = useSelector(selectChainId);
-  const ticker = useSelector(selectTicker);
+  const ticker = useSelector(selectEvmTicker);
   const networkName = useSelector(selectNetworkName);
   const [resolvedIpfsUrl, setResolvedIpfsUrl] = useState(false);
 

app/components/UI/AccountFromToInfoCard/AccountFromToInfoCard.tsx

@@ -6,7 +6,7 @@ import TransactionTypes from '../../../core/TransactionTypes';
 import { strings } from '../../../../locales/i18n';
 import {
   selectEvmChainId,
-  selectTicker,
+  selectEvmTicker,
 } from '../../../selectors/networkController';
 import { collectConfusables } from '../../../util/confusables';
 import { decodeTransferData } from '../../../util/transactions';
@@ -195,7 +195,7 @@ const AccountFromToInfoCard = (props: AccountFromToInfoCardProps) => {
 const mapStateToProps = (state: RootState) => ({
   internalAccounts: selectInternalAccounts(state),
   chainId: selectEvmChainId(state),
-  ticker: selectTicker(state),
+  ticker: selectEvmTicker(state),
 });
 
 export default connect(mapStateToProps)(AccountFromToInfoCard);

app/components/UI/AccountInfoCard/index.js

@@ -13,7 +13,7 @@ import {
   selectConversionRate,
   selectCurrentCurrency,
 } from '../../../selectors/currencyRateController';
-import { selectTicker } from '../../../selectors/networkController';
+import { selectEvmTicker } from '../../../selectors/networkController';
 import { fontStyles } from '../../../styles/common';
 import {
   getLabelTextByAddress,
@@ -247,7 +247,7 @@ const mapStateToProps = (state) => ({
   internalAccounts: selectInternalAccounts(state),
   conversionRate: selectConversionRate(state),
   currentCurrency: selectCurrentCurrency(state),
-  ticker: selectTicker(state),
+  ticker: selectEvmTicker(state),
   transaction: getNormalizedTxState(state),
   activeTabUrl: getActiveTabUrl(state),
 });

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -13,7 +13,7 @@ import {
   selectEvmChainId,
   selectNativeCurrencyByChainId,
   selectSelectedNetworkClientId,
-  selectTicker,
+  selectEvmTicker,
 } from '../../../selectors/networkController';
 import {
   selectConversionRate,
@@ -104,7 +104,9 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const tokenBalances = useSelector(selectContractBalances);
   const selectedChainId = useSelector(selectEvmChainId);
 
-  const selectedTicker = useSelector((state: RootState) => selectTicker(state));
+  const selectedTicker = useSelector((state: RootState) =>
+    selectEvmTicker(state),
+  );
 
   const nativeCurrency = useSelector((state: RootState) =>
     selectNativeCurrencyByChainId(state, asset.chainId as Hex),

app/components/UI/AssetOverview/TokenDetails/TokenDetails.test.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../../../selectors/currencyRateController';
 import {
   selectProviderConfig,
-  selectTicker,
+  selectEvmTicker,
 } from '../../../../selectors/networkController';
 // eslint-disable-next-line import/no-namespace
 import * as reactRedux from 'react-redux';
@@ -214,7 +214,7 @@ describe('TokenDetails', () => {
           return mockCurrentCurrency;
         case selectProviderConfig:
           return { ticker: 'ETH' };
-        case selectTicker:
+        case selectEvmTicker:
           return 'ETH';
         default:
           return undefined;

app/components/UI/DrawerView/index.js

@@ -74,7 +74,7 @@ import {
   selectChainId,
   selectNetworkConfigurations,
   selectProviderConfig,
-  selectTicker,
+  selectEvmTicker,
 } from '../../../selectors/networkController';
 import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
 import { selectTokens } from '../../../selectors/tokensController';
@@ -1245,11 +1245,7 @@ class DrawerView extends PureComponent {
           backdropColor={colors.overlay.default}
           backdropOpacity={1}
         >
-          <NetworkInfo
-            onClose={this.onInfoNetworksModalClose}
-            type={providerConfig.type}
-            ticker={providerConfig.ticker}
-          />
+          <NetworkInfo onClose={this.onInfoNetworksModalClose} />
         </Modal>
 
         {this.renderProtectModal()}
@@ -1270,7 +1266,7 @@ const mapStateToProps = (state) => ({
   infoNetworkModalVisible: state.modals.infoNetworkModalVisible,
   passwordSet: state.user.passwordSet,
   wizard: state.wizard,
-  ticker: selectTicker(state),
+  ticker: selectEvmTicker(state),
   tokens: selectTokens(state),
   tokenBalances: selectContractBalances(state),
   collectibles: collectiblesSelector(state),

app/components/UI/NetworkInfo/InfoDescription/infoDescription.tsx

@@ -13,12 +13,10 @@ const createStyles = (colors: {
   StyleSheet.create({
     descriptionContainer: {
       marginBottom: 10,
-      borderBottomWidth: StyleSheet.hairlineWidth,
-      borderColor: colors.border.muted,
     },
     contentContainer: {
       flexDirection: 'row',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       marginBottom: 4,
     },
     numberStyle: {