diff --git a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx index e0b80ce89b1..71ddc35a155 100644 --- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx +++ b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text, View } from 'react-native'; +import { View } from 'react-native'; import { useSelector } from 'react-redux'; import Avatar, { @@ -9,6 +9,7 @@ import Avatar, { import Badge, { BadgeVariant, } from '../../../../../../../component-library/components/Badges/Badge'; +import Text from '../../../../../../../component-library/components/Texts/Text'; import BadgeWrapper from '../../../../../../../component-library/components/Badges/BadgeWrapper'; import { useStyles } from '../../../../../../../component-library/hooks'; import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test'; diff --git a/app/components/Views/confirmations/components/Confirm/Info/QRInfo/QRInfo.tsx b/app/components/Views/confirmations/components/Confirm/Info/QRInfo/QRInfo.tsx index b01bda9ed72..924f4cb6977 100644 --- a/app/components/Views/confirmations/components/Confirm/Info/QRInfo/QRInfo.tsx +++ b/app/components/Views/confirmations/components/Confirm/Info/QRInfo/QRInfo.tsx @@ -1,11 +1,12 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react'; -import { Text, View, Linking, TouchableOpacity } from 'react-native'; +import { View, Linking, TouchableOpacity } from 'react-native'; import { UR } from '@ngraveio/bc-ur'; import { stringify as uuidStringify } from 'uuid'; import { ETHSignature } from '@keystonehq/bc-ur-registry-eth'; import { strings } from '../../../../../../../../locales/i18n'; import Engine from '../../../../../../../core/Engine'; +import Text from '../../../../../../../component-library/components/Texts/Text'; import AnimatedQRCode from '../../../../../../UI/QRHardware/AnimatedQRCode'; import AnimatedQRScannerModal from '../../../../../../UI/QRHardware/AnimatedQRScanner'; import Alert, { AlertType } from '../../../../../../Base/Alert'; diff --git a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.tsx b/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.tsx index a6a2c15efa0..aab7c80d1b5 100644 --- a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.tsx +++ b/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.tsx @@ -1,9 +1,10 @@ import React, { useMemo } from 'react'; import { Hex, isValidHexAddress } from '@metamask/utils'; -import { Text, View } from 'react-native'; +import { View } from 'react-native'; import { strings } from '../../../../../../../../locales/i18n'; import { useSignatureRequest } from '../../../../hooks/useSignatureRequest'; +import Text from '../../../../../../../component-library/components/Texts/Text'; import { useStyles } from '../../../../../../../component-library/hooks'; import { useTypedSignSimulationEnabled } from '../../../../hooks/useTypedSignSimulationEnabled'; import { parseSanitizeTypedDataMessage } from '../../../../utils/signature'; diff --git a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx b/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx index 52c3073fee7..3c70bbecd79 100644 --- a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx +++ b/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Simulation/components/NativeValueDisplay/NativeValueDisplay.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Text,TouchableOpacity, View } from 'react-native'; +import { TouchableOpacity, View } from 'react-native'; import { useSelector } from 'react-redux'; import { Hex } from '@metamask/utils'; import { BigNumber } from 'bignumber.js'; @@ -11,7 +11,11 @@ import { useTheme } from '../../../../../../../../../../util/theme'; import ButtonPill from '../../../../../../../../../../component-library/components-temp/Buttons/ButtonPill/ButtonPill'; import { ButtonIconSizes } from '../../../../../../../../../../component-library/components/Buttons/ButtonIcon/ButtonIcon.types'; import ButtonIcon from '../../../../../../../../../../component-library/components/Buttons/ButtonIcon/ButtonIcon'; -import { IconName , IconColor } from '../../../../../../../../../../component-library/components/Icons/Icon'; +import { + IconName, + IconColor, +} from '../../../../../../../../../../component-library/components/Icons/Icon'; +import Text from '../../../../../../../../../../component-library/components/Texts/Text'; import AssetPill from '../../../../../../../../../UI/SimulationDetails/AssetPill/AssetPill'; import { IndividualFiatDisplay } from '../../../../../../../../../UI/SimulationDetails/FiatDisplay/FiatDisplay'; @@ -66,15 +70,25 @@ const NativeValueDisplay: React.FC = ({ selectConversionRateByChainId(state, chainId), ); - const tokenAmount = isNumberValue(value) ? calcTokenAmount(value, NATIVE_DECIMALS) : null; - const isValidTokenAmount = tokenAmount !== null && tokenAmount !== undefined && tokenAmount instanceof BigNumber; - - const fiatValue = isValidTokenAmount && conversionRate - ? tokenAmount.times(String(conversionRate)).toNumber() - : undefined; - - const tokenValue = isValidTokenAmount ? formatAmount('en-US', tokenAmount) : null; - const tokenValueMaxPrecision = isValidTokenAmount ? formatAmountMaxPrecision('en-US', tokenAmount) : null; + const tokenAmount = isNumberValue(value) + ? calcTokenAmount(value, NATIVE_DECIMALS) + : null; + const isValidTokenAmount = + tokenAmount !== null && + tokenAmount !== undefined && + tokenAmount instanceof BigNumber; + + const fiatValue = + isValidTokenAmount && conversionRate + ? tokenAmount.times(String(conversionRate)).toNumber() + : undefined; + + const tokenValue = isValidTokenAmount + ? formatAmount('en-US', tokenAmount) + : null; + const tokenValueMaxPrecision = isValidTokenAmount + ? formatAmountMaxPrecision('en-US', tokenAmount) + : null; function handlePressTokenValue() { setHasValueModalOpen(true); @@ -88,19 +102,22 @@ const NativeValueDisplay: React.FC = ({ onPress={handlePressTokenValue} onPressIn={handlePressTokenValue} onPressOut={handlePressTokenValue} - style={[credit && styles.valueIsCredit, debit && styles.valueIsDebit]} - > - - {credit && '+ '} - {debit && '- '} - {tokenValue !== null && - shortenString(tokenValue || '', { - truncatedCharLimit: 15, - truncatedStartChars: 15, - truncatedEndChars: 0, - skipCharacterInEnd: true, - })} - + style={[ + credit && styles.valueIsCredit, + debit && styles.valueIsDebit, + ]} + > + + {credit && '+ '} + {debit && '- '} + {tokenValue !== null && + shortenString(tokenValue || '', { + truncatedCharLimit: 15, + truncatedStartChars: 15, + truncatedEndChars: 0, + skipCharacterInEnd: true, + })} + @@ -117,35 +134,35 @@ const NativeValueDisplay: React.FC = ({ )} {hasValueModalOpen && ( - /** - * TODO replace BottomModal instances with BottomSheet - * {@see {@link https://github.com/MetaMask/metamask-mobile/issues/12656}} - */ - setHasValueModalOpen(false)}> - setHasValueModalOpen(false)} - > - - - setHasValueModalOpen(false)} - iconName={IconName.ArrowLeft} - /> - - {modalHeaderText} - - - - {tokenValueMaxPrecision} + /** + * TODO replace BottomModal instances with BottomSheet + * {@see {@link https://github.com/MetaMask/metamask-mobile/issues/12656}} + */ + setHasValueModalOpen(false)}> + setHasValueModalOpen(false)} + > + + + setHasValueModalOpen(false)} + iconName={IconName.ArrowLeft} + /> + + {modalHeaderText} - - - )} + + {tokenValueMaxPrecision} + + + + + )} ); }; diff --git a/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx b/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx index c8d13cc54a5..5b63b66f9d2 100644 --- a/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx +++ b/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx @@ -1,8 +1,9 @@ import React, { ReactNode } from 'react'; -import { ScrollView, Text, TouchableOpacity, View } from 'react-native'; +import { ScrollView, TouchableOpacity, View } from 'react-native'; import { ConfirmationPageSectionsSelectorIDs } from '../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors'; import { strings } from '../../../../../../../locales/i18n'; +import Text from '../../../../../../component-library/components/Texts/Text'; import { useStyles } from '../../../../../../component-library/hooks'; import CopyButton from '../../UI/CopyButton'; import ExpandableSection from '../../UI/ExpandableSection'; diff --git a/app/components/Views/confirmations/components/Confirm/Title/Title.tsx b/app/components/Views/confirmations/components/Confirm/Title/Title.tsx index c65b56d2419..3b1c2d5a86e 100644 --- a/app/components/Views/confirmations/components/Confirm/Title/Title.tsx +++ b/app/components/Views/confirmations/components/Confirm/Title/Title.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { SignatureRequest } from '@metamask/signature-controller'; -import { Text, View } from 'react-native'; +import { View } from 'react-native'; import { TransactionType } from '@metamask/transaction-controller'; import { strings } from '../../../../../../../locales/i18n'; import { useStyles } from '../../../../../../component-library/hooks'; +import Text from '../../../../../../component-library/components/Texts/Text'; import useApprovalRequest from '../../../hooks/useApprovalRequest'; import { isSIWESignatureRequest } from '../../../utils/signature'; import { useSignatureRequest } from '../../../hooks/useSignatureRequest';